/* =============================================================================
                                                                       OGOLNE
============================================================================= */
html, body{
  width: 100%;
  padding: 0px 0px 0px; margin: 0px;
  background: rgb(235,234,233) url(graf/tlo_top.png) repeat-x top center;
  color: #000;
  font: normal 11px tahoma, arial, geneva, sans-serif;
}

img{ display: block; border: none; }
form{ margin: 0px; padding:0px;}
h2{ font-size: 15px; margin: 0px; padding: 20px 0px 10px; }
h2 span{ font-size: 11px;}


a{ text-decoration: none; color: rgb(210,0,0);} 
a:hover{ text-decoration: underline; }
a:visited{ color: rgb(210,0,0); }

/*  color: rgb(240,129,40); */

.strong, strong{ font-weight: bold; }
.center{ text-align: center};
.clr{ clear: both; }

.black{ color: rgb(50,50,50);}

.wrong{ text-align: center; text-transform: uppercase; font-weight: bold; color: rgb(204,0,51); }
.ok{ text-align: center; text-transform: uppercase;  font-weight: bold; color: rgb(0,204,0); }
/* =============================================================================
                                                                       WRAPER
============================================================================= */

#whole{
/*  background: url(graf/tlo_bottom.jpg) repeat-x center bottom; */
  background: rgb(228,227,226) url(graf/tlo_top.png) repeat-x top center;
}
#top{
  width: 972px;
  margin: 0px auto;
  height: 350px;
  background: url(graf/top.jpg) no-repeat 50% 0px;
}
#logo{
  float: left;
  width: 230px; height: 55px;
  padding: 40px 10px 0px 20px; margin: 0px;
  overflow: hidden;
}
h1#logo a{
  display: block;
  padding-top: 90px;
  background: url(graf/logo.gif) no-repeat left top;
}
h1#logo a:hover{
  opacity: 0.7; 
  filter: alpha(opacity=70);
}

ul#menu{
  float: right;
  width: 700px; height: 33px;
  background: rgb(70,70,70);
  list-style: none;
  margin: 48px 0px;
  padding: 0px;
  border-bottom: 5px rgb(230,0,0) solid;
  overflow: hidden;  
}
ul#menu li{ display:block; float: left;}
ul#menu li.last{ float: right; background: rgb(51,51,51) }

ul#menu a{
  display: block; float: left;
  padding: 40px 13px 0px;
  background-repeat: no-repeat; background-position: 50% top;
}
ul#menu li.last a{ overflow: hidden; padding: 40px 10px 0px; background-position: 10px 14px; }
ul#menu a:hover, ul#menu a.active{ background-position: 50% -42px; background-color: rgb(51,51,51);  }
ul#menu li.last a:hover{ background-position: 10px 14px; }

ul#menu a.glowna{ width: 84px; background-image: url(graf/menu/glowna.gif);}
ul#menu a.onas{ width: 32px; background-image: url(graf/menu/onas.gif);}
ul#menu a.uslugi{ width: 35px; background-image: url(graf/menu/uslugi.gif);}
ul#menu a.produkty{ width: 50px; background-image: url(graf/menu/produkty.gif);}
ul#menu a.realizacje{ width: 58px; background-image: url(graf/menu/realizacje.gif);}
ul#menu a.kalkulator{ width: 58px; background-image: url(graf/menu/kalkulator.gif);}
ul#menu a.kontakt{ width: 43px; background-image: url(graf/menu/kontakt.gif);}
ul#menu a.wspolpraca{ width: 68px; background-image: url(graf/menu/wspolpraca.gif);}

ul#menu a.sitemap{ width: 11px; background-image: url(graf/menu/sitemap.gif);}
ul#menu a.list{ width: 11px; background-image: url(graf/menu/list.gif);}

#dark{ float: left; position:relative; width: 970px;; height: 43px; margin-top: 162px; padding-bottom: 10px; border: 1px rgb(222,221,220) solid; border-top:none; border-bottom: none; }
#dark img.witaj{ float: left; height: 14px; padding: 15px 310px 14px 37px ; }
#dark label{ float: left; padding: 5px 13px 0px 0px; }
#dark input{ float: left; border: 1px rgb(234,234,234) solid; width: 105px; }
#dark input.submit{ width: 45px; height: 15px; margin: 1px 0px 0px 7px;}
#dark div{ float: left; width: 220px; padding: 11px 0px 0px 30px; overflow: hidden; }

#content{
  width: 950px;
  margin: 0px auto; padding: 0px 10px 10px;
  border: 1px rgb(222,221,220) solid; border-top:none;
  background-color: #FFF;
}

