﻿/* wyzerowanie domyslnych wartosci */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
fieldset {border: 0;}
object {display: block;}
table {border-collapse: collapse; border-spacing: 0;}

/* wyzerowanie formularza */
fieldset { border: 0;}
radio, label { outline: hidden;}

/* wyzerowanie obramowania */
.border { border: 0;}

/* wyrownanie */
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.strong { font-weight: bold;}

/* linki */
a { text-decoration: underline; color: #489dc5;}
a:visited {}
a:hover { color: #eb1f20; text-decoration: underline;}
a:active {}

/* naglowki */
h2.strony { background: url(../images/strony_www.png) no-repeat top left; text-indent: -700em; height: 26px;}
h2.sklepy { background: url(../images/sklepy.png) no-repeat top left; text-indent: -700em; height: 26px;}
h2.seo { background: url(../images/seo.png) no-repeat top left; text-indent: -700em; height: 26px;}
h2.realizacje { background: url(../images/realizacje.png) no-repeat top left; text-indent: -700em; height: 26px;}
h2.jesli_potrzebujesz { background: url(../images/jesli_potrzebujesz.png) no-repeat top left; text-indent: -700em; height: 26px; margin-bottom: 5px;}
h2.skontaktuj_sie { background: url(../images/skontaktuj_sie.png) no-repeat top right; text-indent: -700em; height: 26px; margin-top: 5px;}
h2.kontakt { background: url(../images/kontakt.png) no-repeat top left; width: 179px; height: 26px; text-indent: -700em; margin-bottom: 10px;}
h2.zaufali { background: url(../images/zaufali_nam.png) no-repeat top left; width: 111px; height: 19px; text-indent: -700em; margin-top: 10px;}


/* domyslne wartosci body */
body { font: 0.75em/1.5em Arial, sans-serif; color: #626061; background: #036a8d url(../images/tlo.jpg) no-repeat 50% 367px; }
/* kontener */
.container { width: 968px; margin: 0 auto;}

/* hedear */
/* logo */
#header { margin: 0; background: #082533 url(../images/header_tlo.png) repeat-x;}
#header .container { position: relative; height: 122px; background: url(../images/header_cien.jpg) top left no-repeat; }
#header .container h1 { position: absolute; width: 267px; height: 72px; top: 20px; left: 15px; }
#header .container h1 a { background: url(../images/logo.png) top left no-repeat; width: 267px; height: 72px; display: block; text-indent: -700em; outline: none;}
/* /logo */

/* menu*/
#mainmenu { position: relative; padding: 0px 10px; overflow: hidden;}
#mainmenu li { float: left; list-style: none; height: 40px; line-height: 36px;}
#mainmenu li.backLava { background: url(../images/mm_tlo.png); width: 9px; position: absolute;}
#mainmenu li a { text-decoration: none; text-align: center; padding: 2px 8px; z-index: 10; display: block; position: relative; margin: auto 5px; outline: none;}
#mainmenu li a { color: #FFF;}
/* koniec menu*/

#header .container ul { position: absolute; top: 80px; right: 30px; width: 630px; font: 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;}

#header .container .infolinia { position: absolute; top: 20px; right: 80px; font-size: 1.6em; color: #057092;}
/* box */
#header .container #header_box { position: absolute; background: url(../images/header_box.png) no-repeat top left; width: 261px; height: 75px; left: 650px;}
#header .container #header_box .slideshow { position: relative; width: 150px; height: 74px; left: 100px;}
#header .container #header_box .slideshow .slideshow_tekst { position: absolute; display: none; z-index: 3; background: url(../images/header_tlo_napisy.png) no-repeat top left;}
#header .container #header_box h2 { padding: 5px 0; font-size: 1.1em; color: #06222e; text-align: center;}
#header .container #header_box .ludek_promocja { position: absolute; left: 15px; top: 0px; background: url(../images/ludek_promocja.jpg) no-repeat top left; width: 79px; height: 74px; display: block;}

/* main */
#main { background: #e7e6d5 url(../images/main_b_tlo.png) repeat-x; border-bottom: 5px #062330 solid; height: 244px; color: #062330;}
#main .container #banner {}
#main .container #banner .panel { position: relative;}
/* slogany */
#main .container #banner .panel #www_foto { position: absolute; display:block; left: 190px; background: url(../images/www.jpg) no-repeat top left; width: 596px; height: 244px;}
#main .container #banner .panel h2.www_1 { position: absolute; display: block; top: 10px; right: 1px; text-indent: -700em; background: url(../images/www_1.png) no-repeat top left; width: 467px; height: 51px;}
#main .container #banner .panel h3.www_2 { position: absolute; display: block; top: 160px; right: 10px; text-indent: -700em; background: url(../images/www_2.png) no-repeat top left; width: 195px; height: 56px;}
#main .container #banner .panel h3.www_3 {}

#main .container #banner .panel #sklepy_foto { position: absolute; top: 0px; left: 190px; background: url(../images/wozek.jpg) no-repeat top left; width: 358px; height: 244px;}
#main .container #banner .panel h2.sklepy_1 { position: absolute; display: block; top: 10px; right: 50px; text-indent: -700em; background: url(../images/sklepy_1.png) no-repeat top left; width: 358px; height: 101px;}
#main .container #banner .panel h3.sklepy_2 { position: absolute; display: block; top: 120px; right: 150px; text-indent: -700em; background: url(../images/sklep_2.png) no-repeat top left; width: 171px; height: 22px;}
#main .container #banner .panel h4.sklepy_3 { position: absolute; display: block; top: 155px; right: 60px; width: 350px; height: 100px; font-weight: normal;}
#main .container #banner .panel h4.sklepy_3 a { background: url(../images/wiecej_berz.png) no-repeat top left; display: block; width: 66px; height: 21px; text-align: center; line-height: 20px; float: right; margin: 10px 30px 0 0; color: #626061;}

#main .container #banner .panel #seo_foto { position: absolute; top: 0px; left: 280px; background: url(../images/seo.jpg) no-repeat top left; width: 322px; height: 244px;}
#main .container #banner .panel h2.seo_1 { position: absolute; display: block; top: 15px; right: 60px; text-indent: -700em; background: url(../images/seo_1.png) no-repeat top left; width: 282px; height: 153px;}
#main .container #banner .panel h3.seo_2 { position: absolute; display: block; top: 170px; right: 70px; text-indent: -700em; background: url(../images/seo_2.png) no-repeat top left; width: 325px; height: 29px;}
#main .container #banner .panel h4.seo_3 { position: absolute; display: block; top: 20px; left: 50px; width: 250px; height: 100px; font-weight: normal;}
#main .container #banner .panel h4.seo_3 a { background: url(../images/wiecej_berz.png) no-repeat top left; display: block; width: 66px; height: 21px; text-align: center; line-height: 20px; float: right; margin: 10px 30px 0 0; color: #626061;}

#main .container #banner .panel #biznes_foto { position: absolute; top: 0px; left: 270px; background: url(../images/biznes.jpg) no-repeat top left; width: 275px; height: 244px;}
#main .container #banner .panel h2.biznes_1 { position: absolute; display: block; top: 15px; right: 55px; text-indent: -700em; background: url(../images/biznes_1.png) no-repeat top left; width: 441px; height: 113px;}
#main .container #banner .panel h3.biznes_2 { position: absolute; display: block; top: 140px; right: 70px; text-indent: -700em; background: url(../images/biznes_2.png) no-repeat top left; width: 340px; height: 57px;}
#main .container #banner .panel h4.biznes_3 { position: absolute; display: block; top: 20px; left: 50px; width: 250px; height: 100px; font-weight: normal;}
#main .container #banner .panel h4.biznes_3 a { background: url(../images/wiecej_berz.png) no-repeat top left; display: block; width: 66px; height: 21px; text-align: center; line-height: 20px; float: right; margin: 10px 30px 0 0; color: #626061;}

#main .container #banner .panel h4 a:hover { color: #970e15;}
/* /slogany */

#main .container #banner .panel .dlaczego_my { position: absolute; top: 150px; left: 10px; display: block; width: 280px; color: #062330;}
#main .container #banner .panel .dlaczego_my h4 { font-size: 1.1em;}
#main .container #banner .panel .dlaczego_my ul { list-style: url(../images/strzalka_cz.png); margin-left: 15px;}
#main .container #banner .panel #tekst_top { position: absolute; top: 110px; right: 90px; display: block; width: 150px; height: 100px;}
#main .container #banner .panel #tekst_top a.onas { position: absolute; top: 70px; right: 20px; display: block; width: 81px; height: 23px; background: url(../images/wiecej_onas.png) no-repeat scroll 0 0 transparent; text-align: center; line-height: 23px; color: #FFF; font-size: 1.1em; text-decoration: none;}
#main .container #banner .panel #tekst_top a.onas:hover { background-position: 0 -23px;}
#main .container #banner .panel {}
#banner { height: 244px; position: relative;}
.coda-slider-wrapper { padding: 20px 0 }
.coda-slider {}
.coda-slider-no-js .coda-slider { height: 100px; overflow: auto !important; padding-right: 20px }
.coda-slider, .coda-slider .panel { width: 968px; height: 244px;}
.center { text-align: center;}
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 968px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
.coda-nav-left, .coda-nav-right { position: absolute; z-index: 2; margin-top: 90px; }
.coda-nav-right { margin-left: 920px;}
.coda-nav-left a, .coda-nav-right a { color: #fff; background:url("../images/arrows.gif") no-repeat scroll 0 0 transparent; display:block; overflow:hidden; text-indent:-500px; width:40px; height:40px;}
.coda-nav-left a { background-position: left top;}
.coda-nav-left a:hover { background-position: left -40px;}
.coda-nav-right a { background-position: right top;}
.coda-nav-right a:hover { background-position: right -40px;}
.coda-nav ul li a.current { background: url('../images/slider-dot-current.png'); }
.coda-slider .panel-wrapper { padding: 20px }
.coda-slider p.loading { padding: 20px; text-align: center }
.coda-nav { width: 968px; height: 22px; position: absolute; z-index: 2; margin-top: 220px; background: url('../images/line-banner.png') repeat-x; }
.coda-nav ul { clear: both; display: block; margin: auto; }
.coda-nav ul li { display: inline-block }
.coda-nav ul li a { display: block; width: 11px; height: 11px; background: url('../images/slider-dot.png'); margin-top: 7px; }
.coda-nav-pause { position: absolute; z-index: 2; margin-top: 225px; margin-left: 940px; }
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: absolute }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
/* /main */

/* content */
#content { padding-bottom: 30px; color: #FFF; border-top: 1px #FFF solid;}
#content .container { margin-top: 20px; overflow: hidden;}
#content .container #oferta {}
#content .container #oferta ul { padding: 5px; margin-bottom: 20px;}
#content .container #oferta li.first { float: left; width: 305px; padding: 5px; margin-top: 5px; background: none;}
#content .container #oferta li.oferta { float: left; width: 305px; padding: 5px; margin-top: 5px; background: url(../images/oferta_linia_pion.png) no-repeat 15px 15px;}
#content .container #oferta li.oferta .box_oferta { overflow: hidden; margin-top: 10px; width: 305px;}
#content .container #oferta li.oferta .box_oferta .ikona { float: left; width: 118px; height: 158px;}
#content .container #oferta li.oferta .box_oferta .ico_domek {background: url(../images/ico_domek.png) 50% no-repeat;} 
#content .container #oferta li.oferta .box_oferta .ico_koszyk {background: url(../images/ico_koszyk.png) 50% no-repeat;} 
#content .container #oferta li.oferta .box_oferta .ico_seo {background: url(../images/ico_seo.png) 50% no-repeat;} 
#content .container #oferta li.oferta .box_oferta .opis_oferta { float: left; width: 187px; height: 155px; background: url(../images/opis_oferta_tlo.png) no-repeat 0 0;}
#content .container #oferta li.oferta .box_oferta .opis_oferta p { margin-top: 2px; padding: 5px 10px 0 10px; color: #FFF;}
#content .container #oferta li.oferta .box_oferta .opis_oferta p ul {}
#content .container #oferta li.oferta .box_oferta .opis_oferta ul li { margin-left: 10px; padding-left: 10px; background: url(../images/strzalka_cz.png) no-repeat top left; line-height: 15px;}
#content .container #oferta li.oferta .box_oferta .wiecej_oferta { margin-top: 165px;}
#content .container #oferta li.oferta .box_oferta a.wiecej_oferta { color: #FFF; display: block; width: 62px; height: 17px; margin-left: 230px; background: url(../images/wiecej.png) no-repeat scroll 0 0 transparent; text-align: center; line-height: 17px; font-size: 1.1em; text-decoration: none;}
#content .container #oferta li.oferta .box_oferta a.wiecej_oferta:hover { color: #b50e17;}

#content .container #box_dol { clear: both; overflow: hidden; padding: 10px 0;}
#content .container #box_dol #box_realizacje { float: left; width: 420px; padding: 10px 10px 0 10px;}

#content .container #box_dol #box_realizacje ul { list-style: url(../images/fajka.png); margin-left: 25px; font: 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;}
#content .container #box_dol #box_realizacje ul li { padding: 2px;}
#content .container #mail a { float: left;  width: 240px; margin-top: 20px; padding: 10px; background: url(../images/formularz.png) no-repeat top left; height: 96px; text-indent: -700em;}
#content .container #telefon a { float: left; width: 240px; margin-top: 20px; padding: 10px; background: url(../images/zadzwon.png) no-repeat top left; height: 96px; text-indent: -700em;}
#content .container #box_klienci { width: 240px; height: 96px; margin-top: 20px; padding: 10px;}
#content .container #c1 { float: left; width: 260px; border-right: 1px #026181 solid;}
#content .container #c1 #c1_oferta { padding-left: 20px;}
#content .container #c1 #c1_oferta h2.oferta { background: url(../images/oferta.png) no-repeat top left; text-indent: -700em; height: 26px;}
#content .container #c1 #c1_oferta ul { list-style: url(../images/strzalka_cz.png); margin-left: 20px; font-size: 1.2em;}
#content .container #c1 #c1_oferta ul li { padding: 3px 0;}
#content .container #c1 #c1_oferta ul li a { color: #FFF; text-decoration: none;}
#content .container #c1 #c1_oferta ul li a:hover { padding-left: 12px;}
#content .container #c2 { float: right; width: 680px; padding: 5px; position: relative;}
#content .container #c2 p { margin: 5px;}
#content .container #c2 .naglowek { font: 1.2em Verdana, Arial, Helvetica, sans-serif; padding: 2px 0; margin-top: 10px;}
#content .container #c2 #dlaczego_strony_www { border: 1px #026181 solid; overflow: hidden;}

#content .container #c2 #dlaczego_strony_www #dlaczego_lewa_strony { float: left; width: 118px; height: 103px; background: url(../images/ico_domek.png) no-repeat top left;}
#content .container #c2 #dlaczego_strony_www #dlaczego_lewa_sklepy { float: left; width: 118px; height: 103px; background: url(../images/ico_koszyk.png) no-repeat top left;}
#content .container #c2 #dlaczego_strony_www #dlaczego_lewa_seo { float: left; width: 118px; height: 103px; background: url(../images/ico_seo.png) no-repeat top left;}
#content .container #c2 #dlaczego_strony_www #dlaczego_lewa_kontakt { float: left; width: 118px; height: 103px; background: url(../images/ico_ludek.png) no-repeat top left;}

#content .container #c2 #dlaczego_strony_www #dlaczego_prawa { float: right; width: 550px; padding: 5px;}
#content .container #c2 ul { list-style: url(../images/fajka.png); margin-left: 35px;}
#content .container #c2 ul li { padding: 2px;}
#content .container #c2 #kontakt_dane { display: block; width: 200px; position: absolute; top: 200px; right: 50px;}

#content .container #c2 #oferujemy { display: block; width: 340px; position: absolute; top: 280px; left: 10px;}
#content .container #c2 #gwarantujemy { display: block; width: 300px; position: absolute; top: 280px; right: 20px;}
#content .container #c2 .realizacja { width: 650px; margin: 0 auto; border-bottom: 1px #026181 solid;}
#content .container #c2 .realizacja .obrazek { border: 5px #0c87a7 solid; margin: 5px 0;}
#content .container #c2 .realizacja .opis_obrazka {}
#content .container #c2 .realizacja .technologie {}
#content .container #c2 .realizacja .adres_strony a { font-size: 1.2em; color: #e9e8d8; font-weight: bold;}
/* /content */

/* powrot */
#powrot {}
#powrot .container {}
#powrot .container a.top { display: block; width: 135px; height: 26px; margin-left: 800px; background: url(../images/powrot_top.png) no-repeat scroll 0 0 transparent; line-height: 26px; text-indent: 70px; color: #FFF; text-decoration: none;}
#powrot .container a.top:hover { background-position: 0 -26px;}
/* /powrot */

/* footer */
#footer { background: #05202c url(../images/footer_tlo.png) top left repeat-x; padding-bottom: 10px;}
#footer .container { text-align: center; overflow: hidden;}
#footer .container ul { overflow: hidden; padding: 10px 0 0 0; margin: 0 200px;}
#footer .container ul li { float: left; padding: 10px;}
#footer .container ul li a { color: #eaf3f6;}
#footer .copyright a:hover, #footer .container ul li a:hover { color: #eb1f20;}
#footer .tagi a { color: #53676b; text-decoration: none;}
#footer .tagi h1, #footer .tagi h2, #footer .tagi h3, #footer .tagi h4 { display: inline;}
#footer .copyright { color: #f1f0e2; font-weight: bold; margin: 10px; float: left;}
#footer .copyright a { color: #f1f0e2;}
#footer .websim { color: #f1f0e2; font-weight: bold; margin: 10px; float: right;}
#footer .websim a { color: #f1f0e2; font-weight: bold; text-decoration: none;}
/* /footer *

/* formularz */
/* wyzerowanie formularza */
form fieldset { border: 0;}
radio, label { outline: hidden;}
input { border: 1px #026181 solid; color: #333; padding: 2px; outline: none; margin: 1px;}
.input_big { width: 250px;}
.input_small { width: 80px;}
textarea { border: 1px #026181 solid; color: #333; padding: 2px; width: 250px; outline: none;}
input.submit { height: 24px; width: 80px; background: #06222f; color: #fff;}
input.submit:hover { height: 24px; width: 80px; background: #06222f; color: #b40e17;}
.blad { padding: 10px; border: 1px #F00 solid; text-align: center; width: 80%; margin: 20px 0;}

/* walidacja formularzy */
.box-zam .b_2 input.error { border: 1px solid red; }
label.error { padding-left: 16px; margin-left: .3em; color: red;}
label.valid { display: block; width: 16px; height: 16px; }

/* powrot */
#panel_dol { background: url(../images/linia_pozi.gif) repeat-x scroll center center transparent; overflow: hidden; width:100%; margin-top: 50px; clear: both; color: #FFF;}
#panel_dol_strony { background: url(../images/linia_pozi.gif) repeat-x scroll center center transparent; overflow:hidden; width:100%; margin-top: 10px; clear: both; color: #FFF;}
.back { background: none repeat scroll 0 0 #036a8d; border-right: 8px #036a8d solid; float:left; font-size:10px; padding:3px 5px; color: #FFF;}
.home { background: none repeat scroll 0 0 #036a8d; border-left: 8px #036a8d solid; float: right; font-size: 10px; padding: 3px 5px; color: #FFF;}

/* box_klienci*/
.pics { height:  240px; width:   96px; padding: 0; margin:  0;} 
 .pics img { width:  240px; height: 96px; top: 0; left: 0} 

