/* // ---------------------------------------------- // Usage example: // For IE set $mq-support to false. // Set the fixed value. // Then use mixins to test whether styles should be applied. // ---------------------------------------------- $mq-support: false; $mq-fixed-value: 1024; // Renders at fixed value @include bp (min-width, 300px) { div { color:#000; } } // Doesn't render without MQ support @include bp (min-width, 1200px) { div { color:#FFF; } } // Doesn't render without MQ support @include bp (max-width, 300px) { div { color:#444; } } // Renders at fixed value @include bp (max-width, 1200px) { div { color:#888; } } // ---------------------------------------------- */ /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* Corrects `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* Corrects `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /* Prevents modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* Addresses styling for `hidden` attribute not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* 1. Sets default font family to sans-serif. 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* Removes default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* Addresses `h1` font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; } /* Addresses styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /* Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* Addresses styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /* Corrects font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* Sets consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* Addresses inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /* Removes border when inside `a` element in IE 8/9. */ img { border: 0; } /* Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* Addresses margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* 1. Corrects color not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* 1. Corrects font family not being inherited in all browsers. 2. Corrects font size not being inherited in all browsers. 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ button, input { line-height: normal; } /* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Corrects inability to style clickable `input` types in iOS. 3. Improves usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* 1. Addresses box sizing set to `content-box` in IE 8/9. 2. Removes excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* Removes inner padding and search cancel button in Safari 5 and Chrome on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Removes inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* 1. Removes default vertical scrollbar in IE 8/9. 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* ============================================ * Reset ============================================ */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-tap-highlight-color: transparent; /* Prevent tap highlight on iOS/Android */ -webkit-text-size-adjust: 100%; /* Prevent automatic scaling on iOS */ } body { background: #FFFFFF; color: #000000; line-height: 1; } html, body, img, fieldset, abbr, acronym { border: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } th, code, cite, caption { font-weight: normal; font-style: normal; text-align: left; } address { font-style: normal; } fieldset { margin: 0; padding: 0; border: 0; } img { display: block; } ol, ul { list-style: none; } q:before, q:after { content: ''; } input:focus, input[type="search"]:focus { outline-offset: -2px; } input[type="search"] { -webkit-appearance: none; /* 1 */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; /* 2 */ box-sizing: border-box; } /* ============================================ * Base Styles ============================================ */ @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } a, button { -ms-touch-action: manipulation; touch-action: manipulation; } body, button, input, select, table, textarea { font-family: "Varela Round", Arial, Verdana, sans-serif; color: #636363; font-size: 14px; line-height: 1.5; } a { color: #ea6a45; text-decoration: none; } a:hover { color: #e7582e; text-decoration: underline; } a:focus { outline-color: #e9613a; color: #872a0f; } ol, ul { list-style: none; margin: 0; padding: 0; } /* ============================================ * Typography ============================================ */ h1, .h1 { margin: 0; margin-bottom: 0.7em; color: #206bbc; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 28px; font-weight: 400; font-style: normal; line-height: 1.2; text-rendering: optimizeLegibility; text-transform: uppercase; } h2, .h2 { margin: 0; margin-bottom: 0.5em; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 24px; font-weight: 400; font-style: normal; line-height: 1.2; text-rendering: optimizeLegibility; text-transform: uppercase; } h3, .h3 { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; } h4, .h4 { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; } h5, .h5 { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 13px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; } h6, .h6 { margin: 0; margin-bottom: 5px; color: #636363; font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 12px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; } /* ============================================ * Shared Classes ============================================ */ .address-list address { margin-bottom: 1em; } .availability { margin-bottom: 0; font-size: 13px; text-transform: uppercase; } .availability .label { display: none; } .availability.in-stock { color: #11B400; } .availability.available-soon, .availability.out-of-stock { color: #DF280A; } .availability-only { color: #DF280A; margin-bottom: 10px; } /* -------------------------------------------- * Page Titles */ .page-title h1, .page-title h2, .product-name h1, .product-name .h1 { text-transform: uppercase; font-size: 24px; font-weight: 600; color: #636363; border-bottom: 1px solid #EDEDED; padding-bottom: 3px; margin-bottom: 15px; text-transform: uppercase; } /* -------------------------------------------- * Block Module */ .block, .col-left-first { margin-bottom: 20px; } .col-left-first .block:last-of-type { margin-bottom: 0; } .block-title { position: relative; padding: 10px 0 0; margin-bottom: 5px; border-top: 1px solid #CCCCCC; } .block-title h2, .block-title h3, .block-title strong { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; color: #206bbc; margin-bottom: 0; text-transform: uppercase; font-weight: 600; } .block-title small { font-size: 100%; font-weight: normal; color: #A0A0A0; } body:not(.customer-account) .block:first-child .block-title { border-top: none; padding-top: 0; } .block-subtitle { font-weight: bold; margin-bottom: 7px; } .block-content { margin-top: 5px; } .block-content.unpad { padding: 0; } .block-content li.item { margin: 0 0 10px 9px; } .block-content li.item:last-child { margin-bottom: 0; } .block .actions { margin: 10px 0 0; } .block .actions:after { content: ''; display: table; clear: both; } .block .actions a { float: left; } .block .actions .button { float: right; } .col-left .block .actions .button ~ a, .col-right .block .actions .button ~ a { line-height: 33px; margin-right: 5px; } @media only screen and (max-width: 770px) { .sidebar .block:not(.block-layered-nav) { margin-bottom: 0; } .sidebar .block:not(.block-layered-nav) .block-title { padding: 0; margin-top: 0; border-bottom: none; border-top: none; margin-bottom: 0; } .sidebar .block:not(.block-layered-nav) .block-title > strong { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; display: block; width: 100%; cursor: pointer; border-bottom: 0; } .sidebar .block:not(.block-layered-nav) .block-title > strong:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #ea6a45; border-right: none; left: 10px; top: 50%; margin-top: -3px; } .sidebar .block:not(.block-layered-nav) .block-title > strong:hover { background-color: #ededed; } .sidebar .block:not(.block-layered-nav) .block-title.active > strong { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; } .sidebar .block:not(.block-layered-nav) .block-title.active > strong:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 10px; top: 50%; margin-top: -3px; } .sidebar .block:not(.block-layered-nav) .block-title.active > strong:hover { background-color: #ededed; } .sidebar .block:not(.block-layered-nav) .block-content { padding: 10px; margin-top: 0; border-width: 0 1px; border-style: solid; border-color: #CCCCCC; } .sidebar .block:last-of-type { border-bottom: 1px solid #CCCCCC; } } /* -------------------------------------------- * Secondary Navigation */ .block-account .block-title, .block-cms-menu .block-title { padding-top: 0; border-top: none; } .block-account li, .block-cms-menu li { text-transform: uppercase; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; margin: 7px 0; } .block-account li strong, .block-cms-menu li strong { font-weight: 400; color: #ea6a45; } .block-account li a, .block-cms-menu li a { color: #636363; } .block-account li a:hover, .block-cms-menu li a:hover { color: #ea6a45; } /* ============================================ * Buttons ============================================ */ /* Secondary Buttons */ .cart .buttons-set .button, .cart-table .button, .sidebar .actions .button, .button.button-secondary { background: #DDDDDD; color: #636363; padding: 7px 15px; } .cart .buttons-set .button:hover, .cart-table .button:hover, .sidebar .actions .button:hover, .button.button-secondary:hover { background: #d0d0d0; cursor: pointer; } .cart .buttons-set .button:active, .cart-table .button:active, .sidebar .actions .button:active, .button.button-secondary:active { background: #c4c4c4; color: #636363; } .cart .buttons-set .button:focus, .cart-table .button:focus, .sidebar .actions .button:focus, .button.button-secondary:focus { color: #636363; background: #c4c4c4; outline: none; } .sidebar .actions button.button { white-space: normal; } /* Primary Buttons */ .button, .cart-table .product-cart-actions .button, #co-shipping-method-form .buttons-set .button, .footer .button { background: #ea6a45; display: inline-block; padding: 7px 15px; border: 0; color: #FFFFFF; font-size: 13px; font-weight: normal; font-family: "Varela Round", Arial, Verdana, sans-serif; line-height: 19px; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } .button:hover, .cart-table .product-cart-actions .button:hover, #co-shipping-method-form .buttons-set .button:hover, .footer .button:hover { background: #e7582e; cursor: pointer; } .button:active, .cart-table .product-cart-actions .button:active, #co-shipping-method-form .buttons-set .button:active, .footer .button:active { background: #e2471a; color: #FFFFFF; } .button:focus, .cart-table .product-cart-actions .button:focus, #co-shipping-method-form .buttons-set .button:focus, .footer .button:focus { background-color: #e2471a; outline: none; color: #FFFFFF; } a.button { text-decoration: none; } a.button:hover { color: #FFFFFF; } /* Disabled - class for anchor, state for form elements */ .button.disabled, .button:disabled { background: #C8C8C8; opacity: 0.6; cursor: not-allowed; } /* Adjacent buttons */ .button + .button { margin-left: 5px; } .button2 { border: 0; padding: 0 5px; margin: 0; background: transparent; cursor: pointer; vertical-align: middle; } .button2:focus { outline: none; } .button2 span, .button2 span span { line-height: 30px; height: 30px; text-decoration: underline; text-transform: uppercase; display: inline-block; color: #ea6a45; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .button2 span:hover, .button2 span span:hover { text-decoration: none; color: #cc3f17; } @media only screen and (max-width: 770px) { .col2-set .buttons-set .button, .col2-set .buttons-set .button2 { float: none; width: 100%; margin-left: 0; margin-right: 0; } .col2-set .buttons-set .back-link { display: none; } .col2-set .buttons-set .required { display: none; } } @media only screen and (max-width: 479px) { .buttons-set .button { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 7px; } .buttons-set .back-link { display: none; } .buttons-set .required { display: none; } } /* -------------------------------------------- * Paypal Button */ .paypal-logo.paypal-after { float: left; } .paypal-after .paypal-or { float: left; } .paypal-or { line-height: 34px; margin: 0px 10px 5px; } .paypal-after .paypal-button { float: left; } .paypal-button { line-height: 0px; } .paypal-button img { display: inline; } @media only screen and (max-width: 740px) { .paypal-or { line-height: 20px; } .paypal-logo, .paypal-or, .paypal-button { text-align: center; width: 100%; display: block; margin-right: 0; margin-left: 0; float: none; } } /* -------------------------------------------- * Button Sets */ .buttons-set { clear: both; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #EDEDED; text-align: right; } .buttons-set p.required { margin: 0; margin-left: 10px; line-height: 33px; float: right; } .buttons-set .back-link { float: left; margin: 0; line-height: 33px; } .buttons-set a:not(.button) { line-height: 20px; display: inline-block; padding: 5px; } .buttons-set button.button { float: right; margin-left: 5px; min-width: 140px; } .buttons-set:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * Icons */ .icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid, .sorter > .view-mode .list, .page-header a.toggle-button:before, #nav-toggle:before, .skip-search .icon, #search_mini_form .search-button:before, .skip-account .icon, .skip-cart:before, .review-summary-table .rating-box .rating-number:after, .ratings-table .rating-box, .ratings-table .rating-box .rating { background-image: url(../images/icon_sprite.png); background-repeat: no-repeat; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid, .sorter > .view-mode .list, .page-header a.toggle-button:before, #nav-toggle:before, .skip-search .icon, #search_mini_form .search-button:before, .skip-account .icon, .skip-cart:before, .review-summary-table .rating-box .rating-number:after, .ratings-table .rating-box, .ratings-table .rating-box .rating { background-image: url(../images/icon_sprite@2x.png); background-size: 100px 1000px; } } /* -------------------------------------------- * Breadcrumbs */ .breadcrumbs { overflow: hidden; margin: 0; margin-bottom: 15px; } .breadcrumbs li { float: left; font-size: 12px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; } .breadcrumbs a { float: left; color: #636363; } .breadcrumbs a:hover { color: #ea6a45; } .breadcrumbs strong { color: #636363; font-weight: normal; } .breadcrumbs span { float: left; padding: 0 7px; } @media only screen and (max-width: 770px) { .breadcrumbs { display: none; } } /* -------------------------------------------- * Button - Remove / Previous */ .btn-remove, .btn-previous { display: inline-block; width: 20px; height: 20px; border: 1px solid #EDEDED; text-align: center; /* Hide text */ font: 0/0 a; text-shadow: none; color: transparent; position: relative; } .btn-remove:hover, .btn-previous:hover { background-color: #ea6a45; border-color: #ea6a45; } .btn-remove:after { content: 'X'; color: #ea6a45; height: 20px; line-height: 20px; width: 100%; font-size: 10px; font-family: Arial, "Varela Round", Arial, Verdana, sans-serif; font-weight: bold; } .btn-remove:hover:after { color: #FFFFFF; text-decoration: none; } .btn-remove2 { background-position: 4px -648px; border: none; vertical-align: top; } .btn-remove2:after { display: none; } .btn-remove2:hover { background-color: transparent; filter: alpha(opacity=80); opacity: 0.8; } .btn-previous:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #ea6a45; border-left: none; position: absolute; top: 50%; left: 50%; margin-left: -2px; margin-top: -4px; } .btn-previous:hover:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #FFFFFF; border-left: none; } .block-layered-nav .currently .btn-remove, .block-layered-nav .currently .btn-previous, .mini-products-list .btn-remove, .mini-products-list .btn-previous, #compare-items .btn-remove, #compare-items .btn-previous { float: right; margin-left: 6px; } /* -------------------------------------------- * Checkout Agreements */ .checkout-agreements li { margin-bottom: 20px; } .checkout-agreements .agreement-content { overflow-y: auto; max-width: 670px; max-height: 125px; margin-bottom: 10px; padding: 10px; border: 1px solid #CCCCCC; background: #F4F4F4; } /* -------------------------------------------- * CVV Security Code */ .cvv-what-is-this { margin-left: 10px; font-size: 13px; line-height: 24px; } /* -------------------------------------------- * Container */ .wrapper { padding-top: 120px; } @media only screen and (min-width: 600px) { .wrapper { padding-top: 80px; } } .main-container, .footer-container { position: relative; max-width: 1320px; margin: 0 auto; padding: 15px; } .main-container:after, .footer-container:after { content: ''; display: table; clear: both; } @media only screen and (min-width: 480px) { .main-container, .footer-container { padding: 30px; } } .main-container { padding-top: 10px; } .footer-container { padding-top: 0px; } /* -------------------------------------------- * Column Layouts */ .main:after, .col-wrapper:after { content: ''; display: table; clear: both; } .col-left, .col-right, .col-main { padding: 0 10px; } .col-left { float: left; width: 25%; padding-left: 0; /* Remove the 15px padding */ clear: left; } .col-left img { max-width: 100%; } .col-right { float: right; width: 25%; padding-right: 0; /* Remove the 15px padding */ } .col-right img { max-width: 100%; } .col-main { float: left; width: 75%; } .col1-layout .col-main { float: none; width: auto; padding: 0; /* Remove the 15px padding */ } .col2-left-layout .col-main { float: right; padding-right: 0; /* Remove the 15px padding */ } .col2-right-layout .col-main { padding-left: 0; /* Remove the 15px padding */ } .col3-layout .col-right { width: 20.83333%; } .col3-layout .col-wrapper { float: left; width: 79.16667%; } .col3-layout .col-wrapper .col-main { float: right; width: 73.68421%; } .col3-layout .col-wrapper .col-left { width: 26.31579%; } @media only screen and (max-width: 1000px) { .col3-layout .col-right { float: left; clear: left; padding-left: 0; padding-right: 10px; width: 25%; } .col3-layout .col-wrapper { float: right; width: 100%; } .col3-layout .col-wrapper .col-main { float: right; width: 75%; } .col3-layout .col-wrapper .col-left { width: 25%; } } @media only screen and (max-width: 770px) { .col-left, .col-right, .col-main, .col1-layout .col-left, .col1-layout .col-right, .col1-layout .col-main, .col2-left-layout .col-left, .col2-left-layout .col-right, .col2-left-layout .col-main, .col2-right-layout .col-left, .col2-right-layout .col-right, .col2-right-layout .col-main, .col3-layout .col-wrapper .col-left, .col3-layout .col-right, .col3-layout .col-wrapper .col-main { padding: 0; margin-bottom: 10px; float: none; width: auto; } .col3-layout .col-wrapper { float: none; width: auto; } .col-main { float: none; width: auto; } .col-main .col-left { padding: 0; /* On product listing pages, the left column gets moved inside col-main on small viewports */ } } /* Content Columns */ .col2-set { width: 100%; } .col2-set .col-1, .col2-set .col-2 { width: 50%; padding: 20px; } @media only screen and (max-width: 770px) { .col2-set .col-1, .col2-set .col-2 { padding: 10px; } } .col2-set .col-1 { float: left; padding-left: 0; } .col2-set .col-2 { float: right; padding-right: 0; } @media only screen and (max-width: 479px) { .col2-set .col-1, .col2-set .col-2 { float: none; width: auto; border: 0; padding-right: 0; padding-left: 0; } } .col2-set .narrow { width: 33%; } .col2-set .wide { width: 65%; } .col2-set:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * Top Container */ @media only screen and (min-width: 771px) { .top-container { max-width: 1320px; margin: 0 auto; padding: 0 30px; } } /* -------------------------------------------- * Global Site Notice */ .global-site-notice { background: #676157; color: #E6E6E6; font-size: 11px; } .global-site-notice .notice-inner { padding-left: 120px; width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; line-height: 11px; min-height: 40px; padding-top: 14.5px; padding-bottom: 14.5px; background-image: url("../images/demo-logo.png"); background-position: left; background-repeat: no-repeat; } .global-site-notice p { margin-bottom: 0; } /* -------------------------------------------- * Promotional Message Banner */ .promo-msg { color: #206bbc; text-align: center; margin: 10px; text-transform: uppercase; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } /* -------------------------------------------- * Grid */ .grid:after { content: ''; display: table; clear: both; } /* -------------------------------------------- * Messages */ .success { color: #11B400; } .error { color: #DF280A; font-weight: bold; } .notice { color: #E26703; font-weight: bold; } /* -------------------------------------------- * Messages */ .messages { margin-bottom: 10px; } .messages li li { position: relative; margin-bottom: 5px; padding: 7px 10px 7px 20px; background: #F4F4F4; font-size: 15px; } .messages li li:before { top: 50%; left: 0; margin-top: -6px; } .messages .error-msg li { color: #000000; border-left: 5px solid #DF280A; background-color: #FAEBE7; } .messages .error-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #DF280A; border-right: none; } .messages .notice-msg li { color: #000000; border-left: 5px solid #E26703; background-color: #F9EBE6; } .messages .notice-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #E26703; border-right: none; } .messages .success-msg li { color: #000000; border-left: 5px solid #11B400; background-color: #EFF5EA; } .messages .success-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #11B400; border-right: none; } @media only screen and (min-width: 915px) { .order-list-grid .col-1 { width: 30%; } .order-list-grid .col-2 { width: 50%; padding-right: 20px; } .order-list-grid .col-3 { clear: none; width: 20%; padding-top: 0; } } /* -------------------------------------------- * Page Popup */ .page-popup { padding: 20px; background: #FFFFFF; height: auto; } .page-popup h1 { margin: 0 0 0.5em; font-size: 36px; } /* -------------------------------------------- * Payment Methods */ .payment-methods { margin-bottom: 20px; } .payment-methods dt { padding: 5px 0; } .payment-methods dd { padding-top: 10px; } .payment-methods .form-list { position: relative; display: inline-block; max-width: 100%; margin: 5px 15px 15px; padding: 15px; border: 1px solid #CCCCCC; background: #F4F4F4; } .payment-methods .form-list:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #CCCCCC; border-top: none; top: -11px; left: 30px; } .payment-methods .form-list:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #F4F4F4; border-top: none; top: -10px; left: 30px; } .payment-methods .form-list li:last-child { margin-bottom: 0; } /* -------------------------------------------- * Please Wait (Loading Indicator) */ .please-wait { display: inline-block; margin-left: 10px; margin-top: 5px; line-height: 24px; height: 24px; white-space: nowrap; /* Prevent the linebreak in the HTML from causing layout issues */ } .please-wait img { float: left; margin-right: 5px; width: 24px; } /* -------------------------------------------- * Price Box - Standard */ .price-box { margin: 7px 0; font-family: "Varela Round", Arial, Verdana, sans-serif; } .price-box p { margin-bottom: 0; } .price-notice { color: #A0A0A0; } .price-box .price { color: #206bbc; font-size: 16px; } .price-box .price, .price { font-family: "Varela Round", Arial, Verdana, sans-serif; } .price-box .price-label { color: #A0A0A0; white-space: nowrap; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .price-box .minimal-price-link { padding-left: 1em; color: #206bbc; display: block; /* We want this to show on its own line, otherwise the layout looks funky */ } .price-box .minimal-price-link .label { color: #A0A0A0; } /* -------------------------------------------- * Price Box - Special */ .price-box .old-price, .price-box .special-price { display: inline-block; } .price-box .old-price .price-label, .price-box .special-price .price-label { display: none; } .price-box .old-price .price, .price-box .special-price .price { display: inline-block; } .price-box .old-price .price { color: #A0A0A0; text-decoration: line-through; } .price-box .special-price { color: #206bbc; padding-left: 1em; } .price-box .special-price .price-label { color: #D84D3C; } /* -------------------------------------------- * Price Box - Taxes */ .price-box .price-excluding-tax, .price-box .price-including-tax { display: block; } span.weee { display: block; } /* -------------------------------------------- * Tier Prices */ .product-pricing, .tier-prices, .tier-prices-grouped { display: inline-block; padding: 4px 8px; background: #FBF4DE; border: 1px solid #E2D4C7; margin-top: 7px; } .product-pricing li, .tier-prices li, .tier-prices-grouped li { font-size: 12px; } .product-pricing .benefit, .tier-prices .benefit, .tier-prices-grouped .benefit { font-style: italic; } .product-pricing .price, .tier-prices .price, .tier-prices-grouped .price { font-weight: bold; } /* ============================================ * Item Options ============================================ */ .item-options { font-size: 14px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .item-options:after { content: ''; display: table; clear: both; } .item-options dt { float: left; clear: left; font-weight: 600; padding-right: 5px; font-style: italic; } .item-options dt:after { content: ': '; } .item-options dd { float: left; padding-left: 10px; margin: 0 0 6px; } .truncated, .truncated a.dots { cursor: help; } .truncated a.details { cursor: help; height: 16px; line-height: 16px; } .truncated a.details:hover { text-decoration: none; } .truncated .truncated_full_value { position: relative; z-index: 300; } .truncated .truncated_full_value .item-options { display: none; position: absolute; z-index: 300; width: 200px; padding: 8px; border: 1px solid #ea6a45; background-color: #F6F6F6; top: 21px; left: -100px; } .truncated .truncated_full_value .item-options:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ea6a45; border-top: none; left: 97px; top: -7px; } .truncated .truncated_full_value .item-options > p { font-weight: bold; text-transform: uppercase; margin-bottom: 8px; } .truncated .show .item-options { display: block; } @media only screen and (max-width: 479px) { .truncated { cursor: inherit; } .truncated a.details { display: none; } .truncated .truncated_full_value .item-options { display: block; position: static; z-index: 1; width: 100%; border: none; background-color: transparent; } .truncated .truncated_full_value .item-options p { float: none; } .truncated .truncated_full_value .item-options:after { display: none; } } /* -------------------------------------------- * Printer Friendly Page */ .page-print { width: 6.5in; margin: 20px; background: #FFFFFF; } /* -------------------------------------------- * Add to links */ .add-to-links { margin: 7px 0; } .add-to-links a { display: inline-block; padding: 0px 3px 3px; } .add-to-links .separator { display: none; } /* -------------------------------------------- * Product Image */ .product-image, .no-touch .product-img-box .product-image:not(.zoom-available):hover { position: relative; display: block; } @media only screen and (max-width: 770px) { body .product-img-box .product-image:hover { border-color: #EDEDED; } } .no-touch .product-image:hover { border-color: #206bbc; } /* -------------------------------------------- * Ratings */ .ratings { margin: 7px 0; } .ratings .rating-box, .ratings .rating-links { margin: 5px 0; } .ratings .rating-box { width: 65px; height: 13px; background-repeat: repeat-x; background-position: 0 -615px; overflow: hidden; } .ratings .rating-box .rating { float: left; height: 13px; background-repeat: repeat-x; background-position: 0 -600px; } .ratings .amount { display: block; margin: 5px auto; } .ratings .rating-links .separator { margin: 0 3px; } /* -------------------------------------------- * Standard Formatted Text Block */ .std p { margin: 0 0 1.5em; } .std ol { list-style: decimal outside; margin-bottom: 1.5em; } .std ol li { margin-left: 2em; } .std ul { list-style: disc outside; margin-bottom: 1.5em; } .std ul li { margin-left: 2em; } .std .note { color: #A0A0A0; font-size: 13px; } /* -------------------------------------------- * Tabs */ .tabs { margin-bottom: 10px; background: #FFFFFF; } /* -------------------------------------------- * Toolbar */ .toolbar { margin-top: 10px; margin-bottom: 15px; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; background: #F4F4F4; padding: 5px 10px 0px 10px; } .toolbar:after { content: ''; display: table; clear: both; } .pager-no-toolbar { margin-bottom: 10px; } .pager-no-toolbar ~ .pager-no-toolbar { margin-top: 10px; } .toolbar, .pager { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #636363; line-height: 30px; font-size: 12px; } .toolbar label, .pager-no-toolbar label { font-weight: normal; text-transform: uppercase; } .sorter { float: left; margin-bottom: 5px; } .sorter label { float: left; margin-right: 5px; } .sorter label:after { content: ':'; } .sorter > .sort-by { float: left; margin-right: 5px; height: 30px; } .sorter > .sort-by .sort-by-switcher { width: 30px; height: 30px; display: inline-block; } .sorter > .sort-by .sort-by-switcher--asc { background-position: 4px -542px; } .sorter > .sort-by .sort-by-switcher--asc:hover { background-position: -46px -542px; } .sorter > .sort-by .sort-by-switcher--desc { background-position: 4px -567px; } .sorter > .sort-by .sort-by-switcher--desc:hover { background-position: -46px -567px; } .sorter > .view-mode { float: right; } .sorter > .view-mode .grid, .sorter > .view-mode .list { float: left; width: 30px; height: 30px; } .sorter > .view-mode .grid { margin-right: 5px; background-position: 8px -492px; } .sorter > .view-mode strong.grid, .sorter > .view-mode a.grid:hover { background-position: -42px -492px; } .sorter > .view-mode .list { background-position: 11px -517px; } .sorter > .view-mode strong.list, .sorter > .view-mode a.list:hover { background-position: -39px -517px; } .pager { float: right; overflow: hidden; } .pager > .count-container { float: left; } .pager .amount { float: left; font-family: "Varela Round", Arial, Verdana, sans-serif; white-space: nowrap; margin: 0 15px 0 0; } .pager .limiter { float: left; height: 30px; line-height: 30px; } .pager .limiter > label { padding-right: 5px; } .pager .limiter > label:after { content: ':'; } .pager .amount, .pager .limiter, .pager .pages { margin-bottom: 5px; } .pages { float: right; overflow: hidden; margin-left: 15px; } .pages strong { display: none; } .pages li { float: left; } .pages a, .pages .current { display: inline-block; border: 0; font-size: 13px; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; line-height: 30px; width: 25px; height: 30px; padding: 0; color: #ea6a45; font-family: "Varela Round", Arial, Verdana, sans-serif; } .pages .current, .pages .current:hover { color: #636363; border: 1px solid #CCCCCC; width: 30px; background-color: #FFFFFF; cursor: default; } .pages .next, .pages .previous { font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; position: relative; } .pages .next:hover, .pages .previous:hover { border: 1px solid #ea6a45; } .pages .next:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #ea6a45; border-right: none; top: 50%; margin-top: -3px; left: 50%; margin-left: -2px; } .pages .next:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #cc3f17; border-right: none; } .pages .previous:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #ea6a45; border-left: none; top: 50%; margin-top: -3px; left: 50%; margin-left: -2px; } .pages .previous:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #cc3f17; border-left: none; } @media only screen and (max-width: 479px) { .pager .amount--has-pages { display: none; } .pages { float: left; } .limiter label { display: none; } } @media only screen and (max-width: 770px) { .col1-layout .sorter, .col1-layout .pager { width: 100%; } .col1-layout .pager { float: left; clear: both; } .col1-layout .pager .pages { float: left; margin-left: 0; } .col1-layout .pager .count-container { float: right; } } @media only screen and (max-width: 979px) { .col2-left-layout .sorter, .col2-left-layout .pager, .col2-right-layout .sorter, .col2-right-layout .pager, .col3-layout .sorter, .col3-layout .pager { width: 100%; } .col2-left-layout .pager, .col2-right-layout .pager, .col3-layout .pager { float: left; clear: both; } .col2-left-layout .pager .pages, .col2-right-layout .pager .pages, .col3-layout .pager .pages { float: left; margin-left: 0; } .col2-left-layout .pager .count-container, .col2-right-layout .pager .count-container, .col3-layout .pager .count-container { float: right; } } @media only screen and (max-width: 1279px) { .toolbar .view-mode > label { display: none; } } /* ============================================ * Tax - Full Tax Summary ============================================ */ #checkout-review-table .summary-collapse, #shopping-cart-totals-table .summary-collapse, body.customer-account .data-table .summary-collapse { position: relative; cursor: pointer; } #checkout-review-table .summary-collapse:before, #shopping-cart-totals-table .summary-collapse:before, body.customer-account .data-table .summary-collapse:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 7px solid #206bbc; border-bottom: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .summary-collapse:hover:before, #shopping-cart-totals-table .summary-collapse:hover:before, body.customer-account .data-table .summary-collapse:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 7px solid #cc3f17; border-bottom: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .show-details .summary-collapse:before, #shopping-cart-totals-table .show-details .summary-collapse:before, body.customer-account .data-table .show-details .summary-collapse:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #206bbc; border-top: none; position: static; display: inline-block; margin-right: 5px; } #checkout-review-table .show-details .summary-collapse:hover:before, #shopping-cart-totals-table .show-details .summary-collapse:hover:before, body.customer-account .data-table .show-details .summary-collapse:hover:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #cc3f17; border-top: none; position: static; display: inline-block; margin-right: 5px; } #shopping-cart-totals-table tfoot td .summary-collapse:before, #shopping-cart-totals-table tfoot td .summary-collapse:hover:before { margin-bottom: 5px; } /* ============================================ * Magento Helpers ============================================ */ .a-center { text-align: center; } .a-right, .align-right { text-align: right; } .no-display { display: none !important; } .nobr, .nowrap { white-space: nowrap; } .width-full { width: 100%; } /* ============================================ * Custom Helpers ============================================ */ .hidden { display: none; } /* ============================================ * Print Styles ============================================ */ .page-print .print-head { margin: 0 0 15px; } .page-print .print-head .logo { float: none; max-height: 50px; width: auto; } /* ============================================ * CUSTOM IP BLOCK * ============================================ */ .ip-block { width: 100%; float: left; } .ip-block.inline_block { text-align: center; } .ip-block.inline_block .sixth, .ip-block.inline_block .fifth, .ip-block.inline_block .quarter, .ip-block.inline_block .two-sixths, .ip-block.inline_block .third, .ip-block.inline_block .two-fifths, .ip-block.inline_block .three-sixths, .ip-block.inline_block .half, .ip-block.inline_block .three-fifths, .ip-block.inline_block .four-sixths, .ip-block.inline_block .two-third, .ip-block.inline_block .three-quarters, .ip-block.inline_block .four-fifths, .ip-block.inline_block .five-sixths, .ip-block.inline_block .item { float: none; display: inline-block; text-align: left; } .ip-block.left .sixth, .ip-block.left .fifth, .ip-block.left .quarter, .ip-block.left .two-sixths, .ip-block.left .third, .ip-block.left .two-fifths, .ip-block.left .three-sixths, .ip-block.left .half, .ip-block.left .three-fifths, .ip-block.left .four-sixths, .ip-block.left .two-third, .ip-block.left .three-quarters, .ip-block.left .four-fifths, .ip-block.left .five-sixths, .ip-block.left .item { float: left; } .ip-block.right .sixth, .ip-block.right .fifth, .ip-block.right .quarter, .ip-block.right .two-sixths, .ip-block.right .third, .ip-block.right .two-fifths, .ip-block.right .three-sixths, .ip-block.right .half, .ip-block.right .three-fifths, .ip-block.right .four-sixths, .ip-block.right .two-third, .ip-block.right .three-quarters, .ip-block.right .four-fifths, .ip-block.right .five-sixths, .ip-block.right .item { float: right; } .ip-block.row .sixth:first-child, .ip-block.row .fifth:first-child, .ip-block.row .quarter:first-child, .ip-block.row .two-sixths:first-child, .ip-block.row .third:first-child, .ip-block.row .two-fifths:first-child, .ip-block.row .three-sixths:first-child, .ip-block.row .half:first-child, .ip-block.row .three-fifths:first-child, .ip-block.row .four-sixths:first-child, .ip-block.row .two-third:first-child, .ip-block.row .three-quarters:first-child, .ip-block.row .four-fifths:first-child, .ip-block.row .five-sixths:first-child, .ip-block.row .item:first-child { margin: 0; } .ip-block .sixth.left, .ip-block .fifth.left, .ip-block .quarter.left, .ip-block .two-sixths.left, .ip-block .third.left, .ip-block .two-fifths.left, .ip-block .three-sixths.left, .ip-block .half.left, .ip-block .three-fifths.left, .ip-block .four-sixths.left, .ip-block .two-third.left, .ip-block .three-quarters.left, .ip-block .four-fifths.left, .ip-block .five-sixths.left, .ip-block .item.left { float: left; } .ip-block .sixth.right, .ip-block .fifth.right, .ip-block .quarter.right, .ip-block .two-sixths.right, .ip-block .third.right, .ip-block .two-fifths.right, .ip-block .three-sixths.right, .ip-block .half.right, .ip-block .three-fifths.right, .ip-block .four-sixths.right, .ip-block .two-third.right, .ip-block .three-quarters.right, .ip-block .four-fifths.right, .ip-block .five-sixths.right, .ip-block .item.right { float: right; } .ip-block .item { width: 100%; padding: 0 0 10px; } @media only screen and (min-width: 770px) { .ip-block .item { padding: 0 5px 10px; } } @media only screen and (min-width: 770px) { .ip-block .item.first { margin: 0 0 0 -5px; } } @media only screen and (min-width: 770px) { .ip-block .item.last { margin: 0 -5px 0 0; } } .ip-block.grid-1 .item { width: 100%; } @media only screen and (min-width: 770px) { .ip-block.grid-2 .item { width: 50%; } } @media only screen and (min-width: 770px) { .ip-block.grid-3 .item { width: 33%; } } @media only screen and (min-width: 770px) { .ip-block.grid-4 .item { width: 25%; } } @media only screen and (min-width: 770px) { .ip-block.grid-5 .item { width: 20%; } } @media only screen and (min-width: 770px) { .ip-block.grid-6 .item { width: 16.7959%; } } @media only screen and (min-width: 770px) { .ip-block.grid-7 .item { width: 14.28%; } } @media only screen and (min-width: 770px) { .ip-block.grid-8 .item { width: 12.5%; } } @media only screen and (min-width: 770px) { .ip-block.grid-9 .item { width: 11.11%; } } @media only screen and (min-width: 770px) { .ip-block.grid-10 .item { width: 10%; } } .ip-block .sixth { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .sixth { width: 16%; } } .ip-block .fifth { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .fifth { width: 20%; } } .ip-block .quarter { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .quarter { width: 25%; } } .ip-block .two-sixths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .two-sixths { width: 32%; } } .ip-block .third { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .third { width: 33%; } } .ip-block .two-fifths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .two-fifths { width: 40%; } } .ip-block .three-sixths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .three-sixths { width: 48%; } } .ip-block .half { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .half { width: 50%; } } .ip-block .three-fifths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .three-fifths { width: 60%; } } .ip-block .four-sixths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .four-sixths { width: 64%; } } .ip-block .two-thirds { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .two-thirds { width: 67%; } } .ip-block .three-quarters { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .three-quarters { width: 75%; } } .ip-block .four-fifths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .four-fifths { width: 80%; } } .ip-block .five-sixths { width: 100%; } @media only screen and (min-width: 770px) { .ip-block .five-sixths { width: 80%; } } /* ============================================ * FORMS - COMMON ============================================ */ /* -------------------------------------------- * Fieldsets */ .fieldset p { margin-bottom: 7px; } .fieldset p.required { margin-bottom: 5px; float: right; font-size: 12px; margin-top: 0px; } .fieldset + .fieldset { margin-top: 5px; } form .legend { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; margin-bottom: 15px; padding-bottom: 7px; border-bottom: 1px solid #EDEDED; } /* -------------------------------------------- * Input Box */ .input-box { padding-top: 2px; } .input-box:after { content: ''; display: table; clear: both; } li.centinel-logos div.input-box img { display: inline; vertical-align: middle; } /* For adjacent select inputs. */ /* Example: credit card expiration month and year. */ .input-box .v-fix { float: left; margin-right: 5px; max-width: 100%; } /* -------------------------------------------- * Labels */ label { display: inline-block; font-size: 13px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-weight: 600; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } label.required:after, span.required:after { content: ' *'; color: #DF280A; font-weight: normal; font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 12px; } label.required em, span.required em { display: none; } /* -------------------------------------------- * Hints */ .input-hint { color: #A0A0A0; font-size: 12px; } /* -------------------------------------------- * Select */ select { font-size: 14px; } select + select { margin-left: 5px; } select[multiple] { width: 270px; border: 1px solid #C0C0C0; font-size: 15px; padding: 5px; } /* -------------------------------------------- * Textarea */ textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 450px; padding: 5px; } /* -------------------------------------------- * Inputs */ .input-text { -moz-appearance: none; -webkit-appearance: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #C0C0C0; background: #FFFFFF; font-size: 15px; } .input-text:focus { border: 1px solid #ea6a45; } .input-text.validation-failed { border-color: #DF280A; } .input-text.validation-failed:focus { outline-color: #ef9485; } input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text] { height: 30px; padding: 0 8px; } input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text] { width: 365px; max-width: 100%; } /* Only show on iPhones (not iPads or any other device) */ @media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 0) { input[type=email], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=text], select { font-size: 16px; /* Prevent from zooming on focus */ } } .ie8 .input-text { max-width: none; } /* -------------------------------------------- * Inputs - Quantity */ input[type=number].qty, input[type=text].qty { width: 3em; text-align: center; vertical-align: middle; } /* -------------------------------------------- * Placeholder */ ::-webkit-input-placeholder { color: #A0A0A0; } input:-moz-placeholder { color: #A0A0A0; } /* -------------------------------------------- * Checkbox And Radio */ .checkbox, .radio { position: relative; top: -1px; display: inline-block; } .checkbox + label, .radio + label { width: auto; max-width: 85%; padding: 0 0 0 8px; font-size: 14px; font-weight: normal; vertical-align: top; } /* -------------------------------------------- * Validation */ p.required, .validation-advice { margin: 5px 0 0; color: #DF280A; font-size: 13px; } /* ============================================ * Form List ============================================ */ .form-list > li { margin-bottom: 10px; } .form-list select { margin-top: 4px; width: 365px; max-width: 100%; } .form-list .input-range .input-text { width: 74px; } .form-list .field, .form-list .wide, .form-list .control { margin-bottom: 10px; } /* Turn the label of controls (radio/checkbox) into a button style that wraps the input */ .form-list .control, .sp-methods dt, #checkout-shipping-method-load .sp-methods dd, #co-shipping-method-form .sp-methods dd, .product-options ul.options-list { /* When a label is next to an input that is set to not display, we should style the label in a non-clickable state */ } .form-list .control div.input-box, .sp-methods dt div.input-box, #checkout-shipping-method-load .sp-methods dd div.input-box, #co-shipping-method-form .sp-methods dd div.input-box, .product-options ul.options-list div.input-box { display: inline; float: left; } .form-list .control div.input-box:after, .sp-methods dt div.input-box:after, #checkout-shipping-method-load .sp-methods dd div.input-box:after, #co-shipping-method-form .sp-methods dd div.input-box:after, .product-options ul.options-list div.input-box:after { display: none; } .form-list .control input.radio, .form-list .control input.checkbox, .sp-methods dt input.radio, .sp-methods dt input.checkbox, #checkout-shipping-method-load .sp-methods dd input.radio, #checkout-shipping-method-load .sp-methods dd input.checkbox, #co-shipping-method-form .sp-methods dd input.radio, #co-shipping-method-form .sp-methods dd input.checkbox, .product-options ul.options-list input.radio, .product-options ul.options-list input.checkbox { float: left; margin-right: -40px; margin-top: 10px; margin-left: 15px; } .form-list .control label, .sp-methods dt label, #checkout-shipping-method-load .sp-methods dd label, #co-shipping-method-form .sp-methods dd label, .product-options ul.options-list label { color: #636363; background-color: #F4F4F4; padding: 5px 10px; display: inline-block; width: auto; max-width: none; min-width: 250px; float: none; padding: 6px 10px 6px 40px; } .form-list .control label:hover, .sp-methods dt label:hover, #checkout-shipping-method-load .sp-methods dd label:hover, #co-shipping-method-form .sp-methods dd label:hover, .product-options ul.options-list label:hover { background-color: #ededed; } .form-list .control .no-display + label, .sp-methods dt .no-display + label, #checkout-shipping-method-load .sp-methods dd .no-display + label, #co-shipping-method-form .sp-methods dd .no-display + label, .product-options ul.options-list .no-display + label { padding-left: 10px; background-color: transparent; } .form-list .control .no-display + label:hover, .sp-methods dt .no-display + label:hover, #checkout-shipping-method-load .sp-methods dd .no-display + label:hover, #co-shipping-method-form .sp-methods dd .no-display + label:hover, .product-options ul.options-list .no-display + label:hover { background-color: transparent; } .product-options ul.options-list label, .col2-set .form-list .control label { min-width: inherit; width: 250px; max-width: 100%; } .form-list .control.remember-me-box label { width: auto; max-width: none; min-width: inherit; } .form-list .control { margin-top: 10px; } .form-list .control label { float: none; } .form-list .control .radio, .form-list .control .checkbox { margin-right: 6px; } .form-list .control .input-box { clear: none; display: inline-block; width: auto; padding: 0; } form .form-instructions { font-style: italic; font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 13px; color: #A0A0A0; } /* ============================================ * Table Helpers ============================================ */ .hide-th { text-indent: -9999px; } /* ============================================ * Data Table ============================================ */ .data-table { width: 100%; } .data-table td, .data-table th { padding: 10px; vertical-align: top; } .data-table th { background: #F4F4F4; text-transform: uppercase; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; line-height: 1.4; white-space: nowrap; } .data-table thead th, .data-table tbody td { border-bottom: 1px solid #C0C0C0; } .data-table tbody td, .data-table tfoot td { font-family: "Varela Round", Arial, Verdana, sans-serif; } .data-table tfoot tr { background: #F4F4F4; } .data-table tbody td .item-options { margin-left: 20px; margin-top: 10px; } .data-table tbody td .item-options dt:after { content: ':'; } /* ============================================ * Generic Info Table ============================================ */ .info-box { border: 1px solid #C0C0C0; padding: 12px 15px; margin: 0 0 15px; } .info-box h2 { font-weight: bold; font-size: 13px; } .info-table th, .info-table td { vertical-align: top; } .info-table th { font-weight: bold; padding: 4px 20px 4px 0; } .info-table td { padding: 4px 0; } /* ============================================ * Zebra-Stripe Table ============================================ */ .zebra-table tr:first-child, .zebra-table th:first-child { border-top: 1px solid #C0C0C0; } .zebra-table td, .zebra-table th { border-bottom: 1px solid #C0C0C0; padding: 6px; background-color: transparent; } .zebra-table tr { background-color: #EEEDED; } .zebra-table tr:nth-child(odd) { background-color: #F8F7F5; } /* ============================================ * Linearize Table ============================================ */ @media only screen and (max-width: 479px) { .linearize-table { /* Helpers */ } .linearize-table tr, .linearize-table th, .linearize-table td { display: block; } .linearize-table thead th { border-right: 0; border-left: 0; } .linearize-table thead th.lin-hide { display: none; } .linearize-table thead th:nth-child(1n+2) { display: none; } .linearize-table tbody tr { position: relative; border-bottom: 1px solid #CCCCCC; } .linearize-table tbody td { padding: 0 10px 4px; border-right: 0; border-bottom: 0; } .linearize-table tbody td.lin-hide { display: none; } .linearize-table tbody td:first-child { padding-top: 10px; } .linearize-table tbody td:first-child, .linearize-table tbody td:first-child h3 { font-weight: bold; } .linearize-table tbody td[data-rwd-label] { text-align: left; padding-left: 30px; } .linearize-table tbody td[data-rwd-label]:before { content: attr(data-rwd-label) ":"; font-size: 12px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; padding-right: 5px; text-transform: uppercase; } .linearize-table tfoot tr { display: block; text-align: right; } .linearize-table tfoot tr:after { content: ''; display: table; clear: both; } .linearize-table tfoot td { display: block; float: left; } .linearize-table tfoot td.lin-hide { display: none; } .linearize-table tfoot td:nth-child(odd) { clear: left; width: 60%; } .linearize-table tfoot td:nth-child(even) { text-align: left; width: 40%; } .linearize-table .linearize-hide { display: none; } .linearize-table .linearize-unpad { padding: 0; } .linearize-table .linearize-show { display: block; } } @media only screen and (max-width: 599px) { .linearize-table-large { /* Helpers */ } .linearize-table-large tr, .linearize-table-large th, .linearize-table-large td { display: block; } .linearize-table-large thead th { border-right: 0; border-left: 0; } .linearize-table-large thead th.lin-hide { display: none; } .linearize-table-large thead th:nth-child(1n+2) { display: none; } .linearize-table-large tbody tr { position: relative; border-bottom: 1px solid #CCCCCC; } .linearize-table-large tbody td { padding: 0 10px 4px; border-right: 0; border-bottom: 0; } .linearize-table-large tbody td.lin-hide { display: none; } .linearize-table-large tbody td:first-child { padding-top: 10px; } .linearize-table-large tbody td:first-child, .linearize-table-large tbody td:first-child h3 { font-weight: bold; } .linearize-table-large tbody td[data-rwd-label] { text-align: left; padding-left: 30px; } .linearize-table-large tbody td[data-rwd-label]:before { content: attr(data-rwd-label) ":"; font-size: 12px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; padding-right: 5px; text-transform: uppercase; } .linearize-table-large tfoot tr { display: block; text-align: right; } .linearize-table-large tfoot tr:after { content: ''; display: table; clear: both; } .linearize-table-large tfoot td { display: block; float: left; } .linearize-table-large tfoot td.lin-hide { display: none; } .linearize-table-large tfoot td:nth-child(odd) { clear: left; width: 60%; } .linearize-table-large tfoot td:nth-child(even) { text-align: left; width: 40%; } .linearize-table-large .linearize-hide { display: none; } .linearize-table-large .linearize-unpad { padding: 0; } .linearize-table-large .linearize-show { display: block; } } @media only screen and (min-width: 600px) { .linearize-table .linearize-collapse { display: none; } } /* ============================================ * Global ============================================ */ html, body { height: 100%; } .wrapper { min-width: 320px; min-height: 100%; margin: 0 auto; background: #FFFFFF; } .wrapper:after { content: ''; display: table; clear: both; } /* =========================================================================== * Header ========================================================================== */ .page-header-container { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 15px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } @media only screen and (min-width: 480px) { .page-header-container { padding: 0 30px; } } .page-header { position: fixed; top: 0; z-index: 9000; width: 100%; background: rgba(255, 255, 255, 0.85); padding: 15px 0 10px; } .page-header .logo { display: block; margin: 0 auto 15px; /* @include if-min-resolution(2) { background: url(../images/logo@2x.png); background-size: 169px 42px; img { display: none; } } */ } .page-header .logo img { width: 100%; height: auto; max-width: 260px; margin: 0 auto; } .page-header .main-nav { float: left; } .page-header .header-tools { float: right; } .page-header a.toggle-button { float: left; position: relative; width: 30px; height: 30px; text-indent: -9999px; } .page-header a.toggle-button:before { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; } .page-header .header-search { position: relative; float: left; margin: 0 15px 0 0; } .page-header .header-search a.toggle-button:before { background-position: 5px -144px; } .page-header .header-search a.toggle-button:hover:before, .page-header .header-search a.toggle-button:active:before, .page-header .header-search a.toggle-button.skip-active:before { background-position: -45px -144px; } .page-header .header-user { float: left; margin: 0 15px 0 0; } .page-header .header-user a.toggle-button:before { background-position: 6px -43px; } .page-header .header-user a.toggle-button:hover:before, .page-header .header-user a.toggle-button:active:before, .page-header .header-user a.toggle-button.skip-active:before { background-position: -44px -43px; } .page-header .header-minicart { position: relative; float: left; font-family: "Varela Round", Arial, Verdana, sans-serif; } @media only screen and (min-width: 600px) { .page-header { height: 68px; padding: 0; } .page-header .logo { float: left; margin: 7px auto 0; } .page-header .header-link-items { float: right; margin: 12px 0 0; } .page-header .main-nav { margin: 7px 30px 0 0; } .page-header .header-search { margin: 7px 30px 0 0; } .page-header .header-user { margin: 7px 30px 0 0; } } @media only screen and (min-width: 1080px) { .page-header .logo { margin-right: 40px; } .page-header .main-nav { margin: 14px 0 0; } .page-header .header-link-items { margin: 0; float: none; } .page-header .header-search { margin: 22px 20px 0 0; } .page-header .header-user { margin: 22px 20px 0 0; } .page-header .header-minicart { margin: 12px 0 0; } } @media only screen and (min-width: 1299px) { .page-header .header-search .toggle-button { display: none; } } @media only screen and (min-width: 1440px) { .page-header .logo { margin-right: 60px; } .page-header .header-search { margin-right: 35px; } .page-header .header-user { margin-right: 35px; } } /* =========================================================================== * Main Navigation ========================================================================== */ /* remember to change in app.js */ .main-nav-container { max-width: 1320px; margin: 0 auto; padding: 0 15px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } @media only screen and (min-width: 480px) { .main-nav-container { padding: 0 30px; } } .main-nav-container:after { content: ''; display: table; clear: both; } /* === DESKTOP DESIGN ======================================================= */ @media only screen and (min-width: 1080px) { #nav { /* first level */ /* first level hover styles */ /* dropdowns */ /* dropdown parents */ /* dropdown hover styles */ } #nav > li { float: left; margin: 0 18px 0 0; } #nav > li:last-child { margin-right: 0; } #nav > li > a { height: 54px; padding: 0 34px; font: 17px "Varela Round", Arial, Verdana, sans-serif; line-height: 51px; color: #19334f; text-decoration: none; text-transform: uppercase; border-bottom: 3px transparent solid; } #nav > li > a:hover, #nav > li > a:active, #nav > li.menu-active > a, #nav > li.active > a { background: #ea6a45; color: #FFFFFF; font-weight: bold; border-color: #ea6a45; } #nav ul { left: 0; top: 51px; width: 200px; padding: 3px 8px; background: #fff; border: 3px #206bbc solid; } #nav ul li { border-top: 2px #e6e6e6 solid; } #nav ul li:first-child { border-top: none; } #nav ul li a { padding: 8px 7px; font: 18px/1 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; color: #000; text-decoration: none; } #nav ul ul { top: 0; left: 200px; } #nav ul li.parent > a { padding-right: 17px; } #nav ul li.parent > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000; border-right: none; top: 50%; right: 10px; margin-top: -3px; } #nav ul li a:hover, #nav ul li a:active, #nav ul li.menu-active > a { color: #ea6a45; } } /* === MOBILE DESIGN ======================================================== */ #nav-toggle { display: none; position: relative; height: 30px; padding: 0 0 0 27px; font: 18px/30px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #19334f; text-transform: uppercase; text-decoration: none; } #nav-toggle:before { content: ''; position: absolute; top: 50%; left: 0; width: 19px; height: 19px; margin-top: -10px; background-position: 0 0; } #nav-toggle:hover, #nav-toggle:active { color: #ea6a45; } #nav-toggle:hover:before, #nav-toggle:active:before { background-position: -50px 0; } @media only screen and (max-width: 1079px) { #nav-toggle { display: block; } #nav { left: 0; top: 10px; width: 200px; padding: 3px 8px; background-color: #fff; border: 3px #ea6a45 solid; /* all levels */ /* parent items */ /* hover */ /* expanded highlight */ } #nav li { border-top: 2px #e6e6e6 solid; } #nav li:first-child { border-top: none; } #nav li a { padding: 8px 7px; font: 18px/1 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; color: #000; text-decoration: none; } #nav ul { padding: 0 8px; background: #f5f5f5; border-top: 2px #e6e6e6 solid; } #nav li.parent > a { position: relative; padding-right: 20px; } #nav li.parent > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #000; border-bottom: none; top: 50%; right: 5px; margin-top: -3px; } #nav li a:hover, #nav li a:active { color: #ea6a45; } #nav li.parent.menu-active > a { color: #ea6a45; } #nav li.parent.menu-active > a:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid #ea6a45; border-top: none; } } @media only screen and (max-width: 599px) { #nav { top: 5px; } } /* === INCLUDE FUNCTIONAL STYLES ============================================ */ /* ============================================================================= RESPONSIVE MENU W/ VERTICAL EXPANSION ON MOBILE VIEW ============================================================================= */ /* === DESKTOP ============================================================== */ @media only screen and (min-width: 1080px) { #nav-toggle { display: none; } #nav li { position: relative; } #nav li a { display: block; } #nav ul { display: none; position: absolute; z-index: 9000; } #nav li.menu-active > ul { display: block; } } /* === MOBILE =============================================================== */ @media only screen and (max-width: 1079px) { .main-nav-wrapper { position: relative; } #nav { position: absolute; z-index: 9000; display: none; } #nav.expanded { display: block; } #nav li a { display: block; } #nav ul { display: none; } #nav li.menu-active > ul { display: block; } } /* ============================================ * Search - Skip Link ============================================ */ .skip-search:not(.skip-active):hover .icon { background-position: -46px -146px; } .skip-search .icon { background-position: 4px -146px; } @media only screen and (min-width: 771px) { .skip-search { display: none; } } /* ============================================ * Search - Skip Content ============================================ */ #header-search { display: none; position: absolute; top: 35px; right: -90px; height: 48px; width: 277px; padding: 9px; background: #fff; border: 1px #8f8f8f solid; } #header-search.skip-active { display: block; } @media only screen and (min-width: 600px) { #header-search { top: 40px; } } @media only screen and (min-width: 1299px) { #header-search { display: block; position: static; width: 257px; height: 28px; padding: 0; background: none; border: none; } } /* ============================================ * Search Input ============================================ */ #search_mini_form .input-box { position: relative; padding-top: 0; } #search_mini_form label { display: none; } #search { width: 100%; height: 28px; padding-right: 28px; font-size: 14px; color: #000; background: #FFFFFF; border: 1px solid #000000; border-radius: 0; } #search::-webkit-input-placeholder, #search::-moz-placeholder, #search:-ms-input-placeholder { color: #333333; } #search_mini_form .search-button { text-indent: -9999px; position: absolute; top: 0; right: 0; width: 28px; height: 28px; border: 0; background: none; } #search_mini_form .search-button:before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin-top: -14px; margin-left: -14px; background-position: 4px -146px; } #search_mini_form .search-button:hover:before { opacity: 0.8; } #search_mini_form .search-button:active:before { margin-top: -13px; margin-left: -13px; } /* ============================================ * Header - Account ============================================ */ /* -------------------------------------------- * Skip Link - Account */ .skip-account:not(.skip-active):hover .icon { background-position: -46px -44px; } .skip-account .icon { background-position: 4px -44px; } @media only screen and (min-width: 771px) { .skip-account { float: none; width: auto; vertical-align: top; display: inline-block; padding: 0 10px; text-transform: uppercase; } #header-account.skip-active { background: #FBFBFB; border: solid 1px #CCCCCC; display: block; position: absolute; z-index: 200; top: 40px; right: 115px; width: 200px; } #header-account a { display: block; padding: 5px 10px; color: #636363; line-height: 2; } #header-account a:hover { color: #ea6a45; } } /* -------------------------------------------- * Account Links */ #header-account { padding: 5px 0; } #header-account a { position: relative; display: block; padding: 5px 10px; line-height: 23px; text-align: center; } #header-account a:hover { color: #ea6a45; } /* ============================================ * Header - Cart ============================================ */ #header-cart { display: none; } #header-cart.skip-active { background: #FBFBFB; border: solid 1px #CCCCCC; display: block; position: absolute; z-index: 200; top: 35px; right: 0; width: 300px; background: #FFFFFF; } @media only screen and (min-width: 600px) { #header-cart.skip-active { top: 47px; } } .skip-cart { position: relative; display: block; width: 30px; height: 30px; background: #ea6a45; border-radius: 3px; text-indent: -9999px; } .skip-cart:before { content: ''; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -11px; width: 22px; height: 14px; background-position: -50px -100px; } .skip-cart:hover, .skip-cart:active { background-color: #de6542; } @media only screen and (min-width: 600px) { .skip-cart { width: 45px; height: 45px; } .skip-cart:before { width: 33px; height: 21px; margin-top: -11px; margin-left: -17px; background-position: 0 -100px; } } /* -------------------------------------------- * Mini Cart - Empty */ .cart-menu .empty { padding: 20px; text-align: center; } /* -------------------------------------------- * Mini Cart - Full */ /* Actions */ .cart-menu .actions { overflow: hidden; padding: 15px; } .cart-menu .actions .button { float: left; width: 48%; } .cart-menu .actions .button + .button { margin-left: 4%; } /* Subtotal */ .cart-menu .subtotal { padding: 0 15px 15px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 24px; line-height: 1.2; } /* List */ .mini-cart-list { margin-bottom: 5px; } .mini-cart-list li { position: relative; min-height: 90px; padding: 15px 15px 15px 90px; border-top: 1px solid #CCCCCC; font-size: 13px; line-height: 1.35; } .mini-cart-list .product-name { display: inline-block; } .mini-cart-list .product-image { position: absolute; left: 15px; top: 15px; } .mini-cart-list .product-image img { width: 60px; height: 60px; } .mini-cart-list .has-options { margin-bottom: 0; color: #A0A0A0; font-size: 12px; } /* Too full - additional items will be shown in cart */ .cart-menu .last-added { padding: 10px 15px 15px; border-top: 1px solid #CCCCCC; font-size: 13px; } /* =========================================================================== * Footer ========================================================================== */ .footer-container { position: relative; max-width: 1320px; margin: 0 auto; padding: 15px; } @media only screen and (min-width: 771px) { .footer-container { padding: 30px; } } .footer-container:after { content: ''; display: table; clear: both; } .footer-top { background: #ea6a45; } .footer-top .footer-container { padding-top: 15px; padding-bottom: 15px; } .footer-top .block-subscribe { margin: 0 0 18px; } .footer-top .block-subscribe:after { content: ''; display: table; clear: both; } .footer-top .block-subscribe .block-title { margin: 0; } .footer-top .block-subscribe .block-title strong { font: bold 18px/30px "Varela Round", Arial, Verdana, sans-serif; color: #fff; text-transform: none; } .footer-top .block-subscribe .block-content { margin: 0; } .footer-top .block-subscribe .form-subscribe-header { margin: 0 0 2px; font: 14px/1.4 "Varela Round", Arial, Verdana, sans-serif; color: #fff; } .footer-top .block-subscribe form { max-width: 290px; padding: 0 107px 0 0; } .footer-top .block-subscribe .input-box { float: left; width: 100%; padding: 0; border: none; } .footer-top .block-subscribe input.input-text { width: 100%; height: 30px; font-size: 14px; border: none; border-radius: 0; } .footer-top .block-subscribe .actions { float: right; margin: 0 -107px 0 0; } .footer-top .block-subscribe .actions button.button { height: 30px; width: 104px; padding: 0; font: bold 13px/30px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; background: #0e0e0e; border-radius: 4px; } .footer-top .block-subscribe .actions button.button span span { display: inline-block; padding: 0 15px 0 0; background: url(../images/button-arrow.png) no-repeat 100% 11px; } .footer-top .block-social { margin: 0; } .footer-top .block-social .block-title { margin: 0 0 12px; padding: 0; border: none; } .footer-top .block-social .block-title strong { font: bold 16px/1.4 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #fff; text-transform: none; } .footer-top .block-social .block-content { margin: 0; } .footer-top .block-social .block-content li { float: left; margin: 0 12px 0 0; } .footer-top .block-social .block-content li:last-child { margin-right: 0; } .footer-top .block-social .block-content li a { display: block; height: 19px; text-indent: -9999px; background: url(../images/social_icons.png) no-repeat 0 0; overflow: hidden; } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .footer-top .block-social .block-content li a { background-image: url(../images/social_icons@2x.png); background-size: 54px 114px; } } .footer-top .block-social .block-content li.facebook a { background-position: 0 -0px; width: 12px; } .footer-top .block-social .block-content li.facebook a:hover, .footer-top .block-social .block-content li.facebook a:active { background-position: -27px -0px; } .footer-top .block-social .block-content li.twitter a { background-position: 0 -19px; width: 27px; } .footer-top .block-social .block-content li.twitter a:hover, .footer-top .block-social .block-content li.twitter a:active { background-position: -27px -19px; } .footer-top .block-social .block-content li.pinterest a { background-position: 0 -38px; width: 19px; } .footer-top .block-social .block-content li.pinterest a:hover, .footer-top .block-social .block-content li.pinterest a:active { background-position: -27px -38px; } .footer-top .block-social .block-content li.googleplus a { background-position: 0 -57px; width: 19px; } .footer-top .block-social .block-content li.googleplus a:hover, .footer-top .block-social .block-content li.googleplus a:active { background-position: -27px -57px; } .footer-top .block-social .block-content li.youtube a { background-position: 0 -76px; width: 19px; } .footer-top .block-social .block-content li.youtube a:hover, .footer-top .block-social .block-content li.youtube a:active { background-position: -27px -76px; } .footer-top .block-social .block-content li.instagram a { background-position: 0 -95px; width: 19px; } .footer-top .block-social .block-content li.instagram a:hover, .footer-top .block-social .block-content li.instagram a:active { background-position: -27px -95px; } @media only screen and (min-width: 540px) { .footer-top .block-subscribe { margin: 0; float: left; } .footer-top .block-social { float: right; } } @media only screen and (min-width: 800px) { .footer-top .block-subscribe { width: 520px; } .footer-top .block-subscribe .block-title { float: left; margin: 0 0 10px; padding: 0 17px 0 0; border-right: 2px #fbb689 solid; } .footer-top .block-subscribe .form-subscribe-header { float: left; margin: 5px 0 0 17px; } .footer-top .block-subscribe form { clear: left; } .footer-top .block-social .block-title { padding: 2px 0 0; } } @media only screen and (min-width: 910px) { .footer-top .block-social .block-title { float: left; margin: 0 40px 0 0; } .footer-top .block-social .block-content { float: left; margin: 4px 0 0; } } @media only screen and (min-width: 1180px) { .footer-top .block-subscribe { width: auto; } .footer-top .block-subscribe .block-title { margin: 0; } .footer-top .block-subscribe .block-content { float: left; } .footer-top .block-subscribe form { clear: none; float: left; margin: 0 0 0 15px; } } .footer-middle { background: #FFFFFF; } .footer-middle .block-footer-nav { margin: 0 0 24px; } .footer-middle .block-footer-nav .block-title { padding: 0 0 4px; margin: 0; border-top: none; border-bottom: 1px #555555 solid; } .footer-middle .block-footer-nav .block-title strong { font: 600 20px/1.4 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #19334f; } .footer-middle .block-footer-nav .block-content { margin: 3px 0 0; } .footer-middle .block-footer-nav .block-content li { padding: 4px 0 3px; font-size: 14px; } .footer-middle .block-footer-nav .block-content li a { color: #565656; } .footer-middle .block-guarantee { margin: 0; padding: 3px; background: #fff0e6 url(../images/satisfaction-guarantee.png) no-repeat 11px 11px; background-size: 67px 67px; } .footer-middle .block-guarantee .block-title { margin: 0; padding: 0; min-height: 85px; padding: 15px 15px 15px 88px; border: 1px #fbb689 solid; border-bottom: none; } .footer-middle .block-guarantee .block-title strong { font: bold 22px/1.3 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #19334f; } .footer-middle .block-guarantee .block-content { margin: 0; padding: 0 15px 15px; border: 1px #fbb689 solid; border-top: none; } .footer-middle .block-guarantee .block-content p { line-height: 1.3; color: #565656; } .footer-middle .block-guarantee .block-content p + p { margin: 8px 0 0; } .footer-middle .block-guarantee .block-content a.button { font: bold 13px/13px "Varela Round", Arial, Verdana, sans-serif; padding: 10px 25px; color: #FFFFFF; background: #0e0e0e; border-radius: 4px; } .footer-middle .block-guarantee .block-content a.button span { display: inline-block; } .footer-middle .block-guarantee .block-content a.button:active, .footer-middle .block-guarantee .block-content a.button:hover, .footer-middle .block-guarantee .block-content a.button:focus { background: #ea6a45; } @media only screen and (min-width: 501px) { .footer-middle .block-footer-nav { float: left; width: 32%; margin: 0 2% 24px 0; } .footer-middle .block-footer-nav.last { margin-right: 0; } .footer-middle .block-guarantee { clear: left; margin: 0 auto; max-width: 480px; background-position: 19px 45px; background-size: 134px 134px; } .footer-middle .block-guarantee .block-title { min-height: 0; padding: 35px 15px 10px 165px; } .footer-middle .block-guarantee .block-content { padding: 0 15px 35px 165px; } } @media only screen and (min-width: 771px) { .footer-middle .block-footer-nav { margin-bottom: 30px; } .footer-middle .block-footer-nav .block-title { padding: 0 0 9px; } .footer-middle .block-footer-nav .block-content { margin: 16px 0 0; } .footer-middle .block-footer-nav .block-content li { padding: 6px 0 5px; } } @media only screen and (min-width: 980px) { .footer-middle .block-footer-nav { width: 14.67%; margin-right: 3%; } .footer-middle .block-guarantee { float: right; clear: none; width: 48.5%; max-width: none; } } @media only screen and (min-width: 1200px) { .footer-middle .block-footer-nav { width: 15%; margin-right: 5%; } .footer-middle .block-guarantee { width: 40%; } } .footer-bottom { color: #707070; text-align: center; background: #f0f0f0; } .footer-bottom .footer-container { padding-top: 10px; padding-bottom: 10px; } .footer-bottom .block-phone { display: inline-block; margin: 0 0 16px; padding: 0 0 0 43px; font: 20px/1 "Varela Round", Arial, Verdana, sans-serif; color: #8d8e90; background: url(../images/footer-contact.png) no-repeat 0 0; } .footer-bottom .block-phone strong { font-weight: normal; color: #0e0e0e; } .footer-bottom .block-phone span { color: #707070; font-size: 10px; } .footer-bottom .block-badges { margin: 0 0 8px; } .footer-bottom .block-badges img { display: inline-block; vertical-align: middle; margin: 0 6px 6px; } .footer-bottom .copyright { font-size: 11px; } @media only screen and (min-width: 480px) { .footer-bottom .block-phone span { font-size: 11px; } } @media only screen and (min-width: 900px) { .footer-bottom { text-align: left; } .footer-bottom .block-phone { float: left; padding-top: 6px; background-position: 0 6px; } .footer-bottom .block-badges { float: right; } .footer-bottom .block-badges img { margin: 0 12px 0 0; } .footer-bottom .block-badges .credit-card-secure { display: inline-block; vertical-align: middle; } .footer-bottom .block-badges .credit-card-secure img { display: block; margin: 0 auto; } .footer-bottom .block-badges .credit-card-secure img + img { margin-top: 7px; } .footer-bottom .copyright { clear: both; text-align: center; } } @media only screen and (min-width: 1180px) { .footer-bottom .block-phone, .footer-bottom .block-badges { margin: 0; } .footer-bottom .copyright { clear: none; padding: 17px 0 0; } } /* =========================================================================== * Popups ========================================================================== */ .info-popup-wrapper { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; } .info-popup-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: rgba(255, 255, 255, 0.5); } .info-popup { position: absolute; top: 100px; left: 50%; margin: 0 0 0 -230px; z-index: 2; width: 460px; padding: 4px; background: #fff; } .info-popup-content { padding: 65px 40px; font: 16px/1.5 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-align: center; border: 1px #ea6a45 solid; } .info-popup-content .info-popup-title { margin: 0 0 16px; font: bold 50px/1 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; } .info-popup-content p { margin: 0 0 16px; } .info-popup-content a.button { padding: 12px 50px; } @media only screen and (max-width: 479px) { .info-popup { width: 300px; margin: 0 0 0 -150px; top: 20px; } .info-popup-content { padding: 30px 25px; font-size: 14px; } .info-popup-content .info-popup-title { font-size: 24px; } } /* ================================================= * General Product List Styles (not module-specific) ================================================= */ /* -------------------------------------------- * Product List General */ .category-title h1, body.catalogsearch-result-index .page-title h1 { border-bottom: none; } .products-list .action .button, .products-grid .actions .button { white-space: normal; } /* -------------------------------------------- * Product Name */ h2.product-name, h3.product-name, h4.product-name, h5.product-name, p.product-name { margin: 0; margin-bottom: 0.5em; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 24px; font-weight: 400; font-style: normal; line-height: 1.2; text-rendering: optimizeLegibility; text-transform: uppercase; font-size: 13px; font-family: "Varela Round", Arial, Verdana, sans-serif; font-weight: normal; line-height: 1.4; } h2.product-name a, h3.product-name a, h4.product-name a, h5.product-name a, p.product-name a { color: #636363; } h2.product-name a:hover, h3.product-name a:hover, h4.product-name a:hover, h5.product-name a:hover, p.product-name a:hover { color: #ea6a45; text-decoration: none; } .products-grid .product-name, .products-list .product-name { margin-bottom: 5px; font: 17px/1.2 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: none; } /* ============================================ * Product Grid ============================================ */ .products-grid { position: relative; } .products-grid:after { content: ''; display: table; clear: both; } .products-grid > li { position: relative; margin-bottom: 20px; } .products-grid > li:after { content: ''; display: table; clear: both; } .products-grid .product-image { width: 100%; margin-bottom: 7px; } .products-grid .product-image img { width: 100%; height: auto; } .products-grid .product-image img:hidden { display: none; } .products-grid .product-info { position: relative; padding-bottom: 45px; } .products-grid .product-name { margin: 0 0 2px; } .products-grid .product-sku { margin: 0 0 2px; font: 11px "Varela Round", Arial, Verdana, sans-serif; } .products-grid .actions { padding-top: 10px; position: absolute; bottom: 0px; min-height: 35px; width: 100%; } .products-grid .ratings .rating-box { margin: 0 auto; } .products-grid .ratings .amount { display: none; } .products-grid .price-box { color: #A0A0A0; font-size: 17px; margin: 0; } .products-grid .price-box .regular-price .price { font: 17px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #ea6a45; } .products-grid .price-box .minimal-price-link { line-height: 1; text-decoration: none; } .products-grid .price-box .minimal-price-link .label { color: #A0A0A0; font: italic 12px/16px "Varela Round", Arial, Verdana, sans-serif; } .products-grid .price-box .minimal-price-link .price { color: #A0A0A0; font: 14px/16px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .products-grid .add-to-links { margin-bottom: 0; } /* Config: Two columns + flexible gutter */ .products-grid > li { float: left; width: 47.72727%; margin-right: 4.54545%; } .products-grid > li:nth-of-type(odd) { clear: left; } .products-grid > li:nth-of-type(even) { margin-right: 0; } .products-grid .product-image:before, .products-grid .product-image:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .products-grid .product-image:before { background-color: white; opacity: 0.8; z-index: 2; } .products-grid .product-image:after { background-image: url("../images/opc-ajax-loader.gif"); background-repeat: no-repeat; background-position: center; z-index: 3; } .products-grid .product-image.loading { position: relative; } .products-grid .product-image.loading:before, .products-grid .product-image.loading:after { display: block; } @media only screen and (min-width: 480px) { /* Config: Three columns + flexible gutter */ .products-grid { /* Undo two-column config */ /* Set three-column config */ } .products-grid > li:nth-of-type(odd) { clear: none; } .products-grid > li:nth-of-type(even) { margin-right: 3.7037%; } .products-grid > li { width: 30.8642%; margin-right: 3.7037%; } .products-grid > li:nth-of-type(3n+1) { clear: left; } .products-grid > li:nth-of-type(3n) { margin-right: 0; } } @media only screen and (min-width: 960px) { /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-4-col > li:nth-of-type(odd) { clear: none; } .products-grid--max-4-col > li:nth-of-type(3n+1) { clear: none; } .products-grid--max-4-col > li:nth-of-type(even), .products-grid--max-4-col > li:nth-of-type(3n) { margin-right: 2.22222%; } /* Set column config */ .products-grid--max-4-col > li { margin-right: 2.22222%; } .products-grid--max-4-col > li { width: 23.33333%; margin-right: 2.22222%; } .products-grid--max-4-col > li:nth-of-type(4n+1) { clear: left; } .products-grid--max-4-col > li:nth-of-type(4n) { margin-right: 0; } /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-5-col > li:nth-of-type(odd) { clear: none; } .products-grid--max-5-col > li:nth-of-type(3n+1) { clear: none; } .products-grid--max-5-col > li:nth-of-type(even), .products-grid--max-5-col > li:nth-of-type(3n) { margin-right: 2.22222%; } /* Set column config */ .products-grid--max-5-col > li { margin-right: 2.22222%; } .products-grid--max-5-col > li { width: 18.22222%; margin-right: 2.22222%; } .products-grid--max-5-col > li:nth-of-type(5n+1) { clear: left; } .products-grid--max-5-col > li:nth-of-type(5n) { margin-right: 0; } /* Config: Columns + flexible gutter */ /* Undo three-column config */ .products-grid--max-6-col > li:nth-of-type(odd) { clear: none; } .products-grid--max-6-col > li:nth-of-type(3n+1) { clear: none; } .products-grid--max-6-col > li:nth-of-type(even), .products-grid--max-6-col > li:nth-of-type(3n) { margin-right: 2.22222%; } /* Set column config */ .products-grid--max-6-col > li { margin-right: 2.22222%; } .products-grid--max-6-col > li { width: 14.81481%; margin-right: 2.22222%; } .products-grid--max-6-col > li:nth-of-type(6n+1) { clear: left; } .products-grid--max-6-col > li:nth-of-type(6n) { margin-right: 0; } } /* ============================================ * Product List ============================================ */ .products-list { margin-top: 20px; margin-bottom: 20px; } .products-list > li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #EDEDED; } .products-list > li:after { content: ''; display: table; clear: both; } .products-list > li .product-image { float: left; width: 33.33333%; } .products-list > li .product-image img { width: 100%; max-width: 100%; } .products-list > li:last-child { padding-bottom: 0; border-bottom: none; } .products-list .product-shop { float: right; width: 66.66667%; padding-left: 20px; } .products-list .product-shop .product-sku { margin: 0 0 2px; font: 11px "Varela Round", Arial, Verdana, sans-serif; } .products-list .product-shop .product-name { margin-bottom: 0; } .products-list .product-shop .ratings { margin: 0; } .products-list .product-shop .ratings .rating-box, .products-list .product-shop .ratings .rating-links { float: left; margin-right: 7px; } .products-list .product-shop .ratings .rating-links { margin-top: 4px; } .products-list .product-shop .price-box { color: #A0A0A0; font-size: 17px; font-weight: 500; margin: 0; } .products-list .product-shop .price-box .regular-price .price { font: 500 17px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #ea6a45; } .products-list .product-shop .price-box .minimal-price-link { line-height: 1; text-decoration: none; } .products-list .product-shop .price-box .minimal-price-link .label { color: #A0A0A0; font: italic 12px/16px "Varela Round", Arial, Verdana, sans-serif; } .products-list .product-shop .price-box .minimal-price-link .price { color: #A0A0A0; font: 500 14px/16px "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .products-list .product-shop .action { margin: 7px 0; } .products-list .product-shop .desc { margin-top: 7px; } .products-list .product-shop .product-primary, .products-list .product-shop .desc { float: left; width: 75%; overflow: hidden; } .products-list .product-shop .product-secondary { float: right; width: 25%; text-align: right; clear: right; } @media only screen and (min-width: 480px) { .products-list .product-name a { font-size: 18px; } } @media only screen and (max-width: 1279px) { .products-list .product-shop .product-primary, .products-list .product-shop .desc { float: left; width: 60%; padding-right: 20px; } .products-list .product-shop .product-secondary { float: right; width: 40%; } } @media only screen and (max-width: 600px) { .products-list .product-shop .price-box .special-price { padding-left: 0; } .products-list .product-shop .product-primary, .products-list .product-shop .product-secondary, .products-list .product-shop .desc { float: none; width: 100%; padding-right: 0; text-align: left; } } /* ============================================ * Mini Product List ============================================ */ .mini-products-list .product-image { float: left; min-width: 50px; } .mini-products-list .product-details { margin-left: 60px; } .mini-products-list .product-details .product-name { padding-top: 10px; } .mini-products-list li { margin-bottom: 10px; clear: both; } .mini-products-list li:after { content: ''; display: table; clear: both; } .mini-products-images-list:after { content: ''; display: table; clear: both; } .mini-products-images-list li.item { float: left; width: 50%; margin: 0; padding: 0 5px 10px 0; } .mini-products-images-list li.item:nth-of-type(even) { padding-right: 0; padding-left: 5px; } .mini-products-images-list li.item .product-image { display: block; } .mini-products-images-list li.item .product-image img { width: 100%; max-width: 100%; } /* ============================================ * CMS Page - title ============================================ */ .wide-title .page-title.cms-title{ max-width: 1320px; padding: 0 15px; margin: auto; } @media only screen and (max-width: 480px) { .wide-title .page-title.cms-title{ padding: 0 30px; } } /* ============================================ * Catalog - List ============================================ */ .catalog-category-view .wide-title { max-width: 1320px; padding: 0 15px; margin: auto; } @media only screen and (min-width: 480px) { .catalog-category-view .wide-title { padding: 0 30px; } } .category-image { margin: 0 0 2em; position: relative; } .category-image h1 { margin: .5em 0 0; font: bold 30px/1 "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; color: #000; } .category-image p { border: 1px solid #CCCCCC; padding: 5px; } .category-image p img { width: 100%; max-width: 100%; } .category-image p img:hidden { display: none; } @media only screen and (min-width: 600px) { .category-image h1 { margin: 0; position: absolute; top: 34px; left: 34px; font-size: 36px; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); } .category-image p { padding: 10px; } } .category-description { margin: 0 0 1.5em; } /* ============================================ * Layered Navigation ============================================ */ .block-layered-nav .block-subtitle--filter { display: none; margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; cursor: pointer; } .block-layered-nav .block-subtitle--filter:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 10px; top: 50%; margin-top: -3px; } .block-layered-nav .block-subtitle--filter:hover { background-color: #ededed; } .block-layered-nav .block-content .toggle-tabs { display: none; } .block-layered-nav .block-content > dl > dt { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; display: block; } .block-layered-nav .block-content > dl > dt:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 10px; top: 50%; margin-top: -3px; } .block-layered-nav .block-content > dl > dt:hover { background-color: #ededed; } .block-layered-nav .block-content > dl > dd { padding: 10px; margin: 0; border-width: 0 1px; border-style: solid; border-color: #CCCCCC; } .block-layered-nav .block-content > dl > dd:last-child { border-width: 0 1px 1px 1px; } .block-layered-nav dl dd { margin-bottom: 10px; margin-top: 10px; } .block-layered-nav dl dd ol > li > span, .block-layered-nav dl dd ol > li > a { padding: 5px 15px; display: block; } .block-layered-nav dl dd ol > li > a .count { color: #A0A0A0; } @media only screen and (min-width: 771px) { .block-layered-nav .block-content > dl > dt { padding-left: 10px; } .block-layered-nav .block-content > dl > dt:after { display: none; } .block-layered-nav dd { max-height: 695px; overflow: auto; } } @media only screen and (max-width: 770px) { .sidebar .block.block-layered-nav { border-bottom: none; } .block-layered-nav--no-filters .block-title { display: none; } .block-layered-nav .block-content { padding-top: 0; margin-top: 15px; } .block-layered-nav .block-content > dl > dt { cursor: pointer; border-bottom-width: 0; } .block-layered-nav .block-content > dl > dt:hover { color: #ea6a45; } .block-layered-nav .block-content > dl > dt:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #ea6a45; border-right: none; } .block-layered-nav .block-content > dl > dt.last { border-bottom-width: 1px; } .block-layered-nav .block-content > dl > dd { display: none; } .block-layered-nav .block-content.accordion-open > dl > dt.current { border-bottom-width: 1px; } .block-layered-nav .block-content.accordion-open > dl > dt.current:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 6px; top: 50%; margin-top: -3px; } .block-layered-nav .block-content.accordion-open > dl > dd.current { display: block; } .block-layered-nav .block-subtitle--filter { background-color: #ea6a45; border: 0; margin-bottom: 0; display: block; color: #FFFFFF; } .block-layered-nav .block-subtitle--filter:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #FFFFFF; border-right: none; right: 10px; top: 50%; margin-top: -5px; } .block-layered-nav .block-subtitle--filter:hover { background-color: #e7582e; color: #FFFFFF; } .block-layered-nav .block-subtitle--filter.active:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #FFFFFF; border-bottom: none; right: 10px; top: 50%; margin-top: -3px; } #narrow-by-list, #narrow-by-list2 { padding: 10px; border: 1px solid #CCCCCC; border-top: 0; } .block-layered-nav dl ol > li > a, .block-layered-nav dl ol > li > span { padding: 7px; margin: 5px; } .block-layered-nav dl ol > li > a { color: #636363; background-color: #F4F4F4; padding: 5px 10px; } .block-layered-nav dl ol > li > a:hover { text-decoration: none; background: #e8e8e8; } } .block-layered-nav .currently .block-subtitle { display: block; margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; } .block-layered-nav .currently ol { padding-left: 10px; margin-bottom: 10px; } .block-layered-nav .currently ol li { margin-bottom: 5px; } .block-layered-nav .currently ol li .label { font-weight: bold; } .block-layered-nav .currently ol li:after { content: ''; display: table; clear: both; } .block-layered-nav .actions { text-align: right; margin-bottom: 7px; } /* =========================================================================== * Catalog - Product ========================================================================== */ /* =========================================================================== * Main Product Info */ .product-view { /* Ratings Summary ============================================ */ /* Product Shop div =========================================== */ /* Product Name =============================================== */ /* attributes ================================================= */ /* shop, add to cart, related ================================= */ } .product-view .ratings .rating-links { clear: left; float: left; margin-top: 0; } .product-view .product-essential .extra-info .ratings .rating-box, .product-view .product-essential .extra-info .ratings .amount { float: left; } .product-view .product-essential .extra-info .ratings .rating-box { margin-top: 8px; margin-right: 10px; } .product-view .product-essential .extra-info .ratings:after { content: ''; display: table; clear: both; } .product-view .product-essential:after { content: ''; display: table; clear: both; } .product-view .product-shop { width: 50%; float: right; } .product-view .product-shop .product-name { display: none; } .product-view .product-shop .product-name .h1 { display: block; } .product-view .product-shop .product-sku { margin: 0; font: 12px/1.2 "Varela Round", Arial, Verdana, sans-serif; } .product-view .product-shop .extra-info, .product-view .product-shop .price-info { margin-bottom: 10px; } .product-view .product-shop .short-description { margin-bottom: 10px; clear: both; } .product-view .product-shop .ratings { margin-bottom: 8px; } .product-view .product-shop .availability { font-size: 16px; } .product-view .product-shop .price-box { margin-top: 0; } .product-view .product-shop .price-box .old-price, .product-view .product-shop .price-box .special-price, .product-view .product-shop .price-box .regular-price { padding-right: 0; line-height: 1.2; } .product-view .product-shop .price-box .regular-price .price, .product-view .product-shop .price-box .special-price .price, .product-view .product-shop .price-box .full-product-price .price { color: #ea6a45; font-size: 24px; } .product-view .product-shop .price-box .special-price .price-label { font-size: 16px; text-transform: uppercase; } .product-view .product-shop .price-box .price-excluding-tax, .product-view .product-shop .price-box .price-including-tax { display: block; line-height: 1.2; } .product-view .product-shop .price-box .price-excluding-tax .label, .product-view .product-shop .price-box .price-including-tax .label { font-size: 16px; font-weight: 300; } .product-view .product-shop .price-box .price-excluding-tax .price, .product-view .product-shop .price-box .price-including-tax .price { font-size: 20px; } .product-view .product-shop .price-stock-info { position: relative; } .product-view .old-price .price-label { display: none; } .product-view .product-shop .product-name, .product-view .product-img-box .product-name { margin-bottom: 10px; } .product-view .product-shop .product-name .h1, .product-view .product-img-box .product-name h1 { color: #ea6a45; margin-bottom: 5px; border: 0; } @media only screen and (min-width: 771px) { .product-view .product-shop .product-name { display: block; } .product-view .product-img-box .product-name { display: none; } } .product-view .additional-wrapper h2 { font-size: 20px; } .product-view .add-to-cart-wrapper, .product-view .block-related, .product-view .additional-wrapper { width: 50%; float: right; clear: right; } .product-view .product-shop, .product-view .add-to-cart-wrapper, .product-view .block-related, .product-view .additional-wrapper { padding-left: 15px; } .product-view .product-shop, .product-view .block-related, .product-view .additional-wrapper, .product-view .add-to-cart-wrapper { margin-bottom: 20px; } /* =========================================================================== * Shopper Approved Reviews */ #review_image img.sa_logo { margin-top: -38px; } input.pr_link { display: none; } div#review_header .percentage { width: 170px; } .product-reviews h2 { font-size: 20px; } /* =========================================================================== * No-Tabs Product Details */ .product-details { margin-bottom: 1.2em; padding-bottom: 1.2em; border-bottom: solid 1px #ccc; } .product-details h2 { font-size: 20px; } @media only screen and (min-width: 980px) { .product-view .product-shop .extra-info, .product-view .product-shop .price-info { margin-right: 250px; } .product-view .product-shop .price-info .tier-prices { float: right; margin: -70px -250px 10px 0; } } @media (min-width: 480px) and (max-width: 770px) { .product-view .product-shop .extra-info, .product-view .product-shop .price-info { margin-right: 250px; } .product-view .product-shop .price-info .tier-prices { float: right; margin: -69px -250px 10px 0; } } @media only screen and (max-width: 850px) { .product-view .product-shop .price-box .price-excluding-tax .label, .product-view .product-shop .price-box .price-including-tax .label { font-size: 15px; } .product-view .product-shop .price-box .price-excluding-tax .price, .product-view .product-shop .price-box .price-including-tax .price { font-size: 18px; } } @media only screen and (max-width: 770px) { .product-view .add-to-cart-wrapper { float: none; width: 100%; clear: both; } .product-view .product-shop .price-box .price-excluding-tax .label, .product-view .product-shop .price-box .price-including-tax .label { font-size: 16px; } .product-view .product-shop .price-box .price-excluding-tax .price, .product-view .product-shop .price-box .price-including-tax .price { font-size: 20px; } .product-view .product-shop, .product-view .add-to-cart-wrapper, .product-view .block-related, .product-view .additional-wrapper { width: 100%; float: none; padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 420px) { .product-view .product-shop .price-box .price-excluding-tax, .product-view .product-shop .price-box .price-including-tax { margin-bottom: 5px; } .product-view .product-shop .price-box .price-excluding-tax span, .product-view .product-shop .price-box .price-including-tax span { display: block; } } @media only screen and (max-width: 479px) { .product-view .product-shop, .product-view .block-related, .product-view .additional-wrapper { margin-bottom: 15px; } } /* =========================================================================== * Add To Cart */ .product-view { /* Set a min-height so that the floated elements break appropriately */ } .product-view .add-to-box:after, .product-view .add-to-cart:after { content: ''; display: table; clear: both; } .product-view .add-to-cart { padding-bottom: 3px; margin-bottom: 10px; border-bottom: 1px solid #CCCCCC; } .product-view .add-to-box { border-bottom: 1px solid #CCCCCC; } .product-view .add-to-cart .qty-wrapper, .product-view .product-options-bottom .price-box, .product-view .add-to-cart-buttons { min-height: 40px; } .product-view .product-options-bottom .price-box, .product-view .add-to-cart .qty-wrapper, .product-view .add-to-cart-buttons .button, .product-view .add-to-cart-buttons .paypal-logo { margin-bottom: 10px; } .product-view .add-to-cart .qty-wrapper, .product-view .add-to-cart .qty-wrapper label { margin-right: 7px; float: left; } .product-view .add-to-cart .qty-wrapper label { line-height: 40px; } .product-view .add-to-cart .qty-wrapper .qty { float: left; height: 40px; } .product-view .add-to-cart-buttons { float: left; margin-right: 10px; max-width: 100%; } .product-view .add-to-cart-buttons .paypal-logo { clear: left; text-align: center; } .product-view .add-to-cart-buttons .paypal-logo .paypal-button { margin: 0 auto; display: block; width: 145px; } .product-view .add-to-cart-buttons .paypal-logo .bml_button { display: block; width: 150px; margin: 0 auto; } .product-view .add-to-cart-buttons .paypal-logo .bml_button a { text-align: center; } .product-view .add-to-cart-buttons .paypal-logo .paypal-or { display: block; margin-bottom: 10px; margin-left: 0; margin-right: 0; line-height: 1; text-align: center; } .product-view .add-to-cart-buttons .button { min-height: 40px; line-height: 40px; font-size: 16px; padding: 0px 30px; float: left; min-width: 160px; width: 100%; white-space: normal; } .product-view .alert-price, .product-view .alert-stock { clear: both; } @media only screen and (max-width: 479px) { .product-view .add-to-cart-buttons .paypal-or { line-height: 20px; } .product-view .add-to-cart-buttons .paypal-logo, .product-view .add-to-cart-buttons .paypal-or, .product-view .add-to-cart-buttons .paypal-button, .product-view .add-to-cart-buttons .button { text-align: center; width: 100%; display: block; margin-right: 0; margin-left: 0; float: none; } } /* This is the "or" that separates the "Add to Cart" and "Add to X" links */ .add-to-box .or { display: none; } /* add to wishlist/compare ======================================== */ .product-view .add-to-links { clear: both; margin-top: 0px; margin-right: 15px; float: left; } .product-view .add-to-links:after { content: ''; display: table; clear: both; } .product-view .add-to-links li { float: left; } .product-view .add-to-links a { padding: 2px 7px 2px 0px; margin-left: 7px; border-right: 1px solid #CCCCCC; } .product-view .add-to-links li:first-child a { margin-left: 0px; } .product-view .add-to-links li:last-child a { border-right: 0px; } /* social sharing ================================================= */ .product-view .sharing-links { float: left; } .product-view .sharing-links:after { content: ''; display: table; clear: both; } @media only screen and (max-width: 599px) { .add-to-box .add-to-links a { float: none; width: auto; text-indent: 0; } } /* =========================================================================== * Product Images */ /* Main Image ==================================================== */ .product-img-box { width: 50%; float: left; margin-bottom: 10px; padding-right: 15px; } .product-img-box .product-name h1 { border: 0; } .product-img-box .product-image { margin-bottom: 10px; } .product-img-box .product-image img { max-width: 100%; max-height: 750px; margin: 0px auto; } @media only screen and (max-width: 479px) { .product-img-box .product-image img { max-height: 450px; } } @media only screen and (max-width: 770px) { .product-img-box { width: 100%; float: none; padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 479px) { .product-img-box { margin-bottom: 15px; } } /* Thumbnails ==================================================== */ .product-image-gallery { position: relative; } .product-image-gallery .gallery-image { display: none; } .product-image-gallery .gallery-image.visible { display: block; } .product-image-gallery .gallery-image.visible.hidden { visibility: hidden; } .product-image-gallery:before, .product-image-gallery:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .product-image-gallery:before { background-color: white; opacity: 0.8; z-index: 2; } .product-image-gallery:after { background-image: url("../images/opc-ajax-loader.gif"); background-repeat: no-repeat; background-position: center; z-index: 3; } .product-image-gallery.loading { position: relative; } .product-image-gallery.loading:before, .product-image-gallery.loading:after { display: block; } .product-image-thumbs li { display: inline-block; } .product-image-thumbs li:first-child { margin-left: -1px; } .product-image-thumbs a { display: inline-block; border: 1px solid transparent; } .no-touch .product-image-thumbs a:hover { border-color: #c7c7c7; } .more-views h2 { font-size: 18px; } /* =========================================================================== * Product Collateral (Tabs) */ .product-collateral, .box-collateral { margin-bottom: 10px; } .product-collateral { clear: both; } .collateral-tabs dd h2 { display: none; } .box-collateral { clear: both; } @media only screen and (min-width: 771px) { .product-collateral .toggle-tabs { display: block; width: 100%; position: relative; border: 1px solid #CCCCCC; background-color: #F4F4F4; } .product-collateral .toggle-tabs li { float: left; border-right: 1px solid transparent; border-left: 1px solid transparent; } .product-collateral .toggle-tabs li > span { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; display: inline-block; padding: 0 30px; height: 40px; line-height: 40px; cursor: pointer; text-transform: uppercase; font-size: 12px; position: relative; bottom: -1px; } .product-collateral .toggle-tabs li.current { border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; } .product-collateral .toggle-tabs li.current > span { background-color: #FFFFFF; z-index: 5; } .product-collateral .toggle-tabs li.current span, .product-collateral .toggle-tabs li:hover span { color: #ea6a45; } .product-collateral .toggle-tabs li:first-child { border-left: none; } .product-collateral .toggle-tabs:after { content: ''; display: table; clear: both; } .product-collateral > dl { width: 100%; } .product-collateral > dl > dt { display: none; } .product-collateral > dl > dd { width: 100%; display: none; padding: 15px; border: 1px solid #CCCCCC; border-top: 0; } .product-collateral > dl > dd.current { display: block; } } @media only screen and (max-width: 770px) { .product-collateral { width: 100%; float: none; padding-right: 0; padding-left: 0; } .product-collateral .toggle-tabs { display: none; } .product-collateral > dl > dt { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; display: block; } .product-collateral > dl > dt:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 10px; top: 50%; margin-top: -3px; } .product-collateral > dl > dt:hover { background-color: #ededed; } .product-collateral > dl > dd { padding: 10px; margin: 0; border-width: 0 1px; border-style: solid; border-color: #CCCCCC; } .product-collateral > dl > dd:last-child { border-width: 0 1px 1px 1px; } .product-collateral > dl > dt { cursor: pointer; border-bottom-width: 0; } .product-collateral > dl > dt:hover { color: #ea6a45; } .product-collateral > dl > dt:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #ea6a45; border-right: none; } .product-collateral > dl > dt.last { border-bottom-width: 1px; } .product-collateral > dl > dd { display: none; } .product-collateral.accordion-open > dl > dt.current { border-bottom-width: 1px; } .product-collateral.accordion-open > dl > dt.current:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 6px; top: 50%; margin-top: -3px; } .product-collateral.accordion-open > dl > dd.current { display: block; } } @media only screen and (max-width: 479px) { .product-collateral, .box-collateral { margin-bottom: 15px; } } /* Additional Information tab - product attributes ================ */ #product-attribute-specs-table { max-width: 50em; border: 1px solid #C0C0C0; } #product-attribute-specs-table th { border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; } /* =========================================================================== * Catalog - Grouped Product List */ .grouped-items-table-wrapper { border: solid 1px #C0C0C0; width: 100%; padding: 10px; margin-bottom: 15px; } .grouped-items-table-wrapper tbody tr:last-child td { border-bottom: none; } @media only screen and (max-width: 479px) { .grouped-items-table-wrapper { margin-bottom: 15px; } } .grouped-items-table .name-wrapper { color: #206bbc; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .grouped-items-table .qty-wrapper { padding-top: 7px; } .grouped-items-table .qty-label { margin-left: 7px; } .grouped-items-table td { padding: 4px; } /* =========================================================================== * Catalog - Product Options */ .product-options { width: 100%; margin: 10px 0 0; padding: 10px 15px 15px; border: 1px solid #CCCCCC; clear: both; position: relative; } .product-options p.required { position: absolute; top: 6px; right: 15px; } .product-options dt { margin: 10px 0 3px; font-weight: normal; } .product-options dt:first-child { margin-top: 0; } .product-options dd { padding: 0 0 10px 0; margin: 0 0 5px; border-bottom: 1px solid #EDEDED; } .product-options dd .qty-holder { display: block; padding: 10px 0 0 0; } .product-options dd .qty-holder .qty { width: 3em; } .product-options dd .qty-holder label { vertical-align: middle; } .product-options dd .qty-disabled { background: none; border: 0; padding: 0 2px; } .product-options dd .input-text { width: 98%; } .product-options dd .input-box { padding-top: 0; } .product-options dd input.datetime-picker { width: 150px; } .product-options dd .time-picker { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 2px 0; vertical-align: middle; } .product-options dd textarea { width: 98%; height: 8em; } .product-options dd select { width: 330px; max-width: 100%; } .product-options dd select.swatch-select { display: inline-block !important; margin-bottom: 6px; } .product-options dd ul.options-list { margin-right: 5px; } .product-options dd ul.options-list li { line-height: 1.5; margin-bottom: 7px; } .product-options dd ul.options-list li:last-child { margin-bottom: 0; } .product-options dd ul.options-list .radio, .product-options dd ul.options-list .checkbox { float: left; margin-top: 5px; } .product-options dd ul.options-list .label { display: block; } .product-options dd ul.options-list label { font-weight: normal; } .product-options dl.last dd.last { border-bottom: 0; padding-bottom: 5px; margin-bottom: 0; } .product-options p.note { margin: 0; font-size: 11px; } .product-options-bottom { background-color: #F4F4F4; padding: 15px 20px; border: 1px solid #CCCCCC; border-top: 0; margin-bottom: 10px; /* "display: none" should be removed if products on site have a long list of product options and those product options */ /* affect the price so that the customer can see the updated price close to the "Add to Cart" button */ } .product-options-bottom:after { content: ''; display: table; clear: both; } .product-options-bottom .product-pricing, .product-options-bottom .tier-prices { float: right; margin: 0; padding: 0 0 10px; border: 0; background: 0; color: #636363; } @media only screen and (max-width: 479px) { .product-options-bottom .product-pricing, .product-options-bottom .tier-prices { float: none; width: 100%; text-align: right; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #CCCCCC; } } .product-options-bottom .tier-prices li { background: 0; padding: 2px 0; } .product-options-bottom .tier-prices .price, .product-options-bottom .tier-prices .benefit { color: #636363; } .product-options-bottom .price-box { display: none; float: right; margin: 0 0 10px; padding: 0; } @media only screen and (max-width: 479px) { .product-options-bottom .price-box .price-as-configured { text-align: right; } .product-options-bottom .price-box .price-as-configured .price-label { display: block; } } .product-options-bottom .price-tax { float: left; } /* =========================================================================== * Related Products */ .block-related li { margin-bottom: 7px; } .block-related .block-title { border-bottom: none; border-top: none; padding-top: 0; } .block-related .block-title h2 { margin: 0; margin-bottom: 0.5em; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 24px; font-weight: 400; font-style: normal; line-height: 1.2; text-rendering: optimizeLegibility; text-transform: uppercase; font-size: 20px; margin-bottom: 0; } .block-related .block-subtitle { margin-bottom: 7px; } .block-related .product { margin-left: 20px; position: relative; } .block-related .checkbox { float: left; margin-top: 36px; } .block-related .product-details { margin-left: 90px; } .block-related .product-name { margin-bottom: 3px; } .block-related .product-details .price-box { margin: 2px 0 3px; } .block-related .product-details .price-box a, .block-related .product-details .price-box p, .block-related .product-details .price-box span { float: left; margin-left: 3px; } .block-related .product-details .price-box a:first-child, .block-related .product-details .price-box p:first-child, .block-related .product-details .price-box span:first-child { margin-left: 0; } .block-related .product-details .price-box:after { content: ''; display: table; clear: both; } .block-related .link-wishlist { display: none; } /* =========================================================================== * Upsell Products */ .box-up-sell { margin-top: 20px; } .box-up-sell .ratings { display: none; } .box-up-sell h2 { font-size: 20px; } /* ============================================ * Catalog - MSRP MAP Popup ============================================ */ .cart-msrp-totals { color: red; font-size: 12px !important; font-weight: bold; margin: 10px 10px 0; padding: 10px; text-align: right; text-transform: uppercase; } .map-cart-sidebar-total { color: red; display: block; font-size: 10px; font-weight: bold; text-align: left; padding: 2px 5px; } .map-popup { background: #FFFFFF; border: 5px solid #CCCCCC; margin: 12px 0 0; position: absolute; text-align: left; width: 450px; z-index: 100; } @media only screen and (min-width: 771px) { .map-popup.map-popup-right { left: 10px !important; } .map-popup.map-popup-left { left: auto !important; right: 10px !important; } } @media only screen and (max-width: 770px) { .map-popup { width: 100%; left: 0px !important; } } .map-popup .map-popup-heading { padding: 8px 10px; margin-right: 40px; width: auto; } .map-popup .map-popup-heading h3 { font-size: 14px; margin: 0; overflow: hidden; white-space: nowrap; word-wrap: break-word; text-align: left; text-overflow: ellipsis; } @media only screen and (max-width: 479px) { .map-popup .map-popup-heading h3 { text-align: center; } } .map-popup .map-popup-close { display: block; position: absolute; top: 0px; right: 0px; height: 36px; width: 36px; font-size: 20px; line-height: 32px; text-align: center; } .map-popup .map-popup-content { border-top: 1px solid #EDEDED; padding: 10px; margin: 0 10px; overflow: hidden; text-align: left; } @media only screen and (max-width: 479px) { .map-popup .map-popup-content { text-align: center; } } .map-popup .map-popup-checkout { padding: 10px 0; } .map-popup .map-popup-checkout form:after { content: ''; display: table; clear: both; } .map-popup .map-popup-checkout span { display: block; } .map-popup .map-popup-checkout .button { float: left; margin: 0 2px; clear: left; } .map-popup .map-popup-checkout .additional-addtocart-box { float: left; min-width: 210px; } .map-popup .map-popup-checkout .additional-addtocart-box li { list-style-type: none; } .map-popup .map-popup-checkout .paypal-logo { width: auto; } .map-popup .map-popup-checkout .paypal-logo a { display: inline-block; float: left; clear: left; } .map-popup .map-popup-checkout .paypal-logo .paypal-or { float: left; text-align: center; padding: 5px 15px; clear: left; } .map-popup .map-popup-checkout .paypal-logo:after { content: ''; display: table; clear: both; } .map-popup .map-popup-checkout .paypal-logo .bml_button a { clear: left; } @media only screen and (max-width: 479px) { .map-popup .map-popup-checkout { text-align: center; } .map-popup .map-popup-checkout .button, .map-popup .map-popup-checkout .additional-addtocart-box, .map-popup .map-popup-checkout .paypal-logo a, .map-popup .map-popup-checkout .paypal-logo .paypal-or { float: none; } .map-popup .map-popup-checkout .additional-addtocart-box { min-width: 0px; } .map-popup .map-popup-checkout .paypal-logo .paypal-or { margin: 0px; margin-bottom: 10px; } } .map-popup .map-popup-checkout:after { content: ''; display: table; clear: both; } .map-popup .map-popup-price { padding: 10px 0; } @media only screen and (max-width: 479px) { .map-popup .map-popup-price { text-align: center; padding-top: 0px; } } .map-popup .map-popup-price .price-box, .map-popup .map-popup-price .price-box .special-price { display: inline-block; margin: 0; padding: 0; } .map-popup .map-popup-price .price-box .minimal-price-link { display: inline-block; } .map-popup .map-popup-text { padding: 10px 0; margin: 0 10px; word-wrap: break-word; } .map-popup .map-popup-text, .map-popup .map-popup-only-text { border-top: 1px solid #EDEDED; } /* ============================================ * Catalog - MSRP Product Listing ============================================ */ .price-box .map-link { display: block; text-align: center; } /* ============================================ * Catalog - Compare ============================================ */ .block-compare .product-name:after { content: ''; display: table; clear: both; } .compare-table .product-image { display: inline-block; } .compare-table .product-shop-row.top td { padding-bottom: 0; border-bottom: 0; } .compare-table .product-shop-row.bottom td { padding-top: 0; } /* ============================================ * Checkout - Layout ============================================ */ .cart-table { float: left; width: 60%; } .cart .button { white-space: normal; } .cart-forms, .cart-totals-wrapper, .crosssell { float: right; clear: right; width: 40%; padding-left: 20px; } .cart-totals, .cart-forms .discount, .cart-forms .giftcard, .cart-forms .shipping { padding: 10px; background-color: #F4F4F4; border: 1px solid #CCCCCC; } .cart-table, .cart-totals, .cart-forms .discount, .cart-forms .giftcard, .cart-forms .shipping { margin-bottom: 20px; } .checkout-cart-index #postcode { width: 100%; } .display-both-prices .cart-table { float: none; width: 100%; } .display-both-prices .cart-forms { float: left; padding-right: 10px; padding-left: 0; } .display-both-prices .cart-totals-wrapper, .display-both-prices .crosssell { padding-left: 10px; } .display-both-prices .cart-forms, .display-both-prices .cart-totals-wrapper, .display-both-prices .crosssell { width: 50%; } .display-both-prices .crosssell { clear: right; float: right; } @media only screen and (max-width: 979px) { .display-single-price .cart-table { float: none; width: 100%; } .display-single-price .cart-forms { float: left; padding-right: 10px; padding-left: 0; } .display-single-price .cart-totals-wrapper, .display-single-price .crosssell { padding-left: 10px; } .display-single-price .cart-forms, .display-single-price .cart-totals-wrapper, .display-single-price .crosssell { width: 50%; } .display-single-price .crosssell { clear: right; float: right; } } @media only screen and (max-width: 599px) { .product-cart-sku { display: none; } .display-both-prices .cart-forms, .display-both-prices .cart-totals-wrapper, .display-both-prices .crosssell, .display-single-price .cart-forms, .display-single-price .cart-totals-wrapper, .display-single-price .crosssell { padding-top: 0; padding-left: 0; padding-right: 0; float: none; width: 100%; } } .display-single-price:after { content: ''; display: table; clear: both; } /* ============================================ * Checkout - Cart ============================================ */ .cart .page-title { margin-bottom: 15px; border-bottom: 1px solid #EDEDED; } .cart .page-title:after { content: ''; display: table; clear: both; } .cart .page-title h1 { float: left; border-bottom: none; margin-bottom: 6px; margin-right: 10px; } .checkout-types { float: right; text-align: right; max-width: 100%; /* We always want this shipping method to display on its own line */ } .checkout-types li { vertical-align: top; margin: 0 0 5px 5px; } .checkout-types li:after { content: ''; display: table; clear: both; } .checkout-types li img { display: inline; vertical-align: top; } .checkout-types li:first-child { margin-left: 0; } .checkout-types .method-checkout-cart-methods-multishipping { display: block; } .checkout-types.top li { display: inline-block; } .checkout-types.top .bml_button { display: inline-block; vertical-align: top; } .checkout-types.top .bml_button img { display: block; } .checkout-types.top .paypal-logo .paypal-or { margin-top: 5px; } .checkout-types.bottom .paypal-logo a, .checkout-types.minicart .paypal-logo a { display: block; } .checkout-types.bottom .paypal-or, .checkout-types.minicart .paypal-or { margin: 0px; display: block; text-align: center; } @media only screen and (min-width: 741px) { .checkout-types.bottom .paypal-or { text-align: right; padding-right: 70px; } } .cart-totals .checkout-types .btn-checkout { margin-bottom: 7px; } @media only screen and (max-width: 740px) { .checkout-types { float: none; text-align: center; } .checkout-types.bottom .paypal-or, .checkout-types.minicart .paypal-or { width: auto; float: none; } .checkout-types li { float: none; width: 100%; margin-left: 0; } } @media only screen and (max-width: 599px) { .btn-checkout { width: 100%; } } .cart-table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .cart-table th, .cart-table td, .cart-table tbody td { border-bottom: none; vertical-align: top; } .cart-table h2 { color: #636363; font-size: 14px; font-weight: 600; margin-bottom: 0; } .cart-table thead th, .cart-table tbody td { background-color: transparent; padding: 10px 5px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .cart-table .product-cart-info, .cart-table .product-cart-actions { padding-left: 15px; } .cart-table tr { border-bottom: 1px solid #C0C0C0; } .cart-table tfoot tr { background: none; } .cart-table tfoot tr > td:after { content: ''; display: table; clear: both; } .cart-table span.or { font-size: 9px; padding: 0 5px; text-transform: uppercase; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .cart-table .product-cart-image .cart-links, .cart-table .product-cart-info .btn-remove, .cart-table .product-cart-actions .button { display: none; } .cart-table .product-cart-image { padding-left: 0; padding-right: 0; } .cart-table .product-cart-image .product-image img { max-width: 100%; width: 100%; } .cart-table .product-cart-image a.cart-edit { display: none; } .cart-table .product-cart-sku { font-family: "Varela Round", Arial, Verdana, sans-serif; font-style: italic; font-size: 12px; margin: 5px 0 12px; } .cart-table .product-cart-sku .label { font-weight: 600; } .cart-table .btn-empty { float: left; } .cart-table .product-cart-total, .cart-table .product-cart-price { text-align: center; } .cart-table .cart-tax-total { position: relative; cursor: pointer; } .cart-table .cart-tax-total:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #206bbc; border-left: none; position: absolute; top: 3px; right: -11px; } .cart-table .cart-tax-total.cart-tax-total-expanded:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid #206bbc; border-bottom: none; right: -15px; top: 6px; } .cart-table .cart-links > li { white-space: nowrap; line-height: 1.3; margin-bottom: 5px; min-width: 65px; font-size: 13px; } .cart-table .cart-links > li > a { display: block; } .cart-table .cart-links > li:last-child { margin-bottom: 0; } .cart-table .product-cart-actions { min-width: 60px; text-align: center; } .cart-table .product-cart-actions .qty { height: 30px; border-color: #C0C0C0; border-radius: 0; margin-bottom: 10px; text-align: center; width: 3.2em; } .cart-table .product-cart-actions .button { margin-bottom: 5px; } .cart-table .item-options { padding-left: 15px; } @media only screen and (max-width: 770px) { .cart-table th { font-size: 12px; } .cart-table th, .cart-table td { padding: 7px 6px; } .cart-table .product-cart-actions > li { white-space: inherit; } } @media only screen and (max-width: 699px) { .display-both-prices .cart-table thead th.cart-total-head, .display-both-prices .cart-table td.product-cart-total { display: none; } } @media only screen and (max-width: 599px) { .cart-table colgroup, .cart-table thead { display: none; } .cart-table tr { display: block; margin-bottom: 10px; padding-bottom: 10px; position: relative; width: 100%; } .cart-table tr:after { content: ''; display: table; clear: both; } .cart-table tr:last-child { margin-bottom: 0; } .cart-table tfoot tr { padding-bottom: 0; } .cart-table td { border: none; display: block; } .cart-table td[data-rwd-label] { padding-left: 15px; margin-bottom: 6px; } .cart-table td[data-rwd-label] .price { font-weight: normal; } .cart-table td[data-rwd-label]:before { content: attr(data-rwd-label) ":"; font-size: 12px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; padding-right: 5px; text-transform: uppercase; } .cart-table td.product-cart-price { text-align: left; } .cart-table h2 { font-size: 12px; } .cart-table .cart-links { padding-top: 5px; padding-right: 5px; } .cart-table .cart-links > li { white-space: normal; text-align: center; } .cart-table .cart-links > li > a { padding: 2px 0px; } .cart-table .cart-tax-info { font-style: italic; padding-left: 15px; font-size: 13px; } .cart-table .cart-tax-info .price { font-size: 13px; } .cart-table .product-cart-image { width: 25%; float: left; padding-bottom: 0; } .cart-table .product-cart-image a.cart-edit { display: block; font-size: 16px; text-align: center; text-transform: uppercase; } .cart-table .product-cart-info, .cart-table td[data-rwd-label] { float: right; width: 75%; } .cart-table .product-cart-actions, .cart-table .product-cart-price { padding-bottom: 0; padding-top: 0; float: right; } .cart-table .product-cart-remove, .cart-table .product-cart-total, .cart-table .product-cart-actions .cart-links { display: none; } .cart-table .product-cart-image .cart-links, .cart-table .product-cart-info .btn-remove { display: block; } .cart-table .product-cart-actions .button { display: none; } .cart-table .product-cart-info .btn-remove { float: right; margin: -4px 0px 2px 7px; } .cart-table .product-cart-info .product-cart-sku { margin-bottom: 5px; } .cart-table .product-cart-actions { text-align: left; } .cart-table .product-cart-actions .qty { margin-right: 7px; margin-bottom: 7px; } .cart-table .price, .cart-table .product-cart-price:before { font-weight: 500; font-size: 15px; font-family: "Varela Round", Arial, Verdana, sans-serif; } .cart-table .cart-footer-actions { text-align: center; width: 100%; } .cart-table .cart-footer-actions #empty_cart_button { float: right; } .cart-table .cart-footer-actions .btn-continue { float: left; } .cart-table .cart-footer-actions .btn-update, .cart-table .cart-footer-actions span.or { display: none; } .display-both-prices .cart-table td[data-rwd-tax-label]:before { content: attr(data-rwd-tax-label) ":"; } } /* ============================================ * Checkout - Estimate Shipping and Tax ============================================ */ .shipping h2 { font-size: 12px; font-weight: bold; margin: 0 0 5px; } .shipping select { max-width: 100%; height: 30px; display: block; border: 1px solid #C0C0C0; } .shipping select.validation-failed { border-color: #DF280A; } .shipping .shipping-desc { display: none; } .shipping .buttons-set { border: none; margin: 0; padding: 0; } .shipping .form-list:after { content: ''; display: table; clear: both; } .shipping .form-list li { float: left; margin: 5px 2% 10px 0; } .shipping .form-list .shipping-country { width: 37%; } .shipping .form-list .shipping-region { width: 41%; } .shipping .form-list .shipping-postcode { margin-right: 0; width: 18%; } .shipping .form-list .shipping-postcode input { margin-top: 4px; } .shipping .form-list .input-box { padding-top: 0; } .shipping .form-list input { height: 30px; margin-top: 4px; } .shipping .form-list label { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 13px; font-weight: 400; text-transform: uppercase; white-space: nowrap; } .shipping .sp-methods { padding: 10px 0 0; text-align: left; } .shipping .sp-methods dd { margin-bottom: 10px; } .shipping .sp-methods label { font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 12px; font-style: italic; min-width: 100px; } .shipping .sp-methods label span { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-weight: bold; font-style: normal; } .shipping #co-shipping-method-form .buttons-set .button { float: left; margin-left: 0; } .shipping #co-shipping-method-form .sp-methods dd label { border: 1px solid #CCCCCC; background-color: #ededed; min-width: 220px; } .shipping #co-shipping-method-form .sp-methods dd label:hover { background-color: gainsboro; } @media only screen and (max-width: 770px) { .shipping .shipping-form .form-list > li { width: 100%; float: none; } .shipping .shipping-form .form-list > li label { display: block; } .shipping .shipping-form .form-list > li input, .shipping .shipping-form .form-list > li select { width: 100%; } } .cart .cart-totals { text-align: right; } .cart .cart-totals:after { content: ''; display: table; clear: both; } .cart .cart-totals table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; margin-bottom: 20px; text-transform: uppercase; width: 100%; } .cart .cart-totals table td { padding: 2px 0px; } .cart .cart-totals table td:first-child { padding-right: 10px; min-width: 120px; } .cart .cart-totals table tbody tr:last-child td, .cart .cart-totals table tbody tr:last-child th { padding-bottom: 10px; } .cart .cart-totals table tfoot { border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; } .cart .cart-totals table tfoot td { font-size: 24px; padding: 2px 5px; vertical-align: top; } .cart .cart-totals table tfoot strong span, .cart .cart-totals table tfoot span.price { font-family: "Varela Round", Arial, Verdana, sans-serif; } .cart .cart-totals table tfoot strong { font-weight: 400; } @media only screen and (max-width: 600px) { .cart-totals { text-align: right; } } @media only screen and (max-width: 770px) { .cart .cart-totals table tfoot td { font-size: 18px; } } .discount-form:after, #giftcard-form:after { content: ''; display: table; clear: both; } #discount-coupon-form, .cart .giftcard { width: 100%; } #discount-coupon-form h2, .cart .giftcard h2 { display: none; } #discount-coupon-form label, .cart .giftcard label { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; text-align: left; text-transform: uppercase; min-width: 105px; display: inline-block; margin-right: 10px; } #discount-coupon-form .field-wrapper, .cart .giftcard .field-wrapper { display: inline-block; } #discount-coupon-form .validation-advice, .cart .giftcard .validation-advice { display: inline; } #discount-coupon-form .button-wrapper, .cart .giftcard .button-wrapper { display: inline-block; vertical-align: bottom; } #discount-coupon-form .button-wrapper > button, .cart .giftcard .button-wrapper > button { float: left; } #discount-coupon-form .input-text, .cart .giftcard .input-text { border-radius: 0; height: 30px; margin: 4px 10px 0 0; width: 190px; } .cart .giftcard p { margin-bottom: 7px; } .cart .giftcard .check-gc-status { float: left; padding: 0px; } .cart .giftcard .check-gc-status > span > span { font-size: 14px; text-transform: none; } /* ============================================ * Checkout - Cart Cross sell ============================================ */ .crosssell h2 { color: #206bbc; } .crosssell .item a.product-image { width: auto; float: left; } /* Change the layout to 2 columns at a breakpoint that is higher than a 3 columns layout would normally break */ @media only screen and (max-width: 979px) { .crosssell { /* Undo three-column config */ } .crosssell .products-grid > li:nth-child(even), .crosssell .products-grid > li:nth-child(3n), .crosssell .products-grid > li { width: 47.72727%; margin-right: 4.54545%; } .crosssell .products-grid > li:nth-child(odd) { clear: left; } .crosssell .products-grid > li:nth-child(even) { margin-right: 0; } .crosssell .products-grid > li:nth-child(3n+1) { clear: none; } } @media only screen and (max-width: 599px) { .cart-table .cart-tax-total:after { right: -9px; } .cart-table .cart-tax-total.cart-tax-total-expanded:after { right: -13px; } } @media only screen and (max-width: 320px) { .crosssell ul .item { padding: 0 0px 40px; } .crosssell ul .product-details .crosssell-actions { padding: 0 5px; } } /* ============================================ * Checkout - One Page ============================================ */ .checkout-onepage-index .col-right, .checkout-onepage-index .col-left { display: none; } .checkout-onepage-index .col-main { width: auto; float: none; } @media only screen and (min-width: 980px) { .checkout-onepage-index .col-main { float: left; width: 72%; padding-right: 20px; } .checkout-onepage-index .col-right, .checkout-onepage-index .col-left { width: 28%; display: block; } .checkout-onepage-index .col-right { padding-left: 0; } } .opc select { width: 365px; } /* -------------------------------------------- * Section Styling - Default */ .opc .section .step-title { width: 100%; border-top: 1px solid #ECECEC; position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } .opc .section .step-title:after { content: ''; display: table; clear: both; } .opc .section.allow:not(.active) .step-title { cursor: pointer; } /* Using .no-touch since touch devices emulate hover, thereby making steps look active that are not */ .no-touch .opc .section.allow:not(.active) .step-title:hover { background-color: #F4F4F4; } .opc .section.active .step-title { border-bottom: 1px solid #ECECEC; } .opc .section .step-title a { display: none; } .opc .section.allow:not(.active) .step-title a { display: block; float: right; line-height: 40px; height: 40px; padding: 0px 10px; } .no-touch .opc .section .step-title a:hover { text-decoration: none; } .opc .section .step-title .number, .opc .section.allow.active .step-title .number, .no-touch .opc .section.allow:hover .step-title .number { width: 26px; height: 26px; text-align: center; color: #FFFFFF; line-height: 26px; background-color: #ea6a45; display: block; position: absolute; top: 50%; left: 10px; margin-top: -13px; } .opc .section.allow .step-title .number { background-color: #f5b5a2; } .opc .section.allow .step-title h2 { color: #A0A0A0; } .opc .section.allow .step-title:hover h2, .opc .section.active .step-title h2 { color: #206bbc; } .opc .section .step-title h2 { font-size: 16px; font-weight: 400; line-height: 40px; height: 40px; float: left; margin: 0px 4px 0px 45px; } @media only screen and (min-width: 700px) { .opc .section .step-title { display: none; } .opc .section.allow.active .step-title { display: block; } .opc .section .step-title .number, .opc .section.allow.active .step-title .number, .no-touch .opc .section.allow:hover .step-title .number { display: none; } .opc .section .step-title h2 { margin-left: 0; } } @media only screen and (max-width: 699px) { .opc-indicator { display: none; } } .opc .section .step { padding: 20px; } .opc .section .step:after { content: ''; display: table; clear: both; } @media only screen and (max-width: 979px) { .opc .section .step { padding: 10px; } } .opc select { max-width: 365px; width: 100%; } .opc h3 { padding-top: 15px; font-weight: 500; } .opc .buttons-set { text-align: left; } .opc .buttons-set button.button { float: left; margin-left: 0; margin-right: 10px; margin-bottom: 0; } .opc .buttons-set p.required { float: right; margin-left: 5px; margin-bottom: 0; } .opc .buttons-set .back-link { float: right; margin: 0; } .opc .buttons-set a { line-height: 20px; display: inline-block; padding: 5px 5px 5px 0; } @media only screen and (max-width: 479px) { .opc .buttons-set .button + .buttons-set .button, .paypal-express-review .buttons-set .button + .buttons-set .button { margin-left: 0; } } .opc #opc-login .step { padding: 0px; } .opc #opc-login .buttons-set { border-top: 0; padding-top: 5px; } @media only screen and (max-width: 770px) { .opc #opc-login .description, .opc #opc-login p.required { display: none; } } #opc-payment .note { padding: 10px; } /* -------------------------------------------- * This section hides everything but the "Checkout Method" step of the checkout process and fades in the content once the customer progresses to the next step. The purpose of this is to simplify what the customer has to focus on. It is limited to larger viewports since smaller devices are inherently going to be focused solely on the "Checkout Method" step. */ .opc.opc-firststep-login .section:not(#opc-login) .step-title, .opc-block-progress-step-login { -moz-transition: opacity 300ms 0; -o-transition: opacity 300ms 0; -webkit-transition: opacity 300ms 0; transition: opacity 300ms 0; } .opc.opc-firststep-login .section#opc-login .step-title .number { -moz-transition: width 80ms 0; -o-transition: width 80ms 0; -webkit-transition: width 80ms 0; transition: width 80ms 0; } .opc.opc-firststep-login .section#opc-login .step-title h2 { -moz-transition: margin-left 80ms 0; -o-transition: margin-left 80ms 0; -webkit-transition: margin-left 80ms 0; transition: margin-left 80ms 0; } /* When a user progresses from the "Checkout Method" to "Billing Information" for the first time, the */ /* "opc-has-progressed-from-login" class gets added to the body. Also, the .opc element will only have the */ /* "opc-firststep-login" class if the first step of the checkout is the "Checkout Method" (eg, not when logged in) */ body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section:not(#opc-login) .step-title, body:not(.opc-has-progressed-from-login) .opc-block-progress-step-login { opacity: 0; } body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title .number { width: 0px; overflow: hidden; } body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title h2 { margin-left: 0px; } /* -------------------------------------------- * Shipping and Payment methods */ .sp-methods { margin: 0 0 8px; } .sp-methods dt { margin: 13px 0 5px; font-weight: bold; } .sp-methods dt:first-child { margin: 0 0 5px; } .sp-methods dd li { margin: 5px 0; } .sp-methods label img { float: left; } .sp-methods label a { margin-top: 6px; float: right; margin-left: 10px; } .sp-methods .price { font-weight: bold; } .sp-methods .form-list { padding-left: 20px; } .sp-methods .form-list li { margin: 0 0 8px; } .sp-methods select.month { width: 120px; margin-right: 10px; } .sp-methods select.year { width: 96px; } .sp-methods input.cvv { width: 4em !important; } .sp-methods #advice-validate-cc-exp-ccsave_expiration { max-width: 130px; } .sp-methods .checkmo-list li { margin: 0 0 5px; content: ''; display: table; clear: both; } .sp-methods .checkmo-list label { width: 165px; padding-right: 15px; text-align: right; float: left; } .sp-methods .checkmo-list address { float: left; } @media only screen and (max-width: 479px) { .sp-methods .checkmo-list { padding-left: 0; } .sp-methods .checkmo-list label { width: 135px; } } .sp-methods .release-amounts { margin: 0.5em 0; } .sp-methods .release-amounts button { float: left; margin: 5px 10px 0 0; } /* One Page Checkout */ .block-checkout-summary { border: 0; margin: 0; border-left: 1px solid #CCCCCC; padding-left: 20px; } .block-checkout-summary .mini-products-list li.item { margin-left: 0; } .block-checkout-summary .mini-products-list a.btn-edit { font-size: 12px; } .block-checkout-summary .mini-products-list.scroll { max-height: 300px; overflow: auto; } .block-checkout-summary .mini-products-list .truncated { cursor: auto; } .block-checkout-summary .mini-products-list .truncated .truncated_full_value { position: static; } .block-checkout-summary .mini-products-list .truncated .truncated_full_value .item-options { display: block; position: static; width: auto; padding: 0; font-size: 12px; background: none; border: none; } .block-checkout-summary .mini-products-list .truncated .truncated_full_value .item-options:after { content: ''; display: table; clear: both; } .block-checkout-summary .mini-products-list .truncated a.details { display: none; } .block-checkout-summary #shopping-cart-totals-table { width: 100%; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; text-transform: uppercase; } .block-checkout-summary #shopping-cart-totals-table td { padding: 2px 0px; } .block-checkout-summary #shopping-cart-totals-table td:first-child { padding-right: 10px; min-width: 120px; } .block-checkout-summary #shopping-cart-totals-table tbody tr:last-child td, .block-checkout-summary #shopping-cart-totals-table tbody tr:last-child th { padding-bottom: 10px; } .block-checkout-summary #shopping-cart-totals-table tfoot { border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; } .block-checkout-summary #shopping-cart-totals-table tfoot td { font-size: 18px; padding: 2px 5px; vertical-align: top; } .block-checkout-summary #shopping-cart-totals-table tfoot strong span, .block-checkout-summary #shopping-cart-totals-table tfoot span.price { font-family: "Varela Round", Arial, Verdana, sans-serif; } .block-checkout-summary #shopping-cart-totals-table tfoot strong { font-weight: 400; } .block-progress { padding: 10px 0 0; margin: 10px 0 0; border-top: 1px #EDEDED solid; } .block-progress .block-content { font-size: 13px; } .block-progress dt { padding-top: 6px; margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; margin-bottom: 6px; text-transform: uppercase; font-weight: normal; color: #A0A0A0; } .block-progress dt.complete { color: #636363; } .block-progress dd { padding-left: 15px; margin-bottom: 10px; font-family: "Varela Round", Arial, Verdana, sans-serif; font-style: italic; } .block-progress dd address { font-style: italic; } .block-progress #payment-progress-opcheckout .subtitle { margin-bottom: 3px; } .block-progress .payment-info dt { padding: 0; margin: 0 0 3px 0; color: #636363; font-family: "Varela Round", Arial, Verdana, sans-serif; text-transform: none; font-style: italic; float: left; clear: both; font-size: 13px; } .block-progress .payment-info dt:after { content: ': '; } .block-progress .payment-info dd { float: left; margin-bottom: 3px; font-size: 13px; } .block-progress .payment-info:after { content: ''; display: table; clear: both; } /* review step */ #checkout-review-table .btn-remove img { display: none; } #checkout-review-table-wrapper { clear: both; } #review-buttons-container { width: 100%; margin-top: 15px; margin-bottom: 15px; } #review-buttons-container .btn-checkout { min-width: 220px; } #review-buttons-container .please-wait { float: left; margin-right: 10px; } #review-buttons-container .f-left { float: right; } @media only screen and (max-width: 599px) { .linearize-table-large.checkout-review-table thead tr:nth-child(1n+2) { display: none; } } @media only screen and (max-width: 479px) { .linearize-table.checkout-review-table thead tr:nth-child(1n+2) { display: none; } } /* show/hide "change" link for progress step depend on complete status should be placed in .css file */ .opc-block-progress dt.complete a, .opc-block-progress dt.complete .separator { display: inline; } .opc-block-progress dt a, .opc-block-progress dt .separator { display: none; } /* On small screens, the progress review content will be moved to the review step via JS. Styled via this CSS: */ #checkout-step-review .opc-block-progress { border-left: none; padding-left: 0; } #checkout-step-review .opc-block-progress .block-title { display: none; } #checkout-step-review .opc-block-progress .block-content { display: block !important; padding: 0; } #checkout-step-review .opc-block-progress .block-content > dl > div { float: left; width: 50%; } @media only screen and (max-width: 479px) { #checkout-step-review .opc-block-progress .block-content > dl > div { float: none; width: auto; } } #checkout-step-review .opc-block-progress .block-content .changelink { display: none; } @media only screen and (max-width: 479px) { #checkout-review-table thead > tr > th { display: none; } #checkout-review-table thead > tr > th:first-child { display: block; } #checkout-review-table thead > tr > th:first-child { display: block; } } #checkout-step-review .centinel > p { margin-bottom: 10px; } #checkout-step-review .centinel iframe { width: 100%; min-height: 400px; } /* Gift options */ .gift-messages-form h4 { margin: 10px 0 0; } .gift-messages-form .item { content: ''; display: table; clear: both; margin-top: 30px; } .gift-messages-form .item h5 { font-weight: bold; } .gift-messages-form .item .product-img-box { width: auto; float: left; padding-right: 15px; } .gift-messages-form .item .details { float: left; } .gift-message-form .inner-box > div { content: ''; display: table; clear: both; width: 100%; margin-top: 15px; display: block; } .gift-message-form .inner-box > div.extra-options-container p { margin-bottom: 15px; } .gift-message-form .gift-wrapping-form label { margin-right: 10px; } .gift-message-form .gift-wrapping-form img { float: left; } .gift-message-form .gift-wrapping-form .gift-wrapping-design { height: 75px; } .gift-message-form .gift-wrapping-form .gift-wrapping-design:after { content: ''; display: table; clear: both; } .gift-message-form .gift-wrapping-form .gift-wrapping-design .image-box { margin-right: 5px; } .gift-message-form .gift-item { padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px #ECECEC; } .gift-message-form .gift-item:after { content: ''; display: table; clear: both; } .gift-message-form .gift-item .product-img-box { width: 200px; } .gift-message-form .gift-item .product-img-box .product-image { width: 75px; margin-left: auto; margin-right: auto; } .gift-message-form .gift-item .product-img-box .product-name { display: block; } .gift-message-form .gift-item .fieldset { margin-left: 200px; } @media only screen and (max-width: 770px) { .gift-message-form .giftmessage-area { max-width: 100%; } .gift-message-form .gift-item .product-img-box { width: 100%; float: none; } .gift-message-form .gift-item .fieldset { margin-left: 0px; } .gift-message-form .gift-item .fieldset textarea { width: 100%; } } #co-billing-form ul.form-list > .fields { clear: left; } #co-billing-form ul.form-list .control { margin: 0 0 5px; } /* steps listed across the top */ .opc-indicator { margin: 0 0 20px; } .opc-indicator:after { content: ''; display: table; clear: both; } .opc-indicator li { float: left; margin: 0 20px 0 0; } .opc-indicator .step-title { position: relative; padding: 0 0 0 28px; font-size: 13px; line-height: 1.2; text-transform: uppercase; } .opc-indicator .number { position: absolute; top: 50%; left: 0; margin-top: -10px; width: 20px; height: 20px; color: #fff; line-height: 20px; text-align: center; background-color: #ea6a45; } .opc-indicator .allow .step-title { cursor: pointer; } .opc-indicator .allow .number { background-color: #f5b5a2; } .opc-indicator .allow .title { color: #A0A0A0; } .opc-indicator .allow:hover .number { background-color: #ea6a45; } .opc-indicator .allow:hover .title { color: #206bbc; } .opc-indicator .active .step-title { cursor: default; } .opc-indicator .active .number { opacity: 1; background-color: #ea6a45; } .opc-indicator .active .title { opacity: 1; color: #206bbc; } @media (min-width: 980px) and (max-width: 1150px) { .opc-indicator li { margin: 0 12px 0 0; } .opc-indicator .step-title { padding: 0 0 0 23px; font-size: 12px; } .opc-indicator .number { margin-top: -8px; width: 16px; height: 16px; line-height: 16px; } } @media (max-width: 820px) { .opc-indicator li { margin: 0 12px 0 0; } .opc-indicator .step-title { padding: 0 0 0 23px; font-size: 12px; } .opc-indicator .number { margin-top: -8px; width: 16px; height: 16px; line-height: 16px; } } /* form field sizing */ .opc .input-size-zip-code { width: 9em; } .opc .input-size-phone { width: 14em; } /* checkout review info */ #checkout-step-review .order-box-info .box-title h4 { font-size: 14px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-weight: bold; line-height: 1.5; } #checkout-step-review .order-box-info .box-title h4 a { font-size: 12px; margin-left: 5px; } /* ============================================ * Checkout - Success ============================================ */ .checkout-onepage-success .col-main { padding: 0; text-align: center; } .checkout-onepage-success .col-main .extra-order-info { text-align: left; margin: 40px 0 0; } .checkout-onepage-success .buttons-set { margin: 10px 0; text-align: center; } .checkout-onepage-success .buttons-set button { float: none; } .checkout-onepage-success .order-details .buttons-set { display: none; } .checkout-onepage-success .order-success-summary { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px #EDEDED solid; text-align: left; } .checkout-onepage-success .order-success-summary .page-title, .checkout-onepage-success .order-success-summary .order-info, .checkout-onepage-success .order-success-summary .order-date, .checkout-onepage-success .order-success-summary .order-items .table-caption { display: none; } /* ============================================ * Configurable Swatches ============================================ */ /* Clears */ .clearfix:after, .configurable-swatch-list:after, .product-view .product-options .swatch-attr:after { content: ''; display: table; clear: both; } /* General Swatch Styling */ .swatch-link, .swatch-label { display: block; border-radius: 3px; font-size: 14px; text-align: center; color: #636363; text-decoration: none; box-sizing: content-box; } .swatch-link { border: 1px solid #CCCCCC; margin: 0 0 3px; } .swatch-link img { border-radius: 2px; } .swatch-link:hover { cursor: pointer; text-decoration: none; } .swatch-link .x { display: none; text-indent: -999em; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../images/bg_x.png) center no-repeat transparent; z-index: 10; } .swatch-link.has-image .swatch-label { position: relative; } .swatch-link.has-image img { position: absolute; top: 0; left: 0; } .swatch-label { border: 1px solid #fff; margin: 0; white-space: nowrap; background: #F4F4F4; } .configurable-swatch-list { margin-left: -3px; zoom: 1; clear: both; -webkit-transform: translateZ(0px); } .configurable-swatch-list li { float: left; zoom: 1; margin: 0 0 0 3px; } .products-grid .configurable-swatch-list li { display: inline-block; float: none; margin: 0; vertical-align: top; } .configurable-swatch-list .not-available .x { display: block; } .configurable-swatch-list .not-available .swatch-link { border-color: #EDEDED; position: relative; } .configurable-swatch-list .not-available .swatch-link.has-image img { opacity: 0.4; filter: alpha(opacity=40); } .configurable-swatch-list .not-available .swatch-label { color: #aaa; background: #fff; } .configurable-swatch-list .wide-swatch .swatch-label { padding: 0 6px; } .configurable-swatch-list .not-available a:focus { outline: 0; } #narrow-by-list dd .configurable-swatch-list li { margin: 0 0 0 3px; width: 100%; } #narrow-by-list dd .swatch-link { border: none; line-height: 25px; margin-right: 2px; text-align: left; } #narrow-by-list dd .swatch-link.has-image { line-height: inherit; } #narrow-by-list dd .swatch-link:hover .swatch-label { border-color: #206bbc; } #narrow-by-list dd .swatch-label { background: #F4F4F4; border: 1px solid #CCCCCC; border-radius: 3px; display: block; float: left; line-height: 1.5em; margin: 0 5px 0 0; padding: 1px 5px; white-space: nowrap; } #narrow-by-list dd .swatch-label img { border: 1px solid #fff; border-radius: 3px; box-sizing: content-box; } #narrow-by-list dd .has-image .swatch-label { padding: 0; } @media only screen and (max-width: 770px) { #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) { clear: left; } } .currently .swatch-current { position: relative; } .currently .swatch-current .btn-remove { margin-top: -10px; position: absolute; right: 0; top: 50%; } .currently .swatch-current span { display: block; float: left; } .currently .swatch-link { display: inline-block; margin: 0 0 0 3px; } .currently .swatch-link:hover { border-color: #CCCCCC; cursor: default; } /* Other Swatch States */ .configurable-swatch-list .hover .swatch-link, .configurable-swatch-list .selected .swatch-link, .swatch-link:hover { border-color: #206bbc; } .configurable-swatch-box { background: none !important; } .configurable-swatch-box select.swatch-select { display: none; } .configurable-swatch-box .validation-advice { margin: 0 0 5px; background: #DF280A; padding: 2px 5px !important; font-weight: bold; color: #fff !important; float: left; display: block; border-radius: 3px; } /* CUSTOM */ .availability.out-of-stock span { color: #A0A0A0; } .product-view .product-options .swatch-attr { float: none; display: block; clear: both; border: 0; } .product-view .product-options .swatch-attr label, .product-view .product-options .swatch-attr .select-label { font-size: 12px; } .product-view .product-options .swatch-attr label { display: block; line-height: 1.3; } .product-view .product-options .swatch-attr .select-label { display: inline; font-weight: normal; color: #206bbc; padding-left: 5px; } .product-view .product-options dd .input-box { width: auto; height: auto; } .product-view .product-options .select-label { display: none; } .product-view .add-to-cart button.out-of-stock { background-position: -80px -362px; cursor: default; } /* ============================================ * Customer ============================================ */ .customer-account-login .scaffold-form label:first-child { width: 115px; } .customer-account-login .col2-set .buttons-set { text-align: left; border-top: 0; } .customer-account-login .col2-set .buttons-set button, .customer-account-login .col2-set .buttons-set .button { float: none; min-width: 50%; margin: 0; } .customer-account-login .col2-set .col-1 ul { list-style: disc; padding-left: 20px; margin: 10px 0 20px 0; } @media only screen and (min-width: 480px) { .customer-account-login .col2-set .col-1, .customer-account-login .col2-set .col-2 { padding-top: 0; margin-top: 20px; } .customer-account-login .col2-set .col-1 { padding-right: 20px; } .customer-account-login .col2-set .col-2 { padding-left: 20px; border-left: 1px solid #EDEDED; } } @media only screen and (min-width: 770px) { .customer-account-login .col2-set .col-1 { padding-right: 0; } .customer-account-login .col2-set .col-2 { padding-left: 60px; border-left: 1px solid #EDEDED; } } @media only screen and (max-width: 479px) { .customer-account-login .col2-set .col-1 { padding-bottom: 30px; } .customer-account-login .col2-set .col-2 { padding-top: 30px; border-top: 1px solid #EDEDED; } } @media only screen and (max-width: 770px) { .customer-account-login .col2-set p.required { display: none; } } .customer-account-create .scaffold-form label:first-child { width: 140px; } .opc #opc-login p:not(.required) { font-style: italic; font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 13px; color: #A0A0A0; } .remember-me-box a.hide { display: none; } .remember-me-box .link-tip { font-size: 13px; padding-left: 10px; } .remember-me-popup { display: none; border: 1px solid #CCCCCC; padding: 10px; position: relative; } .remember-me-popup.show { display: block; } .remember-me-popup p { font-family: "Varela Round", Arial, Verdana, sans-serif; } .remember-me-popup .remember-me-popup-close { position: absolute; top: 0; right: 0; padding: 10px; font-size: 12px; } .remember-me-popup .remember-me-popup-close-button { display: none; } .customer-account-create .buttons-set { max-width: 455px; } .customer-account-create .fieldset, .customer-account-create .buttons-set { margin-left: 30px; } @media only screen and (max-width: 479px) { .customer-account-create .fieldset, .customer-account-create .buttons-set { margin-left: 0; } } .customer-account-create .fieldset .hidden { display: none; } .customer-account-create #remember-me-popup { max-width: 455px; } .customer-account-forgotpassword .fieldset, .customer-account-forgotpassword .buttons-set { margin-left: 30px; max-width: 400px; } @media only screen and (max-width: 479px) { .customer-account-forgotpassword .fieldset, .customer-account-forgotpassword .buttons-set { margin-left: 0; } } .customer-account-forgotpassword .fieldset .input-box input.input-text { width: 100%; } /* ============================================ * My Account Global Styles ============================================ */ body.customer-account .my-account .page-title h1 { border: 0; text-align: left; } body.customer-account .my-account .title-buttons { position: relative; text-align: right; } body.customer-account .my-account .title-buttons h1 { text-align: left; } body.customer-account .my-account .title-buttons .button { position: absolute; right: 0; top: 0; } body.customer-account .my-account .title-buttons a, body.customer-account .my-account .title-buttons span.separator { position: relative; top: -42px; } body.customer-account .my-account .fieldset h2, body.customer-account .my-account .addresses-list h2, body.customer-account .my-account .order-details h2 { width: 100%; display: inline-block; } body.customer-account .my-account .addresses-list h3 { font-size: 14px; font-weight: 600; } body.customer-account .my-account .fieldset { margin-top: 30px; margin-bottom: 30px; } body.customer-account .data-table { margin-top: 5px; } body.customer-account .data-table td a { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; font-style: normal; font-size: 13px; } body.customer-account .data-table span.nobr { white-space: normal; } body.customer-account .data-table span.nobr a { white-space: nowrap; } body.customer-account .data-table td.view a { display: block; } body.customer-account .data-table .separator { display: none; } body.customer-account .sidebar .block ol#compare-items li { margin: 10px 0; } body.customer-account .sidebar .block .block-content p.block-subtitle { margin-bottom: 15px; } body.customer-account .sidebar .block .block-content .actions { margin-top: 30px; } body.customer-account .sidebar ol#cart-sidebar-reorder li { margin-top: 10px; margin-bottom: 0; } body.customer-account .sidebar ol#cart-sidebar-reorder p.product-name { display: inline-block; margin-bottom: 0; } body.customer-account .sidebar .block-cart .summary { margin-bottom: 15px; } body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder li { margin-top: 10px; margin-bottom: 0; } body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder li input { margin-right: 10px; } body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder p.product-name { display: inline; margin-bottom: 0; } .form-list .customer-dob .dob-month, .form-list .customer-dob .dob-day { width: 40px; float: left; margin-right: 10px; } .form-list .customer-dob .dob-year { width: 80px; float: left; } /* ============================================ * Dashboard ============================================ */ .dashboard .box-head { margin-top: 30px; border-bottom: 1px solid #CCCCCC; padding-bottom: 7px; } .dashboard .box-head h2 { font-size: 15px; font-weight: 600; display: inline-block; margin-bottom: 0; } .dashboard .box-head a { padding: 10px; } .dashboard .box-title a, .dashboard .box-head a { text-transform: uppercase; font-size: 12px; } .dashboard .box-account { padding-bottom: 40px; border-bottom: 1px solid #CCCCCC; margin-bottom: 45px; } .dashboard .box-account p, .dashboard .box-account address { font-family: "Varela Round", Arial, Verdana, sans-serif; font-style: italic; } .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 { padding-right: 12.09677%; padding-bottom: 0; } .dashboard .col2-set .col-1 .box-title, .dashboard .col2-set .col-2 .box-title { position: relative; padding-bottom: 10px; } .dashboard .col2-set .col-1 .box-title h2, .dashboard .col2-set .col-1 .box-title h3, .dashboard .col2-set .col-2 .box-title h2, .dashboard .col2-set .col-2 .box-title h3 { font-weight: 600; font-size: 14px; margin-bottom: 0; } .dashboard .col2-set .col-1 .box-title a, .dashboard .col2-set .col-2 .box-title a { line-height: 19.6px; } .dashboard .box-reviews.box-account { padding-bottom: 0; } .dashboard .box-reviews li { padding: 10px 0; border-top: 1px solid #EDEDED; } .dashboard .box-reviews li:first-child { border-top: 0; } .dashboard .box-reviews li .number { margin-right: -20px; float: left; line-height: 1.4; font-size: 13px; } .dashboard .box-reviews li .details { margin-left: 20px; } .dashboard .box-reviews li .details .ratings { content: ''; display: table; clear: both; margin-bottom: 0; } .dashboard .box-reviews li .details .ratings strong { float: left; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 13px; margin-right: 5px; } .dashboard .box-reviews li .details .ratings .rating-box { float: left; margin: 3px 0 0 0; } /* ============================================ * Address Book ============================================ */ .my-account .addresses-list { font-family: "Varela Round", Arial, Verdana, sans-serif; } .my-account .addresses-list .col-1, .my-account .addresses-list .col-2 { padding-bottom: 0; } .my-account .addresses-list .item { margin: 0 0 30px 0; } .my-account .addresses-list .item p { margin-top: 10px; } @media only screen and (max-width: 770px) { .my-account .addresses-list .col-1, .my-account .addresses-list .col-2 { width: 100%; padding-left: 0; padding-right: 0; } .my-account .addresses-list .col-1 li.empty, .my-account .addresses-list .col-2 li.empty { width: 100%; } } @media only screen and (max-width: 599px) { .my-account .addresses-list .addresses-additional p a { white-space: nowrap; } } /* ============================================ * Order View ============================================ */ .order-info { padding-bottom: 10px; border-bottom: 1px solid #EDEDED; width: 100%; margin-bottom: 30px; } .order-info dt, .order-info dd, .order-info ul, .order-info li { display: inline; } .order-info dt { margin-right: 20px; } .order-info li { margin: 0 0 0 20px; } .order-info li.current { font-weight: 600; } .order-info li:first-child { margin-left: 0; } .order-date { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; text-transform: uppercase; } .order-info-box { margin-bottom: 40px; margin-top: 20px; } .order-info-box + .order-info-box { padding-bottom: 40px; border-bottom: 1px solid #EDEDED; } .order-info-box .col-1 { padding-right: 0; width: 48%; } .order-info-box .col-2 { width: 52%; } .order-info-box .col-1, .order-info-box .col-2 { overflow: hidden; padding-top: 0; padding-bottom: 0; } .order-info-box .box-title { width: 150px; padding-right: 10px; float: left; } .order-info-box .box-title h2 { font-size: 14px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-weight: bold; line-height: 1.5; } .order-info-box .box-title h2:after { content: ':'; } .order-info-box .box-content { float: left; font-family: "Varela Round", Arial, Verdana, sans-serif; } .order-info-box .box-content td, .order-info-box .box-content th { font-family: "Varela Round", Arial, Verdana, sans-serif; line-height: 1.3; } .order-info-box .box-content th { padding-top: 10px; } .order-info-box .box-content td { padding-left: 15px; } .order-info-box .box-content strong { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-weight: normal; text-transform: uppercase; } #my-orders-table .option-label { margin-left: 10px; font-weight: 600; font-style: italic; } #my-orders-table .option-value { margin-left: 20px; } #my-orders-table tr.bundle:not(:last-child) td { border-bottom: none; border-top: none; } ol#cart-sidebar-reorder li { margin-top: 10px; margin-bottom: 0; } ol#cart-sidebar-reorder li input { margin-right: 10px; } ol#cart-sidebar-reorder p.product-name { display: inline; } @media only screen and (max-width: 599px) { #my-orders-table .option-label { margin-left: 20px; } #my-orders-table .option-value { margin-left: 35px; } #my-orders-table td[data-rwd-label=Qty] .nobr br { display: none; } #my-orders-table td[data-rwd-label=Qty] .nobr strong { margin-right: 10px; } #my-orders-table tr.bundle { border-color: #EDEDED; } #my-orders-table tr.bundle.child td[data-rwd-label] { padding-left: 60px; } #my-orders-table tbody:last-child tr:last-child td { padding-bottom: 10px; border-bottom: 0; } #my-orders-table tbody:last-child tr:last-child td:last-child { padding-bottom: 15px; } #my-orders-table tfoot tr.shipping { margin-top: 0; } } .order-additional { margin: 40px 0; } .order-gift-message dd { margin-top: 10px; } @media only screen and (max-width: 1199px) { .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 { padding-right: 30px; padding-bottom: 0; } body.customer-account .data-table td.view a { white-space: normal; } } @media only screen and (max-width: 979px) { body.customer-account .my-account .title-buttons { text-align: left; } body.customer-account .my-account .title-buttons span.separator, body.customer-account .my-account .title-buttons a { top: -12px; } } @media only screen and (max-width: 770px) { body.customer-account .data-table.orders th.ship, body.customer-account .data-table.orders td.ship, body.customer-account .data-table.orders td.status, body.customer-account .data-table.orders th.status { display: none; } .order-info-box .box-content { clear: left; } .addresses-list .item { float: left; width: 50%; padding-right: 30px; } .order-info dt { display: none; } .dashboard .page-title { margin-top: 20px; } .dashboard .page-title h1 { margin-top: 0; } .dashboard .welcome-msg { font-family: "Varela Round", Arial, Verdana, sans-serif; } .dashboard .welcome-msg .hello { font-style: italic; } .dashboard .box-account { padding-bottom: 15px; margin-bottom: 30px; } .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 { width: 48%; padding-right: 0; padding-left: 0; } .dashboard .col2-set .col-1 { float: left; margin-right: 4%; } .dashboard .col2-set .col-2 { float: right; } } @media only screen and (max-width: 599px) { body.customer-account .my-account .form-list .control { padding-left: 0; } } @media only screen and (max-width: 479px) { body.customer-account .my-account .page-title h1 { text-align: center; } body.customer-account .my-account .title-buttons { text-align: center; } body.customer-account .my-account .title-buttons .button { width: 100%; position: static; margin-bottom: 15px; } body.customer-account .my-account .title-buttons .button + .button { margin-left: 0px; } body.customer-account .my-account .fieldset h2 { margin-bottom: 15px; } body.customer-account .my-account .order-details h2 { margin-bottom: 15px; } body.customer-account .my-account .buttons-set { border-top: 0; } body.customer-account .my-account .addresses-list .item { margin-bottom: 15px; padding-right: 0; float: none; width: auto; } body.customer-account .my-account .addresses-list h2 { margin-bottom: 15px; } .order-info { margin-top: 15px; } .data-table.orders .link-reorder, .data-table.orders .date { display: none; } .data-table.orders td.view { text-align: right; } .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 { width: 100%; margin-top: 15px; } .order-info-box { margin: 0; } .order-info-box .col-1, .order-info-box .col-2 { width: 100%; border-bottom: 1px solid #EDEDED; padding: 15px 0; } .order-info-box + .order-info-box { padding-bottom: 0; border-bottom: 0; margin-bottom: 30px; } #my-reviews-table .nobr { white-space: normal; } } /* ============================================ * Newsletter Subscriptions ============================================ */ body.newsletter-manage-index .my-account .fieldset { margin-bottom: 20px; } body.newsletter-manage-index .my-account .fieldset h2 { display: none; } body.newsletter-manage-index .my-account .form-list { border-top: 1px solid #EDEDED; padding-top: 10px; } /* ============================================ * Contacts ============================================ */ .contacts-index-index .buttons-set { margin-left: 30px; max-width: 435px; } .contacts-index-index .buttons-set p.required { float: left; } @media only screen and (max-width: 599px) { .contacts-index-index .buttons-set { max-width: 330px; margin-left: 0; } .contacts-index-index .buttons-set button { float: left; margin-left: 0px; } .contacts-index-index .buttons-set p.required { float: right; } } /* ============================================ * PayPal ============================================ */ @media only screen and (max-width: 870px) and (min-width: 771px) { .paypal-review-order .col2-set .col-1, .paypal-review-order .col2-set .col-2 { padding: 0px; } } .paypal-review-order .info-set { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #EDEDED; } .paypal-review-order .buttons-set { margin-top: 0px; padding-top: 0px; border: 0; } .paypal-review-order .buttons-set button { margin-bottom: 10px; } @media only screen and (max-width: 770px) { .paypal-review-order .col-1 { padding-bottom: 0; } .paypal-review-order .field.inactive { display: none; } } .top-container .bml-ad { margin-top: 7px; margin-bottom: 7px; text-align: center; } .top-container .bml-ad span { display: inline-block; } .top-container .bml-ad span a { display: block; } .bml-ad { display: none; text-align: center; margin-bottom: 5px; } .bml-ad span { display: block; line-height: 0; } .bml-ad a { display: inline-block; max-width: 100%; } .bml-ad a:hover { opacity: 0.7; } .bml-ad img { height: auto !important; max-width: 100%; } .cart-totals-wrapper .bml-ad.large img { display: block; margin: 0; } @media only screen and (max-width: 770px) { .bml-ad.small { display: block; } } @media only screen and (min-width: 771px) { .bml-ad.large { display: block; } } div.paypal-logo { text-align: center; margin: 15px 0; max-width: 100%; } div.paypal-logo span { display: block; width: 100%; } div.paypal-logo span a { display: inline-block; max-width: 100%; } div.paypal-logo span a img { max-width: 100%; } div.paypal-logo span > img { display: none; } .checkout-types div.paypal-logo { text-align: right; } .bml-checkout-type { list-style-type: none; } .sidebar .paypal-logo { text-align: center; line-height: 0; } .sidebar .paypal-logo > a { display: inline-block; max-width: 100%; } .sidebar .paypal-logo > a:hover { opacity: 0.8; } .sidebar .paypal-logo > a img { display: block; } .sidebar .paypal-logo .label { margin-top: 4px; } .sidebar .paypal-logo .label a { font-size: 12px; line-height: 1.5; } /* ============================================ * Review - Customer ============================================ */ #customer-reviews { width: auto; float: none; } #customer-reviews .review-heading { border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 10px 0 5px; } #customer-reviews .review-heading:after { content: ''; display: table; clear: both; } #customer-reviews .review-heading h2 { float: left; display: block; } #customer-reviews .review-heading .pager { clear: none; float: right; width: auto; } #customer-reviews .review-heading .pager .count-container .limiter { margin-bottom: 0; } #customer-reviews .review-heading .pager .count-container .limiter label { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 10px; text-transform: uppercase; } #customer-reviews .review-heading .pager .amount { display: none; } #customer-reviews h2 { color: #206bbc; font-size: 12px; text-transform: uppercase; } #customer-reviews h2 span { color: #636363; } #customer-reviews h3 { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; text-transform: uppercase; } #customer-reviews h3 span { color: #206bbc; } #customer-reviews .fieldset { padding-top: 25px; width: 470px; } #customer-reviews .fieldset h4 { border-bottom: 1px solid #CCCCCC; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; padding-bottom: 5px; text-transform: uppercase; } #customer-reviews .fieldset h4 em { display: none; } #customer-reviews .fieldset .form-list { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; margin: 10px 0; text-transform: uppercase; width: 470px; } #customer-reviews .fieldset .form-list .inline-label:after { content: ''; display: table; clear: both; } #customer-reviews .fieldset .form-list label { font-size: 12px; font-weight: normal; } #customer-reviews .fieldset .form-list textarea { border: 1px solid #CCCCCC; border-radius: 0; min-width: 100%; -webkit-appearance: none; } #customer-reviews .fieldset .form-list input { border: 1px solid #CCCCCC; border-radius: 0; } #customer-reviews .fieldset .form-list input[type="text"] { width: 100%; } #customer-reviews .buttons-set { border: none; margin: 0; width: 470px; } #customer-reviews dl { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; margin-bottom: 10px; } #customer-reviews dl dt { margin: 10px 0; text-transform: uppercase; } #customer-reviews dl dd { font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 14px; margin: 10px 0; } #customer-reviews dl dd .ratings-table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; width: 100%; } #customer-reviews dl dd .ratings-table tr { margin-right: 15px; } #customer-reviews dl dd .ratings-table .review-label { width: 300px; max-width: 70%; } #customer-reviews dl dd table { margin: 15px 0; } #customer-reviews dl dd .review-meta { color: #206bbc; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 10px; font-weight: normal; text-transform: uppercase; } .review-summary-table { border-bottom: 1px solid #CCCCCC; margin: 0 0 10px; } .review-summary-table thead { background: transparent; } .review-summary-table thead th { background: transparent; border: none; padding: 15px 7px 10px 8px; } .review-summary-table tbody th { background: #FFFFFF; font-size: 12px; } .review-summary-table tbody td { border: none; text-align: center; padding: 0; } .review-summary-table tbody td label { width: 100%; display: block; padding: 11px 0; } .review-summary-table .rating-box .rating-number { display: none; } .review-summary-table .rating-box .rating-number:after { content: ""; display: inline-block; background-position: 0px -599px; width: 13px; height: 14px; margin-left: 5px; position: relative; top: 2px; } /* ============================================ * Ratings - Global ============================================ */ .ratings-table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; text-transform: uppercase; } .ratings-table th { padding-right: 10px; } .ratings-table .rating-box { background-position: 0 -615px; background-repeat: repeat-x; height: 13px; overflow: hidden; text-indent: -9999px; width: 65px; } .ratings-table .rating-box .rating { background-position: 0 -600px; background-repeat: repeat-x; float: left; height: 13px; text-indent: -9999px; } @media only screen and (max-width: 770px) { body.review-product-list .product-view .product-shop .price-info { padding-left: 0; } body.review-product-list .product-view .product-shop .extra-info { padding: 0; min-width: 84%; } body.review-product-list .product-view .product-shop .extra-info .ratings-table { margin: 10px 0; width: 100%; } body.review-product-list .product-view .product-shop .extra-info .ratings-table tr { margin-right: 15px; } } @media only screen and (max-width: 535px) { body.review-product-list .product-view .product-shop .extra-info { min-width: 0; } body.review-product-list .product-view .product-shop .extra-info .ratings-table tr { float: none; margin-right: 0; } } @media only screen and (max-width: 520px) { #customer-reviews .fieldset { width: 100%; } #customer-reviews .fieldset .form-list { width: 100%; } #customer-reviews .fieldset .form-list .inline-label label, #customer-reviews .fieldset .form-list .inline-label .input-box { float: none; } #customer-reviews .buttons-set { width: 100%; } #customer-reviews .review-summary-table thead th { padding-left: 0px; padding-right: 0px; } #customer-reviews .review-summary-table tbody th { padding-left: 0px; padding-right: 0px; } #customer-reviews .review-summary-table tbody td { width: 20%; padding: 0px; } #customer-reviews .review-summary-table .rating-box { text-indent: 0px; text-align: center; background: none; height: 19.6px; width: 100%; } #customer-reviews .review-summary-table .rating-box .rating { display: none; } #customer-reviews .review-summary-table .rating-box .rating-number { display: inline-block; } } @media only screen and (max-width: 450px) { #customer-reviews dl dd .ratings-table tr { float: none; } } /* ============================================ * Review View Page ============================================ */ .review-product-view .product-review .product-details h2 { border-bottom: none; } .review-product-view .product-review .product-img-box { width: auto; max-width: 50%; } .review-product-view .product-review .product-img-box > a { width: 100%; } .review-product-view .product-review .product-img-box .product-image { width: 100%; } @media only screen and (max-width: 770px) { .review-product-view .product-review .product-img-box { max-width: 100%; } } /* ============================================ * Slideshow ============================================ */ .slideshow-container { position: relative; display: block; width: 100%; margin: 10px 0; border: 1px solid #EDEDED; } .slideshow-container .slideshow { width: 100%; padding: 0; position: relative; margin: 0; border: 10px solid #FFFFFF; } .slideshow-container .slideshow > li { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; margin: 0; } .slideshow-container .slideshow > li:first-child { position: static; z-index: 100; } .slideshow-container .slideshow > li img { max-width: 100%; width: 100%; } .slideshow-pager { text-align: center; width: 100%; z-index: 115; position: absolute; bottom: 0px; top: auto; overflow: hidden; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } .slideshow-pager span { font-family: arial; width: 44px; height: 44px; display: inline-block; color: #DDDDDD; cursor: pointer; } .slideshow-pager span:before { content: ''; display: block; width: 16px; height: 16px; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; border-radius: 1px; background-color: #FFFFFF; position: relative; } .slideshow-pager span:hover:before { background-color: #e7582e; } .slideshow-pager span.cycle-pager-active:before { background-color: #e2471a; } .slideshow-pager > * { cursor: pointer; } .slideshow-prev, .slideshow-next { position: absolute; top: 0; width: 15%; max-width: 80px; height: 100%; opacity: 0.6; z-index: 110; cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } .slideshow-prev:before, .slideshow-next:before { content: ''; width: 0; height: 0; font-size: 0; position: absolute; border-style: solid; display: block; top: 50%; margin-top: -15px; } .slideshow-prev:hover, .slideshow-next:hover { opacity: 1; } .slideshow-prev.disabled, .slideshow-next.disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; } .slideshow-prev { left: 8px; } .slideshow-prev:before { border-width: 15px 15px 15px 0; border-color: transparent #FFFFFF transparent transparent; top: 50%; left: 10px; } .slideshow-prev:hover:before { border-color: transparent #e7582e transparent transparent; } .slideshow-next { right: 8px; } .slideshow-next:before { border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #FFFFFF; top: 50%; right: 10px; } .slideshow-next:hover:before { border-color: transparent transparent transparent #e7582e; } .cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 110; } .cycle-overlay { font-family: tahoma, arial; position: absolute; bottom: 0; width: 100%; z-index: 120; background: black; color: white; padding: 15px; opacity: .5; } /* ============================================ * Wishlist ============================================ */ #wishlist-table th { text-align: center; } #wishlist-table.clean-table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; text-transform: uppercase; width: 100%; } #wishlist-table.clean-table th { border-bottom: 1px solid #C0C0C0; } #wishlist-table.clean-table td { padding: 15px; vertical-align: top; } #wishlist-table.clean-table thead th { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; text-transform: uppercase; } #wishlist-table .product-name { font-size: 16px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; margin-bottom: 0; text-transform: uppercase; } #wishlist-table .product-name a { color: #ea6a45; } #wishlist-table .wishlist-sku { font-size: 11px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; margin: 5px 0; } #wishlist-table textarea { border: 1px solid #C0C0C0; width: 100%; height: 45px; font-size: 11px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } #wishlist-table textarea::-webkit-input-placeholder { text-transform: uppercase; } #wishlist-table textarea:-moz-placeholder { text-transform: uppercase; } #wishlist-table textarea::-moz-placeholder { text-transform: uppercase; } #wishlist-table textarea:-ms-input-placeholder { text-transform: uppercase; } #wishlist-table textarea:focus { border: 1px solid #ea6a45; } #wishlist-table .item-manage { text-align: right; max-width: 450px; padding-top: 5px; } #wishlist-table .item-manage .button { font-size: 11px; padding: 3px 5px; } #wishlist-table .cart-cell { text-align: center; } #wishlist-table td.customer-wishlist-item-image { width: 113px; } #wishlist-table td.customer-wishlist-item-quantity { width: 3em; } #wishlist-table td.customer-wishlist-item-price { width: 120px; text-align: center; } #wishlist-table td.customer-wishlist-item-cart { width: 150px; } #wishlist-table td.customer-wishlist-item-cart .button { font-size: 12px; margin-bottom: 10px; padding: 3px 5px; width: 100%; } #wishlist-table td.customer-wishlist-item-cart .truncated { margin-bottom: 10px; } #wishlist-table td.customer-wishlist-item-cart > p { margin-bottom: 0; } #wishlist-table td.customer-wishlist-item-cart .remove-whishlist-item { text-align: center; } #wishlist-table td.customer-wishlist-item-cart .btn-remove { vertical-align: top; } #wishlist-table td.customer-wishlist-item-remove { width: 20px; } #wishlist-table td .button, #wishlist-table td button { white-space: normal; } #wishlist-table .price-box { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; } #wishlist-table .price-box .price { color: #636363; } #wishlist-table .giftregisty-add { margin-top: 5px; } #wishlist-table .giftregisty-add .change { display: none; } #wishlist-table .giftregisty-add li { cursor: pointer; color: #ea6a45; margin-bottom: 3px; } #wishlist-table .truncated .details { background: none; color: #ea6a45; } #wishlist-table td[data-rwd-label]:before { font-weight: 600; } @media only screen and (max-width: 1199px) { #wishlist-table.clean-table td { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 979px) { #wishlist-table.clean-table td { padding-left: 5px; padding-right: 5px; } #wishlist-table.clean-table td textarea { height: 100px; } #wishlist-table.clean-table td.customer-wishlist-item-cart { width: 110px; } #wishlist-table .product-name { font-size: 13px; } } @media only screen and (max-width: 770px) { #wishlist-table:after { content: ''; display: table; clear: both; } #wishlist-table .product-name { font-size: 16px; } #wishlist-table textarea { height: 68px; max-width: 100%; } #wishlist-table .item-manage { max-width: 100%; } #wishlist-table tr { position: relative; } #wishlist-table tr:after { content: ''; display: table; clear: both; } #wishlist-table td.customer-wishlist-item-image { width: 70px; } #wishlist-table td.customer-wishlist-item-image img { width: 70px; height: 70px; } #wishlist-table td.customer-wishlist-item-cart p { margin-bottom: 0; } #wishlist-table td.customer-wishlist-item-cart .remove-whishlist-item { margin-right: 0; padding-top: 4px; } #wishlist-table td.customer-wishlist-item-cart { padding-right: 15px; } } @media only screen and (max-width: 599px) { #wishlist-table td.customer-wishlist-item-quantity { padding-left: 0; } #wishlist-table td.customer-wishlist-item-image, #wishlist-table th.customer-wishlist-item-image { display: none; } } @media only screen and (max-width: 479px) { #wishlist-table tr { position: relative; } #wishlist-table th.customer-wishlist-item-image { display: block; } #wishlist-table td.customer-wishlist-item-image, #wishlist-table td.customer-wishlist-item-info, #wishlist-table td.customer-wishlist-item-quantity, #wishlist-table td.customer-wishlist-item-price, #wishlist-table td.customer-wishlist-item-cart { width: 100%; padding-left: 0; padding-right: 0; empty-cells: hide; } #wishlist-table td.customer-wishlist-item-image { display: block; overflow: hidden; } #wishlist-table td.customer-wishlist-item-image a { float: left; } #wishlist-table td.customer-wishlist-item-image a img { width: 113px; height: 113px; } #wishlist-table td.customer-wishlist-item-quantity, #wishlist-table td.customer-wishlist-item-price { text-align: left; } #wishlist-table td.customer-wishlist-item-quantity:before, #wishlist-table td.customer-wishlist-item-price:before { float: left; margin-right: 15px; } #wishlist-table td.customer-wishlist-item-quantity .cart-cell, #wishlist-table td.customer-wishlist-item-price .cart-cell { text-align: left; } #wishlist-table td.customer-wishlist-item-quantity .price-box, #wishlist-table td.customer-wishlist-item-price .price-box { margin-top: 0; } #wishlist-table td.customer-wishlist-item-cart .cart-cell { float: left; width: 48%; } #wishlist-table td.customer-wishlist-item-cart > p { float: right; width: 48%; } #wishlist-table td.customer-wishlist-item-remove { position: absolute; top: 15px; right: 0px; display: block; padding: 0px; height: 20px; } #wishlist-table.clean-table td.customer-wishlist-item-cart { width: 100%; } } /* ============================================ * Wishlist Sidebar ============================================ */ .block-wishlist .mini-products-list > li:not(:last-child) { padding-bottom: 5px; } .block-wishlist .product-details .product-name { padding-top: 0; margin-bottom: 5px; } .block-wishlist .price-box { float: left; margin: 0; } .block-wishlist .price-box, .block-wishlist .price-box .price, .block-wishlist .link-cart { font-size: 12px; } .block-wishlist .link-cart { float: left; text-transform: uppercase; margin-right: 7px; padding-right: 7px; border-right: 1px solid #EDEDED; } /* ============================================ * Checkout - Mini cart ============================================ */ .header-minicart { display: inline-block; } @media only screen and (max-width: 770px) { .header-minicart { display: block; } } .header-minicart .minicart-message { display: block; padding: 10px; } .header-minicart .empty { padding: 10px; text-align: center; } .header-minicart .minicart-wrapper { clear: both; position: relative; } .header-minicart .minicart-wrapper:before, .header-minicart .minicart-wrapper:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .header-minicart .minicart-wrapper:before { background-color: white; opacity: 0.8; z-index: 2; } .header-minicart .minicart-wrapper:after { background-image: url("../images/opc-ajax-loader.gif"); background-repeat: no-repeat; background-position: center; z-index: 3; } .header-minicart .minicart-wrapper.loading { position: relative; } .header-minicart .minicart-wrapper.loading:before, .header-minicart .minicart-wrapper.loading:after { display: block; } .header-minicart .block-cart { display: none; } .header-minicart .block-subtitle { color: #50A4CF; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 10px; font-weight: bold; line-height: 1.4; padding: 5px; text-align: center; text-transform: uppercase; margin-bottom: 0px; } .header-minicart .block-subtitle .close { width: 40px; float: right; display: block; color: #636363; text-decoration: none; font-weight: normal; font-size: 30px; position: absolute; top: -8px; right: -3px; } .header-minicart .mini-products-list { padding: 10px; padding-top: 0px; } .header-minicart .mini-products-list li { padding: 8px 5px 8px 11px; border-bottom: 1px solid #DDDDDD; position: relative; } .header-minicart .mini-products-list li.last { border: none; } .header-minicart .mini-products-list li .product-details { position: relative; } .header-minicart .product-details .product-name { padding-top: 0px; font-weight: bold; } .header-minicart .product-details .product-name a { color: #ea6a45; } .header-minicart .info-wrapper { margin-bottom: 0.5em; } .header-minicart .info-wrapper th { text-transform: uppercase; padding-right: 10px; } .header-minicart .info-wrapper td { color: #206bbc; clear: right; } .header-minicart .info-wrapper .qty-wrapper td { height: 33px; line-height: 33px; } .header-minicart .info-wrapper .qty { padding-left: 4px; padding-right: 4px; margin-right: 2px; width: 3.2em; text-align: center; height: 30px; } .header-minicart .info-wrapper .quantity-button { opacity: 0; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 100ms; -o-transition-duration: 100ms; -webkit-transition-duration: 100ms; transition-duration: 100ms; } .header-minicart .info-wrapper .quantity-button[disabled] { cursor: default; } .header-minicart .info-wrapper .quantity-button.visible { opacity: 1; } .header-minicart .subtotal { background-color: #DDDDDD; text-align: center; line-height: 2em; } .header-minicart .subtotal .label { color: white; text-transform: uppercase; } .header-minicart .subtotal .price { color: #206bbc; } .header-minicart .minicart-actions { padding: 10px; margin-top: 0px; overflow: hidden; position: relative; text-align: center; } .header-minicart .minicart-actions .checkout-button { min-width: 145px; } .header-minicart .minicart-actions .cart-link { height: 33px; line-height: 39px; text-transform: uppercase; font-size: 13px; } .header-minicart .minicart-actions .paypal-logo .paypal-or { line-height: 1.6; } .header-minicart #minicart-error-message { text-align: center; color: red; display: none; } .header-minicart #minicart-success-message { text-align: center; color: green; display: none; } .header-minicart .jcarousel-control-prev, .header-minicart .jcarousel-control-next { display: none; } .header-minicart.skip-active .block-cart, .block-cart.skip-active { display: block; } @media only screen and (min-width: 771px) { .checkout-types.minicart { float: none; text-align: center; } } @media only screen and (max-width: 479px) { .header-minicart a.skip-cart { z-index: 1; } } @media only screen and (max-width: 770px) { .header-minicart .subtotal .label { color: #636363; } .header-minicart .minicart-wrapper:before { background-color: #EDEDED; } .header-minicart .quantity-button { float: none; } .header-minicart .header-minicart .block-cart { padding: 15px; } .header-minicart .header-minicart .block-subtitle { padding-top: 59px; } .header-minicart .minicart-actions { padding-bottom: 33px; } .header-minicart .minicart-actions .cart-link { bottom: 0; right: 10px; position: absolute; } .header-minicart .minicart-actions .checkout-types.minicart li { display: inline-block; } .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo > a { display: inline; } .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .bml_button { display: inline-block; vertical-align: top; } .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or { width: auto; float: none; display: inline; margin: 0 10px 5px 10px; line-height: 40px; } } @media only screen and (max-width: 740px) { .header-minicart .minicart-actions .cart-link { right: auto; left: 0; text-align: center; width: 100%; } .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or, .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-button { width: 100%; display: block; margin-left: 0; } .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or { line-height: 1.6; } } @media only screen and (max-width: 599px) { .header-minicart .minicart-actions .checkout-button { width: 100%; } } /* ============================================ * Search - Auto Suggest ============================================ */ .search-autocomplete { left: 0 !important; overflow: visible !important; position: relative !important; top: 15px !important; width: 100% !important; z-index: 200; } .search-autocomplete ul { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #FFFFFF; border: 1px solid #206bbc; left: 0; padding-left: 0; position: absolute; top: 0; width: 100%; } .search-autocomplete ul li { border-bottom: 1px solid #F4F4F4; color: #ea6a45; cursor: pointer; font-size: 12px; padding: 4px 6px; text-align: left; } .search-autocomplete ul li:hover { color: #e7582e; } .search-autocomplete ul li.selected { background-color: #ea6a45; color: white; } .search-autocomplete ul li .amount { float: right; font-weight: bold; } .search-autocomplete ul li:last-child { border-bottom: none; } .search-autocomplete:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ea6a45; border-top: none; left: 50%; top: -7px; } /* ============================================ * Search - Advanced ============================================ */ .advanced-search { background: #F4F4F4; border: 1px solid #EDEDED; padding: 30px; } .advanced-search select.multiselect option { border-bottom: 1px solid #EDEDED; padding: 2px 5px; } @media only screen and (max-width: 479px) { .advanced-search { padding: 15px; } } /* ============================================ * Account - Reviews ============================================ */ .product-review .product-img-box p.label { border-bottom: 1px solid #CCCCCC; font-size: 16px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; margin-top: 20px; padding-bottom: 10px; text-transform: uppercase; } .product-review .product-img-box .rating-box { margin: 15px 0; } .product-review .product-details h2 { border-bottom: 1px solid #CCCCCC; color: #3399CC; font-size: 16px; font-weight: 600; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; padding-bottom: 10px; } .product-review .ratings-table { font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } .product-review .ratings-table th { padding-right: 10px; } .product-review .ratings-table tr { float: left; font-size: 12px; margin-right: 10px; text-transform: uppercase; } .product-review .ratings-description dt { border-bottom: 1px solid #CCCCCC; font-size: 16px; font-weight: 400; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; margin-top: 20px; padding: 10px 0; text-transform: uppercase; } .product-review .ratings-description dd { color: #737373; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 13px; } @media only screen and (min-width: 771px) { .product-review .ratings-table tr { float: none; } } @media only screen and (min-width: 1126px) { .product-review .ratings-table tr { float: left; margin-right: 15px; } } @media only screen and (max-width: 320px) { .product-review .ratings-table tr { float: none; } } /* ============================================ * CMS Pages ============================================ */ .cms-page-view .page-title h1, .cms-page-view .page-title h3, .cms-page-view .page-head h1, .cms-page-view .page-head h3, .cms-no-route .page-title h1, .cms-no-route .page-title h3, .cms-no-route .page-head h1, .cms-no-route .page-head h3 { border: none; } .cms-page-view .std, .cms-no-route .std { font-family: "Varela Round", Arial, Verdana, sans-serif; font-size: 14px; color: #636363; } .cms-page-view .std img, .cms-no-route .std img { max-width: 100%; } .cms-page-view .std p, .cms-no-route .std p { margin: 0 0 1em; } .cms-page-view .std h1, .cms-no-route .std h1 { color: #206bbc; } .cms-page-view .std h2, .cms-no-route .std h2 { color: #206bbc; } .cms-page-view .std ul, .cms-no-route .std ul { margin: 0 0 1em 1.5em; } .cms-page-view .std ol, .cms-no-route .std ol { margin: 0 0 1em 2.5em; } .cms-page-view .std li, .cms-no-route .std li { margin: 0 0 .5em; } .cms-page-view .col-left:after, .cms-no-route .col-left:after { content: ''; display: table; clear: both; } .cms-no-route .std img { width: 100%; } .cms-page-view .std .messages, .cms-home .std .messages, .cms-no-route .std .messages { margin-bottom: 10px; } .cms-page-view .std .messages ul, .cms-home .std .messages ul, .cms-no-route .std .messages ul { margin-bottom: 0; } .cms-page-view .std .messages li, .cms-home .std .messages li, .cms-no-route .std .messages li { list-style: none; margin-left: 0; font-style: normal; font-family: "Varela Round", Arial, Verdana, sans-serif; } #accordion .toggle-tabs { display: none; } #accordion > dl > dt { margin: 0; margin-bottom: 10px; color: #636363; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1.4; text-rendering: optimizeSpeed; text-transform: uppercase; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-weight: normal; margin-bottom: 0px; padding: 7px 10px 7px 24px; border-width: 1px; border-style: solid; border-color: #CCCCCC; position: relative; background-color: #F4F4F4; display: block; } #accordion > dl > dt:after { content: ''; position: absolute; width: 0; height: 0; display: block; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 4px solid #ea6a45; border-bottom: none; left: 10px; top: 50%; margin-top: -3px; } #accordion > dl > dt:hover { background-color: #ededed; } #accordion > dl > dd { padding: 10px; margin: 0; border-width: 0 1px; border-style: solid; border-color: #CCCCCC; } #accordion > dl > dd:last-child { border-width: 0 1px 1px 1px; } #accordion li { position: relative; overflow: hidden; } #accordion li .plusimage h2 { margin-right: 10px; } .page-sitemap .links { display: block; text-align: right; margin: 0 20px 0 0; } .page-sitemap .links a { position: relative; } .page-sitemap .sitemap { padding: 0 20px; margin: 15px 0; font-size: 12px; } .page-sitemap .sitemap li { margin: 3px 0; } .contacts-index-index h1 { border: none; } #contactForm { padding-left: 40px; } #contactForm h2 { display: none; } #contactForm:after { content: ''; display: table; clear: both; } #contactForm .fieldset .legend + .required { margin: 0; } @media only screen and (max-width: 770px) { #contactForm { padding-left: 0; } } /* ============================================ * Pricing Conditions ============================================ */ .price-box .minimal-price-link .label { color: #CF5050; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; font-size: 12px; text-transform: uppercase; } .map-info { white-space: nowrap; } .catalog-product-view .map-info { white-space: normal; } .catalog-product-view .map-info > span { float: right; margin-bottom: 5px; } .catalog-product-view .map-info .price-box.map-info > a { float: right; width: 100%; } /* ============================================ * Cookies ============================================ */ .notice-cookie .notice-inner { padding-bottom: 0; } .notice-cookie .notice-inner:after { content: ''; display: table; clear: both; } .notice-cookie .notice-text { float: left; max-width: 90%; padding-top: 4px; text-align: left; } .notice-cookie .notice-text p { padding-bottom: 14.5px; line-height: 1.3; } .notice-cookie .actions { float: left; text-align: right; padding-bottom: 14.5px; } @media only screen and (max-width: 979px) { .notice-cookie .notice-text { max-width: 86%; } } @media only screen and (max-width: 770px) { .notice-cookie { padding: 0 20px; } .notice-cookie .notice-text { max-width: 82%; padding-top: 0; } } @media only screen and (max-width: 620px) { .notice-cookie { padding: 0 20px; } .notice-cookie .notice-inner { background-position: left 10px; } .notice-cookie .notice-inner:after { content: ''; display: table; clear: both; } .notice-cookie .notice-text { float: none; max-width: 100%; padding-top: 0; } .notice-cookie .actions { text-align: left; } } /* ============================================ * Tags ============================================ */ #addTagForm button { margin-top: 5px; margin-bottom: 10px; } #addTagForm .form-add { margin-top: 10px; } .product-tags { background-color: #F4F4F4; border: 1px solid #CCCCCC; float: left; margin-bottom: 10px; padding: 5px 1% 10px; width: 98%; } .product-tags li { float: left; margin-right: 15px; } .product-tags li.last { margin-right: 0px; } .tags-list { float: left; width: 100%; margin-bottom: 10px; } .tags-list > li { float: left; margin-right: 10px; } .block-tags .actions > a { font-size: 12px; } .my-tag-edit .button.btn-remove { padding: 0; } .my-tag-edit .button.btn-remove:after { color: white; } @media only screen and (max-width: 770px) { .tags-list > li, .tags-list { float: none; } } /* ============================================ * Captcha ============================================ */ .captcha-note { clear: left; padding-top: 5px; } .captcha-image { float: left; display: inline; max-width: 100%; position: relative; width: 258px; margin-bottom: 10px; } .captcha-image .captcha-img { border: 1px solid #b6b6b6; vertical-align: bottom; width: 100%; } .registered-users .captcha-image { margin: 0; } .captcha-reload { cursor: pointer; position: absolute; top: 2px; right: 2px; } .captcha-reload.refreshing { animation: rotate 1.5s infinite linear; -webkit-animation: rotate 1.5s infinite linear; -moz-animation: rotate 1.5s infinite linear; } .customer-account-create .scaffold-form .captcha-input-container label:first-child { width: 100%; } .captcha-reload { position: absolute; right: 4px; top: 4px; } .captcha-img { border: 20px solid #bbb; } .captcha-input-container { margin-bottom: 10px; } .control.newsletter-box, .captcha-input-container, .captcha-img-container { float: none; clear: both; } .control.newsletter-box:after, .captcha-input-container:after, .captcha-img-container:after { content: ''; content: ''; display: table; clear: both; } /* ============================================ * Checkout Billing Fix to place the Captcha properly ============================================ */ #co-billing-form ul.form-list > .control { float: left; margin: 0 0 5px; width: 100%; } /* ============================================ * Account - Orders, Invoices, Credit Memos. ============================================ */ @media only screen and (max-width: 479px) { .sales-order-invoice .sub-title, .sales-order-creditmemo .sub-title, .sales-order-shipment .sub-title { float: left; font-size: 15px; text-align: center; width: 100%; } .sales-order-invoice .order-links, .sales-order-creditmemo .order-links, .sales-order-shipment .order-links { text-align: center; width: 100%; } } /* ============================================ * Recurring Profiles ============================================ */ #recurring_profile_list_view th { white-space: normal; } #recurring_profile_list_view th span { white-space: inherit; } @media only screen and (max-width: 479px) { #recurring_profile_list_view { font-size: 12px; } #recurring_profile_list_view a { font-size: inherit; } #recurring_profile_list_view th, #recurring_profile_list_view td { padding: 2px; } } .recurring-profiles-title { float: left; } .recurring-profiles-title h1 { margin-bottom: 7px; } body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons { float: right; text-align: right; margin-bottom: 30px; } @media only screen and (max-width: 479px) { body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons { text-align: center; float: none; } } body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons .button { position: static; } .recurring-profiles-messages:after { content: ''; display: table; clear: both; } #recurring_start_date_trig { display: inline; } /* ============================================ * Billing Agreements ============================================ */ .billing-agreements .info-box { margin-bottom: 30px; } .billing-agreements .info-box:after { content: ''; display: table; clear: both; } .billing-agreements .info-box .form-list { max-width: 400px; width: 100%; } .billing-agreements .info-box .box-title { margin-top: 20px; margin-bottom: 7px; } .billing-agreements .info-box .button { float: right; margin-top: 7px; } @media only screen and (max-width: 479px) { .billing-agreements .info-box .button { width: 100%; float: none; } } .billing-agreements #payment_method { width: 100%; margin-top: 7px; margin-bottom: 7px; } .billing-agreement-view-header-wrapper .heading { max-width: 80%; } @media only screen and (max-width: 479px) { .billing-agreement-view-header-wrapper .heading { max-width: 100%; } } .billing-agreement-details td, .billing-agreement-details th { padding: 3.5px; } @media only screen and (max-width: 979px) { .billing-agreements .data-table .created-at, .billing-agreements .data-table .updated-at { display: none; } } /* ============================================ * Popular Search Terms Cloud ============================================ */ .catalogsearch-term-popular .tags-list { float: left; width: 100%; } .catalogsearch-term-popular .tags-list > li { float: left; height: 40px; margin-right: 25px; } /* ============================================ * Widgets ============================================ */ /* -------------------------------------------- * Add to cart by SKU */ .sidebar .widget-addbysku .sku-table .input-text:not(.qty) { width: 100%; } @media only screen and (min-width: 771px) { .sidebar .widget-addbysku .sku-table .input-text:not(.qty) { max-width: 100px; } } .widget { clear: both; } .widget .pager { float: none; width: 100%; } @media only screen and (min-width: 1199px) { .col2-left-layout .col-main .widget, .col2-right-layout .col-main .widget, .col3-layout .col-main .widget { /* Config: Columns + flexible gutter */ /* Undo three-column config */ /* Set column config */ /* Config: Columns + flexible gutter */ /* Undo three-column config */ /* Set column config */ } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(odd), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(odd), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(odd) { clear: none; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n+1), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n+1), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n+1) { clear: none; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(even), .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(even), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(even), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n) { margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li, .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li, .col3-layout .col-main .widget .products-grid--max-4-col-widget > li { margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li, .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li, .col3-layout .col-main .widget .products-grid--max-4-col-widget > li { width: 23.33333%; margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n+1), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n+1), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n+1) { clear: left; } .col2-left-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n), .col2-right-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n), .col3-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n) { margin-right: 0; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(odd), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(odd), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(odd) { clear: none; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n+1), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n+1), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n+1) { clear: none; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(even), .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(even), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(even), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n) { margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li, .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li, .col3-layout .col-main .widget .products-grid--max-5-col-widget > li { margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li, .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li, .col3-layout .col-main .widget .products-grid--max-5-col-widget > li { width: 18.22222%; margin-right: 2.22222%; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n+1), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n+1), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n+1) { clear: left; } .col2-left-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n), .col2-right-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n), .col3-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n) { margin-right: 0; } } @media only screen and (min-width: 770px) { .col1-layout .col-main .widget { /* Config: Columns + flexible gutter */ /* Undo three-column config */ /* Set column config */ /* Config: Columns + flexible gutter */ /* Undo three-column config */ /* Set column config */ } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(odd) { clear: none; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n+1) { clear: none; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(even), .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(3n) { margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li { margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li { width: 23.33333%; margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n+1) { clear: left; } .col1-layout .col-main .widget .products-grid--max-4-col-widget > li:nth-of-type(4n) { margin-right: 0; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(odd) { clear: none; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n+1) { clear: none; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(even), .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(3n) { margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li { margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li { width: 18.22222%; margin-right: 2.22222%; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n+1) { clear: left; } .col1-layout .col-main .widget .products-grid--max-5-col-widget > li:nth-of-type(5n) { margin-right: 0; } } /* ============================================ * Checkout - Multiple Addresses ============================================ */ body[class*="checkout-multishipping-"] .checkout-progress { width: 100%; float: left; margin-bottom: 25px; } body[class*="checkout-multishipping-"] .checkout-progress > li { float: left; width: 20%; text-align: center; padding: 8px 1% 6px; background: #F4F4F4; text-transform: uppercase; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; margin-bottom: 10px; font-family: "Dosis", "Helvetica Neue", Arial, Verdana, sans-serif; } body[class*="checkout-multishipping-"] .checkout-progress > li.active { background-color: #DDDDDD; } body[class*="checkout-multishipping-"] .checkout-progress > li.last { border-right: 0px; } body[class*="checkout-multishipping-"] .page-title { float: left; width: 100%; margin-bottom: 15px; } body[class*="checkout-multishipping-"] .page-title h1 { border: 0 none; float: left; margin-top: 2px; margin-right: 2%; } body[class*="checkout-multishipping-"] .page-title .button { float: right; } body[class*="checkout-multishipping-"] .multiple-checkout > h2 { text-transform: none; font-size: 17px; margin-bottom: 15px; } body[class*="checkout-multishipping-"] .messages { float: left; width: 100%; } body[class*="checkout-multishipping-"] .col-2.col-wide { width: 66%; } body[class*="checkout-multishipping-"] .col-1.col-narrow { width: 30%; } body[class*="checkout-multishipping-"] .actions { margin-bottom: 10px; } body[class*="checkout-multishipping-"] .grand-total { text-align: right; font-size: 16px; font-weight: bold; } body[class*="checkout-multishipping-"] #checkout-review-submit { float: right; } body[class*="checkout-multishipping-"] #review-buttons-container { float: right; text-align: right; } .checkout-multishipping-addresses .btn-remove2 { text-indent: -5555px; display: block; width: 22px; height: 22px; } .checkout-multishipping-shipping .gift-messages { margin-top: 20px; } .checkout-multishipping-shipping .gift-messages-form { margin-top: 15px; } .checkout-multishipping-shipping .gift-messages-form h4 { margin-top: 15px; margin-bottom: 5px; } .checkout-multishipping-shipping .gift-messages-form .form-list { margin-top: 10px; margin-bottom: 25px; } .checkout-multishipping-shipping .gift-messages-form .item { margin-top: 15px; } .checkout-multishipping-shipping .col-1 .box-title h2, .checkout-multishipping-shipping .col-1 .box-title h3, .checkout-multishipping-shipping .col-1 .box-title h4, .checkout-multishipping-shipping .col-2 .box-title h2, .checkout-multishipping-shipping .col-2 .box-title h3, .checkout-multishipping-shipping .col-2 .box-title h4, .checkout-multishipping-billing .col-1 .box-title h2, .checkout-multishipping-billing .col-1 .box-title h3, .checkout-multishipping-billing .col-1 .box-title h4, .checkout-multishipping-billing .col-2 .box-title h2, .checkout-multishipping-billing .col-2 .box-title h3, .checkout-multishipping-billing .col-2 .box-title h4, .checkout-multishipping-overview .col-1 .box-title h2, .checkout-multishipping-overview .col-1 .box-title h3, .checkout-multishipping-overview .col-1 .box-title h4, .checkout-multishipping-overview .col-2 .box-title h2, .checkout-multishipping-overview .col-2 .box-title h3, .checkout-multishipping-overview .col-2 .box-title h4 { font-weight: normal; width: 100%; background: #F4F4F4; border-bottom: 1px solid #CCCCCC; padding: 10px; font-size: 14px; } .checkout-multishipping-shipping .col-1 > h4, .checkout-multishipping-shipping .col-2 > h4, .checkout-multishipping-billing .col-1 > h4, .checkout-multishipping-billing .col-2 > h4, .checkout-multishipping-overview .col-1 > h4, .checkout-multishipping-overview .col-2 > h4 { font-weight: normal; width: 100%; background: #F4F4F4; border-bottom: 1px solid #CCCCCC; padding: 10px; font-size: 14px; } .checkout-multishipping-shipping .col-1 .box-content, .checkout-multishipping-shipping .col-2 .box-content, .checkout-multishipping-billing .col-1 .box-content, .checkout-multishipping-billing .col-2 .box-content, .checkout-multishipping-overview .col-1 .box-content, .checkout-multishipping-overview .col-2 .box-content { margin-bottom: 25px; padding-left: 10px; margin-top: 10px; } .checkout-multishipping-billing .sp-methods dt { float: left; width: 100%; } #multiship-addresses-table > tbody > tr > td.a-center.last > a { background-image: none; } #review-order-form > div:nth-child(3) > div.divider { width: 100%; clear: both; } @media only screen and (max-width: 979px) { body[class*="checkout-multishipping-"] .checkout-progress span { word-spacing: 300px; } #review-order-form .col-1, #review-order-form .col-2 { float: none; width: auto; border: 0; padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 770px) { body[class*="checkout-multishipping-"] .checkout-progress span { width: 12px; } body[class*="checkout-multishipping-"] .checkout-progress li { width: 100%; margin: 0; text-align: left; padding-left: 3%; border-right: 0px; } body[class*="checkout-multishipping-"] .checkout-progress span { word-spacing: 1px; width: 12px; } body[class*="checkout-multishipping-"] .box-title { float: left; width: 100%; } body[class*="checkout-multishipping-"] .page-title .button { float: left; margin-bottom: 10px; } body[class*="checkout-multishipping-"] .linearize-table tfoot td { text-align: right; } body[class*="checkout-multishipping-"] .linearize-table select { width: 100%; min-width: 200px; } body[class*="checkout-multishipping-"] .col-1.col-narrow, body[class*="checkout-multishipping-"] .col-2.col-wide { width: 100%; padding: 0; } } @media only screen and (max-width: 599px) { .checkout-multishipping-addresses .linearize-table tbody td[data-rwd-label] { text-align: left; padding-left: 10px; margin-top: 12px; } } @media only screen and (max-width: 479px) { body[class*="checkout-multishipping-"] .buttons-set .back-link { display: block; } } /* ============================================ * Calendar styles (restore styles from /js/calendar) ============================================ */ div.calendar table { border-collapse: separate; } div.calendar table td.button { display: table-cell; background: inherit; color: inherit; text-transform: none; } /*# sourceMappingURL=styles.css.map */ .rm-link { position: relative; top: -1.2em; display: inline-block; } .rm-link:before { content: "... "; display: inline-block; color: "#000"; padding-right: 0.2em; font-weight: 500; } /* Custom Css Fixes */ .buttons-set.shipping-tracking{margin-bottom:30px;} .landing-category-image{display:none;} @media (max-width: 640px){ .catalog-category-view .wide-title { float: none!important; } }