/* Template Name: MadBC Description: Starting template for BigCommerce Version: 2.8.0 Author: Madwire Media Author URI: http://www.madwirewebdesign.com/ Updated: April 19, 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; } 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-size: 2em; margin: 0 0 0.67em; } #PageContent h2, #CategoryHeading h2, #NewsContent h2, .product .Content h2 { font-size: 1.5em; margin: 0 0 .83em; } .Content h3 { margin: 30px 0 10px; } 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; } /* == Links & Selection ===================================================== */ a, .Content a { color: #06c; } a:hover, .Content a:hover, a:focus, .Content a:focus { color: #09f; } 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: 8px 16px; cursor: pointer; text-decoration: none; text-transform: capitalize; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15); color: #fff; border: 1px solid #27619B; background: rgb(87,147,205); background: -moz-linear-gradient(top, rgba(87,147,205,1) 0%, rgba(39,97,155,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,147,205,1)), color-stop(100%,rgba(39,97,155,1))); background: -webkit-linear-gradient(top, rgba(87,147,205,1) 0%,rgba(39,97,155,1) 100%); background: -o-linear-gradient(top, rgba(87,147,205,1) 0%,rgba(39,97,155,1) 100%); background: -ms-linear-gradient(top, rgba(87,147,205,1) 0%,rgba(39,97,155,1) 100%); background: linear-gradient(top, rgba(87,147,205,1) 0%,rgba(39,97,155,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5793cd', endColorstr='#27619b',GradientType=0 ); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-appearance: none; box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset; -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset; } .button:hover, .Content a.button:hover, input[type=submit]:hover, input[type=button]:hover { background: #09f; color: #fff; text-decoration: none; } .button.grey, .Content a.button.grey, input[type=submit].grey, input[type=button].grey, button.grey { background: rgb(191,191,191); background: -moz-linear-gradient(top, rgba(191,191,191,1) 0%, rgba(139,139,139,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,191,1)), color-stop(100%,rgba(139,139,139,1))); background: -webkit-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(139,139,139,1) 100%); background: -o-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(139,139,139,1) 100%); background: -ms-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(139,139,139,1) 100%); background: linear-gradient(top, rgba(191,191,191,1) 0%,rgba(139,139,139,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#8b8b8b',GradientType=0 ); border: 1px solid #8B8B8B; } .button.grey:hover, .Content a.button.grey:hover, input[type=submit].grey:hover, input[type=button].grey:hover { background: #8B8B8B; } .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; } .ProceedToCheckout a.button { padding: 8px 16px; color: #fff; } .BulkDiscount .button { margin:0!important; } /* == Forms =================================================================== */ textarea { overflow: auto; } #LoginForm form input[type=text] { margin: 0; } .HorizontalFormContainer dd { padding: 8px 0 0; } .HorizontalFormContainer dt { padding: 10px 0 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 { font-family: Verdana, Geneva, sans-serif; } #Container { width: auto; margin: 0; } #Outer { background: none; margin: 0; } #TopMenu, #Header, #PrimaryMenu, #Wrapper, #Footer { width: 960px; margin: 0 auto; } #TopMenuOuter, #HeaderOuter, #PrimaryMenuOuter, #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; min-height: 400px; } #FooterOuter {} #Footer { clear: both; } .Content, .Content.Wide, .Content.Widest { background: none; min-height: 0; } .Content { width: 570px; margin: 0 10px 0 0; padding: 0; font-size: 1em; } .Content.Wide { width: 765px; margin: 0; padding: 0; } .Content.Widest { width: 960px; 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: 185px; margin-right: 10px; } .Right { width: 185px; margin: 0; } /* ============================================================================= Header -n- hdr ========================================================================== */ /* == TopMenu =============================================================== */ #TopMenuOuter { padding-bottom: 13px; background: #EFEFEF; } #TopMenu {} #TopMenu ul { float: right; } #TopMenu li a, #TopMenu li div { color: #06c; border: none; font-size: .95em; margin: 8px 0 0 0; padding: 0 10px; } #TopMenu li a:hover { color: #09f; } /* == Header ================================================================ */ #HeaderOuter { background: #FFF; } #Header { position: relative; border-bottom: 1px solid #e7e7e7; margin: 0 auto 10px; padding: 0 0 5px; } #Logo { float: left; width: auto; margin: 12px 0 0 0; } #header-1 { float: right; margin: 5px 0 0; } #header-1-1 { text-align: right; } #header-1-1 { margin: 0 -5px 0 0; } #header-1-2 { text-align: right; } #header-1-2 h2 { font-size: 18px; color: #4B86C0; margin: 0; font-weight: normal; } #header-1-3 { } #header-1-3 img { float: left; margin: 5px 0 0; } #header-1-3 h2 { float: left; font-size: 18px; margin: 7px 0 0 4px; } #header-1-3 h2 a { text-decoration: none; font-weight: normal; color: #7F7E6C; } #header-2 { margin: 105px 0 0; background: #4B86C0; } #PrimaryMenu { float: left; width: 585px; } #pm-green { position: relative; height: 7px; background: #76AB43; width: 100%; z-index: 1; } #PrimaryMenu > ul { background: none; position: relative; z-index: 2; text-align: center; width: 575px; } #PrimaryMenu > ul > li { display: inline-block; zoom: 1; margin: 0; } #PrimaryMenu > ul > li > a { display: block; padding: 8px 13px; font-size: 13px; text-decoration: none; color: #fff; } #PrimaryMenu > ul > li.ActivePage > a, #PrimaryMenu > ul > li:hover > a { background: #76AB43; color: #FFFFFF; } #PrimaryMenu ul ul { display: none; } #SearchForm { width: auto; padding: 0 0 0 20px; background: #76AB43; float: right; width: 355px; height: 33px; border-radius: 0 0 0 15px; -moz-border-radius: 0 0 0 15px; -webkit-border-radius: 0 0 0 15px; } #SearchForm label { display: block; float: left; margin: 4px 10px 0 0; } #SearchForm #search_query { margin-right: 0; font-size: 14px; padding: 3px 10px; width: 220px; } #SearchForm input.button { background: none; background-image: url("/template/images/search-button.png"); background-position: 6px 2px; background-repeat: no-repeat; border: none; padding: 3px 16px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; min-height: 22px; } .QuickSearch { z-index: 9999; } .QuickSearchHover td{ background: #f4f4f4; } .QuickSearch a, .QuickSearch a:hover { color: #4D4C51; } #header-3 { } #header-3 ul { background: none; position: relative; z-index: 2; text-align: center; width: 960px; } #header-3 li { display: inline-block; zoom: 1; margin: 10px 0 5px; padding: 0; } #header-3 a { display: block; padding: 0 20px; font-size: 14px; text-decoration: none; color: #5C5C5C; border-right: 1px solid #73AD3D; font-weight: bold; } #header-3 li.ActivePage a, #header-3 li:hover a { color: #76AB43; } #header-3 li.last a { border-right: none; } /* ============================================================================= Content -n- cnt ========================================================================== */ /* ============================================================================= Sidebar -n- sdb ========================================================================== */ .Left .BlockContent, .Right .BlockContent { margin: 0; } .Left .Panel { margin: 0 0 20px; float: left; width: 185px; } .Left .Panel h2 { display: block; padding: 5px; text-align: center; color: #FFF; text-transform: lowercase; font-size: 15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #76AB43; margin: 0 0 5px; } .Left .BlockContent { border-top: 1px dotted #80806D; padding: 5px 0; } .Left .Panel ul { padding-left: 20px; } .Left .Panel li { list-style: disc; } .Left .Panel a { font-size: 12px; color: #393939; text-decoration: none; display: block; padding: 2px 0; } .Left .Panel a:hover { text-decoration: none; } .Left #brandselect { margin: 5px 8px 0; width: 170px; } .Left hr { display: none; } .Left .SideCategoryListClassic > ul { } .Left .SideCategoryListClassic > ul > li { } .Left .SideCategoryListClassic > ul > li > a { } /* First Level */ .Left .SideCategoryListClassic ul ul { padding: 5px 0 10px!important; margin: 0 0 0 -15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-top: none!important; } /* Second Level */ .Left .SideCategoryListClassic ul ul li { list-style: none; } .Left .SideCategoryListClassic ul ul a { color: #000; display: block; padding: 2px 10px 2px 20px; } .Left .SideCategoryListClassic ul ul a:hover { color: #FFF; background: #ADCD8E; } #SideNewsletterBox input { font-size: 12px; padding: 3px; margin: 5px 8px 0; width: 162px; } #SideNewsletterBox .button { width: auto; height: auto; padding: 8px 16px; } #couponcode, #giftcertificatecode { padding: 5px; } /* ============================================================================= Footer -n- ftr ========================================================================== */ #Footer { font-size: 12px; background: #EFEFEF; padding: 10px 0 5px; border-top: 1px solid #BBB; } #Footer #FooterMenu { float: left; width: 960px; } #Footer .Panel { margin: 0; width: 21%; float: left; padding: 0 2%; } #Footer .Panel h2 { font-size: 15px; color: #7E7C70; margin: 0 0 10px; text-align: left; padding: 0 0 5px; border-bottom: 1px dotted #80806D; font-weight: bold; } #Footer #FooterMenu ul { text-align: left; list-style: none; margin: 0; padding: 0; } #Footer #FooterMenu ul li { float: none; display: block; position: relative; clear: both; } #Footer #FooterMenu ul li a { padding: 2px 0; color: #333; border: none; display: block; } #Footer #FooterMenu ul li.ActivePage a, #Footer #FooterMenu ul li:hover a { color: #09f; } #Footer #FooterMenu ul ul { display: none; } #footer-bottom { padding: 15px 30px; background: #76AB43; margin: 30px 0 0; color: #FFF; float: left; width: 900px; } /* ============================================================================= Miscelaneous -n- msc ========================================================================== */ .CustomWish.Breadcrumb li.last a { background: none; } .FeedLink { display: none; } .Breadcrumb { margin: 0; border-bottom: 1px solid #BBB; } .Breadcrumb ul { } .Breadcrumb li { text-transform: uppercase; font-weight: bold; font-size: 11px; color: #000; } .Breadcrumb li a { color: #5B5F66; text-decoration: none; font-weight: bold; } .Breadcrumb li:first-child a { } #CartContent { } #CartContent .CartContents { border: none; } #CartContent a { color: #000; text-decoration: none; font-weight: normal; } #CartContent a:hover { color: #76AB43; } #CartContent .ProductPrice { font-size: 20px; font-weight: bold; color: #76AB43; } #CartContent .KeepShopping { margin: -20px 0 20px; width: 220px; } #CartContent .CartRemoveLink { font-size: 11px; } /* ============================================================================= Pages -n- pgs ========================================================================== */ .blog .FeedItem h3 { margin-bottom: .5em; } .blog .FeedItem .FeedContent p { margin-bottom: .5em; } /* ============================================================================= Category -n- ctg ========================================================================== */ .SubCategoryListGrid { } .SubCategoryListGrid li { } .SubCategoryListGrid a { text-decoration: none; color: #000; font-weight: bold; margin: 10px 0 0; display: block; } .SubCategoryListGrid li a:first-child { margin: 0; } .banner_category_page_top { position: relative; } .banner_category_page_top .button { position: absolute; bottom: 30px; left: 30px; } .banner_category_page_top .button img { margin: 0 0 0 10px; } #CategoryHeading, #BrandHeading { /*border-bottom: 2px dotted #80806D;*/ padding: 0 0 5px; } .banner_category_page_top { margin: 0; } #CategoryHeading .BlockContent { } #CategoryHeading .SortBox, #BrandHeading .SortBox { float: left; font-weight: bold; } #CategoryHeading h1, #BrandHeading h1 { float: left; font-size: 20px; margin: -3px 40px 0 0; font-weight: normal; display: none; } #CategoryHeading .CategoryDescription { } #CategoryPagingTop, #BrandHeading .CategoryPagination { margin: 0; float: right; clear: none; } #CategoryContent, #BrandContent { margin: 30px 0; } .CategoryPagination { overflow: hidden; padding: 0; margin: -2px 0 0; } .CategoryPagination, .CategoryPagination a { display: block; color: #595959; font-weight: bold; text-decoration: none; background:none; border: none; border-image: initial; } .CategoryPagination .PagePrev, .CategoryPagination .PageNext, .CategoryPagination .PagingList { float: right; } .CategoryPagination .PagingList li { float: left; padding: 0; } .CategoryPagination .PagingList li, .CategoryPagination .PageNext { margin-left: 3px; } .CategoryPagination a, .CategoryPagination .PagingList li.ActivePage { display: block; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .CategoryPagination .PagePrev a, .CategoryPagination .PageNext a { text-indent: -10000em; background-position: 50% 50%; background-repeat: no-repeat; } .CategoryPagination .PagePrev a { background-image: url(../../img/bg-pageprev.png); } .CategoryPagination .PageNext a { background-image: url(../../img/bg-pagenext.png); } .CategoryPagination .PagingList li.ActivePage, .CategoryPagination .PagePrev a:hover, .CategoryPagination .PageNext a:hover, .CategoryPagination .PagingList li a:hover { color: #595959; background-color: #eee; text-decoration: none; } .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; } /* ============================================================================= Product Lists -n- pls ========================================================================== */ .ProductList li .ProductCompareButton { text-align: left; } /* Resets */ .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; } /* /Resets */ .ProductList { } .ProductList ul { } .ProductList li { width: 210px!important; height: auto!important; padding: 0!important; margin: 0 15px!important; border: none!important; min-height: 0!important; } .ProductList .ProductImage { width: 210px!important; height: 150px!important; overflow: hidden; display: block; text-align: center; } .ProductList .ProductImage img { } .ProductList .ProductDetails { text-align: left; } .ProductList .ProductDetails a { color: #0071B5; font-size: 12px; text-decoration: none; font-weight: bold; } .ProductList .ProductPriceRating { } .ProductList .ProductPriceRating em { color: #000; font-size: 12px; font-weight: normal; text-align: left; margin: 0; } .ProductList .ProductPriceRating .Rating, .ProductList .ProductCompareButton, .ProductList .ProductActionAdd, .CompareButton { display: none; } #HomeFeaturedProducts .ProductList li { margin: 10px 22px!important; } #HomeFeaturedProducts .ProductList li:nth-child(n+4) { } #CategoryContent .ProductList li { width: 170px!important; margin: 0 10px 20px!important; } #CategoryContent .ProductList .ProductImage { width: 168px!important; height: 120px!important; border: 1px solid #e7e7e7; } #CategoryContent .ProductList .ProductDetails { text-align: center; } #CategoryContent .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #CategoryContent .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #CategoryContent .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #CategoryContent .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #CategoryContent .ProductList .ProductActionAdd { text-align: center; display: block; } #CategoryContent .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } #WishListItems .ProductList li { width: 170px!important; margin: 0 10px 20px!important; } #WishListItems .ProductList .ProductImage { width: 168px!important; height: 120px!important; border: 1px solid #e7e7e7; } #WishListItems .ProductList .ProductDetails { text-align: center; } #WishListItems .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #WishListItems .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #WishListItems .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #WishListItems .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #WishListItems .ProductList .ProductActionAdd { text-align: center; display: block; } #WishListItems .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } #WishListItems .ProductList .RemoveFromWishlistForm { text-align: center; } #SideProductRelated h2 { font-weight: normal; font-size: 18px; margin: 20px 0 10px; padding: 0; } #SideProductRelated .ProductList li { width: 176px!important; margin: 0 10px 20px!important; } #SideProductRelated .ProductList li:first-child { margin: 0 10px 10px 0!important; } #SideProductRelated .ProductList li:nth-child(4n) { margin: 0 0 10px 10px!important; } #SideProductRelated .ProductList li:nth-child(n+5) { display: none; } #SideProductRelated .ProductList .ProductImage { width: 174px!important; height: 120px!important; border: 1px solid #e7e7e7; } #SideProductRelated .ProductList .ProductDetails { text-align: center; } #SideProductRelated .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #SideProductRelated .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #SideProductRelated .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #SideProductRelated .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #SideProductRelated .ProductList .ProductActionAdd { text-align: center; display: block; } #SideProductRelated .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } /* Custom Template Pages (new arrivals, brand, markdowns, best sellers) */ #HomeNewProducts > h2, #HomeSaleProducts > h2, #HomeFeaturedProducts > h2, #SidePopularProducts > h2 { display: none; } #BrandContent .ProductList li, #HomeNewProducts .ProductList li, #HomeSaleProducts .ProductList li, #HomeFeaturedProducts .ProductList li, #fastCartSuggestive.ProductList li, #SidePopularProducts .ProductList li { width: 170px!important; margin: 0 10px 30px!important; } #BrandContent .ProductList .ProductImage, #HomeNewProducts .ProductList .ProductImage, #HomeSaleProducts .ProductList .ProductImage, #HomeFeaturedProducts .ProductList .ProductImage, #fastCartSuggestive.ProductList .ProductImage, #SidePopularProducts .ProductList .ProductImage { width: 168px!important; height: 120px!important; border: 1px solid #e7e7e7; } #BrandContent .ProductList .ProductDetails, #HomeNewProducts .ProductList .ProductDetails, #HomeSaleProducts .ProductList .ProductDetails, #HomeFeaturedProducts .ProductList .ProductDetails, #fastCartSuggestive.ProductList .ProductDetails, #SidePopularProducts .ProductList .ProductDetails { text-align: center; } #BrandContent .ProductList .ProductDetails a, #HomeNewProducts .ProductList .ProductDetails a, #HomeSaleProducts .ProductList .ProductDetails a, #HomeFeaturedProducts .ProductList .ProductDetails a, #fastCartSuggestive.ProductList .ProductDetails a, #SidePopularProducts .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #BrandContent .ProductList .ProductPriceRating em, #HomeNewProducts .ProductList .ProductPriceRating em, #HomeSaleProducts .ProductList .ProductPriceRating em, #HomeFeaturedProducts .ProductList .ProductPriceRating em, #fastCartSuggestive.ProductList .ProductPriceRating em, #SidePopularProducts .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #BrandContent .ProductList .ProductPriceRating .Rating, #HomeNewProducts .ProductList .ProductPriceRating .Rating, #HomeSaleProducts .ProductList .ProductPriceRating .Rating, #HomeFeaturedProducts .ProductList .ProductPriceRating .Rating, #fastCartSuggestive.ProductList .ProductPriceRating .Rating, #SidePopularProducts .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #BrandContent .ProductList .ProductCompareButton, #HomeNewProducts .ProductList .ProductCompareButton, #HomeSaleProducts .ProductList .ProductCompareButton, #HomeFeaturedProducts .ProductList .ProductCompareButton, #fastCartSuggestive.ProductList .ProductCompareButton, #SidePopularProducts .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #BrandContent .ProductList .ProductActionAdd, #HomeNewProducts .ProductList .ProductActionAdd, #HomeSaleProducts .ProductList .ProductActionAdd, #HomeFeaturedProducts .ProductList .ProductActionAdd, #fastCartSuggestive.ProductList .ProductActionAdd, #SidePopularProducts .ProductList .ProductActionAdd { text-align: center; display: block; } #BrandContent .ProductList .ProductActionAdd a, #HomeNewProducts .ProductList .ProductActionAdd a, #HomeSaleProducts .ProductList .ProductActionAdd a, #HomeFeaturedProducts .ProductList .ProductActionAdd a, #fastCartSuggestive.ProductList .ProductActionAdd a, #SidePopularProducts .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } #SearchResultsProduct .ProductList li { width: 165px!important; margin: 0 10px 30px!important; } #SearchResultsProduct .ProductList .ProductImage { width: 163px!important; height: 120px!important; border: 1px solid #e7e7e7; } #SearchResultsProduct .ProductList .ProductDetails { text-align: center; } #SearchResultsProduct .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #SearchResultsProduct .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #SearchResultsProduct .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #SearchResultsProduct .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #SearchResultsProduct .ProductList .ProductActionAdd { text-align: center; display: block; } #SearchResultsProduct .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } #SimilarProductsByCustomerViews .ProductList li { width: 170px!important; margin: 0 10px 20px!important; } #SimilarProductsByCustomerViews .ProductList .ProductImage { width: 168px!important; height: 120px!important; border: 1px solid #e7e7e7; } #SimilarProductsByCustomerViews .ProductList .ProductDetails { text-align: center; } #SimilarProductsByCustomerViews .ProductList .ProductDetails a { color: #000; font-size: 12px; font-weight: normal; line-height: 1.2; } #SimilarProductsByCustomerViews .ProductList .ProductPriceRating em { color: #DC2323; font-size: 12px; font-weight: bold; text-align: center; } #SimilarProductsByCustomerViews .ProductList .ProductPriceRating .Rating { text-align: center; display: block; } #SimilarProductsByCustomerViews .ProductList .ProductCompareButton { text-align: center; display: block; color: #979797; font-size: 11px; } #SimilarProductsByCustomerViews .ProductList .ProductActionAdd { text-align: center; display: block; } #SimilarProductsByCustomerViews .ProductList .ProductActionAdd a { color: #73AC3A; display: block; } /* ============================================================================= Product -n- prd ========================================================================== */ #ProductDetails { } #ProductDetails hr { display: none; } #ProductDetails .ProductThumbWrap { float: left; width: 340px!important; } #ProductDetails .ProductThumb { float: none; height: auto!important; width: 340px!important; } #ProductDetails .ProductThumbImage { width: 340px!important; height: 270px!important; position: relative; border: 1px solid #e7e7e7; float: left; } #ProductDetails .ProductThumbImage .coverUp { position: absolute; width: 100%; z-index: 1000; top: 0; bottom: 0; background: #FFF; } #ProductDetails .zoomPad { } #ProductDetails .zoomPad img { } #ProductDetails .ImageCarouselBox { } #ProductDetails .ImageCarouselBox .ProductTinyImageList { } #ProductDetails .ImageCarouselBox ul { } #ProductDetails .ImageCarouselBox li { border: 1px solid #e7e7e7!important; width: 75px!important; height: 60px!important; } #ProductDetails .ImageCarouselBox .TinyOuterDiv { border: none!important; } #ProductDetails .ImageCarouselBox .TinyOuterDiv > div { } #ProductDetails .ImageCarouselBox .TinyOuterDiv img { } #ProductDetails .ProductMain { float: left; margin: 0 0 0 10px; width: 415px; } #ProductDetails .ProductMain h1 { font-weight: normal; font-size: 18px; margin: 0 0 3px; padding: 0 0 10px; border-bottom: 1px solid #e7e7e7; } #ProductDetails .ProductDetailsGrid { } #ProductDetails .DetailRow, .productAttributeList .productAttributeRow { display: block; clear: none; font-size: 12px; float: left; padding-left: 0!important; } #ProductDetails .Label, #ProductDetails .productAttributeLabel { width: 120px; float: left; font-size: 12px; margin: 3px 0!important; text-align: left; } #ProductDetails .Value, #ProductDetails .productAttributeValue { float: left; display: block; width: 295px; font-size: 12px; margin: 3px 0!important; color: #7C7C7C; font-weight: bold; } #ProductDetails .Value .ProductPrice { color: #76AB43; font-size: 16px; font-weight: normal; } #ProductDetails .DetailRow.BulkRow ul { margin: 0; padding: 0; } #ProductDetails .DetailRow.BulkRow li { list-style: none; } #ProductDetails .BulkDiscount { float: left; margin: 15px 0 0; clear: both; width: 290px; } #ProductDetails .BulkDiscount .button { float: left; font-size: 20px; padding: 10px 15px; margin: 0; } #CategoryContent .ProductList li .ProductActionAdd .button:hover { background: #616D24; } #ProductDetails .BulkDiscount .wishlist-button { float: left; margin: 9px 0 0 13px!important; font-size: 15px; padding: 8px 10px; } #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; } .RatingRow img { width: auto; } .BulkDiscountLink { float: left; font-size: 11px; margin: 5px 0 0p; text-align: center; width: 135px; clear: left; } #prod-reviewer { font-size: 10px; } /*.BulkDiscountLink { float: left; margin: 10px 0 0 152px; }*/ #SideProductAddToWishList { font-size: 12px; margin: 20px 0 0; float: left; padding: 10px; border: 1px solid #e7e7e7; } #SideProductAddToWishList h2 { font-size: 18px; font-weight: normal; margin: 0 0 10px; } #SideProductAddToWishList .BlockContent { margin: 0; } /* product & search tabs */ #ProductTabs { float: left; margin: 40px 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 2px 0 0; padding: 0; line-height: normal; font-weight: bold; } .TabNav li a { display: block; margin: 0; padding: 10px 15px; border: none; font-size: 16px!important; top: 0; border: 1px solid #C9C9C9; color: #000; background: #ADADAD; color: #FFF; } .TabNav li a:hover, .TabNav li.Active a { border-bottom: none; border-bottom: 1px solid transparent; background: #76AB3D; padding: 10px 15px; font-weight: normal; color: #FFF; } #TabPanels { clear: both; margin-bottom: 1em; border: 1px solid #e7e7e7; padding: 15px 10px; margin-top: 0; background: #fff; overflow: hidden; position: relative; z-index: 1; font-size: 12px; } #TabPanels > div > h2 { display: none; } #SimilarProductsByCustomerViews { margin: 20px 0 40px; width: 765px; float: left; } #SimilarProductsByCustomerViews h2 { font-size: 20px; font-weight: normal; } /* ============================================================================= Cart -n- crt ========================================================================== */ #CartHeader { overflow: hidden; } #CartHeader h2 { float: left; } #CartHeader span .button { margin-top: 7px; } .fastCartBottom h3 { color: #009E0F; } /* ============================================================================= 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 ========================================================================== */ /* ============================================================================= Home Page -n- hpg ========================================================================== */ #home-1 { width: 765px; height: 290px; position: relative; overflow: hidden; } .flex-control-nav { position: absolute; bottom: 20px; right: 40px; z-index: 30; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background:#76AB43; padding: 5px 10px!important; margin: 0; box-shadow: 1px 1px 0 #000; -moz-box-shadow: 1px 1px 0 #000; -webkit-box-shadow: 1px 1px 0 #000; } .flex-control-nav li { } .flex-control-nav a { } .flex-control-nav a.active { } #home-1-2 { position: relative; } #home-2 { margin: 10px 0 0; float: left; width: 765px; background: #F4F4F4; padding: 0 0 30px; } #home-2 h2, #HomeFeaturedProducts h2 { background: #76AB43; display: block; padding: 8px 20px; color: #FFF; font-size: 16px; box-shadow: 1px 1px 0 rgba(0,0,0,0.6); -moz-box-shadow: 1px 1px 0 rgba(0,0,0,0.6); -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.6); border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; } #home-2 ul { text-align: center; display: block; } #home-2 li { list-style: none; float: left; margin: 0 15px; } #home-2 a { } /* 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.5 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:1002} .fancybox-outer{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:1003} .fancybox-opened .fancybox-outer{-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-inner{width:100%; height:100%; padding:0; margin:0; position:relative; outline:none; overflow:hidden} .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:1010} #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:1004} .fancybox-nav{position:absolute; top:0; width:40%; height:100%; cursor:pointer; background:transparent url('img/fancybox/blank.gif'); /* helps IE */ z-index:1003} .fancybox-prev{left:0} .fancybox-next{right:0} .fancybox-nav span{position:absolute; top:50%; width:36px; height:36px; margin-top:-18px; cursor:pointer; z-index:1003; 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} /* Overlay helper */ #fancybox-overlay{position:absolute; top:0; left:0; overflow:hidden; display:none; z-index:1001; background:#000} /* Title helper */ .fancybox-title{visibility:hidden; font:normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position:relative; text-shadow:none; z-index:1005} .fancybox-opened .fancybox-title{visibility:visible} .fancybox-title-float-wrap{position:absolute; bottom:0; right:50%; margin-bottom:-35px; z-index:1003; text-align:center} .fancybox-title-float-wrap .child{display:inline-block; margin-right:-100%; padding:2px 20px; background:transparent; /* Fallback for web browsers that doesn't support RGBa */ 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:1005} #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:0px; width:100%; overflow:hidden; z-index:1005} #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-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 {} .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;}