/* 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; } h1,h2,h3,h4,h5,h6 {} h1,h2,h3,h4,h5,h6, .Content h2, .TitleHeading, .Content h1 { font-weight: 700; } .inner .Content h2, .TitleHeading, .inner .Content h1 { background: url("/template/images/bg-primary.jpg") repeat-x center; border-color: #4E4E50; border-width: 3px; border-style: none solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 8px 10px; margin: 20px 0 10px; color: #FFF; font-weight: 900; font-size: 20px; } .inner .Content.Wide h2, .TitleHeading, .inner .Content.Wide h1 { margin: 0 0 10px; } #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; } /* == 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; border: none; -webkit-appearance: none; background: url("/template/images/fade-red.jpg") repeat-x center; text-shadow: 0 1px 0 #000; color: #FFF; font-weight: bold; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 -2px 0 rgba(255,255,255,0.3) inset, 0 2px 0 rgba(0,0,0,0.2) inset; -moz-box-shadow: 0 -2px 0 rgba(255,255,255,0.3) inset, 0 2px 0 rgba(0,0,0,0.2) inset; -webkit-box-shadow: 0 -2px 0 rgba(255,255,255,0.3) inset, 0 2px 0 rgba(0,0,0,0.2) inset; } .button:hover, .Content a.button:hover, input[type=submit]:hover, input[type=button]:hover { background: #9C070B; 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; } .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 {} #Container { width: auto; margin: 0; } #Outer { background: none; margin: 0; } #TopMenu, #Header, #PrimaryMenu, #Wrapper, #Footer { width: 950px; 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 { } #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: 720px; margin: 0; padding: 0; } .Content.Widest { width: 950px; 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: 210px; margin: 0 20px 15px 0; } .Right { width: 180px; margin: 0; } body.home { background: url("/template/images/home-1-bg.jpg") repeat-x 0 199px #FFF; } /* ============================================================================= Header -n- hdr ========================================================================== */ #TopMenuOuter { background: url("/template/images/top-bg.jpg") repeat-x; } #TopMenu { height: 60px; } #TopMenu ul { margin: 7px 0 0; } #TopMenu li a, #TopMenu li div { color: #FFF; border: none; font-size: 11px; padding: 0 8px; text-transform: lowercase; } #TopMenu li a:hover { color: #9C070B; text-decoration: none; } #TopMenu li.cart a { display: block; float: left; text-transform: uppercase; } #TopMenu li.cart img { float: left; margin: 5px 0 0; } #SearchForm { width: auto; padding: 0; margin: 8px 0; float: left; } #SearchForm #search_query { font-size: 14px; float: left; background: url("/template/images/search-button.png") 5px center no-repeat #0E0F10; box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; -moz-box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; -webkit-box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; padding: 5px 10px 7px 30px; color: #D5D6D9; border: none; border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; } #SearchForm input.button { float: left; background: url("/template/images/fade-red.jpg") repeat-x center; text-shadow: 0 1px 0 #000; padding: 6px 10px 7px; color: #FFF; font-size: 12px; font-weight: bold; border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0 6px 6px 0; box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; -moz-box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; -webkit-box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset, 0 2px 0 rgba(0,0,0,0.4) inset; } #SearchForm input.button:hover { background: #9C070B; } .QuickSearch { z-index: 9999; } .QuickSearchHover td{ background: #f4f4f4; } .QuickSearch a, .QuickSearch a:hover { color: #4D4C51; } #header-phone { float: left; color: #FFF; font-size: 22px; font-weight: bold; margin: 10px 0 0 20px; } /* == Header ================================================================ */ #HeaderOuter { } #Header {} #Logo { float: left; width: auto; margin: 15px 0; } #Logo a img { width: 198px; } #Logo .vette { margin: 0 0 0 10px; } #Header .right { text-align: right; } #Header h2 { font-size: 23px; color: #363738; font-weight: normal; margin: 10px 0 18px; float: right; } #header-shipping { padding: 5px 140px 5px 0; background: url("/template/images/header-ups.png") no-repeat right center; float: right; *float: none; clear: right; } #header-shipping a { text-decoration: none; } #Header h3 { margin: 0; font-weight: 900; color: #98080B; text-transform: uppercase; font-size: 18px; } #Header h4 { margin: 0; text-transform: lowercase; color: #606A75; } #header-shipping a:hover .hovered { color: #CD1E2F; text-decoration: underline; } #Header #fb { float: right; margin: 10px 10px 0 0; } /* == Primary Navigation ===================================================== */ #PrimaryMenuOuter { position: relative; z-index: 1000; margin-bottom: 15px; } #PrimaryMenu { background: url("/template/images/bg-primary.jpg") repeat-x center; border-color: #4E4E50; border-width: 3px; border-style: none solid; width: 944px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #PrimaryMenu > ul { float: left; } #PrimaryMenu > ul > li { float: left; position: relative; } #PrimaryMenu li { margin-bottom: 0; } #PrimaryMenu > ul > li > a { display: block; padding: 6px 15px; font-size: 14px; text-decoration: none; color: #999; font-weight: bold; text-transform: uppercase; border-left: 1px solid #454547; margin: 6px 0; } #PrimaryMenu a { text-decoration: none; } #PrimaryMenu ul li.First a { border-left: none; } #PrimaryMenu > ul > li.ActivePage > a, #PrimaryMenu > ul > li > a:hover { color: #D5D6D9; } /* Drop Down */ #PrimaryMenu ul li { position: relative; } #PrimaryMenu ul ul li { width: 100%; vertical-align: bottom; } #PrimaryMenu ul ul { display: block; width: 175px; position: absolute; top: -10000em; border: 3px solid #4E4E50; border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-top: none; background: #000000; background: -moz-linear-gradient(top, #000000 0%, #373739 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#373739)); background: -webkit-linear-gradient(top, #000000 0%,#373739 100%); background: -o-linear-gradient(top, #000000 0%,#373739 100%); background: -ms-linear-gradient(top, #000000 0%,#373739 100%); background: linear-gradient(to bottom, #000000 0%,#373739 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#373739',GradientType=0 ); overflow: hidden; } #PrimaryMenu ul ul ul { left: 175px; } #PrimaryMenu li:hover { visibility: inherit; } #PrimaryMenu ul > li:hover > ul { top: auto; z-index: 1000; } #PrimaryMenu ul ul > li:hover > ul { top: 0; z-index: 1000; } #PrimaryMenu li li a { display: block; padding: 5px 10px; background: none; color: #999999; text-decoration: none; text-transform: uppercase; font-weight: bold; } #PrimaryMenu li li a:hover { background: #000; color: #D5D6D9; } #PrimaryMenu .right { border-left: 1px solid #454547; margin: 5px; padding: 4px 5px 4px 10px; } #PrimaryMenu .right img { margin: 0 2px; } /* ============================================================================= 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; } #couponcode, #giftcertificatecode { padding: 5px; } .Left .Panel { border: 2px solid #4E4E50; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 10px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); background: #D6D5DA; } .Left .Panel h2 { color: #FFF; text-align: center; background: url("/template/images/bg-primary.jpg") repeat-x center; margin: -10px -10px 10px; padding: 10px; font-size: 16px; } .Left .Panel a:hover { color: #96050C; text-decoration: none; } #SideGiftCertificateCodeBox hr, #SideCouponCodeBox hr { display: none!important; } /* ============================================================================= Footer -n- ftr ========================================================================== */ #FooterOuter { padding: 13px 0 5px; background: url("/template/images/footer-bg.jpg") repeat-x; } #Footer { font-size: 1em; text-align: left; padding: 0 0 2px; } #Footer { } #FooterMenu { margin: 4px 0 0; } #Footer ul { list-style: none; margin: 0 -15px 0 0; padding: 0; } #Footer ul li { float: left; position: relative; } #Footer ul li a { display: block; padding: 2px 15px; font-size: 14px; text-decoration: none; color: #999999; font-weight: bold; text-transform: uppercase; margin: 6px 0; border-left: none; } #Footer ul li.ActivePage a, #Footer ul li:hover a { color: #D5D6D9; } #Footer ul ul { display: none; } #Footer .small { margin: 10px 0 0; } #Footer .small ul li { float: left; position: relative; } #Footer .small ul li a { display: block; padding: 0 8px; font-size: 12px; text-decoration: none; color: #D5D6D9; font-weight: normal; text-transform: lowercase; border-left: 1px solid #FFF; } #Footer .small ul li.First a { padding: 0 8px 0 0; border-left: none; } #Footer .small ul li.ActivePage a, #Footer .small ul li:hover a { color: #999999; } #Footer .small ul ul { display: none; } #FooterCC { clear: both; float: right; } #Footer #copy { font-size: 10px; color: #D5D6D9; clear: both; margin: 5px 0 -10px; } #Footer #copy a { color: #FFF; text-decoration: none; } /* ============================================================================= Miscelaneous -n- msc ========================================================================== */ .CustomWish.Breadcrumb li.last a { background: none; } .FeedLink { display: none; } .Breadcrumb { margin: 0; border-bottom: none!important; font-size: 12px; } .Breadcrumb ul { } .Breadcrumb li { color: #222325; } .Breadcrumb li a { color: #222325; text-decoration: none; } .Breadcrumb li a:hover { text-decoration: none; color: #9C070B; } .Breadcrumb li:first-child { padding-left: 0; } #LoginForm { margin: 20px 0 20px 120px; } #LoginForm h1 { color: #000; padding: 0; background: none; border: none; } .ToggleSearchFormLink a { display: block; padding: 10px 10px 0 0; color: #FFF; text-decoration: none; float: left; } #toggle_form_image { display: none; } .inner.page .review { border: 3px solid #4E4E50; border-radius: 3px 3px 3px 3px; margin: 20px 0 10px; padding: 8px 10px; } /* ============================================================================= Pages -n- pgs ========================================================================== */ .blog .FeedItem h3 { margin-bottom: .5em; } .blog .FeedItem .FeedContent p { margin-bottom: .5em; } #HomeRecentBlogs { } #HomeRecentBlogs ul { padding: 0; } #HomeRecentBlogs li { list-style: none; } #HomeRecentBlogs a { display: block; border-bottom: 1px solid #D6D7DA; padding: 2px 10px; color: #000; font-size: 16px; text-decoration: none; } #HomeRecentBlogs a:hover { color: #D40201; } .FeedItem { margin: 10px 0 10px 20px; } .FeedItem h2 { background: none!important; padding: 0!important; border: none!important; margin: 0 0 10px!important; } .FeedItem h2 a { color: #D40201; font-weight: normal; text-decoration: none; } .FeedItem h2 a:hover { color: #000; } .FeedItem .FeedContent { } .inner #HomeFeaturedProducts h2 { display: none; } /* ============================================================================= Category -n- ctg ========================================================================== */ .SubCategoryList { padding: 0; background: none; } .SubCategoryList ul { padding: 0; } .SubCategoryList li { background: none!important; padding-left: 0; float: left; padding-bottom: 3px; margin-left: 15px; } .SubCategoryList li .button { padding: 8px 10px; min-width: 125px!important; text-align: center; text-transform: uppercase; } .SubCategoryList li:first-child { margin-left: 0; } .SubCategoryList li:hover { border-bottom: 1px solid #1F2022; padding-bottom: 2px; } .SubCategoryListGrid { padding: 0; background: none; } .SubCategoryListGrid ul { padding: 0; } .SubCategoryListGrid li { width: 154px!important; height: auto!important; padding: 0!important; margin: 0 30px; border: none!important; background: none!important; min-height: 0!important; } .SubCategoryListGrid li .sub-cat-image { width: 150px!important; height: 150px!important; overflow: hidden; display: block; text-align: center; border: 2px solid #E6E7EA; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); } .SubCategoryListGrid li img { display: block; margin: 0 auto; } .SubCategoryListGrid li .sub-cat-title { font-size: 14px; color: #1B1C1D; text-align: left; margin: 20px 0 10px 10px; } #CategoryHeading { } #CategoryHeading .BlockContent { } #CategoryHeading .cat-title { background: url("/template/images/bg-primary.jpg") repeat-x center; border-color: #4E4E50; border-width: 3px; border-style: none solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 8px 10px; margin: 20px 0 0; } #CategoryHeading h1 { color: #FFF; font-weight: 900; font-size: 20px; float: left; margin: 0; padding: 0; background: none; border: none; } #CategoryHeading .SortBox { margin: 4px 0 0; font-size: 12px; color: #FFF; text-transform: lowercase; float: right; } #CategoryPagingTop { float: right; clear: none; margin: 3px 40px 0 0; } .CategoryPagination { border: none!important; background: none!important; font-weight: bold; margin: 0; padding: 0; } .CategoryPagination .PageNext, .CategoryPagination .PagePrev { float: none; display: inline-block; clear: none; } .CategoryPagination .PagingList { float: none; display: inline-block; clear: none; } .CategoryPagination li { font-size: 12px; } .CategoryPagination a { color: #FFF; text-decoration: none; } .CategoryPagination .PagingList li.ActivePage, .CategoryPagination a:hover { text-decoration: underline; color: #FFF; font-size: 16px; font-weight: normal; } #CategoryHeading .CategoryDescription { color: #697077; line-height: 1.5; font-size: 13px; margin: 0; } #CategoryHeading .CategoryDescription .desc-title { color: #697077; margin: 10px 0 0; font-size: 22px; font-weight: normal; padding: 0; background: none; border: none; } #ModalContainer.QuickViewModal .ModalContent { background: #fff; } .inner #home-3 { margin: 0 0 20px; } /* ============================================================================= 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: 154px!important; height: auto!important; padding: 0!important; margin: 0 30px; border: none!important; background: none!important; min-height: 0!important; } .ProductList .ProductImage { width: 150px!important; height: 150px!important; overflow: hidden; display: block; text-align: center; border: 2px solid #E6E7EA; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); } .ProductList .ProductImage img { } .ProductList .ProductDetails { text-align: left; margin: 20px 0 10px 10px; } .ProductList .ProductDetails a { color: #1B1C1D; font-size: 14px; text-decoration: none; font-weight: normal; } .ProductList .ProductPriceRating { margin: 0 0 0 10px; font-size: 16px; } .ProductList .ProductPriceRating em { color: #000; } .ProductList .ProductPriceRating .Rating { display: none; } .ProductList .ProductCompareButton { display: none; } .ProductList .ProductActionAdd { margin: 0 0 0 10px; } .ProductList .ProductActionAdd a { text-transform: lowercase; font-size: 12px; text-decoration: none; } .CompareButton { display: none!important; } /* ============================================================================= Product -n- prd ========================================================================== */ #prod-cats { padding: 0; background: none; margin: 10px 0; } #prod-cats ul { padding: 0; } #prod-cats li { background: none!important; padding-left: 0; float: left; padding-bottom: 3px; margin-left: 15px; list-style: none; } #prod-cats li .button { padding: 8px 10px; width: 125px!important; text-align: center; text-transform: uppercase; } #prod-cats li:first-child { margin-left: 0; } #prod-cats li:hover { border-bottom: 1px solid #1F2022; padding-bottom: 2px; } #ProductDetails { margin: 20px 0 35px; } #ProductDetails hr { display: none; } #ProductDetails .ProductThumbWrap { float: left; border: 2px solid #D5D6D9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); } #ProductDetails .ProductThumb { float: none; height: auto!important; width: 360px!important; } #ProductDetails .ProductThumbImage { width: 360px!important; height: 365px!important; position: relative; } #ProductDetails .ProductThumbImage .coverUp { position: absolute; width: 100%; z-index: 1000; top: 0; bottom: 0; background: #FFF; } #ProductDetails .ProductThumbImage .zoomPup { display: none!important; } #ProductDetails .img-under { margin: 0 20px; display: block; border-color: #D5D6D9; } #ProductDetails .ImageCarouselBox li { border: none!important; width: 80px!important; height: 80px!important; } #ProductDetails .ImageCarouselBox .TinyOuterDiv { border: none!important; } #ProductDetails .ProductMain { float: left; border: 2px solid #D5D6D9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); margin: 0 0 0 20px; width: 522px; position: relative; padding: 0 20px 80px; min-height: 378px; } #ProductDetails h1 { color: #3B3B43; margin: 10px 0 30px; font-size: 20px; background: none; border: none; font-weight: bold; padding: 0; } #ProductDetails .DetailRow, .productAttributeList .productAttributeRow { display: block; clear: none; font-size: 12px; padding-left: 0!important; border-bottom: 1px solid #D5D6D9; margin-top: 12px; } #ProductDetails .DetailRow:after, .productAttributeList .productAttributeRow:after { content: ' '; visibility: hidden; height: 0; display: block; clear: both; } #ProductDetails .Label, #ProductDetails .productAttributeLabel { width: auto; font-size: 12px; margin: 3px 20px 3px 0 !important; text-align: left; float: left; font-weight: normal; text-transform: lowercase; color: #606264; } #ProductDetails .Value, #ProductDetails .productAttributeValue { display: block; width: 210px; font-size: 12px; margin: 3px 0!important; float: right; text-align: right; color: #606264; } #ProductDetails .DetailRow.PriceRow .Value { margin-top: -10px!important; } #ProductDetails .Value .ProductPrice { color: #606264; font-size: 24px; font-weight: bold; } #ProductDetails .productAddToCartRight .DetailRow { border-bottom: none; } #ProductDetails .productAddToCartRight .DetailRow .AddCartButton { float: left; } #ProductDetails .productAddToCartRight .DetailRow .quantityInput { position: relative; top: -3px; } #ProductDetails .BulkDiscount { position: absolute; bottom: 10px; right: 20px; } #ProductDetails .BulkDiscount .button { background: url("/template/images/cart-button.jpg") no-repeat right center; font-size: 20px; padding: 10px 50px 10px 20px; text-transform: lowercase; } #ProductDetails .BulkDiscount .button:hover { background-image: url("/template/images/cart-button_down.jpg"); } .AddThisButtonBox { width: auto!important; text-align: left!important; padding: 0!important; float: none; margin: 0!important; position: absolute; bottom: 10px; left: 20px; } .productAttributeList .required { display: none; } .productAttributeValue select { width: 200px!important; } /* product & search tabs */ #ProductTabs { float: left; } .TabNav { float: left; margin: 0 0 10px; padding: 0; border: none; position: relative; overflow: hidden; top: 1px; z-index: 2; border-bottom: none; } .TabNav li { float: left; margin: 0 15px 0 0; padding: 0; line-height: normal; } .TabNav li a { display: block; margin: 0; padding: 6px 10px; border: none; top: 0; border: none; color: #000; background: #D5D6D9; width: 170px; font-size: 15px; } .TabNav li a:hover, .TabNav li.Active a { border: none; padding: 6px 10px; font-weight: normal; background: url("/template/images/bg-primary.jpg") repeat-x center; color: #FFF; } #TabPanels { clear: both; margin: 0 0 60px; border: none; border-bottom: 1px solid #D5D6D9; padding: 10px 0; background: none; overflow: hidden; position: relative; z-index: 1; color: #606264; } #TabPanels > div > h2 { display: none; } /* ============================================================================= Cart -n- crt ========================================================================== */ #CartHeader { overflow: hidden; } #CartHeader h2 { } #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 ========================================================================== */ /* ============================================================================= Home Page -n- hpg ========================================================================== */ #home-1 { height: 370px; background: #000; border: 2px solid #4E4E50; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position: relative; } #home-1 .banner_home_page_top, #home-1 .banner_home_page_top p { margin: 0; } #home-1 .banner_home_page_top img { width: 100%; height: 370px; } #cycle-menu { position: absolute; top: 20px; right: 20px; z-index: 200; } #cycle-menu ul { padding: 0; margin: 0; } #cycle-menu li { float: left; margin: 0 2px; list-style: none; } #cycle-menu li a { height: 20px; width: 20px; display: block; background: #90070A; box-shadow: -1px -1px 2px rgba(255,255,225,0.6) inset; -moz-box-shadow: -1px -1px 2px rgba(255,255,225,0.6) inset; -webkit-box-shadow: -1px -1px 2px rgba(255,255,225,0.6) inset; } #cycle-menu li.activeSlide a { background: #FFF; border: 1px solid #90070A; height: 18px; width: 18px; } #home-2 { margin: 14px 0; } #home-2 .span-6 { width: 223px; border: 2px solid #4E4E50; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-right: 14px; } #home-2 .span-6.last { margin-right: 0; } #home-2 img { width: 100%; } #home-2 h2 { background: url("/template/images/fade-home-2.jpg") repeat-x; font-size: 18px; font-weight: 900; color: #FFF; margin: 0; padding: 6px 10px 2px; text-transform:uppercase; } #home-2 a { text-decoration: none; } #home-2 a:hover h2 span { color: #000; } #home-3 h2 { color: #697077; margin: 0 0 10px; font-size: 22px; font-weight: normal; background: none; padding: 0; border: none; border-radius: 0; } #home-3 p { color: #697077; line-height: 1.5; font-size: 13px; } #home-3 .button { text-transform: lowercase; font-size: 12px; } #home-3 .first { width: 466px; border: 2px solid #4E4E50; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position: relative; } #home-3 .first h2 { margin: 0; text-transform:uppercase; background: url("/template/images/black-50.png"); position: absolute; top: 0; left: 0; right: 0; } #home-3 .first h2 a { font-weight: 900; color: #FFF; text-decoration: none; text-shadow: 1px 1px 0 #000; font-size: 18px; display: block; padding: 10px; } #home-3 .first h2 a:hover { color: #98080B; } #home-3 .first img { width: 100%; } #home-4 { margin: 15px 0 20px; } #home-4 h2 { color: #FFF; font-weight: 900; background: url("/template/images/bg-primary.jpg") repeat-x center; border-color: #4E4E50; border-width: 3px; border-style: none solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 8px 10px; font-size: 20px; } .home #HomeFeaturedProducts { margin: 0; position: relative; background: url("/template/images/home-4-bgline.jpg") repeat-x 0 77px; } .home #feat-prev, .home #feat-next { width: 28px; height: 130px; position: absolute; top: 66px; background: url("/template/images/home-4-arrows.png") no-repeat; cursor: pointer; } .home #feat-prev { left: 0; background-position: left top; } .home #feat-next { right: 0; background-position: right top; } .home .feature-slider { margin: 0 auto; } #home-5 { padding: 0 0 20px; } #home-5 h2 { color: #697077; margin: 0 0 15px; font-size: 22px; font-weight: normal; background: #EFF0F2; padding: 5px 10px; } #home-5 p { color: #697077; line-height: 1.5; font-size: 13px; 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;}