/****************************************************************** Site Name: DG Base Theme Author: Digital Gear Stylesheet: Main Stylesheet ******************************************************************/ /**************************************************************** GENERAL NORMALIZE (DONT EDIT THIS SECTION) *****************************************************************/ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]), [hidden] { display: none; } /* Base Styles */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.5; } body, button, input, select, textarea { font-family: sans-serif; color: #333; } /* IE Fixes */ img { border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } /* Links */ a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* Typography */ h1 { font-size: 2em; } / fixes html5 bug / p { -webkit-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; hyphens: auto; } abbr[title] { border-bottom: 1px dotted; } b, strong, .strong { font-weight: bold; } dfn, em, .em { font-style: italic; } small, .small, sub, sup { font-size: 0.8em; } ins, .ins { background: #ff9; color: #000; text-decoration: none; } mark, .mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } pre, code, kbd, 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; } blockquote { margin: 1.5em 40px; } q { quotes: none; } q:before, q:after { content: ''; content: none; } ul, ol { margin: 1.5em 0; padding: 0; } dd { margin: 0; } nav ul, nav ol, .widget ol, .widget ul, .commentlist { list-style: none; list-style-image: none; margin: 0; } / Position subscript and superscript content without affecting line-height: gist.github.com/413930 / sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Forms */ form, fieldset, form ul, form ol, fieldset ol, fieldset ul { margin: 0; border: 0; } legend { border: 0; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } 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-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } / Colors for form validity / input:invalid, textarea:invalid { background-color: #f0dddd; } /* Tables */ table { border-collapse: collapse; border-spacing: 0; } / Contain floats: nicolasgallagher.com/micro-clearfix-hack/ / .clearfix:before, .clearfix:after, nav[role=navigation] .menu ul:before, nav[role=navigation] .menu ul:after { content: ""; display: table; } .clearfix:after, nav[role=navigation] .menu ul:after { clear: both; } .clearfix, nav[role=navigation] .menu ul { zoom: 1; } / wordpress junk / .wp-smiley { margin: 0 !important; max-height: 1em; } /***************************************************************** PRINT STYLESHEET *****************************************************************/ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; 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; } } /***************************************************************** END NORMALIZE *******************************************************************/ /*START EDITING STYLES BELOW*/ /******************************************************************* COMMON & REUSABLE STYLES ******************************************************************/ .dist { column-count: 2; column-gap: 20px; column-rule: none; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: none; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: none; } .bold{font-weight:700;} .mobHide { display: none; } .sglprice { display:none; /***hides price from products page***/ } #logo { padding-bottom: 30px; } .dark-grey { color: #1b1b1b; } .dark-grey a { color: #1b1b1b; } .dark-grey a:hover { color: #f1b80b; } .yellow-border { border-top: 3px solid #f1b80b; } #mainCTA { max-width: 220px; /*margin-left: 8%;*/ } .shadow { text-shadow: 0.03em 0.03em 0.03em #856e28; } .inset-shadow { -moz-box-shadow: inset 0 0 10px #fff; -webkit-box-shadow: inset 0 0 10px #fff; box-shadow: inset 0 0 10px #fff; } .specs { font-size: 0.9em; } .noStyle, .noStyle li { list-style-type: none; } /* Floats */ .right { float: right; } .left { float: left; } .clearBoth { clear: both; } /* Text Alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .letterspace { letter-spacing: 6px; } .left-spacing { position: relative; margin-left: 52px; top: -21px; } .left-spacing p { margin-top: 0; line-height:1.7em; } .bottom-spacing{ margin-bottom:5px; } .more { margin-bottom: 45px; margin-right: 25px; } .product ul { padding-left: 35px; line-height: 2.0em; list-style-type: none; } .connect { margin-top: 50px; } post-content li { position: relative; } .product li:before { content: "•"; color: #f1b80b; /* or whatever color you prefer */ font-size: 2.5em; position: absolute; left: 10px; } #main ul { padding-left: 35px; line-height: 2.0em; list-style-type: none; } #main ul li:before { content: "•"; color: #F1B80B; font-size: 35px; position: absolute; left: 10px; } #main .no-bullets li:before, .no-bullets li:before, .eshop ul li:before, #main ul.gform_fields li:before { content: ""; margin:0; padding:0; } #main .no-bullets, .no-bullets, #main ul.gform_fields { padding-left: 0; } /* Highlighting search term on search page */ mark, .search-term { background: #EBE16F; } /* Alerts & notices */ .help, .info, .error, .success { margin: 10px; padding: 5px 18px; border: 1px solid #cecece; } .help { border-color: #E0C618; background: #EBE16F; } .info { border-color: #92cae4; background: #d5edf8; } .error { border-color: #fbc2c4; background: #fbe3e4; } .success { border-color: #c6d880; background: #e6efc2; } /* Backgrounds */ .dark-paper { background: #1b1b1b url('../images/black_paper.png') repeat; float:left; width:100%; z-index: 99999999999999999999; } .paper { background: #FFF url('../images/darker_natural_paper.png') repeat; width: 100%; height: 100%; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #eaeaea; } .padTB { padding: 1.5% 0; } .whiteBG { background:#f1f1f1; float:left; width:100%; } .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /************* DIRECTIONS MAP *************/ #drive { margin: 4em 0 -65px 0; float: left; width: 100%; } /************* FONTS *************/ @font-face { font-family: 'OpenSansLight'; src: url('../fonts/OpenSans-Light-webfont.eot'); src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansLightItalic'; src: url('../fonts/OpenSans-LightItalic-webfont.eot'); src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansRegular'; src: url('../fonts/OpenSans-Regular-webfont.eot'); src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansItalic'; src: url('../fonts/OpenSans-Italic-webfont.eot'); src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Italic-webfont.woff') format('woff'), url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansSemibold'; src: url('../fonts/OpenSans-Semibold-webfont.eot'); src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'), url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansSemiboldItalic'; src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot'); src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansBold'; src: url('../fonts/OpenSans-Bold-webfont.eot'); src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansBoldItalic'; src: url('../fonts/OpenSans-BoldItalic-webfont.eot'); src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansExtrabold'; src: url('../fonts/OpenSans-ExtraBold-webfont.eot'); src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansExtraboldItalic'; src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot'); src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg'); font-weight: normal; font-style: normal; } /* SVG Icons */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot'); src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.svg#icomoon') format('svg'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } /* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before, .icon { font-family: 'icomoon'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; } .icon-checkbox, .icon-check, .icon-facebook, .icon-rss, .icon-youtube, .icon-twitter, .icon-instagram, .icon-linkedin { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-checkbox:active:before { content: "\21"; } .icon-checkbox.selected:before { content: "\28"; } .icon-checkbox:before { content: "\27"; } .icon-check:before { content: "\26"; } .icon-facebook:before { content: "\22"; } .icon-rss:before { content: "\23"; } .icon-youtube:before { content: "\25"; } .icon-twitter:before { content: "\24"; } /****************************************************************** BASE MOBILE STYLES Be light and don't over style since everything here will be loaded by mobile devices. You want to keep it as minimal as possible. ******************************************************************/ body { } #noResultsContainer { display: none; } /******************** WORDPRESS BODY CLASSES style a page via class ********************/ .rtl {} .home {} /* home page */ .blog {} .archive {} /* archive page */ .date {} /* date archive page */ .date-paged-1 {} /* replace the number to the corresponding page number */ .search {} /* search page */ .search-results {} /* search result page */ .search-no-results {} /* no results search page */ .search-paged-1 {} /* individual paged search (i.e. body.search-paged-3) */ .error404 {} /* 404 page */ .single {} /* single post page */ .postid-1 {} /* individual post page by id (i.e. body.postid-73) */ .single-paged-1 {} /* individual paged single (i.e. body.single-paged-3) */ .attachment {} /* attatchment page */ .attachmentid-1 {} /* individual attatchment page (i.e. body.attachmentid-763) */ .attachment-mime-type {} /* style mime type pages */ .author {} /* author page */ .author-nicename {} /* user nicename (i.e. body.author-samueladams) */ .author-paged-1 {} /* paged author archives (i.e. body.author-paged-4) for page 4 */ .category {} /* category page */ .category-1 {} /* individual category page (i.e. body.category-6) */ .category-paged-1 {} /* replace the number to the corresponding page number */ .tag {} /* tag page */ .tag-slug {} /* individual tag page (i.e. body.tag-news) */ .tag-paged-1 {} /* replace the number to the corresponding page number */ .page-template {} /* custom page template page */ .page-template-page-php {} /* individual page template (i.e. body.page-template-contact-php */ .page-paged-1 {} /* replace the number to the corresponding page number */ .page-parent {} .page-child {} .parent-pageid-1 {} /* replace the number to the corresponding page number */ .logged-in {} /* if user is logged in */ .paged {} /* paged items like search results or archives */ .paged-1 {} /* individual paged (i.e. body.paged-3) */ /********************* LAYOUT & GRID STYLES *********************/ .wrap { width: 90%; margin: 0 auto; } /* .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { float: left; }*/ /* No Grid? Say Whaaaat? There's really no need for all that extraneous grid css since floating columns wouldn't really fit on such a small screen, so let's only bring it in when we're ready for it. */ /********************* LINK STYLES *********************/ a, a:visited { color: #f1b80b; } a:hover, a:focus { color: #555555; } a:active {} /* on click */ a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); text-decoration:none; /* this highlights links on iPhones/iPads. so it basically works like the :hover selector for mobile devices. */ } /********************* BUTTONS *********************/ .docs { width: 88%; font-size: 1.5em; } .button, .button:visited, body.single .eshop input[type="submit"], #unset, #submitit, #ppsubmit, .rtnshopping a, .gotocheckout a { color: #000000; background: rgb(255,204,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,204,0,1) 0%, rgba(241,184,6,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,204,0,1)), color-stop(100%,rgba(241,184,6,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,204,0,1) 0%,rgba(241,184,6,1) 100%) !important; /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,204,0,1) 0%,rgba(241,184,6,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,204,0,1) 0%,rgba(241,184,6,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,204,0,1) 0%,rgba(241,184,6,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#f1b806',GradientType=0 ); /* IE6-9 */ border-left: 5px solid #F1B806; text-align: center; display: inline-block; text-decoration: none; cursor: pointer; padding: 8px 5%; line-height: 21px; border: 0; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /*.qty { display: none !important; }*/ #update { background: none !important; } body.single .eshop input[type="submit"], #unset, #submitit, #ppsubmit, .rtnshopping a, .gotocheckout a { border-left: 5px solid #F1B806; width: 100% !important; padding: 8px 5% !important; float: right; margin-right: 2px !important; } .rtnshopping a { padding-left: 0; font-weight: 700; width: 39% !important; float: left; } .gotocheckout a { padding-left: 0; font-weight: 700; width: 39% !important; float: right; margin-top:-28px; } .button:hover, .button:focus, .eshop.sixcol input[type="submit"]:hover, body.single .eshop input[type="submit"]:hover, #unset:hover, #update:hover, #submitit:hover, #ppsubmit:hover, .rtnshopping a:hover, .gotocheckout a:hover { color: #fff; background: rgb(241,184,6); /* Old browsers */ background: -moz-linear-gradient(top, rgba(241,184,6,1) 0%, rgba(255,204,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,184,6,1)), color-stop(100%,rgba(255,204,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(241,184,6,1) 0%,rgba(255,204,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(241,184,6,1) 0%,rgba(255,204,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(241,184,6,1) 0%,rgba(255,204,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(241,184,6,1) 0%,rgba(255,204,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1b806', endColorstr='#ffcc00',GradientType=0 ); /* IE6-9 */ text-decoration: none; } #main .eshop input[type="submit"]:hover { color: #fff; } .eshopbutton { font-size: 18px; width: 39%; } #main .eshop .eshopbutton { margin:0; padding:0; width: 270px; } #main .eshop input[type="submit"], #main .eshop input[type="submit"]:hover { color: #000; border:0; border-radius:0; } .button:active { background: #6f6f6f; } .search-button { padding-top: 30px; width: 24px; } .button.full-width { width: 89%; } .button.sixty-width { width: 60%; } .button.yellow-left, .button.yellow-left:visited, .signup-form .button.yellow-left { border: 0 solid #f1b806; border-radius: 0; border-left: 5px solid #f1b806; } .button.yellow-left:hover { border-left: 5px solid #ffcc00; } .button .yellow-left { width: 60%; } .slider-button { font-size: 1.2em; font-weight:700; position: relative; background-color: #000; background: rgb(69,72,77); background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(25,25,25,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(25,25,25,1))); background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(25,25,25,1) 100%); background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(25,25,25,1) 100%); background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(25,25,25,1) 100%); background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(25,25,25,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#191919',GradientType=0 ); color:#fff; padding: 8px 0px 5px 9px; margin-left: 18%; } .slider-button img { position: absolute; top: 0; right: 0; } .slider-button:after { content: "\203A"; font-family: "Courier New", Courier, monospace; font-size: 1.8em; background: rgb(114,119,127); /* Old browsers */ background: -moz-linear-gradient(top, rgba(114,119,127,1) 0%, rgba(61,61,61,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,119,127,1)), color-stop(100%,rgba(61,61,61,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(114,119,127,1) 0%,rgba(61,61,61,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(114,119,127,1) 0%,rgba(61,61,61,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(114,119,127,1) 0%,rgba(61,61,61,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(114,119,127,1) 0%,rgba(61,61,61,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72777f', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */ position: relative; padding: 0 6px 0 6px; margin-left: 10px; border-left: 1px solid #e1e1e1; } /****************************************************************** H1, H2, H3, H4, H5 STYLES ******************************************************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: 'Open Sans', sans-serif; font-weight: 500; color: #3f3f3f; /* if you're going to use webfonts, be sure to check your weights http://css-tricks.com/watch-your-font-weight/ */ } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: 2.5em; line-height: 1.333em; } h2, .h2 { font-size: 1.75em; line-height: 1.4em; margin-bottom: 0.375em; } .OpenSansRegular, body { font-family: 'Open Sans', sans-serif; font-weight:400; } .OpenSansSemiBold, nav { font-family: 'Open Sans', sans-serif; font-weight: 500; text-decoration: none; color: #f1b80b; } .OpenSansExtraBold, h1, .h1 { font-family: 'Open Sans', sans-serif; font-weight:700; color:#ffcc00; } .OpenSansLight, h2, .h2 { font-family: 'Open Sans', sans-serif; font-weight:300; } .OpenSansBold, h3, .h3, .button { font-family: 'Open Sans', sans-serif; font-weight:700; } #intro h1 { margin-bottom:0; font-size: 2.4em; } #intro h2 { font-size: 1.5em; color:#6f6f6f; margin: 0; } .contact h2, .contact h3, .contact p { margin: 0; } .contact { margin-top: 65px; } .contact p { font-size:16px; } .contact h2 { font-weight: 900; margin-bottom: 10px; } .contact h3 { font-weight: 700; margin-bottom: 10px; } .news h2 { margin-bottom: -0.625em; margin-top: 0.62em; } div.fivecol.news { padding-left: 4%; } h3, .h3 { font-size: 1.125em; } h4, .h4 { font-size: 1.1em; font-weight: 700; } h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; } /********************* FLEXSLIDER PLUGIN OVERRIDE STYLES *********************/ #mainSlider { margin: 0; border: 0; } #mainSlider .fivecol, #mainSlider .sevencol { float: none; } .flex-direction-nav a { top: 20px; width: 50px; height: 100%; background: url('../images/bg_direction_nav.png') no-repeat 0 center; background-color: rgba(0,0,0,.4); } .flex-viewport { width:100%; } .flex-direction-nav li { display: none; } .flex-direction-nav .flex-next { background-position: 100% 50%; margin-right: -5px; } .flex-direction-nav .flex-prev { margin-left: -6px; } #mainSlider .slides img { max-width: 100%; width: auto; margin: 0 auto; } .slider h1 { font-family: 'Open Sans', sans-serif; font-weight: 700; color: #FC0; margin: 0.5em 5%; text-shadow: none; } .slider p { color: #6f6f6f; margin: 0.5em 5%; font-size: 16px; } .slider a { color: #fff; } .sidebar { margin-top: 2.2em; } .sidebar .flex-direction-nav a { -webkit-transition: none; margin: 0; opacity: 1; background: url(../images/yellow_bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; } .sidebar .flexslider:hover .flex-next { right: 0; opacity: 1; } .sidebar .flexslider:hover .flex-prev { left: 0; opacity: 1; } .sidebar .flex-direction-nav .flex-next { background-position: 100% 50%; right: 0; top: 0; width: 25px; z-index: 999; } .sidebar .flex-direction-nav .flex-prev { background-position: 0; left:0; top: 0; width: 25px; z-index: 999; } .sidebar .flexslider ul li { padding: 0; } #sidebar-carousel { padding: 0 11%; } /****** eSHOP OVERRIDE***/ body.single .eshop fieldset, body.single .eshop fieldset legend, body.single ul.eshoppanels > li, body.single .eshop th { background: transparent; } .eshop.sixcol input[type="submit"] { margin: 0; width: 75%; } body.single form.eshop fieldset { margin: 0; padding: 0; } body.single .addtocart { padding: 0; margin-right: 2.762430939%; } body.single abbr[title] { border-bottom: 0; } body.single .eshop .offset { display: none; } body.single form.eshop legend { display: none; } .eshop tr { line-height: 30px; } .items { font-weight: bold; } .eshoppayvia, .fld4, .eshopreference, .privacy { display: none; } #eshopshowshipcost, #unset { display: none; } #update { width:100%; } #main ul.continue-proceed li::before { content: ""; } #main ul.continue-proceed { padding-left: 0; margin-right: 1%; } /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer { overflow: hidden; position: relative; height:600px; } .jspPane { position: absolute; } .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #fff; } .jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { background: #E1E1E1; position: relative; border-radius: 10px; } .jspDrag { background: #F1B80B; position: relative; top: 0; left: 0; cursor: pointer; border-radius:10px; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; } .jspArrow.jspDisabled { cursor: default; background: #80808d; } .jspVerticalBar .jspArrow { height: 16px; } .jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; } Window size: x Viewport size: x /*HIDE EMPTY CART, UPDATE CART, QUANTITY AND SUBTOTAL FIELDS*/ body.single form.eshop label { display: none; } body.single .eshop input[type="text"] { display: none; } body.single .sgloption { display: none; } #cartTotal, .amts, .stotal, .total, .shippingrow { display: none; } #cartDelete.btbr img { display: none; } /*** Isotope styles ****/ .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /********************* HEADER SYTLES *********************/ .header {} #logo { max-width: 188px; display: block; float: right; } .page #intro, .single #intro, .search #intro, .archive #intro { display: none; } /********************* NAVIGATION STYLES *********************/ .nav {} .menu p.subMenu { display: none; } .menu p { margin: 0; } #menu-icon { cursor: pointer; background-color: #f1b806; color: #000; text-align: center; font-size: 2em; border-radius: 10px; width: 40px; } .menu { margin: 2em 0; } #menu-main-navigation { background: #1b1b1b url('../images/dark-linen.png') repeat; width: 100%; z-index: 99999; left: 0; margin-top: 18%; box-shadow: 0 0px 4px 2px #222, 0 0px 4px 2px #222; -moz-box-shadow: 0 0px 4px 2px #222, 0 0px 4px 2px #222; -webkit-box-shadow: 0 0px 4px 2px #222, 0 0px 4px 2px #222; } /* .menu is clearfixed inside mixins.less */ .menu ul { } .menu li { list-style-type: none; } .menu li a { display: block; text-decoration: none; padding: 10px; border-top: 1px solid #ccc; font-size: 1.3em; } /* remember this is for mobile ONLY, so there's no need to even declare hover styles here, you can do it in the style.less file where it's relevant. We want to keep this file as small as possible! */ .menu li a:hover { } .menu li:first-child a { border-top: 0; } .menu li:last-child a {} /* highlight current page */ .menu li.current-menu-item a, .menu li.current_page_item a, .menu li.current-page-ancestor a {} /* so you really have to rethink your dropdowns for mobile. you don't want to have it expand too much because the screen is so small. How you manage your menu should depend on the project. Here's some great info on it: http://www.alistapart.com/articles/organizing-mobile/ */ .menu .sub-menu, .menu .children {} .menu ul ul li a { padding-left: 8%; } .menu ul ul li a:hover {} .menu ul ul li:last-child a {} /* menus should definitely not go down this deep on a mobile device. that would just be a mess. */ .menu ul ul ul {} .menu ul li:hover ul ul {} /********************* POSTS & CONTENT STYLES *********************/ input[type="text"], textarea, select { width: 30%; margin: inherit 0; padding-left: 0; padding-right: 0; } .header { margin-top: 2em; padding-bottom: 3.3em; background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(225,225,225,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(225,225,225,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(225,225,225,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(225,225,225,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(225,225,225,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(225,225,225,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */ } .signup-form { margin-top: 13px; } .signup-form p { msrgin: 0; height: 50px; } body #gform_wrapper_4 .gform_body .gform_fields .gfield input[type=text], .signup-form .news-input { border: 1px solid #e2e2e2; border-radius: 0; padding: 6px 0 6px 10px; vertical-align: top; margin-top: 4px; width: 53%!important; } .signup-form .button { border: 0; border-radius: 0; margin-left: -5px; vertical-align: top; position: relative; z-index: 99; top: -67px; left:55%; } .hentry {} .single-title, .page-title {} .single-title {} .page-title {} .archive_title { } /* want to style individual post classes? Booya! */ .post-id {} /* post by id (i.e. post-3) */ .post {} /* general post style */ .page {} /* general article on a page style */ .attachment {} /* general style on an attatchment */ .sticky {} /* sticky post style */ .hentry {} /* hentry class */ .category-slug {} /* style by category (i.e. category-videos) */ .tag-slug {} /* style by tag (i.e. tag-news) */ /* post meta */ .meta { color: #999; } .meta time {} /* post content */ .post_content {} .post_content p {} .post_content ul, .post_content ol, .post_content table, .post_content dl {} .post_content ul, .post_content ol {} .post_content li {} .post_content ul li {} .post_content ol li {} .post_content blockquote {} .post_content blockquote:before {} /* this adds the quote before the blockquote */ .post_content dl {} .post_content dt {} .post_content dd { margin-left: 0; font-size: 0.9em; color: #787878; margin-bottom: 1.5em;cool thanks } .post_content img { margin: 0 0 1.5em 0; max-width: 100%; } /* image alignment on a screen this size may be a bit difficult. It's set to start aligning and floating images at the next breakpoint, but it's up to you. Feel free to change it up. */ .alignleft, img.alignleft {} .alignright, img.alignright {} .aligncenter, img.aligncenter {} .post_content video, .post_content object { max-width: 100%; } .post_content pre, .post_content code { background: #eee; border: 1px solid #cecece; padding: 10px; } .wp-caption { background: #eee; padding: 5px; } .wp-caption img { margin-bottom: 0; width: 100%; } .wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; } /* image gallery styles */ .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .size-full {} .size-large {} .size-medium {} .size-thumbnail {} .hentry footer {} .singleTeflon{box-sizing:border-box;height:253px;border: solid 1px #888888;margin-bottom: 20px;} .singleTeflon .products{width:auto;} .selected .button.icon-checkbox:after{content:'';width:8px;height:8px;background:#000;position:absolute;bottom:14.25px;right:20px} .slick-slide{text-align:center;} /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .page-navigation, .wp-prev-next { margin: 1.1em 0 4.2em; } .bones_page_navi, .wp-prev-next ul {} .bones_page_navi li { float: left; margin-left: 10px; } .bones_page_navi li a { padding: 3px 6px; display: block; text-decoration: none; position: relative; } .bones_page_navi li a:hover { color: #3F6B80; text-decoration: underline; } /* current page link */ .bones_page_navi li.bpn-current { padding: 3px 6px; background-color: #e1e1e1; border-bottom: 1px solid #f1b806; border-radius:4px; position: relative; } /* hovering on current page link */ .bones_page_navi li.bpn-current:hover {} /* common styles for page-navi links */ .bones_page_navi li.bpn-prev-link a, .bones_page_navi li.bpn-next-link a { padding: 0; } .bones_page_navi li.bpn-prev-link a:hover, .bones_page_navi li.bpn-next-link a:hover, .bones_page_navi li.bpn-first-page-link a:hover, .bones_page_navi li.bpn-last-page-link a:hover { background: none; } /* previous link */ .bones_page_navi li.bpn-prev-link { } .bones_page_navi li.bpn-prev-link a {} .bones_page_navi li.bpn-prev-link a:hover {} /* next page link */ .bones_page_navi li.bpn-next-link { font-weight: 700; } .bones_page_navi li.bpn-next-link a {} .bones_page_navi li.bpn-next-link a:hover {} /* first page link */ .bones_page_navi li.bpn-first-page-link {} .bones_page_navi li.bpn-first-page-link a {} .bones_page_navi li.bpn-first-page-link a:hover {} /* last page link */ .bones_page_navi li.bpn-last-page-link {} .bones_page_navi li.bpn-last-page-link a {} .bones_page_navi li.bpn-last-page-link a:hover {} /* fallback previous & next links */ .wp-prev-next {} .wp-prev-next ul {} .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /****************************************************************** COMMENT STYLES ******************************************************************/ #comments {}/* h3 comment title */ #comments span {} /* number of comments span */ .comment-nav {} .comment-nav ul {} .comment-nav ul li {} .commentlist {} .commentlist li { position: relative; clear: both; overflow: hidden; list-style-type: none; margin-bottom: 1.5em; padding: 0.7335em 10px; } .commentlist li[class*=depth-] { margin-top: 1.1em; } .commentlist li.depth-1 { margin-left: 0; margin-top: 0; } .commentlist li:not(.depth-1) { margin-right: -10px; margin-left: -10px; margin-top: 0; padding-bottom: 0; } .commentlist li.depth-2 {} .commentlist li.depth-3 {} .commentlist li.depth-4 {} .commentlist li.depth-5 {} .commentlist li:last-child { margin-bottom: 0; } .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-1 {} /* change number for different depth */ .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .alt {} .commentlist .odd { background: #eee; } .commentlist .even { background: #fefefe; } .commentlist .parent {} .commentlist .comment {} .commentlist .children { } .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist .vcard { margin-left: 50px; } .commentlist .vcard cite.fn { font-weight: 700; font-style: normal; } .commentlist .vcard time { float: right; } .commentlist .vcard time a { color: #999; text-decoration: none; } .commentlist .vcard time a:hover { text-decoration: underline; } .commentlist .vcard img.photo {} .commentlist .vcard img.avatar { position: absolute; left: 10px; padding: 2px; border: 1px solid #cecece; background: #fff; } .commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist li .comment_content { margin-left: 50px; } .commentlist li .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } .commentlist li ul { margin: 0; } .commentlist .comment-reply-link { text-decoration: none; float: right; background: #4598bb; padding: 3px 5px; color: #fff; opacity: 0.65; margin-bottom: 10px; font-weight: 700; font-size: 0.9em; } .commentlist a.comment-reply-link:hover { opacity: 1; } /****************************************************************** COMMENT FORM STYLES ******************************************************************/ .respond-form { margin: 1.5em 10px; padding-bottom: 2.2em; } #comment-form-title { margin: 0 0 1.1em; } #cancel-comment-reply {} #cancel-comment-reply a {} .respond-form form[method=post] { margin: 0.75em 0; } .comments-logged-in-as {} .respond-form form[method=post] li { list-style-type: none; clear: both; margin-bottom: 0.7335em; } .respond-form form[method=post] li label, .respond-form form[method=post] li small { display: none; } .respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url], .respond-form textarea { padding: 3px 6px; background: #efefef; border: 2px solid #cecece; line-height: 1.5em; } .respond-form input[type=text]:focus, .respond-form input[type=email]:focus, .respond-form input[type=url]:focus, .respond-form textarea:focus { background: #fff; } .respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url] { max-width: 400px; min-width: 250px; } #allowed_tags { margin: 1.5em 10px 0.7335em 0; } .respond-form textarea { resize: none; width: 97.3%; height: 150px; } #submit {} /* form validation */ .respond-form input:invalid, .respond-form textarea:invalid { outline: none; border-color: #fbc2c4; background-color: #f6e7eb; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } /* no comments */ .nocomments { margin: 0 20px 1.1em; } /********************* SIDEBARS & ASIDES *********************/ .sidebar { background: white url('../images/natural_paper.png'); } .sidebar.teflonSpecs { background: none; } .sidebar ul li { list-style-type: none; padding-left: 20px; line-height: 1.5em; padding-bottom: 10px; font-size:1.2em; } .sidebar ul li a { color: #666666; } .sidebar ul li a:hover { color: #f1b80b; } .sidebar h2 { font-family: 'OpenSansSemibold'; font-weight: 500; font-size: 1.6em; margin-left: 20px; } #specs h2 { margin-left: 0; } .sidebar h3 { /* font-family: 'Open Sans';*/ font-weight: 700; font-size: 1.1em; color: #1b1b1b; margin-left: 18px; } .topMargin { margin-top: 10px; } .widget {} .widgettitle {} .widget ul {} .widget li {} .widget li:first-child {} .widget li:last-child {} .widget li a {} .widget li ul {} #isotopeNav a { display: block; font-family: sans-serif; } /********************* PRODUCTS STYLES *********************/ .catalog {margin-top: 28px;} .compare { width: 100%; overflow-y: hidden; overflow-x: scroll; } .compare-item { width: 320px; float: left; position: relative; margin-right: 20px; margin-bottom:40px; background-color: #fff; } .compare-item ul { font-size:0.8em; } .compare-item img { display: block; margin: 0; } #sortable { cursor:move; } .scroll { /*width: 380%;*/ } .products { font-size: 1em; background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ color: #f1b80b; padding: 6px 0px 6px 5px; width: 220px; height: 61px; margin-top: 0; margin-bottom: 0; } .teflonHeader.products { font-size: 1em; } .teflonHeader.products span { font-size: .85em; line-height: 126%; display: inline-block; padding-top: 3px; } .item { float: left; border: solid 1px #888888; margin-right: 10px; margin-bottom: 20px; width: 225px; height: 273px; } /*=================================================================================================== Teflon-shoes =================================================================================================== ===================================================================================================*/ .weldSVG { width:80%; } img.weldSVG.corner { width: 52%; } .seamfix{width:75% !important; margin-left:3%;} .seamfix a{width:80% !important;} div#specs a:nth-child(1) { margin-bottom: 6px; } div#specs a:nth-child(2) { margin-bottom: 6px; } div#specs a:nth-child(3) { margin-bottom: 6px; } .sort_teflon ul { background: #fff; border: 1px solid rgba(100,100,100,0.1); -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); } .sort_teflon a.icon-checkbox { width: 180px; } /*=================================================================================================== PAGE TEMPLATE STYLING =================================================================================================== ===================================================================================================*/ .page-template-page-teflon-shoes-php .sidebar { background: none; margin-top: 0em; } .page-template-page-teflon-shoes-php #sidebar1 { border-top: none; } .page-template-page-teflon-shoes-php .sidebar h2 { background: none; margin-left: 0; font-size: 2em; margin-top: 0; } .page-template-page-teflon-shoes-php #isotopeNav .sort_teflon a { position: relative; } .page-template-page-teflon-shoes-php .icon-checkbox:before { position: absolute; bottom: 8px; right: 17px; } /*=================================================================================================== PAGE TEMPLATE STYLING End ===================================================================================================*/ .sort_teflon li strong { display: block; } .bx-wrapper .bx-viewport { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #teflon-carousel { position: relative; width: 89%; margin: 0 auto; background: white; padding: 0 5%; -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); } #teflon-carousel .li img { opacity: .5; transform: scale(.6); transition:all .2s; } #teflon-carousel .li.slick-center img { opacity: 1; transform: scale(1); transition:all 1s; } /*bx slider styling end */ .sort_teflon .sort_teflon { padding-top: 20px; overflow: hidden; } .sort_teflon ul li { text-align: center; padding-bottom: 25px; } .sort_teflon ul li + li { padding-left: 0px; } .sort_teflon ul li { padding-left: 0px; } .productTitle {display: none;} .selected .productTitle { display: inline; color: black; position: relative; bottom: 12px; } .sort_teflon li, .sort_teflon > h2 { display: inline-block; float: left; } .sort_teflon .button { float: left; margin-bottom: 7px; margin-left: 13px; padding: 8px 1.5%; padding-right: 3%; position: relative; width:100px; } .sort_teflon .default {opacity: 1;} .slick-active.slick-center .productTitle { display: inline; color: black; position: relative; bottom: 12px; } .slider-trans-left { height:100%; top: 0; bottom: 0; position: absolute; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ z-index: 9999; } .slider-trans-right { height:100%; top: 0; bottom: 0; right:0; position: absolute; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ z-index: 9998; } .slick-next{ z-index:9999; } .li.a { cursor: pointer; } .filter.option-set.shoes.sort_teflon a.selected { opacity: 1; transtion: all .5s; } .notSelected { opacity: .2; transtion: all .5s; } .slick-next, .slick-prev { width: 40px; height: 97.5%; top: 6%; background-repeat: no-repeat; } .slick-next { right: -54px; } .slick-prev { left: -54px; } /*=================================================================================================== ==================================================================================================== PAGE TEMPLATE STYLING END ===================================================================================================*/ /********************* FOOTER STYLES *********************/ .footer { clear: both; -moz-box-shadow: inset 0 30px 30px -30px #000000, inset 0 -30px 30px -30px #000000; -webkit-box-shadow: inset 0 30px 30px -30px #000000, inset 0 -30px 30px -30px #000000; box-shadow: inset 0 30px 30px -30px #000000, inset 0 -30px 30px -30px #000000; } #s, #searchsubmit { vertical-align:top; margin:0; padding:0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } #s { height: 23px; margin-right: -5px; border: 1px solid #5b5b5b; background-color: #3a3a3a; width: 160px; color: #ffffff; padding-left: 2%; } .searchField { border-top: 4px solid #f1b80b; width: 188px; } .dark-linen { background: #1b1b1b url('../images/dark-linen.png') repeat; float: left; width: 100%; } .social-icon { height: 40px; margin-top: -15px; } .social-icon li { float: left; } .social-icon li a { font-size: 2em; padding: 0 10px; } .loc { color: #ffffff; font-size: .9em; } .lang { font-size: .9em; } /* if you checked out the link above: http://www.alistapart.com/articles/organizing-mobile/ you'll want to style the footer nav a bit more in-depth. Remember to keep it simple because you'll have to override these styles for the desktop view. */ .footer-links { } .footer-links ul {} .footer-links li {} .footer-links li a { display: block; padding: 5px 0; border-top: 1px solid #f1b806; font-size: 1.2em; } .footer-links li:first-child a { border-top: none; } #footer-right ul { list-style-type: none; } /* remember, no hover in mobile */ .footer-links li a:hover {} /* highlight current page */ .nav li.current-menu-item a, .nav li.current_page_item a {} /* be careful with the depth of your menus */ .footer-links .sub-menu {} .attribution { color: #ccc; padding-bottom: 15px; font-size: 0.688em; } /****************************************************************** LARGE MOBILE PHONES They will be visible to anyone who resizes their browser from the smallest size to the next break point. ******************************************************************/ @media only screen and (min-width: 481px) { /* insert override styles here */ } /* end of media query */ @media only screen and (max-width: 481px) { .slick-next { right: -15px; } .slick-prev { left: -15px; } } /****************************************************************** DESKTOP & iPAD This is your standard iPad size or average tablet size. It's also a decent size for desktop users. This is your bread and butter styles when it comes to multi column layouts. ******************************************************************/ @media only screen and (min-width: 768px) and (max-width:1024px) { .singleTeflon{height:185px;} .selected .button.icon-checkbox:after{bottom:15.25px;} .sort_teflon .button {width:88px;} .slider-trans-left {width:120px;} .slider-trans-right {width:120px;} .slick-next { right: -26px; } .slick-prev { left: -26px; } } @media only screen and (min-width: 1025px){ .singleTeflon{height:256px;} .slider-trans-left {width:200px;} .slider-trans-right {width:200px;} } @media only screen and (min-width: 768px) { .slick-next { right: -32px; } .slick-prev { left: -32px; } .seamfix{width:10% !important; margin-left:auto;} .mobHide { display: block; } .scrHide { display: none; } .ninecol.last.mainMenu { width: 100%; } .header { margin-top: 2em; padding-bottom: 1.3em; } body { font-size: 14px; line-height: 1.5; color: #6f6f6f; } .scr-right { float:right; } .scr-left { float:left; } .power { font-size: 1.4em; } .innovation { font-size:3em; } .paper { float: left; } #intro { padding-bottom:50px; } .phoneBig { font-size: 2.5em; line-height: 1em; } .contact .button { padding: 18px 0; font-size: 1.7em; } .newsletter { margin: 64px 0 20px 0; } .menu li a { border-top: 0; } .docs { width: 88%; font-size: 1.1em; } .slider-button { padding: 8px 0px 6px 9px; } /* Fonts */ #intro h1 { font-size: 46px; } #intro h2 { font-size: 2.5em; } /* Plug-in Override */ .flex-control-nav { display: none;} .flex-direction-nav li { display: block; } .slider h1, .slider p, .slider a { margin-left: 18%; } #mainSlider .fivecol, #mainSlider .sevencol { float: left; } /* Footer */ .footer-links li a { display: block; padding: 0px 0; border-top: none; font-size: 0.9em; } .shadowRight { border-right: 2px solid #fff; -webkit-box-shadow: 13px 0 26px -20px rgba(0, 0, 0, 0.5), inset -35px 0 17px -40px rgba(0, 0, 0, 0.25); -moz-box-shadow: 13px 0 26px -20px rgba(0, 0, 0, 0.5), inset -35px 0 17px -40px rgba(0, 0, 0, 0.25); box-shadow: 13px 0 26px -20px rgba(0, 0, 0, 0.5), inset -35px 0 17px -40px rgba(0, 0, 0, 0.25); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /****************************************************************** WORDPRESS BODY CLASSES want to style a page via body class? go ahead ******************************************************************/ .rtl {} .home {} /* home page */ .blog {} .archive {} /* archive page */ .date {} /* date archive page */ .date-paged-1 {} /* replace the number to the corresponding page number */ .search {} /* search page */ .search-results {} /* search result page */ .search-no-results {} /* no results search page */ .search-paged-1 {} /* individual paged search (i.e. body.search-paged-3) */ .error404 {} /* 404 page */ .single {} /* single post page */ .postid-1 {} /* individual post page by id (i.e. body.postid-73) */ .single-paged-1 {} /* individual paged single (i.e. body.single-paged-3) */ .attachment {} /* attatchment page */ .attachmentid-1 {} /* individual attatchment page (i.e. body.attachmentid-763) */ .attachment-mime-type {} /* style mime type pages */ .author {} /* author page */ .author-nicename {} /* user nicename (i.e. body.author-samueladams) */ .author-paged-1 {} /* paged author archives (i.e. body.author-paged-4) for page 4 */ .category {} /* category page */ .category-1 {} /* individual category page (i.e. body.category-6) */ .category-paged-1 {} /* replace the number to the corresponding page number */ .tag {} /* tag page */ .tag-slug {} /* individual tag page (i.e. body.tag-news) */ .tag-paged-1 {} /* replace the number to the corresponding page number */ .page-template {} /* custom page template page */ .page-template-page-php {} /* individual page template (i.e. body.page-template-contact-php */ .page-paged-1 {} /* replace the number to the corresponding page number */ .page-parent {} .page-child {} .parent-pageid-1 {} /* replace the number to the corresponding page number */ .logged-in {} /* if user is logged in */ .paged {} /* paged items like search results or archives */ .paged-1 {} /* individual paged (i.e. body.paged-3) */ /********************* LAYOUT & GRID STYLES *********************/ .wrap { max-width: 1140px; } /* This is a combination of the 1140 grid and Twitter Boostrap. I liked 1140 but Boostrap's grid was way more detailed so I merged them together, let's see how this works out. If you want to use 1140, the original values are commented out on each line. */ .onecol { width: 5.801104972%; } /* 4.85%; } /* grid_1 */ .twocol { width: 14.364640883%; } /* 13.45%; } /* grid_2 */ .threecol { width: 22.928176794%; } /* 22.05%; } /* grid_3 */ .fourcol { width: 31.491712705%; } /* 30.75%; } /* grid_4 */ .fivecol { width: 40.055248616%; } /* 39.45%; } /* grid_5 */ .sixcol { width: 48.618784527%; } /* 48%; } /* grid_6 */ .sevencol { width: 57.182320438000005%; } /* 56.75%; } /* grid_7 */ .eightcol { width: 65.74585634900001%; } /* 65.4%; } /* grid_8 */ .ninecol { width: 74.30939226%; } /* 74.05%; } /* grid_9 */ .tencol { width: 82.87292817100001%; } /* 82.7%; } /* grid_10 */ .elevencol { width: 91.436464082%; } /* 91.35%; } /* grid_11 */ .twelvecol { width: 99.999999993%; } /* 100%; } /* grid_12 */ /* layout & column defaults */ .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { position: relative; float: left; margin-right: 2.762430939%; } .sevencol { margin: 50px 0 0 0; } .last { float: right; margin-right: 0; } /********************* HEADER SYTLES *********************/ #inner-header { position:relative; } .header {} #logo { max-width: 100%; float: left; } .page #intro, .single #intro, .search #intro, .archive #intro { display: block; } /********************* NAVIGATION STYLES *********************/ .nav {} .menu p { margin:0; text-align:left; } .menu p.subMenu { display:block; color: #6f6f6f; font-size: 0.8em; } #menu-main-navigation { background: transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin-top: 0; } .menu {} .menu ul { background-color: #eee; } .menu li { float: left; position: relative; } .menu li:hover { border-bottom: 3px solid #F1B806; } .sub-menu li:hover { border-bottom: 0; } .menu li a { border-bottom: 0; text-align:center; /*background-color: #fff;*/ font-size: 1.1em; } .menu li a:hover { /* background-color: #fff;*/ } .menu li:first-child a {} .menu li:last-child a {} /* highlight current page */ .menu li.current-menu-item a, .menu li.current_page_item a, .menu li.current-page-ancestor a {} /* plan your menus and drop-downs wisely. */ .menu ul li ul { margin: 0; width: 200px; border: 1px solid #e1e1e1; border-top: 0; position: absolute; display: none; z-index: 8999; } /* Add this class in WP Menus to make the dropdown overflow left */ .menu ul li.dropLeft ul { right: 0; } /* show the dropdowns on hover */ .menu ul li:hover ul { top: auto; display: block; } .menu ul ul li:first-child { border-top: 3px solid #f1b80b;} .menu ul ul li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #e1e1e1; text-align: left; color: #555; } .menu ul li a:hover { color: #f1b80b; } .menu ul ul li:first-child a {} .menu ul ul li:last-child a { border-bottom: 0; } /* more levels */ .menu ul ul ul { } .menu ul li:hover ul ul { } /************* INTERACTIVE MAP **************/ .interactiveMap img { width: 100%; height: auto; } .map-cap { background-color: rgba(0, 0, 0, 0.85); color: #fff; padding: 5%; border: 1px solid #ffcc00; border-radius: 6px; width: 210px; margin-left: 25px; position:relative; z-index: 9999; display: none; font-size: 11px; line-height: 1.5em; cursor: default; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .opposite { margin-left: -225px; padding-left: 55%; } .map-cap h1 { font-size: 16px; } .map-cap h2 { font-size: 14px; color: #FFF; } .map-cap h3 { font-size: 10px; color: #8a8a8a; } .map-cap li { list-style: none; } .point span { color: #f1b806; width: 20px; height: 18px; display: inline-block; overflow: hidden; } .point:hover span { color: #ffcc00; } .left { float: left; } .point { position: absolute; border: 0; cursor: pointer; font-size: 50px; text-shadow: 1px 2px 6px rgba(0,0,0,0.75); line-height: 10px; } .one { top: 40%; left: 19%; } .two { top: 48%; left: 23%; } .three { top: 54%; left: 27%; } .four { top: 77%; left: 31%; } .five { top: 73%; left: 36%; } .six { top: 29%; left: 47%; } .seven { top: 29%; left: 19%; } .eight { top: 45%; left: 54%; } .nine { top: 57%; left: 30%; } .ten { top: 59%; left: 71%; } .eleven { top: 54%; left: 47%; } .twelve { top: 40%; left: 75%; } .thirteen { top: 79%; left: 82%; } .fourteen { top: 67%; left: 29%; } .fifteen { top: 37%; left: 65%; } .sixteen { top: 74%; left: 54%; } .seventeen { top: 50.5%; left: 65.5%; } .eighteen { top: 51%; left: 65.4%; } .nineteen { top: 49%; left: 64%; } .twenty { top: 47%; left: 68.5%; } .twentyone { top: 75%; left: 53%; } .twentytwo { top: 74%; left: 53%; } .twentythree { top: 74.5%; left: 52.5%; } /********************* POSTS & CONTENT STYLES *********************/ #content {} .hentry {} .single-title, .page-title {} .single-title {} .page-title {} .archive_title { } /* want to style individual post classes? Booya! */ .post-id {} /* post by id (i.e. post-3) */ .post {} /* general post style */ .page {} /* general article on a page style */ .attachment {} /* general style on an attatchment */ .sticky {} /* sticky post style */ .hentry {} /* hentry class */ .category-slug {} /* style by category (i.e. category-videos) */ .tag-slug {} /* style by tag (i.e. tag-news) */ /* post meta */ .meta {} .meta time {} /* post content */ .post_content {} .post_content p {} .post_content ul, .post_content ol, .post_content table, .post_content dl {} .post_content ul, .post_content ol {} .post_content li {} .post_content ul li {} .post_content ol li {} .post_content blockquote {} .post_content blockquote:before {} /* this adds the quote before the blockquote */ .post_content dl {} .post_content dt {} .post_content dd {} .post_content img {} /* image alignment */ .alignleft, img.alignleft { margin:1.5em 1.5em 1.5em 0; display:inline; float:left; width: 47%; } .alignright, img.alignright { margin:1.5em 0 1.5em 1.5em; display:inline; float:right; width: 47%; } .aligncenter, img.aligncenter { margin:1.5em 0 auto; display:block; clear:both; } .post_content video, .post_content object {} .post_content pre, .post_content code {} .wp-caption {} .wp-caption img {} .wp-caption p.wp-caption-text {} /* image gallery styles */ .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .size-full {} .size-large {} .size-medium {} .size-thumbnail {} .hentry footer {} /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .page-navigation, .wp-prev-next {} .bones_page_navi, .wp-prev-next ul {} .bones_page_navi li { font-size:11px; } .bones_page_navi li a {} .bones_page_navi li a:hover {} /* current page link */ .bones_page_navi li.bpn-current {} /* hovering on current page link */ .bones_page_navi li.bpn-current:hover {} /* common styles for page-navi links */ .bones_page_navi li.bpn-prev-link a, .bones_page_navi li.bpn-next-link a {} .bones_page_navi li.bpn-prev-link a:hover, .bones_page_navi li.bpn-next-link a:hover, .bones_page_navi li.bpn-first-page-link a:hover, .bones_page_navi li.bpn-last-page-link a:hover {} /* previous link */ .bones_page_navi li.bpn-prev-link {} .bones_page_navi li.bpn-prev-link a {} .bones_page_navi li.bpn-prev-link a:hover {} /* next page link */ .bones_page_navi li.bpn-next-link {} .bones_page_navi li.bpn-next-link a {} .bones_page_navi li.bpn-next-link a:hover {} /* first page link */ .bones_page_navi li.bpn-first-page-link {} .bones_page_navi li.bpn-first-page-link a {} .bones_page_navi li.bpn-first-page-link a:hover {} /* last page link */ .bones_page_navi li.bpn-last-page-link {} .bones_page_navi li.bpn-last-page-link a {} .bones_page_navi li.bpn-last-page-link a:hover {} /* fallback previous & next links */ .wp-prev-next {} .wp-prev-next ul {} .wp-prev-next .prev-link {} .wp-prev-next .next-link {} /****************************************************************** COMMENT STYLES ******************************************************************/ #comments {}/* h3 comment title */ #comments span {} /* number of comments span */ .comment-nav {} .comment-nav ul {} .comment-nav ul li {} .commentlist {} .commentlist li {} .commentlist li[class*=depth-] { padding-left: 20px; } .commentlist li.depth-1 {} .commentlist li:not(.depth-1) {} .commentlist li.depth-2 {} .commentlist li.depth-3 {} .commentlist li.depth-4 {} .commentlist li.depth-5 {} .commentlist li:last-child {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-1 {} /* change number for different depth */ .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentl a {} /* pages widget */ .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} /* recent-posts widget */ .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} /* archives widget */ .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} /* tag-cloud widget */ .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} /* calendar widget */ .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} /* category widget */ .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} /* recent-comments widget */ .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} /* search widget */ #searchform { width:190px; } .widget_search {} .screen-reader-text {} /* text widget */ .textwidget {} .widget_text {} .textwidget p {} /********************* FOOTER STYLES *********************/ .footer { margin-top: 60px; } .map { margin-top: 6%; } .loc { text-align: right; } .lang { float: right; padding-left: 40px; } .searchField { margin-top: 30px; } .social-icon li { float: right; } /* you'll probably need to do quite a bit of overriding here if you styled them for mobile. Make sure to double check these! */ .footer-links { margin-top: 20px; } .footer-links ul {} .footer-links li { float:left; padding: 5px 10px; } .footer-links li a {} /* hover styles */ .footer-links li a:hover {} /* highlight current page */ .nav li.current-menu-item a, .nav li.current_page_item a {} /* be careful with the depth of your menus. it's very rare to have multi-depth menus in the footer. */ .footer-links .sub-menu {} .attribution {} .sort_teflon ul li { width: 15%; } .sort_teflon ul li + li { margin-left: 3.9%; } } /* end of media query */ @media only screen and (min-width: 1024px) { .ninecol.last.mainMenu { width: 74%; } .slider-button { padding: 8px 0px 6px 9px; } /* Teflon Shoes Template ======================================================================================= ========================================================================================*/ .weldSVG { width: 70%; } .slick-next { right: -52px; } .slick-prev { left: -52px; } img.weldSVG.corner { width: 95%; } .sidebar .sort_teflon ul li { padding-left: 0px; } .sort_teflon ul li { font-size: .8em; } ul.filter.sort_teflon { padding-left: 2%; } .teflonContainer .item { margin-right: 1%; margin-bottom: 20px; } } /****************************************************************** AVERAGE VIEWING SIZE This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. ******************************************************************/ @media only screen and (min-width: 1030px) { body {} .wrap { max-width: 1140px; } .slider-button { padding: 7px 0px 4px 9px; } .sort_teflon ul li { font-size: 1em; } .sort_teflon ul li + li { padding-left: 1%; } } /* end of media query */ /****************************************************************** SUPER LARGE MONITORS STYLES This is for super wide monitors for the l33t people. If you worked in a good base in the previous styles, this should work pretty seamlessly. ******************************************************************/ @media only screen and (min-width: 1240px) { .weldSVG { width:100%; } .sort_teflon a.icon-checkbox { width: 180px; } /*bx slider styling */ /* PAGE TEMPLATE STYLING */ .page-template-page-teflon-shoes-php .sidebar { background: none; } .page-template-page-teflon-shoes-php #sidebar1 { border-top: none; } .page-template-page-teflon-shoes-php #isotopeNav .sort_teflon a { position: relative; } /* PAGE TEMPLATE STYLING End */ .checkbox:after { position: absolute; bottom: 0; } .bx-wrapper .bx-viewport { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #teflon-carousel li img { opacity: .2; transform: scale(.6); transition:all .2s; } #teflon-carousel .li.slick-center img { opacity: 1; transform: scale(1); transition:all 1s; } /*bx slider styling end */ .sort_teflon { padding-top: 20px; overflow: hidden; } #teflon-carousel { margin: 0 auto; } .sort_teflon li, .sort_teflon > h2 { display: inline-block; float: left; } .sort_teflon .button { float: left; margin-bottom: 7px; margin-left: 10px; } #teflon-carousel.flexslider { background: #FBFBFB; } body {} .wrap { max-width: 1240px; } .slider-button { padding: 8px 0px 5px 9px; } } /* end of media query */ @media only screen and (min-width: 1600px) { .slider-button { padding: 7px 0px 4px 9px; } .sort_teflon ul li + li { padding-left: 74px; } } /****************************************************************** RETINA (iPhone 4 & 5) OR SUPER HIGH RES SCREENS STYLES This is for the high res phones or devices. ******************************************************************/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* EXAMPLE Let's say you have an image and you need to make sure it looks ok on retina screens. Let's say we have an icon which dimension are 24px x 24px. In your regular stylesheets, it would look something like this: .icon { width: 24px; height: 24px; background: url(img/test.png) no-repeat; } For retina screens, we have to make some adjustments, so that image doesn't look blurry. So, taking into account the image above and the dimensions, this is what we would put in our retina stylesheet: .icon { background: url(img/test@2x.png) no-repeat; background-size: 24px 24px; } So, you would create the same icon, but at double the resolution, meaning it would be 48px x 48px. You'd name it the same, but with a @2x at the end (this is pretty standard practice). Set the background image so it matches the original dimensions and you are good to go. */ } /* end of media query */ /* CMH REMOVE TABS WOO */ ul.tabs.wc-tabs {display:none!important;} /* .woocommerce-product-gallery {display:none!important;} .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {display:none!important;} */ /*.product-quantity .qty {display:inline!important;}*/ .cart_totals h2, .cart_totals table{display:none;} a.button.yellow_left, button.single_add_to_cart_button.alt {font-size:1.25em; color:black!important; font-weight:600; padding:.9em; width:372px!important;} a.button.yellow-left {font-size:1.1em; color:black; font-weight:600; padding:.7em; } a.button.yellow-left.eshopbutton {font-size:1.25em; color:black; font-weight:600; padding:.9em;width:372px!important; margin-left:10px; } .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {font-size:1.25em; color:black; font-weight:600; padding:.5em;width:90% } .cart-continue {margin-top:-83px;} .single-product .quantity{display:none;} .product.woocommerce.add_to_cart_inline {border:none!important;padding:0px!important;}