html, body {height: 100%;}
body {background: url(img/bgpattern.png) repeat top center; margin: 0 auto; text-align: center; font: 14px Arial;}

#wrapper {text-align: center; text-align: center; margin: 0 auto;  min-height: 100%; background: url(img/bgpattern.png) repeat top center; }
#bonus-wrapper {padding: 150px 0 0 0; background: url(img/untitled2.png) no-repeat fixed bottom right; min-height: 100%;}

#buttons {position: absolute; top: 30px; left: 50%; margin-left: -70px; }
#heading li {display: inline; } 
/*. pane1 {position: absolute; top: -20px; left: -120px; display: block; background: url(img/logo1-off.jpg); width: 372px; height: 89px;} 
.pane2 {position: absolute; top: 80px; left: -194px; display: block; background: url(img/onas-off.jpg); width: 89px; height: 38px;} 
.pane3 {position: absolute; top: 80px; left: -110px; display: block; background: url(img/oferta-off.jpg); width: 105px; height: 38px;} !!!!!
.pane4 {position: absolute; top: 80px; left: -10px; display: block; background: url(img/portfolio-off.jpg); width: 125px; height: 38px;}
.pane5 {position: absolute; top: 80px; left: 115px; display: block; background: url(img/ludzie-off.jpg); width: 106px; height: 38px;}
.pane6 {position: absolute; top: 80px; left: 220px; display: block; background: url(img/kontakt-off.jpg); width: 105px; height: 38px;} */

.pane1 {position: absolute; top: -20px; left: -117px; display: block; background: url(img/logo1-off.jpg); width: 372px; height: 89px;} 
.pane2 {position: absolute; top: 80px; left: -184px; display: block; background: url(img/onas-off.jpg); width: 89px; height: 38px;} 
.pane3 {position: absolute; top: 80px; left: -95px; display: block; background: url(img/oferta-off.jpg); width: 96px; height: 38px;} 
.pane4 {position: absolute; top: 80px; left: 5px; display: block; background: url(img/portfolio-off.jpg); width: 116px; height: 38px;}
.pane5 {position: absolute; top: 80px; left: 125px; display: block; background: url(img/ludzie-off.jpg); width: 97px; height: 38px;}
.pane6 {position: absolute; top: 80px; left: 222px; display: block; background: url(img/kontakt-off.jpg); width: 97px; height: 38px;} 
#heading li.pane1.active {background: url(img/logo1-on.jpg) !important;}
#heading li.pane2.active {background: url(img/onas-on.jpg) !important;}
#heading li.pane3.active {background: url(img/oferta-on.jpg) !important;}
#heading li.pane4.active {background: url(img/portfolio-on.jpg) !important;}
#heading li.pane5.active {background: url(img/ludzie-on.jpg) !important;}
#heading li.pane6.active {background: url(img/kontakt-on.jpg) !important;}

.pane {text-align: center; } 
.pane-welcome, .pane-onas, .pane-portfolio, .pane-oferta, .pane-ludzie, .pane-kontakt {width: 520px; margin-left: auto; margin-right: auto;}
.pane-kontakt {height: 520px;} /*  NIKNIE GDY BEDZIE FORMULARZ */

