$lightGreyBackground: #f7f7f7; $fontColor: #333; $lightGrey: #666; $regularFont: verdana, arial ,sans-serif; $secondaryFont: 'Oxygen', arial, verdana, sans-serif; $tertiaryFont: helvetica,arial,sans-serif; /* ------------------ General Styling ------------------ */ .clearfix{ clear:both; width:100%; } body, p, ul, li, a, img, table { margin: 0; padding: 0; border: none; color: $fontColor; font-family: $regularFont; font-size: 13px; } h1 { font-size:24px; margin-top:4px; margin-bottom:4px; font-family:$secondaryFont; color:$fontColor; } h2 { font-size:12px; font-family:$secondaryFont; text-decoration:none; margin-bottom:4px; margin-top: 4px; color: $fontColor; } /* ------------------ Link Styling ------------------ */ a.Clink:link { color: $fontColor; font-family:$secondaryFont; font-size:12px; text-decoration:none; font-weight:bold; } a.Clink:active { color: $fontColor; font-family:$secondaryFont; font-size:12px; text-decoration:none; font-weight:bold; } a.Clink:visited { color: $fontColor; font-family:$secondaryFont; font-size:12px; text-decoration:none; font-weight:bold; } a.Clink:focus { color: $fontColor; font-family:$secondaryFont; font-size:12px; text-decoration:none; font-weight:bold; } a.Clink:hover { color: #f90; font-family:$secondaryFont; font-size:12px; text-decoration:underline; font-weight:bold; } a.Clinkmore { font-weight:bold; font-family:$secondaryFont; font-size:15px; } form { margin:0; padding:0; } /* ------------------ Filter Styling ------------------ */ .Cfiltersetup { vertical-align:top; font-family:$secondaryFont; border-left:0; border-right:1px solid #ccc; border-collapse: collapse; height: 100%; width:20%; } .Cfilterhead{ font-size:17px; font-family:$secondaryFont; line-height:35px; color:white; font-weight:normal; padding-left:4px; padding-right:4px; } a.Cfilterlink { color:$fontColor; text-decoration:none; font-size:13px; padding-left:10px; font-weight:bold; line-height:2.5em; &:hover{ text-decoration: underline; } } .filter-list{ margin-bottom: 1em; } .filter-type{ font-size: 16px; line-height: 2em; } .active-filter{ text-decoration: none; color: green; font-size: 21px; } .active-filter:hover{ color: red; } .active-filter .Cfilteredon { font-size:14px; color: $fontColor; font-weight:bold; padding-left: 2px; } .active-filter .checkmark:after{ content: '\2713'; } .active-filter:hover .checkmark:after{ content: '\2717'; } /* ------------------ Pagination Styling ------------------ */ .Cpagination { font-family:$secondaryFont; color: white; font-size:13px; } .Cpaginationbar{ color: white; height:35px; vertical-align:middle; width:100%; } a.Cpaginationbox{ font-family:$secondaryFont; color:white; font-size:13px; padding:3px; margin:3px; text-decoration:none; } a.Cpaginationbox:hover{ font-family:$secondaryFont; color:white; text-decoration:underline; padding:3px; margin:3px; } .Cpaginationboxa { font-family:$secondaryFont; color:white; font-size:13px; padding:3px; margin:3px; text-decoration:underline; font-weight:bold; } .pg{ color: white; font-size:13px; padding-right: 5px; letter-spacing: .1em; } /* ------------------ Search Styling ------------------ */ .Csearchtitle { font-size: 13px; color: $fontColor; text-decoration: none; } a.Csearchtitle { font-size: 13px; color: $fontColor; text-decoration: none; font-weight: normal; line-height: 17px; } a.Csearchtitleprice { font-size: 20px; text-decoration: none; font-weight: bold; line-height:40px; } .Csearchrowspacing { border: 0; height: 1px; background: #999; background-image: -webkit-linear-gradient(left, #ddd, #999, #ddd); background-image: -moz-linear-gradient(left, #ddd, #999, #ddd); background-image: -ms-linear-gradient(left, #ddd, #999, #ddd); background-image: -o-linear-gradient(left, #ddd, #999, #ddd); margin-top:30px; margin-bottom:30px; } /* ------------------ Product Styling ------------------ */ .Cprodmainbox { vertical-align:top; border:1px solid white;; width:97%; } .Cprodimagebox { padding:20px; width:1%; white-space:nowrap; border-right: 1px solid white;; } .Cprodbuttonbox { vertical-align:middle; background-color:white; padding:18px; } .Cprodprice { font-size:34px; font-weight:bold; } .Cprodstats { font-size: 15px; font-weight: normal; line-height: 1.5em; } .qna{ background-color: $lightGreyBackground; padding-left:2.5em; padding-right:2.5em; padding-top:2em; margin-top:2.5em; font-size: 15px; color: #595959; line-height: 1.8em; } .qna b{ color: #353535; line-height: 3em; font-size:15px; } .qna h2{ text-align: center; font-size:23px; } .prod-detail{ text-align: center; font-size:23px; margin: 1.5em auto; } .Cprodstatslabel { font-size: 15px; font-weight: bold; line-height:26px; } .cprodstatslabel .cprodstats{ font-size: 15px; } .Calertmsg { margin-top: 2em; font-size:16px; font-weight: bold; } #contact-page{ margin-top:4em; } .button{ font-size: 14px; color: white; padding:5px 15px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; text-decoration:none; font-weight:normal; border:0 solid white; -webkit-appearance: none; } a.Csearchbutton { @extend .button; border:0 solid $fontColor; font-weight:bold; } .Cprodbuttonsm { @extend .button; } .zipcodebutton{ @extend .searchsubmit; margin-bottom: 2em; } .zip-calculation{ margin-right: -5px !important; width: 62%; max-width: 14em; } .Cprodbuttonsm2 { @extend .button; } .Cprodbuttonsmdel { @extend .button; background-color:$fontColor; } .Cprodbuttonsmup { @extend .button; margin-left:18px; } .Cprodbutton { @extend .button; font-size: 20px; padding:5px 25px; border:0 solid black; } .Cprodbuttonorder { @extend .Cprodbutton; } .Ccarttitleprice { font-size: 20px; text-decoration: none; font-weight: bold; line-height:40px; text-align:left; } .Cotherheadings { font-size:24px; margin-top:4px; margin-bottom:4px; color:$fontColor; } .Cotheritembox { padding:4px; border:1px solid white;; } .Csearchbox{ border:1px solid white;; font-size:13px; padding-left:3px; } .Csearchsubmit { background-color: transparent; border:none; color:$fontColor; text-decoration:none; } .catchprodstats{ font-size:13px; line-height:18px; font-family:Arial, verdana, sans-serif; font-style: italic; color:$fontColor; } .left-col { float: left; width:250px; min-width:250px; height:100px; margin-left: 10%; display: block; } .center-col { height:90px; width:80%; text-align:center; margin-left: 10%; min-width:900px; } .right-col { float: right; text-align: right; margin-right: 10%; color:$lightGrey; } .headerbanner { width:80%; padding: 1px 0 0 1px; margin: 0 auto auto 10% ; min-width:900px; } .pagewrap { width:100%; background-color:white; min-width:900px; overflow:visible; } .includecontent { margin: auto auto auto 10%; width:80%; min-width:900px; overflow:visible; } .home-left{ float:left; width:25%; overflow:visible; } .home-right { float:right; width:75%; overflow:visible; } .search-left{ float:left; width:25%; overflow:visible; } .search-right { float:right; width:73%; overflow:visible; padding-left:2%; } div.footer { margin: 2.5em 10% 0; width:80%; min-width:900px; } .desktop-featured-item { width:25%; float:left; text-align:center; overflow:visible; } .mobile-featured-item { display:none; } .searchprod-item { width:33%; float:left; text-align:center; overflow:visible; position:relative;padding-bottom:30px; } .proddesktop-contain { overflow:hidden; display: -webkit-flex; display: flex; } .mobifilterbutton { display:none; } .desktop-toptree-column { width:25%; float:left; text-align:left; overflow:visible; } .mobile-toptree-column { display:none; } .prod-left-col { float:left; width:73%; } .prod-right-col { float:right; text-align:center; border-left:1px solid #ddd; width:23%; padding-left:1%; padding-right:1%; } .catchfilterlist { overflow: auto; max-height:320px; } .left-col-foot { float: left; width:30%; padding-top:30px; font-size:12px; LINE-HEIGHT:20px; } .center-col-foot { float: left; width: 30%; padding-top:30px; text-align:center; height:90px; } .right-col-foot { width: 30%; text-align: right; padding-top:30px; font-size:12px; LINE-HEIGHT:20px; float: right; } .copyright{ text-align: center; font-size:11px; padding-bottom:20px; padding-top:20px; color:#999; margin:auto; } .pag-showing { float:left; padding-left:30px; line-height:35px; } .pag-sort { float:right; padding-right:30px; line-height:35px; } .Cpagination { float:left; padding-left:30px; line-height:35px; } .yourorderbox { padding:20px; border-radius: 5px; background-color:$lightGreyBackground; margin-top:1em; .homecatlist{ text-align: center; margin-top: -10px; margin-bottom: .5em; } table { color: $fontColor; td { line-height: 27px; } } } .calculate-tax{ margin-bottom:.5em; } .cartitems { float:right; width:66%; padding-left:2%; } .cart-item{ padding-bottom: 3em; margin-bottom: 2em; margin-right:10%; border-bottom: #333 solid 1px; } .cart-item-image{ padding: 5px; float:left; margin-right:20px; position: relative; height:106px; min-width: 120px; width: auto; .cart-item-picture{ max-height:106px; height: auto; max-width: 100px; display: block; margin: auto; } } .cart-item-details{ margin-top:5px; font-weight:bold; } .ccinfo { width:29%; min-width:300px; float:left; } .ccbilling { width:29%; min-width:300px; float:left; } .ccshipping { width:29%; min-width:300px; float:left; } .Cprodbuttonorder { margin-top:30px; margin-bottom:30px; float:right; } #mobileheader {display:none;} .cleardesktop {clear:both;} .clearmobile {display:none;} .clearmobilebig {display:none;} .logo { float:left; width:400px; border:0; } ul.smallmenulist{ list-style: none; padding-top:18px; margin-left:0; color:$lightGrey; padding-bottom:14px; } li.smallmenulist{ display: inline; list-style-type: none; padding-left:10px; padding-right:10px; color:$lightGrey; } li.smallmenulist a{ display: inline; list-style-type: none; font-size:13px; text-decoration:none; color:$lightGrey; } .headersearch { color: #999; font-weight: 100; font-size: 14px; height: 31px; padding-left: 10px; padding-right: 0; margin-right: -11px; z-index: -9999; font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; letter-spacing: .1em; } .headersearch:focus{ outline:none; } .searchsubmit:focus{ outline: none; } .blue-arrow{ display: inline-flex; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid; height: 0; width: 0; vertical-align: super; } .cartbutton-quantity { height: 31px; width: 112px; padding-left: 0; text-align: center; color: white; border: 0; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } .cart-text-quantity{ position: absolute; right: 12px; top: 9px; font-size: 11px; letter-spacing: .05em; } .featured-items{ margin-top:1.5em; background-color: $lightGreyBackground; padding: 1em; } .padding{ padding: 1em; } .featured-products-title{ text-align: center; margin: .5em; font-size:3em; letter-spacing:.1em; } .featured-product-box{ padding:1em; margin:1em; min-height:200px; position:relative; background-color: white; border-radius: 10px; box-shadow: inset; height: 18em; .product-image{ height:50%; position: relative; img{ padding-bottom: 10px; clear: both; display: block; margin: 1em auto 0; } } .featured-item-price{ display:block; position: absolute; bottom:1em; width:100%; text-align:center; font-weight: bold; font-family: $tertiaryFont; font-size: 16px; clear:both; } } .mobile-featured-item-box{ margin:10px; padding:8px; border: 1px solid #ddd; min-height:200px; } .bottom-banner { margin-top: 1em; } .searchsubmit { height:31px; width:83px; vertical-align: top; text-align: center; color: white; border: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-family: verdana,arial,helvetica,sans-serif; font-size: 11px; } .cartbutton { height:31px; width: 83px; padding-left: 0; text-align: center; color: white; border: 0; text-decoration: none; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } .cart-text{ position: absolute; right: 10px; top:7px; } .shopping-cart-button{ position: absolute; left: 12px; top: 6px; width: 20px; } div.headersocial { margin-top:10px; height:75px; background-color:#ccc; width:125px; text-align:center; float:right; margin-right:30px; padding-top:8px; font-size:12px; color:$fontColor; } .headersocialleft { width:20px; padding-right:6px; padding-bottom:5px; } .headersocialcenter{ width:20px; padding-right:6px; padding-left:6px; padding-bottom:5px; } .headersocialright{ width:20px; padding-left:6px; padding-bottom:5px; } .headersocialphone{ line-height:30px; text-decoration:none; } hr { background-color:#ddd; height: 1px; width:100%; border:0; } li.cartmenuitem{ display: inline; list-style-type: none; width:125px; text-align:center; float:right; background-color:#BD0000; height:30px; margin-right:30px; color:white; } div.left-list { float:left; padding-right:40px; } div.right-list { float:left; } .digicert { float:right; height:68px; padding-right:30px; } .newscontent{ line-height:16px; font-size:11px; color:#999; font-style:oblique; } a.footerlink { text-decoration:none; font-size:11px; } .dropDownMenu, .dropDownMenu ul { list-style: none; margin: 0; padding: 0; border-collapse:collapse; border-bottom: 2px solid; border-top: 2px solid ; } .menubackground{ width:100%; vertical-align: top; display:inline-block; min-width:800px; margin:0; list-style-type:none; line-height:30px; padding-left:0; border-collapse:collapse; } .dropDownMenu ul ul { list-style: none; border-collapse:collapse; margin-left:auto; margin-right:auto; } .dropDownMenu li { position: relative; border-collapse:collapse; } .dropDownMenu a { color: white; line-height:29px; display: block; text-decoration: none; padding-left:26px; padding-right:26px; border-collapse:collapse; letter-spacing:.05em; font-size:13px; } .dropDownMenu a:hover { border-collapse:collapse; color: #dedede; } .dropDownMenu > li { display: inline-block; vertical-align: top; margin-left: -4px; /* solve the 4 pixels spacing between list-items */ border-collapse:collapse; } .dropDownMenu > li:first-child { margin-left: 0; } /* Level 2 */ .dropDownMenu > li > ul { text-align: left; width: 300px; /* change auto value with 200px if you want a bigger menu */ display: none; border-collapse:collapse; position: absolute; top: 103%; left: 0; z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */ } .dropDownMenu > li:hover > ul { display: block; background-color: #e0e0e0; color:#555; border-collapse:collapse; } .dropDownMenu ul li a { line-height: 15px; color: $fontColor; letter-spacing: 1px; border:1px solid white; border-collapse:collapse; text-transform: capitalize; padding: .6em .8em; } .dropDownMenu ul li a:hover { color:white; border-collapse:collapse; } .dropDownMenu > li > ul > li> a:after { content: '\27A4'; float: right; color: rgba(0,0,0,.2); font-size: 10px; } .dropDownMenu > li > ul > li> a:hover:after { color: rgba(255,255,255,.5); } .dropDownMenu > li > ul > li> a:only-child:after { content:''; } /* Level 3 */ .dropDownMenu > li > ul > li > ul { text-align: left; display: none; background: #e0e0e0; position: absolute; left: 100%; top: 0; width: 290px; z-index: 9999999; border-collapse:collapse; } .dropDownMenu > li > ul > li:hover > ul { display: block; border-collapse:collapse; } .dropDownMenu ul ul li {border-collapse:collapse;} .dropDownMenu ul ul li a { padding: .6em .8em; line-height: 15px; border-collapse:collapse; } .dropDownMenu ul ul li a:hover {border-collapse:collapse;} .topmenuitemspacer { width:10%; } @media (max-width: 1120px) { .topmenuitemspacer { width:2%; } } .homecatlist { color:$lightGrey; font-size: 16px; line-height:30px; font-weight:bold; text-decoration:none; } .homesubcatlist { color:$lightGrey; font-size: 13px; line-height:25px; text-decoration:none; } a.homecatexpand { cursor:pointer; font-weight:bold; font-size:20px; font-family:arial black, Oxygen, sans-serif; } .filtercatlist { color:$lightGrey; font-size: 13px; line-height:25px; text-decoration:none; } .carterrormsg { border:1px solid red; background-color:#FFCCCC; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding:15px; max-width:300px; list-style-type: none; } .testimonials-section{ text-align: left; font-size: 16px; line-height: 25px; font-weight: bold; color: #999; margin: 1em 10% -2em; font-style: italic; } .testimonial-content { } .email{ width: 200px; margin-right: -14px; } .newslettertext{ margin-bottom: 0; padding-bottom: 0; line-height: 0; } .imagemaxsize { max-width: 200px; max-height: 200px; } .imagemaxsize2 { max-width: 300px; max-height: 300px; } .imagemaxsize3 { max-width: 100px; max-height: 100px; font-family:$regularFont; font-size:9px; } .imagemaxsize4 { max-width: 150px; max-height: 150px; font-family: $regularFont; font-size:9px; } table.extraprod { border: 1px inset gray; border-spacing: 0; border-collapse: collapse; } table.extraprod tr { border: 1px inset gray; padding: 5px; } table.extraprod td { border: 1px inset gray; padding: 5px; } a.pagedisplay { text-decoration:none; font-size:12px; line-height: 20px} a.pagedisplay font { border: solid 1px #808080; color:#808080; font-size:12px; } a.pagedisplay span { background-color:#808080; border: solid 1px #808080; color:White; font-size:12px; } a.pagedisplayselect { text-decoration:none; font-size:12px;line-height: 20px } a.pagedisplayselect font { border: solid 1px #6600CC; color:#6600CC; font-size:12px; } a.pagedisplayselect span { background-color:#6600CC; border: solid 1px #6600CC; color:White; font-size:12px; } //.search button.btn {width: 35px;height: 35px;cursor: pointer;text-indent: -9999px;background: #ffffff url(inc/button_search.gif) no-repeat top right;padding: 0;border:0;} /* ------------------ Media Queries Styling ------------------ */ @media (max-width: 1120px) { .left-col { float: left; width:250px; min-width:250px; height:100px; margin-left: 2%; display: block; } .center-col { height:90px; width:94%; text-align:center; margin-left: 2%; top: 0; min-width:900px; } .right-col { text-align: right; margin-right: 2%; color:$lightGrey; } .headerbanner { width:96%; padding-left:2%; margin:0 auto auto; padding-right:2%; min-width:900px; } .includecontent { margin:auto 2%; width:96%; min-width:900px; } div.topmenu { width:100%; vertical-align: top; display:inline-block; min-width:900px; } ul.topmenu { list-style: none; height:30px; line-height:30px; vertical-align:top; padding-left:2%; padding-right:2%; } div.footer { width:96%; min-width:900px; margin-left:2%; margin-right:2%; } } @media (max-width: 930px) { #desktopheader {display:none;} #mobileheader {display:inline;} .home-left{ float:none; width:100%; overflow:hidden; } .home-right { float:none; width:100%; overflow:hidden; } .search-left{ float:none; width:100%; overflow:hidden; } .search-right { float:none; width:100%; overflow:hidden; padding-left: 0; } .mobifilterbutton { float:right; height:40px; border-bottom:0 solid #eee; padding-top:5px; display:block; } #mobifilter{ display:none; } .includecontent { margin:auto 2%; width:96%; min-width:300px; } .pagewrap { width:100%; background-color:white; min-width:300px; } .desktop-toptree-column { display:none; } .mobile-toptree-column { width:50%; float:left; text-align:left; display:inline; } .prod-left-col { float:none; width:100%; } .prod-right-col { float:none; width:98%; padding-left:1%; padding-right:1%; border:0; } .left-col-foot { display:none; } .center-col-foot { padding-top:30px; text-align:center; width:100%; float:none; margin:auto; } .right-col-foot { display:none; } .copyright{ text-align: center; font-size:11px; padding-bottom:20px; padding-top:20px; color:#999; } div.footer { width:96%; min-width:300px; margin-left:2%; margin-right:2%; } .yourorderbox { float:left; width:90%; padding:1%; border:1px solid $fontColor; background-color:#efefef; margin-top:15px; margin-left:5%; } .cartitems { float:left; width:90%; margin-left:5%; } .ccinfo { width:100%; min-width:300px; float:left; } .ccbilling { width:100%; min-width:300px; float:left; padding-top:15px; } .ccshipping { width:100%; min-width:300px; float:left; padding-top:15px; } .Cprodbuttonorder { float:left; } .filterbutton { color:$lightGrey; background-color:white; text-decoration:none; padding:5px 15px; -moz-border-bottom-left-radius: 8px; -moz-border-bottom-right-radius: 8px; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius:0 0 8px 8px; border-radius: 0 0 8px 8px; border-bottom:1px solid #aaa; border-left:1px solid #aaa; border-right:1px solid #aaa; font-size:12px; font-weight:bold; } .clearmobilebig {clear:both; display:block;} } @media (max-width: 550px) { .pag-showing{display:none;} .proddesktop-contain { overflow:visible; display: block; } .desktop-featured-item { display:none; } .mobile-featured-item { width:50%; float:left; text-align:center; display:inline; } .searchprod-item { width:100%; float:left; text-align:center; overflow:visible; } .cpagination { padding-left:5px; } .pag-sort { padding-right:5px; font-size:0; line-height:35px; padding-top:4px; } .clearmobile {clear:both; display:block;} .cleardesktop {display:none;} }