#content p{ padding: 9px 0px 6px; margin: 0px; }
#content a.wiecej{ background: url(graf/mark_wiecej.gif) no-repeat 2px 4px; padding-left: 12px; font-weight: bold;  }
#content div.firma{
  float: left;
  width: 275px;
  padding: 0px 29px 5px; margin: 0px;
  background-color: rgb(242,242,242);
  color: rgb(108,109,114);
  line-height: 17px;
}

#content div.produkty{
  float: left;
  width: 372px;
  border: 1px rgb(244,244,244) solid; border-top: none; border-bottom-color: rgb(222,221,220);
}

#content div.produkty a{ font-weight: bold; }
#content div.produkty div.first{ float: left; width: 157px; padding: 3px 0px 0px 20px; }
#content div.produkty div.second{ float: left; width: 158px; padding: 3px 0px 0px 18px; }
#content div.produkty div.third{ float: left; width: 329px; margin-left: 23px; }
#content div.produkty div h2{ padding: 12px 0px 8px; margin: 0px; }
#content div.produkty ul{ margin: 0px; padding: 0px; list-style: none; }
#content div.produkty li{ border-bottom: 1px rgb(242,242,242) solid; }
#content div.produkty li a{ display: block; padding: 9px 0px 9px 20px; background: url(graf/mark_lista_grey.gif) no-repeat 4px 50%; }

#content div#dystrybutor{
  float: left; clear: both;
  padding: 0px; margin: 0px;
  width: 372px;
  background: url(graf/tlo_dystrybutor.png) repeat-x left bottom;
/*  border-bottom: 1px rgb(215,231,238) solid; */
}
#content div#dystrybutor div{
  float: left;
  width: 215px;
  background: url(graf/separator_dystrybutor.png) no-repeat right bottom;
}
#content div#dystrybutor .klimatyzator{
  float: right;
  padding: 22px 25px 12px 0px;
}
#content div#dystrybutor .logo{
  padding: 2px 0px 13px 25px;
}
#content div#dystrybutor a:hover .logo{
  opacity: 0.8; 
  filter: alpha(opacity=80);
}

#content div.uslugi{
  float: left;
  width: 210px;
  padding: 0px 0px 0px 28px;
}
#content div.uslugi p.ul{
  background: url(graf/mark_uslugi.gif) no-repeat 0px 8px;
  text-indent: 24px;
  padding: 5px 0px 3px;
  line-height: 16px;
}
#content div.uslugi a.mapka{
  display: block;
  float: left;
  padding: 0px; margin-right: 10px;
  border: 1px rgb(222,221,220) solid;
}

#stopka{ clear: both; height: 65px; width: 100%;   padding: 24px 0px 0px; color: rgb(105,110,117); background: url(graf/tlo_stopka.png) repeat-x left top; }
#stopka div.okalajacy{ width: 900px; padding: 0px 35px; margin: 0px auto; }

#stopka div.wykonanie{ float: right;}
#stopka div.copyright{ float: left;}

/* KONTAKT ******************************************************************* */
#content #side{
  float: left;
  width: 228px;
}

#content div.produkty_side{
  float: left;
  width: 186px;
  padding: 0px 21px 10px;
  background-color: rgb(242,242,242); /* rgb(242,242,242) */
  color: rgb(108,109,114);
  line-height: 17px;
}
#content div.produkty_side ul{
  padding: 0px; margin: 0px;
  list-style: none;
  font-weight: bold;
}
#content div.produkty_side ul li{
  float: left;
}
#content div.produkty_side a{
  display: block; float: left;
  width: 161px;
  padding: 4px 0px 3px 25px;
  background: url(graf/mark_produkty.gif) no-repeat left 50%;
}
#content div.produkty_side .active{
  color: rgb(70,70,70);
}

#content #side div.newsletter{
  float: left;
  width: 180px; height: 72px;
  padding: 0px 20px 0px 26px; margin: 10px 0px;  
  background: url(graf/tlo_dystrybutor.png) repeat-x left bottom;
  border: 1px rgb(222,221,220) solid;
}

#content #side div.newsletter{
  color: rgb(158,194,211);
}

#content #side div.newsletter input{ float: left; color: rgb(122,121,120); border: 1px rgb(222,221,220) solid; width: 120px; }
#content #side div.newsletter input.submit{ float: right; display: block; border: none; width: 45px; margin: 2px 0px 0px;}

#content div.text{
  float: left;
  width: 695px;
  padding: 0px 0px 10px 21px;
}

#content .text ul.lista{ margin: 0px; padding: 0px; list-style: none; }
#content .text ul.lista li{ padding: 4px 0px 3px 20px; background: url(graf/mark_lista_red.gif) no-repeat 4px 9px;}
#content .text ul.lista ul{ list-style: none; margin: 0px; padding: 4px 10px 0px;}


table#realizacje{
  width: 100%;
  margin-top: 8px;
  border: 1px rgb(228,227,226) solid;
  border-collapse: collapse;
}
table#realizacje td{
  border: 1px rgb(228,227,226) solid;
  padding: 2px 10px;
}
table#realizacje th{
  border: 1px rgb(228,227,226) solid;
  background: rgb(249,249,249);
  padding: 2px 10px;
}

