* { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #373031; background: #fff url(../images/homepage/bg-body.jpg) top repeat-x; text-align: center; position: relative; } a { color: #42c4ce; } a:hover { color: #42c4ce; text-decoration: none; } img { border-style: none; } .clear { clear: both; } /* ---------------------------------------------------------- */ /* -------------------------- wrap -------------------------- */ /* ---------------------------------------------------------- */ #container { width: 100%; overflow: hidden; } #wrap { width: 960px; height: 650px; margin: 0 auto; text-align: left; position: relative; background: url(../images/homepage/bg-wrap.jpg) top no-repeat; position: relative; } #wrap-left { width: 190px; height: 650px; background-image: url(../images/homepage/bg-wrap-left.jpg); position: absolute; top: 0; left: -190px; } #wrap-right { width: 926px; height: 650px; background-image: url(../images/homepage/bg-wrap-right.jpg); position: absolute; top: 0; left: 960px; } /* ---------------------------------------------------------- */ /* -------------------------- header ------------------------ */ /* ---------------------------------------------------------- */ #header { width: 960px; float: left; } #logo { position: absolute; top: 45px; left: 10px; } #logo a { display: block; width: 215px; height: 60px; overflow: hidden; position: relative; text-decoration: none; } #logo a span { display: block; width: 162px; height: 39px; background-image: url(../images/homepage/logo.jpg); position: absolute; top: 0; left: 0; cursor: pointer; } #logo a strong { overflow: hidden; display: block; position: absolute; bottom: 0; left: 0; font-size: 13px; font-style: italic; } /* ---------------------------------------------------------- */ /* -------------------------- navigation -------------------- */ /* ---------------------------------------------------------- */ #navigation { position: absolute; top: 45px; right: 0px; } #naviatation ul { } #navigation li { display: block; float: left; height: 30px; margin-left: 20px; } #navigation li.last { margin-right: 0px; padding-right: 0px; border-right-style: none; } #navigation li a { display: block; float: left; height: 30px; overflow: hidden; position: relative; } #navigation li a span { display: block; float: left; height: 30px; background-repeat: no-repeat; background-position: top; position: absolute; top: 0; left: 0; cursor: pointer; } #navigation li a:hover span, #navigation li.active a span { background-position: bottom; } #navigation li#t1 a { width: 94px; } #navigation li#t1 a span { width: 94px; background-image: url(../images/homepage/nav-t1.gif); } #navigation li#t2 a { width: 110px; } #navigation li#t2 a span { width: 110px; background-image: url(../images/homepage/nav-t2.gif); } #navigation li#t3 a { width: 67px; } #navigation li#t3 a span { width: 67px; background-image: url(../images/homepage/nav-t3.gif); } #navigation li#t4 a { width: 90px; } #navigation li#t4 a span { width: 90px; background-image: url(../images/homepage/nav-t4.gif); } #navigation li#t5 a { width: 99px; } #navigation li#t5 a span { width: 99px; background-image: url(../images/homepage/nav-t5.gif); } #navigation li#t6 a { width: 74px; } #navigation li#t6 a span { width: 74px; background-image: url(../images/homepage/nav-t6.gif); } /* ---------------------------------------------------------- */ /* ----------------------- content -------------------------- */ /* ---------------------------------------------------------- */ #content { padding: 20px 0 40px; text-align: left; } h1 { color: #ee7f01; font-size: 20px; font-weight: bold; margin-bottom: 20px; } h2 { color: #ee7f01; font-size: 16px; font-weight: bold; margin-bottom: 14px; } h3 { color: #ee7f01; font-size: 16px; font-weight: bold; } p { line-height: 1.5em; padding-bottom: 20px; } img { } form { margin-bottom: 20px; } fieldset { border-style: none; } label { } input { } input.button { cursor: pointer; } textarea { } /* ---------------------------------------------------------- */ /* --------------- notebook + monitor + slider -------------- */ /* ---------------------------------------------------------- */ #nb { width: 768px; height: 429px; background-image: url(../images/homepage/bg-nb.jpg); overflow: hidden; position: absolute; top: 120px; left: 183px; } #monitor { width: 485px; height: 300px; overflow: hidden; position: absolute; top: 65px; left: 131px; } #monitor .padding { padding: 0px 0 0 10px; } #monitor a { display: block; float: left; margin: 0 20px 18px 0; } #monitor a.last { margin-right: 0px; } #monitor .text a { width: 200px; text-align: center; } /* Easy Slider #slider2 {} #slider2 ul, #slider li{ margin:0; padding:0; list-style:none; } #slider2 li{ display: block; width: 485px; height: 384px; overflow:hidden; position: relative; } #slider2 li {} #prevBtn2, #nextBtn2 { display: none; } Easy Slider */ /* Easy Slider */ #slider2 { height: 256px;} #slider2 ul, #slider li{ margin:0; padding:0; list-style:none; } #slider2 li{ display: block; width: 485px; height: 80px; overflow:hidden; position: relative; } #prevBtn2, #nextBtn2 { display: none; } /* // Easy Slider */ /* Easy Slider */ #obal { width: 285px; height: 180px; overflow: hidden; position: relative; } #slider { } #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{ display: block; width: 285px; height: 100px; overflow: hidden; position: relative; } #slider li {} #prevBtn { display: block; width: 22px; height: 22px; background-image: url(../images/prevBtn-light.jpg); position: absolute; top: 100px; left: 0px; } #prevBtn a { display: block; width: 22px; height: 22px; background-image: url(../images/prevBtn.jpg); position: absolute; top: 0; left: 0; } #nextBtn { display: block; width: 22px; height: 22px; background-image: url(../images/nextBtn-light.jpg); position: absolute; top: 100px; left: 30px; } #nextBtn a { display: block; width: 22px; height: 22px; background-image: url(../images/nextBtn.jpg); position: absolute; top: 0; left: 0; } /* // Easy Slider */ /* ---------------------------------------------------------- */ /* ------------------------ welcome ------------------------- */ /* ---------------------------------------------------------- */ #welcome { width: 206px; position: absolute; top: 194px; left: 10px; } #welcome h1 { display: block; width: 84px; height: 28px; overflow: hidden; position: relative;} #welcome h1 span { display: block; width: 84px; height: 28px; background-image: url(../images/homepage/h1-welcome.gif); position: absolute; top: 0; left: 0; } /* ---------------------------------------------------------- */ /* ------------------------ small-boy ----------------------- */ /* ---------------------------------------------------------- */ #small-boy { width: 107px; height: 138px; background-image: url(../images/homepage/small-boy.jpg); position: absolute; top: 507px; left: 20px; } /* ---------------------------------------------------------- */ /* ------------------------ BOXES --------------------------- */ /* ---------------------------------------------------------- */ #boxes { width: 960px; height: 170px; margin: 30px auto 0 auto; position: relative; text-align: left; } span.date { font-weight: bold; color: #42c4ce; } span.line { color: #e1f2f4; } /* news */ #news { width: 285px; height: 200px; position: absolute; top: -30px; left: 6px; padding-top: 30px; } #news h3 { display: block; width: 146px; height: 52px; overflow: hidden; position: absolute; top: -30px; left: -34px;} #news h3 span { display: block; width: 146px; height: 52px; background-image: url(../images/homepage/news-h3.jpg); position: absolute; top: 0; left: 0; } /* our-visitors */ #our-visitors { width: 285px; position: absolute; top: -30px; left: 330px; padding-top: 30px; } #our-visitors h3 { display: block; width: 203px; height: 52px; overflow: hidden; position: absolute; top: -30px; left: -37px; } #our-visitors h3 span { display: block; width: 203px; height: 52px; background-image: url(../images/homepage/our-visitors-h3.jpg); position: absolute; top: 0; left: 0; } /* zapis */ #box-zapis { width: 333px; height: 285px; background-image: url(../images/homepage/bg-box-zapis.jpg); overflow: hidden; position: absolute; top: -98px; right: -5px; } #box-zapis .padding { padding: 76px 40px 20px 46px; } #box-zapis form { padding: 0; } #box-zapis fieldset { } #box-zapis legend { color: #fff; font-weight: bold; padding-left: 9px; } #box-zapis input { width: 226px; height: 16px; padding: 8px 8px 8px 8px; margin: 14px 0; background: url(../images/zap_txt.gif); border-style: none; font-size: 11px; color: #8f8a90; } #box-zapis input.button { float: right; width: 104px; height: 34px; padding: 0; background: url(../images/zap_btn.gif); border-style: none; font-size: 12px; font-weight: bold; color: #fff; cursor: pointer; } #box-zapis h4 { color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 10px;} #box-zapis a { display: block; float: right; width: 160px; text-align: center; text-decoration: none; height: 34px; line-height: 34px; padding: 0; background: url(../images/zap_btn.gif); border-style: none; font-size: 12px; font-weight: bold; color: #fff; cursor: pointer; } #box-zapis p { color: #e1f2f4; font-size: 12px; text-align: left; padding-bottom: 10px; } /* ---------------------------------------------------------- */ /* ------------------------ footer -------------------------- */ /* ---------------------------------------------------------- */ #footer { width: 960px; margin: 0 auto; font-size: 11px; color: #c0c0c0; position: relative; text-align: left; padding-bottom: 24px; } p#webdesign { float: left; width: 330px; padding-top: 24px; } p#webdesign img { margin: 0px; margin-right: 3px; border: 0px none #fff; vertical-align: middle; } p#copyright { float: left; width: 330px; line-height: 24px; } p#copyright a { margin-right: 5px; }