/* Template Name: MadBC Description: Starting template for BigCommerce Version: 2.8.1 Author: Madwire Media Author URI: http://www.madwirewebdesign.com/ Updated: April 26, 2012 */ /* *** TABLE OF CONTENTS *** ------------------------------------------------------------------------------ Following the name of each section is -n- and a 3 digit code, for example abc, which you can use find or find next to skip to the next section. PLEASE LOOK THROUGH CSS BEFORE EDITING IT TO SEE WHAT EACH SECTION CONTAINS ------------------------------------------------------------------------------ Base = bas Primary Container Widths, Base Styles, and Blue Reset Styles = prm Header = hdr Content = cnt Sidebar = sdb Footer = ftr Miscelaneous = msc (breadcrumb styles are in here and some other stuff) Pages = pgs Category = ctg Product Lists = pls Product = prd Cart = crt Checkout -n- = chk Account = act Home Page = hpg Internet Explorer 7 = ie7 Media Queries = mqs Print Styles = prn Plugins = plg */ /* **** Use the following examples to target ie8, ie7 or both ie7 *+html body { background: red; } ie8 body { background: green\0/; } ie8&7 body { background: yellow\9; } */ /* ============================================================================= Base -n- bas ========================================================================== */ html { overflow-y: scroll; } html, body, button, input, select, textarea { font-family: sans-serif; font-size: 14px; } html, body, button, input, select, textarea, h2, #PageContent h2, #CategoryHeading h2, #NewsContent h2, .product .Content h2, .Content h3, .Content h2, .TitleHeading { color: #222; } body { background: #fff; font-family: 'Open Sans', sans-serif; color: #666666; line-height: 1.8; font-size: 13px; } p { line-height: 1.8; } h1,h2,h3,h4,h5,h6 {} h1,h2,h3,h4,h5,h6, .Content h2, .TitleHeading, .Content h1 { font-weight: 700; } .Content h2, .TitleHeading, .Content h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; margin: 0 0 5px; font-size: 24px; } .Content.Widest > h2, .Content.Widest .TitleHeading, .Content.Widest h1 { margin-left: 250px; } .Content.Widest .Breadcrumb { margin-left: 250px!important; } #PageContent h2, #CategoryHeading h2, #NewsContent h2, .product .Content h2 { font-size: 1.5em; margin: 0 0 .83em; } .Content h3 { margin: 0 0 .8em; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ddd; background: none; margin: 1em 0; padding: 0; } .icon { vertical-align: middle; } img.left, p img.left { margin: 0 1.5em 1.5em 0; float: left; } img.right, p img.right { margin: 0 0 1.5em 1.5em; float: right; } #___plusone_0 { position: absolute; top: 10px; left: 20px; z-index: 10000; } /* == Links & Selection ===================================================== */ a, .Content a { color: #4EB74B; transition: all .4s linear; -moz-transition: all .4s linear; -webkit-transition: all .4s linear; -o-transition: all .4s linear; -ms-transition: all .4s linear; } a:hover, .Content a:hover, a:focus, .Content a:focus { color: #EB6823; } a:hover, a:active { outline: none; } a:active, input.button:active, input[type=submit]:active, input[type=button]:active { outline: 0; } a.ChangeLink:active { position: absolute; top: auto; right: 15px; } a:active.modalClose { position: absolute; top: 10px; } a:link { -webkit-tap-highlight-color: #3399FF; } ::-moz-selection { text-shadow: none; background: #3399FF; color: #fff; } ::selection { text-shadow: none; background: #3399FF; color: #fff; } /* == Buttons =============================================================== */ .button, .Content a.button, input[type=submit], input[type=button], button { display: inline-block; overflow: visible; width: auto!important; padding: 6px 16px; cursor: pointer; text-decoration: none; text-transform: uppercase; text-shadow: -1px -1px 0 rgba(0,0,0,0.4); color: #fff; border: none; background: #E76622; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-appearance: none; font-weight: bold; } .button:hover, .Content a.button:hover, input[type=submit]:hover, input[type=button]:hover { background: #39B54A; color: #fff; text-decoration: none; } .button.download { margin-bottom: 10px; } .AccountOrderStatusList li form { margin-bottom: 4px; } #ProductReviews .button { float: right; } #LoginButton { padding: 8px 16px !important; margin-bottom: 12px; } .AddCartButton input.button { margin: -4px 0 0 10px; } .CheckoutButton { margin-bottom: 1.5em; } .BulkDiscount .button { margin:0!important; } /* == Forms =================================================================== */ textarea { overflow: auto; } #LoginForm form input[type=text] { margin: 0; } .HorizontalFormContainer dd { padding: 4px 0 0; } .HorizontalFormContainer dt { padding: 2px 0; } /* == Tables ================================================================== */ .EstimateShipping, .CheckoutRedeemCoupon { background: #F4F4F4; border: 1px solid #e5e5ef; color: #4d4d50; } table.CartContents, table.General { border: 1px solid #e5e5ef; } .CartContents thead tr th, table.General thead tr th { background: #F4F4F4; border-bottom: 1px solid #e5e5ef; color: #4d4d50; } .CartContents tfoot .SubTotal td { border-top: 1px solid #e5e5ef; color: #4d4d50; } .CompareItem { border-left: solid 1px #e5e5ef; } .CompareFieldName { font-weight:bold; border-bottom: 1px solid #e5e5ef; } .CompareFieldTop { border-bottom:solid 1px #e5e5ef; } .CompareFieldTop a:hover { color:red; } .CompareCenter { border-left:solid 1px #e5e5ef; border-bottom:solid 1px #e5e5ef; } .CompareLeft { border-left:solid 1px #e5e5ef; border-bottom:solid 1px #e5e5ef; } .ComparisonTable tr:hover td { background: #F7F7F7; } /* ============================================================================= Primary Container Widths, Base Styles, and Blue Reset Styles -n- prm ** MEANT FOR BASIC STRUCTURE for example widths, margins, padding and for background images/colors for the basic structure elements ** NOT FOR CONTENT SPECIFIC STYLES for example styling what is inside the header, footer, content areas, etc. ** USE APPROPRIATE SECTION(S) FOR THAT ========================================================================== */ #html {} #body {} .home { background: url("/template/img/home-bg.jpg") no-repeat scroll 0 512px transparent; } #Container { width: auto; margin: 0; } #Outer { background: none; margin: 0; } #Header, #Wrapper, #Footer { width: 940px; margin: 0 auto; } #HeaderOuter, #WrapperOuter, #FooterOuter { width: 100%; } #Header, #PrimaryMenuOuter { position: relative; } #TopMenu, #Header { height: auto; } #Header, #Footer { padding: 0; border: none; } #Header ul, #PrimaryMenu ul, #Footer ul { list-style: none; margin: 0; padding: 0; } #TopMenuOuter {} #TopMenu {} #HeaderOuter { position: relative; } #Header {} #PrimaryMenuOuter { margin-bottom: 10px; } #PrimaryMenu {} #WrapperOuter {} #Wrapper { text-align: left; } #FooterOuter {} #Footer { clear: both; } .Content, .Content.Wide, .Content.Widest { background: none; min-height: 0; } .Content { width: 550px; margin: 0 20px 0 0; padding: 0; font-size: 1em; } .Content.Wide { width: 690px; margin: 0; padding: 0; } .Content.Widest { width: 940px; margin: 0; padding: 0; } /*Sidebars*/ .Left, .Right { background: none; min-height: 0; } .Left h2, .Right h2 { width: auto; } .Left li, .Right li { border: none; } .Left { width: 230px; margin-right: 20px; } .Right { width: 180px; margin: 0; } .green { color: #39B74B!important; } .brown { color: #B6794C!important; } .lightblue { color: #90AAD3!important; } .orange { color: #EB6823!important; } /* ============================================================================= Header -n- hdr ========================================================================== */ #HeaderOuter { min-width: 940px; background: url("/template/images/bg-header.png") repeat-x; border-top: 2px solid #39B54A; } #Header { position: relative; height: 115px; z-index: 500; } #Logo { position: absolute; width: auto; top: 3px; left: 7px; } #Logo img { display: block; margin-bottom: 0; } #TopMenu { font-family: 'Oswald', sans-serif; font-weight: 300; float: right; margin: 2px 0 0; } #TopMenu ul { float: right; } #TopMenu li a, #TopMenu li div { color: #777777; border: none; font-size: 12px; margin: 0; padding: 0 10px; } #TopMenu li a:hover { color: #EB6823; text-decoration: none; } #TopMenu li.dot { color: #777777; } #header-right { float: right; clear: right; margin: 5px 0; } #header-social { float: left; margin-right: 15px; padding: 3px 20px 3px 0; border-right: 1px solid #CCC; } #header-social .sprite { width: 28px; height: 28px; float: left; } #SearchForm { width: auto; padding: 3px 0; float: left; position: relative; } #SearchForm #search_query { font-size: 1em; width: 170px; padding: 3px 30px 3px 10px; } #SearchForm input.button { padding: 4px 12px; position: absolute; top: 2px; right: 2px; background: url("/template/images/button-search.png") no-repeat center; } .QuickSearch { z-index: 9999; } .QuickSearchHover td{ background: #f4f4f4; } .QuickSearch a, .QuickSearch a:hover { color: #4D4C51; } #PrimaryMenu { position: absolute; top: 60px; left: 255px; } #PrimaryMenu > ul {} #PrimaryMenu > ul > li { float: left; } #PrimaryMenu li { margin-bottom: 0; margin: 0 10px 0 0; } #PrimaryMenu > ul > li.HasSubMenu { padding-right: 5px; background: url("/template/images/pm-carrot.png") no-repeat right center; } #PrimaryMenu > ul > li > a { display: block; padding: 10px 10px 11px; font-size: 18px; text-decoration: none; color: #6C6C6C; font-family: 'Oswald', sans-serif; text-transform: uppercase; } #PrimaryMenu a { text-decoration: none; } #PrimaryMenu > ul > li > a .caret { display: inline-block; width: 0; height: 0; margin-top: 6px; margin-left: 4px; text-indent: -99999px; *text-indent: 0; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; opacity: 0.3; filter: alpha(opacity=30); content: "\2193"; } #PrimaryMenu > ul > li > a:hover, #PrimaryMenu > ul > li.dropdown.open > a, #PrimaryMenu > ul > li.ActivePage > a { color: #ffffff; } #PrimaryMenu > ul > li > a:hover > .caret, #PrimaryMenu > ul > li.dropdown.open > a > .caret { opacity: 1; filter: alpha(opacity=100); } #PrimaryMenu > ul > li.ActivePage > a, #PrimaryMenu > ul > li > a:hover { color: #999; } /* Drop Down */ #PrimaryMenu > ul > li { position: relative; } #PrimaryMenu > ul > li > a { *margin-bottom: -3px; } #PrimaryMenu > ul > li > a:active, #PrimaryMenu .dropdown-toggle:active, #PrimaryMenu .open .dropdown-toggle { outline: 0; } #PrimaryMenu > ul > li > ul { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; max-width: 220px; _width: 160px; padding: 4px 0; margin: 0; list-style: none; background-color: #ffffff; border-color: #ccc; border-style: solid; border-width: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } #PrimaryMenu > ul > li > ul:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; position: absolute; top: -7px; left: 9px; } #PrimaryMenu > ul > li > ul:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 10px; } #PrimaryMenu > ul > li.HasSubMenu:hover > ul { display: block!important; } #PrimaryMenu > ul > li:hover, #PrimaryMenu ul > .dropdown.open { *z-index: 1000; } /* Uncomment and remove js in scripts.js if you desire non touch friendly hover dropdown #PrimaryMenu > ul > li:hover > ul { display: block; }*/ #PrimaryMenu ul > .dropdown.open > .dropdown-menu { display: block; } #PrimaryMenu li li a { display: block; padding: 3px 10px; margin: 0 5px; clear: both; font-weight: normal; color: #555555; white-space: nowrap; } #PrimaryMenu li li li a { padding-left: 25px; } #PrimaryMenu li li li li a { padding-left: 35px; } #PrimaryMenu li li li li li a { padding-left: 45px; } #PrimaryMenu li li li li li li a { padding-left: 55px; } #PrimaryMenu > ul > li > a { } #PrimaryMenu > ul > li > ul a:hover { color: #fff; background: #E76622; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } /* End Navigation */ /* ============================================================================= Content -n- cnt ========================================================================== */ /* ============================================================================= Sidebar -n- sdb ========================================================================== */ .Left, .Right { font-size: 1em; } .Left h2, .Right h2 { font-size:1.25em; margin: 0 0 .8em; } .Left .BlockContent, .Right .BlockContent { margin: 0; } .Left #SideCategoryList li ul { border-top: 1px solid #ddd; } .Left .ProductList li, .Right .ProductList li { width: auto; border-bottom: 1px solid #ddd; } .Left .TopSellers li.TopSeller1, .Right .TopSellers li.TopSeller1 { width: auto; border: 1px solid #ddd; } .Left .TopSellers .ProductDetails, .Right .TopSellers .ProductDetails { width: auto; padding: 5px 10px; } #SideCategoryList li a, #SideShopByBrand li a { display: block; } #SideNewsletterBox p { margin: 0 0 6px 0; } #SideNewsletterBox p.bottom { margin-bottom: 0; } #SideNewsletterBox label { margin-bottom: 3px; } #SideNewsletterBox input { width: 162px; font-size: 1em; padding: 3px; margin: 10px 0 0; } #SideNewsletterBox .button { width: auto; height: auto; padding: 8px 16px; } #couponcode, #giftcertificatecode { padding: 5px; } .Left .Panel { background: url("/template/images/bg-grain.jpg"); font-family: 'Oswald',sans-serif; border: 1px solid #D6D6D6; box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .Left .Panel:first-child { margin-top: 55px; display: block!important; } .Left .Panel h2 { background: #E76622; color: #FFF; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); padding: 4px 15px; text-transform: uppercase; font-size: 16px; margin: 0; } .Left .BlockContent { } .Left .Panel ul { } .Left .Panel li { border-top: 1px solid #FFF; border-bottom: 1px solid #AFAFAF; border-bottom-color: rgba(0,0,0,0.1); } .Left .Panel a { padding: 2px 10px 2px 30px; color: #2F2E2E; text-shadow: 0 0 1px rgba(0,0,0,0.3); font-size: 15px; background: url("/template/images/carrot-hover.png") -20px 7px no-repeat; } .Left .Panel a:hover { text-decoration: none; color: #2F2E2E; background-position: 12px 7px; } .Left .Panel li.active a { background: url("/template/images/carrot-active.png") 12px 7px no-repeat!important; } .Left .newsletter { background: url("/template/images/bg-grain.jpg"); font-family: 'Oswald',sans-serif; padding: 10px!important; display: block; } .Left .newsletter h3 { font-size: 13px; color: #000; line-height: 1; margin: 0 0 2px; font-family: 'open sans', sans-serif; } .Left .newsletter h2 { background: none; color: #35A644; text-shadow: none; padding: 0; text-transform: uppercase; font-size: 27px; margin: 0; line-height: 1; } .Left .newsletter p { font-size: 13px; margin: 8px 0; color: #7F7F7F; font-family: 'open sans', sans-serif; } .Left .newsletter .BlockContent { } .Left .newsletter input { width: 162px; font-size: 1em; padding: 3px; margin: 10px 0 0; } .Left .newsletter .button { width: auto; height: auto; padding: 8px 16px; } .Left .SideCategoryListClassic > ul { } .Left .SideCategoryListClassic > ul > li { } .Left .SideCategoryListClassic > ul > li > a { } /* First Level */ .Left .SideCategoryListClassic ul ul { } .Left .SideCategoryListClassic ul ul li { } .Left .SideCategoryListClassic ul ul a { } /* Second Level */ #SideCouponCodeBox, #SideGiftCertificateCodeBox { } #SideCouponCodeBox .CouponCode, #SideGiftCertificateCodeBox .GiftCertificateCode { padding: 5px 10px; } #SideCouponCodeBox hr, #SideGiftCertificateCodeBox hr { display: none!important; } /* ============================================================================= Footer -n- ftr ========================================================================== */ #FooterOuter { padding: 13px 0 5px; background: #F6F6F6; border: 1px solid #D7D7D7; border-style: solid none; } #Footer { font-size: 1em; } #FooterMenu { float: left; width: 940px; margin: 0 0 16px 0; } #FooterMenu h2 { color: #39B74B; text-align: left; font-size: 18px; margin: 0 0 5px; } #FooterMenu .panel { width: 185px; margin: 0 0 0 20px; float: left; } #FooterMenu .panel:first-child { margin: 0; } #FooterMenu .panel.last { width: 120px; } #FooterMenu ul { text-align: left; list-style: none; margin: 0; padding: 0; } #FooterMenu ul li { float: none; display: block; position: relative; padding: 0; } #FooterMenu ul li a { padding: 1px 0; color: #666666; border: none; display: block; } #FooterMenu ul li.ActivePage a, #FooterMenu ul li:hover a { color: #EB6823; } #FooterMenu ul ul { display: none; } #footer-copy { margin: 5px auto 10px; width: 940px; font-size: 11px; color: #666; line-height: 1.4; } #footer-copy a { color: #000; text-decoration: none; } /* ============================================================================= Miscelaneous -n- msc ========================================================================== */ .Breadcrumb { font-size: 1em; } .Breadcrumb li:first-child { padding-left: 0; } .CustomWish.Breadcrumb li.last a { background: none; } .FeedLink { display: none; } .sprite { width: 35px; height: 35px; background: url("/template/images/sprite-social.png") no-repeat top center; display: block; } .sprite.rss { } .sprite.fb { background-position: center -30px; } .sprite.tw { background-position: center -60px; } .sprite.yt { background-position: center -90px; } .Breadcrumb { border-bottom: none; } .Breadcrumb ul { } .Breadcrumb li { color: #39B54A; font-size: 16px; font-family: 'Oswald',sans-serif; text-transform: uppercase; } .Breadcrumb li a { color: #39B54A; text-decoration: none; } .Breadcrumb li a:hover { text-decoration: none; } .Breadcrumb li:first-child { padding-left: 0; } .Breadcrumb li:first-child a { } #ContactForm { float: left; width: 520px; } #ContactForm dd { padding: 0; margin-left: 0; padding-top: 0; } #ContactForm dt { float: none; font-weight: normal; } #ContactForm .Warning { font-size: 12px; color: #828282; } #ContactForm .Textbox, #ContactForm textarea { background: rgb(226,226,226); background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(237,237,237,1) 13%, rgba(254,254,254,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(13%,rgba(237,237,237,1)), color-stop(100%,rgba(254,254,254,1))); background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 13%,rgba(254,254,254,1) 100%); background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 13%,rgba(254,254,254,1) 100%); background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 13%,rgba(254,254,254,1) 100%); background: linear-gradient(top, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 13%,rgba(254,254,254,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); box-shadow: 0px -5px 0px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0px -5px 0px rgba(0,0,0,0.1) inset; -webkit-box-shadow: 0px -5px 0px rgba(0,0,0,0.1) inset; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; width: 500px; border: 1px solid #C4C4C4; padding: 5px 10px; transition: border 1s, box-shadow .5s, -moz-box-shadow .5s, -webkit-box-shadow .5s; -moz-transition: border 1s, box-shadow .5s, -moz-box-shadow .5s, -webkit-box-shadow .5s; -webkit-transition: border 1s, box-shadow .5s, -moz-box-shadow .5s, -webkit-box-shadow .5s; } #ContactForm .Textbox:focus, #ContactForm textarea:focus { border: 1px solid #828282; box-shadow: 0px -2px 0px rgba(0,0,0,0.2) inset, 0px 2px 0px rgba(0,0,0,0.2) inset; -moz-box-shadow: 0px -2px 0px rgba(0,0,0,0.2) inset, 0px 2px 0px rgba(0,0,0,0.2) inset; -webkit-box-shadow: 0px -2px 0px rgba(0,0,0,0.2) inset, 0px 2px 0px rgba(0,0,0,0.2) inset; } #ContactForm .Submit { margin-left: 0; } #CartContent { } #CartContent .CartContents { border: none; } #CartContent .CartContents thead { } #CartContent .CartContents thead tr { } #CartContent .CartContents thead th { background: #39B54A!important; color: #FFF!important; } #CartContent .CartContents tr { } #CartContent .CartContents th { } #CartContent .ProductPrice { font-size: 20px; font-weight: bold; color: #39B54A; } #CartContent .KeepShopping { margin: -20px 0 20px; } #CartContent .CartRemoveLink { font-size: 11px; } #ModalOverlay { opacity: 0.8!important; background-color: #FFF!important; } #ModalTitle, .ModalTitle { background: rgba(255,255,255,0.95)!important; } #ModalContent, .ModalContent { background: rgba(255,255,255,0.95); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; } #ModalContent a, .ModalContent a { color: #FFF; text-decoration: none; } .fastCartContent { width: auto; } .fastCartContent h2, .fastCartContent h3 { color: #E76622; } .fastCartContent hr { display: none!important; } .fastCartSummaryBox { background: #E76622; color: #000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .fastCartSummaryBox em { color: #FFF!important; font-size: 18px; } .fastCartSummaryBox a { text-decoration: underline; color: #FFF!important; } #fastCartWrapper .fastCartTop { } #fastCartWrapper .fastCartThumb { } #fastCartWrapper .fastCartItemBox { } #fastCartWrapper .fastCartItemBox a { } #fastCartWrapper .fastCartItemBox .ProductPrice { } #fastCartWrapper .fastCartItemBox .Quantity { } .account .Block.YourAccount { } .account .Block.YourAccount ul { padding: 0; } .account .Block.YourAccount li { list-style: none; margin: 0 0 20px; } .account .Block.YourAccount a { display: block; font-size: 16px; text-decoration: none; background: #e7e7e7; border-bottom: 1px solid #CCC; padding: 2px 10px; } /* ============================================================================= Pages -n- pgs ========================================================================== */ .blog .FeedItem h3 { margin-bottom: .5em; } .blog .FeedItem .FeedContent p { margin-bottom: .5em; } /* ============================================================================= Category -n- ctg ========================================================================== */ .SortBox { float: right; font-size: 1em; } .SubCategoryList, .SubBrandList { background: #F4F4F4; } .SubCategoryList ul, .SubBrandList ul { margin-bottom: 0; padding-left: 0; } .SubCategoryList li { background: url(../../img/subcategory.png) no-repeat 3px 1px; } .SubCategoryList li:last-child, .SubBrandList li:last-child { margin-bottom: 0; } #ModalContainer.QuickViewModal .ModalContent { background: #fff; } .banner_category_page_top { margin: 11px 0 10px; } .banner_category_page_top p { margin: 0; } .banner_category_page_top img { max-width: 100%; height: auto; } #CategoryHeading { } #CategoryHeading h1 { font-size: 26px; border-bottom: 5px solid #E76622; padding: 0 0 10px; color: #777777; margin: 0; } #CategoryHeading .SortBox { } #CategoryPagingTop { clear: right; float: right; margin: 0; } #CategoryPagingBottom { float: right; margin: 0; } .CategoryPagination { border: none!important; background: none!important; font-weight: bold; margin: 0; } .CategoryPagination .PageNext, .CategoryPagination .PagePrev { float: none; display: inline-block; clear: none; } .CategoryPagination .PagingList { float: none; display: inline-block; clear: none; } .CategoryPagination li { } .CategoryPagination a { color: #393939; text-decoration: none; } .CategoryPagination .PagingList li.ActivePage, .CategoryPagination a:hover { text-decoration: none; color: #E97227; } #CategoryHeading .BlockContent { padding: 0 0 4px; border-bottom: 3px dashed #AED9B3; } #CategoryHeading .SubCategoryList { background: none; } #CategoryHeading .SubCategoryList ul { padding: 0; } #CategoryHeading .SubCategoryList li { padding: 0; background: none; width: 23%; margin: 5px 1%; text-align: center; float: left; } #CategoryHeading .SubCategoryList a { padding: 2px 10px; display: block; text-decoration: none; background: #39B54A; color: #FFF; border: 2px solid #0B9444; } #CategoryHeading .SubCategoryList a:hover { background: #0B9444; } #CategoryHeading .CategoryDescription { } #CategoryHeading .CategoryDescription img { max-width: 100%; height: auto; } /* ============================================================================= Product Lists -n- pls ========================================================================== */ .ProductList li .ProductCompareButton { text-align: left; } .Content .ProductList li, .fastCartContent .ProductList li, .Content .FeaturedProducts .ProductList li { background: none; border: 1px solid transparent; } .Content .ProductList li:hover, .Content .ProductList li.Over, .fastCartContent .ProductList li:hover, .fastCartContent .ProductList li.Over, .Content .FeaturedProducts .ProductList li:hover, .Content .FeaturedProducts .ProductList li.Over { background: none; } .ProductList { } .ProductList ul { } .ProductList li { width: 220px!important; height: auto!important; padding: 0!important; margin: 0 0 25px 15px; border: none!important; background: none!important; min-height: 0!important; overflow: visible!important; } .ProductList .ProductImage { width: 218px!important; height: 160px!important; overflow: hidden; display: block; text-align: center; border: 1px solid #D6D6D6; box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .ProductList .ProductImage img { } .ProductList .ProductDetails { text-align: left; margin: 10px 0 0; } .ProductList .ProductDetails a { color: #7F7F7F; font-size: 16px; text-decoration: none; font-weight: 300; font-family: 'Oswald',sans-serif; } .ProductList .ProductPriceRating { } .ProductList .ProductPriceRating em { color: #7F7F7F; font-size: 12px; font-weight: normal; padding: 3px 0 0; } .ProductList .ProductPriceRating em span { font-size: 15px; font-weight: bold; } .ProductList .ProductPriceRating .Rating { display: none; } .ProductList .ProductCompareButton { display: none; } .ProductList .ProductActionAdd { margin-top: 0; } .ProductList .ProductActionAdd a { color: #39B54A; font-size: 12px; } .CompareButton { display: none!important; } #SearchResultsProduct .ProductList li { width: 205px!important; margin: 0 0 25px 15px; } #SearchResultsProduct .ProductList .ProductImage { width: 205px!important; height: 145px!important; } #fastCartSuggestive li { width: 205px!important; margin: 0 0 0 14px!important; } #fastCartSuggestive .ProductImage { width: 205px!important; height: 145px!important; } #fastCartSuggestive .ProductDetails a { color: #4D4D4D; } #fastCartSuggestive .ProductPriceRating { float: none; width: auto; } #fastCartSuggestive .ProductActionAdd a { text-align: center; padding: 2px 0; width: 169px!important; } /* ============================================================================= Product -n- prd ========================================================================== */ #ProductDetails { } #ProductDetails hr { display: none; } #ProductDetails .ProductThumbWrap { float: left; width: 320px!important; } #ProductDetails .ProductThumb { float: none; height: auto!important; width: 320px!important; text-align: center; } #ProductDetails .ProductThumbImage { width: 320px!important; height: 365px!important; position: relative; border: 1px solid #D6D6D6; box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); } #ProductDetails .zoomPad { display: inline-block; float: none; } #ProductDetails .zoomPad img { } *:first-child+html #ProductDetails .ProductThumbImage a { text-align: center; width: 345px; height: 345px; line-height:342px; } /* IE7 Fix */ *:first-child+html #ProductDetails .ProductThumbImage img { vertical-align:middle; max-width:100%; max-height:100%; } #ProductDetails .ImageCarouselBox { } #ProductDetails .ImageCarouselBox .ProductTinyImageList { } #ProductDetails .ImageCarouselBox ul { } #ProductDetails .ImageCarouselBox li { width: 95px!important; height: 130px!important; box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); border: 1px solid #D6D6D6!important; margin: 0 10px 5px!important; } #ProductDetails .ImageCarouselBox .TinyOuterDiv { border: none!important; } #ProductDetails .ImageCarouselBox .TinyOuterDiv > div { } #ProductDetails .ImageCarouselBox .TinyOuterDiv img { } #ProductDetails .ProductMain { float: left; width: 350px; margin: 0 0 0 20px; } #ProductDetails h1 { color: #35A644; font-size: 22px; font-weight: normal; font-family: 'Oswald',sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.4); line-height: 1.4; } #ProductDetails .PriceRow { color: #000; font-size: 14px!important; text-transform: uppercase; font-weight: bold; line-height: 1; margin: 15px 0 20px!important; width: 350px; padding: 0 0 6px; border-bottom: 3px dashed #AED9B3; } #ProductDetails .PriceRow em { color: #E86622; font-size: 35px; } #ProductDetails .ProductDetailsGrid { } #ProductDetails .DetailRow, .productAttributeList .productAttributeRow { display: block; clear: none; float: left; padding-left: 0!important; margin: 0; } #ProductDetails .Label, #ProductDetails .productAttributeLabel { width: 145px; float: left; margin: 2px 0!important; text-align: left; color: #000; font-size: 14px!important; text-transform: uppercase; font-weight: bold; } #ProductDetails .Value, #ProductDetails .productAttributeValue { float: left; display: block; width: 205px; margin: 2px 0!important; color: #000; font-size: 14px!important; text-transform: uppercase; font-weight: normal; } #ProductDetails .Value .ProductPrice, #ProductDetails .Value .VariationProductWeight { color: #AE6C00; font-size: 16px; font-weight: bold; } #ProductDetails .BulkDiscount { float: left; margin: 50px 0 0 -190px; } #ProductDetails .BulkDiscount .button { float: left; font-size: 16px; padding: 8px 20px; } #ProductDetails .productAddToCartRight { } .AddThisButtonBox { width: auto!important; text-align: left!important; padding: 10px 0 0 0!important; float: none; margin: 0!important; } .productAttributeList .required { display: none; } #ProductTabs { float: left; margin: 20px 0 0; } .TabNav { float: left; margin: 0; padding: 0; border: none; position: relative; overflow: hidden; top: 1px; z-index: 2; border-bottom: none; } .TabNav li { float: left; margin: 0 5px 0 0; padding: 0; line-height: normal; } .TabNav li a { display: block; margin: 0; padding: 5px 6px 5px; border: none; top: 0; border: 1px solid #D6D6D6; color: #FFF; background: #7F7F7F; font-size: 16px; font-weight: bold; border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; } .TabNav li a:hover { color: #FFF; background: #7F7F7F; } .TabNav li.Active a { border-bottom: none; border-bottom: 1px solid transparent; background: #ECECEC; padding: 5px 6px 5px; font-weight: normal; color: #7F7F7F; font-weight: bold; } #TabPanels { clear: both; margin-bottom: 1em; border: 1px solid #D6D6D6; padding: 10px; margin-top: 0; background: #ECECEC; overflow: hidden; position: relative; z-index: 1; border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -webkit-border-radius: 0 6px 6px 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); } #ModalContainer.QuickViewModal .ModalTitle { color: #39B54A; } #productDetailsAddToCartForm .productAttributeRow { padding-top: 0; } #productDetailsAddToCartForm .productAttributeLabel { width: 115px; } #productDetailsAddToCartForm .productAttributeValue { width: 190px; } #productDetailsAddToCartForm .productAttributeValue a { color: #39B54A; } #productDetailsAddToCartForm .productAttributeValue ul { margin: 0; padding: 0; } #productDetailsAddToCartForm .productOptionPickListSwatch .thumbnail { background-repeat: repeat; height: 24px; width: 24px; } #productDetailsAddToCartForm .productAttributeRow.addToCart .productAttributeValue { width: 250px; } /* ============================================================================= Cart -n- crt ========================================================================== */ #CartHeader { overflow: hidden; } #CartHeader h2 { float: left; } #CartHeader span .button { margin-top: 7px; } /* ============================================================================= Checkout -n- chk ========================================================================== */ .ExpressCheckoutBlock .ExpressCheckoutTitle { background: #E0E0E0; border: 1px solid #ccc; } .ExpressCheckoutBlockCollapsed .ExpressCheckoutTitle { background: #F7F7F7; border: 1px solid #e5e5ef; color: #555; } .ExpressCheckoutBlockCompleted .ExpressCheckoutCompletedContent { color: #888; } .ExpressCheckoutCompletedContent { left: 325px; } select[name="sel_billing_address"], select[name="sel_shipping_address"] { margin-bottom: 10px; } .PL20, .ML20 { margin-bottom: 1em; } .PL20 p.Submit { margin-bottom: 0; } /* ============================================================================= Account -n- act ========================================================================== */ .LoginForm { margin: 0 0 0 130px; } /* ============================================================================= Home Page -n- hpg ========================================================================== */ #home-1 { height: 395px; width: 940px; position: relative; } #home-1 .banner_home_page_top, .banner_home_page_top p { margin: 0; } #home-1 #cycle-menu { position: absolute; bottom: 35px; left: 425px; z-index: 100; } #home-1 #cycle-menu a { display: block; border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; float: left; background: #EB6823; box-shadow: 0 2px 1px 0 rgba(0,0,0,0.6) inset; width: 26px; height: 26px; transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; margin: 0 4px; } #home-1 #cycle-menu a.activeSlide { border: 4px solid #EB6823; background: #FFF; width: 18px; height: 18px; } #home-1 #cycle-next { float: right!important; } #home-2 { height: 364px;} #home-2 .grid-4 { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; padding: 0 20px; margin: 20px 0; border-left: 1px solid #FFF; border-right: 1px solid #CCC; width: 313px; position: relative; } #home-2 .grid-4.first { border-left: none; } #home-2 .grid-4.last { border-right: none; } #home-2 img { margin: 15px auto 20px; display: block; } #home-2 p a { text-decoration: none; font-weight: bold; } #home-3 { margin: 20px 0; } #home-3 .grid-4, #home-3 .grid-8 { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; border-left: 1px solid #CCC; } #home-3 .grid-4 { border-left: none; width: 270px; } #home-3 .grid-4 img { display: block; margin: 0 auto; } #home-3 .grid-8 { width: 650px; padding: 0 0 0 30px; margin: 0; } /* Clearfixes */ /* ============================================================================= Media Queries -n- mqs ========================================================================== */ /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { .productOptionViewRectangle input, .productOptionPickListSwatch input { display: none; } } /* ========================================================================== Print Styles -n- prn ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ 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; } } /* ============================================================================= Plugins -n- plg ========================================================================== */ /*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-tmp iframe, .fancybox-tmp object{vertical-align:top; padding:0; margin:0} .fancybox-wrap{position:absolute; top:0; left:0; z-index:8020} .fancybox-skin{position:relative; padding:0; margin:0; background:#f9f9f9; color:#444; text-shadow:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px} .fancybox-opened{z-index:8030} .fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5); box-shadow:0 10px 25px rgba(0, 0, 0, 0.5)} .fancybox-outer, .fancybox-inner{padding:0; margin:0; position:relative; outline:none} .fancybox-inner{overflow:hidden} .fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch} .fancybox-error{color:#444; font:14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin:0; padding:10px} .fancybox-image, .fancybox-iframe{display:block; width:100%; height:100%; border:0; padding:0; margin:0; vertical-align:top} .fancybox-image{max-width:100%; max-height:100%} #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span{background-image:url('../../img/fancybox/fancybox_sprite.png')} #fancybox-loading{position:fixed; top:50%; left:50%; margin-top:-22px; margin-left:-22px; background-position:0 -108px; opacity:0.8; cursor:pointer; z-index:8020} #fancybox-loading div{width:44px; height:44px; background:url('../../img/fancybox/fancybox_loading.gif') center center no-repeat} .fancybox-close{position:absolute; top:-18px; right:-18px; width:36px; height:36px; cursor:pointer; z-index:8040} .fancybox-nav{position:absolute; top:0; width:40%; height:100%; cursor:pointer; background:transparent url('blank.gif'); -webkit-tap-highlight-color:rgba(0, 0, 0, 0); z-index:8040} .fancybox-prev{left:0} .fancybox-next{right:0} .fancybox-nav span{position:absolute; top:50%; width:36px; height:34px; margin-top:-18px; cursor:pointer; z-index:8040; visibility:hidden} .fancybox-prev span{left:20px; background-position:0 -36px} .fancybox-next span{right:20px; background-position:0 -72px} .fancybox-nav:hover span{visibility:visible} .fancybox-tmp{position:absolute; top:-9999px; left:-9999px; padding:0; overflow:visible; visibility:hidden} #fancybox-overlay{position:absolute; top:0; left:0; overflow:hidden; display:none; z-index:8010; background:#000} #fancybox-overlay.overlay-fixed{position:fixed; bottom:0; right:0} .fancybox-title{visibility:hidden; font:normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position:relative; text-shadow:none; z-index:8050} .fancybox-opened .fancybox-title{visibility:visible} .fancybox-title-float-wrap{position:absolute; bottom:0; right:50%; margin-bottom:-35px; z-index:8030; text-align:center} .fancybox-title-float-wrap .child{display:inline-block; margin-right:-100%; padding:2px 20px; background:transparent; background:rgba(0, 0, 0, 0.8); -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; text-shadow:0 1px 2px #222; color:#FFF; font-weight:bold; line-height:24px; white-space:nowrap} .fancybox-title-outside-wrap{position:relative; margin-top:10px; color:#fff} .fancybox-title-inside-wrap{margin-top:10px} .fancybox-title-over-wrap{position:absolute; bottom:0; left:0; color:#fff; padding:10px; background:#000; background:rgba(0, 0, 0, .8)} #fancybox-buttons{position:fixed; left:0; width:100%; z-index:8050} #fancybox-buttons.top{top:10px} #fancybox-buttons.bottom{bottom:10px} #fancybox-buttons ul{display:block; width:170px; height:30px; margin:0 auto; padding:0; list-style:none; background:#111; -webkit-box-shadow:0 1px 3px #000, 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .05); -moz-box-shadow:0 1px 3px #000, 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .05); background:#111 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .2)), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.5, rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .15))); background:#111 -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .15) 100%); border-radius:3px} #fancybox-buttons ul li{float:left; margin:0; padding:0} #fancybox-buttons a{display:block; width:30px; height:30px; text-indent:-9999px; background-image:url('../../img/fancybox/fancybox_buttons.png'); background-repeat:no-repeat; outline:none} #fancybox-buttons a.btnPrev{width:32px; background-position:6px 0} #fancybox-buttons a.btnNext{background-position:-33px 0; border-right:1px solid #3e3e3e} #fancybox-buttons a.btnPlay{background-position:0 -30px} #fancybox-buttons a.btnPlayOn{background-position:-30px -30px} #fancybox-buttons a.btnToggle{background-position:3px -60px; border-left:1px solid #111; border-right:1px solid #3e3e3e; width:35px} #fancybox-buttons a.btnToggleOn{background-position:-27px -60px} #fancybox-buttons a.btnClose{border-left:1px solid #111; width:38px; background-position:-57px 0px} #fancybox-buttons a.btnDisabled{opacity :0.5; cursor:default} #fancybox-thumbs{position:fixed; left:0; width:100%; overflow:hidden; z-index:8050} #fancybox-thumbs.bottom{bottom:2px} #fancybox-thumbs.top{top:2px} #fancybox-thumbs ul{position:relative; list-style:none; margin:0; padding:0} #fancybox-thumbs ul li{float:left; padding:1px; opacity:0.5} #fancybox-thumbs ul li.active{opacity:0.75; padding:0; border:1px solid #fff} #fancybox-thumbs ul li:hover{opacity:1} #fancybox-thumbs ul li a{display:block; position:relative; overflow:hidden; border:1px solid #222; background:#111; outline:none} #fancybox-thumbs ul li img{display:block; position:relative; border:0; padding:0} /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;} /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../../img/flexslider/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;} .flex-direction-nav li .next {background-position: -52px 0; right: -21px;} .flex-direction-nav li .prev {left: -20px;} .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;} .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../../img/flexslider/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}