/** * Design by andrej * Html + CSS + JS with love by gondo * www.webdesigners.sk * 2009 * */ /* Classic reset */ * { margin: 0; padding: 0; outline: none 0; vertical-align: baseline; font-size: inherit; color: inherit; } a { outline: none 0; } a img { border: none 0; } :focus, :hover { outline: 0; } ol, ul, li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* General style */ body { width: 999px; margin: 0 auto; background: url(../images/background-main.png) no-repeat center 0 #320029; } #header { display: inline; margin-left: 20px; float: left; height: 148px; width: 959px; overflow: hidden; } #container { background: url(../images/background-container.png) repeat-y; width: 999px; float: left; } .hide-text { overflow: hidden; text-indent: -99em; } .text-alternative { overflow: hidden; text-indent: -99em; } /* Login */ #login { float: right; margin: 107px 0 0 0; height: 22px; } #login a { float: left; margin-right: 22px; height: 22px; } #login a.prihlasenie { width: 88px; background: url(../images/prihlasenie.png) no-repeat; } #login a.registracia { width: 88px; background: url(../images/registracia.png) no-repeat; } #login a.odhlasit { width: 90px; background: url(../images/odhlasit.png) no-repeat; } #login a:hover { background-position: 0 -22px; } #login span { float: left; margin-right: 4px; height: 22px; } /* Cart */ #kosik { min-width: 180px; float: right; background: url(../images/kosik.png) no-repeat; margin-top: 92px; height: 41px; padding: 7px 10px 0 0; } #kosik a.kosik { display: block; width: 28px; height: 30px; background: url(../images/kosik-kosik.png) no-repeat 15px 0; float: left; margin: 0 11px 0 0; padding-left: 15px; } #kosik a.kosik:hover { background-position: 15px 100%; } #kosik span.line { float: left; display: block; white-space: nowrap; } #kosik-end { float: right; display: inline; background: url(../images/kosik-end.png) no-repeat; height: 41px; width: 10px; margin: 92px 0 0 0 ; } /* Top menu */ menu#top-menu { display: inline; margin-left: 20px; background: url(../images/menu-top.png) no-repeat; float: left; width: 759px; height: 47px; clear: both; overflow: hidden; } menu#top-menu li { float: left; height: 100%; } menu#top-menu li a { display: block; width: 100%; height: 47px; line-height: 47px; background: url(../images/menu-top.png) no-repeat; } menu#top-menu li#hlavna-stranka a { width: 123px; background-position: 0 0; } menu#top-menu li#hlavna-stranka a.selected, menu#top-menu li#hlavna-stranka a:hover { background-position: 0 -47px; } menu#top-menu li#darceky-k-nakupu a { width: 136px; background-position: -123px 0; } menu#top-menu li#darceky-k-nakupu a.selected, menu#top-menu li#darceky-k-nakupu a:hover { background-position: -123px -47px; } menu#top-menu li#informacie a { width: 92px; background-position: -259px 0; } menu#top-menu li#informacie a.selected, menu#top-menu li#informacie a:hover { background-position: -259px -47px; } menu#top-menu li#obchodne-podmienky a { width: 166px; background-position: -351px 0; } menu#top-menu li#obchodne-podmienky a.selected, menu#top-menu li#obchodne-podmienky a:hover { background-position: -351px -47px; } menu#top-menu li#velkoobchod a { width: 109px; background-position: -517px 0; } menu#top-menu li#velkoobchod a.selected, menu#top-menu li#velkoobchod a:hover { background-position: -517px -47px; } menu#top-menu li#kontakt a { width: 75px; background-position: -626px 0; } menu#top-menu li#kontakt a.selected, menu#top-menu li#kontakt a:hover { background-position: -626px -47px; } /* search */ #search { background: url(../images/search.png) no-repeat; float: left; width: 200px; height: 47px; overflow: hidden; } #search input { float: left; margin: 15px 15px 0 15px; width: 130px; height: 20px; line-height: 20px; border: none 0; background: transparent; } #search input.submit { margin: 14px 0 0 0; width: 24px; background: url(../images/search-button.png) no-repeat; cursor: pointer; } #search input.submit:hover { background-position: 0 -20px; } /* Left panel */ #left-panel { width: 220px; float: left; background: url(../images/background-left-panel.png) no-repeat 0 52px; } #left-panel h3.kategorie { width: 100%; height: 68px; background: url(../images/nadpis-kategorie.png) no-repeat; } /* Left menu */ #left-menu { width: 200px; float: left; margin-left: 20px; display: inline; } #left-menu li { float: left; width: 100%; border-bottom: solid 1px #ccc; } #left-menu li a { display: block; width: 156px; line-height: 28px; background: url(../images/menu-left-polozka.png) no-repeat #d6d6d6; padding-left: 44px; } #left-menu li a.FIRST { background-image: url(../images/menu-left-top-polozka-prva.png); } #left-menu li a.selected, #left-menu li a:hover { background-position: 100% 0; background-color: #a2a2a2; } #left-menu li a.selected { border-bottom: solid 1px #ccc; } #left-menu li ul a { background-image: url(../images/menu-left-sub.png); background-color: #fff; } #left-menu li ul a.selected { border-bottom: none 0; } #left-menu li ul a:hover { background-color: #f0e0e8; } /* Rychle triedenie */ h3.rychle-triedenie { float: left; width: 220px; height: 50px; background: url(../images/nadpis-rychle-triedenie.png) no-repeat 20px 0; } #rychle-triedenie { width: 200px; float: left; margin-left: 20px; display: inline; } #rychle-triedenie li { float: left; width: 100%; border-bottom: solid 1px #ccc; } #rychle-triedenie li a { display: block; width: 156px; line-height: 28px; background: no-repeat #d6d6d6; padding-left: 44px; } #rychle-triedenie li a.pre-muzov { background-image: url(../images/pre-muzov.png); } #rychle-triedenie li a.pre-zeny { background-image: url(../images/pre-zeny.png); } #rychle-triedenie li a.unisex { background-image: url(../images/unisex.png); } #rychle-triedenie li a.do-30 { background-image: url(../images/do-30.png); } #rychle-triedenie li a.od-30-do-60 { background-image: url(../images/od-30-do-60.png); } #rychle-triedenie li a.od-60-do-90 { background-image: url(../images/od-60-do-90.png); } #rychle-triedenie li a.od-90-do-120 { background-image: url(../images/od-90-do-120.png); } #rychle-triedenie li a.nad-120 { background-image: url(../images/nad-120.png); } #rychle-triedenie li a.najpredavanejsi-tovar { background-image: url(../images/najpredavanejsi-tovar.png); } #rychle-triedenie li a.novinky { background-image: url(../images/novinky.png); } #rychle-triedenie li a.akcie { background-image: url(../images/akcie.png); } #rychle-triedenie li a.selected, #rychle-triedenie li a:hover { background-position: -200px 0; } /* Mailing list */ h3.mailinglist { width: 220px; height: 50px; background: url(../images/nadpis-mailinglist.png) no-repeat 20px 0; float: left; } h4.mailinglist { background: url(../images/background-mailinglist.png) no-repeat; margin-left: 20px; display: inline; float: left; width: 170px; padding: 15px 15px 0 15px; } div.mailinglist { width: 200px; float: left; margin-left: 20px; margin-bottom: 15px; display: inline; background: url(../images/input-mailinglist.png) no-repeat 0 bottom transparent; } div.mailinglist p { padding: 10px 15px 15px 15px; } div.mailinglist form { float: left; width: 100%; padding-bottom: 11px; } div.mailinglist form input { float: left; margin: 4px 0 0 25px; border: none 0; width: 120px; } div.mailinglist form input.submit { margin: 0 0 0 14px; width: 26px; height: 20px; background: url(../images/input-ok.png) no-repeat; cursor: pointer; } div.mailinglist form input.submit:hover { background-position: 0 -22px; } /* Middle panel */ #middle-panel { width: 559px; float: left; overflow: hidden; } #middle-panel h2 { width: 559px; height: 68px; line-height: 96px; background: url(../images/nadpis-prazdny.png) no-repeat; overflow: hidden; } #middle-panel .sexshop-online span { float: left; display: block; width: 130px; height: 68px; background: url(../images/nadpis-sexshoponline.png) no-repeat; } #middle-panel .produkty span { float: left; display: block; width: 85px; height: 68px; background: url(../images/nadpis-produkty.png) no-repeat; } #middle-panel .objednavka span { float: left; display: block; width: 108px; height: 68px; background: url(../images/nadpis-objednavka.png) no-repeat; } #middle-panel .prazdna { padding-left: 20px; } #banner, #banner img { float: left; } #top-bar { float: left; background: url(../images/background-novinky.png); width: 559px; height: 50px; display: block; } #top-bar h3.novinky { display: inline; width: 55px; height: 20px; background: url(../images/nadpis-novinky.png) no-repeat; margin: 23px 0 0 19px; float: left; } #zoradit { display: inline; float: right; margin: 23px 5px 0 0; } #zoradit span.text { display: inline; float: left; margin-right: 8px; } #zoradit a { position: relative; display: inline; height: 18px; line-height: 18px; float: left; padding: 0 11px; margin: -2px 10px 0 0; background: url(../images/novinky-input.png) no-repeat -2px 0; } #zoradit a span.end { display: block; position: absolute; width: 2px; height: 18px; background: url(../images/novinky-input.png) no-repeat; right: 0; top: 0; } #middle-polozky { float: left; width: 560px; background: url(../images/background-middle-line.png) repeat-y 279px 0 ; overflow: hidden; } #middle-polozky .polozka { float: left; width: 280px; height: 168px; border-bottom: solid 1px #ccc; overflow: hidden; } #middle-polozky .first { background: url(../images/background-polozka-gradient.png) no-repeat; } #middle-polozky .second { background: url(../images/background-polozka-gradient-2.png) no-repeat -1px 0; } #middle-polozky .polozka img { margin: -50px 19px 0 15px; float: left; } #middle-polozky .polozka h4 { margin: 32px 0 5px 0; overflow: hidden; margin-left: 100px; height:28px; } #middle-polozky .polozka p { height: 50px; overflow: hidden; padding-right: 15px; text-align: justify; } #middle-polozky .polozka .objednat { float: left; clear: both; width: 280px; height: 40px; background: url(../images/content-input.png) no-repeat 5px 0; overflow: hidden; margin: 5px 0 4px 0; } #middle-polozky .polozka .cena-eur { display: inline; height: 20px; line-height: 20px; margin: 10px 0 0 25px; float: left; } #middle-polozky .polozka .cena-skk { float: left; margin: 15px 0 0 4px; } #middle-polozky .polozka input { cursor: pointer; float: right; width: 46px; height: 22px; border: none 0; margin-top: 9px; background: url(../images/middle-kupit.png) no-repeat; } #middle-polozky .polozka .detail-tlacidlo { float: right; width: 47px; height: 22px; background: url(../images/middle-detail.png) no-repeat; margin: 9px 14px 0 0; } #middle-polozky .polozka input:hover, #middle-polozky .polozka .detail-tlacidlo:hover { background-position: 0 -22px; } /* Paging */ #paging { padding: 5px 10px; float: left; } #paging a { display: block; float: left; width: 20px; height: 20px; line-height:20px; padding: 5px; background: url(../images/background-paging.png) no-repeat; text-align: center; } .gradient-top { background: url(../images/background-nazov-produktu.png) repeat-x #f7f8f9; } #cart-menu.gradient-top { background: url(../images/background-top-gradient.png) repeat-x #fff; } #nazov-produktu { line-height: 28px; padding: 0 20px; } /* Box */ #box { float: left; background: url(../images/background-detail.png) no-repeat bottom #e9f4fa; width: 100%; border-top: solid 1px #cde1eb; } #gallery { float: left; width: 264px; height: 463px; padding-left: 15px; } #gallery .image { float: left; display: inline; width: 239px; height: 359px; padding:10px; background: url(../images/produkt-frame.png) no-repeat; margin: 8px 9px 0 -4px; } #gallery .preview { display: block; float: left; width: 40px; height: 60px; padding: 5px; background: url(../images/preview-frame.png) no-repeat; } #right-container { float: left; width: 280px; } #description { float: left; width: 239px; min-height: 208px; border-left: solid 1px #cde1eb; padding: 25px 20px; overflow: hidden; } #fields { float: left; width: 279px; height: 124px; border-left: solid 1px #cde1eb; overflow: hidden; } #fields li { line-height: 28px; text-indent: 20px; height: 28px; float: left; width: 100%; border-top: solid 1px #cde1eb; } #fields li.cena { height: 35px; line-height: 35px; } #kupit { float: left; width: 279px; height: 80px; border-left: solid 1px #a7cfe4; border-top: solid 1px #a7cfe4; border-bottom: solid 1px #a7cfe4; background: #bddff0; overflow: hidden; } #kupit input { border: none 0; } #kupit input.minus { cursor: pointer; float: left; display: inline; width: 14px; height: 14px; background: url(../images/button-minus.png) no-repeat; margin: 36px 0 0 20px; } #kupit #counter { float: left; width: 20px; height: 20px; line-height: 20px; background: #fff; text-align: center; margin: 33px 0 0 5px; } #kupit input.plus { cursor: pointer; float: left; display: block; width: 14px; height: 14px; background: url(../images/button-plus.png) no-repeat; margin: 36px 0 0 5px; } #kupit .button { cursor: pointer; width: 156px; height:50px; float: left; display: block; background: url(../images/button-kupit.png) no-repeat; margin: 20px 0 0 30px; } #kupit input.minus:hover, #kupit input.plus:hover, #kupit .button:hover { background-position: 0 100%; } #cart-menu { float: left; width: 525px; height: 93px; overflow: hidden; padding: 22px 17px 0 17px; } #cart-menu li { float: left; margin-right: 15px; } #cart-menu li a { display: block; width: 70px; height: 78px; background: no-repeat; } #cart-menu li.kosik a { background-image: url(../images/menu-button-kosik.png); } #cart-menu li.pero a { background-image: url(../images/menu-button-pero.png); } #cart-menu li.zemegula a { background-image: url(../images/menu-button-zemegula.png); } #cart-menu li.retaz a { background-image: url(../images/menu-button-retaz.png); } #cart-menu li.sipka a { background-image: url(../images/menu-button-sipka.png); } #cart-menu li.selected a, #cart-menu li a:hover { background-position: 0 100%; } table{ float: left; width: 559px; border-top: solid 1px #e8e8e8; } thead { background: #f7f8f9; } thead tr td { height: 28px; line-height: 28px; } tr td { border-bottom: solid 1px #cde1eb; } tbody { background: #e9f4fa; } td.td-first { padding-left: 20px; } table#produkty-table tbody tr td { height: 57px; vertical-align: middle; overflow: hidden; } table#produkty-table .td-produkty { width: 201px; padding-left: 20px; } table#produkty-table .td-cena, table#produkty-table .td-pocet, table#produkty-table .td-cena-spolu { text-align: center; } table#produkty-table .td-cena { width: 120px; } table#produkty-table .td-cena-spolu { width: 120px; } table#produkty-table .td-delete { padding-right: 20px; } table#produkty-table .td-delete input { border: none 0; cursor: pointer; display: block; width: 20px; height: 20px; background: url(../images/button-delete.png) no-repeat; top 0; } table#produkty-table .td-delete input:hover { background-position: 0 100%; } table#produkty-table .td-delete input[type="hidden"] { display: none; } table#produkty-table .td-pocet { width: 58px; } table#produkty-table .td-pocet input { border: none 0; } table#produkty-table .td-pocet input.minus { cursor: pointer; float: left; display: inline; width: 14px; height: 14px; background: url(../images/button-minus.png) no-repeat; margin: 8px 0 0 0; } table#produkty-table .td-pocet .counter { float: left; width: 20px; text-indent: 0; height: 20px; padding: 5px; line-height: 20px; background: url(../images/background-counted-frame.png) no-repeat;; text-align: center; } table#produkty-table .td-pocet input.plus { cursor: pointer; float: left; display: block; width: 14px; height: 14px; background: url(../images/button-plus.png) no-repeat; margin: 8px 0 0 0; } table#produkty-table .td-pocet input.minus:hover, table#produkty-table .td-pocet input.plus:hover { background-position: 0 100%; } table#produkty-table .td-spolu { text-align: right; padding-right: 20px; height: 42px; background: #cfe7f4; width: 599px; } table.objednavka-vyber tbody tr td { height: 28px; vertical-align: middle; } table.objednavka-vyber tbody tr td input { vertical-align: middle; margin: -3px 3px 0 0; } .without-top-line { border-top: 0 none; } table#finish { float: left; border-top: none 0; } table#finish tbody tr td { height: 28px; line-height: 28px; } table#finish .td-spolu { text-align: right; background: #cfe7f4; padding-right: 30px; } table#finish .td-cena { width: 120px; } table#finish .td-cena, table#finish .td-pocet, table#finish .td-cena-spolu { text-align: center; } table#finish.ciara-top { border-top: solid 1px #e8e8e8; } #popis { float: left; width: 519px; padding: 15px 20px; border-bottom: solid 1px #e8e8e8; background: #f7f8f9; line-height: 160%; } #popis2 { float: left; width: 519px; padding: 15px 20px; border-top: solid 1px #e8e8e8; background: #f7f8f9; line-height: 160%; } #clanok { float: left; width: 519px; padding: 15px 20px 0 20px; border-bottom: solid 1px #e8e8e8; background: url(../images/background-clanok.png) no-repeat #f7f8f9; line-height: 160%; text-align: justify; } #clanok p { margin-bottom: 20px; } /* reset table */ #clanok table, #clanok tbody, #clanok tr, #clanok tr td { border: none 0; background: transparent; } /* style table */ #clanok table { width: 100%; border-collapse: separate; border-top: solid 1px #ccc; border-left: solid 1px #ccc; } #clanok table td { border-bottom: solid 1px #ccc; padding: 5px 10px; border-right: solid 1px #ccc; } #navigation { height: 44px; width: 531px; float: left; padding: 23px 14px 13px 14px; background: #fff; } .spat { border: none 0; cursor: pointer; display: block; width: 154px; height: 44px; background: url(../images/button-spat.png) no-repeat; } .odoslat-heslo { border: none 0; cursor: pointer; display: block; width: 154px; height: 44px; background: url(../images/button-odoslat.png) no-repeat; } input.pokracovat { border: none 0; cursor: pointer; display: block; width: 154px; height: 44px; background: url(../images/button-pokracovat.png) no-repeat; } input.objednat { border: none 0; cursor: pointer; display: block; width: 154px; height: 44px; background: url(../images/button-objednat.png) no-repeat; } .odoslat-heslo:hover, .spat:hover, input.pokracovat:hover, input.objednat:hover { background-position: 0 100%; } .objednavka-formular p { margin: 23px 0 0 0; } #zmen-udaje .input-frame { float: left; width: 150px; height: 20px; padding: 5px; background: url(../images/background-input.png) no-repeat; } .objednavka-formular .input-frame { float: left; width: 150px; height: 20px; padding: 5px; background: url(../images/background-input.png) no-repeat; margin-top: 10px; } #zmen-udaje .input-frame input, .objednavka-formular .input-frame input { border: none 0; width: 140px; height: 20px; line-height: 20px; margin-left: 5px;} .objednavka-formular .zabudnute-heslo { float: left; margin: 17px 0 0 10px;} .objednavka-formular .submit { cursor: pointer; clear: both; margin: 14px 0 18px 0; float: left; border: none 0; width: 154px; height: 44px; background: url(../images/button-prihlasit.png) no-repeat; } .objednavka-formular .submit:hover { background-position: 0 100%; } .objednavka-formular .submit-registrovat { cursor: pointer; clear: both; margin: 14px 0 18px 0; float: left; border: none 0; width: 154px; height: 44px; background: url(../images/button-registrovat.png) no-repeat; } .objednavka-formular .submit-registrovat:hover { background-position: 0 100%; } .objednavka-formular ul { margin-top: 5px; line-height: 130%; } .halve { float: left; width: 269px; } .halve label { float: left; width: 80px; margin: 10px 10px 0 0; clear: both; overflow: hidden; } .halve .input-frame { float: left; margin: 0 0 10px 0; } #zmen-udaje { float: left; width: 559px; background: url(../images/background-middle-line-blue.png) 279px repeat-y #e9f4fa; border-bottom: solid 1px #cde1eb; padding: 0 0 20px 0; } #zmen-udaje .halve { width: 279px; } #zmen-udaje .halve label { margin: 7px 0 0 20px; } #zmen-udaje h5 { width: 279px; margin: 0 0 20px 0; height: 28px; line-height: 28px; text-indent: 20px; background: url() #fff no-repeat; border-bottom: solid 1px #cde1eb; } #zmen-udaje h5.left { background-image: url(../images/background-polozka-gradient.png); } #zmen-udaje h5.right { width: 278px; float: left; background-image: url(../images/background-polozka-gradient-2.png); } #deliaca-ciara { width:1px; height: 28px; float: left; background: url(../images/background-middle-line-light.png) repeat-y #e8e8e8; } .ciara-hore { background: red;} #zmen-button { float: left; width: 559px; height: 80px; } #zmen-button input { margin: 24px 0 0 14px; border: none 0; cursor: pointer; width: 154px; height: 44px; background: url(../images/button-zmen.png) no-repeat; } #zmen-button input:hover { background-position: 0 100%; } #dakujeme { float: left; width: 519px; padding: 15px 20px; background: #fae5ef; border-top: solid 1px #d7adc2; border-bottom: solid 1px #d7adc2; } #dakujeme h5 { margin-bottom: 5px; } /* Right Panel */ #right-panel { background: url(../images/background-right-panel.png) no-repeat right 52px; width: 220px; float: left; } #right-panel h3.najpredavanejsi-tovar { width: 100%; height: 68px; background: url(../images/nadpis-najpredavanejsie.png) no-repeat; } #right-panel .polozka { width: 198px; margin-left: 1px; border-bottom: solid 1px #ccc; background: #f7f7f7; } #right-panel .first { background: url(../images/background-right-top.png) no-repeat -1px 0 #f7f7f7; } #right-panel .polozka a.obrazok { display: inline; float: left; margin: 14px 15px; width: 168px; text-align: center; overflow: hidden; } #right-panel .polozka h4 { margin: 0 15px; } #right-panel .polozka p { margin: 5px 15px; text-align: justify; } #right-panel .polozka .objednat { width: 198px; height: 46px; background: url(../images/polozka-input.png) no-repeat 4px 0; margin-bottom: 4px; padding: 9px 0 0 0; } #right-panel .polozka .cena-eur { width: 100px; line-height: 20px; margin: 1px 0 0 24px; } #right-panel .polozka .cena-skk { width: 100px; line-height: 14px; margin: 1px 0 0 24px; } #right-panel .polozka .detail-tlacidlo { float: right; width: 47px; height: 22px; background: url(../images/detail-input.png) no-repeat; margin-right: 14px; } #right-panel .polozka .detail-tlacidlo:hover { background-position: 0 -22px; } #right-panel h3.akciove-produkty { background: url(../images/nadpis-akciove.png) no-repeat; width: 200px; height: 50px; } /* Footer */ #footer { background: url(../images/background-footer.png) no-repeat; width: 999px; height: 90px; overflow: hidden; float: left; } #footer div { display: inline; float: left; margin: 1px 0 0 220px; width: 444px; height: 40px; overflow: hidden; background: url(../images/design_v1_11.png) no-repeat 14px 9px; padding: 18px 25px 10px 90px; } #footer a.webdesigners-sk { float: left; width: 188px; height: 40px; background: url(../images/webdesigners-logo.png) no-repeat; margin: 16px 0 0 6px; } #footer a.webdesigners-sk:hover { background-position: 0 -40px; } /* Home page */ #home { display: block; width: 315px; height: 121px; float: left; margin-top: 27px; } #home a { display: block; width: 100%; height: 100%; background: url(../images/logo.png) no-repeat 25px 0; } #home a:hover { background-position: 25px 100%; } .button-odhlasit { cursor: pointer; clear: both; margin: 14px 0 18px 0; float: left; border: none 0; width: 154px; height: 44px; background: url(../images/button-odhlasit.png) no-repeat; } .button-admin { cursor: pointer; clear: both; margin: 14px 0 18px 0; float: left; border: none 0; width: 154px; height: 44px; background: url(../images/button-admin.png) no-repeat; } .button-odhlasit:hover, .button-admin:hover { background-position: 0 100%; }