/* ---------------------------------------------------------------------------------------------------------- LT WebDevelopment (www.lukastomek.cz) Výstupní zařízení: screen, projection Autor: Lukáš Tomek (info@lukastomek.cz) Vytvořeno: 20/07/2008 ---------------------------------------------------------------------------------------------------------- */ /* -- Basics -- */ html, body, div, p, ul, ol, li, form, fieldset, h1, h2, h3, h4, h5, h6, address { margin: 0; padding: 0; list-style: none; } body { font: normal 62.8%/1.3 sans-serif; color: #000; text-align: center; background: #000; } a { color: #847248; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } a img { border:0; } input, select, textarea { font-family: lucida, sans-serif; font-size: 1em; vertical-align: middle; } input.button, select.button, textarea.button { background: #fff; padding: 2px 0; border: 1px solid #a19562; 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: 150px; height: 20px; overflow: visible; padding: 0 0px; color: #fff; background: #a19562; border: none; cursor: pointer; } label { cursor: pointer; padding-right: 5px; vertical-align: middle; } h1 { font-size: 2em; margin-bottom: .5em; } h2 { font-size: 1.45em; } h3 { font-size: 1.4em; } h4 { font-size: 1.1em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } h1, h2, h3, h4, h5, h6 { color: #a19562; } 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; } /* -- 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.1em; position: relative; z-index: 1; } #foot { font-size: 1.1em; z-index: 1; } /* -- Main classes -- */ .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: 1em !important; } .big { font-size: 1.2em; } .biggest { font-size: 2em; } .light { font-weight: normal !important; } .clearfix { width: 100%; overflow: hidden; padding-bottom: .8em; } .alt { font-weight: bold; } .black { color: #000 !important; } .red { color: #b7092a !important; } .gold { color: #a19562 !important; } .test { border: 1px black solid; } .smile { vertical-align: middle; margin: 0 2px; } .noBrd { border: none !important; } .noBrdL { border-left: none !important; } .noBrdR { border-right: none !important; } .autoWidth { width: auto !important; } .inlink { display: block; padding-left: 14px; background: url('../images/bg-inlink.gif') 0 4px no-repeat; } .relative { position: relative; } /* -- Graphic overlays -- */ a.overlaid, .overlaid a { display: block; cursor: pointer; overflow: hidden; } .overlaid { position: relative; width: 100%; height: 100%; } .overlaid span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* -- 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; } .formBox .label { display: block; padding-bottom: 3px; } /* -- Basic content constructs -- */ .list { margin-bottom: 0 !important; } .offsetTop { margin-top: 1em; } .offsetBottom { margin-bottom: 1em; } .info { font-size: .91em !important; margin-bottom: 5px; color: #999999 !important; } .cols { overflow: hidden; height: 100%; } .cols .col1 { float: left; } .cols .col2 { float: right; } .cols50 .col1, .cols50 .col2 { width: 48% !important; } .cols3 .col1, .cols3 .col2, .cols3 .col3 { width: 33%; float: left; } .cols3 .col3 { float: right; } .cols4 .col1, .cols4 .col2, .cols4 .col3, .cols4 .col4 { width: 25%; float: left; } .cols3 .col4 { width: 24%; } /* -- Layout -- */ #view { min-width: 990px; width: 100%; overflow: hidden; } #head { height: 165px; } #content { height: 434px; padding-top: 20px; background: url('../images/bg-content.jpg') 50% 0 no-repeat; } #foot { clear: both; height: 168px; text-align: center; color: #bed9ed; background: url('../images/bg-foot.jpg') 50% 0 no-repeat; } #view .holder { margin: 0 auto; width: 900px; } #head #logo { width: 404px; height: 99px; margin: 0 auto; text-align: center; } #logo span { background: url('../images/bg-logo.jpg') no-repeat; } #view #userLogin { position: absolute; top: 0; right: 0; width: 300px; padding: 15px; text-align: right; color: #bed9ed; } #userLogin a { font-weight: bold; } #userLogin p { margin-bottom: 2px; text-transform: uppercase; } #navigation { position: absolute; width: 880px; height: 50px; top: 115px; left: 50%; z-index: 15; margin-left: -440px; } #navigation #mainMenu { position: absolute; width: 100%; height: 27px; font-size: 1.1em; bottom: 0; left: 0; } #mainMenu li { position: absolute;; z-index: 1; float: left; width: 137px; height: 27px; } #mainMenu li a { display: block; width: 137px; height: 10px; padding: 8px 0 9px; text-align: center; } #mainMenu li a span {} #mainMenu li.active { z-index: 20 !important; } #mainMenu li a:hover span, #mainMenu li.active a span { background-position: 0px -27px !important; } #mainMenu li.mm-1 { z-index: 9; left: 0; } #mainMenu li.mm-2 { z-index: 8; left: 100px; } #mainMenu li.mm-3 { z-index: 7; left: 194px; } #mainMenu li.mm-4 { z-index: 6; left: 288px; } #mainMenu li.mm-5 { z-index: 5; left: 382px; } #mainMenu li.mm-6 { z-index: 4; left: 476px; } #mainMenu li.mm-7 { z-index: 3; left: 570px; } #mainMenu li.mm-8 { z-index: 2; left: 664px; } #mainMenu li.mm-9 { z-index: 1; left: 758px; } #mainMenu li.mm-1 a span { background: url('../images/menu/mm-1.png') no-repeat; } #mainMenu li.mm-2 a span { background: url('../images/menu/mm-2.png') no-repeat; } #mainMenu li.mm-3 a span { background: url('../images/menu/mm-3.png') no-repeat; } #mainMenu li.mm-4 a span { background: url('../images/menu/mm-4.png') no-repeat; } #mainMenu li.mm-5 a span { background: url('../images/menu/mm-5.png') no-repeat; } #mainMenu li.mm-6 a span { background: url('../images/menu/mm-6.png') no-repeat; } #mainMenu li.mm-7 a span { background: url('../images/menu/mm-7.png') no-repeat; } #mainMenu li.mm-8 a span { background: url('../images/menu/mm-8.png') no-repeat; } #mainMenu li.mm-9 a span { background: url('../images/menu/mm-9.png') no-repeat; } #mainMenu li.mm-1b { z-index: 8; left: 100px; } #mainMenu li.mm-2b { z-index: 7; left: 194px; } #mainMenu li.mm-3b { z-index: 6; left: 302px; } #mainMenu li.mm-4b{ z-index: 5; left: 396px; } #mainMenu li.mm-5b{ z-index: 4; left: 490px; } #mainMenu li.mm-6b{ z-index: 3; left: 584px; } #mainMenu li.mm-1b a span { background: url('../images/menu/mm-1.png') no-repeat; } #mainMenu li.mm-2b a span { background: url('../images/menu/mm-2_lite.png') no-repeat; } #mainMenu li.mm-3b a span { background: url('../images/menu/mm-3.png') no-repeat; } #mainMenu li.mm-4b a span { background: url('../images/menu/mm-4.png') no-repeat; } #mainMenu li.mm-5b a span { background: url('../images/menu/mm-8.png') no-repeat; } #mainMenu li.mm-6b a span { background: url('../images/menu/mm-9.png') no-repeat; } #navigation #subMenu { text-transform: uppercase; color: #fff; text-align: center; font-size: 1em; font-weight: bold; } #subMenu li { display: inline; } #subMenu li a { margin: 0 2px 0 2px; color: #fff; } #subMenu li.active a { color: #bed9ed; } #foot ul { text-transform: uppercase; padding: 15px 0 5px; } #foot ul li { display: inline; } #foot ul li a { color: #bed9ed; margin: 0 10px 0 6px; } #foot ul li a:hover { color: #fff; } #foot p { font-size: .8em; } #content #hpFlash { position: relative; width: 846px; height: 454px; margin: -20px auto 0; z-index: 10; } #content #leftContent { position: absolute; width: 865px; height: 100%; right: 50%; top: 0; z-index: 5; overflow: hidden; margin-right: 319px; text-align: right; background-repeat: no-repeat; background-position: 100% 0; } .leftDeco_1 { background: url('../images/deco/left_1.jpg'); } .leftDeco_2 { background: url('../images/deco/left_2.jpg'); } .leftDeco_3 { background: url('../images/deco/left_3.jpg'); } .leftDeco_4 { background: url('../images/deco/left_4.jpg'); } .leftDeco_5 { background: url('../images/deco/left_5.jpg'); } #content #rightContent { position: absolute; width: 865px; height: 100%; left: 50%; top: 0; z-index: 5; margin-left: hidden; margin-left: 319px; background-repeat: no-repeat; background-position: 0 0; } .rightDeco_1 { background: url('../images/deco/right_1.jpg'); } .rightDeco_2 { background: url('../images/deco/right_2.jpg'); } .rightDeco_3 { background: url('../images/deco/right_3.jpg'); } .rightDeco_4 { background: url('../images/deco/right_4.jpg'); } .rightDeco_5 { background: url('../images/deco/right_5.jpg'); } #content #welcome { position: absolute; top: 0; left: 50%; margin: 80px 0 0 -255px; z-index: 100; width: 510px; height: 277px; background: url('../images/bg-welcome.jpg') no-repeat; } #welcome form { padding: 135px 50px 0; text-align: center; } #welcome form label { display: block; color: #a19562; font-size: 1.1em; margin-bottom: 5px; } #welcome form select { width: 200px; text-align: center; } #content #mainContent { position: relative; z-index: 10; width: 628px; left: 5px; padding: 0 10px 0 20px; height: 400px; margin: 0 auto; overflow: auto; } #mainContent .main { font-size: 24px; margin-bottom: 2px; } #mainContent .line { margin-top: 20px; border-top: 1px #a19562 solid; padding-top: 5px; text-align: right; } #mainContent .radio { padding: 15px 0; } #mainContent .radio input { float: left; } #mainContent .radio .label { display: block; float: right; width: 90%; } #mainContent .radio .clearfix { padding-bottom: .4em; } #mainContent table {} #mainContent table td { padding: 5px 0; } #mainContent #productsList { padding: 10px 0 0 20px; } #productsList .item { width: 170px; height: 215px; float: left; margin: 0 25px 20px 0; } #productsList .item .img { height: 170px; overflow: hidden; text-align: center; } #productsList .item .img a .two { } #productsList .item .img a:hover .one { display: none; } #productsList .item .img a:hover .two { display: block; } #productsList .item .self { padding-left: 20px; } #productsList .item .title { font-size: 1em; color: #000; text-transform: uppercase; } #productsList .item .title a { color: #000; } #productsList .item .title a:hover { color: #fff; background-color: #000; text-decoration: none; } #mainContent #productDetail { } #productDetail .col1 { width: 320px !important; text-align: center; } #productDetail .col1 .mainImage { height: 320px; overflow: hidden; } #productDetail .col1 .gallery { position: absolute; width: 320px; bottom: 0; left: 10px; } #productDetail .col1 .gallery p { text-transform: uppercase; } #productDetail .col1 .gallery p a { margin: 0 3px; font-size: .8em; } #productDetail .col1 .gallery .in { position: relative; width: 256px; overflow: hidden; height: 62px; margin: 0 auto; } #productDetail .col1 .gallery .in ul { width: 5000px; overflow: hidden; } #productDetail .col1 .gallery .in li { margin-right: 8px; float: left; } #productDetail .col1 .gallery .in li img { border: 1px #fff solid; } #productDetail .col1 .gallery .in li.active img { border: 1px #000 solid; } #productDetail .col1 .gallery .navi li { position: absolute; top: 16px; width: 15px; height: 20px; overflow: hidden; } #productDetail .col1 .gallery .navi li a { color: #000; font-size: 35px; padding-bottom: 15px; } #productDetail .col1 .gallery .navi li.prev { left: 0; } #productDetail .col1 .gallery .navi li.prev span { background: url('../images/bg-product-gallery-prev.gif') no-repeat; } #productDetail .col1 .gallery .navi li.next { right: 0; } #productDetail .col1 .gallery .navi li.next span { background: url('../images/bg-product-gallery-next.gif') no-repeat; } #productDetail .col2 { width: 49% !important; text-align: right; } #productDetail .col2 .title { color: #000; font-size: 1.1em; margin: 3px 0; } #productDetail .col2 .selector { text-align: right; font-size: 1.1em; } #productDetail .col2 .accordion {} #productDetail .col2 .accordion li a { padding-left: 10px; background: url('../images/bg-product-plus.gif') 0 60% no-repeat; } #productDetail .col2 .accordion li .active { color: #000; } #productDetail .col2 .accordion .content { padding-top: 5px; } #productDetail .col2 .accordion table { font-size: .9em; } #productDetail .col2 .accordion table th { color: #fff; text-align: left; background: #a19562; text-transform: uppercase; } #productDetail .col2 .accordion table .even td { background: #e3dfd0; } #productDetail .col2 .accordion table th, #productDetail .col2 .accordion table td { padding: 3px 8px; text-align: left; } #productDetail .col2 .buttons { position: absolute; bottom: 0; right: 0; width: 300px; } #productDetail .col2 .buttons label { margin-top: -2px; } #productDetail .col2 .buttons .button { margin-bottom: 5px; } #productDetail .col2 .buttons .submit { width: 48%; padding: 0; margin-left: 4px; } #productDetail .col2 .buttons ul {} #productDetail .col2 .buttons ul li { display: inline; } #productDetail .col2 .buttons ul li a { margin: 0 5px 0 2px; } #mainContent .proceed { overflow: hidden; height: 30px; margin-bottom: 20px; text-transform: uppercase; } .proceed li { width: 119px; float: left; margin-right: 2px; padding-top: 2px; border-top: 12px #a19562 solid; } .proceed li.active { border-color: #000; } #mainContent .basket { } .basket th, .basket td { padding: 5px; border-top: 1px #a19562 solid; vertical-align: top; } .basket td { padding: 10px 5px; } .basket td a { color: #000; } .basket td table { width: auto; } .basket td table td { padding: 2px 10px; border: none; text-align: right; } .basket .size { width: 170px !important; } .basket .price { width: 60px !important; } .basket .edit { width: 20px !important; } .basket .button { width: 20px; text-align: center; border-color: #000; } .basket button { padding: 0 5px; } .basket .submit { color: #fff; font-size: 1em; background: #a19562; border: none; } #mainContent .order { margin: 6px 0 20px; } .order th, .order td { padding: 5px !important; vertical-align: top; } .order th { border: 1px #a19562 solid; border-width: 1px 0; } .order td a { color: #000; } .order .size { width: 100px !important; } .order .edit { width: 20px !important; } .order .submit { padding: 0 30px; color: #fff; font-size: 1em; background: #a19562; border: none; } #mainContent .advancedSearch {} .advancedSearch .submit { position: absolute; bottom: 0; right: 0; } #mainContent .basketForm { width: 340px; margin: 0 auto; } .basketForm p { margin: 10px 0; } #mainContent .basketFormSmaller .clearfix { padding-bottom: .6em; } #mainContent .basketFormBigger .clearfix { padding-bottom: 1em; } #mainContent .item { margin-bottom: 10px; } .item .title { color: #000; } #mainContent .itemsList { margin-top: 15px; } .itemsList .item { margin-bottom: 15px !important; } /* -- Content text -- */ #mainContent .text img, #mainContent .text a img { border-width: 6px; } #mainContent .text img { margin: 4px 0 5px; } #mainContent .text img.fl { margin-right: 20px; } #mainContent .text img.fr { margin-left: 20px; } #mainContent .text ul, #mainContent .text ol { padding-left: 20px; } #mainContent .text ul li { list-style: square; } #mainContent .text ol li { list-style: decimal; } #mainContent .text p, #mainContent .text ul, #mainContent .text ol, #mainContent .text table { margin-bottom: 15px; } #mainContent .text h2, #mainContent .text h3, #mainContent .text h4 { margin-bottom: 2px; } #mainContent .text address { font-style: normal; }