/* ========================= G L O B A L ============================================================================ */ * { margin: 0; padding: 0; border: 0; } body { background: #002250; text-align: center; } body.black { background: black; } body, td, input, textarea, select { font: 62.5% "Helvetica CE", helvetica, arial, lucida, sans-serif; } a:link, a:visited { color: #7588a1; text-decoration: none; } a:hover { color: #d6dce4; text-decoration: underline; } .black a:link, .black a:visited { color: white; } /* ................................................................................................................... */ .clr { clear: both; height: 1px; font-size: 1px; overflow: hidden; } .fl { float: left; } .fr { float: right; } .cl { clear: left; } .cr { clear: right; } .ac { text-align: center; } .ar { text-align: right; } .vm { vertical-align: middle; } hr, .hidden { display: none; } /* spacing */ .h { margin: 0 0 0.5em; } .s { margin: 0 0 1em; } .sh { margin: 0 0 1.5em; } .d { margin: 0 0 2em; } .dh { margin: 0 0 2.5em; } .t { margin: 0 0 3em; } /* =================================================================================================================== */ /* MAIN LAYOUT */ /* page */ #page { width: 100%; height: 395px; margin: -198px 0 0 0; position: absolute; top: 50%; left: 0; } #page.black { background: black; } #page-inner { width: 700px; height: 395px; margin: 0 auto; text-align: left; } /* head */ #head { height: 95px; background: url(images/bg-head.gif); position: relative; } #head-black { height: 95px; background: url(images/bg-head-black.gif); position: relative; } #advert { width: 140px; height: 280px; position: absolute; top: 95px; left: -150px; } #advert2 { width: 100px; height: 30px; position: absolute; top: 10px; left: 390px; } #advert3 { width: 100px; height: 30px; position: absolute; top: 10px; left: 470px; } #loga { width: 150px; height: 280px; position: absolute; top: 95px; left: 700px; } #logo { width: 134px; height: 68px; background: url(images/bg-logo.gif); float: left; } #head-black #logo { background: url(images/bg-logo-black.gif); } #logo span { position: absolute; top: -1000px; } #linked { width: 350px; height: 280px; position: absolute; top: 0px; left: 350px;} #linked span { position: absolute; top: -1000px; } /* menu */ #menu { list-style-type: none; position: absolute; top: 52px; left: 176px; } #menu li { float: left; } #menu li a { float: left; display: block; padding: 0 20px 0 0; font-size: 12px; font-weight: bold; } #menu li a.last { padding: 0; } #menu li.active a { color: #d6dce4; text-decoration: none; } /* submenu */ #submenu { list-style-type: none; position: absolute; top: 76px; left: 175px; } #submenu li { float: left; } #submenu li a { float: left; display: block; padding: 0 24px 0 0; font-size: 12px; font-style: italic; font-weight: bold; } * html #submenu li a { font-style: normal; } #submenu li.active a { color: #d6dce4; text-decoration: none; } /* main */ #main { height: 280px; position: relative; } #main a { text-decoration: underline; } /* foot */ #foot { height: 15px; padding: 5px 0 0; } * html #foot { height: 20px; he\ight: 15px; } #foot p { font-size: 1.1em; color: #7588a1; } #foot.black p { font-size: 1.1em; color: white; } #foot span { float: right; } #leftcol { width: 220px; float: left; } #rightcol { width: 240px; float: right; } /* ................................................................................................................... */ /* NASTAVITELNE PRVKY PRO KATALOGOVE STRANKY (samotny katalog hodinek)*/ /* definice pozadi paternu na strance #page */ #trend #page { background: url(images/bg-page-black.gif); } #sport #page { background: url(images/bg-page-black.gif); } #klasik #page { background: url(images/bg-page-gray.gif); } #gold #page { background: url(images/bg-page-gold.gif); } #trend #page.phase-0 { background: url(images/bg-page-black.gif); } #sport #page.phase-0 { background: url(images/bg-page-black.gif); } #klasik #page.phase-0 { background: url(images/bg-page-black.gif); } #gold #page.phase-0 { background: url(images/bg-page-black.gif); } /* definice pozadi hlavniho ramce #main */ /* zpravidla jsou stejne pro faze 1,2 i 3, s vyjimkou napr. Sport > Tour */ /* #index #main { background: url(images/bg-main-index-tdp.jpg); } */ #trend.ceramic #main { background: url(images/bg-main-trend-ceramic.jpg); } #trend.milano #main { background: url(images/bg-main-trend-milano.jpg); } #trend.nine #main { background: url(images/bg-main-trend-nine.jpg); } #trend.glitter #main { background: url(images/bg-main-trend-glitter.jpg); } #trend.fashion #main { background: url(images/bg-main-trend-fashion.jpg); } #trend.retro #main { background: url(images/bg-main-trend-retro.jpg); } #sport.chronobike #main { background: url(images/bg-main-sport-chronobike.jpg); } #sport.tour #main { background: url(images/bg-main-sport-tour.jpg); } #sport.chrono #main { background: url(images/bg-main-sport-chrono.jpg); } #sport.panama #main { background: url(images/bg-main-sport-panama.jpg); } #sport.multi #main { background: url(images/bg-main-sport-multi.jpg); } #sport.taucher #main { background: url(images/bg-main-sport-taucher.jpg); } #klasik.chrono #main { background: url(images/bg-main-klasik-chrono.jpg); } #klasik.leder #main { background: url(images/bg-main-klasik-leder.jpg); } #klasik.metall #main { background: url(images/bg-main-klasik-metall.jpg); } #klasik.automatik #main { background: url(images/bg-main-klasik-automatik.jpg); } #klasik.taschen #main { background: url(images/bg-main-klasik-taschen.jpg); } #gold #main { background: url(images/bg-main-gold.jpg); } #gold #page.phase-0 #main { background: none; } /* definice absolutni pozice obrazku hodinek */ /* zpravidla jsou stejne pro faze 1 a 2 */ #trend.ceramic #abs { top: 0px; left: 430px; } #trend.milano #abs { top: 0px; left: 430px; } #trend.nine #abs { top: 0px; left: 430px; } #trend.glitter #abs { top: 0px; left: 430px; } #trend.fashion #abs { top: 0px; left: 430px; } #trend.retro #abs { top: 0px; left: 430px; } #sport.chronobike #abs { top: 0px; left: 430px; } #sport.tour #abs { top: 0px; left: 430px; } #sport.chrono #abs { top: 0px; left: 430px; } #sport.panama #abs { top: 0px; left: 430px; } #sport.multi #abs { top: 0px; left: 430px; } #sport.taucher #abs { top: 0px; left: 430px; } #klasik.chrono #abs { top: 0px; left: 430px; } #klasik.leder #abs { top: 0px; left: 430px; } #klasik.metall #abs { top: 0px; left: 430px; } #klasik.automatik #abs { top: 0px; left: 430px; } #klasik.taschen #abs { top: 0px; left: 430px; } #gold #abs { top: 0px; left: 430px; } /* definice stylu obsahoveho ramce pro kolekci TREND */ #model h2, #cena h4, #popis p, #popis h1, #model li, #cena h3, #model a { color: white; } #model a:hover { color: silver; } #model li { list-style-type: square; list-style-position: inside; } #klasik #model h2, #klasik #cena h4, #klasik #popis p, #klasik #popis h1, #klasik #model li, #klasik #cena h3, #klasik #model a { color: #505050; } #klasik #model a:hover { color: black; } /* definice stylu obsahoveho ramce pro kolekci GOLD */ #gold #model h2, #gold #cena h4, #gold #popis p, #gold #model li, #gold #model a { color: #e2d5af; } #gold #model a:hover { color: #fff; } #gold #popis h1 { color: #ffaa00; } #gold #cena h3 { color: #e2d5af; } #gold #model li { list-style-type: square; list-style-position: inside; } /* definice stylu leveho menu pro jednotlive kolekce */ #trend #nav li a { color: #e1e1e1; text-decoration: none; } #trend #nav li a:hover { text-decoration: none; background-color: #555555; color: #fff; } #sport #nav li a { color: #e1e1e1; text-decoration: none; } #sport #nav li a:hover { text-decoration: none; background-color: #555555; color: #fff; } #klasik #nav li a { color: #555555; text-decoration: none; } #klasik #nav li a:hover { text-decoration: none; background-color: #7792b3; color: #fff; } #gold #nav li a { color: #eadeba; text-decoration: none; } #gold #nav li a:hover { text-decoration: underline; color: #eadeba; } /* ................................................................................................................... */ /* MODEL - box pro stranky modelu hodinek */ #model { width: 525px; height: 270px; padding: 10px 0 0; float: right; } * html #model { height: 280px; he\ight: 270px; } #model img { margin: 0; float: left; } #popis { width: 150px; position: absolute; top: 100px; } #tour #popis { width: 150px; position: absolute; top: 100px; } #popis h1 { padding: 0 15px 0 0; font-size: 1.1em; margin: 0 0 0.8em; } #popis p { padding: 0 15px 0 0; font-size: 1em; line-height: 1.1; } #model h2 { font-weight: normal; font-size: 1.1em; position: absolute; top: 100px; left: 175px;} #model h2 a { text-decoration: underline; } #model ul { font-size: 1em; list-style-type: none; width: 100px; position: absolute; } #model ul li { padding: 0 0 0 12px; } #model ul li a { text-decoration: none; } #model ul li a:hover { text-decoration: underline; } /* pozicovani seznamu pro ruzne faze */ .phase-1 #model #list-1 { top: 100px; left: 250px; } .phase-1 #model #list-2 { top: 100px; left: 310px; } .phase-1 #model #list-3 { top: 100px; left: 370px; } .phase-2 #model #list-1 { top: 125px; left: 175px; width: 170px;} .phase-2 #model #list-2 { top: 125px; left: 310px; } .phase-2 #model #list-3 { top: 125px; left: 370px; } #model #abs { margin: 0; position: absolute; } #model #list { position: absolute; top: 240px; left: 657px; font-size: 1.2em; font-weight: bold; } #model #list a { text-decoration: none; } #model #list a:hover { text-decoration: underline; } #model #cena { position: absolute; top: 240px; left: 175px; } #model #cena h4 { font-size: 1.0em; margin: 0 0 0.1em; font-weight: normal; } #model #cena h3 { font-size: 1.2em; } /* =================================================================================================================== */ /* NASTAVITELNE PRVKY PRO OBSAHOVE STRANKY (Novinky, Kontakty, Festina ...) */ /* typy layoutu - prirazuji se v BODY */ #index { } /* hlavni stranka s jednim velkym flashem */ #obsah { } /* stranky napr. Kontakt, Festina, Novinky atp. */ #vyber { } /* stranka s vyberem kolekci ... 4 x flash */ /* barevny prouzek vlevo a vpravo od stranky - prirazuji se v BODY */ .page-black { background: url(images/bg-page-black.gif); } .page-white { background: url(images/bg-page-white.gif); } .page-blue { background: url(images/bg-page-blue.gif); } /* obrazky na pozadi hlavniho bloku - prirazuji se v MAIN */ .main-novinky { background: url(images/bg_novinky.gif) no-repeat 125px 0; } .main-prodejci { background: url(images/bg_prodejci.gif) no-repeat 125px 0; } .main-download { background: url(images/bg_download.gif) no-repeat 125px 0; } .main-kontakt { background: url(images/bg_kontakt.gif) no-repeat 125px 0; } .main-eshop { background: url(images/bg_shop.jpg) no-repeat; } .main-gradient { background: url(images/bg-gradient.jpg) no-repeat; } /* ................................................................................................................... */ /* NAV + CONTENT - 2 sloupcove stranky: Novinky, Festina, Kontakty .... #obsah */ /* nav */ #nav { width: 155px; padding: 0 0 0 ; position: absolute; top: 100px; left: 10px; } #nav img { margin: 0 0 10px; } #nav ul { list-style-type: none; } #nav li a { margin: 0 0 0.1em; padding: 0 0 0 15px; font-size: 1.2em; display: block; width: 140px; } * html #nav li a { width: 140px; wi\dth: 130px; } #nav li.active a { font-weight: bold; } #nav object { position: absolute; left: 0; top: 105px; } #nav2 { width: 155px; padding: 0 0 0 ; position: absolute; top: 10px; left: 10px; } #nav2 img { margin: 0 0 10px; } #nav2 ul { list-style-type: none; } #nav2 li a { margin: 0 0 0.1em; padding: 0 0 0 15px; font-size: 1.2em; display: block; width: 140px; } * html #nav2 li a { width: 140px; wi\dth: 130px; } #nav2 li.active a { font-weight: bold; } #nav2 object { position: absolute; left: 0; top: 105px; } #nav2 p { margin: 1em 0 0 0; font-size: 1em; color: #FFFFFF; } #nav3 { width: 155px; padding: 0 0 0 ; position: absolute; top: 50px; left: 10px; } #nav3 ul { list-style-type: none; } #nav3 li a { margin: 0 0 0.1em; padding: 0 0 0 15px; font-size: 1.2em; display: block; width: 140px; } * html #nav3 li a { width: 140px; wi\dth: 130px; } #nav3 li.active a { font-weight: bold; } /* content */ #content { width: 515px; float: right; padding: 10px 10px 0 0; height: 260px; overflow: auto; } * html #content { width: 525px; w\idth: 515px; height: 280px; he\ight: 260px; } #content h2 { font-size: 1.2em; margin: 0 0 1em; } #content h3 { font-size: 1.1em; margin: 0 0 0.2em; } #content h4 { font-size: 1.1em; font-weight: normal; } #content p { font-size: 1.2em; line-height: 1.25; margin: 0 0 0.5em; } #content p.s { margin: 0 0 1em; } #content p.d { margin: 0 0 2em; } #content .news p { padding: 0 0 0 153px } #content ul { list-style-type: square; } #content li { font-size: 1.2em; margin: 0 0 0.1em 20px; } #content ul.prodejci { list-style-type: none; } #content ul.prodejci li { padding: 0.3em 0 0.3em 0.5em; margin: 0 0 0; } #content ul.prodejci li a { text-decoration: none; } #content ul.prodejci li a:hover { text-decoration: underline; } #content ul.prodejci li.odd { background: #304367;} #content ul.prodejci li.super { background: #002250; } #content ul.prodejci li.mesto { background: #002250; } #content dl { font-size: 1.2em; } #content dt { float: left; font-weight: bold; margin-bottom: -100px; } #content dd { margin: 0 0 0.1em 5em; } #content .il { float: left; margin: 0 8px 0 0; } #content .ir { float: right; margin: 0 0 0 8px; } #content .news { padding: 8px; } * html #content .news { height: 1%; } #content .dark { background: #ececed; } /* barevne schema textu nav + content pro bile pozadi */ .page-white #nav li a { background: url(images/bg-li-blue.gif) 0 3px no-repeat; text-decoration: none; } .page-white #nav li a:hover { text-decoration: underline; color: #002250; } .page-white #nav2 li a { background: url(images/bg-li-blue.gif) 0 3px no-repeat; text-decoration: none; } .page-white #nav2 li a:hover { text-decoration: underline; color: #002250; } .page-white #content * { color: #627288; } .page-white #content a:hover{ color: #002250; } /* barevne schema textu nav + content pro modre pozadi */ .page-blue #nav li a { background: url(images/bg-li-blue-light.gif) 0 3px no-repeat; color: #c8d5e6; text-decoration: none; } .page-blue #nav li a:hover { text-decoration: underline; } .page-blue #nav2 li a { background: url(images/bg-li-blue-light.gif) 0 3px no-repeat; color: #c8d5e6; text-decoration: none; } .page-blue #nav2 li a:hover { text-decoration: underline; } .page-blue #nav3 li a { background: url(images/bg-li-blue-light.gif) 0 3px no-repeat; color: #c8d5e6; text-decoration: none; } .page-blue #nav3 li a:hover { text-decoration: underline; } .page-blue #content * { color: #c8d5e6; } .page-blue #content a:hover{ text-decoration: none; } /* ................................................................................................................... */ /* KOLEKCE - stranka s vyberem kolekce .... #vyber */ #vyber #main div { padding: 30px 15px 0 15px; width: 305px; height: 250px; overflow: auto; } * html #vyber #main div { width: 335px; height: 280px; w\idth: 305px; he\ight: 250px; } #vyber #main p { font-size: 1.2em; line-height: 1.25; color: #ccc; } #vyber object { margin: 6px 0 0 10px; float: right; } /* ................................................................................................................... */ /* Eshop - stranka s eshopem .... #vyber */ #esklep #main div { padding: 15px 15px 0 15px; width: 300px; height: 250px; overflow: auto; } * html #esklep #main div { width: 335px; height: 280px; w\idth: 300px; he\ight: 250px; } #esklep #main p { font-size: 1.2em; line-height: 1.25; color: black; padding: 0 0 .3em 0; } #esklep #main a { color: gold; } #esklep #main a:hover { color: white; } /* ................................................................................................................... */ /* Phase-0 - univerzální pro v¹echny kolekce */ #main .banner { text-align: center; } #main .banner a { height: 248px; border: 1px solid #6d86a9; display: block; float: left; text-decoration: none; position: relative; } * html #main .banner a { width: 10px; } #main .banner a:hover { border: 1px solid #fff; } #main .banner a span { display: block; font-size: 1.3em; font-weight: bold; color: #fff; position: absolute; bottom: 5px; } /* nastaveni pro ruzny pocet banneru */ /* TREND - 7 banneru */ #trend .phase-0 .banner a span { width: 98px; } #trend .phase-0 .banner a { margin: 15px 8px 0; } /* SPORT - 5 banneru */ #sport .phase-0 .banner a span { width: 98px; } #sport .phase-0 .banner a { margin: 15px 8px 0; } /* KLASIK - 6 banneru */ #klasik .phase-0 .banner a span { width: 119px; } #klasik .phase-0 .banner a { margin: 15px 9px 0; } /* GOLD - 3 bannery */ #gold .phase-0 .banner a span { width: 214px; } #gold .phase-0 .banner a { margin: 15px 7px 0; } /* =================================================================================================================== */