/*
---------------------------------------------
 Design & Code (c) Wild Moose Justyna Walczak
---------------------------------------------
*/

.clear { clear: both; height: 1%;}
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear { display: inline-block;}
/* Hides from IE-mac \*/
* html .clear { height: 1%;}
.clear { display: block;}
/* End hide from IE-mac */

* { margin: 0; padding:0; border: 0;}

html { width: 100%; height: 100%;}
body { font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 62.5%; background: #F3F3F3 url(img/bg_top.jpg) 0 0 repeat-x;}

p          { margin: 10px; font-size: 12px; line-height: 1.6em;}
a, a:hover { text-decoration: none;}
ul         { list-style-type: none;}

h1, h2, h3, h4, h5, h6 { margin: 10px; font-weight: normal; color: #645444;}
h2 { font-size: 18px;}

p acronym  { padding: 2px 2px 1px 2px; text-transform: uppercase; color: #687175; font-size: 11px;}
	
.fl {	float: left;}
.fr { float: right;}

#kontener { width: 978px;	margin: 0 auto; text-align: left; background-color: #fff; border-top: 4px solid #e7f27d; color: #645444;}

#top                { width: 978px; height: 40px; clear: both; padding-top: 24px;}
	.menu             { width: 778px; height: 20px; margin: 10px 0; text-transform: uppercase; word-spacing: 1px;}
	.menu a,
	.menu a:hover     { margin: 0 10px; font-size: 13px; color: #3f3323;}

	.menu.male        { text-align: right;}
	.menu.male a      { margin: 0 10px; font-size: 10px; font-weight: normal; color: #6b6254;}
	.menu.male a:hover{ font-size: 10px; color: #6b6254; text-decoration: underline;}

#kontener_body { width: 100%; clear: both; margin: 0;}
	.lewa        { width: 798px; float: left; clear: left; margin: 0;}
	.prawa       { width: 180px; float: right; clear: right; margin: 0;}

/*
------------------
LEWA_LEWA
------------------
*/

.lewa_lewa          { width: 370px; float: left; clear: left; margin: 0; padding: 20px 10px; position: relative;}
	.dzial            { width: 349px; height: 340px; margin: 0 auto; background-color: transparent; background-position: 0 0;
											background-repeat: no-repeat; position: relative;}
	.dzial_tyt        { width: 218px; height: 90px; margin-left: 143px; padding-top: 5px; background-position: 190px 10px;
											background-repeat: no-repeat; text-align: right; position: absolute; top: 200px; right: 0;}
	.dzial_tyt p      { margin: 30px 10px 10px; font-size: 16px; color: #fff;}
	.dzial_tyt strong { display: block; text-transform: uppercase;}
	.dzial_txt        { width: 339px; height: auto; margin: 0 auto; padding: 10px 5px; background-color: transparent;}

/*
------------------
LEWA_PRAWA
------------------
*/

.lewa_prawa { width: 386px; float: right; clear: right; margin: 0; padding: 20px 10px 100px; position: relative; border-right: 1px solid #e6e3df; border-left: 1px solid #e6e3df;}
	.folio       { width: 96%; clear: both; margin: 10px auto 0;}
	.proj        { width: 180px; margin-bottom: 10px;}
	.img         { width: 100%; height: 118px; overflow: hidden;}
	.img img     { width: auto; padding: 2px; border: 1px solid #e6e3df;}	
	.txt         { width: 180px; margin: 5px 0; font-size: 11px; color: #918b86;}
	.opis        {	margin: 5px 0 0; font-size: 11px;}
	.txt a       { margin-top: 0px; padding-top: 10px; font-size: 11px; color: #3f3323;}
	.txt a:hover { color: #918b86;}
.lewa_prawa ul    { margin: 10px;}
.lewa_prawa ul li { margin: 10px 0; padding-left: 8px; font-size: 12px; line-height: 1.6em; 
										background: transparent url(img/li.jpg) 0 8px no-repeat;}
.lewa_prawa h1,
.lewa_prawa h1 acronym { font-size: 24px; margin: 10px; text-align: right; text-transform: uppercase;}
.lewa_prawa h1 em { display: block; font-size: 14px; font-style: normal; text-transform: lowercase;}
.lewa_prawa p a   { color: #e73a01;}
.lewa_prawa p a:hover  { text-decoration: underline;}
.produkty { margin: 10px; float: left;}
	
/*
------------------
PRAWA_PRAWA
------------------
*/

.prawa_prawa { width: 140px; margin: 0 auto; padding: 20px 20px;}

.panel      { margin-bottom: 10px; font-size: 11px;}
.panel span { display: block; margin-bottom: 10px; text-align: right; font-size: 14px; color: #fe7f56;}

.panel p        { margin: 10px auto; font-size: 12px;}
.panel p strong { display: block; margin-bottom: 5px; padding-left: 15px; border-bottom: 1px solid #e6e3df;}
.panel p strong { background: transparent url(img/img_akt.gif) 0 5px no-repeat; font-size: 11px;}
.panel p a      { color: #645444;}
.panel p a:hover{ color: #fe7f56;}

.loga_kl { width: 140px; height: 115px; margin: 0 auto; padding: 5px 0; background-color: #fff/*fe7f56*/; position: relative;}
	#box          { position: absolute;}
	#box span     { display: block;	float:left;}
	.mask         { position: relative; width: 133px; height: 115px; overflow: hidden;}
	#box span img { display: block; border: none;}

.tel div    { display: block; margin: 0; padding: 10px; background-color: #f8f7f3;}
.tel p,
.tel p a      { color: #e73a01;}
.tel p.nr     { font-size: 16px; line-height: 20px;}
.tel p a      { font-size: 14px;}
.tel p a:hover{ font-size: 14px; text-decoration: underline;}
.tel p strong { font-weight: normal; color: #645444; background-image: none; padding-left: 0;}

/*
------------------
STOPKA
------------------
*/

.stopka { clear: both;}
.stopka p       { width: 920px; margin: 0 auto; padding: 10px; text-align: center; border-top: 1px solid #e6e3df;}
.stopka a,
.stopka p       { font-size: 10px; color: #918b86;}
.stopka a       { margin: 0 2px;}
.stopka a:hover { text-decoration: underline;}

/*
------------------
PODSTRONYV
------------------
*/


/*first*/
#first #kontener_body { background: transparent url(img/first.jpg) top center no-repeat;}
#first .haslo { width: 940px; height: 87px; margin: 0 auto; text-align: right;}
#first h1     { margin-right: 100px; font-size: 26px; line-height: 87px; color: #fe7f56;}
#first .tlo       { width: 940px; height: 210px; margin: 0 auto; padding: 40px 0; background-color: transparent;}
#first .tlo ul    { margin-left: 550px;}
#first .tlo ul li { margin: 5px 0; padding-left: 10px; font-size: 14px; line-height: 1.6em; color: #2f383c; 
										background: transparent url(img/fi_li.gif) 0 8px no-repeat;}
#first .first_panel { width: 940px; height: 200px; margin: 0 auto; background-color: #F8F7F3;}
#first .panel       { width: 250px; margin: 10px 5px; padding: 10px;}
#first .panel span  { text-align: left; font-size: 14px;}
#first .tel         { border-left: 1px solid #e3e0d7; border-right: 1px solid #e3e0d7;}
#first .tel div     { padding: 0;}


/*seo*/
#seo .menu a.seo,
.menu a.seo:hover{ text-decoration: underline;}
#seo .menu a.seo,
.menu a.seo:hover,
#seo h1,
#seo h1 acronym { color: #9b8053;}
#seo .dzial     { background-image: url(img/seo.jpg);}
#seo .dzial_tyt { background-color: #9b8053; background-image: url(img/dzial_bg_seo.gif);}

/*sem*/
#sem .menu a.sem,
.menu a.sem:hover{ text-decoration: underline;}
#sem .menu a.sem,
.menu a.sem:hover,
#sem h1,
#sem h1 acronym { color: #5463b8;}
#sem .dzial     { background-image: url(img/sem.jpg);}
#sem .dzial_tyt { background-color: #5463b8; background-image: url(img/dzial_bg_sem.gif);}

/*php*/
#php .menu a.php,
.menu a.php:hover{ text-decoration: underline;}
#php .menu a.php,
.menu a.php:hover,
#php h1         { color: #487AAB;}
#php .dzial     { background-image: url(img/php.jpg);}
#php .dzial_tyt { background-color: #83acd4; background-image: url(img/dzial_bg_php.gif);}

/*cms*/
#cms .menu a.cms,
.menu a.cms:hover{ text-decoration: underline;}
#cms .menu a.cms,
.menu a.cms:hover,
#cms h1,
#cms h1 acronym { color: #3f6957;}
#cms .dzial     { background-image: url(img/cms.jpg);}
#cms .dzial_tyt { background-color: #3f6957; background-image: url(img/dzial_bg_cms.gif);}

/*dora*/
#dora .menu a.dora,
.menu a.dora:hover{ text-decoration: underline;}
#dora .menu a.dora,
.menu a.dora:hover,
#dora h1         { color: #5b7582;}
#dora .dzial     { background-image: url(img/dora.jpg);}
#dora .dzial_tyt { background-color: #7c96a3; background-image: url(img/dzial_bg_dora.gif);}

/*graf*/
#graf .menu a.graf,
.menu a.graf:hover{ text-decoration: underline;}
#graf .menu a.graf,
.menu a.graf:hover,
#graf h1         { color: #a243ab;}
#graf .dzial     { background-image: url(img/graf.jpg);}
#graf .dzial_tyt { background-color: #a243ab; background-image: url(img/dzial_bg_graf.gif);}
#graf p.p        { width: 349px; height: 262px; margin: 0 auto; position: relative; background: #fff url(img/p.jpg) no-repeat 100% 100%; text-align: right;}
#graf p.p em     { font-size: 10px; color: #687175; display: block;}
#graf p.p a      { font-size: 14px; color: #687175; text-align: right;}
#graf p.p a:hover{ color: #a243ab;}

/*kontakt*/
#map { width: 349px; height: 340px;}

.dane   { width: 170px; padding: 10px 10px;}
.br     { border-right: 1px solid #e3e0d7;}
.dane a { color: #e73a01;}

.form_kont      { width: 340px; margin-bottom: 25px; padding: 20px; background-color: #f8f7f3; border: 1px solid #e3e0d7;}
.form_kont span { color: #645444; font-size: 14px;}
#kont form      { display: block; padding-bottom: 20px;}

#kont form input,
#kont form textarea,
#kont form label    { float: left; font-size: 11px;}
#kont form input,
#kont form textarea { width: 240px; margin-bottom: 5px; padding: 5px; border-bottom: 1px solid #e3e0d7;}

#kont form textarea { height: 80px;}
#kont form label    { display: block; width: 56px; margin: 0 10px 0 0; padding: 6px 0 0 0; color: #645444; text-align: right;}
#kont form p        { clear: both;}
#kont form .submit  { width: 100px; margin-left: 66px; padding: 5px; background-color: #645444; color: #fff; cursor: pointer;}

/*mapa*/
#mapa li a { color: #645444;}
#mapa li a:hover{ color: #fe7f56; text-decoration: underline;}