/* ----------------------------------------------------------------------------- LT WebDevelopment (www.lukastomek.cz) Výstupní zařízení: screen, projection Autor: Lukáš Tomek (info@lukastomek.cz) Vytvořeno: 20/04/2010 ----------------------------------------------------------------------------- */ /* -- Basics -- */ html, body, div, p, ul, ol, li, form, fieldset, h1, h2, h3, h4, h5, h6, address { margin: 0; padding: 0; list-style: none; } html { background: #120703 url('../images/html-background.gif') repeat-x top center; } body { font: normal 62.8%/1.3 sans-serif; color: #333333; text-align: center; background: url('../images/body-background.jpg') no-repeat top center; } a { color: #666666; } a:hover { text-decoration: underline !important; } a img { border:0; } input, select, textarea { padding: 2px 5px; font-family: lucida, sans-serif; font-size: 13px; color: #9F6956; vertical-align: middle; background-color: #4D3C2E; border-left: #30251D 1px solid; border-top: #30251D 1px solid; border-right: #48372A 1px solid; border-bottom: #48372A 1px solid; } input.button, select.button, textarea.button { background: #fff; padding: 2px 0; border: 1px solid #595959; color: #000 !important; vertical-align: middle; } button.button { margin: 0; padding: 0; height: 18px; border: none; text-decoration: underline; font-weight: bold; color: #00CCFF; cursor: pointer; } input.submit { width: 98px; height: 25px; overflow: visible; padding: 0 5px; color: #fff; font-weight: bold; border: none; cursor: pointer; } label { cursor: pointer; padding-right: 5px; line-height: 20px; vertical-align: middle; } h1 { font-size: 2em; } h2 { font-size: 1.45em; } h3 { font-size: 1.4em; } h4 { font-size: 1.3em; } h5 { font-size: 1.1em;} h6 { font-size: 1em; } h1, h2, h3, h4, h5, h6 { color: #C98B75; } table { border-collapse: collapse; width: 100%; } table th { text-align: left; } table td.right { padding-left: 5px; } table th.right { padding-left: 5px; } table td.left { padding-right: 5px; } table th.left { padding-right: 5px; } blockquote { margin: 0; padding: 10px 20px; color: #333333; line-height: 1.6; font-family: Georgia, serif; } fieldset { border: 0 !important; } address { font-style: normal; } /* -- User friendly features --*/ .hidden { display: none; } .noscreen { width: 200px; position: absolute; left: 0; top: -999px; } /* -- Basics layout -- */ #view { text-align: left; position: relative; } #head { font-size: 1.2em; position: relative; z-index: 10; } #content { font-size: 1.2em; z-index: 1; } #foot { font-size: 1.2em; position: relative; z-index: 1; } /* -- Main classes -- */ .img-articles { margin: 10px 20px 10px 0; border: solid #3b2a1d 3px; } .fr { float: right !important; } .fl { float: left !important; } .clear { clear: both !important; } .right { text-align: right !important; } .left { text-align: left !important; } .center { text-align: center !important; } .last { margin-right: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; padding-bottom: 0 !important; background: none; } .small { font-size: .9em; } .big { font-size: 1.5em; } .light { color: #999999 !important; } .clearfix { width: 100%; overflow: hidden; padding-bottom: .6em; } .alt { font-weight: bold; } .test { border: 1px black solid; } .inlink { display: block; padding-left: 14px; background: url('../images/bg-inlink.gif') 0 4px no-repeat; } /* -- Graphic overlays -- */ a.overlaid, .overlaid a { display: block; cursor: pointer; overflow: hidden; text-decoration: none !important; } .overlaid { position: relative; width: 100%; height: 100%; } .overlaid span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none !important; } /* -- Forms layout -- */ .formBox .lab { float: left; width: 19%; text-align: right; padding-right: 1%; } .formBox .con { float: right; width: 80%; } .formBox .clearfix { } .formBox .w100 { width: 98%; } .formBox .button:focus { border-color: #000; } /* -- Basic content constructs -- */ .offsetTop { margin-top: 1em; } .offsetBottom { margin-bottom: 1em; } .info { font-size: .91em !important; margin-bottom: 5px; color: #999999 !important; } /* -- Layout -- */ body#hp { background: url('../images/hp-background.jpg') no-repeat top center; } #view { width: 959px; margin: 0 auto; } #head { width: 959px; height: 70px; padding-top: 21px; color: #452113; } #head #logo { width: 165px; height: 70px; float: left; } #logo a { font-size: 29px; color: #452113; text-align: center; } #logo a span { background: url('../images/logo-renokin.jpg') no-repeat top left; } #head .motto { width: 307px; height: 25px; margin: 24px 0 0 202px; font-size: 22px; } .motto span { background: url('../images/motto-background.jpg') no-repeat top left; } #head .eshop { position: absolute; top: 29px; left: 780px; padding-left: 38px; color: #B08B6F; background: url('../images/basket-top.jpg') no-repeat top left; } #head #phone { position: absolute; top: 63px; left: 775px; width: 175px; height: 38px; text-indent: -500px; overflow: hidden; } #phone span { background: url('../images/bg-phone.png') no-repeat; } #content { width: 959px; margin-top: 70px; } #content .boxAddress { height: 21px; padding: 15px 20px 5px 20px; font-style: italic; color: #5F4A38; } #content .boxAddress a { color: #5F4A38; } #content .boxHp { height: 374px; margin-left: 33px; } .boxHp h2 { width: 160px; height: 46px; font-size: 34px; color: #5B2918; } .boxHp .hRenokin span { background: url('../images/nadpis-renokin.jpg') no-repeat top left; } .boxHp ul { width: 550px; margin-left: 5px; font-size: 20px; color: #81594A; } .boxHp ul li { margin: 15px 0; padding-left: 15px; letter-spacing: 1px; background: url('../images/action-arrow.jpg') no-repeat top left; } .boxHp .aBuy { position: absolute; top: 440px; left: 280px; display: block; padding-left: 38px; font-size: 17px; color: #C7AF71; background: url('../images/basket-inside.jpg') no-repeat top left; } .boxHp .buttonMore { width: 195px; height: 45px; margin-top: 55px; display: block; font-size: 24px; text-align: center; color: #BF915E; background-color: #6E0101; } .boxHp .buttonMore span { background: url('../images/button-more.jpg') no-repeat top left; } .boxHp .like { position: absolute; top: 440px; left: 490px; } #content .boxAction { height: 443px; background: url('../images/box-bottom-background.jpg') no-repeat top center; } .boxAction .actionProducts { width: 959px; height: 131px; padding-bottom: 2px; background: url('../images/bg-actionProducts.png') 50% 100% no-repeat; } .actionProducts .roztok { width: 218px; padding: 0 40px 0 33px; background: url('../images/action-roztok-plus.jpg') no-repeat top left; } .actionProducts .sampon { width: 224px; padding: 0 40px 0 79px; background: url('../images/action-sampon-plus.jpg') no-repeat top right; } .actionProducts .kondicioner { width: 234px; padding: 0 40px 0 48px; float: none !important; } .actionProducts>.kondicioner { width: 222px; float: left !important; } .actionProducts .actionProduct { height: 131px; float: left; color: #C98B75; } .actionProduct img { float: left; margin-right: 1px; } .actionProduct .title { font-size: 16px; margin-top: 25px; } .actionProduct .title a { color: #C98B75; text-decoration: none; } .actionProduct p { margin-top: 5px; font-size: 11px; } .boxAction .boxUnder { clear: both; width: 891px; padding: 24px 34px; } .boxUnder form { position: relative; float: left; width: 409px; height: 250px; color: #9F6956; background: url('../images/form-background.jpg') no-repeat bottom center; } .boxUnder form legend { padding-bottom: 30px; font-size: 17px; font-weight: bold; color: #C98B75; } .boxUnder form input { width: 152px; height: 22px; } .boxUnder form .formInput { float: left; padding: 5px 0 0 25px; } .boxUnder form textarea { width: 341px; height: 57px; } .boxUnder form .formTextarea { clear: both; padding: 5px 0 0 25px; } .boxUnder form .sub { position: absolute; bottom: 15px; right: 25px; width: 103px; height: 31px; background: none; border: none; } .boxUnder .articles { width: 420px; height: 250px; margin-left: 458px; color: #6A6249; } .articles .article { margin-top: 30px; height: 90px; } .articles .article .img { width: 136px; float: left; margin-top: 5px; } .articles .article .self { margin-left: 161px; } .articles .article img { border: #3B2A1D 4px solid; } .articles .article h3 { line-height: 1.5; } .articles .article h3 a { color: #c98b75; text-decoration:none } .articles .article p { margin: 5px 0; line-height: 1.6; } #content .boxText { width: 957px; margin: 11px 0 0 2px; padding-bottom: 32px; overflow: hidden; background: #21160F url('../images/content.jpg') no-repeat top center; } /*#content .boxText { width: 957px; margin: 11px 0 0 2px; padding-bottom: 32px; overflow: hidden; background: #21160F url('../images/content-x.gif') repeat-x top center; }*/ .boxText .betProducts { clear: both; width: 881px; margin: 0 38px; padding-top: 42px; height: 4px; background: url('../images/hr.jpg') no-repeat bottom center; border: none; } .boxText .boxProduct { padding: 29px 0 0 45px; } .boxProduct .productInfo { width: 454px; height: 230px; padding-right: 170px; float: left; color: #6A6249; } .boxProduct .productRoztok { background: url('../images/product-roztok.jpg') no-repeat bottom right; } .boxProduct .productSampon { background: url('../images/product-sampon.jpg') no-repeat bottom right; } .boxProduct .productKondicioner { background: url('../images/product-kondicioner.jpg') no-repeat bottom right; } .productInfo h2 { font-size: 23px; } .productInfo h3 { margin: 7px 0; font-size: 19px; font-weight: normal; color: #837A5D; } .productInfo p { margin: 20px 0; font-size: 14px; line-height: 1.6; } .boxProduct .productInfo .productBuy { position: relative; height: 44px; padding-top: 10px; } .productBuy .productPrice { position: absolute; bottom: 13px; left: 250px; font-size: 17px; font-weight: bold; color: #998859; } .productBuy a { height: 44px; margin-left: 5px; display: block; font-size: 24px; text-align: center; color: #BF915E; background-color: #6E0101; } .productBuy a.buttonRoztok { width: 184px; } .productBuy a.buttonRoztok span { background: url('../images/button-roztok.jpg') no-repeat top left; } .productBuy a.buttonSampon { width: 186px; } .productBuy a.buttonSampon span { background: url('../images/button-sampon.jpg') no-repeat top left; } .productBuy a.buttonKondicioner { width: 213px; } .productBuy a.buttonKondicioner span { background: url('../images/button-kondicioner.jpg') no-repeat top left; } .productBuy .like { position: absolute; bottom: 10px; left: 350px; } .boxText .productMenu { width: 234px; margin-left: 644px; } .productMenu ul { width: 234px; } .productMenu ul li { width: 234px; height: 20px; margin-top: 20px; padding: 10px 0; text-align: center; background: #2D2116 url('../images/menu-detail.jpg') no-repeat top left; } /*.productMenu ul li { width: 234px; height: 40px; margin-top: 20px; text-align: center; background: #2D2116 url('../images/menu-detail.jpg') no-repeat top left; }*/ .productMenu ul li.active { color: #837A5D; font-size: 15px; font-weight: bold; background: #2D2116 url('../images/menu-detail-active.jpg') no-repeat top left; } .productMenu ul li a { padding: 0 10px; color: #837A5D; font-size: 15px; text-decoration: none; background: url('../images/menu-detail-sipka.jpg') no-repeat top left; } /*.productMenu ul li a { width: 234px; height: 20px; padding: 10px 0; display: block; color: #837A5D; font-size: 15px; text-decoration: none; background: url('../images/menu-detail-sipka.jpg') no-repeat top left; }*/ .boxText .articleMenu { margin: 40px 0 0 689px; padding-bottom: 18px; background: url('../images/menu-detail-bottom.jpg') no-repeat bottom center; } .boxText .articleMenu li { margin-top: 11px; } .boxText .betItems { clear: both; width: 592px; margin: 0 32px; padding-top: 12px; height: 4px; background: url('../images/hr-uzsi.jpg') no-repeat bottom center; border: none; } .boxText .boxArticles { position: relative; width: 624px; padding: 29px 0 40px; 0; float: left; color: #6A6249; font-size: 14px; } .boxText .boxArticles a.buttonEmail { position: absolute; width: 191px; height: 26px; display: block; bottom: 0; right: 0; font-size: 15px; color: #DBC580; text-align: center; } .boxText .boxArticles a.buttonEmail span { background: url('../images/button-email.jpg') no-repeat top left; } .boxText .boxArticles a.buttonTop { position: absolute; width: 120px; height: 26px; display: block; bottom: 0; left: 15px; font-size: 15px; color: #DBC580; text-align: center; } .boxText .boxArticles a.buttonTop span { background: url('../images/button-top.jpg') no-repeat top left; } .boxText .boxArticles h2 { margin-left: 45px; margin-bottom: 10px; font-size: 25px; color: #DBC580; } .boxText .boxArticles p { margin: 0 0 15px 45px; line-height: 1.5; } .boxText .boxArticles p a { color: #B1A47C; } .boxText .boxArticles p.prefixImg { color: #B1A47C; overflow: hidden; } .boxText .boxArticles p.imgRightBig img { float: right; margin: 5px 0 10px 25px; border: #3B2A1D 4px solid; } .boxArticles .boxArticle { margin: 30px 0 20px 45px; } .boxArticles p.prefixImg img { float: left; margin: 5px 25px 10px 0; border: #3B2A1D 4px solid; } .boxArticles ul, .boxArticles ol { padding-left: 18px; line-height: 1.4em; } .boxArticles li { margin-bottom: 5px; } .boxArticles ul>li, .boxArticles ul ol ul li { list-style: square; } .boxArticles ol>li, .boxArticles ol ul ol li { list-style: decimal; } .boxArticles strong { font-size: 16px; padding-bottom: 10px; color: #968a66; } .boxArticles h2, .boxArticles h3, .boxArticles h4, .boxArticles h5, .boxArticles h6 { margin: 0 0 5px 45px; } .boxArticles ul, .boxArticles ol, .boxArticles table { margin: 0 0 20px 45px; } .boxArticles .boxArticle h2, .boxArticles .boxArticle h3, .boxArticles .boxArticle h4, .boxArticles .boxArticle h5, .boxArticles .boxArticle h6, .boxQuestions h2, .boxQuestions h3, .boxQuestions h4, .boxQuestions h5, .boxQuestions h6 { margin-left: 0; } .boxArticles .boxArticle .img { float: left; width: 128px; height: 83px; margin-top: 5px; border: #3B2A1D 4px solid; } .boxArticles .boxArticle .self { margin-left: 150px; } .boxArticles .boxArticle .title { margin-bottom: 10px; font-size: 19px; } .boxArticles .boxArticle .title a { color: #C98B75; } .boxArticles .boxArticle p { margin: 5px 0; } .boxArticle a.buttonArticle { width: 111px; height: 26px; margin-top: 10px; display: block; font-size: 15px; color: #DBC580; text-align: center; } .boxArticle a.buttonArticle span { background: url('../images/button-article.jpg') no-repeat top left; } .boxText .boxQuestions { width: 627px; } .boxQuestions h2 { color: #C98B75; } .boxQuestions h3 { padding-right: 100px; font-size: 14px; font-weight: normal; color: #837A5D; } .boxQuestions p { margin: 10px 15px 0 15px !important; font-size: 13px !important; } .boxQuestions .boxQuestion, .boxQuestions .boxAnswer { position: relative; margin-left: 35px; padding: 20px 10px; background: url('../images/hr-uzsi.jpg') no-repeat bottom center; } .boxQuestions .boxAnswer { background-color: #191009; } .boxQuestions .boxAnswer h3 { color: #6C5F3A; } .boxQuestions .boxAnswer p.answer { color: #574C2E; } .boxQuestions a.changer { position: absolute; width: 83px; height: 23px; display: block; top: 15px; right: 20px; font-size: 15px; color: #DBC580; text-align: center; } .boxQuestions .boxQuestion a.changer span { background: url('../images/question-changer.jpg') no-repeat top left; } .boxQuestions .boxAnswer a.changer span { background: url('../images/question-changer.jpg') no-repeat top right; } .boxText .productOffer { width: 236px; margin: 50px 0 0 689px; text-align: center; } .productOffer a.buttonRenokin { width: 174px; height: 38px; margin: 20px 0 0 35px; display: block; font-size: 24px; text-align: center; color: #BF915E; background-color: #6E0101; } .productOffer a.buttonRenokin span { background: url('../images/button-renokin.jpg') no-repeat top left; } #mainMenu { position: absolute; top: 115px; left: 0; width: 959px; height: 46px; overflow: hidden; } #mainMenu ul li { height: 46px; float: left; font-size: 14px; } #mainMenu ul li a { color: #DBC580; text-align: center; } #mainMenu ul li.menu1 { width: 225px; } #mainMenu ul li.menu1 span { background: url('../images/menu-1.jpg') no-repeat top left; } #mainMenu ul li.menu2 { width: 240px; } #mainMenu ul li.menu2 span { background: url('../images/menu-2.jpg') no-repeat top left; } #mainMenu ul li.menu3 { width: 248px; } #mainMenu ul li.menu3 span { background: url('../images/menu-3.jpg') no-repeat top left; } #mainMenu ul li.menu4 { width: 246px; } #mainMenu ul li.menu4 span { background: url('../images/menu-4.jpg') no-repeat top left; } #mainMenu ul li.active a span, #mainMenu ul li a:hover span { background-position: top right; } #foot { clear: both; padding: 25px 20px; font-size: 13px; color: #6A6249; margin: 0; background: url('../images/paticka.jpg') no-repeat top right; } body#hp #foot { background: none; } #foot a { color: #B08B6F; } #foot .patacontact { position: absolute; top: 25px; right: 20px; } #foot .links { margin: 30px 0 0 0; overflow: hidden; height: 100%; } #foot .links .h { float: left; font-size: 1em; margin-right: 5px; color: #6A6249; } #foot .links li { display: inline; } #foot .links li a { margin: 0 10px 0 6px; }