#content div.dane_kontaktowe{
  float: left;
  width: 220px;
  border-right: 1px rgb(244,244,244) solid;
  padding: 0px 20px 10px;
}
#content div.formularz_kontakt{
  float: left;
  width: 186px;
  border-right: 1px rgb(244,244,244) solid;
  padding: 0px 25px 10px;
}
#content div.formularz_kontakt label{
  display: block;
  width: 100%; padding-bottom: 2px;
}
#content div.formularz_kontakt input{ width: 100%; border: 1px rgb(229,229,229) solid; }
#content div.formularz_kontakt textarea{ width: 100%; border: 1px rgb(229,229,229) solid; }
#content div.formularz_kontakt input.submit{ display: block; width: auto; margin: 6px auto 0px; background-color: rgb(251,192, 0); color: #FFF;  font-weight: bold; border: none; }

#content div.mapka{
  float: left;
  width: 192px;
  padding: 0px 14px 10px 18px;
}
#content div.mapka p{
  text-align: center;
}
#content div.mapka p a, #content div.dane_kontaktowe a{
  font-weight: bold;
}

#content ul#kratka_klimatyzatory{
  float: left;
  padding: 0px; margin: 8px 0px 0px;
  list-style: none;
  border: 1px rgb(222,221,220) solid;
}
#content ul#kratka_klimatyzatory li{
  float: left;
  background: url(graf/tlo_dystrybutor.png) repeat-x left bottom;
}
#content ul#kratka_klimatyzatory a{
  display: block;
  width: 114px; height: 87px;
  font-weight: bold;
  text-align: center;
  border-right: 1px rgb(222,221,220) solid;
}
#content ul#kratka_klimatyzatory a.last{
  border: none;
}
#content ul#kratka_klimatyzatory a span{
  display: block; padding: 2px 0px;
  background-color: rgb(222,221,220);
  color: rgb(220,0,0);
}
#content ul#kratka_klimatyzatory a img{
  margin: 0px auto;
  padding-top: 8px;
}
#content ul#kratka_klimatyzatory a:hover span{
  background-color:rgb(220,0,0);
  color: #FFF;
  text-decoration: none;
}

#content .kategorie{
  float: left;
}
#content .kategorie a{
  display: block;
  float: left;
  width: 169px;
  margin: 0px 2px 4px 0px; padding: 0px;
  font-weight: bold;
  text-align: center;
  border: 1px rgb(222,221,220) solid;
}
#content .kategorie a.last{
  margin-right: 0;
}
#content .kategorie a span{
  display: block; padding: 2px 0px;
  background-color: rgb(222,221,220);
  color: rgb(220,0,0);
}
#content .kategorie a:hover span{
  background-color:rgb(220,0,0);
  color: #FFF;
  text-decoration: none;
}


#content div.nadprodukt{
  float: left;
  width: 342px;
}
#content div.podprodukt, #content div.klima{
  float: left;
  padding: 0px; margin: 8px 0px;
  border: 1px rgb(222,221,220) solid;
  width: 340px;
  background: url(graf/tlo_dystrybutor.png) repeat-x left bottom;
}
#content div.klima{
  width: 100%; 
}
#content div.podprodukt ul.linki{
  margin: 0px; padding: 0px;
}
#content div.podprodukt ul.linki li{
  width: 100%; background: rgb(242,242,242); border-bottom: 1px rgb(222,221,220) solid; padding:0px; text-align: center;
}
#content div.podprodukt ul.linki a{
  display: block; padding: 3px 0px;
}
#content div.podprodukt ul.linki a:hover{
  background-color: rgb(255,255,255); text-decoration: none;
}
#content div.podprodukt p{ padding: 10px 10px; }
#content div.klima p{ padding: 10px 10px 6px; margin: 0px; }

#content div.odstep{
  margin-left: 10px;
}
#content div.podprodukt h2, #content div.klima h2{
  padding: 3px 5px; margin: 0px 0px 0px;
  background: rgb(222,221,220);
  color: #000;
  font-size: 11px;
  text-align: center;
  clear: none;
}
#content div.podprodukt img{
  margin: 15px auto 10px;
}
#content div.podprodukt ul, #content div.klima ul{
  list-style: none;
  padding: 0px 0px 10px; margin: 0px;
}
#content div.klima ul{
  margin-left: 20px;
}
#content div.klima img{ float:right; padding: 10px 10px }


#content div.podprodukt li, #content div.klima li{ padding: 4px 0px 3px 20px; background: url(graf/mark_lista_red.gif) no-repeat 4px 50%;}

