/* ===================================================================================================================== * title: Basic * * version: 1.0 * * app: WebyShopy v1 * * site: www.webyshopy.cz/demo/ * * media: all * * project: Ing. Stanislav Jenší, EuroRegin * * design: committee * * code: Miroslav Jahoda, Polygrafix [mirek@polygrafix.cz] * * date: 08-09/2010 * ===================================================================================================================== */ /* Reset and basics --------------------------------------------------------------------------------------------------------------------- */ html, body, div, p, address, hr, h1, h2, h3, h4, h5, h6, img, a, span, em, strong, abbr, ol, ul, li, dl, dt, dd, form, fieldset, legend, label, blockquote {margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;} html {min-width: 100%; min-height: 100%;} body, input, select, textarea {font-family: 'Montserrat', "Century Gothic", sans-serif;;} body {font-size: 15px; line-height: 21px; color: #000000; background: #ffffff;} input, select, textarea {font-size: 15px; line-height: 21px;} strong {font-weight: bold;} strong a {font-weight: bold;} strong span {font-weight: inherit;} em {font-style: italic;} ul, ol {list-style: none;} /* Links --------------------------------------------------------------------------------------------------------------------- */ a:link {text-decoration: underline; color: #b4914d;} a:visited {text-decoration: underline; color: #b4914d;} a:hover, a:focus {text-decoration: underline; color: #000000;} /* Layout --------------------------------------------------------------------------------------------------------------------- */ #bg3, #bg2, #bg1, #bg0 {} #bg3 {background: ; min-width: auto;} #bg2 {background: url("../images/678/paticka_hola.png") center 100% repeat-x;} #bg1 {background: url("../images/678/bg_menu2.png") center 0px repeat-x;} #bg0 {background: ; padding-top: 30px;} #top {position: relative; width: calc(100% + 0px); height: 629px; margin: 0 auto; background: ; border: 0;} #webyshopy .highest-menu {margin-top: 0; border-top: 0;} #header {position: relative; width: auto; height: 629px; margin: 0 auto; color: ; border: ; border-bottom: 0;} #main {position: relative; z-index: 20; width: 100%; max-width: 1010px; margin: 0 auto; padding: 0; color: #000000; border: ; border-top: 0;} #line {clear: both; overflow: hidden; height: 25px; padding: 5px 5px; border: ; border-width: ; background: ;} #line p {margin: 0;} #top-menu {pointer-events: none; position: relative; z-index: 1005; height: 90px; width: calc(100% + 0px); margin: 0 auto; padding-left: 0px; background: transparent; border: ; border-bottom: 0;} #main #top-menu {position: static; height: auto; margin: 0; border: 0;} #content {background: #ffffff; margin: 0; padding-bottom: 10px;} #content-inner {width: calc(100% + 0px); padding: 0px 0px; background: ;} #column-middle {float: left; width: calc(100% - 200px); padding: 0 0px; margin-left: 200px;} .full #column-middle {width: calc(100% + 0px); margin-left: 0;} #column-left {float: left; width: 200px; height: auto !important; height: 350px; min-height: 350px; margin-left: calc(-1 * (100% + 0px)); background: ;} #column-right {float: right; width: 0px; background: ;} #row-bottom {clear: both; overflow: hidden;} #row-bottom .mod {float: left; margin-right: 0px; padding: 0 6px 6px;} #row-bottom .mod h2 {margin: 0 -6px 6px;} #footer {height: 80px; overflow: hidden; padding: 20px 10px 0px; line-height: 80px; color: #ffffff; background: ; border: ; border-width: ;} #arrows {width: 49%; float: left;} #meta {width: 49%; float: right; text-align: right;} .p-frontpage .full #column-middle {width: calc(100% + 0px); padding: 0 0px;} .p-frontpage .short #column-middle {width: calc(100% - 200px); padding: 0 0px;} .p-frontpage .short #column-left {margin-left: calc(-1 * (100% + 0px));} .social-icons {position: absolute; top: 0; right: 0; z-index: 1010;} /* Navigation --------------------------------------------------------------------------------------------------------------------- */ .menu {} .menu li {margin: 0 0 -1px; list-style: none;} .menu li.last-child {margin-bottom: 0;} .menu li a {display: block; width: 180px; padding: 6px 10px; font-size: 14px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 28px; text-transform: uppercase;} .menu li a:link, .menu li a:visited {font-weight: normal; text-decoration: none; color: #B4914D; background: #333333;} .menu li a:hover, .menu li a:focus, .menu li.active a {font-weight: normal; text-decoration: none; color: #ffffff; background: #333333; outline: none;} .menu li li {margin: 0;} .menu li li a:link, .menu li li a:visited {font-weight: normal; text-decoration: none; color: #b4914d; background: #333333;} .menu li li a:hover, .menu li li a:focus, .menu li li.active a {font-weight: normal; text-decoration: none; color: #ffffff; background: #333333;} .menu > li > a {width: auto;} .m-shop {} .m-shop li a:link, .m-shop li a:visited {color: #B4914D; background: #333333;} .m-shop li a:hover, .m-shop li a:focus, .m-shop li.active a {color: #ffffff; background: #333333; outline: none;} .m-shop li li a:link, .m-shop li li a:visited {color: #b4914d; background: #333333;} .m-shop li li a:hover, .m-shop li li a:focus, .m-shop li li.active a {color: #ffffff; background: #333333;} .d-tree {text-align: left;} .d-tree li ul {margin-top: -1px;} .d-tree li li {margin-bottom: -1px;} .d-tree li li a {width: 186px; padding-left: 14px;} .d-tree li li li a {width: 180px; padding-left: 19px;} .d-tree li li li li a {width: 172px; padding-left: 27px;} .d-tree li li li li li a {width: 161px; padding-left: 38px} .d-tree li li li li li li a {width: 146px; padding-left: 53px;} .d-tree li li li li li li li a {width: 124px; padding-left: 75px;} .d-tree li li li li li li li li a {width: 94px; padding-left: 105px;} .d-fly {} .d-fly li {position: relative;} .d-fly li ul {position: absolute; z-index: 9999;} #top-menu .menu {pointer-events: auto; position: absolute; right: 30px; z-index: 999; height: 80px; min-height: 90px; margin-bottom: 0;} #main #top-menu .menu {position: static;} #top-menu .menu-header {display: none;} #top-menu .menu li {float: left; margin: 0 2px 0 0;} #top-menu .menu li.last-child {margin-right: 0;} #top-menu .menu li a {width: calc(100% - 20px); padding: 6px 10px; white-space: nowrap; font-size: 14px; line-height: 78px; text-align: center;} #top-menu li a:link, #top-menu li a:visited {color: #B4914D; background: #333333;} #top-menu li a:hover, #top-menu li a:focus, #top-menu li.active a {color: #ffffff; background: #333333; outline: none;} #top-menu .d-fly li ul {top: 90px; left: 0;} #top-menu .d-fly li li {margin: 0; /*clear: left;;*/} #top-menu .menu li li a {width: 260px; line-height: 40px;} #top-menu li li a:link, #top-menu li li a:visited {color: #b4914d; background: #333333;} #top-menu li li a:hover, #top-menu li li a:focus, #top-menu li li.active a {color: #ffffff; background: #333333;} #top-menu .d-fly li li ul {top: 0; left: 280px;} #top-menu .d-fly li li li {/*padding-left: 2px;*/} #top-menu .center {display: inline-block; width: 100%; text-align: center;} #top-menu .center li {display: inline-block; float: none;} #top-menu .center li a {display: inline-block;} #top-menu .center li ul {top: 90px; left: 0;} #top-menu .center li li {display: block;} /*#top-menu .center li li ul {top: -8px;}*/ #column-left .menu {margin-bottom: 15px; text-align: left;} #column-left .d-fly li ul {top: 0; left: 200px;} #column-left .d-fly li li {/*padding-left: -1px;*/} #column-left .d-fly li li ul {/*padding-left: -1px;*/} h2.menu-header {width: auto; padding: 6px 0 6px 10px; margin: 0 0 -1px; font-weight: normal; font-size: 13px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 23px; text-transform: uppercase; color: #ffffff; background: #b4914d;} #header a:link, #header a:visited, #header a:hover, #header a:focus {text-decoration: none; outline: none;} #footer a:link, #footer a:visited {color: #ffffff; text-decoration: none;} #footer a:hover, #footer a:focus {color: #b4914d; text-decoration: none;} @keyframes top-anchor-bounce { 0% { transform: translate(0, 2px); } 50% { transform: translate(0, -2px); } 100% { transform: translate(0, 2px); } } #fixed-top-anchor {position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: none; width: 40px; height: 40px; font: 30px/48px verdana, sans-serif; text-align: center; border-radius: 4px; -webkit-transition: background-color 0.5s; transition: background-color 0.5s;} #fixed-top-anchor:link, #fixed-top-anchor:visited {text-decoration: none; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.4);} #fixed-top-anchor:focus, #fixed-top-anchor:hover {text-decoration: none; color: rgb(255, 255, 255); background: rgb(0, 0,0 );} #fixed-top-anchor:focus span, #fixed-top-anchor:hover span {display: block; animation: top-anchor-bounce 1s ease-in-out infinite;} .response {padding: 0 10px;} .response h4 {margin: 0 -10px 9px; padding: 6px 10px; color: #FFFFFF; background: #ED3344;} .response strong {} .response strong:after {content: ' –'; color: #FF99AA;} .response em {} .response p {} .response a:link, .response a:visited, .response a:hover, .response a:focus {} h4.error {margin-bottom: 9px; color: #ED3344;} h4.ok {margin-bottom: 9px; color: #029C3E;} h4.notice {margin-bottom: 9px; color: #000000;} .pagination {clear: both;} .pagination li {float: left; margin: 0 5px 5px 0;} .pagination a {display: inline-block; padding: 2px 6px; border: 1px solid #DEDEDE;} .pagination a:link, .pagination a:visited {text-decoration: none; color: #b4914d; background: #FFFFFF;} .pagination .active a:link, .pagination .active a:visited {text-decoration: none; color: #FFFFFF; background: #b4914d; border-color: #b4914d;} .pagination a:hover, .pagination a:focus {text-decoration: none; color: #b4914d; background: #666666; border-color: #666666; border-bottom-color: #b4914d;} #langs {float: left; display: inline; padding-left: 20px; line-height: 25px;} #langs li {display: inline; margin-right: 4px;} #langs a {outline: none;} #langs img {margin-top: 7px;} .social-icons ul {display: table; float: left; overflow: hidden; text-align: left;} .social-icons li {display: table-cell; padding-left: 5px; vertical-align: middle; list-style: none inside;} .social-icons a {display: block;} .social-icons img {display: block;} /* Content --------------------------------------------------------------------------------------------------------------------- */ #header .main-link {display: block; width: 100%; height: 100%;} #header-title, #header-subtitle, #header-description {position: absolute; top: 0; left: 0; z-index: 1004; display: block; text-shadow: 1px 1px 2px rgba(0,0,0,.5);} #header-title {font-weight: normal; font-size: 17px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 22px; text-transform: none; color: #b4914d;} #header-subtitle {font-weight: normal; font-size: 24px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 32px; text-transform: none; color: #ffffff;} #header-description {font-weight: normal; font-size: 20px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 24px; text-transform: none; color: #ffffff;} h1 {margin: 0 0 18px; font-weight: bold; font-size: 28px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 35px; text-transform: none; text-align: center; color: #b4914d;} h1 span {color: #000000; font-weight: bold;} h1 a {font-weight: bold;} h2 {margin-bottom: 18px; font-weight: normal; font-size: 15px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 23px; text-transform: none; color: #000000;} p {margin-bottom: 9px;} #column-middle .editor ul {margin: 9px 0; list-style: square inside;} #column-middle .editor ol {margin: 9px 0; list-style: decimal inside;} #column-middle .editor h2 {margin: 9px 0; font-weight: bold; font-size: 150%;} #column-middle .editor h3 {margin: 9px 0; font-weight: bold; font-size: 125%;} #column-middle .editor h4 {margin: 9px 0; font-weight: bold; font-size: 100%;} #column-middle .editor h5 {margin: 9px 0; font-weight: bold; font-size: 90%;} #column-middle .editor h6 {margin: 9px 0; font-weight: bold; font-size: 75%;} #line a:link, #line a:visited {text-decoration: none; color: #b4914d;} #line a:hover, #line a:focus {text-decoration: none; color: #000000;} #line span {} #line a:hover span, #line a:focus span {} #line .ico {display: inline-block; height: 25px; line-height: 25px;} #line .ico-logged-in {padding-left: 30px; background: url('../images/678/prihlaseni1.png') no-repeat 0% 50%;} #line .ico-login {padding-left: 30px; background: url('../images/678/prihlaseni2.png') no-repeat 0% 50%;} #line .ico-register {padding-left: 30px; background: url('../images/678/registrace1.png') no-repeat 0% 50%;} #line .ico-basket a {display: inline-block; height: 25px; line-height: 25px; padding-left: 35px; background: url('../images/678/kosik_karta.png') no-repeat 0% 50%;} #user {float: left;} #basket-summary {float: right;} #member {width: 400px; margin: 0 auto; text-align: center;} .mod {overflow: hidden; margin: 0 0 12px; padding: 0 6px 6px; color: #000000; background: ;} .mod h2 {margin: 0 -6px 6px; padding: 6px 0 6px 10px; color: #ffffff; background: #5e5e5e;} .mod h2 label {font-weight: inherit;} .mod p {margin-bottom: 0;} .mod a:link {color: #B4914D;} .mod a:visited {color: #B4914D;} .mod a:hover, .mod a:focus {color: #000000;} .mod_search {padding: 0;} .mod_search h2 {margin-left: 0; margin-right: 0;} .search_field {width: 142px; margin: 0 0 6px 0; padding: 4px 6px;} .search_submit {width: 38px; margin: 0 0 0 0; padding: 2px 6px;} .highlight {font-style: inherit; font-weight: inherit; text-decoration: inherit; background: yellow;} .article {margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid #DEDEDE;} .article h2 {margin-bottom: 9px;} .mod_calendar {} .mod_calendar dl {overflow: hidden; margin-bottom: 9px;} .mod_calendar dt {float: left; clear: both; margin: 0 6px 3px 0; font-size: 90%;} .mod_calendar dd {float: left; margin: 0 0 3px 0; color: #b4914d;} .mod_calendar span {border-bottom: 1px dotted #000000; cursor: help;} .mod_facebook iframe {height: 25px; overflow: hidden;} ul.events {margin-top: 9px; padding-top: 9px; border-top: 1px solid #DEDEDE;} ul.events li {margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid #DEDEDE;} ul.events h2 {margin-bottom: 0;} ul.events h2 span {margin-right: 6px;} ul.events p {margin: 9px 0 0;} table.events {} table.events td {width: 14.2%; height: 120px; vertical-align: top; border: 1px solid #DEDEDE;} table.events h2 {margin: -3px -6px 5px; padding: 2px 6px; color: #FFFFFF; background: #BCBCBC;} table.events .active h2 {background: #737373;} table.events li {margin-bottom: 5px; line-height: 1.33; list-style: none outside;} table.events span {border-bottom: 1px dotted #000000; cursor: help;} table.events .prev, table.events .next {overflow: hidden; vertical-align: middle; text-align: center; text-transform: uppercase; background: rgba(0,0,0,.1);} table.events .prev a, table.events .next a {padding: 9px; text-decoration: none; color: #000000; background: none;} .calendar-arrows {position: relative; overflow: hidden; margin: 18px 0; padding-right: 120px;} .calendar-arrows a {font-weight: bold;} .calendar-arrows .prev {float: left;} .calendar-arrows .next {float: right;} .calendar-arrows .filter {position: absolute; top: 0; right: 0; margin: 0; padding: 0; border: 0;} .calendar-arrows .year-month {padding: 0 100px; text-align: center;} .calendar-arrows .year-month select {margin-right: 4px; color: #B4914D;} .news {margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dotted #777777;} .news:last-child {margin: 0; padding: 0; border: 0;} .mod_news .news a:link, .mod_news .news a:visited {text-decoration: none; color: #000000;} .mod_news .news a:hover, .mod_news .news a:focus {text-decoration: underline; color: #000000;} #column-middle .news {overflow: hidden; margin-bottom: 12px; padding-bottom: 12px;} #column-middle .news h2 {margin-bottom: 9px;} #column-middle .news a {font-weight: bold; font-size: 15px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: 23px; text-transform: uppercase; color: #b4914d;} #column-middle .news-tag-description {margin-bottom: 36px;} .news .thumb {float: right; margin: 0 12px 6px 0; padding: ; background: ;} .news-tags-tree {margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px dotted #777777;} .news-tags {clear: both; padding: 12px 0; border-top: 1px dotted #777777;} .news-tags li {display: inline;} .news-tags li:after {content: ' –';} .news-tags li:last-child:after {content: none;} #column-middle .date {display: block;} #column-middle .date:before, .mod .date:before {content: '– ';} .p-sitemap #column-middle ul {margin-bottom: 9px;} .p-sitemap #column-middle ul ul {margin: 0 0 0 18px;} #column-middle .editor .gallery {list-style-type: none;} #column-middle .editor .gallery h4 {margin: 0 9px; font-weight: normal;} .gallery {overflow: hidden; margin-right: 0px;} .gallery li {position: relative; float: left; width: 230px; height: 270px; margin: 0 10px 10px 0; color: #737373; background: ; border: 1px dotted #8f8f8f; border-width: 1px;} .gallery-detail li {height: 280px;} .gallery h2 {margin-bottom: 0; font-weight: normal; font-size: 13px; font-family: 'Montserrat', "Century Gothic", sans-serif;; line-height: ; text-transform: uppercase;} .gallery h2 a {display: block; margin: -1px -1px 0; padding: 4px 10px; font-weight: normal; border: 1px solid #23439a; border-width: 1px 1px 1px;} .gallery h2 a:link, .gallery h2 a:visited {text-decoration: none; color: #ffffff; background: #b4914d;} .gallery h2 a:hover, .gallery h2 a:focus {text-decoration: none; color: #e3e3e3; background: #B4914D;} .gallery h4 {overflow: hidden; margin: 0 9px; text-align: center;} .gallery .date {margin-left: 9px;} .video-wrapper {position: relative; padding: 56.25% 0 0 0;} .video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} #login h4 {margin-top: 20px;} /* Products --------------------------------------------------------------------------------------------------------------------- */ #products {} .p-frontpage #products {margin-top: 36px;} .preview {overflow: hidden; margin-right: 0px;} .table {} .preview .product {position: relative; float: left; width: 230px; height: 380px; margin: 0 10px 10px 0; color: #000000; background: ; border: 1px solid #000000; border-width: 1px;} /*.p-shop .preview .product:nth-child(3n), .p-frontpage .preview .product:nth-child(3n) {margin-right: 0;}*/ .preview h2 {height: 46px; overflow: hidden; margin-bottom: 0; font-size: 12px; line-height: 18px;} .preview h2 a {display: block; height: 36px; margin: -1px -1px 0; padding: 4px 10px; font-weight: bold; border: 1px solid #737373; border-width: 1px 1px 1px;} .preview h2 a:link, .preview h2 a:visited {text-decoration: none; color: #ffffff; background: #808080;} .preview h2 a:hover, .preview h2 a:focus {text-decoration: none; color: #000000; background: #808080;} .thumb {width: 160px; height: 160px; overflow: hidden; margin: 0 auto; padding: 9px; text-align: center;} /*.thumb a {display: block;} .thumb img {width: 100%;}*/ .large-thumb {width: 200px; height: 200px;} .x-large-thumb {width: 320px; height: 320px;} .preview .product .thumb {position: relative;} .availability {clear: both; padding: 0 10px 10px; text-align: center;} .availability span {display: inline-block; padding: 1px 4px; border: 1px solid #000000;} .availability .stock {color: #000000; border-color: #000000;} .availability .sold, .availability .sold-out {color: #ED3344; border-color: #ED3344;} .preview .availability {overflow: hidden;} .preview .availability span {float: right;} .pricing {height: 22px; padding: 10px 10px 20px; font-size: 14px; line-height: 22px; text-align: center;} .price {float: right; font-weight: bold;} .old-price {font-size: 66.6667%; text-decoration: line-through; color: #B4914D;} .new-price {font-weight: bold; white-space: nowrap; color: #B4914D;} /* .add-to-basket {float: left; display: block; width: 44px; height: 22px; font-size: 12px;} .add-to-basket a {display: block; width: 44px; height: 22px; text-indent: -9999px; background: url('../images/add-to-basket.gif') 0 0 no-repeat;} .add-to-basket a:link, .add-to-basket a:visited {background-position: 0 0;} .add-to-basket a:hover, .add-to-basket a:focus {background-position: 0 -22px; outline: none;}*/ form.add-to-basket {float: left; display: block; width: 63px; height: 18px; padding: 3px 0; font-size: 12px; text-align: left;} .preview form.add-to-basket {display: inline-block; height: auto; padding: 0;} .preview .product .variations_select {overflow: hidden; padding: 0 9px; text-align: center;} .flag {position: absolute; top: -1px; right: -1px; display: block; width: 56px; height: 56px; text-indent: -9999px; background-position: top right; background-repeat: no-repeat;} .flag-new {background-image: url('../images/flag_new.gif');} .flag-offer {background-image: url('../images/flag_offer.gif');} .flag-sale {background-image: url('../images/flag_sale.gif');} .flag-top {background-image: url('../images/flag_top.gif');} .flag-1-tier {background-image: url('../images/flag_1-tier.gif');} .flag-2-tier {background-image: url('../images/flag_2-tier.gif');} .flag-counter {background-image: url('../images/flag_counter.gif');} .energy-label {display: block; height: 20px;} .energy-label a {display: block; height: 100%;} .energy-label img {display: block; height: 100%;} .preview .energy-label {position: absolute; bottom: 9px; right: 9px;} .table .product {position: relative; width: 100%; overflow: hidden; padding: 5px 0 4px; border-bottom: 1px solid #C0C0C0;} .table h2 {float: left; width: 50%; margin-bottom: 0; color: #000000;} .table h2 a {display: block; padding-left: 100px;} .table h2 a:link, .table h2 a:visited {text-decoration: none; color: #b4914d;} .table h2 a:hover, .table h2 a:focus {text-decoration: none; color: #000000;} .table span {display: block; padding-left: 100px; text-transform: none;} .table .thumb {float: left; width: 80px; height: 80px; overflow: hidden; margin-left: -50%; padding: 0;} .table .thumb img {width: 100%;} .table .availability {float: left; clear: none; width: 10%; margin: 0 1%; padding: 0; text-align: center;} .table .availability span {display: inline; padding: 0; background: transparent; border: none;} .table .pricing {float: left; width: 26%; height: auto; margin: 0 1%; padding: 0; font-size: 12px; line-height: 18px; text-align: right;} .table .price {display: block; float: right; padding: 0; font-weight: bold; text-align: right;} .table .old-price {font-size: 100%;} .table .new-price {} .table form.add-to-basket {float: right; clear: right; width: auto; height: auto; padding: 0; text-align: right;} .table form.add-to-basket select {display: block; max-width: 80px;} .table .flag {position: static; float: left; display: block; width: 10%; height: auto; padding: 0; text-align: center; text-indent: 0px; background: none;} .table .flag-new, .table .flag-offer, .table .flag-sale, .table .flag-1-tier, .table .flag-2-tier, .table .flag-top {background-image: none;} .table .energy-label {float: right; clear: right; margin-top: 5px;} h1 .url {padding-left: 15px; font-size: 13px; text-transform: none;} .breadcrumbs {margin: 0 0 9px; padding: 5px 10px 4px; font-weight: bold; color: #ffffff; background: #373737; border: 1px solid #737373; border-width: 1px 0 1px;} .breadcrumbs a {font-weight: bold; color: #ffffff;} .cgy-description {margin-bottom: 18px;} .vendor-logo {float: right; margin: 0 0 20px 15px;} .filter {clear: both; overflow: hidden; margin: 15px 0; padding: 7px; border: 1px solid #000000;} .filter select {margin-left: 3px; color: #B4914D;} .filter .vendors, .filter .tags {margin-bottom: 9px;} .filter .tags {margin-top: -4px;} .filter .vendors span .filter .tags span {position: relative; top: -2px;} .filter .vendors label .filter .tags label {position: relative; top: -2px; margin-right: 5px;} .filter .sort {display: inline; margin-right: 8px;} .filter .view-mode {display: inline;} #product {} #product h2 {text-transform: none; color: #000000;} #product .images-list {margin-right: 0px;} #product .thumb {position: relative; float: left; width: 160px; margin: 0 10px 10px 0; background: #FFFFFF; border: 1px solid #C0C0C0;} #product .large-thumb {width: 200px;} #product .x-large-thumb {width: 320px;} #product .meta {margin-left: 190px;} #product .pricing {height: auto; overflow: hidden; margin-bottom: 20px; padding: 0; text-align: left;} #product .price {float: left; font-size: 32px; line-height: 32px;} #product .new-price {margin-right: 5px;} #product .add-to-basket {float: right; width: auto; height: auto; margin: 0; padding-right: 20px;} #product .essox-finit-calc-product {display: inline-block; width: 130px; margin-left: 22px; vertical-align: middle;} #product dl {float: left; clear: right; margin-top: 0; line-height: 2; overflow: hidden; padding-bottom: 5px; border-bottom: 5px solid #666666;} #product dt {clear: left; float: left; width: 150px; margin-right: 5px; font-weight: bold; border-bottom: 1px solid #C0C0C0;} #product dd {float: left; width: 330px; border-bottom: 1px solid #C0C0C0;} #product .custom-param-highlighted {color: #B4914D; background: ;} #product .availability {padding: 0; font-weight: bold; text-align: left;} #product .ask-about-product {display: block; clear: left; padding: 7px 0;} #product .flag {top: 0; right: 0;} #product .description {clear: both; padding: 20px 0;} #product .images-list {clear: both; overflow: hidden;} #product .date {clear: both;} #product .energy-label {height: 32px; margin-top: -5px; margin-bottom: 10px;} #vendors {} #vendors li {overflow: hidden; margin-bottom: 10px;} #vendors .thumb {float: left; margin-right: 15px; padding: 0;} #vendors .thumb a {display: block; width: 160px; text-align: center;} #vendors .large-thumb a {width: 200px;} #vendors .x-large-thumb a {width: 320px;} #vendors h2 {margin-bottom: 15px; padding-left: 175px;} #vendors h2 a {padding: 3px 0;} #vendors .url {padding-left: 15px; font-size: 13px; text-transform: none;} #vendors .description {margin-bottom: 5px; padding-left: 175px;} #vendors a:link, #vendors a:visited {text-decoration: none;} #vendors a:hover, #vendors a:focus {text-decoration: none; background: #F0F0F0;} .mod_offer .product {width: 178px; height: 306px; margin: 0 auto 10px; border: 1px solid #000000; border-width: 1px;} .mod_offer h3 {margin-bottom: 0;} .mod_offer h3 a {display: block; margin: -1px -1px 0; padding: 4px 10px; border: 1px solid #737373; border-width: 1px 1px 1px;} .mod_offer h3 a:link, .mod_offer h3 a:visited {text-decoration: none; color: #ffffff; background: #808080;} .mod_offer h3 a:hover, .mod_offer h3 a:focus {text-decoration: none; color: #000000; background: #808080;} .mod_vendors li {display: inline;} .mod_vendors li:after {content: ' | ';} .mod_vendors li:last-child:after {content: none;} /* Forms --------------------------------------------------------------------------------------------------------------------- */ legend {font-weight: bold; font-size: 18px; text-transform: uppercase;} input[type="submit"] {cursor: pointer;} input.input {width: 190px;} input.num {width: 60px;} input.submit {padding: 3px 6px; font-weight: bold; font-size: 14px; text-transform: uppercase; color: #b4914d;} textarea {width: 100%; max-width: 735px; padding: 3px 6px;} form dl {margin: 20px 0;} form dt {float: left; clear: left; width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; padding-top: 3px;} form dd {margin-bottom: 3px; padding-left: 150px;} form dd input {width: 126px; padding: 3px 4px;} fieldset p {margin: 10px 0; color: #B4914D;} label.required {color: #b4914d;} span.required {margin-left: 1px;} fieldset.delivery {float: left; width: 370px;} fieldset.billing {float: right; width: 370px;} fieldset.buttons, fieldset.note {clear: both; padding: 20px 0;} fieldset.note label {display: block; margin-bottom: 3px; font-weight: bold;} .essox-finit-url {margin-top: 20px; padding-top: 25px; border-top: 1px dotted #777777;} .essox-finit-url img {margin-left: -5px;} .essox-finit-url button {cursor: pointer;} .pay-with-qr {margin-top: 20px; margin-bottom: 20px; padding-top: 25px; border-top: 1px dotted #777777;} .pay-with-qr a {display: block; width: 240px; height: 240px;} .pay-with-qr img {display: block;} .order-note {margin-top: 20px; padding-top: 20px; border-top: 1px dotted #777777;} .p-order fieldset.login {margin-bottom: 20px; padding: 20px 0; border: 1px dotted #777777; border-width: 1px 0;} .p-order fieldset.login dl {margin: 10px 0 0;} .p-order fieldset.login h3 {font-weight: bold; color: #b4914d;} .p-order fieldset.login .submit {margin: 5px 0 0 150px; font-size: 12px; color: #000000;} .tick input {display: block; float: left; width: auto; margin: 0.2em 0.7em 0 0; padding: 0; cursor: pointer;} .tick label {cursor: pointer;} #register-button, #order-finish {float: right;} #column-middle .editor .custom_form ul {margin: 0; list-style: none outside;} .custom_form {} .custom_form h4 {font-weight: bold;} .custom_form fieldset {padding: 6px 0 14px;} .custom_form legend {font-size: 14px;} .custom_form li {margin-bottom: 4px;} .custom_form label {display: block;} .custom_form input, .custom_form select {padding: 3px 6px;} .custom_form input {width: 40%;} .custom_form textarea {width: 90%;} .custom_form .tick input {display: block; float: left; width: auto; margin: 0.2em 0.7em 0 0; padding: 0; cursor: pointer;} .custom_form .tick label {cursor: pointer;} .custom_form .buttons input {width: auto; margin: 0; padding: 3px 6px; font-weight: bold; font-size: 14px; text-transform: uppercase; color: #b4914d; cursor: pointer;} /* Tables --------------------------------------------------------------------------------------------------------------------- */ table.styled {width: 100%; color: #737373; background: #ffffff; border-collapse: separate;} table.styled td, table.styled th {padding: 2px 5px;} table.styled thead td {font-weight: bold; color: #ffffff; background: #737373;} table.styled tbody td, table.styled tbody th {border-bottom: 1px solid #373737;} table.styled .num {text-align: right; white-space: nowrap;} table.styled .num input {text-align: right;} table.styled .button {text-align: center;} table.styled tfoot .buttons td {text-align: right;} table.styled tfoot .buttons input {padding: 3px 6px; font-size: 14px;} .order {margin-bottom: 15px;} .order tbody td, .order tbody th {border-bottom: 0;} .order tbody .url td, .order tbody .url th {border-bottom: 1px solid #373737;} .order tfoot .count td {padding-top: 8px;} .order tfoot .total-sans-vat td, .order tfoot .total-sans-vat th {padding-top: 15px;} .order tfoot .total-vat td {padding-bottom: 12px;} .order tfoot .total-vat th {padding-bottom: 15px; font-size: 18px;} .order tfoot .total-sans-vat th, .order tfoot .total-vat th {color: #666666;} .order .title {width: 386px;} .order .price {width: 63px; float: none;} .order .vat {width: 53px;} .order .price_vat {width: 53px;} .order .quantity {width: 63px;} .order .subtotal {width: 58px;} .delivery-payment-method {margin-bottom: 15px; overflow: hidden;} .delivery-method {width: 370px; float: left;} .payment-method {width: 370px; float: right;} .delivery-payment-method label {display: block; margin-bottom: 10px; font-weight: bold;} .delivery-payment-method li {margin-bottom: 3px;} .delivery-payment-method li label {font-weight: normal; cursor: pointer;} .delivery-payment-method li img {height: 2em; margin: -0.2em 0.333em 0 0.167em; vertical-align: middle;} .delivery-payment-method li input {vertical-align: top;} .packeta-selector-branch-name:not(:empty) {margin: 0.333em 0 0 2.333em; font-weight: bold;} .total-payment {text-align: right; color: #666666;} .total-payment div {margin-bottom: 30px; padding-top: 12px; font-size: 24px;} .order .essox-finit-tick td {padding-top: 12px;} .essox-finit-tick .tick {float: left; min-width: 200px;} .essox-finit-tick .tick img {display: inline-block; margin-top: 4px;} .essox-finit-calc {float: right; width: 130px; margin-top: 22px;} .basket {} .basket .title {width: 306px;} .basket .quantity {width: 88px;} .basket .remove {width: 73px;} #clear-basket {float: left;} #order-next {font-weight: bold; text-transform: uppercase; color: #b4914d;} .orders tbody th {text-align: left;} .orders tbody th.num {text-align: right;} /* ColorBox --------------------------------------------------------------------------------------------------------------------- */ #colorbox, #cboxOverlay, #cboxWrapper {position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden;} #cboxOverlay {position: fixed; width: 100%; height: 100%;} #cboxMiddleLeft, #cboxBottomLeft {clear: left;} #cboxContent {position: relative; overflow: visible;} #cboxLoadedContent {overflow: auto;} #cboxLoadedContent iframe {display: block; width: 100%; height: 100%; border: 0;} #cboxTitle {margin: 0;} #cboxLoadingOverlay, #cboxLoadingGraphic {position: absolute; top: 0; left: 0; width: 100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {cursor: pointer;} #cboxOverlay {background: #373737;} #colorbox {} #cboxContent {background: #b4914d; margin-top: 20px;} #cboxLoadedContent {background: #b4914d; padding: 5px;} #cboxTitle {position: absolute; top: -20px; left: 0; color: #ffffff;} #cboxCurrent {position: absolute; top: -20px; right: 0px; color: #ffffff;} #cboxSlideshow {position: absolute; top: -20px; right: 90px; color: #fff;} #cboxPrevious {position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url('../images/controls.png') top left no-repeat; width: 28px; height: 65px; text-indent: -9999px;} #cboxPrevious.hover {background-position: bottom left;} #cboxNext {position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url('../images/controls.png') top right no-repeat; width: 28px; height: 65px; text-indent: -9999px;} #cboxNext.hover {background-position: bottom right;} #cboxLoadingOverlay {background: #000;} #cboxLoadingGraphic { background: url('../images/loading.gif') center center no-repeat;} #cboxClose {position: absolute; top: 5px; right: 5px; display: block; background: url('../images/controls.png') top center no-repeat; width: 38px; height: 19px; text-indent: -9999px;} #cboxClose.hover {background-position: bottom center;} /* IE6 --------------------------------------------------------------------------------------------------------------------- */ * html #top-menu .center li ul {top: 90px;} * html #top-menu .center li li ul {top: 0;} * html #column-middle {margin-left: 100px;} * html #column-left {margin-left: calc(-1 * (100% + 0px));} * html .p-frontpage .short #column-middle {} * html .p-frontpage .short #column-left {margin-left: calc(-1 * (100% + 0px));} * html #footer {height: 21px;} * html #top-menu {height: 100px;} * html .preview h2 {background: #808080;} * html .mod_calendar dt, * html .mod_calendar dd {margin-bottom: 0;} * html .mod_calendar dd {float: none;} * html .calendar-arrows {zoom: 1;} * html .search_field {display: block; float: left;} * html .search_submit {display: block; float: right;} /* IE7+ --------------------------------------------------------------------------------------------------------------------- */ *:first-child+html #top-menu .center li ul {top: 90px;} *:first-child+html #top-menu .center li li ul {top: 0;} *:first-child+html .mod_calendar dt, *:first-child+html .mod_calendar dd {margin-bottom: 0;} *:first-child+html .mod_calendar dd {float: none;} *:first-child+html .search_field {display: block; float: left;} *:first-child+html .search_submit {display: block; float: right;} *:first-child+html #basket-summary {margin-top: -25px;} /* Clearfix http://nicolasgallagher.com/micro-clearfix-hack/ --------------------------------------------------------------------------------------------------------------------- */ /* .clearfix:after {display: block; clear: both; height: 0; line-height: 0; content: '.'; visibility: hidden;} .clearfix {display: inline-block;} html[xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;} */ /* For modern browsers */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { zoom: 1; } /* JavaScript enabled --------------------------------------------------------------------------------------------------------------------- */ .js {} /* Media queries --------------------------------------------------------------------------------------------------------------------- */