/* -------------------------------------------------------------------- Base Styles Author: Netmatter Ltd Author URI: http://www.netmatter.co.uk/ :: Typography, body font 100%/16px :: font rem for root level em of body :: font px as a fall back for old browsers :: em for fluid margin, padding & line-height -------------------------------------------------------------------- */ /* html5doctor.com Reset Stylesheet v1.6.1 http://html5doctor.com/html-5-reset-stylesheet/ Richard Clark http://richclarkdesign.com http://cssreset.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, address, cite, code, em, img, q, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figcaption, figure, footer, header, main, menu, nav, section, time, mark, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; font-style: normal; background:transparent; } article, aside, figcaption, footer, header, main, menu, nav, section { display:block; } figure { display:block; } img { display:inline-block; } body { line-height:1; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } input, select { vertical-align:middle; } /* ----------------------------------------------- :: Root ----------------------------------------------- */ :lang(en) { /* set british english language quotation marks change language (...) depending on html declaration 2018 - left single (high 6) 2019 - right single (high 9) 201C - left double (high 9s) 201D - right double (high 9s) ASCII if desired 0022 - double 0027 - single */ quotes:"\2018" "\2019" "\201C" "\201D"; } *, *:before, *:after { /* fix the box model - http://www.paulirish.com/2012/box-sizing-border-box-ftw/ IE8 - requires browser to be in IE8 Standards mode - use this tag in the head */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { /* By default, iOS enlarges the text size so it reads more comfortably. Disable the adjustment */ -webkit-text-size-adjust:none; /* keep long text and urls wrapped in content */ word-wrap: break-word; } /* ----------------------------------------------- :: Sections ----------------------------------------------- */ body { /* font-size 100% (16px) line-height 1.5em (24px) */ font:100%/1.5 'OpenSansregular', Arial, sans-serif; color:#272727; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family:'OpenSansExtraBold',Arial, sans-serif; text-transform:uppercase; } h1 { margin-bottom:0.25em; font-size:24px; font-size:1.5rem; line-height:1.25em; text-shadow: 0 0 0px #aa1f24; } h2, h3, h4, h5, h6 { margin-bottom:0.5em; text-shadow: 0 0 0px #aa1f24; } h2, h3 { font-size:20px; font-size:1.25em; line-height:1.25em; } h4, h5, h6 { font-size:16px; font-size:1rem; } /* ----------------------------------------------- :: Grouping Content ----------------------------------------------- */ p, ul, ol { margin-bottom:0.8em; } ul { list-style-type:none; list-style-position:outside; } ol { margin-left:3em; list-style-type:none; list-style-position:outside; } li { margin-bottom:0.75em; } p, li { font-size: 14px; font-size: 0.875rem; } blockquote { position:relative; margin:0 0 1.5em 0; padding:1.25em 2.75em 1.25em 2.75em; font-size:12px; font-size:0.75rem; font-style:italic; background-color: #eee; border-left: 5px solid #666; } blockquote:before, blockquote:after { display: block; position:absolute; font-size:52px; font-size:3.25rem; font-style:normal; color: #999; } blockquote:before { top:-5px; left:10px; content: "\201C"; } blockquote:after { right:10px; top:55%; content: "\201D"; } blockquote footer { margin-top:2.5em; font-size:14px; font-size:0.875rem; line-height:1.125em; } figure { margin-bottom: 0.9375em; } /* ----------------------------------------------- :: Text-level Semantics ----------------------------------------------- */ q::before { content:open-quote; } q::after { content:close-quote; } a:hover, a:focus { text-decoration: none; } small { font-size:12px; font-size:0.75rem; } time { font-size:12px; font-size:0.75rem; } sub { font-size:smaller; line-height:90%; vertical-align:sub; } sup { font-size:smaller; line-height:90%; vertical-align:super; } b, strong { font-family:OpenSansSemiBold, Arial; } em, i { font-family:OpenSansItalic; } /* ----------------------------------------------- :: Embedded Content ----------------------------------------------- */ img { /* Flexible Images max-width:100% and height:auto make images responsive and flexible max-width:100% and height:auto works in IE7, but not in IE8 fixing IE8 bug with width:auto/9 */ max-width: 100%; height: auto; width: auto/9; -ms-interpolation-mode: bicubic; } .img { /* Flexible background images */ background-size:100% auto; -moz-background-size:100% auto; background-position:50% 0; /* IE needs background:center; */ } video, embed, object, iframe { /* Flexible Embedded Videos max-width:100% doesn't work i=on the embed element in Safari width:100% is a successful workaround */ width: 100%; } /* ----------------------------------------------- :: Tabular data ----------------------------------------------- */ table { width: 100%; margin:0 0 1em 0; border-collapse:collapse; border-spacing:0; } th, td { display:table-cell; padding:0.5em 0.5em 0.5em 0.5em; font-size:12px; font-size:0.75rem; font-weight:normal; color:#272727; } th { padding:0.75em 0.5em 0.75em 0.5em; font-family:'OpenSansSemiBold',Arial, sans-serif; font-size:14px; font-size:0.875rem; text-transform:uppercase; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } td input, td select, td textarea { font-size:12px; font-size:0.75rem; } /* ----------------------------------------------- :: Forms & Buttons ----------------------------------------------- */ input, select, option, textarea { /* from elements, namely textarea do not inherit font styles, hence the repeat family and size declaration */ font-family:'OpenSansExtraBold',Arial, sans-serif; font-size:16px; font-size:1rem; color: #4a4a4a; overflow:hidden; } select, option { font-size:12px; font-size:0.75rem; background-color:#fff; } input[type="text"], input[type="button"], input.input-text, input[type="submit"] { /* remove chrome and ios default input styles */ -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; border:none; } input[type="text"], input.input-text, input[type="email"], input[type="url"], input[type="password"], textarea { padding:1em 1em 0.75em 1em; border:1px solid #d0d0d0; } select, select:focus { padding:3px 5px; border:1px solid #d0d0d0; } input[type="file"], input[type="search"] { border:1px solid #d0d0d0; -webkit-appearance:none; } input[type="submit"], input[type="button"], button, .button, button[type="submit"] { display:inline-block; position: relative; padding: 0.45em 1em; font-family:OpenSansextrabold; font-size:14px; font-size:0.875rem; color:#fff; text-align:center; text-decoration:none; text-transform:uppercase; line-height:normal; border:none; background-color:#272727; cursor:pointer; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -ms-transition-duration: 0.4s; transition-duration: 0.4s; } input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover, button[type="submit"]:hover { } input[type="submit"]:active, input[type="button"]:active, button:active, .button:active, button[type="submit"]:active { background-color:#ADC539; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { background-color:#ecf7fd; border:1px solid #o76c2b; outline:none; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { background-color:#ecf7fd; border:1px solid #3fb3f2; outline:none; } button:disabled { background-color:#d0d0d0; cursor:not-allowed; } button:disabled:hover { background-color:#ccc; } .btn-cart { background-color:#007f4e !important; } .btn-cart:before { position: relative; left: -5px; top:0px; font-family:FontAwesome; content:'\f07a'; font-size: 18px; font-size: 1.125rem; } .btn-cart.small { padding: 0.5em 1em 0.5em 1em; font-size: 12px; font-size:0.75rem; } .btn-cart.small:before { font-size: 14px; font-size:0.875rem; } .btn-checkout { padding:1em 2.25em 1em 2em !important; width:100%; background-color:#007f4e !important; } .btn-checkout:before { position: absolute; top: 15px; left: 15px; font-family: fontawesome; content: '\f023'; font-size:24px; font-size:1.5rem; color:#fff; } .btn-checkout:after { position: absolute; top: 21px; right: 15px; font-family: fontawesome; content: '\f04b'; font-size: 14px; font-size:0.875rem; color:#fff; } button[type="submit"].btn-update { position:absolute; bottom:5px; left:0; padding: 0.25em 0 0 0; width:100%; font-size: 12px; font-size:0.75rem; color: #666; text-transform: lowercase; text-decoration: underline; text-align: center; background: transparent; } button[type="submit"].btn-update:hover { color: #0c4e9e; } .btn-continue:before { position:absolute; top:10px; left:10px; font-family:FontAwesome; font-size:20px; font-size:1.25rem; content:'\f104'; } .cart-table .btn-continue:hover, .cart-table button[type="submit"].btn-empty:hover { background-color:#ccc !important; } .btn-remove { position:relative; padding:0 0 0 20px; width: 20px; color: #0c4e9e; text-decoration:underline; text-transform:lowercase; } .btn-remove:before { position: absolute; top:-5px; left:0px; font-family: FontAwesome; content:'\f014'; font-size: 20px; font-size: 1.25rem; color: #0c4e9e; } .btn-remove:hover, .btn-remove:hover:before { color:#F00 } .button.apply { padding: 0.5em 0.75em 0.5em 0.75em; font-size: 12px; font-size:0.75rem; } .button.place-order { margin:3em 0 0 0; }