/* Copyright (C) 2012-2017 Kodmyran AB All Rights Reserved - Grid system is at the bottom of the file */ :root { --scroll-padding-top: 115px; } html { scroll-padding-top: var(--scroll-padding-top); } .userCountryName { font-weight: normal; border-top: 1px solid #1fbb6c; border-bottom: 1px solid #1fbb6c; font-size: 1.3em; vertical-align: baseline; color: #1fbb6c; } .userFlagSelection { vertical-align: baseline; float: left; width: 50%; border: 0; background-color: transparent; cursor: pointer; transition: all 400ms ease 0s; -webkit-transition: all 400ms ease 0s; } .userFlagSelection .textInfo { font-size: 1.1em; padding: 5px 0; } .userFlagSelection:hover { background-color: #f7f7f7; } .userFlagSelection:hover .inner { border: 1px solid #1fbb6c; } .userFlagSelection:hover .textState, .userFlagSelection:hover .textInfo { color: #1fbb6c; } .userFlagSelection:focus .inner { background-color: #f7f7f7; -webkit-animation: kiss-in 0.25s ease-out; -moz-animation: kiss-in 0.25s ease-out; animation: kiss-in 0.25s ease-out; } .userFlagSelection .inner { margin: 10px; border: 1px solid #ccc; padding: 10px 5px; text-align: center; } .userFlagSelection .inner img { margin: 10px 0;} .userFlagSelection .inner .textState { /*font-weight: 600;*/ font-size: 1.3em; /*text-transform: uppercase;*/ padding: 5px; } .userFlagSelection .inner .textInfo { font-weight: 200; } #countryList { /*display: inline-block; float: right; color: #fff; position: relative; margin-top: -3px; */ position: absolute; right: 0; /*bottom: 0;*/ bottom: -15px; z-index: 111;} #countryList ul {} #countryList li { font-size: .8em; text-align: left; display: block !important; padding: 2px 10px;} #countryList li a { color: #fff; } #countryList li:hover, #countryList li:focus { background: #565656; } #countryList li a:focus { -webkit-animation: kiss-in 0.25s ease-out; -moz-animation: kiss-in 0.25s ease-out; animation: kiss-in 0.25s ease-out; } #countryList li.active { background: #828282; } #countryList li img { display: inline-block; vertical-align: middle; margin-right: 9px; } #countryList li span { display: inline-block; vertical-align: middle; } #countryList a { display: block; padding: 2px 6px; text-decoration: none; } #countryList #countryDiv { min-width: 255px; } #countryChoose { cursor: pointer; height: 45px; font-size: .7em; border: 0; background-color: transparent; color: #fff; } #countryChoose:focus { outline: none; } #countryChoose .countryHeadImage {vertical-align: middle; max-width: 25px; margin-left: 4px; margin-right: 4px; } #countryChoose .countryHead { display: inline-block; vertical-align: middle; margin-top: 0; } #countryChoose span { display: inline-block; vertical-align: middle; margin-top: 0; float: none; margin-right: 0px; } #countryToggle { cursor: pointer; color: #0496ce; border: 0; background-color: transparent; vertical-align: middle; margin-left: 5px; } #countryDiv { position: absolute; right: 0; display: none; overflow: auto; background-color: #333; } .arrowRotate { transform: rotate(180deg); } #countryArrow { transition: all 0.3s ease-out; font-weight: 700; margin: 0 5px; font-size: 1.4em; vertical-align: middle; } /*#countryList.mobile { position: fixed; z-index: 100; float: none; bottom: 1%; left: 1%; background-color: rgba(255,255,255,1); border: 1px solid #e2e2e2; width: 120px; }*/ #countryList.mobile { position: relative; z-index: 100; float: left; bottom: 0; left: 0; background-color: rgba(255,255,255,1); border: 1px solid #e2e2e2; width: 100%; } #countryList.mobile #countryChoose, #countryList.mobile #countryChoose a { color: #000; } /*#countryList.mobile #countryDiv { min-width: 120px; bottom: 56px; position: inherit; left: 0; right: auto; }*/ #countryList.mobile #countryDiv { min-width: 120px; bottom: 0; position: inherit; left: 0; right: auto; } #countryList.mobile #countryChoose { min-width: 120px; bottom: 0; width: 100%; } /* "Base" elements */ html, body { border: none; height: 100%; } body { height: 100%; padding: 0; margin: 0; color: #333; font: 16px 'Roboto Condensed',Arial,Helvetica,sans-serif; } img, object, video { border: none; height: auto; max-width: 100%; } iframe { border: none; max-width: 100%; } a { text-decoration:none; color:#333; outline: 0; } a:active, a:hover { outline: 0; } a:focus { outline-offset:2px; text-decoration:underline; outline: thin dotted; color: #1f98bb; } a:hover { text-decoration:none; color: #1f98bb; } a:active { background-color:transparent; outline:none } ul { list-style-type: none; margin:0; padding: 0; } ul.checked { list-style-type: none !important; margin-left: 0px !important; margin-top: 10px; } .textContent li { display: list-item; position: relative; padding-left: 20px; padding: 2px 0 2px 20px; } .textContent li:before { content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0px; top: 6px; height: inherit; color: rgba(40,40,40,1); font-size: 13px; } /* Form controls */ input, select, textarea { border: 1px solid #ccc; font-family: inherit; } input[type=number] {-moz-appearance: textfield;} :-webkit-inner-spin-button { -webkit-appearance: none;} :-webkit-outer-spin-button { -webkit-appearance: none;} input, textarea, button { -webkit-border-radius: 0; } input[type=text], textarea { transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px #1fbb6c; margin: 5px 1px 3px 0px; border: 1px solid #1fbb6c; } caption { text-align: left; border-bottom: 1px solid #ccc; padding-bottom: 3px; text-transform: uppercase; } label { font-size: 0.9em; text-transform: uppercase; } form, fieldset { margin:0; padding:0; border:none; clear: both; } /* Skip link */ #skiplinks { left: 10px; position: absolute; top: 6px; z-index: 9999; } #skiplinks a { display: block; position: absolute; top: -500px; } #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active { background-color: #000; color: #fff; display: inline-block; font-weight: bold; left: 0; padding: 10px; position: absolute; top: 0; white-space: nowrap; } /* Print */ @media print { .noprint { display: none; } } @page { margin: 0.5cm; } /* Styled select */ .styled-select { overflow: hidden; background: #fff; border: 1px solid #DDDDDD; height: 40px; border-radius:2px; position: relative; } .styled-select select::-ms-expand { display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; } .styled-select select { width: 100%; height: 100%; border: 0; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; appearance: none; background: transparent url("../images/bg-arrows.png") no-repeat scroll right 12px; padding: 0 10px; padding-right: 35px !important; } /* Typography */ h1, h2, h3, h4 { font-family: 'Roboto Condensed', sans-serif; } h1 { font-size: 1.8em; font-weight: 600; text-transform: uppercase; } h1 .grey { font-weight: 300; } h2, .likeH2 { color: #494949; display: block; font-size: 1.5em; margin: 0; padding: 0px 0 5px; font-weight: 400; text-transform: uppercase; } h1.styled, h2.styled { position: relative; font-size: 1.4em; font-weight: 200; padding: 10px 0; text-align: center; text-transform: uppercase; border-bottom: 0px !important; background-color: #494949; color: #fff; } h3 { margin:0; padding:0px 0 3px 0; display:block; font-size:1.1em; font-weight: 400;} p { line-height: 1.6em; } p a { text-decoration: none; } /* Padding */ .pad { padding: 5px; } /* Support classes */ .floatLeft {float:left;} .floatRight {float:right !important;} .ib { vertical-align: top; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .clear {clear:both;} .col {float: left;} .justifyCenter {text-align: center;} .textSmall {font-size: 84%;} .textBig {font-size: 130%;} .textUnderline {text-decoration: underline;} .textItalic {font-style: italic;} .textBold {font-weight: 600;} .textNormal {font-weight: 300;} .textSmallLight {font-size: 80%; color: #666;} .textLightItalic {color: #7c7c7c;font-style: italic;} .textRight {text-align: right;} .textCenter {text-align: center;} .textLeft {text-align: left;} .dispNone {display: none;} .no-after:after {display: none;} .highlight {color: #006a31;} .highlightedCart {background-color: #42b84b !important; color: #fff !important;} .grey {color: #6b6b6b;} .green {color: #009900} .orange {color: #ea6a00 !important;} .onlyBig {display: none !important; } .onlySmall {display: block !important; } .wSpaceNormal {white-space: normal !important;} .pad0 {padding:0 !important;} th { text-align: left; font-weight: 600; } .close {display: none !important; transition: all 300ms; -webkit-transition: all 300ms;} .open {display: block !important; transition: all 300ms; -webkit-transition: all 300ms;} #topUsp li, ul.checked li { display: list-item; position: relative; padding: 2px 0 2px 25px; } #topUsp li:before, ul.checked li:before { content: '\f00c'; font-family: FontAwesome; position: absolute; left: 5px; top: 3px; height: inherit; color: #1fbb6c; } .flexRow { /* display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; */ } .flexRow > [class*='grid-'] { /* display: flex; flex-direction: column; -webkit-flex-direction: column; */ } .tableRow { display: table; height: 100%; } .tableRow > [class*='grid-'] { display: table-cell; float: none; vertical-align: top; height: 100%; } /* Fill boxes */ .innerFill { height: 100%; padding: 5px; background-color: rgb(255,255,255); position: relative; } .innerFill h1 { padding: 10px 10px; text-align: center; } .innerFill h2 { padding-left: 5px; text-align: center; } /* Shadow */ .bottomShadow { /*border-bottom: 2px solid #ececec;*/ } .boxShadow { -webkit-box-shadow: 0 8px 6px -6px #666; -moz-box-shadow: 0 8px 6px -6px #666; box-shadow: 0 8px 6px -6px #666; } /* Ribbons */ .ribbon-wrap { width: 100%; height: 188px; position: absolute; top: -4px; left: 4px; overflow: hidden; } .ribbon-wrap:before, .ribbon-wrap:after { content: ""; position: absolute; } .ribbon-wrap:before { width: 25px; height: 4px; right: 100px; background: #333; border-radius: 8px 8px 0px 0px; } .ribbon-wrap:after { width: 4px; height: 25px; right: 0px; top: 100px; background: #333; border-radius: 0px 8px 8px 0px; } .ribbon1 { width: 200px; height: 32px; line-height: 32px; position: absolute; top: 30px; right: -50px; z-index: 2; overflow: hidden; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #5f5f5f; text-align: center; color: #fff; } .ribbon3 { background: #cac6ba none repeat scroll 0 0; color: #595037; font-size: 0.75em; height: 25px; left: -1px; line-height: 25px; padding-left: 15px; position: absolute; top: 49%; width: 111px; z-index: 2; } .ribbon3:before, .ribbon3:after { content: ""; position: absolute; } /*.ribbon3:before { border-bottom: 6px solid #9e957c; border-left: 7px solid transparent; height: 0; left: 0.1px; top: -5.5px; width: 0;} */ .ribbon3:after { border-bottom: 12px solid transparent; border-left: 9px solid #cac6ba; border-top: 13px solid transparent; height: 0; right: -8.5px; width: 0; } /* Error and info boxes */ .info, .error { position: relative; padding: 20px 10px 20px 50px; border: 1px solid #ccc; background: #fff; margin: 15px 0; } .info { border: 1px solid #9ac39d; background: #e7f6e8; color: #02830b; } .info:before { content: '\2713'; font-size: 32px; font-weight: 400; left: 10px; position: absolute; top: 10%; color: #02830b; } .error { border: 1px solid #993333; background: #f2e7e7; color: #993333; } .error:before { content: '!'; font-size: 40px; font-weight: 400; left: 17px; position: absolute; top: 7%; color: #993333; } .observe { color: #993333; border: 1px dashed #993333; } /* Navigation related */ .nav-wrapper { height: 60px; } /* Menu left */ /* -- Toggle button when mobile mode */ #menuLeftToggle { background-color: #ffd11f; color: #fff; padding: 10px 0; text-align: center; font-weight: 600; cursor: pointer; display: none; } #menuLeftToggle span { position: relative; } #menuLeftToggle span:after { content: '\f107'; font-family: FontAwesome; position: absolute; right: -17px; top: 2px; height: inherit; } #menuLeftToggle.active span:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /* -- The menu */ #menuLeft { font-size: .8em; display: none; background-color: #f7f7f7; padding: 10px; } #menuLeft .backButton { color: #555; display: block; margin-bottom: 2px; padding: 3px; line-height: 20px; background-color: #fff; margin-top: -8px; } #menuLeft .backButton i { margin-right: 5px; padding-left: 0; } #menuLeft h2 { background-color: #000; color: #fff; font-size: 1em; font-weight: 400; padding: 10px; text-transform: none; } #menuLeft h3 { font-size: .9em; font-weight: 400; padding: 10px 0 5px 0; color: #000; } #menuLeft li { display: block; position: relative; padding:0; background-color: #fff; border-bottom: 1px solid #e4e4e4; overflow: auto; } #menuLeft li a { display: block; padding: 9px 5px; } #menuLeft ul > li.category { border-right: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; } #menuLeft li.category:hover { background-color: #fcfcfc; } #menuLeft li.category > a.changed { background-color: #f3f3f3; } #menuLeft li.child:hover { background-color: #fcfcfc; } #menuLeft li.child { border-bottom: 1px dashed #e4e4e4; padding-left: 14px; } #menuLeft li.child:last-child { border-bottom: 3px solid #e4e4e4; } #menuLeft li.active { background-color: #f1f1f1; } #menuLeft li.hasSub a:after { content: '\f0d7'; font-family: FontAwesome; position: absolute; right: 5px; top: 12px; height: inherit; color: #000; } #menuLeft li.noSub a:after { display: none; } #menuLeft li.hasSub a.changed:after { content: '\f0d8'; } #menuLeft .subMenuWrapper { display: none; position: relative; } /* Menu top */ #topMenu { height: 100%; display: table; width: 100%; } /* Top container when in mobile mode */ #menuTop, #menuTop.fixed { left: 0; position: fixed; width: 100%; z-index: 100; background-color: rgba(40,40,40,1); border-bottom: 1px solid #000; } #menuTop > .container { height: 100%; position: relative; } #menuTop { height: 60px; z-index: 4; width: 100%; z-index: 100; } /* countrySelect */ #countrySelect { padding: 10px; } #countrySelect img { padding: 0 5px; } #countrySelect .active img { background-color: #a9db67; border: 1px solid #75a733; border-radius: 3px; } #countrySelect ul { float: right; } #countrySelect ul { display: table; height: 100%; } #countrySelect li { display: table-cell !important; vertical-align: bottom; } #countrySelect li:hover img { background-color: #e3f6ca; border-radius: 3px; } /* jsSearchField */ #jsSearchField { display: block; padding: 10px; } #jsSearchField legend { display: none; } #jsSearchField button i { display: none; } #jsSearchField.fixed { display: none; } .search-form .searchContainer { position: relative; } .search-form button i { display: none; } .search-form .text { height: 37px; padding: 5px 50px 5px 10px; width: 100%; background-color: #fff; border: 1px solid #e4e4e4; } .search-form .text:focus, .search-form .icon:hover { color: #333; } .search-form .text:focus { outline: thin dotted; box-shadow: none; border: none;} .search-form .text:active { outline: none; } .search-form .icon { background-color: #000; height: 37px; position: absolute; right: 0px; top: 5px; width: 40px; border: 0; cursor: pointer; color: #fff; } .search-form .icon:focus { background-color: green } .search-form .icon:hover { background-color: #333; color: #fff; } .search-form .search-form { margin: 0 auto; max-width: 1180px; } /* jsMenuList */ #jsMenuList { background-color: #f7f7f7; box-shadow: 0 7px 5px -5px #d0d0d0; color: #fff; display: none; left: 0; max-height: 87%; overflow-x: hidden; overflow-y: auto; position: fixed; top: 60px; width: 100%; z-index: 40; } #jsMenuList li { display: block; } #jsMenuList a { display: block; font-size: .9em; height: 100%; } #jsMenuList a:active { text-decoration: none !important; color: #333333; } #jsMenuList a:focus, #jsMenuList.desktop li.category > a:focus { color: #1f98bb; } #jsMenuList li.category > a { word-wrap: break-word; padding: 15px 0 15px 15px; position: relative; z-index: 1; border-bottom: 1px solid #e1e1e1; } #jsMenuList li.category i { font-weight: 600; float: right; margin-right: 15px; font-size: 1.5em; padding: 5px 12px; margin-top: -5px; } #jsMenuList li.category .subMenuWrapper i { margin-top:-5px; } #jsMenuList li.category.changed i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #jsMenuList .level-1 li .menuTxt i { font-size: 1.1em; line-height: normal; padding-right: 6px; transform: rotate(0deg); } #jsMenuList .subMenuWrapper ul:not(:first-child) { margin-top: -12px; } #jsMenuList .subMenuWrapper .subMenuWrapper ul { padding-left: 45px; } #jsMenuList li.category > a:hover { background-color: #e8e8e8; } #jsMenuList li.child { padding: 0px; } #jsMenuList li.child:hover { /*background-color: #e8e8e8;*/} #jsMenuList.topLevel > li.changed > a { background-color: #ffd11f; color: #333; } #jsMenuList .menuImg { text-align: center; width: 20px; height: 20px; display: inline-block; vertical-align: bottom; margin-right: 7px; } #jsMenuList .menuImg img { max-height: 20px; width: auto; } #jsMenuList .menuImg .menuImgScale img { width: auto; max-height: 20px; } #jsMenuList .menuTxt { text-align: left; text-transform: none; word-wrap: break-word; padding: 0; position: relative; padding: 8px 0;} #jsMenuList .menuTxt i { line-height: 25px; /* Also look at #jsMenuList li .subMenuWrapper a */ font-size: 1.3em; } #jsMenuList .menuTxt a { padding-left: 10px; } #jsMenuList li .subMenuWrapper { display: none; border: 0; overflow: auto; box-shadow: none; width: 100%; background-color: #fff; z-index: 2; padding-left: 30px; } #jsMenuList li .subMenuWrapper a { color: #000; line-height: 25px; /* Also look at #jsMenuList .menuTxt i */ } #jsMenuList li .subMenuWrapper li { position: relative; } #jsMenuList li .subMenuWrapper li.changed { /*background-color: #f7f7f7;*/} #jsMenuList li .subMenuWrapper li.changed i { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #jsMenuList .subMenuWrapper .subMenuWrapper { background-color: #fff; } #jsMenuList .subMenuWrapper .subMenuWrapper li.child {} #jsMenuList .level-1 .menuTxt { font-size: 1em; font-weight: 600; } #jsMenuList .level-2 .menuTxt { font-weight: normal; text-transform: none; } /* Newsletter */ #ajaxNL { text-align: center; width: 100%; } #ajaxNL .newsletter-field { height: 40px; vertical-align: middle; padding: 5px; border: 0px; max-width: 300px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .nlText { text-align: center; } .nlText i { font-size: 2.5em; vertical-align: middle; margin-top: -4px; margin-right: 10px; } .nlText span { display: block; } .nlText img { vertical-align: middle; padding-right: 10px; } .nlText strong { padding-right: 15px; font-weight: 600; } /* Show/Hide in category view */ #categorySubCategories h2 { display: none; } .categoryDescription { overflow:hidden; position: relative; padding: 0px; } .fadeout { display: none; height: 4em; left: 0; position: absolute; bottom: 0px; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%,rgb(251, 251, 251) 100%);} /* cpToggle */ #cpToggle { visibility: hidden; text-align: center; z-index: 2; position: relative; margin-top: -20px; } #cpToggle button { margin-bottom: 13px; font-size: 1em; background-color: #1f98bb; color: #fff; padding: 7px 17px; border: 1px solid #1f98bb; border-radius: 40px; } #cpToggle button i { font-size: .8em; } #cpToggle button:hover, #cpToggle button:focus{ outline: 0 ; cursor: pointer; background-color: #1a8dae; } #cpToggle.active_button { margin-top: 0; } #cpToggle:hover button, #cpToggle:hover #cpToggle button:focus { outline: 0;} .collapsed { max-height:9000px; transition: all 300ms; -webkit-transition: all 300ms; } #pageIndex .collapsed { max-height:9000px; transition: all 300ms; -webkit-transition: all 300ms;} .expand, #pageIndex .expand { max-height: 9999px; transition: all 300ms; -webkit-transition: all 300ms; } /* Filter / Attributes */ #attributes .innerFill {} #attributes { position: relative; display: block; overflow: auto; } #attributes .col .filterSign {} .resetFilter { margin-left: 20px; display: inline; } #attributes h2.styled { font-size: 1em; background: none; color: #000; font-weight: 600; border-bottom: 1px solid #555555 !important; } #attributes label { font-weight: 600; font-size: .8em; } #resetFilter a { display: block; background-color: #ccc; text-align: center; height: 100%; padding: 10px 10px; margin-top: 19px; width: 65%; } #filterToggle { padding-bottom: 15px; padding-top: 5px; background-color: #f5f5f5; border-bottom: 1px solid #ccc; transition: all 300ms; -webkit-transition: all 300ms; } #filterToggle .ddlFilterSelect option:checked { background-color: #ffe2f7; } #btnToggleFilter { text-align: center; background-color: #1f98bb; color: #fff; padding: 7px 16px; border: 0; font-size: .75em; text-transform: uppercase; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer; } #btnToggleFilter:hover, #btnToggleFilter:focus { background-color: #1a8dae; } #btnToggleFilter .inText { vertical-align: middle; font-weight: 600; } #btnToggleFilter i { font-size: 1.7em; font-weight: 600; vertical-align: middle; } /* Model specific styling */ #modelChooser { background-color: rgba(255,255,255,.85); text-align: center; margin-top: -9px; overflow: hidden; transition:all 400ms ease; } #modelChooser .inner { padding: 40px 0 40px 0; position: relative; } #modelChooser.coll { max-height: 0; } #modelChooser.exp { max-height: 600px; } #modelChooser h1 { font-size: 1.75em; color: #f8602c; } #modelChooser .info-text { font-style: italic; } #modelChoserClose { background-color: #999; text-align: center; width: 22px; height: 22px; border-radius: 70px; color: #f7f7f7; cursor: pointer; border: 0; font-weight: 100; margin-left: 10px; font-size: .7em; position: absolute; top: 10px; right: 0px; } #modelChoserClose:hover, #modelChoserClose:focus { background-color: #333; color: #fff; outline: none; } /* Global */ #gModelContainer { font-size: 1.1em; } #gModelContainer { position: fixed; z-index: 99; width: 100%; top: 60px; background-color: #f7f7f7; box-shadow: -1px 2px 5px #666; border-top: 1px solid #fff; font-size: 1em;} #gModelContainer .gModelInner { padding: 3px; } #gModelContainer .gModelHead { text-transform: uppercase; position: relative; color: #777; } #gModelContainer .gModelName { color: #f8602c; font-weight: 600; text-transform: uppercase; vertical-align: middle; } #gModelContainer .gModelHead span { display: none; } #gBtnModelClear { background-color: #999; text-align: center; width: 22px; height: 22px; border-radius: 70px; color: #f7f7f7; cursor: pointer; border: 0; font-weight: 100; margin-left: 10px; font-size: .7em; } #gBtnModelClear:hover, #gBtnModelClear:focus { background-color: #333; color: #fff; outline: none; } #gBtnModelClearCat { background-color: #999; text-align: center; height: 22px; border-radius: 10px; color: #f7f7f7; cursor: pointer; border: 0; font-weight: 100; margin-left: 10px; font-size: .7em; padding: 0 10px; text-transform: uppercase; } #gBtnModelClearCat:hover, #gBtnModelClearCat:focus { background-color: #333; color: #fff; outline: none;} #gBtnChangeModel { background-color: #1f98bb; color: #fff; border-radius: 10px; padding: 5px 7px; font-size: .7em; display: inline; border: 0; margin-top: 0px; text-transform: uppercase; vertical-align: text-top; margin-left: 10px; cursor: pointer; } #gBtnChangeModel:hover, #gBtnChangeModel:focus { outline: none; background-color: #1a8dae; } /* Category */ .headerModel { text-align: center; color: #777; border-radius: 10px; padding: 5px 10px; margin: 0px auto; font-weight: 400; font-size: 1.2em; text-transform: uppercase; } #productPage .headerModel { text-align: center; padding-left: 0; font-size: 1.1em; } #categoryPage .modelName { padding-top: 20px; padding-bottom: 0px; display: block; } /* Guide page */ #guidePage h1, #guidePage h2, #guidePage h3 { text-transform: uppercase; margin-bottom: 7px; } #guidePage h1, #guidePage h2 { margin-top: 10px; } /*#guidePage .textContent img:first-child { display: none; }*/ #guidePage .textContent p:first-of-type img:first-child { display: none; } #guidePage .textContent li { display: list-item; position: relative; padding-left: 20px; padding: 2px 0 2px 20px; } #guidePage .textContent li:before { content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0px; top: 6px; height: inherit; color: #70c9d1; } #guidePage.guidePageStart section p img:first-child { float: left; padding: 10px; display: none; } #guidePage .guideProducts h2 { text-align: center; } #guidePage .guideProducts [class*='grid-'] { width: 50%;} /* Categories - big (image and text) */ /* .categories.big > ul { display:flex; flex-wrap:wrap; justify-content:left; } .categories.big > ul > li { vertical-align: top; display: inline-block; width: 50%; padding: 5px; background: transparent; } .categories.big > ul > li:hover .inner { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); outline: 1px solid #e6e6e6; } .categories.big ul li .inner { background-color: #fff; padding: 8px 12px; height:100%; outline: 1px solid #f3f3f3; } .categories.big ul li a { display: block; transition: all 400ms ease 0s; -webkit-transition: all 400ms ease 0s; text-transform: uppercase; } .categories.big ul li a:hover, .categories.big ul li a:focus { -webkit-animation: kiss-in 0.25s ease-out; -moz-animation: kiss-in 0.25s ease-out; animation: kiss-in 0.25s ease-out;} .categories.big ul li a:hover .catText, .categories.big ul li a:focus .catText { background-color: #f7f7f7; } .categories.big ul li a.active { background-color: #555555; color: #fff; } .categories.big .catImage { height: 130px; line-height: 130px; text-align: center; margin-bottom: 10px; } .categories.big .catImage img { max-height: 130px; line-height: 20px; } .categories.big .catText { display: block; text-align: center; padding: 4px 0; font-weight: 600; } .categories.big .subLinks ul { text-align: left; margin-top: 5px; border-top: 1px solid #efefef; padding-top: 7px; } .categories.big .subLinks ul li { display: block; position: relative; padding-left: 20px; border: 0; margin-bottom: 6px; } .categories.big .subLinks ul li a { display: block; padding: 2px 0; text-transform: none; } .categories.big .subLinks ul li a:hover, .categories.big .subLinks ul li a:focus { background-color: #f7f7f7; -webkit-animation: none; -moz-animation: none; animation: none; padding-left: 10px; } .categories.big .subLinks ul li a:after { font-family: FontAwesome; content: "\f054"; left: 6px; top: 6px; color: #e39614; position: absolute; font-size: .8em; } */ /* Categories - big (image and text) */ .categories.big > ul { display:flex; flex-wrap:wrap; } .categories.big > ul > li { vertical-align: top; display: inline-block; width: 50%; padding: 5px; background: transparent; } .categories.big > ul > li:hover .inner { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); outline: 1px solid #e6e6e6; } .categories.big ul li .inner { background-color: #fff; padding: 8px 12px; height:100%; outline: 1px solid #f3f3f3; } .categories.big ul li a { display: block; transition: all 400ms ease 0s; -webkit-transition: all 400ms ease 0s; text-transform: uppercase; } .categories.big ul li a:hover, .categories.big ul li a:focus { -webkit-animation: kiss-in 0.25s ease-out; -moz-animation: kiss-in 0.25s ease-out; animation: kiss-in 0.25s ease-out;} .categories.big ul li a:hover .catText, .categories.big ul li a:focus .catText { background-color: #f7f7f7; } .categories.big ul li a.active { background-color: #555555; color: #fff; } .categories.big .catImage { height: 130px; line-height: 130px; text-align: center; margin-bottom: 10px; } .categories.big .catImage img { max-height: 130px; line-height: 20px; } .categories.big .catText { display: block; text-align: center; padding: 4px 0; font-weight: 600; } .categories.big .subLinks ul { text-align: left; margin-top: 5px; border-top: 1px solid #efefef; padding-top: 7px; } .categories.big .subLinks ul li { display: block; position: relative; padding-left: 20px; border: 0; margin-bottom: 6px; } .categories.big .subLinks ul li a { display: block; padding: 2px 0; text-transform: none; } .categories.big .subLinks ul li a:hover, .categories.big .subLinks ul li a:focus { background-color: #f7f7f7; -webkit-animation: none; -moz-animation: none; animation: none; padding-left: 10px; } .categories.big .subLinks ul li a:after { font-family: FontAwesome; content: "\f054"; left: 6px; top: 6px; color: #e39614; position: absolute; font-size: .8em; } .categories.big .catCTA { text-align: center; background-color: #1fbb6c; color: #fff; padding: 6px; margin-top: 10px; } /* #productPage .headerModel:before { content: " "; background: url(../images/snowmobile-white.png) no-repeat; width: 30px; height: 30px; background-size: 70% 70%; background-position: 5px 4px; margin-right: 5px; vertical-align: middle; background-color: #f8602c; border-radius: 80px; float: left; margin-bottom: 20px;display: none;} */ #btnCatChangeModel { background-color: #1f98bb; color: #fff; border-radius: 10px; padding: 5px 7px; font-size: .6em; display: inline; border: 0; margin-top: 8px; text-transform: uppercase; cursor: pointer; } #btnCatChangeModel:hover, #btnCatChangeModel:focus { outline: none; background-color: #1a8dae; } .modelName { color: #f8602c; font-weight: 600; } .modelMore { display: block; font-size: .8em; text-transform: none; color: #1f98bb; padding-top: 5px; } .modelMore a { display: block; color: #1f98bb; } .modelMore a:hover, .modelMore a:focus { color: #1a8dae; outline: none; text-decoration: none; } #btnActivateModel { width: 100%; height: 100%; background-color: #f8602c; color: #fff; text-align: center; height: 100%; border: 0; height: 39px; text-transform: uppercase; font-size: 1.2em; cursor: pointer; line-height: 37px; border: 2px solid #e3511f; font-family: 'Roboto Condensed',Arial,Helvetica,sans-serif; position: relative; overflow: hidden;} /* #btnActivateModel:before { content: " "; background: url(../images/snowmobile-white.png) no-repeat; width: 30px; height: 30px; background-size: 70% 70%; background-position: 5px 4px; display: inline-block; margin-right: 5px; vertical-align: middle; background-color: transparent; margin-left: -7px; border-radius: 80px; } */ #btnActivateModel:hover { background-color: #e3511f;} #btnActivateModel:disabled, #btnActivateModel[disabled]{ border: 2px solid #bdbdbd;background-color: #cccccc; color: #666666; opacity: .6; } #btnActivateModel:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; background: #98320f; border-radius: 100%; opacity: .6; transform: scale(0); } @keyframes ripple { 0% { transform: scale(0); } 20% { transform: scale(1); } 100% { opacity: 0; transform: scale(1);} } #btnActivateModel:not(:active):after { animation: ripple .7s ease-out; } /* fixes initial animation run, without user input, on page load. */ #btnActivateModel:after { visibility: hidden; } #btnActivateModel:focus:after { visibility: visible; } #modelInputs { margin-top: 15px; } #modelInputs .select-wrapper select { text-transform: uppercase; padding-right: 50px; } .select-wrapper { background-color: #ffffff; margin-bottom: 10px; height: 50px; } .select-wrapper { width: 100%; height: 40px; overflow: hidden; background: url(../images/arrow-down-orange.png) no-repeat center right 5px #fff; border: 1px solid; border-color: #e6e6e6; } .select-wrapper select { font-size: 20px; height: 50px; } .select-wrapper select.disabled { background-color: #f7f7f7; color: #ccc; } .select-wrapper select { background: transparent none repeat scroll 0 0; border: medium none; float: left; font-size: 1.2em; height: 42px; line-height: 1; padding: 7px 15px 10px 5px; width: calc(100% + 40px); } .select-wrapper option { font-weight: normal; display: block; white-space: pre; min-height: 1.2em; padding: 0px 2px 1px; } /* VAT-area */ #vatContainer .vatInner { width: 150px; text-align: left; margin: 10px auto 0; } .vatInner .vatText { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: top; font-size: .9em; line-height: 30px; width: 55%; color: #333 !important; padding-left: 6px; position: relative; } .vatInner .vatSwitch { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: top; width: 40%; } /* On/off switch */ .onoffswitch { position: relative; width: 99%; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; margin-bottom: 5px; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after {display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: 400; box-sizing: border-box; } .onoffswitch-inner:before { content: "P\c5"; background-color: #1f98bb; border-radius: 5px; color: #fff; padding-left: 7px; } .onoffswitch-inner:after { content: "AV"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; } .onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 33px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } /* Styled radio button or checkbox */ /* input.styledChk { display:none; } input.styledChk + label { font-weight: normal; font-size: 1em; cursor: pointer; margin-right: 10px; } input.styledChk + label span { display:inline-block; width:19px; height:19px; margin:-1px -1px 0 0; vertical-align:middle; cursor:pointer; font-weight: normal; } input.styledChk + label span:after { content:"\f10c"; font-family: FontAwesome; color: #a3a3a3; } input.styledChk:checked + label span {} input.styledChk:checked + label span:after { font-family: FontAwesome; content:"\f00c"; color: green; } */ /* Wrapper */ #wrapper { font-size: 1em; background-image: url(../images/bg-test.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; overflow: auto; min-height: 40%; padding-top: 45px; padding-bottom: 15px; } #wrapper > .container { padding-top: 5px; } #wrapper.noModelChooser { padding-top: 0; } .fullWidth { margin-top: 5px; } /* Index page */ #indexOnSale .innerFill, /*#indexTopText .innerFill,*/ /*#indexBottomText .innerFill,*/ #indexTopSellers .innerFill, #indexLastCreated .innerFill, #indexTopSellersFromCategories .innerFill { /* override global innerFill */ background-color: rgba(255,255,255,.75); border: none; padding: 0; } #indexTopText .innerFill, #indexMiddleText .innerFill, #indexBottomText .innerFill { background: none; border: none; padding: 0; box-shadow: none; } #indexTopText {} #indexTopSellersFromCategories .catLink { font-size: .9em; margin-top: -6px; margin-bottom: 5px; } #indexTopSellersFromCategories .catLink a { background-color: #1f98bb; border-radius: 10px; padding: 2px 9px; color: #fff; } indexTopSellersFromCategories .catLink a:hover { background-color: #1a8dae; } #pageIndex {} #pageIndex .flex-control-nav { position: absolute; bottom: -2px; right: 9px; width: auto; } #pageIndex .flexslider { min-height: auto; margin-top: 5px; } #pageIndex .flexslider .slides img { width: auto; margin: 0px auto; } #pageIndex .box1 { width: 100%; background-color: #e8e8e8; } #pageIndex .box2 { padding: 10px; outline: 1px solid #e8e8e8; width: 100%; text-align: center; } #pageIndex .box2 p { line-height: 0; } #uspIndex {} #uspIndex [class*='grid-'] { margin-bottom: 5px;} #uspIndex [class*='grid-']:first-child, #uspIndex [class*='grid-']:nth-child(2) { /*border-bottom: 1px solid #eaeaea;*/ /*padding-bottom: 14px;*/ } #uspIndex [class*='grid-']:nth-child(2){ border-right: 0px; } #uspIndex [class*='grid-']:last-of-type { border-right: 0; } #uspIndex .uspPlate { text-align: center; min-height: auto; } #uspIndex .uspPlate i { font-size: 4em; } #uspIndex .uspPlate p { margin: 0; padding: 0; line-height: 0; } #uspIndex .uspPlate img { width: 100%; height: auto; } #indexImagesFromCategories .catItem:hover .innerFill { outline: 1px solid gray; } #indexImagesFromCategories a { display: block; height: 100%; } #indexImagesFromCategories a:focus h2 { color: #1f98bb; outline: thin dotted; } #indexImagesFromCategories .image { height: 125px; margin-bottom: 10px; } #indexImagesFromCategories h2 { border: medium none; font-size: 1.1em; font-weight: 500; height: 60px; overflow: hidden; text-align: center; } .indexImage img { height: auto; vertical-align: bottom; } .toptext, .bottomtext { text-align: center; word-break: break-word; } .toptext p:not(:first-child), .bottomtext p:not(:first-child) { margin-top: 10px; } .toptext h1, .bottomtext h1 { text-transform: uppercase; } .toptext h1 { text-align: center; } /* Header */ #header { position: relative; margin: 0px auto 0; color: #333; } /* Top area (fixed bar wit cart, login etc.) */ #topArea { display: none; } /* Top bar,
(logo, search, usp ...) */ #topBar { height: 0; display: none; } #topBar, #topBar.fixed { width: 100%; z-index:99999; color: #000; background-color: rgb(40,40,40); background-color: rgba(40,40,40,1); } /* Menu button */ #buttonMenu { position: relative; font-size: 1.7em; cursor: pointer; color: #fff; display: table-cell; z-index: 5; vertical-align: middle; min-width: 70px; text-align: center; width: 15%; background-color: transparent; border: 0; padding-top: 11px; padding-bottom: 8px;} #buttonMenu:focus { color: #fff; outline: thin dotted; outline-offset:-2px; } #buttonMenu.active { background-color: #000; color: #fff; } #buttonMenu i { padding: 0 15px; position: relative; padding-bottom: 4px; } #buttonMenu .menuText { font-size: .4em; font-weight: 700; margin-top: -4px; text-transform: uppercase; display: block; } #buttonMenu:after { content: "\f002"; font-family: FontAwesome; padding-right: 5px; position: absolute; right: 12px; bottom: 17px; background-color: #282828; border-radius: 100%; padding: 4px; font-size: .5em; } /* Logo */ #topLogo { } #topLogo .innerLogo a {} #topLogo img { height: auto; max-height: 65px; vertical-align: bottom; margin-top: 18px; } #topLogoFixed { display: table-cell; position: relative; vertical-align: middle; text-align: center; width: 70%; } #topLogoFixed img { height: auto; max-height: 50px;vertical-align: middle; } /* Search */ #topSearch { color: #fff; cursor: pointer; display: table-cell; font-size: 1.4em; text-align: center; vertical-align: middle; } #topSearch i { padding: 0 .9em; } /* Cart */ #topCartFiller { display: table-cell; width: 15%; vertical-align: top; text-align: center; position: relative; } #topCartFiller a { color: #fff; display: block; height: 100%; } #topCartFiller .icon { font-size: 1.7em; margin-top: -4px;} #topCartFiller .qty { background-color: #1fbb6c; border-radius: 40px; color: #fff; font-size: 0.8em; font-weight: 600; height: 20px; right: 8px; line-height: 20px; padding-right: 1px; position: absolute; top: 8px; min-width: 20px; text-shadow: 2px 0px 3px rgba(0,0,0,.25);} #topCartFiller a:focus i { color: #1fbb6c; outline: thin dotted; } /* Sitemap */ .sitemapLine { background:url(../images/line.gif); background-repeat:repeat-y; } .sitemapHline { background:url(../images/hline.gif); background-repeat:repeat-x; } /* Top cart */ #topLogin { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; border-left: 1px solid #676767; padding-left: 16px; } #topCartContent { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: middle; height: 40px; line-height: 40px; margin-top: 29px; } #topCartContent div { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: top; } /* Basket items */ #basketItems { cursor: pointer; padding: 0 15px; vertical-align: top; margin-right: -4px; } #basketItems i { font-size: 1.3em; padding-right: 7px; } /* Button to cashier */ #btnToCashier { margin-right: -4px; } #btnToCashier a { color: #fff; font-weight: 600; text-transform: uppercase; background-color: #1fbb6c; height: 35px; line-height: 35px; padding: 0 15px; display: block; position: relative; margin-top: 3px;} #btnToCashier a:after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(130, 180, 64, 0); border-right-color: #1fbb6c; border-width: 4px; margin-top: -4px; } #btnToCashier a:hover { background-color: #13a95d; text-decoration: none; } #btnToCashier a:focus { background-color: #13a95d; outline: thin dotted; } #btnToCashier a:focus:after { border-right-color: #13a95d; } /* Mini cart */ #miniCart { position: absolute; top: 101%; right: -4px; width: 450px; padding: 5px; background-color: #fff; box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.3); display: none; max-height: 547px; overflow-y: auto; color: #000; } #miniCart a { color: #000; } #miniCart .cashier-form { padding-bottom: 0;} #miniCart .cashier-form .cartPlus a, #miniCart .cashier-form .cartMinus a { height: 17px; line-height: 17px; width: 17px; border-radius: 30px; font-size: 9px; color: #fff; font-weight: normal; } #miniCart .cashier-form .cartPlus a:focus, #miniCart .cashier-form .cartMinus a:focus { background-color: green !important; outline: thin dotted !important; } #miniCart .cashier-form .cartMinus a { margin-right: 15px; } #miniCart .cashier-form .cartQty { margin: 0 3px; text-align: center; display: block; width: 30px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #miniCart .cashier-form .name { line-height: 16px; } #miniCart .cashier-form .cartQtyWrapper { margin-top: 0; } #miniCart .cashierProducts .vat { font-size: .9em; padding: 3px 0; } #miniCart .cashierProducts .total { font-size: .9em; font-weight: 400; padding: 3px 0; } #miniCart .cashierProducts .vat td { padding: 0;} #miniCart .button-confirm { margin: 10px 0 5px 0; } .jsShakeArea { height: 15px; } /* Footer */ #footerNewsletter { background-color: #404040; } #footerToTop { font-size: 1.2em; text-align: center; text-transform: uppercase; background-color: #565656; } #footerToTop a { cursor: pointer; display: block; margin-bottom: 15px; margin-top: 10px; color: #fff; } #footerToTop a:hover { color: #1f98bb; } .footerSocial { margin: 10px 0; } #footerLogos { background-color: #434343; } #footerLogos [class*='grid-'] { text-align: center; } #footer { background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.8); color: #fff; width: 100%; font-size: .9em; } #footer a { color: #ccc; padding: 5px 0; margin: 5px 0; } #footer a:hover { text-decoration: underline; color: #1f98bb;} #footer a:focus { outline-offset:2px; text-decoration:none; outline: thin dotted; color: #1f98bb; text-decoration: underline; } #footer h4 { color: #fff; font-size: 1.1em; font-weight: 600; margin-bottom: 10px; margin-top: 5px; padding: 0; } #footer ul { line-height: 1.4em;} #footer li { display: block; margin: 10px 0; } #footer .footerText { padding: 20px 15px 20px 15px; text-align: center; } #footerTop { background-color: #393939; color: #fff; padding: 10px 0; } #footerTop .col1, #footerTop .col2 { text-align: center; } /* My-page */ .wishlist ul { margin:0px; padding:0px; list-style:none; } .wishlist li { margin-right:20px; float:left; } .wishContainer { width: 450px; float: left; border: 1px dashed #ccc; min-height: 180px; position: relative; } .wishContainer .inner { margin: 10px; } .wishContainer .image { float: left; width: 100px;} .wishContainer .infobox { float: left; padding-left: 15px; width: 250px; } .wishContainer .infobox h3 { min-height: 40px; } .wishContainer .infobox .observe { margin-bottom: 10px; padding: 5px; } .wishContainer .infobox .price { padding-left: 0; font-weight: 600; } .wishContainer .infobox .actions { position: absolute; bottom: 10px; margin-right: 15px; } .wishContainer .infobox .actions input { margin-right: 20px; } /* Breadcrumbs */ #mBreadcrumb { font-size: .8em; background-color: #f7f7f7; } #mBreadcrumb h2 { font-size: 1.25em; font-weight: 400; margin-bottom: 0; padding: 10px 0; text-align: center; background-color: transparent; border-bottom: 1px solid #e3e3e3; } #breadcrumbs{ overflow: auto; position: relative; font-size: .9em; display: none; } #breadcrumbs .innerFill { background-color: transparent; padding: 2px 4px; text-transform: uppercase; font-size: .9em; } #jsBreadcrumb li, #mBreadcrumb li { display: inline; padding: 5px 0; } #jsBreadcrumb li.arrow, #mBreadcrumb li.arrow { padding:0px 0px 0px 5px; color: #666; } #jsBreadcrumb li.arrow:before, #mBreadcrumb li.arrow:before { content:"\f105"; font-family: FontAwesome; padding-right:5px; } #jsBreadcrumb li.arrow a:first-letter, #mBreadcrumb li.arrow a:first-letter { color: red; text-transform: uppercase; } /* StandardPageContainer */ .standardPageContainer { display: block; padding-left: 0px; margin-bottom: 0px; } .standardPageContainer ul { list-style-type: disc; margin-left: 20px; } .standardPageContainer li { display: list-item; position: relative; padding: 8px 0 2px 0px; } /* Spot sale */ .spotSale:before { background-color: transparent !important; color: #fff; font-size: 1.3em; font-weight: 600; padding-top: 0; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .spotSale { background-color: rgb(204, 51, 51); background-color: rgba(204, 51, 51, 1); color: #fff; font-weight: 600; left: 5px; height: 50px; line-height: 60px; /* width: 60px; */ padding: 0 12px; position: absolute; text-align: center; top: 5px; z-index: 1; width: 60px; height: 60px; border-radius: 140px; font-size: .9em; } .spotPopular { color: #333; font-size: 0.9em; text-transform: uppercase; font-weight: 600; right: 12px; line-height: 38px; position: absolute; text-align: center; top: 0px; z-index: 1; display: none;} .spotPopular i { font-size: 1.6em; padding-right: 6px; vertical-align: middle; margin-top: -5px; } /*.spotUniversal { background-color: rgb(248,96,44); background-color: rgba(248,96,44,.8); color: #fff; font-size: 0.8em; text-transform: uppercase; font-weight: 100; right: 0; line-height: 38px; position: absolute; text-align: center; top: 0px; z-index: 1; padding: 0 8px; }*/ .spotUniversal { color: #000; font-size: 0.7em; text-transform: uppercase; font-weight: 600; left: 0; line-height: 38px; position: absolute; text-align: center; top: 0px; z-index: 1; padding: 0 8px; } /* Product list container (category-view) */ .productListContainer [class*='grid-'] { position: relative; } .productListContainer li { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .productListContainer li:hover { /* -webkit-transform: translateY(-1px); transform: translateY(-1px); */ } .productListContainer li heading { padding: 0 5px 10px; } .productListContainer li:hover a { /*color: #4faab2;*/ } .productListContainer li .innerContainer { background-color: #f5f5f5; border: 1px solid #efefef; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .productListContainer li:hover .innerContainer { box-shadow: 0px 0px 50px rgba(55, 55, 55, 0.1); } .productListContainer li .catProdInner { padding: 5px; } .productListContainer li.bigProduct { float: left; } .productListContainer li.bigProduct .innerContainer { height: 340px; } .productListContainer li.bigProduct .catProdImage { height: 200px; } .productListContainer li.bigProduct .catProdImage img { max-height: 190px; } .productListContainer li.bigProduct .catProdInner h3 a { padding-top: 211px; } .productListContainer li.bigProduct .catProdInner h3 a span { height: 60px; line-height: 27px; } .productListContainer li.bigProduct .catProdInner .rating { bottom: 35%; } .productListContainer ul [class~='bigProduct']:nth-child(even) { float: right; } .productListContainer li:hover .innerContainer { border-color: #ccc; } .productListContainer li .subscriptionSpot { background-color: #333; bottom: 10px; color: #fff; font-size: 0.8em; left: 50%; margin-left: -47px; padding: 4px 10px; position: absolute; line-height: 13px;} .productListContainer li .catProdImage { height: 215px; max-width: 100%; position: relative; background-color: #fff; } .productListContainer li .catProdImage img{ max-height: 214px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .productListContainer li:hover img{ -webkit-transform: scale3d(.97, .97, 1); transform: scale3d(.97, .97, 1); } .productListContainer li .button-confirm { padding: 3px 20px !important; width: 99%; } .productListContainer li .button-confirm-black { padding: 3px 20px !important; width: 99%; font-weight: 600; } .productListContainer li .catProdInner .jsChangeAssoc { position: relative; z-index: 1; } .productListContainer li .catProdInner h3 { font-size: .95em; font-weight: 300; height: 100%; padding: 0; position: absolute; text-align: left; top: 0; left: 0; width: 100%; z-index: 1; } .productListContainer li .catProdInner h3 a { display: block; height: 86%; padding-top: 242px; } .productListContainer li .catProdInner h3 a:focus { outline: 1px solid gray; height: 100%; } .productListContainer li .catProdInner h3 a:focus span { outline: thin dotted; } .productListContainer li .catProdInner h3 a:active span { outline: none; } .productListContainer li .catProdInner h3 a span { display: block; height: 35px; overflow: hidden; font-weight: 500; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .productListContainer li .catProdInner .h3spacer { height: 45px; } .productListContainer li .catProdInner .rating { bottom: 33.5%; font-size: 0.8em; height: 20px; left: 50%; margin-left: -32px; position: absolute; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .productListContainer li .catProdInner .rating li:hover { transform: none; } .productListContainer li .catProdInner .rating li { font-size: 1.3em; } .productListContainer li .catProdInner .productPrice { height: 1.7em; font-weight: 500; font-size: 1.3em; text-align: center; } .productListContainer li .catProdInner .priceNew, .productListContainer li .catProdInner .priceOld { display: inline-block; } .productListContainer li .catProdInner .priceOld { margin-right: 10px; text-decoration: line-through; } .productListContainer li .catProdInner .productPrice .installmentCost { font-size: .6em; height: 15px; font-weight: normal; padding-top: 3px; color: #666; display: none; } .productListContainer li .catProdInner .shortText { text-align: center; } .productListContainer li .catProdInner .productBuy { text-align: center; margin-top: 0px; } .productListContainer .productListContainer li .spot { color: #fff; font-size: 16px; font-weight: 600; height: 25px; left: 4px; line-height: 25px; position: absolute; text-align: center; top: 4px; width: 30px; z-index: 1; } /* Flexslider with category products */ .productListContainer .flexslider { margin: 0; border: 1px; overflow: hidden; } .productListContainer .flexslider .slides img { width: auto; } .productListContainer .flexslider .flex-control-nav { display: none; } .productListContainer .flexslider li .innerContainer { position: relative; background-color: #fff; border: 1px dashed #e4e4e4; height: 378px; } .productListContainer .flexslider .slides > li { height: 360px; } .productListContainer .flexslider li .catProdInner .rating { bottom: 70%; left: 57%; } .productListContainer .flexslider .catProdImage { float: left; width: 50%; height: 372px; background-color: #fff; } .productListContainer .flexslider .catProdInner { float: left; width: 49%; padding-left: 12px; } .productListContainer .flexslider .catProdInner h3 { position: relative; } .productListContainer .flexslider .catProdInner h3 a { padding-top: 10px; font-size: 1.4em; } .productListContainer .flexslider .catProdInner h3 a span { line-height: 1.2em; height: auto; text-align: left; height: 65px; } .productListContainer .flexslider .catProdInner .productPrice { font-size: 1.8em; margin-bottom: 60px; } .productListContainer .flexslider .catProdInner .button-confirm-black { background-color: #dcdcdc;} /* Product page */ #prodLatestReviews .productReview { border-bottom: 1px dotted #cccccc; padding: 4px 0; margin-bottom: 10px; } #prodLatestReviews .productReview .revDate { color: #484848; font-size: 0.8em; } #prodLatestReviews .productReview .revAuthor { font-size: 0.8em; } #prodLatestReviews .productReview .revText { padding: 3px 0; } #productPageUpper {} #productPageUpper .colImage, #productPageUpper .colInfo { padding: 0; } #productPageUpper .colImage .innerFill {} #productPageUpper .colInfo .innerFill {} #productPageUpper .container { background-color: #fff;} #breadcrumbs { margin-bottom: -6px; } #breadcrumbs > .container {} #prodDesc {} #prodDesc > .container { background-color: rgb(255,255,255); background-color: rgba(255,255,255,.75);} #prodDesc .colDesc .innerFill {} #prodDesc .colMisc .innerFill {} #moreModels h4 { margin: 10px 0 0 0; font-weight: 500; text-transform: uppercase; } #moreModels ul { margin-top: 3px; font-size: .9em; } #prodSpec { padding-top: 10px; } #productPageUpper h2 { background-color: transparent; border-bottom: 1px solid #e3e3e3; font-size: 1.2em; } #productPageUpper .colInfo { margin-top: -12px; } #prodDesc .colDesc, #prodDesc .colMisc, #prodLatestReviews, #prodAssoc, #prodSimilars, #prodOthers { /*overflow: auto;*/ } #prodLatestReviews > .container, #prodAssoc header:first-of-type, #prodSimilars header:first-of-type, #prodOthers header:first-of-type, #prodAssoc header:first-of-type { background-color: #fff; background: #fafafa; } .productImageContainer { text-align: center; position: relative; overflow: hidden; } .productImageContainer .next, .productImageContainer .prev { cursor: pointer; font-size: 50px; font-weight: 600;position: absolute; color: gray; top: 35%; background-color: rgba(255,255,255,.8); padding: 0 5px; } .productImageContainer .next { right: 0px; } .productImageContainer .prev { left: 0px; } .productImageContainer .next:hover, .productImageContainer .prev:hover { color: #787878;} #slider { visibility: hidden; overflow: hidden; } .productImage { background-color: #fff; display: block; position: relative; width: 100%; overflow: hidden; max-width: 700px; margin: 0px auto 0; height: 230px; line-height: 230px; } .productImage img { vertical-align: middle; height: auto; max-height: 230px; } .productImage span { width: 59px; height: 33px; display: block; position: absolute; top: 0px; left: 0px; background: url(../images/bg-spot-rea.png) no-repeat; z-index: 100; } .productSpecification {} .productThumbs { margin-bottom: 10px; margin-top: 7px; width: 100%; } .productThumbs ul { list-style:none; margin:0; padding: 0; } .productThumbs li { float: left; line-height: 65px; width: 20%; } .productThumbs li a { display: block; } .productThumbs li img { margin: 0 auto; vertical-align: middle; } .productThumbs li .innerContainer { background-color: #fff; border: 1px solid #dfdfdf; margin-right: 5px; margin-top: 5px; padding: 5px; } .productInfo { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0px;} .productInfo .rating { cursor: pointer; } .productInfo p { padding: 8px 0; } .productInfo .selProdAssoc { width: 100%; } .productInfo h1 { padding-top: 0; text-align: center; padding-bottom: 0; font-size: 1.3em; padding-left: 0; } .productInfo .subscriptSpot { margin-top: 10px; font-size: .8em; text-align: center; } .productInfo .subscriptSpot span { background-color: #333; padding: 4px 10px; color: #fff; } #productManufacturer { color: #b4b4b4; text-align: center; padding: 5px 0; font-size: .9em; display: flex; align-items: center; justify-content: space-between; } #mimagecont, .pprodno{ float: left; display: flex; } #mimagecont img { max-width: 150px;} .specialSmall { position: relative; } .specialSmall:hover .liNumber { background: #f8602c; } /*.liNumber { height: 110px; line-height: 110px; position: absolute; top: 6px; width: 35px; z-index: 2; left: -35px; background: #505050; color: #fff; text-align: center; font-size: .9em;}*/ .liNumber { height: 72px; line-height: 72px; position: absolute; top: 6px; width: 40px; z-index: 2; left: -35px; background: #505050; color: #fff; text-align: center; font-size: .9em;} .productListContainerSmall li.dummyProduct .innerContainer { background-color: #e6e6e6;} .productListContainerSmall li.dummyProduct .catProdInner { float: left; /*height: 100px;*/ height: 62px; } .productListContainerSmall li.dummyProduct .catProdInner h3 span { font-weight: 200; line-height: 65px; font-size: .9em; } /* Product list container SMALL item */ #cashierProducts { display: none;} #cashierProducts .productListContainerSmall .listProduct { width: 100%; display: block; } #cashierProducts .productListContainerSmall .priceOld { display: none; } .productListContainerSmall [class*='grid-'] { position: relative; } .productListContainerSmall .listProduct { width: 100%; display: block; } .productListContainerSmall li .innerContainer { position: relative; border: 1px solid #f5f5f5; padding: 5px; background-color: #fff; } .productListContainerSmall li .innerContainer:after { content: ""; display: table; clear: both; } .productListContainerSmall li:hover .innerContainer { border: 1px solid #e9e9e9; } .productListContainerSmall .ribbon-wrap { display: none; } .productListContainerSmall li .catProdImage { height: 100px; width: 19%; position: relative; float: left; } .productListContainerSmall li .catProdImage img { max-height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .productListContainerSmall li .catProdImage .spotSale { font-size: 0.7em; height: 52px; line-height: 52px; width: 52px; } .productListContainerSmall li .button-confirm { padding: 8px 5px !important; width: 85%; } .productListContainerSmall li .button-confirm-black { padding: 8px 5px !important; width: 85%; font-weight: 500; } .productListContainerSmall li .catProdInner { float: right; width: 80%; padding-left: 15px; } .productListContainerSmall li .cpCatProductRowL { display: none; } .productListContainerSmall li .catProdInner h3 { font-weight: 300; height: 60px; padding: 0; padding-right: 10px; font-weight: 600; } .productListContainerSmall li .catProdInner h3 a { display: block; height: 100%; padding-top: 5px; } .productListContainerSmall li .catProdInner h3 a span { display: block; font-weight: 500; font-size: 0.9em; height: 102px; left: 0; overflow: hidden; padding-left: 22%;position: absolute; top: 5px; text-transform: uppercase; } .productListContainerSmall li .catProdInner .h3spacer { display: none; } .productListContainerSmall li .catProdInner .rating { display: none; } .productListContainerSmall li .catProdInner .rating li { font-size: 1.3em; } .productListContainerSmall li .catProdInner .productPrice { float: left; font-size: 1.3em; font-weight: 400; height: 40px; min-height: 40px; text-align: left; width: 50%; } .productListContainerSmall li .catProdInner .priceNew, .productListContainerSmall li .catProdInner .priceOld { display: inline-block; } .productListContainerSmall li .catProdInner .priceOld { margin-right: 10px; text-decoration: line-through; } .productListContainerSmall li .catProdInner .productPrice .installmentCost { font-family: 'Roboto', sans-serif; font-size: .6em; height: 15px; font-weight: normal; padding-top: 3px; color: #666; } .productListContainerSmall li .catProdInner .productBuy { float: right; margin-top: -5px; min-height: 40px; text-align: right; width: 50%; } /* Normal product */ .productInfo .shortDesc { text-align: center; display: none; } .productInfo .innerBox { position: relative; } .productInfo .innerBox ul { line-height: 1.4em; } .productInfo .innerBox:after { clear:both; content:""; display:block; } .productInfo .assoc {} .productInfo select { /*background: transparent;*/} .productInfo .prices { font-weight:600; font-size: 1.7em; position: relative; text-align: center; } .productInfo .priceOld { font-size: .5em; } .productInfo .stockStatus { font-size: .9em; margin-top: -12px; text-align: center; } .productInfo .stockStatus .delDays { } .productInfo .bracketPrices { background-color: #efefef; clear: both; padding: 7px; position: relative; margin-bottom: 10px; } .productInfo .bracketPrices .col1 { width: 25%; text-transform: uppercase;} .productInfo .bracketPrices .col2 { text-transform: uppercase; } .productInfo .bracketPrices:after { top: 100%; left: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 247, 247, 0); border-top-color: #efefef; border-width: 10px; margin-left: -10px; } .productInfo .innerBox .installment { margin-top: 8px; font-size: 13px; font-weight: normal; } .productInfo .innerBox .productOptions { margin-top: 20px; padding-top: 4px; border-top: 1px dashed #ccc; } .productInfo .innerBox .productBuy { } .productInfo .innerBox .notifyme { padding-top: 11px !important; } .productInfo .innerBox .productBuy input { border: 1px solid #ccc; line-height: 45px; height: 46px; text-align: center; font-weight: 600; } #jsRatingsBtn { text-align: center; margin-top: -10px;} #jsRatingsBtn ul { display: inline;} #jsRatingsBtn span { font-size: .8em; color: #7f7f7f; display: none; } #prodSimilarsSmall {} #prodExtra { margin-top: 10px; margin-bottom: 3px;} #productInfoConditions { color: #333; margin-bottom: 0; text-transform: uppercase; font-weight: 400; font-size: .9em; } #productInfoConditions i { color: #1fbb6c; font-weight: 300; font-size: 1.3em; margin-right: 5px; } #productInfoConditions div { display: block; padding: 3px 0; margin-right: 5px; } .productInfoDescription { background-color: transparent; } .productInfoDescription ul { list-style-type: disc; margin: 10px 0 0 15px;} .productInfoDescription li { padding: 5px 0; } /* Product description area */ #prodDesc { margin-top: 0px; } #prodDesc .colDesc h2, #prodDesc .colDesc h3 { border: none; background-color: transparent; } #prodDesc h3 { font-weight: 400; border-bottom: 1px solid #d6d6d6 !important; text-transform: uppercase; font-size: 1.1em; text-align: center; padding: 4px 0; margin-bottom: 7px; } #tellAFriend { margin-top: 10px; } /* Productpage: Reviews */ .productReviewWrite { background-color: #f7f7f7; margin-top: 5px !important; } #divAllReviews {} #prodLatestReviews .innerFill{ background-color: transparent; border: none; padding: 0; } #footerReviews { background-color: transparent;} #prodLatestReviews .lRev, #footerReviews .lRev { text-align: center; } #prodLatestReviews .lRevName, #footerReviews .lRevName { font-weight: 600; height: 20px; overflow: hidden; margin-top: 10px; } #prodLatestReviews .lRevGrade, #footerReviews .lRevGrade { font-size: .8em; } #prodLatestReviews .lRevText, #footerReviews .lRevText { font-size: 0.9em; line-height: 1.3em; position: relative; padding: 2px 20px; } #prodLatestReviews .lRevText:before, #footerReviews .lRevText:before { font-family: FontAwesome; content: "\f10d"; left: 4px; top: -38px; color: rgba(0, 0, 0, 0.1); position: absolute; font-size: 2em; } /* #prodLatestReviews .lRevText:after { font-family: FontAwesome; content: "\f10e"; right: 6px; bottom: -22px; color: #ededed; position: absolute; font-size: 1.3em; } */ #prodLatestReviews .lRevDate, #footerReviews .lRevDate { display: none; font-size: .7em; color: #666;} #footerReviews .lRevDate { display: block; } /* Productpage: Attributes */ #prodAttributes .col1 { font-weight: 600; } #prodAttributes .col1, #prodAttributes .col2 { font-size: .9em; } /* Productpage: Related categories */ #prodRelCat li { margin: 3px 0px 3px 5px; padding: 2px; } #prodRelCat li a { display: block; } #prodRelCat li a:hover, #prodRelCat li a:focus { color: #1f98bb; } /* Productpage: "Misc" */ .colMisc h2 { font-size: 1.25em; font-weight: 400; margin-top: 10px; } .colMisc h2:first-of-type { margin-top: 0; } .innerFill header h2 { border-bottom: 1px solid #d6d6d6; } #prodAssoc .innerFill, #prodOthers .innerFill, #prodSimilars .innerFill{ background-color: rgba(255,255,255,.75); border: none; padding: 0; } #prodAssoc h2, #prodOthers h2, #prodSimilars h2 { border: none; } #prodFunctions { bottom: 14px; position: absolute; right: 7px; text-align: right; } #divTellAFriend { background-color: #f7f7f7;} #subscriptionText {} #productEmail {} #wishList {} /* Show more reviews */ #jsShowMoreCat {} #jsShowMoreCat:hover {} /* Reviews */ .reviewGroup { /* remove inline-block whitespace */ font-size: 0; /* flip the order so we can use the + and ~ combinators */ unicode-bidi: bidi-override; direction: rtl;/* the hidden clearer */} .reviewGroup * { font-size: 1.7rem;} .reviewGroup > input { display: none;} .reviewGroup > input + label { /* only enough room for the star */ display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; overflow: hidden; text-indent: 9999px;width: .9em; white-space: nowrap; cursor: pointer; } .reviewGroup > input + label:before { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-indent: -9999px; content: "\2606"; color: #888;} .reviewGroup > input:checked ~ label:before, .reviewGroup > input + label:hover ~ label:before, .reviewGroup > input + label:hover:before { content: "\2605"; color: #f9d100; } .reviewGroup > .star-cb-clear + label { text-indent: -9999px; width: .5em; margin-left: -.5em; } .reviewGroup > .star-cb-clear + label:before { width: .5em; } .reviewGroup:hover > input + label:before { content: "\2606"; color: #888; text-shadow: none; } .reviewGroup:hover > input + label:hover ~ label:before, .reviewGroup:hover > input + label:hover:before { content: "\2605"; color: #f9d100; } /* Rating */ .rating li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; position: relative; width: .9em; color: #ccc; font-size: 1.6em; line-height: .9em; vertical-align: bottom; } .rating.grade-1 li:nth-child(-n+1){ color: #f9d100; text-shadow: 1px 0px goldenrod, 2px 1px #B57340, ..9em ..9em .2em rgba(0,0,0,.5);} .rating.grade-2 li:nth-child(-n+2){ color: #f9d100; text-shadow: 1px 0px goldenrod, 2px 1px #B57340, ..9em ..9em .2em rgba(0,0,0,.5);} .rating.grade-3 li:nth-child(-n+3){ color: #f9d100; text-shadow: 1px 0px goldenrod, 2px 1px #B57340, ..9em ..9em .2em rgba(0,0,0,.5);} .rating.grade-4 li:nth-child(-n+4){ color: #f9d100; text-shadow: 1px 0px goldenrod, 2px 1px #B57340, ..9em ..9em .2em rgba(0,0,0,.5);} .rating.grade-5 li:nth-child(-n+5){ color: #f9d100; text-shadow: 1px 0px goldenrod, 2px 1px #B57340, ..9em ..9em .2em rgba(0,0,0,.5);} /* Swipe/Slider */ .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float: left; width: 100%; position: relative; overflow: hidden; } .swipe .nav { position: absolute; width: 80px; height: 38px; z-index: 10; text-align: center; line-height: 40px; color: #fff; top: 45%; cursor: pointer; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8); display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;} .swipe .nav.next { right: 0; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .swipe .nav.prev { -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } #sliderPosNav ul { list-style:none; margin:0; padding: 0; } #sliderPosNav li { padding-left: 0 !important; } #sliderPosNav li.active {} #sliderPosNav.thumbs li a:hover { border-color: #dddddd; } #sliderPosNav.thumbs li { text-align: center; height: 47px; margin-bottom: 3px; } #sliderPosNav.thumbs li a { display: table; width: 100%; height: 100%; border: 1px solid #f5f5f5; background-color: #fff; } #sliderPosNav.thumbs li img { max-height: 40px; width: auto; vertical-align: middle; } #sliderPosNav.thumbs li a div { display: table-cell; vertical-align: middle; } .instock i{ color: #1fbb6c; line-height: 19px; } .orderitem i{ color:#ff9900; line-height: 19px; } .unavailable i { color:#ff0000; line-height: 19px; } .priceRegular { color: #f8602c; } .priceNew { color: rgb(204, 51, 51); color: rgba(204, 51, 51, 1); display: block; } .priceOld { color: #666; display: block; font-weight:normal; font-size: 0.7em; margin-top: 5px; } .pricePercentage { background-color: #c10000; color: #fff; display: inline; font-size: 14px; padding: 6px; font-weight: normal; position: relative; } .pricePercentage:after { bottom: 99%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(193, 0, 0, 0); border-bottom-color: #c10000; border-width: 10px; margin-left: -10px; } /* Category page */ #categoryHeader .innerFill {} #categorySlider .innerFill {} #categoryDescription .innerFill {} #categoryTopSellers .innerFill {} #categoryModelArea .innerFill { background-color: rgba(255,255,255,.8); border-top: 2px solid #f8602c; border-bottom: 2px solid #f8602c; padding: 10px 0; } #categoryModelArea .innerFill:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #f8602c; border-width: 10px; margin-left: -10px; } #categoryModelArea .smallInfo { text-align: center; padding: 10px; } #categoryModelArea .smallInfo span { font-weight: 600; } #categoryPage .flexslider { min-height: auto; } #categorySubCategories { margin-top: -10px; } /* categories */ .categories {} /* Categories - slim (text) */ .categories.slim li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .categories.slim li a { background-color: #555555; color: #fff; display: block; font-weight: 500; height: 100%; padding: 7px; text-transform: uppercase; } .categories.slim li a:hover, .categories.slim li a:focus { background-color: #ec774f; color: #fff; } .categories.slim li a.active { background-color: #f8602c; color: #fff; } .categories.slim li .count { background-color: #e3e3e3; border-radius: 10px; color: #818181; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin-bottom: 7px; margin-top: 8px; padding: 4px 8px; vertical-align: top; font-size: 0.7em; text-align: center; } .categories.slim li .catProdImage { height: 65px; } /* Mobile navigation in category */ #mobilecatselect select { width: 100%; height: 45px; padding: 10px; border-radius: 5px; font-size: 1.2em; } /* Paging */ .paging-sort { padding: 4px !important; margin-left: -5px; } .paging-sort .onlyBig { padding-top: 6px; } .paging-sort label { margin-right: 10px; } .paging-sort input[type="radio"] { margin-top: -1px; vertical-align: middle; } .pagination { text-align: center; padding: 5px 0; } #paging-count { font-size: .8em; text-align: center; color:#777; line-height: normal; } #paging-count .innerFill{} #paging {} #paging .innerFill {} #paging select { height: 40px; padding: 0 10px; width: 100%; } #paging:after { content:''; display:block; clear: both; } #paging .paging-list { text-align: center; padding-right: 0; justify-content: center; line-height: 300%; } #paging .paging-list li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin-left: .7em; } #paging .paging-list li:first-child { margin-left: 0; } #paging .paging-list li a i { vertical-align: middle; } #paging .paging-list li.active span { display: block; background-color: #ccc; border-radius: 40px; color: #fff; height: 35px; line-height: 35px; text-align: center; transition: all 400ms ease 0s; width: 35px; } /* Contact/FAQ-page */ #contactForm label { font-weight: normal; } #toggleFaq {} #faqWrapper .faqHeader { font-size: .9em; } #faqWrapper .faqQuestionFold { font-size: 0.88em; } #faqWrapper ul { list-style: none; margin-left: 0; } #faqWrapper li { margin-bottom: 4px; } #faqWrapper h3 { padding: 0 0 5px; margin-left: 13px; } #faqWrapper h3 a { font-weight: normal; position: relative; display: block; } #faqWrapper h3 a:before { color: #ff9f00; content: "+"; font-size: 1.5em; left: -14px; position: absolute; top: -4px; font-weight: 500; } .faqQuestionFold { background: #f9f9f9 none repeat scroll 0 0; margin-bottom: 10px; padding: 10px; position: relative; } .faqQuestionFold:after, .faqQuestionFold:before { bottom: 100%; left: 5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .faqQuestionFold:after { border-color: rgba(247, 247, 247, 0); border-bottom-color: #eaeaea; border-width: 7px; margin-left: -10px; } #faqSubHeader { font-weight: 600; padding-top: 10px; } .toggleFaqDiv { margin-top: 5px; } .faqBack { background-color: #f7f7f7; display: inline-block; padding: 5px 10px; margin: 5px 0; } .faqList ul { list-style-type: none; margin-left: 0;} .faqList ul li { margin-bottom: 10px; } .faqList ul li h3 { display: inline-block; *display: inline; zoom: 1; background-color: #282828; } .faqList ul li a { display: block; color: #fff; padding: 10px 15px;} .faqList ul li a:before { content: '\f054'; font-family: FontAwesome; display: inline; font-size: .8em; padding-right: 9px; } #contactPage p img:first-child { display: none; } /* Tab set / "Accordion" */ #aTabs {} ul.tabs { /*display: none;*/ background-color: #f5f5f5; overflow: auto; } ul.tabs li { color: #333; cursor: pointer; float: left; margin: 0; overflow: hidden; padding: 10px 19px; position: relative; background-color: #f2f2f2; text-transform: uppercase; } ul.tabs li i { color: #626262; display: block; font-size: 1.5em; padding-bottom: 5px; text-align: center; } ul.tabs li:hover, ul.tabs li:hover i { background-color: #e8e8e8; color: #333; } ul.tabs li.active, ul.tabs li.active:hover, ul.tabs li.active:hover i { background-color: #1f98bb; } ul.tabs li.active i, ul.tabs li.active a { color: #fff; } ul.tabs a:focus { outline: none; background-color: #1f98bb; } .tab_container { border: 1px solid #e5e5e5; clear: both; float: left; overflow: auto; width: 100%; } .tab_container h2 { margin-top: 5px; } .tab_content { padding: 8px; position: relative; background-color: #fff; border-bottom: 1px dotted #b2b2b2; } .tab_content label { height: 30px; line-height: 26px; vertical-align: middle; } ul.tabs li.active:after { bottom: 0; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;border-color: rgba(246, 246, 246, 0); border-bottom-color: #f6f6f6; border-width: 7px; margin-left: -10px; } .tab_drawer_heading { display: none; } @media screen and (max-width: 720px) { .tabs { display: none; } .tab_drawer_heading { -moz-user-select: none; background-color: #fff; border-bottom: 1px solid #e5e5e5; color: #333; cursor: pointer; display: block; height: 46px; line-height: 45px; padding: 0 10px; position: relative; text-transform: uppercase;} .tab_drawer_heading:after { content: "\f107"; font-family: FontAwesome; font-weight: 600; position: absolute; right: 11px; color: #818181; font-size: 1.4em; } .tab_drawer_heading.d_active { border-bottom: 0 none; } .tab_drawer_heading.d_active:after { content: "\f106"; color: #333;} .tab_drawer_heading:hover:after { color: #1fbb6c; } .tab_drawer_heading:hover, .tab_drawer_heading:hover i { color: #333; background-color: #f4f4f4; } .tab_drawer_heading i { color: #626262; text-align: center; width: 20px; margin-right: 7px; } .d_active, .d_active i, .d_active:hover, .d_active:hover i { color: #333; } .tab_container { clear: both; float: left; overflow: auto; width: 100%; } .tab_content { border-top: none; } .tab_content:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(246, 246, 246, 0); border-bottom-color: #f6f6f6; border-width: 7px; margin-left: -10px;} } /* Form row */ #qcashierAddressPane .formRow { padding: 5px 0 10px; } #qcDeliveryOther { float: left; } #qcDeliveryOtherLabel, #qcDeliveryOther { display: inline-block; width: auto; } #qcDeliveryAddressBox { padding: 10px; background-color: #fbfbfb;} .formRow { display: block; margin: 0px; } .formRow:after { content:''; display:block; clear: both; } .formRow label { display: block; margin: 3px 0; } .formRow input[type="text"], .formRow input[type="password"], textarea { padding: 10px 3px;} .formRow select { background-color:#fff; } .formRow .left { float: left; } .formRow .right { float: left; } .checkoutToggle, .jsToggleComment, .jsToggleCoupon { cursor: pointer; display: block; padding: 4px 0; } .checkoutToggled, .jsToggleCommentContent, .jsToggleCouponContent{ display:none; margin-top:15px; width:100%;} .isLoggedInBox { margin-bottom:25px;} .defaultMargin { margin:0 8px; } .CheckoutLoginButton { cursor: pointer; padding: 5px 30px; margin-top:5px; } .checkoutCoupon, .checkoutComment{ margin:15px 0; background-color: #f6f6f6; padding:15px; } #coupon { height: 30px; padding: 2px 4px; } #qcPno {} .firstLetterUppercase:first-letter { text-transform: uppercase; } #qcFetchAddr { padding: 7px 0 !important; margin-top: 5px; } #cashierPage h1 { text-align: center; } .cashierProducts .greyColor, .cashierProducts .greyColor .name { color: #777777; font-weight: normal; } .cashierProducts .total { padding: 10px 0; font-size: 18px; font-weight: 600; background-color: #f4f4f4; border-bottom: 0; } .cashierProducts .discount { padding: 10px 0; font-size: 15px; background-color: #f4f4f4; } .cashierProducts .vat { padding: 10px 0; font-size: 15px; background-color: #fbfbfb; } .cashierProducts tr.discount:hover, .cashierProducts tr.total:hover, .cashierProducts tr.vat:hover { background-color: #f4f4f4; } .cashier-form { display: block; overflow:hidden; } .cashier-form table { clear:both; border-collapse: collapse; table-layout: fixed; width: 100%; white-space: nowrap; word-wrap: break-word; text-align: left; } .cashier-form .col10 { width: 29%; } .cashier-form .col20 { width: 48%; } .cashier-form .col30 { width: 22%; text-align: right; } .cashier-form table td { white-space: normal; text-overflow: ellipsis; } .cashier-form .tableInfo {} .cashier-form .tableInfo .subscriptSpot { background-color: #333; padding: 4px 10px; color: #fff; font-size: .8em; } .cashier-form .tableTotal { font-weight: 600; text-align: right; vertical-align: bottom; } .cashier-form .tableImage { line-height: 1.3em; text-align: center; vertical-align: middle; } .cashier-form .tableImage img { max-width: 100%; } .cashierAdress input:not([type="checkbox"]), .loginForm input:not([type="checkbox"]) { width: 100%; } .cashier-form .cartQtyWrapper { margin: 0 auto; overflow: auto; float: left; margin-right: 30px; } .cashier-form .cartQty { margin: 0 2px; text-align: center; width: 20px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .cashier-form .cartMinus { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .cashier-form .cartPlus { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .cashier-form .cartPlus a:focus { background-color: green !important; outline: thin dotted !important; } .cashier-form .cartMinus a:focus { background-color: red !important; outline: thin dotted !important; } .cashier-form .cartRemove:focus { outline: thin dotted !important; } .cashier-form .name { font-size: 1em; font-weight: 400;padding-bottom: 15px; } .cashier-form .quantity { margin: 2px 0; font-size: .9em; float: left; margin-right: 28px; width: 100%; } .cashier-form .price { font-weight: 600; margin: 0px 0; float: left; margin-right: 5px; line-height: 23px; width: 100px; } .cashier-form .priceTotal {font-weight: 600; padding-bottom: 5px; } .cashier-form .cartRemove { text-align: center; float: left; padding-top: 2px; } .cashier-form .cartPlus a, .cashier-form .cartMinus a { color: #fff; display: block; font-size: 8px; height: 20px; line-height: 20px; text-align: center; text-decoration: none; width: 20px;background-color: #9f2c2c; margin-bottom: 3px; border-radius: 40px; } .cashier-form .cartPlus a { background-color: #1fbb6c; } .cashier-form .cartPlus a:focus, .cashier-form .cartMinus a:focus { color: #fff !important; } .cashier-form .cartPlus a:hover, .cashier-form .cartMinus a:hover { opacity: .7; } .cashier-form table td a { display: block; } .cashier-form table th { font-size:15px; line-height:15px; float: none; } .cashier-form table tr { transition: all 600ms ease 0s; } .cashier-form table tr:hover { background-color: #fbfbfb;} .cashier-form table tr:hover th { background-color: #fcfcfc; } .cashier-form .even { background-color:#fff;} .cashier-form .odd { background-color:#fff;} #qcTypeChoice {} #qcTypeChoice ul { padding-left: 0; display: block; margin-top: 0; } #qcTypeChoice li a { background-color: gray; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin-left: 0; margin-right: 30px; position: relative; padding: 10px 0; text-align: center; text-decoration: none; } #qcTypeChoice li a:hover, #qcTypeChoice li a:focus { outline: 2px solid #1fbb6c; } #qcTypeChoice li.active a { background-color: #1fbb6c; border-color: #ccc; border: 0px; } #qcTypeChoice li a:after { border-radius: 7px; color: #ccc; content: "\f00c"; font-family: FontAwesome; font-weight: normal; height: 25px; left: 11px; line-height: 25px; position: absolute; text-align: center; top: 20%; width: 25px; } #qcTypeChoice li > a { display: block; height: 100%; width: 100%; color: #fff; } #qcTypeChoice li.active a:after { background-color: #fff; border-radius: 40px; color: #1fbb6c; } .count input { text-align: center; padding: 2px;} .cashier-form table .tdPrice { padding-left: 25px !important; } .cashierType h2 i, .cashierAdress h2 i, .cashierContact h2 i, .cashierDelivery h2 i, .cashierPay h2 i, .cashierProducts h2 i, .cashierBonus h2 i, .cashierSale h2 i, .cashierComment h2 i, .cashierGiftWrap h2 i {color: #fff; background-color: #0097cf; width: 30px; height: 30px; border-radius: 60px; line-height: 30px; text-align: center; font-size: .75em; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: bottom; font-style: normal; font-weight: 600; display: none;} .cashierDelivery ul, .cashierPay ul { list-style: outside none none; margin: 0; overflow: auto; padding: 0; } .cashierDelivery li, .cashierPay li { position: relative; } .cashierDelivery li .inner, .cashierPay li .inner { background-color: gray; color: #fff; } .cashierDelivery li .inner, .cashierPay li .inner { line-height: 40px; min-height: 40px } .cashierDelivery li:hover .inner, .cashierPay li:hover .inner{ outline: 2px solid #1fbb6c; } .cashierDelivery li label:before, .cashierPay li label:before { font-family: FontAwesome; content: '\f00c'; color: #ccc; font-weight: normal; border-radius: 7px; height: 25px; line-height: 25px; position: absolute; text-align: center; width: 25px; top: 50%; margin-top: -12px; left: 18px; } .cashierPay li label:before { /*top: 40%;*/ } .cashierDelivery li .labelColumn label:before, .cashierPay li .labelColumn label:before { content: none;} .cashierDelivery li .inner input[type="radio"], .cashierPay li .inner input[type="radio"] { position: absolute; opacity: 0; } .cashierDelivery li .inner input[type="radio"]:focus + label, .cashierPay li .inner input[type="radio"]:focus + label { outline: 2px solid #1fbb6c; } .cashierDelivery li.active, .cashierPay li.active { border: 0px; } .cashierDelivery li.active .inner, .cashierPay li.active .inner { background-color: #1fbb6c; outline: thin dotted; } .cashierDelivery li.active label , .cashierPay li.active label { color: #fff; } .cashierDelivery li.active label:before, .cashierPay li.active label:before { color: #1fbb6c; background-color: #fff; border-radius: 40px; } .cashierDelivery li span, .cashierPay li span { position: relative; } .cashierDelivery li img, .cashierPay li img { max-height: 55px; } .cashierDelivery li label, .cashierPay li label{ cursor: pointer; display: block; } .cashierDelivery li label span, .cashierPay li label span { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } .cashierDelivery li.active label span, .cashierPay li.active label span {} .cashierDelivery li .labelImage, .cashierPay li .labelImage { height: 30px; width: 100%; text-align: center; height: 60px; line-height: 60px; padding-top: 5px; } .cashierDelivery li .labelText, .cashierPay li .labelText { width: 100%; text-align: center; } .qccashier-pay-info { padding: 10px; position: relative; background-color: #ccf3fb; } .qccashier-pay-info label { color: #333 !important; } .cashierDelivery li.active .qccashier-pay-info:after, .cashierPay li.active .qccashier-pay-info:after { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: rgba(250, 250, 250, 0) rgba(250, 250, 250, 0) #f5f5f5; border-image: none; border-style: solid; border-width: 9px; content: " "; height: 0; left: 20px; margin-left: -15px; pointer-events: none; position: absolute; top: -17px; width: 0;} .cashierComment textarea { width:925px; height:80px;} .cashier-form th, .cashier-form td { padding: 0.4em; vertical-align: top; } .cashier-form th { color: #848484; font-size: 0.8em !important; } .cashier-form tr { border-bottom: 1px dotted #dddddd; } .cashier-form tr:hover { background:#fcfcfc; } .cashier-form tr:hover th { background:#fff !important;} .cashier-form a {} .conditions { font-size: 0.8em; } .minus { float: left; margin-top: 3px; } .plus { float: left; margin-top: 3px; } .plus a, .minus a { border-radius: 22px; color: #000; display: block; font-size: 8px; height: 16px; line-height: 16px; text-align: center; text-decoration: none; width: 16px; background-color: #333333;} .plus a:focus, .minus a:focus { color: #fff !important; } .plus a:hover, .minus a:hover { opacity: .7; } .qccashier-bonus {} .qcBonusLevels {} .qcBonusLevels ul {} .qcBonusLevels li {} .qcBonusLevels li:hover {background: #fff;} .qcBonusProduct { border-bottom: 1px dotted #e3e3e3;} .qcBonusProduct .f1 {} .qcBonusProduct .f1 img { display:block; margin:auto;} .qcBonusProduct .f2 {} .qcBonusProduct .f3 {} .qcBonusProduct .f3 select {} .qcBonusProduct .f4 { font-weight:600;} .qcBonusProduct .f5 {} .qcCartTbl .plus, .qcCartTbl .minus { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #qcGiftWrapSelection { margin-top:10px;} #qcGiftWrapSelection ul { list-style: none; padding:0; margin:0; overflow:auto; height:auto; } #qcGiftWrapSelection li { margin:5px; display:block; float:left; height:140px; width:120px; padding:1px; border:1px solid #cccccc; background:#ffffff; cursor: pointer; position: relative;} #qcGiftWrapSelection li:hover { border: 1px solid #b2e5b2; } #qcGiftWrapSelection img { display:block; margin-left:auto; margin-right:auto; } #qcGiftWrapSelection li.active { border:1px solid #009900; } #qcGiftWrapSelection li.active:before { content: '\2713 '; padding-right: 5px; position: absolute; bottom: 2px; left: 10px; font-size: 120%; color: #009900; font-weight: 600; } #qcGiftWrapSelection li strong { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-size:12px; height:14px; overflow:hidden; } #qcGiftWrapSelection li i { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-style: normal; } /* Popup - Notify */ #notifyPopup { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 33%; right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden;} #notifyPopupPane { margin:15px; padding-bottom: 8px; } #notifyPopupPane em { font-weight:600; font-style:normal; display:block; text-transform: uppercase; } #notifyPopupPane p { margin-top:10px; } #notifyPopupPane #notifyEmail { display: block; height: 38px; margin: auto; width: 100%; padding: 5px; margin-top: 5px; } #notifyPopupPane #notifyPopupPaneButtonBar { margin:auto; margin-top:20px; text-align: center; } #notifyPopupPane #notifyPopupPaneButtonBar input { margin-left:3px; margin-right:3px;} #notifyPopupPane #notifyPopupOk { padding: 0 20px; } /* transparencyLayer */ #transparencyLayer { width: 100%; height: 100%; position:fixed; z-index: 4000; background-color: rgba(0,0,0, .6); display: none; top: 0; } /* ajaxPopupWindow */ #ajaxPopupWindow { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 33%; right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden;} #ajaxPopupClose { background-color: #fff; height: 30px; line-height: 30px; position: absolute; right: 2px; text-align: center; top: 2px; width: 30px; z-index: 10000; cursor: pointer; } #ajaxPopupClose:hover:after, #ajaxPopupClose:focus:after{ color: #000; -webkit-transform: rotate(90deg); /* Safari and Chrome */ -moz-transform: rotate(90deg); /* Firefox */ -ms-transform: rotate(90deg); /* IE 9 */ -o-transform: rotate(90deg); /* Opera */ transform: rotate(90deg); } #ajaxPopupClose:after { color: #767676; content: "\f00d"; font-family: FontAwesome; font-size: 1.2em; height: 100%; left: 0; line-height: 30px; position: absolute;top: -1px; transition: all 200ms ease 0s; width: 100%; cursor: pointer; } .ajaxPopupHeader { font-weight: 600; margin-bottom: 5px; margin-top: 5px; text-align: center; text-transform: uppercase; } .ajaxPopupContent { padding:5px;} /* ajaxPopupWindow */ #ajaxPopupNotify { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 33%; right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden;} .ajaxPopupContent p:first-child { padding:0; margin:0; } /* Ajax loader */ #ajaxLoader { display: none; z-index:9000; background-color: transparent; width:200px; height:200px;border-radius: 400px; text-align:center; position:fixed; top: 33%; right: 0; left: 0; margin-right: auto; margin-left: auto; } #ajaxLoader .spinner-loader { margin-top: 75px;} /*#ajaxLoader:before { content: " "; position: absolute; left: 0; right: 0; margin: auto auto; background: url(../images/snowmobile-white.png) no-repeat; width: 40px; height: 40px; top: 0; bottom: 0; z-index: 12; background-size: 100% 100%; background-position: 4px 3px;}*/ .axloader, .axloader:before, .axloader:after { border-radius: 50%; } .axloader { color: transparent; font-size: 11px; text-indent: -99999em; margin: 55px auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); background-color: rgba(31,187,108,.8);} .axloader:before, .axloader:after { position: absolute; content: ''; } .axloader:before { width: 5.2em; height: 10.2em; background: #1fbb6c; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; -webkit-transform-origin: 5.2em 5.1em; transform-origin: 5.2em 5.1em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s;} .axloader:after { width: 5.2em; height: 10.2em; background: #1fbb6c; border-radius: 0 10.2em 10.2em 0;top: -0.1em; left: 5.1em; -webkit-transform-origin: 0px 5.1em;transform-origin: 0px 5.1em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease;} @-webkit-keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #loaderContainer { height: 42px; width: 40px; position: absolute; top: -7px; left: 11px; background-color: rgb(40,40,40); background-color: rgba(40,40,40,.1); z-index: 2000;} .loader, .loader:before, .loader:after { background: #000; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: .8em; height: 4em; } .loader:before, .loader:after { position: absolute; top: 0; content: ''; } .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader { text-indent: -9999em; margin: 20px auto 26px 22px; position: relative; font-size: 5px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0 #ffffff; height: 4em; } 40% { box-shadow: 0 -2em #ffffff; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0 #ffffff; height: 4em; } 40% { box-shadow: 0 -2em #ffffff; height: 5em; } } .p3selectbox {} #ajaxLoaderSmall { left: -32px; padding-left: 10px; padding-top: 1px; position: absolute;top: 12px; } #jsCashierForm {font-weight: 700; height: 70px; padding: 20px !important; background-color: #ff9900; box-shadow: 0 2px 0 #e1810d; margin: 20px 0 25px;font-size: 1.8em; } /* Widths em */ .w.9em {width:.9em;} .w2em {width:2em;} .w3em {width:3em;} .w4em {width:4em;} .w5em {width:5em;} .w6em {width:6em;} .w7em {width:7em;} .w8em {width:8em;} .w9em {width:9em;} .w10em {width:10em;} .w1.9em {width:1.9em;} .w12em {width:12em;} .w13em {width:13em;} .w14em {width:14em;} .w15em {width:15em;} .w16em {width:16em;} .w17em {width:17em;} .w18em {width:18em;} .w19em {width:19em;} .w20em {width:20em;} .w2.9em {width:2.9em;} .w22em {width:22em;} .w23em {width:23em;} .w24em {width:24em;} .w25em {width:25em;} .w30em {width:30em;} .w35em {width:35em;} .w40em {width:40em;} /* Widths % */ .w1p {width:1%;} .w2p {width:2%;} .w3p {width:3%;} .w4p {width:4%;} .w5p {width:5%;} .w6p {width:6%;} .w7p {width:7%;} .w8p {width:8%;} .w9p {width:9%;} .w10p {width:10%;} .w11p {width:11%;} .w12p {width:12%;} .w13p {width:13%;} .w14p {width:14%;} .w15p {width:15%;} .w16p {width:16%;} .w17p {width:17%;} .w18p {width:18%;} .w19p {width:19%;} .w20p {width:20%;} .w21p {width:21%;} .w22p {width:22%;} .w23p {width:23%;} .w24p {width:24%;} .w25p {width:25%;} .w26p {width:26%;} .w27p {width:27%;} .w28p {width:28%;} .w29p {width:29%;} .w30p {width:30%;} .w31p {width:31%;} .w32p {width:32%;} .w33p {width:33%;} .w34p {width:34%;} .w35p {width:35%;} .w36p {width:36%;} .w37p {width:37%;} .w38p {width:38%;} .w39p {width:39%;} .w40p {width:40%;} .w41p {width:41%;} .w42p {width:42%;} .w43p {width:43%;} .w44p {width:44%;} .w45p {width:45%;} .w46p {width:46%;} .w47p {width:47%;} .w48p {width:48%;} .w49p {width:49%;} .w50p {width:50%;} .w51p {width:51%;} .w52p {width:52%;} .w53p {width:53%;} .w54p {width:54%;} .w55p {width:55%;} .w56p {width:56%;} .w57p {width:57%;} .w58p {width:58%;} .w59p {width:59%;} .w60p {width:60%;} .w61p {width:61%;} .w62p {width:62%;} .w63p {width:63%;} .w64p {width:64%;} .w65p {width:65%;} .w66p {width:66%;} .w67p {width:67%;} .w68p {width:68%;} .w69p {width:69%;} .w70p {width:70%;} .w71p {width:71%;} .w72p {width:72%;} .w73p {width:73%;} .w74p {width:74%;} .w75p {width:75%;} .w76p {width:76%;} .w77p {width:77%;} .w78p {width:78%;} .w79p {width:79%;} .w80p {width:80%;} .w81p {width:81%;} .w82p {width:82%;} .w83p {width:83%;} .w84p {width:84%;} .w85p {width:85%;} .w86p {width:86%;} .w87p {width:87%;} .w88p {width:88%;} .w89p {width:89%;} .w90p {width:90%;} .w91p {width:91%;} .w92p {width:92%;} .w93p {width:93%;} .w94p {width:94%;} .w95p {width:95%;} .w96p {width:96%;} .w97p {width:97%;} .w98p {width:98%;} .w99p {width:99%;} .w100p {width:100%;} /* .button Buttons: Same style for input, button and link */ .button { background-color: #eee; background-repeat: repeat-x; background-size: 100% auto; border-color: #C8C8C8 #C8C8C8 #BBBBBB; border-style: solid; border-width: 1px; color: #fff !important; cursor: pointer; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; line-height: 24px; padding: 6px 10px !important; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; text-shadow: none; border: 0; -webkit-appearance: none; font-family: 'Roboto Condensed',Arial,Helvetica,sans-serif; outline:none; position: relative; z-index: 2; transition: all 200ms ease 0s;} .button:focus { outline: thin dotted;} .button:active { outline: none; -moz-user-select: none; transform: translateY(2px); } .button.bigBuy { padding: 10px 20px !important; font-size: 1.4em; width: 100%; height: 45px; position: relative; overflow: hidden; } .button.button-confirm.jsAddOk:after { background-color: #1fbb6c; content: "\f00c"; font-family: FontAwesome; font-size: 1.5em; height: 100%; left: 0; line-height: 32px; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; } .button.button-confirm.bigBuy.jsAddOk:after { content: "\f00c"; font-family: FontAwesome; font-size: 1.5em; height: 105%; left: 0; line-height: 53px; position: absolute; top: -4px; transition: all 200ms ease 0s; width: 100%; background-size: 100% auto; border-color: #165b16 #165b16 #165b16; color: #fff !important; font-weight: 600; background-color: #1fbb6c;} .button.button-confirm.jsAddFail:after { background-color: #cc4c3f; color: #fff; content: "\f00d"; font-family: FontAwesome; font-size: 1.5em; height: 100%; left: 0; line-height: 37px; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; } .button.button-confirm.bigBuy.jsAddFail:after { line-height: 48px; } .button.big { padding: 15px 20px !important; font-weight: 600; font-size: 1.3em; } .button.toCashier { background-color: #42b84b; } .button.toCashier:hover { background-color: #39a642; } .button:focus:-moz-focus-inner, .button:active:-moz-focus-inner { border-color: #000;} .button:hover, .button:focus { background-color: #333333; color: #ffffff !important; background-position: 0 -15px; outline-offset: -6px; text-decoration: none; transition: background-position 0.1s linear 0s; } .button.button-disabled, .button:disabled { background-color: #EEEEEE; border-color: #E1E1E1; background: none repeat scroll 0 center transparent; box-shadow: none; cursor: default; font-style: italic; text-shadow: none; } a.button { padding-bottom: 6px !important; padding-top: 6px !important; } input.button-confirm, button.button-confirm, a.button-confirm { background-size: 100% auto; border-color: #165b16 #165b16 #165b16; color: #fff !important; background-color: #1fbb6c; font-size: 1em; } input.button-confirm:hover, input.button-confirm:focus, button.button-confirm:hover, button.button-confirm:focus, a.button-confirm:hover, a.button-confirm:focus { background-color: #13a95d; transition: all 200ms ease 0s; } input.button-confirm:focus:-moz-focus-inner, input.button-confirm:active:-moz-focus-inner, button.button-confirm:focus:-moz-focus-inner, button.button-confirm:active:-moz-focus-inner, a.button-confirm:focus:-moz-focus-inner, a.button-confirm:active:-moz-focus-inner{ border-color: white;} input.button-confirm.button-disabled, input.button-confirm:disabled, button.button-confirm.button-disabled, button.button-confirm:disabled, a.button-confirm.button-disabled, a.button-confirm:disabled { background-color: #f1630e; border-color: #165b16; } input.button-confirm-black, button.button-confirm-black, a.button-confirm-black{ background-size: 100% auto; font-weight: 600; background-color: gray; font-size: 1em; } a.button-confirm-black{ /*font-size: .85em;*/ } /* @-moz-document url-prefix() { .productListContainer li .button-confirm-black { padding-bottom: 4px !important; padding-top: 4px !important; } .productListContainer li a.button-confirm { padding-bottom: 4px !important; padding-top: 4px !important; } } */ input.button-confirm-black:hover, input.button-confirm-black:focus, button.button-confirm-black:hover, button.button-confirm-black:focus, a.button-confirm-black:hover, a.button-confirm-black:focus { background-color: #787878; } input.button-confirm-black:focus:-moz-focus-inner, input.button-confirm-black:active:-moz-focus-inner, button.button-confirm-black:focus:-moz-focus-inner, button.button-confirm-black:active:-moz-focus-inner, a.button-confirm-black:focus:-moz-focus-inner, a.button-confirm-black:active:-moz-focus-inner{ border-color: white; } input.button-confirm-black.button-disabled, input.button-confirm-black:disabled, button.button-confirm-black.button-disabled, button.button-confirm-black:disabled, a.button-confirm-black.button-disabled, a.button-confirm-black:disabled { background-color: #f1630e; border-color: #000; } /* Medium button */ .mediumButton { background-color: #1f98bb; color: #fff; cursor: pointer; font-size: 0.9em; padding: 8px; transition: all 400ms ease 0s; display: inline-block;border-radius: 25px; text-transform: uppercase; } .mediumButton:hover, .mediumButton:focus { color: #fff; background-color: #1a8dae; } .mediumButton.dark { background-color: #636363; } .mediumButton.dark:hover, .mediumButton.dark:focus { color: #fff; background-color: #333; } /* Small button */ .smallButton { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin-left: 3px; } .smallButton a span { display: none; } .smallButton a { background-color: #1f98bb; border-radius: 40px; color: #fff; display: block; height: 28px; line-height: 28px; text-align: center;width: 28px; transition: all 400ms ease 0s; font-size: .8em; } .smallButton a:hover, .smallButton a:focus { color: #fff; background-color: #1a8dae; } .smallButton a.wishList:hover { color: red;} .grow { } /*.grow:hover { transform: scale(1.07); transition: all .2s ease-in-out;}*/ .bigBuy.grow:hover { transform: scale(1.03); } .blurred { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .easing { transition: all 0.15s ease 0s; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } /* Search suggest */ div.suggest { font-size:12px; padding:6px; border-top:1px solid #e4e4e4; background: #fff; margin:0; clear:both; height:auto; overflow:auto; } div.suggest:first-child { border-top: 0;} div.suggest:last-child { border-bottom:none; } div.suggest em { float: right; font-size: 12px;} div.suggest div.image { display:block; padding-right:4px; width:10%; float:left; text-align:center; } div.suggest div.data { display:block; margin-right:4px; width:85%; float:left; } div.suggest div.data a { display: block; } div.suggest:hover { background-color: #ecfdff; border-top: 1px solid #cee7ea; } p.empty { margin:0; padding:3px; background: rgba( 233,241,17,0.87 ); } .typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; line-height: 30px; border: 2px solid #ccc; outline: none; } .tt-hint { display: none;} .typeahead { background-color: #fff;} .typeahead:focus { border: 2px solid #1a8dae;} .tt-menu { /*width:229px !important;*/ width: 100%; border:1px solid #cccccc; text-align: left;} p.fullsearch { background:#fff; padding:5px; margin:0; font-size: 12px; } p.suggestHead { background:#ffd11f; color: #fff; padding:5px; margin:0; font-size: 12px; font-weight:300; text-align:left; } .suggest.tt-suggestion.tt-selectable > a { display: block; width: 100%; } /* Target: 480- */ @media only screen and (max-width : 480px) { input, select, textarea { border: 1px solid #ccc; font-family: inherit; font-size: 16px; } } /* Target: 600- */ @media only screen and (max-width : 600px) { } @media only screen and (max-width : 940px) { #jsMenuList.desktop li.category { font-size: 90%; } #jsMenuList.desktop li.category > a { padding-left: 4px !important; padding-right: 4px !important; } #jsMenuList.desktop li.category i { padding-left: 2px; padding-right: 5px; } /*#topArea .col1 { width: 0px !important; padding: 0; }*/ } /* Target: 720+ */ @media (min-width: 720px) { .onlyBig {display: block !important; } .onlySmall {display: none !important; } .innerFill h1 { /*text-align: left;*/ } .innerFill h2 { /*text-align: left;*/ } .innerFill > h2 { background-color: #f0f0f0; border-bottom: 1px solid #e5e5e5; } #buttonSearch { cursor: pointer; border: 0; background-color: #171717; padding: 10px; color: #fff; font-size: 1.1em; display: inline-block; vertical-align: bottom; border-radius: 100%; margin-top: 7%;border: 1px solid #000; display: inline-block; vertical-align: middle; } #buttonSearch:focus { outline: none; } #buttonSearch.active { background-color: #20bb6c; } #buttonSearch span { display: none; } #topArea.fixed #buttonSearch { margin-top: 1%; } #jsSearchField { padding: 0; display: inline-block; margin-left: 5px; max-width: 0; overflow: hidden; vertical-align: middle; margin-top: 7%; transition: all 0.25s ease;} #jsSearchField.active { max-width: 100%; min-width: 76%; } #topArea.fixed #jsSearchField { margin-top: 0; } #countrySelect { padding: 0; height: 40px; } #gModelContainer { top: 170px; } #gModelContainer .gModelHead span { display: inline; vertical-align: middle; } /* #gModelContainer .gModelHead:before { content: " "; background: url(../images/snowmobile-white.png) no-repeat; width: 30px; height: 30px; background-size: 70% 70%; background-position: 5px 4px; display: inline-block; margin-right: 5px; vertical-align: middle; background-color: #f8602c; border-radius: 80px;} */ /* Breadcrumb */ #breadcrumbs { display: block; } /* Index */ #pageIndex .flexslider { /*min-height: 350px;*/ margin-bottom: 0; } #uspIndex .uspPlate { min-height: 125px; } #uspIndex [class*='grid-']:nth-child(2){ /*border-right: 1px solid #eaeaea;*/ } #uspIndex [class*='grid-']:first-child, #uspIndex [class*='grid-']:nth-child(2) { border-bottom: 0; padding-bottom: 0; } /* Category */ #categoryPage .flexslider { min-height: 150px; } .categories.slim li .count { width: auto; text-align: left; } .categories.big > ul > li { width: 20%; } .productListContainer li .innerContainer { height: 360px; } .productListContainer li .catProdInner h3 a span { height: 33px; padding: 0 5px; line-height: 16px; } .productListContainer li.bigProduct .catProdInner .rating { bottom: 21.2%; right: 45%; width: 100px; } .productListContainer li.bigProduct .innerContainer { height: 730px; } .productListContainer li.bigProduct .catProdImage { height: 585px; } .productListContainer li.bigProduct .catProdImage img { max-height: 500px; } .productListContainer li.bigProduct .catProdInner h3 a { padding-top: 595px; } .productListContainer li.bigProduct .catProdInner h3 { font-size: 1.5em; } .productListContainer ul [class~='bigProduct']:nth-child(even) { float: right; } /* Product page */ #prodDesc { margin-top: 5px; } #prodDesc h3 { font-size: 1.3em; } #prodLatestReviews, #prodAssoc, #prodSimilars, #prodOthers { margin-top: 5px; } #productPageUpper .container { background-color: #f5f5f5; } #productPageUpper .colInfo .innerFill { background-color: transparent; border: none; padding: 0; } #productPageUpper .colInfo, #productPageUpper .colDesc { margin-top: 0; } #productPage .headerModel { text-align: left; } #productPage .headerModel:before { display: inline-block; } .productImageContainer { margin-top: 0px; } .productImage { height: 500px; line-height: 500px; } .productImage img { max-height: 500px; } .productInfo { padding: 10px; } .productInfo h1 { text-align: left; font-size: 1.6em; } .productInfo .prices { text-align: left;} .productInfo .shortDesc { text-align: left; display: block; } .productInfo .subscriptSpot { text-align: left; } #productManufacturer { text-align: left; } #prodFunctions { position: relative; bottom: auto; } .productInfo .stockStatus { font-size: .9em; margin-top: 0px; text-align: left; } .expectedInStore { font-size: .9em; } #jsRatingsBtn { text-align: left; } #jsRatingsBtn span { display: inline; } /* Misc. */ .jsShakeArea { height: 0px; } #vatContainer .vatInner {margin: 0;} #mSearch { display: none; } #loaderContainer { display: none; } /* Pagination */ .pagination { text-align: right; } #paging-count { text-align: right; } /* Menu left */ #menuLeftToggle { display: none; } #menuLeft { display: block; padding: 0; } #wrapper.fixed, #menuTop.fixed, #topBar.fixed, #topArea.fixed { padding: 0; } .nav-wrapper { height: 45px; } #superTop { background-color: #1b1b1b; color: #ccc; max-height: 30px; transition: all 0.25s ease;} #superTop.fixed { max-height: 0; overflow: hidden;} #superTopLeft ul { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #superTopLeft li { font-weight: 400; margin-right: 10px; padding-top: 2px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #superTopLeft a { color: #fff; transition: all 0.25s ease; } #superTopLeft a:hover, #superTopLeft a:focus { text-decoration:none; color: #1f98bb; } #superTopRight { text-align: right; font-size: .9em; } #superTopRight li { font-weight: 400; margin-right: 15px; padding-top: 2px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #superTopRight li:last-child { margin-right: 0; } #superTopRight a { color: #1f98bb; } #superTopRight a:focus, #superTopRight a:hover{ color: #1e97bb; text-decoration: underline; } /* Top area (fixed) */ #topArea { display: block; font-size: .9em; position: fixed; top: 0px; width: 100%; height: 125px; background-color: rgb(40,40,40,); background-color: rgba(40,40,40,1); z-index:1000; color: #fff; } #topArea .col2 { text-align: center; } #topLogin a { color: #fff; } #topBarLeft, #topBarLeft a { color: #fff; font-size: .9em; text-transform: uppercase; } /* Top bar, logo search and cart in full screen */ #topBar { margin-top: 125px; display: block; background-color: rgba(40,40,40); background-color: rgba(40,40,40,1); } #topBarLeft li { font-weight: 400; margin-right: 15px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #topBarLeft em { color: #ccc; } #topBarLeft a:hover { text-decoration: underline; } #topBarRight { text-align: right; position: relative; font-size: 1em; } #topUsp { padding-top: 19px; padding-left: 15px; font-size: .9em; text-align: center; } ul.checked.green li:before { color: #1fbb6c; } ul.checked.green li { padding-left: 25px; color: #333; } #topLogoFixed { display: none;} #buttonMenu, #topCartFiller { display: none; } #buttonMenu.fixed, #topCartFiller.fixed { display: table-cell; } #topSearch { display: none; } /* Footer */ #footerTop .col1 { text-align: left; justify-content: center; line-height: 50px; } #footerTop .col2 { text-align: right; justify-content: center; } /* Menu top */ #menuTop, #menuTop.fixed { background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.9); height: 45px; border-bottom: 0px; box-shadow: none; transition: all 0.25s ease; } #menuTop.fixed { background: rgb(40,40,40); background: rgba(40,40,40,1); box-shadow: 0 0 2px #ccc; } #menuTop.fixed #jsMenuList.desktop li.category > a { color: #fff; } #menuTop.fixed #jsMenuList.desktop li.category.changed > a { color: #333; } #menuTop.fixed #jsMenuList.desktop li.category > a:hover { color: #333; } #menuTop.fixed #jsMenuList.desktop li.category.active > a { color: #1fbb6c; } #menuTop { background-color: rgb(40,40,40); background-color: rgba(40,40,40,1); } #menuTop.fixed #jsMenuList.desktop li.category > .subMenuWrapper { /*left:0; width: 100%;*/ /* left: -13px; width: 100%; max-width: 927px;*/ } #topArea.fixed { height: 50px; } #topArea.fixed #topLogo img { margin-top: 0; vertical-align: initial; max-height: 37px; padding-top: 9px; } #topArea.fixed #topLogin, #topArea.fixed #topCartContent { margin-top: 0; padding-top: 0; transition: all 0.20s ease-in-out; } #menuTop.fixed { top: 50px; } #gModelContainer.fixed { top: 95px; } /* jsMenuList desktop */ #jsMenuList { box-shadow: none; } #jsMenuList.desktop { background-color: transparent; display: block; position: relative; top: 0; max-height: none; overflow: visible; width: 100%; max-width: 1180px; text-align: center; } #menuTop.fixed #jsMenuList { border-bottom: 0; } #menuTop.fixed #jsMenuList.desktop li.category.active > a { border: none; } #jsMenuList.desktop li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #jsMenuList li .subMenuWrapper { padding-left: 0; } #jsMenuList li .subMenuWrapper li { position: inherit; } #jsMenuList.desktop li.category > a { padding: 0 12px; line-height: 45px; border-bottom: 0; position: inherit; margin-right: -4px; color: #fff; transition: background 0.1s linear; } #jsMenuList.desktop.textSmall li.category > a { padding: 0 1px; } #jsMenuList.desktop.textSmall li.category i { padding-left: 3px; padding-right: 9px; } #jsMenuList.desktop li.category.hasSub > a { padding-right: 0px; } #jsMenuList.desktop li.category.changed > a { margin-top: 0; background-color: #fff; color: #333; } #jsMenuList.desktop li.category.initialChanged > a { color: #1f98bb; } #jsMenuList.desktop li.category.changed i { -webkit-transform: none; -moz-transform: none;-o-transform: none; -ms-transform: none; transform: none; } #jsMenuList.desktop li.category.active > a { position: relative; color: #1fbb6c; /* Also check #menuTop.fixed #jsMenuList.desktop li.category.active > a */ } #jsMenuList.desktop li.category > a:hover { /*background-color: #828081*/ } #jsMenuList.desktop li.category i { padding-left: 8px; font-weight: 600; float: none; margin-right: 0px; font-size: 1.2em; } #jsMenuList .level-1 .menuTxt { border-bottom: 1px solid #e2e2e2; font-weight: 400;} #jsMenuList .level-1 > a .menuTxt { line-height: normal; padding: 6px 6px 6px 12px; } /*#jsMenuList.desktop .level-1 > ul:first-of-type { padding-top: 5px; }*/ #jsMenuList.desktop li.child > a .clear { display: none; } #jsMenuList.desktop .level-1 .menuTxt i { /*display: none;*/ } #jsMenuList.desktop li > .subMenuWrapper { /*min-height: 260px; max-height: 80vh; max-width: 585px; position: absolute; text-align: left; background-color: transparent; overflow-y: hidden; overflow-x: hidden;*/ /* heightfix 1:1 */ max-height: 80vh; max-width: 585px; position: absolute; text-align: left; background-color: transparent; overflow-y: visible; overflow-x: visible; } #jsMenuList.desktop .subMenuWrapper ul:not(:first-child) { margin-top:0; } #jsMenuList.desktop .subMenuWrapper .subMenuWrapper ul { padding-left: 0; } #jsMenuList.desktop li > .subMenuWrapper .subMenuWrapper { /*max-width: 300px;overflow: visible;text-align: left;display: none;position: absolute;left: 285px;top: 0;bottom: 0;background-color: #e6e6e6;height: auto;min-height: 100%;*/ /* heightfix 1:2 */ max-width: 300px; overflow-y: auto; text-align: left; display: none; position: absolute; left: 285px; top: 0; background-color: #e6e6e6; min-height: 100%; max-height: calc(100vh - 9vw); } #jsMenuList.desktop li.category > a { border-bottom: none; padding: 0 25px;} #jsMenuList li.desktop .subMenuWrapper [class*='grid-'] { width: 100%; } #jsMenuList li .subMenuWrapper li.changed i { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} #jsMenuList.desktop li .subMenuInner.level-1 { background: linear-gradient(to right, #fff 285px, transparent 285px) no-repeat; height: 100%; } #jsMenuList.desktop li .subMenuInner.level-1 > ul { max-width: 285px; margin: initial; background-color: #fff; overflow: auto; max-height: 70vh; } #jsMenuList.desktop li .subMenuInner.level-1 > ul::-webkit-scrollbar-track, #jsMenuList.desktop li .subMenuInner.level-2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #jsMenuList.desktop li .subMenuInner.level-1 > ul::-webkit-scrollbar, #jsMenuList.desktop li .subMenuInner.level-2::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } #jsMenuList.desktop li .subMenuInner.level-1 > ul::-webkit-scrollbar-thumb, #jsMenuList.desktop li .subMenuInner.level-2::-webkit-scrollbar-thumb { background-color: #1f98bb; border: 1px solid #1f98bb; } /* heightfix 1:3 */ #jsMenuList.desktop li > .subMenuWrapper .subMenuWrapper::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #jsMenuList.desktop li > .subMenuWrapper .subMenuWrapper::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } #jsMenuList.desktop li > .subMenuWrapper .subMenuWrapper::-webkit-scrollbar-thumb { background-color: #1f98bb; border: 1px solid #1f98bb; } /* #jsMenuList li .subMenuWrapper li AND #jsMenuList.desktop .subMenuWrapper .subMenuWrapper has to "play together" according to width, and left-position/width! */ #jsMenuList.desktop li .subMenuWrapper li { display: block; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -ms-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; } #jsMenuList.desktop li .subMenuWrapper li.hasSub i { float: right; } /* Level 1 */ #jsMenuList.desktop li .subMenuWrapper li.level-1 { margin-left: 0px; } #jsMenuList.desktop li .subMenuWrapper .level-1 li:hover, #jsMenuList.desktop li .subMenuWrapper .level-1 li.changed > a { color: #1f98bb !important; background-color: #e6e6e6; } #jsMenuList.desktop li .subMenuWrapper .level-1 li:hover, #jsMenuList.desktop li .subMenuWrapper .level-1 li.changed { /*background-color: gray;*/ } #jsMenuList.desktop li .subMenuWrapper .level-1 li.changed a { position: relative; } #jsMenuList.desktop li .subMenuWrapper .level-1 li:hover > a, #jsMenuList.desktop li .subMenuWrapper .level-1 li a:focus { color: #1f98bb; } /* Level 2 */ #jsMenuList.desktop li .subMenuInner.level-2 { overflow: auto; height: 100%; padding: 5px 15px;} #jsMenuList.desktop li .subMenuWrapper .level-2 .menuImg, #jsMenuList.desktop li .subMenuWrapper .level-2 .menuTxt { /*background-color: #fff;*/ display: table-cell; vertical-align: middle; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; -ms-transition: background 0.1s linear; -o-transition: background 0.1s linear; transition: background 0.1s linear;} #jsMenuList.desktop li .subMenuWrapper .level-2 .menuTxt { font-size: 1em; word-break: break-word; font-weight: 100; padding-top: 1px; padding-bottom: 1px; border: none;} #jsMenuList.desktop li .subMenuWrapper .level-2 .menuImg { padding: 4px; width: 55px; line-height: 60px; } #jsMenuList.desktop li .subMenuWrapper .level-2 li {} #jsMenuList.desktop li .subMenuWrapper .level-2 li:hover > a { /*outline: 1px solid #ffd11f;*/ } #jsMenuList.desktop li .subMenuWrapper .level-2 li:hover > a .menuTxt { color: #1f98bb; } /* #jsMenuList.desktop .subMenuWrapper .subMenuWrapper AND #jsMenuList li .subMenuWrapper li has to "play together" according to width, and left-position/width! */ #jsMenuList.desktop .subMenuWrapper .subMenuWrapper { /*display: block !important;*/ } #jsMenuList.desktop .subMenuWrapper .subMenuWrapper li { background-color: transparent; margin: 3px; margin-left: 0; } #jsMenuList.desktop .subMenuWrapper .subMenuWrapper li a { /*background-color: #fff;*/ padding: 0; } /* Top cart */ .topCartOpen { position: relative; } #cashierProducts .productListContainerSmall .listProduct { width: 50%; display: block; } .cashierAdress .inner { width: 50%;} .cashier-form .quantity { width: 41%; } } /* Target: 1024px+ */ @media only screen and (min-width: 1024px) { .nlText { text-align: left; line-height: 50px; } .nlText span { display: inline; } #jsMenuList.desktop .subMenuWrapper .subMenuWrapper li { width: 100%; } .productListContainer li[class~='bigProduct']:nth-child(even) { float: right; } } @media only screen and (max-width: 1024px) { /*#topArea .col1 { width: 0px !important; padding: 0; } #topArea .col2 { text-align: left !important; } */ } /* Target: 1200px+ */ @media only screen and (min-width: 1200px) { #cashierProducts { display: block; } } /* Print */ @media print { .divToPrint { page-break-after: always; } .noPrint {display: none; } .productListContainer li .catProdInner .productBuy { display: none; } } /********************************************************************************************* GRID SYSTEM *********************************************************************************************/ /* BASE */ *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class*='grid-'] { float: left; padding: 5px; width:100%; } #topBar [class*="grid-"] { padding-top: 0px; } .clear-grid { clear:both; float:inherit;} .container { margin:0%; width: 100%; } .container:after, .container:before { display: table; clear:both; content: " "; } .nest { margin:0 -10px; padding:0; width:auto; } /* Mobile */ .grid-m-12 {width: 100%;} .grid-m-11 {width: 91.666663%;} .grid-m-10 {width: 83.33%;} .grid-m-9 {width: 74.999997%;} .grid-m-8 {width: 66.66666664%;} .grid-m-7 {width: 58.333%;} .grid-m-6 {width: 50%;} .grid-m-5 {width: 41.6665%;} .grid-m-4 {width: 33.33%;} .grid-m-3 {width: 24.99%;} .grid-m-2 {width: 16.66666%;} .grid-m-1 {width: 8.33%;} /* Five columns special */ .grid-m-15 { width: 50%; float: left; } /* 720px+ */ @media (min-width: 720px) { .grid-12 {width: 100%;} .grid-11 {width: 91.666663%;} .grid-10 {width: 83.33%;} .grid-9 {width: 74.999997%;} .grid-8 {width: 66.66666664%;} .grid-7 {width: 58.333%;} .grid-6 {width: 50%;} .grid-5 {width: 41.6665%;} .grid-4 {width: 33.33%;} .grid-3 {width: 24.99%;} .grid-2 {width: 16.66666%;} .grid-1 {width: 8.33%;} .grid-t-12 {width: 100%;} .grid-t-11 {width: 91.666663%;} .grid-t-10 {width: 83.33%;} .grid-t-9 {width: 74.999997%;} .grid-t-8 {width: 66.66666664%;} .grid-t-7 {width: 58.333%;} .grid-t-6 {width: 50%;} .grid-t-5 {width: 41.6665%;} .grid-t-4 {width: 33.33%;} .grid-t-3 {width: 24.99%;} .grid-t-2 {width: 16.66666%;} .grid-t-1 {width: 8.33%;} /* Five columns special */ .grid-t-15 { width: 24.99%; float: left; } } /* 1024px+ */ @media only screen and (min-width: 1024px) { .grid-tl-12 {width: 100%;} .grid-tl-11 {width: 91.666663%;} .grid-tl-10 {width: 83.33%;} .grid-tl-9 {width: 74.999997%;} .grid-tl-8 {width: 66.66666664%;} .grid-tl-7 {width: 58.333%;} .grid-tl-6 {width: 50%;} .grid-tl-5 {width: 41.6665%;} .grid-tl-4 {width: 33.33%;} .grid-tl-3 {width: 24.99%;} .grid-tl-2 {width: 16.66666%;} .grid-tl-1 {width: 8.33%;} /* Five columns special */ .grid-tl-15 { width: 20%; float: left;} .grid-tl-60 {width: 60%;float: left;} } /********************************************************************************************* 5. Grid 1200px+ *********************************************************************************************/ @media only screen and (min-width: 1200px) { .container {max-width:1180px; margin:0 auto;} .container-fluid {max-width:90%; margin:0 5%;} .grid-d-12 {width: 100%;} .grid-d-11 {width: 91.666663%;} .grid-d-10 {width: 83.33%;} .grid-d-9 {width: 74.999997%;} .grid-d-8 {width: 66.66666664%;} .grid-d-7 {width: 58.333%;} .grid-d-6 {width: 50%;} .grid-d-5 {width: 41.6665%;} .grid-d-4 {width: 33.33%;} .grid-d-3 {width: 24.99%;} .grid-d-2 {width: 16.66666%;} .grid-d-1 {width: 8.33%;} /* Five columns special */ .grid-d-15 {width: 20%;float: left;} .grid-d-40 {width: 40%;float: left; } }