#content div.opis_serii h3, #content div.klima h3{
  background: url(graf/mark_uslugi.gif) no-repeat 0px 8px;
  text-indent: 24px;
  padding: 5px 0px 3px; margin: 0px;
  font-size: 11px;
}
#content div.opis_serii p{
  padding: 6px 0px 4px;
}

#content .logo_produkty{
  float: right; padding: 10px 20px 0px 0px;
}



div.kalkulator table.sciany { width: 100%; margin: 10px 0px 10px; border: 1px rgb(222,221,220) solid; border-collapse: collapse; }
div.kalkulator table.sciany td{ border: 1px rgb(222,221,220) solid; text-align: center; padding: 2px 5px; }
div.kalkulator table.sciany th{ border: 1px rgb(222,221,220) solid; background-color: rgb(242,242,242); padding: 2px 8px; }
div.kalkulator input{ width: 50px; text-align: right; }
div.kalkulator table.reszta label{ display: block; width: 200px; }
div.kalkulator table.reszta select{width: 200px;}  
div.kalkulator input.submit{ width: auto; margin: 5px 0px; border: none; }

div.kalkulator .prosty { width: 100%; margin: 10px 0px 0px; border: none; }
div.kalkulator .prosty td { border: none; text-align: center; padding: 0px 5px; }
div.kalkulator .prosty label{ display: block; width: 180px; float: left; padding: 6px 0px 0px 30px; }

#content p.alert{ padding-left: 12px; color: #F00; background: url(graf/mark_lista_red.gif) no-repeat 0px 13px;}
#content p.approved{ padding-left: 12px; color: #0A0; background: url(graf/mark_lista_grey.gif) no-repeat 0px 20px;}

span.wymagane{ font-weight: bolder; color: #F00; }


/* NAGLOWKI */

#content h1{ margin: 0px; padding: 23px 0px 7px;}
#content div.produkty h1{ margin-left: 27px; }
#content #side div.newsletter h1{ padding: 12px 0px 10px; }

#content h1{
  overflow: hidden;
  padding: 23px 0px 7px;
  height: 16px;
  background-position: 0px 23px;
  background-repeat: no-repeat;
  font-size: 11px;
}
#content h1 span{ display: block; padding-top: 40px; }

#content h1#klimasoft{ background-image: url(graf/headers/klimatyzacja_krakow1.gif); }
#content h1#klimatyzatory{ background-image: url(graf/headers/klimatyzatory_wentylatory.gif); }
#content #dystrybutor h1{ background-image: url(graf/headers/autoryzowany.gif); }
#content h1#uslugi{ background-image: url(graf/headers/uslugi.gif); }
#content h1#kontakt{ background-image: url(graf/headers/kontakt.gif); }
#content .produkty_side h1.pro{ background-image: url(graf/headers/produkty_oferta.gif); }
#content .produkty_side h1.usl{ background-image: url(graf/headers/uslugi.gif); }
#content h1#agregaty{ background-image: url(graf/headers/agregaty_m.gif); }
#content h1#ofirmie{ background-image: url(graf/headers/ofirmie.gif); }
#content h1#kalkulator_prosty{ background-image: url(graf/headers/kalkulator_uproszczony.gif); }
#content h1#kalkulator_zlozony{ background-image: url(graf/headers/kalkulator.gif); }
#content h1#kanalowe{ background-image: url(graf/headers/klimatyzatory_kanalowe_m.gif); }

#content h1#kasetonowe{ background-image: url(graf/headers/klimatyzatory_kasetonowe_m.gif); }
#content h1#kontakt_form{ background-image: url(graf/headers/formularz.gif); }
#content h1#kontakt_dojazd{ background-image: url(graf/headers/dojazd.gif); }
#content h1#multisplit{ background-image: url(graf/headers/multisplit_m.gif); }
#content h1#podstropowe{ background-image: url(graf/headers/klimatyzatory_podstropowe_m.gif); }

#content h1#produkty_typ{ background-image: url(graf/headers/produkty_typ.gif); }
#content h1#produkty_katalogi{ clear: both; background-image: url(graf/headers/katalogi.gif); }
#content h1#realizacje_h{ background-image: url(graf/headers/realizacje.gif); }
#content h1#scienne{ background-image: url(graf/headers/klimatyzatory_scienne_m.gif); }
#content h1#sitemap{ background-image: url(graf/headers/klimatyzatory_podstropowe_m.gif); }
#content h1#stojace{ background-image: url(graf/headers/stojace.gif); }

#content h1#uslugi-montazowe{ background-image: url(graf/headers/uslugi-montazowe.gif); }
#content h1#uslugi-serwisowe{ background-image: url(graf/headers/uslugi-serwisowe.gif); }

#content h1#wentylatory{ background-image: url(graf/headers/wentylatory.gif); }
#content h1#wspolpraca{ background-image: url(graf/headers/wspolpraca.gif); }