/* ------------------------------------------------------------------------------------- Q Digital Studio -----------------------------------------------------------------------------------*/ /* this style is only used for prototyping and can be removed when pushed live /// */ .index-content-area { background-color: #F0F0F0; margin-top: -29px; border-right: 1px solid #909090; border-left: 1px solid #909090; padding: 50px 10px; } .index-content-area ul li { font-size: 16px; } /* RESET & REDEFINE =================================================================== /// */ article,aside,details,figcaption,figure, footer,header,hgroup,nav,section,summary {display: block; } audio,canvas,video {display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) {display: none; height: 0; } [hidden] {display: none; } html, body {padding: 0; margin: 0; } html {position: relative; /* font-size: 62.5%; */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body {background: url(../i/html-bg-grey.jpg) fixed; font-family: 'myriad-pro', 'Myriad Pro', 'Lucida Sans', sans-serif; color: #64644e; } hr {position: relative; clear: both; display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1em 0; padding: 0; } img {vertical-align: middle; } fieldset {border: 0; margin: 0; padding: 0; } textarea {resize: vertical; } blockquote:before, blockquote:after, q:before, q:after {content:''; content:none} dl, menu, ol, ul {margin: 0; } dd {margin: 0; } menu, ol, ul {padding: 0; } nav ul, nav ol, ul, ol {list-style: none; list-style-image: none; } ::-moz-selection { background: #CF5512; color:#fff; text-shadow: none; } ::selection { background: #CF5512; color:#fff; text-shadow: none; } .blue-text {color: #0000cc; } .red-text {color: #ff0000; } .error-text { color: #a94442; } /* Typography (from live site) --------------------------------------------------- /// */ html { -webkit-font-smoothing: antialiased; } body { font-size:14px; line-height: 1.5em; font-family: 'myriad-pro', 'Myriad Pro', 'Lucida Sans', sans-serif; font-weight: 600;} body, select, input, textarea { color:#000; } /* -------------------------------------------- Arrows & Buttons -------------------------------------------- */ .more { background: url(../i/more-btn.png) no-repeat 0 0; } .prices { background: url(../i/prices-btn.png) no-repeat 0 0; } .more, .prices { display: block; width: 78px; height: 18px; color: #ffffff !important; text-decoration: none; font-size: 13px; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; text-indent: -9999px; float: right; } .more:hover, .prices:hover { background-position: 0 -18px; } .more-big { display: block; width: 184px; height: 23px; padding: 5px 0 0 0; margin: 9px 5px; background: url(../i/more-btn-big.png) top left no-repeat; color: #ffffff !important; text-decoration: none; font-size: 13px; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; } .more-big:hover { background-position: 0 -28px; } .continue-big { display: block; width: 162px; height: 25px; padding: 5px 0 0 0; margin: 9px 5px; background: url(../i/green-btn-big.png) top center no-repeat; color: #ffffff !important; text-decoration: none; font-size: 13px; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; } .continue-big:hover { background-position: 0 -30px; } /* -------------------------------------------- Hierarchy -------------------------------------------- */ /* Typography --------------------------------------------------- /// */ * {-webkit-text-size-adjust: none;} h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1 { font-size: 32px; line-height: 1.1em; } h2 { font-size: 20px; line-height: 1.2em; } h3 { font-size: 18px; line-height: 1.3em; } h4 { font-size: 16px; line-height: 1.4em; } h5 { font-size: 14px; line-height: 1.5em; } h6 { font-size: 14px; line-height: 1.5em; } abbr[title] {border-bottom: 1px dotted; } b, strong {font-weight: 700; } blockquote {margin: 0; } cite {font-style: normal; } dfn {font-style: italic; } mark {background: #ff0; color: #000; } pre {margin: 1em 0; } code, kbd, pre, samp {font-family: monospace, serif; font-family: 'courier new', monospace; font-size: 1em; } pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q {quotes: none; } q:before, q:after {content: ''; content: none; } small {font-size: 80%; } sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup {top: -0.5em; } sub {bottom: -0.25em; } nav ul {list-style-type: none; } hr {margin: 10px 0 10px 0; } /* Lists --------------------------------------------------- /// */ dl, menu, ol, ul {margin: 1em 0; } dd {margin: 0 0 0 15px; } menu, ol, ul {padding: 0 0 0 15px; } ol {list-style: decimal; list-style-position: inside; } ul {list-style: none; list-style-position: inside; } nav ul, nav ol {list-style: none; list-style-image: none; } .center {text-align: center; } /* Forms --------------------------------------------------- /// */ form {margin: 0; } fieldset {border: 1px solid #c0c0c0; margin: 0; padding: 10px 20px; } legend {border: 0; padding: 0 5px; white-space: normal; *margin-left: -7px; } button, input, select, textarea, .link-button {display: block; outline: none; border: 1px solid #ccc; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } input, .link-button, textarea { color: #64644e; padding: 8px; } select {padding: 10px; } button, .link-button, input {line-height: normal; } button, html input[type="button"], input[type="reset"], {background: #888; color: #fff; border: none; -webkit-appearance: button; cursor: pointer; *overflow: visible; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -khtml-box-shadow: none; box-shadow: none; } button[disabled], input[disabled] {cursor: default; } input[type="checkbox"], input[type="radio"] {display: inline; box-sizing: border-box; padding: 0; margin-right: 8px; position: relative; top: -1px; *height: 13px; *width: 13px; } input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; } textarea {overflow: auto; vertical-align: top; } form p {padding: 5px 0; } label {display: block; padding: 5px 0; } label, input[type=button], input[type=submit], button, .link-button { cursor: pointer; } input[type="text"].long-text-width, select.long-text-width { width: 75% !important; } input[type="text"].full-text-width { width: 88%; } /* -- Placeholder Text -- */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #96968d; } input:-moz-placeholder, textarea:-moz-placeholder {color: #96968d; } input::-moz-placeholder, textarea::-moz-placeholder {color: #96968d; } input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #96968d; } .btn-green { background-color: #90a14a; color: #ffffff; border: none; font-weight: 700; } /* -- Styled Selects - wrapped due to FF appearance bug -- */ .styled_select {display: block; margin: 0; padding: 0; width: auto; max-width: 50%; height: auto; background:url(../i/select_arrow.png) no-repeat 98% center #fff; border: 1px solid #ccc; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .styled_select.mid-width { max-width: 70%; } .styled_select.full-width { max-width: 100%; margin-right: 15px; } .styled_select select {display: block; margin: 0; white-space: nowrap; width: 100%; outline: none; border: none; background: transparent; cursor: pointer; -moz-appearance: window; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; outline: none; } .styled_select:hover {-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -o-box-shadow: 0 0 3px rgba(0,0,0,.2); -khtml-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } /* -- Form Error Display -- */ .error_placehold {float: right; font-size: 13px; font-size: 1.2rem; color: #999; } .field_error .error_placehold, .field_error input {color: #b42719; } .styled_select.field_error, .field_error input {border: 1px solid #b42719; } /* -- Two Column Form -- */ .two_col_form {position: relative; border: 1px solid #ccc; padding: 20px 0; width: auto; } .two_col_form legend {position: absolute; top: -.75em; background: #fff; } .two_col_form fieldset {float: left; width: 46%; padding: 0 2% 20px 2%; border: none; } .two_col_form fieldset.first {border-right: 1px solid #ccc; margin-right: -1px; } .two_col_form input[type=text], .two_col_form input[type=url], .two_col_form input[type=password], .two_col_form input[type=email] {width: 96%; padding-left: 2%; padding-right: 2%; } .two_col_form .styled_select {max-width: none; } .two_col_form .button_row {clear: both; padding: 0 2%; } /* Stripe Payment Form */ /* .stripe_payment_block { display: none; } */ .payment_option { display: inline-block; margin: 10px 20px 10px 0; } .payment_option a { text-decoration: none !important; } /* Tables --------------------------------------------------- /// */ .table-alt { border: none; } .table-alt tr { background-color: #E6E6E6; border-top: 1px solid #F0F0F0; } .table-alt tr td { padding: 18px 10px; } .table-alt tr td:nth-of-type(1) { font-weight: bold; } table { border-top: 6px solid #686868; border-bottom: 1px solid #686868; border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 15px; } table td input:hover { background: #c55010; } thead { border-bottom: 1px solid #ccc; } tr { border-top: 1px solid #B4B4B4; } tr:nth-child(2n+1) { background-color: #E4E4E4; } td { padding: 3px 5px; } td p { padding: 6px 10px; margin: 0; } table td input, .product-container input, .related-products input, input[type="submit"].submit, a.btn, a.btn-green { margin-top: 5px; padding: 5px 6px; font-size: 11px; color: #fff !important; background: #90a14a; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: 600; text-decoration: none !important;} .link-submit-btn { margin-top: 5px; padding: 5px 6px; font-size: 12px !important; color: #fff !important; background: #90a14a; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: bold; text-decoration: none !important;} .related-products input { color: #fff; background: #888; } th {font-weight: bold; text-align: left; padding: 10px 5px; } tfoot td {background: #f1f1f1; border-left: 1px solid #ccc; text-shadow: none; } td, td img {vertical-align: top} /* Flex Display --------------------------------------------------- /// */ .add-shadow {-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -o-box-shadow: 0 0 3px rgba(0,0,0,.2); -khtml-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } .rad2 {-webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; } .rad3 {-webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } .rad4 {-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .bdr-a-s {border: 1px solid #d1d1d1; } .bdr-t-s {border-top: 1px solid #d1d1d1; } .bdr-r-s {border-right: 1px solid #d1d1d1; } .bdr-b-s {border-bottom: 1px solid #d1d1d1; } .bdr-l-s {border-left: 1px solid #d1d1d1; } .bdr-h-s {border-left: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; } .bdr-v-s {border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; } .bdr-a-n {border: none; } /* Embeddd Content --------------------------------------------------- /// */ img {border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; } svg:not(:root) {overflow: hidden; } figure {margin: 0; } figcaption {font-size: 80%; margin: 20px 0; line-height: 1.75em; } embed, img, object, video {max-width: 100%; height: auto; } /* -- Responsive Container (wrap embedded content with .embed-container) -- */ .embed-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Links --------------------------------------------------- /// */ a {cursor: pointer; color: #607890; outline: none; } a:link, a:visited {text-decoration: none; } a:hover, a:focus, a:active {color:#036; outline: none; } a:link { -webkit-tap-highlight-color: none; } a.link-button { text-decoration: none !important; color: #64644e !important; background-color: #ddd; } /* Helper Classes, Sizes and Colors --------------------------------------------------- /// */ .fs10 {font-size: 10px; } .fs11 {font-size: 11px; } .fs12 {font-size: 12px; } .fs14 {font-size: 14px; } .fs16 {font-size: 16px; } .fs18 {font-size: 18px; } .fs21 {font-size: 21px; } .fs24 {font-size: 24px; } .fs36 {font-size: 36px; } .fs48 {font-size: 48px; } .fs60 {font-size: 60px; } .fs72 {font-size: 72px; } strong, .bold {font-weight: 700; } .semi-bold {font-weight: 600; } .roman, .book {font-weight: normal; } .normal {font-weight: normal; } .fw100 {font-weight: 100; } .fw200 {font-weight: 200; } .fw300 {font-weight: 300; } .fw400 {font-weight: 400; } .fw500 {font-weight: 500; } .fw600 {font-weight: 600; } .fw700 {font-weight: 700; } .fw800 {font-weight: 800; } .fw900 {font-weight: 900; } .block {display: block; } .inline {display: inline; } .inline-block {display: inline-block; *display: inline; zoom: 1; } em,.italic {font-style: italic; } .normal {font-style: normal; } .uppercase {text-transform: uppercase; } .lowercase {text-transform: lowercase; } .capitalize {text-transform: capitalize; } .smallcaps {font-variant: small-caps; } .txt-right {text-align: right; } .txt-left {text-align: left; } .txt-center {text-align: center; } .txt-justify {text-align: justify; } .white {color: #fff; } .orange { color: #d05512 !important; } .ir {background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before {content: ""; display: block; width: 0; height: 100%; } .hidden {display: none; visibility: hidden} .hidden_visually {position:absolute; overflow:hidden; margin:-1px; padding:0; width:1px; height:1px; border:0; clip:rect(0 0 0 0)} .hidden_visually:active, .hidden_visually:focus {position: static; overflow: visible; clip: auto; margin: 0; width: auto; height: auto} .underline {text-decoration: underline; } .invisible {visibility: hidden} .lastunit {display: table-cell; float: none; width: auto; *display: block; *zoom:1; _position: relative; _left: -3px; _margin-right: -3px; } .break {clear: both; } .clearfloat {clear: both; display: block; height: 1px; margin: -1px 0 0 0; } .line:after, .lastunit:after, .clearfix:after, .group:after {content: "."; display: block; clear: both; visibility: hidden; overflow: hidden; line-height: 0; height: 0 !important; } .clearfix {display: inline-block; } .line, .clearfix, .group {*zoom:1; } html[xmlns] .clearfix {display: block; } * html .clearfix {height: 1%; } .break {clear: both; } .pan {padding:0; } .pas {padding:5px} .pam {padding:10px} .pal {padding:20px} .ptn {padding-top:0; } .pts {padding-top:5px} .ptm {padding-top:10px} .ptl {padding-top:20px} .ptxl {padding-top: 25px; } .prn {padding-right:0; } .prs {padding-right:5px} .prm {padding-right:10px} .prl {padding-right:20px} .pbn {padding-bottom:0; } .pbs {padding-bottom:5px} .pbm {padding-bottom:10px} .pbl {padding-bottom:20px} .pln {padding-left:0; } .pls {padding-left:5px} .plm {padding-left:10px} .pll {padding-left:20px} .phn {padding-left:0;padding-right:0; } .phs {padding-left:5px;padding-right:5px} .phm {padding-left:10px;padding-right:10px} .phl {padding-left:20px;padding-right:20px} .pvn {padding-top:0;padding-bottom:0; } .pvs {padding-top:5px;padding-bottom:5px} .pvm {padding-top:10px;padding-bottom:10px} .pvl {padding-top:20px;padding-bottom:20px} .man {margin:0; } .mas {margin:5px} .mam {margin:10px} .mal {margin:20px} .mtn {margin-top:0; } .mts {margin-top:5px} .mtm {margin-top:10px} .mtl {margin-top:20px} .mrn {margin-right:0; } .mrs {margin-right:5px} .mrm {margin-right:10px} .mrl {margin-right:20px} .mbn {margin-bottom:0; } .mbs {margin-bottom:5px} .mbm {margin-bottom:10px} .mbc {margin-bottom:14px} .mbl {margin-bottom:20px} .mln {margin-left:0; } .mls {margin-left:5px} .mlm {margin-left:10px} .mll {margin-left:20px} .mhn {margin-left:0;margin-right:0; } .mhs {margin-left:5px;margin-right:5px} .mhm {margin-left:10px;margin-right:10px} .mhl {margin-left:20px;margin-right:20px} .mvn {margin-top:0;margin-bottom:0; } .mvs {margin-top:5px;margin-bottom:5px} .mvm {margin-top:10px;margin-bottom:10px} .mvl {margin-top:20px;margin-bottom:20px} .automargin {margin: 0 auto; } /* Grid --------------------------------------------------- /// */ .left {float: left; } .right {float: right; } .search-left {float: left; } .search-right {float: right; padding-bottom: 20px; } .size1of1 {float: none; } .rel {position: relative; } .size1of2,.size2of4 {width:50%; } .size1of3 {width: 33.33333%; } .size2of3 {width: 66.66666%; } .size1of4 {width: 25%; } .size3of4 {width: 75%; } .size1of5 {width: 20%; } .size2of5 {width: 40%; } .size3of5 {width: 60%; } .size4of5 {width: 80%; } .size1of6 {width: 16.66666%; } .size5of6 {width: 83%; } .left-aligned { padding-left: 0; } .left-aligned > li { padding-left: 0; } .subcategory-column-right { width: 68%; } .subcategory-alt-column-right { width: 72%; } .subcategory-column-left { padding: 16px 0px 0px 5px; } .interior-sidebar { width: 32.33333%; padding-top: 18px; padding-left: 5px; } .two-column-width { width: 45%; padding: 0 0 0 27px; } .two-column-width h5 { padding: 0; margin: 0; text-transform: uppercase;} .footer-column-one { width: 33%; } .footer-column-two { width: 33%; } .footer-column-three { width: 33%; } .footer a { text-decoration: underline; color: #d05512; } .three-column-width { width: 29%; padding: 10px 0 9px 29px; } .left1of1 {float:none; } .left1of2 {margin-left: 50%; } .left1of3 {margin-left: 33.33333%; } .left2of3 {margin-left: 66.66666%; } .left1of4 {margin-left: 25%; } .left3of4 {margin-left: 75%; } .left1of5 {margin-left: 20%; } .left2of5 {margin-left: 40%; } .left3of5 {margin-left: 60%; } .left4of5 {margin-left: 80%; } .two-column-container a {color: #d05512; text-decoration: underline; } .two-column-container p {padding: 0; margin-top: 0; } /* CORE =================================================================== /// */ .search-container { padding: 5px 12px 0 0; } #searchValue { background: url(../i/search-input-bg.png) center left no-repeat; border: none; margin: 0 31px 0 0; width: 124px; } #search-submit { position: absolute; top: 8px; right: 12px; background: url(../i/search-submit-btn.png) top left no-repeat; border: none; padding: 0; margin: 0; width: 32px; height: 26px; } .search-form { position: relative; } /* ============================================ NAVIGATION ============================================ */ .active-nav { background-color: #516069; } .nav { text-transform: uppercase; z-index: 100; position: relative; } #primary-nav ul { margin: 2px 0 0 0; background: #515c61; font-size: 14px; line-height: 1.4em; /* Old browsers */ background: -webkit-gradient(linear, 0 0, 0 100%, from(#515c61), color-stop(0.27, #4d595e), to(#3d4b51)); background: -webkit-linear-gradient(#515c61 0%, #4d595e 27%, #3d4b51 100%); background: -moz-linear-gradient(#515c61 0%, #4d595e 27%, #3d4b51 100%); background: -o-linear-gradient(#515c61 0%, #4d595e 27%, #3d4b51 100%); background: linear-gradient(#515c61 0%, #4d595e 27%, #3d4b51 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515c61', endColorstr='#3d4b51',GradientType=0 ); /* IE6-9 */ } #primary-nav > ul > li { position: relative; display: inline-block; font-weight: bold; width: 140px; padding: 11px 9px; } #primary-nav > ul > li:hover > a { color: #d05512; } #primary-nav > ul > li > ul > li > a { color: #fff; font-size: 12px; } #primary-nav > ul > li ul li a:hover { color: #d05512; } #primary-nav li:last-child {margin-right: 0; } #primary-nav li > a { color: #fff; text-decoration: none; } #primary-nav li.current > a, #primary-nav li.parent-current > a, #primary-nav li.current:hover > a, #primary-nav li.parent-current:hover > a {background: #005695; text-shadow: none; color: #fff; } #primary-nav ul ul { display: none; position: absolute; left: 0; top: 100%; width: 145px; margin: 0; padding: 0; background: #3D4B51; border: 2px solid #676767; z-index: 9999; } #primary-nav ul li:hover ul {display: block; } #primary-nav ul ul li { display: block; margin-right: 0; font-size: 14px; font-weight: 600; padding: 10px; } #primary-nav ul ul li:hover { background-color: #526169; } #primary-nav ul ul li:hover a { color: #CF5512; } #primary-nav ul ul li a {display: block; } #primary-nav ul ul li a:hover { color: #fff; } #primary-nav li.arrow {position: absolute; top: -11px; left: 35px; margin-left: -11px; width: 22px; height: 11px; background: url(../i/nav_arrow.png) no-repeat 0 0; } #primary-nav li span {display: none; position: absolute; top: 10px; right: 15px; float: right; color: #fff; background: #c2c2b7; text-shadow: none; font-weight: 400; padding: 2px 8px; cursor: pointer; } #primary-nav li.open span {padding: 2px 10px; } .nav-toggle {display: none; text-align: center; } .nav-toggle a {display: block; background: #fff url(../i/mobile_nav.png) no-repeat 95% 8px; cursor: pointer; padding: 8px; text-decoration: none; } .nav-toggle a.open {background-position: 95% -46px; } html.ie7 #primary-nav ul ul, html.ie8 #primary-nav ul ul {border: 1px solid #ccc; } /* Layout --------------------------------------------------- /// */ div {position: relative; } .wrapper {width: 100%; max-width: 880px; margin: 0 auto; } /* Header/Logo/Tagline --------------------------------------------------- /// */ .header a { text-decoration: none; } .header-logo { padding-top: 17px; padding-left: 46px; } .int-breadcrumb { padding: 0 0 20px 0; } .breadcrumb { padding: 14px 0 0 17px; font-size: 12px; } .breadcrumb a { color: #d05512; } .content-area { background-color: #F0F0F0; margin-top: -29px; border-right: 1px solid #909090; border-left: 1px solid #909090; } .feature-ribbon { width: 860px; height: 217px; left: -9px; padding: 37px 20px 0 20px; margin-top: -15px; background: url(../i/feature-ribbon-bg.png) top left no-repeat; color: #fff; } .slogan { display: block; width: 392px; height: 110px; background: url(../i/slogan.png) center center no-repeat; } .slogan-push { padding-top: 26px; padding-right: 13px; } .ribbon-pics-wrapper { padding-left: 5px; } /* CART STATUS ------------- /// */ .cart-status { background-color: #d0d0d0; margin: 0; padding: 5px 2px; font-weight: 600; text-align: center; color: #888; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } .status-on { color: #000; } .cart-status span {padding: 0 5px; } /* -------------------------------------------- Toolbar -------------------------------------------- */ .toolbar { position: absolute; top: 0; right: 0; } .toolbar ul { float: left; padding: 0; overflow: hidden; -moz-border-radius: 0 0 12px 12px; -webkit-border-radius: 0 0 12px 12px; -khtml-border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px; behavior: url(/tufnut2/a/s/PIE.htc); margin-top: 0; } .toolbar ul li { float: left; font-size: 11px; line-height: 12px; } .toolbar ul li a { display: block; padding: 5px 15px; } .toolbar ul.network-links { background: #3a474d url(../i/network-links-bg.gif) bottom left repeat-x; } .toolbar ul.network-links li { border-left: 1px solid #3e4b51; } .toolbar ul.network-links li.mark a { background: #526169; color: #fff; } .toolbar ul.network-links li:first-child { border-left: none; } .toolbar ul.network-links li a { color: #a29e9e; text-align: center; } .toolbar ul.network-links li a:hover { color: #fff; } .toolbar ul.cart-button { margin-left: 5px; background: url(../i/cart-button-bg.gif) top left repeat-x; } .toolbar ul.cart-button li .cart-icon { display: block; width: 30px; text-align: center; color:#fff; padding: 17px 10px 5px 10px; border: none; background: url(../i/cart-icon.png) no-repeat 16px 5px; font-size: 12px; } .toolbar ul.cart-button li .cart-icon:hover { background-position: 16px -86px; color: #444; } .cart-button li form { background: url(../i/cart-button-bg.gif) top left repeat-x; } /* Navigation --------------------------------------------------- /// */ ul#nav_access {position: absolute; top: -9999px; left: -9999px; } nav ul {padding: 0; } /* Main --------------------------------------------------- /// */ .stone-title { background: url(../i/stonetitle.gif) top left no-repeat; margin: 5px 0 10px 0; border-top: 1px solid #B8BABC; border-bottom: 1px solid #a4a5a5; font-size: 15px; padding: 7px 0; padding: 7px 0; text-align: center; color: #c55010; letter-spacing: 0.05em; } .featured-product-title { display: block; width: 280px; margin: -25px 0 0 -10px; background: transparent url(../i/featured-products-title-bg.gif) top left no-repeat; color: #fff; text-align: center; } .featured-product-title h5 { padding: 3px 0; } .featured-product { background: #f0f0f0 url(../i/featured-product-body-bg.gif) bottom right no-repeat; border: 1px solid #98999a; padding-bottom: 9px; margin-bottom: 9px; font-size: 14px; max-width: 259px; margin-left: 23px; } .featured-product p { padding: 7px 9px 0 5px; margin: 0; } .featured-product img { margin: 15px 10px 0 5px; border: 1px solid #797979; } .img-left { float: left; margin: 0 10px 5px 0; } .content-area a { color: #d05512; text-decoration: underline; } /* Interior page --------------------------------------------------- /// */ .page-title-ribbon { width: 850px; height: 87px; left: -9px; padding: 10px 20px 0 30px; margin-top: -15px; background: url(../i/page-title-ribbon-bg.png) top left no-repeat; color: #ffffff; } .page-title-ribbon h1 { margin: 13px 0 0 6px; } .interior-content { padding: 20px 35px 0 22px; } .interior-content-alt { padding: 9px 23px 0 16px; } .grey-well { background-color: #E6E6E6; padding: 7px 0 7px 5px; margin-bottom: 15px; } .grey-well p { padding: 2px 7px; } .category-grey-well { background-color: #E6E6E6; padding: 7px 0px 0 5px; } .well-column-right { width: 73%; } .well-column-left { width: 23%; } .category-grey-well p { padding: 3px 7px; } .category-well-column-right { width: 73%; } .category-well-column-left { width: 27%; } .category-well-column-left > ul { padding: 0; margin: 0; } .category-well-column-left > ul > li { padding: 0 0 0 5px; } .category-well-column-left > ul > li > ul { padding: 0 0 0 15px; margin-top: 0px; } .grey-well img { border: 4px solid #d7d7d7; } .category-grey-well img { border: 4px solid #d7d7d7; margin-top: 12px; margin-bottom: 7px; } .sidebar-header { padding: 2px 0; } .white-keyline { border-top: 1px solid #f0f0f0; margin: 6px 0; } .grey-keyline { color: #ccc; width: 90%; margin: 30px auto; } .category-product { padding-bottom: 9px; margin-bottom: 9px; max-width: 259px; margin-left: 25px; } .category-product img { border: 1px solid #797979; } .category-product-title { display: block; width: 270px; padding: 0; margin: -21px 0 21px -10px; background: transparent url(../i/featured-products-title-bg.gif) top left no-repeat; color: #fff; text-align: center; letter-spacing: 0.03em; border-radius: 12px; } .sidebar-product-title { display: block; width: 100%; padding: 0; margin: -21px 0 21px -10px; background: transparent url(../i/featured-products-title-bg.gif) top left no-repeat; color: #fff; text-align: center; letter-spacing: 0.05em; border-radius: 12px; } .category-product-title h5 { padding: 3px 0; margin-bottom: -12px; } .category-product p { padding: 0; } .interior-list p { margin: 0; padding: 0; } .interior-list ul { padding-left: 0; } .interior-list ul > li { padding-left: 45px; } .interior-product-section { padding: 0 10px; } /* notifications --------------------------------------------------- /// */ .notification-well { padding-top: 1px; margin-top: 20px; text-align: center; border-radius: 5px; padding-left: 5px; padding-right: 5px; } .notification-well.error { border: 3px solid #a94442; background-color: #f2dede; } .notification-well.notice { border: 2px solid #d05512; background-color: #fcf8e3; } .notification-well-popover { background: #eeeeee; padding: 3px; position: relative; } .message { opacity: 0; position: absolute; top: 0; float: left; margin-left: 10px; background: #fafafa; border: 1px solid transparent; border-radius: 6px; height: 0px; padding: 0 12px; overflow: hidden; -webkit-transition: all 500ms; transition: all 500ms; } .notification-well-popover:hover .message { padding: 12px 12px; height: auto; opacity: 1; border: 2px solid #d05512; background-color: #fcf8e3; width: 175px; z-index: 9999; } /* sidebar --------------------------------------------------- /// */ .sidebar-well { background-color: #E6E6E6; padding-top: 1px; margin-top: 20px; } .sidebar-well ul.sidebar-nav li { margin-top: 6px; border-bottom: 1px solid #f0f0f0; font-weight: 700; } .sidebar-well ul.sidebar-nav li ul li { margin-top: 0px; border-bottom: none; font-weight: 600; } .sidebar-well ul.sidebar-nav li.last { margin-bottom: 6px; } .img-border { border: 4px solid #d7d7d7; } .sidebar-well > ul { margin: 0px; padding: 0px 0px 0px 10px; } .sidebar-well > ul > li > ul { margin: 0px; padding: 0 0 0 15px; } /* Footer --------------------------------------------------- /// */ .meta-ribbon { color: #ffffff; width: 860px; height: 151px; font-size: 12px; margin-top: -20px; left: -9px; padding: 24px 20px 0 20px; background: url(../i/meta-ribbon-bg.png) top left no-repeat; } .meta-ribbon a { color: #ffffff; text-decoration: underline; } .meta-ribbon a:hover { color: #D05512; } .meta-ribbon h6 { padding: 5px 0px 0px 14px; margin: 0; } .meta-ribbon ul { padding-top: 2px; margin-top: 0;} .meta-ribbon ul li {padding: 2px 0; line-height: 1em; } .footer { background-color: #F0F0F0; border-right: 1px solid #909090; border-left: 1px solid #909090; border-bottom: 1px solid #909090; margin-bottom: 36px; padding-bottom: 5px; } .top-link { display: none; } /* Vendor --------------------------------------------------- /// */ /* Store Order Print View --------------------------------------------------- /// */ body.print {background: none; font-family: Myriad, 'Myriad Pro', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 12px; line-height: 1.3em; color: #000000; } body.print h3 { font-size: 14px; } .print .container { width: 720px; } .print .container .head { margin: 25px 0; } .print .container .order-block { width: 75%; margin-left: auto; margin-right: auto; } .print .container .shipping-block p { font-weight: normal; } .print .container .shipping-block .ship-to { float:left; width: 50%; } .print .container .shipping-block .ship-from { width: 50%; } .print table { border-top: none; border-bottom: none; border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 15px; } .print table td.bottom-border { border-bottom: 1px solid #B4B4B4; } .print table thead tr th { padding: 4px; } .print table thead tr { background-color: #fff; } .print table tbody tr { background-color: #fff; border-bottom: none; border-top: none; } .print table tbody tr td { font-weight: normal; padding: 4px 5px 1px 5px; } /* -- Slider -- */ .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none; } .flexslider {margin: 0; padding: 0; } .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img {width: 100%; display: block; } .flex-pauseplay span {text-transform: capitalize; } .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides {display: block; } * html .slides {height: 1%; } .no-js .slides > li:first-child {display: block; } /* Defaults */ .flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport {max-height: 300px; } .flexslider .slides {zoom: 1; } .carousel li {margin-right: 5px} /* Direction Nav */ .flex-direction-nav {*height: 0; } .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../i/slider/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; } .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } .flex-direction-nav .flex-prev {left: -36px; } .flexslider:hover .flex-next {opacity: 0.8; right: 5px; } .flexslider:hover .flex-prev {opacity: 0.8; left: 5px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1; } .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover {background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active {background: #000; background: rgba(0,0,0,0.9); cursor: default; } /* Thumbs nav */ .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li {width: 25%; float: left; margin: 0; } .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer; } .flex-control-thumbs img:hover {opacity: 1; } .flex-control-thumbs .flex-active {opacity: 1; cursor: default; } .mobile-label { display: none !important; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev {opacity: 1; left: 0; } .flex-direction-nav .flex-next {opacity: 1; right: 0; } } /* -- lightbox -- */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap {position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin {position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened {z-index: 8030; } .fancybox-opened .fancybox-skin {-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner {position: relative; } .fancybox-inner {overflow: hidden; } .fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling: touch; } .fancybox-error {color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe {display: block; width: 100%; height: 100%; } .fancybox-image {max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image: url(../i/modal/fancybox_sprite.png); } #fancybox-loading {position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div {width: 44px; height: 44px; background: url(../i/modal/fancybox_loading.gif) center center no-repeat; } .fancybox-close {position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav {position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url(../i/modal/blank.gif); -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev {left: 0; } .fancybox-next {right: 0; } .fancybox-nav span {position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span {left: 10px; background-position: 0 -36px; } .fancybox-next span {right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span {visibility: visible; } .fancybox-tmp {position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } .fancybox-lock {overflow: hidden; } .fancybox-overlay {position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(../i/modal/fancybox_overlay.png); } .fancybox-overlay-fixed {position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay {overflow: auto; overflow-y: scroll; } .fancybox-title {visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title {visibility: visible; } .fancybox-title-float-wrap {position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child {display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap {position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap {padding-top: 10px; } .fancybox-title-over-wrap {position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*************** Store / Checkout ********************/ .checkout-totals {} .checkout-totals .discount-code { width: 60%; float: left; } .checkout-totals .discount-code .discount-field-container {} .checkout-totals .discount-code .discount-field-container .discount-field { float: left; margin-bottom: 0px; } .checkout-totals .discount-code .discount-field-container .discount-field input[type="text"].long-text-width { width: 80% !important; } .checkout-totals .discount-code .discount-field-container .apply-discount { padding-top: 12px; margin-bottom: 0px; } .checkout-totals .discount-code .discount-field-container .error-text { clear: both; } .checkout-totals .btn-container { width: 40%; float: right; } .checkout-totals .btn-container-right { float: right; margin-right: 20px; padding-right: 20px; } .checkout-totals .order-total-block p { padding: 0; margin: 0; } .checkout-totals .order-total-block p.left { float: left; width: 50%; } .checkout-totals .btn-left { float: left } .checkout-totals .btn-left.mrm { margin-right: 10px; } /*************** Shipping Fields ********************/ .shipping-same-as-billing input { float: left; } .shipping-same-as-billing label { margin: 0; margin-top: -4px; padding: 0; } /************ Stripe *********************************/ /** * The CSS shown here will not be introduced in the Quickstart guide, but shows * how you can use CSS to style your Element's container. */ .StripeElement { box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 3px; background-color: white; box-shadow: 0 1px 3px 0 #e6ebf1; width: 97%; -webkit-transition: box-shadow 100ms ease; transition: box-shadow 100ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; } .receipt-totals { width: 50%; float: right; } .receipt-totals .text-tag { float: left; width: 50%; } .receipt-totals .text-value { float: left; width: 33.33333%; } .receipt-totals .left { float: left; } /******* Store Products Container **********/ .product-container { display: table; border-top: 6px solid #686868; width: 95%; border-collapse: collapse; } .product-container.cart { width: 100%; } .product-container .header { display: table-row; } .product-container .header div { display: table-cell; width: auto; max-width: 25%; background-color: #E4E4E4; border-bottom: 1px solid gray; padding: 10px 5px; font-weight: bold; } .product-container .row { display: table-row; /* border-bottom: 1px solid #686868; */} .product-container .row-group { display: table-row-group; width: 100%; /* border-bottom: 1px solid #686868; */ } .product-container .row-group .row div { display: table-cell; width: auto; padding: 0 5px; } /******* Related Products Container **********/ .related-heading { width: 95%; color: #444; background-color: #E4E4E4; border-top: 3px solid #888; border-bottom: 1px solid #888; line-height: 3.5em; } .related-products { display: table; background-color: #E4E4E4; width: 95%; border-collapse: collapse; } .related-products .row { display: table-row; border-bottom: 1px solid #888; } .related-products .row-group { display: table-row-group; width: 100%; } .related-products .row-group .row div { display: table-cell; width: auto; max-width: 400px; padding: 0 5px 4px 5px; } /* MEDIA QUERIES =================================================================== /// */ /* Responsive Queries --------------------------------------------------- /// */ @media only screen and (max-width : 900px) { .main {width: auto; padding-left: 20px; padding-right: 20px; } .page-title-ribbon { width: 100%; height: auto; left: 0px; padding: 0px 0px 15px 0px; margin-top: -20px; background: none; color: #fff; background-color: #C95211; } .page-title-ribbon h1 { font-size: 20px; padding: 34px 0px 0px 30px; margin: 0; } .meta-ribbon { width: 100%; height: auto; margin-top: -14px; left:0; padding: 24px 0; background: none; background-color: #647278; text-align: center; padding-bottom: 10px; } .wrapper { width: 95%; max-width: 880px; margin: 0 auto; } .breadcrumb { padding-top: 15px; padding-left: 0; } .toolbar ul li { font-size: 10px; } .toolbar ul li a { display: block; padding: 5px 10px; } .toolbar { position: absolute; top: 0; right: 29px; } #search-submit { top: 3px; left: 139px; } .search-container { padding: 0; } .left, .right {float: none; width: auto; clear: both; } .cart-totals p.left { float: left; clear: both;} /* -- Two Column Form -- */ .two_col_form {padding: 20px; } .two_col_form fieldset, .two_col_form .button_row {padding-left: 0; padding-right: 0; } .two_col_form fieldset {float: none; width: auto; border: none; padding-top: 0; } .two_col_form fieldset.first {border-right: none; margin-right: 0; } .header-logo { padding-top: 55px; padding-left: 5px; } input[type="text"].long-text-width { width: 100%; } input[type="text"].full-text-width { width: 75%; } .styled_select.mid-width, .styled_select.full-width { max-width: 77%; } /* ============================================ RESPONSIVE NAVIGATION ============================================ */ .nav { margin-top: 0; } .nav-toggle { display: block; color: #fff; padding: 0; margin-bottom: 0; border: 5px solid #44555B; } #primary-nav ul {margin: 0; padding: 0; } #primary-nav ul {display: none; text-align: center; } #primary-nav ul li { display: block; padding: 15px 0; width: 100%; } #primary-nav ul li a {display: block; padding: 0; } #primary-nav > ul > li:hover { background: #526169; } #primary-nav > ul > li:hover > a { text-shadow: none; color: #fff; } #primary-nav > ul > li.open { background: #526169; padding-bottom: 0; } #primary-nav > ul > li.open > a { text-shadow: none; color: #fff; padding-bottom: 10px; } #primary-nav ul li:hover ul {display: none; } #primary-nav ul ul { position: static; width: auto; padding: 0; margin-top: 0; background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -khtml-box-shadow: none; box-shadow: none; } #primary-nav ul ul li { margin: 0 auto; padding: 10px 0; background-color: #3D4B51; } #primary-nav ul ul li:hover {background-color: #526169; } #primary-nav li.arrow {display: none; } #primary-nav li span {display: block; } .feature-ribbon { width: 97%; height: 257px; left: 0px; padding: 20px 15px 20px 5px; margin-top: 0px; background: none; color: #fff; background-color: #C95211; } .slogan-push { padding-top: 0px; max-width: 95%; } .interior-content { padding: 20px; } .interior-content-alt { padding: 20px; } .content-area { margin-top: 0; } .footer ul { padding-left: 0; } .top-link { display: block; text-align: center; margin-left: 0px; } .featured-product { margin-left: 50px; padding-bottom: 30px; } .category-product { margin-left: 50px; padding-bottom: 30px; } .img-left { float: left; margin: 0 4%; } .category-product-title { margin-top: 15px; } /*************** Store / Checkout ********************/ .checkout-totals { padding-top: 5px; } .checkout-totals .discount-code .discount-field-container {} .checkout-totals .discount-code .discount-field-container .discount-field { float: left; } .checkout-totals .discount-code .discount-field-container .discount-field input[type="text"].long-text-width { width: 80% !important; } .checkout-totals .discount-code .discount-field-container .apply-discount { padding-top: 25px; } .checkout-totals .btn-container-right { float: right; /* margin-right: 20px; padding-right: 20px; */ } .checkout-totals .btn-container-right p { padding-top: 25px; } .checkout-totals .order-total-block { float: right; width: 200px; } .checkout-totals .order-total-block p { padding: 0; margin: 0; } .checkout-totals .order-total-block p.left { float: left; width: 90px; } .checkout-totals .btn-left { float: left } .checkout-totals .button-block { float: right; } .checkout-totals .btn-left.mrm { margin-right: 10px; } .receipt-totals { width: 50%; float: right; } .receipt-totals .text-tag { float: left; width: 50%; } .receipt-totals .text-value { float: left; width: 33.33333%; } .receipt-totals .left { float: left; } } /* responsive table*/ @media only screen and (max-width: 767px) { table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .pinned table { border-right: none; border-left: none; width: 100%; margin-bottom: 0; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned table tbody tr td {padding: 5px 8px 10px 0px; } .pinned td:last-child { border-bottom: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } div.table-wrapper div.scrollable table { margin-left: 35%; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } } @media only screen and (max-width : 500px) { .content-area { margin-top: -16px; } .feature-ribbon { width: 100%; height: 280px; left: 0px; padding: 20px 0; margin-top: 0px; background: none; color: #fff; background-color: #C95211; } .page-title-ribbon { width: 100%; height: auto; left: 0px; padding: 0px 0px 30px 0px; margin-top: -20px; background: none; color: #fff; background-color: #C95211; } .img-left { float: left; margin: 0 0 5px 0; } .footer-column-three { width: 100%; padding-left: 0; } .two-column-container p { padding-top: 0; padding-right: 35px; } .two-column-width { padding: 0 18px 20px 18px; } .two-column-container p { padding-right: 0; } .grey-well { background-color: #E6E6E6; padding: 22px 5px 0 5px; } .category-grey-well { background-color: #E6E6E6; padding: 22px 5px 0 5px; } .three-column-width { padding: 10px; } .mobile-img-pad { padding-left: 25%; } .mobile-img-mar { margin-left: 15%; } /* Notifications */ .message { clear: both; top: 25px; left: 15%; } .checkout-totals .discount-code .discount-field-container .apply-discount { display: none; } .checkout-totals .btn-container-right { margin-right: 20px !important; padding-right: 20px !important; } .checkout-totals .btn-container-right p { padding-top: 12px; } } @media only screen and (max-width : 399px) { .toolbar ul li { font-size: 10px; } .toolbar ul li a { display: block; padding: 5px 3px; } .feature-ribbon { width: 95.5%; height: 300px; left: 0px; padding: 20px 7px; margin-top: 0px; background: none; color: #fff; background-color: #C95211; } .feature-ribbon > .right > img { max-width: 32%; height: auto; } #primary-nav ul li a { font-size: 13px; } /* Review Cart */ .checkout-totals .discount-code .discount-field-container {} .checkout-totals .discount-code .discount-field-container .discount-field { float: left; } .checkout-totals .discount-code .discount-field-container .apply-discount { display: none; } /* Payment Form */ .payment_option { display: block; margin: 10px 0; } } @media only screen and (max-width : 375px) { .checkout-totals .btn-container { clear: both; width: 100%; } .checkout-totals .btn-container-right { float: right; } .checkout-totals .btn-container-right p { padding-top: 0; } } @media only screen and (max-width : 350px) { .breadcrumb { padding-top: 15px; padding-left: 20%; } .search-container { padding: 0 0 0 23%; } #search-submit { top: 3px; left: 208px; } .feature-ribbon { width: 97%; height: 250px; left: 0px; padding: 20px 5px 20px 5px; margin-top: 0px; background: none; color: #fff; background-color: #C95211; } .page-title-ribbon h1 { font-size: 18px; padding: 34px 0px 0px 30px; margin: 0; } .featured-product { margin-left: 20px; padding-bottom: 30px; } .category-product { margin-left: 20px; padding-bottom: 30px; } .category-product p { padding: 0; } .img-left { margin: 0 0 5px 0; max-width: 33%; } .top-link { margin-left: 0; } } @media only screen and (max-width : 300px) { .checkout-totals .btn-container { clear: both; width: 100%; } .checkout-totals .btn-container-right { float: left; } .checkout-totals .btn-container-right p { padding-top: 0; } } /* Print --------------------------------------------------- /// */ @media print { * {background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow: none !important; } a, a:visited {text-decoration: underline; } a[href]:after {content: " (" attr(href) ")"; } abbr[title]:after {content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: ""; } pre, blockquote {border: 1px solid #999; page-break-inside: avoid; } thead {display: table-header-group; } tr, img {page-break-inside: avoid; } img {max-width: 100% !important; } @page {margin: 0.5cm; } p, h2, h3 {orphans: 3; widows: 3; } h2, h3 {page-break-after: avoid; } }