/* LINKI */
.twitter a, p a, li a {color: #319aa7;}
.twitter a, p a:visited, li a:visited{color: #468890; text-decoration: none;}

strong {font-weight: bold; color: #111;}

/* ZAOKRĄGLONE ROGI */
.top-left {background: url('img/topleft.jpg') no-repeat; height: 10px; width: inherit; font-size: 2px;}
.top-right {background-image: url('img/topright.jpg'); height: 10px; width: 10px; font-size: 2px; float: right;}
.bottom-left {background: url('img/bottomleft.jpg') no-repeat; height: 10px; width: inherit; font-size: 2px;}
.bottom-right {background-image: url('img/bottomright.jpg'); height: 10px; width: 10px; font-size: 2px; float: right;}

/* NAGŁÓWKI STRON */
.slider {text-align:left; padding: 0px; font: 1em Arial; width: 520px; height: 217px; float: left;}
.slider h2 {color: white; background: url(img/dark50.png); margin: 10px 0 0 0; padding: 0 0 0 10px; font: 40px Arial; } /* small-caps  filter:alpha(opacity=80); opacity:0.8; */
.slider p {line-height: 1.3em; color: white; background-image: url(img/dark50.png);  float: right; padding: 5px;}
.pane-welcome .slider {background: #666 url(img/slider-onas.jpg) no-repeat; margin: 0 0 15px 0;}
.pane-welcome .slider h2 {width: 240px;}
.pane-welcome .slider p {margin: 40px 20px 0 0; width: 340px; height: 95px;}
.pane-onas .slider {background: #666 url(img/slider-spodek1.jpg) no-repeat; margin: 0 0 15px 0;}
.pane-onas .slider h2 {width: 260px;}
.pane-onas .slider p {margin: 35px 10px 0 0; width: 315px; height: 60px;}
.pane-oferta .slider {background: #666 url(img/slider-palec.jpg) no-repeat; margin: 0 0 15px 0;}
.pane-oferta .slider h2 {width: 215px;}
.pane-oferta .slider p {margin: 75px 20px 0 0; width: 340px; height: 60px;}
.pane-portfolio .slider {background: #666 url(img/slider-portfolio1.jpg) no-repeat; margin: 0 0 15px 0;}
.pane-portfolio .slider h2 {width: 215px;}
.pane-portfolio .slider p {margin: 80px 20px 0 0; width: 310px; height: 60px;}
.pane-ludzie .slider {background: #666 url(img/slider-ludzie.jpg) no-repeat; margin: 0 0 15px 0;}
.pane-ludzie .slider h2 {width: 215px;}
.pane-ludzie .slider p {margin: 80px 20px 0 0; width: 340px; height: 60px;}

/* STRONA GŁÓWNA */
.intro {text-align:left; padding: 0;  margin: 0px 0 10px 0; font: 1em Arial; width: 270px; float: left; background: #fff url(Ximg/divbg1.jpg) no-repeat bottom right;}
.intro h3 {padding: 0 5px 5px 10px; font: 26px Arial; color: #dd117b;}
.intro p {padding: 0 5px 0 5px; font: 1em Arial; margin: 5px 5px; line-height: 1.2em; text-align: left; }
.intro p.podpis {text-align: right; font-size: 1em; font-style: italic; margin-top: 15px;}
span.krecisie {font-weight: bold; color: #dd117b;}
span.events {font-weight: bold; color: #319aa7;}
.twitter {padding: 0; width: 240px; float: right; margin-bottom: 10px;}
.oferta.twitter li {margin-left: -5px; padding-left: 12px; padding-right: 5px; list-style-type: none; background: transparent url(img/bluedotsmall.png) no-repeat scroll 0 4px;}
.oferta.twitter li  a {display:none;}
a.sprawdznas {display:block;text-align:right;padding: 5px 5px 0 0;}
.sprawdznas img {margin: -10px 0 0 0;}

.partnerzy {overflow: hidden;}
.inkubatory, .aegee, .wsciekly, .akwarium, .okomiasta, .ihr, .system, .edunavigator, .verde, .dgpl {display: block; float:left; padding: 0 10px;}
.inkubatory {background: url(img/inkubatory_logo_1s.jpg) no-repeat; height: 96px; width: 62px;}
.inkubatory:hover {background: url(img/inkubatory_logo_1s.jpg) no-repeat 0 -96px; height: 96px; width: 62px;}
.aegee {background: url(img/aegee_katowice.jpg) no-repeat; height: 90px; width: 162px;}
.aegee:hover {background: url(img/aegee_katowice.jpg) no-repeat 0 -90px; height: 90px; width: 162px;}
.wsciekly {background: url(img/wsciekly.jpg) no-repeat; height: 90px; width: 132px; }
.wsciekly:hover {background: url(img/wsciekly.jpg) no-repeat 0 -90px; height: 90px; width: 132px; }
.akwarium {background: url(img/akwarium.jpg) no-repeat; height: 90px; width: 125px;}
.akwarium:hover {background: url(img/akwarium.jpg) no-repeat 0 -90px; height: 90px; width: 125px;}
.okomiasta {background: url(img/okomiasta.jpg) no-repeat; height: 90px; width: 97px;}
.okomiasta:hover {background: url(img/okomiasta.jpg) no-repeat 0 -90px; height: 90px; width: 97px;}
.ihr {background: url(img/instytuthr_logo.png) no-repeat; height: 90px; width: 177px;}
.ihr:hover {background: url(img/instytuthr_logo.png) no-repeat 0 -92px; height: 90px; width: 177px;}
.system {background: url(img/qualitylogo.png) no-repeat; height: 108px; width: 130px;}
.system:hover {background: url(img/qualitylogo.png) no-repeat 0 -108px; height: 108px; width: 130px;}
.edunavigator {background: url(img/edunavigator.png) no-repeat; height: 90px; width: 114px;}
.edunavigator:hover {background: url(img/edunavigator.png) no-repeat 0 -90px; height: 90px; width: 114px;}
.verde {background: url(img/verde.png) no-repeat; height: 90px; width: 129px;}
.verde:hover {background: url(img/verde.png) no-repeat 0 -89px; height: 90px; width: 129px;}
.dgpl {background: url(img/dgpl.jpg) no-repeat; height: 67px; width: 119px;}
.dgpl:hover {background: url(img/dgpl.jpg) no-repeat 0 -67px; height: 67px; width: 119px;}



/* O NAS */
.clear {clear:both;}
.atut {width: 510px;}
.atut p {text-align: left; padding: 0 5px;}
.atut h3 {text-align: left; padding: 5px; font: 22px Arial; color: #dd117b;}
.atut .top-right {position: relative; top: 19px; left: 0px; z-index: 1;}
.atut .bottom-right {position: relative; top: 86px; left: 0px; z-index: 1;}
.atut .text {background-color: #fff; position: relative; top: 19px; height: 96px; width: 415px; margin: 0 0 0 95px;}
.pomyslowosc {background: url(img/onas-notepad.jpg) no-repeat top left; height: 115px;}
.swierzosc {background: url(img/onas-choinka.jpg) no-repeat top left; height: 115px;}
.profesjonalizm {background: url(img/onas-profesjonalizm.jpg) no-repeat top left; height: 115px;}
.dyspozycyjnosc {background: url(img/onas-budzik2.jpg) no-repeat top left; height: 115px;}
.elastycznosc {background: url(img/onas-balet.jpg) no-repeat top left; height: 115px;}
.pasja {background: url(img/onas-pasja.jpg) no-repeat top left; height: 115px;}

/* OFERTA */
div.oferta {margin: 0 0 10px 0;}
.oferta div {background-color: #fff; text-align: left; }
.oferta h3 {font: 20px Arial; color: #dd117b; padding: 3px 5px 5px 5px; margin: 0;}
.oferta p {font: 14px Arial; padding: 2px 5px 2px 5px; margin: 0; }
.oferta ul {margin-left: 13px;}
.oferta li {margin: 6px 0 6px 0; list-style-type: none; padding: 0 0 0 15px; background: url(img/bluearrow.png) no-repeat 0 4px;}



/* LISTY NA PORTFOLIO I OFERTE */
.portfolio  p{padding-left: 10px;}
.portfolio ul {clear:both; padding-left: 10px;}
.portfolio li {margin: 0; list-style-type: none; padding: 6px 6px 6px 20px; background: url(img/bluearrow.png) no-repeat 4px 10px;} 
.portfolio li.link {margin: 0; list-style-type: none; padding: 6px 6px 6px 20px; background: url(img/mhand.png) no-repeat 4px 7px;} 
.portfolio li.klienci {margin: 0; list-style-type: none; padding: 10px 6px 6px 20px; background: url(img/mman.png) no-repeat 4px 7px; font: bold 14px Arial; } 
li.podlista {font-size: 0.8em; margin-top: -5px; list-style: none; background-image: none;}
li.podlista span {display:inline; width: 100px; padding: 0 10px 0 10px; background: url(img/bluedotsmall.png) no-repeat 0px 4px;}
li.podlista span:first-letter {font-weight: bold;}
li.podli {background: url(img/bluedotsmall.png) no-repeat 15px 10px; padding-left: 30px;}

.maturowo {display:block; background: url(img/maturowo-logo.jpg) no-repeat; background-position: 0 50px;width: 250px; height: 200px; float:left;}
.capital {display:block; background: url(img/capital-logo.jpg) no-repeat; background-position: 0 40px;width: 250px; height: 200px; float:left;}
.interferencje {display:block; background: url(img/zsp-logo.jpg) no-repeat; background-position: 0 40px;width: 250px; height: 200px; float:left;}
.maturowo-ref {display:block; background: url(img/referencje-maturowo_s.jpg) no-repeat; width: 143px; height: 202px; float:left; margin-left: 10px;}
.capital-ref {display:block; background: url(img/referencje-capital_s.jpg) no-repeat; border: solid 1px #aaa; width: 143px; height: 202px; float:left; margin-left: 10px;}

.interferencje-plakat {display:block; background: url(img/interferencje-plakat_s.jpg) no-repeat; border: solid 1px #aaa; width: 143px; height: 202px; float:left; margin-left: 10px;}

/* PORTFOLIO */
div.portfolio {margin: 0 0 10px 0; width: 520px;}
.portfolio div {background-color: #fff; text-align: left;}
.portfolio h3 {font: 18px Arial; color: #dd117b; padding: 0 5px 0 20px; margin: 0 0 5px 0;}
h4 {font-size: 1.05em; margin: -5px 0 7px 20px; padding: 0; font-style: italic; color: #dd117b;}
.portfolio p {font: 14px Arial; padding: 0 10px 0 10px; }
a.img {display:block; float: right; margin: 0 0 20px 0;}
a.img.su0 {height: 98px; width: 160px; background: #faf url(img/foto/su0s.jpg) no-repeat; }
a.img.su3 {height: 107px; width: 160px; background: #faf url(img/foto/su3s.jpg) no-repeat; }
a.img.su7 {height: 107px; width: 160px; background: #faf url(img/foto/su7s.jpg) no-repeat; }
a.img.su9 {height: 107px; width: 160px; background: #faf url(img/foto/su9s.jpg) no-repeat; }
a.img.su11 {height: 107px; width: 160px; background: #faf url(img/foto/su11s.jpg) no-repeat; }
a.img.su12 {height: 93px; width: 160px; background: #faf url(img/foto/su12s.jpg) no-repeat; }
a.img.ltc1 {height: 215px; width: 160px; background: #faf url(img/foto/ltc1s.jpg) no-repeat; }
a.img.ltc2 {height: 107px; width: 160px; background: #faf url(img/foto/ltc2s.jpg) no-repeat; }
a.img.ltc3 {height: 215px; width: 160px; background: #faf url(img/foto/ltc3s.jpg) no-repeat; }
a.img.gr1 {height: 107px; width: 160px; background: #faf url(img/foto/gr1s.jpg) no-repeat; }
a.img.rawa1 {height: 239px; width: 160px; background: #faf url(img/foto/rawa1s.jpg) no-repeat; }
a.img.netmet1 {height: 107px; width: 160px; background: #faf url(img/foto/warsztaty2s.jpg) no-repeat; }
a.img.netmet2 {height: 105px; width: 160px; background: #faf url(img/foto/catering2s.jpg) no-repeat; }
a.img.netmet3 {height: 106px; width: 160px; background: #faf url(img/foto/gym2s.jpg) no-repeat; }
a.img.netmet4 {height: 150px; width: 160px; background: #faf url(img/foto/happening1s.jpg) no-repeat; }

/* LUDZIE */
.ludzie {text-align: left; padding: 0; margin: 10px 0 0 0; font: 12px Arial; background-color: #fff; height: 88px; width: 395px; padding-left: 120px;}
.ludzie .bottom-right {position: relative; top: 78px; left: 0px;}
.ludzie h3 {color: #dd117b; font: 22px Arial;}
.ludzie h3 span {color: #222; font: 13px Verdana;}
.agata {background: #fff url(img/agata2_s.jpg) no-repeat top left;}
.kuba {background: #fff url(img/kuba_s.jpg) no-repeat top left;}
.skobel {background: #fff url(img/skobel_s.jpg) no-repeat top left;}
.szafraniec {background: #fff url(img/szafraniec_s.jpg) no-repeat top left;}
.magda {background: #fff url(img/magda_s.jpg) no-repeat top left;}
/* .linda {background: #fff url(img/linda_s.jpg) no-repeat top left;} */
.herniczek {background: #fff url(img/herniczek_s.jpg) no-repeat top left; display:none;}
.bieniasz {background: #fff url(img/bieniasz_s.jpg) no-repeat top left;}
.kasprzak {background: #fff url(img/kasprzak_s.jpg) no-repeat top left;}
.kropka {background: #fff url(img/kropka_s.jpg) no-repeat top left;}
.olaf {background: #fff url(img/olaf_s.jpg) no-repeat top left;}
/* .marek {background: #fff url(img/marek_s.jpg) no-repeat top left;} */
.karol {background: #fff url(img/karol_s.jpg) no-repeat top left;}
.zaneta {background: #fff url(img/zaneta_s.jpg) no-repeat top left;}

/* KONTAKT */
.pane-kontakt div {text-align: left; position: relative; left: -0px;}
.kontakt.wstep {width: 340px; float: left; background-color: #fff; margin: 0 10px 15px 0; }
.kontakt.wstep h2 {color: #dd117b; font: 26px Arial; padding: 0 10px; }
.kontakt.wstep p {text-align: justify; margin: 5px 10px 10px 10px;} /*przedłużam diva*/
.dane {width: 140px; float: right; background-color: #333; padding: 10px; color: #eee; margin-right: 5px; font: 10px Verdana;}
.dane p {margin: 5px 0 0 0;}
.dane h3 {text-decoration: underline; font: bold 12px Verdana;}
.dane span {color: #eee; font: bold 10px Verdana;}
.formularz {clear: both; background-color: #fff; }
.formularz h3  {color: #dd117b; font: 24px Arial; padding: 0 5px;}

.formularz input, .formularz textarea {padding: 5px; margin: 0px 0px 10px 20px; border: 1px solid #ccc;}
.formularz input {width: 200px;}
.formularz textarea {height: 90px; width: 460px;}
.formularz textarea:focus, .formularz input:focus {border: 1px solid #dd117b;}
.formularz div.submit {text-align: center;}
.formularz input.submit-button {width: 100px; }
form {margin: 20px 0 20px 0;}
label { float: left; text-align: right; margin: 0 15px 0 20px; width: 100px; padding-top: 5px;}
label.wiadomosc {width: 460px; text-align: center; color: #dd117b; margin: 0 0px 5px 30px;}

/* STOPKA */
.footer {font: 10px Verdana; color: #666; padding: 15px 0 15px 0; }
.footer a {color: #333;}
.footer a:hover {color: #777;}