/* 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:url(../../img/bg.png); } #Container { background:url(/template/img/BG_main.jpg) 50% 190px repeat-y; } 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: 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; } .box { background:#ededed; border:1px solid #ccc; margin-bottom:1em; } .box .inner { padding:15px; } /* == Links & Selection ===================================================== */ a, .Content a { color: #0B62C5; } a:hover, .Content a:hover, a:focus, .Content a:focus, .Left li a:hover, .Right li a:hover { color: #3e3e3e; } 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: 5px 16px; cursor: pointer; text-decoration: none; text-transform: capitalize; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15); color: #fff; font-weight:bold; font-size:15px; border: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-appearance: none; border: 2px groove #218DCB; font-weight:normal; background: #218DCB; background-image: linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -o-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -moz-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -webkit-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -ms-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,46,102)), color-stop(0.56, rgb(2,100,153)), color-stop(0.83, rgb(81,171,219)) ); /*background: #2190DB; background-image: linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -o-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -moz-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -webkit-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -ms-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(11,98,197)), color-stop(1, rgb(33,144,219)) );*/ } .button:hover, .Content a.button:hover, input[type=submit]:hover, input[type=button]:hover { background: #002e66; color: #fff; text-decoration: none; } .button.download { margin-bottom: 10px; } .AccountOrderStatusList li form { margin-bottom: 4px; } #ProductReviews .button { float: right; } #LoginButton { padding: 5px 16px !important; } .AddCartButton input.button { margin: -4px 0 0 10px; } .CheckoutButton { margin-bottom: 1.5em; } .ProceedToCheckout a.button { padding: 5px 16px; color: #fff; } .CheckoutButton a:hover {text-decoration:none!important; } .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 { margin-bottom: 10px; } #PrimaryMenu {} #WrapperOuter {} #Wrapper { background:#fff; text-align: left; padding-bottom:10px; box-shadow: 0px 0px 8px #3F3F3F; } #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; min-height:400px;} .Content.Wide { width: 682px; margin: 0; padding: 0 10px 0 0; min-height:400px;} .Content.Widest { width: 930px; margin: 0; padding: 0 10px; } .home .Content.Widest { width: 950px; margin: 0; padding: 0px; } /*.Content.Wide .Block { padding-right:10px; } .Content.Widest .Block { padding:0 10px; }*/ /*Sidebars*/ .Left, .Right { background: none; min-height: 0; } .Left h2, .Right h2 { width: auto; } .Left li, .Right li { border: none; } .Left { width: 248px; margin-right: 10px; background: url(/template/img/BG_sidecat.jpg) repeat-y; } .Right { width: 180px; margin: 0; } .Right a, .Left a { color: white; text-transform: uppercase; font-weight: bold; font-size: 10pt; text-shadow: 1px 1px 1px #6597AF; text-decoration: none; padding: 7px 7px 6px 20px !important; width: 222px !important;} .Right a:hover, .Left a:hover { color:#1D78E2 !important;} /* ============================================================================= Header -n- hdr ========================================================================== */ /* == TopMenu =============================================================== */ #TopMenuOuter {background:url(/template/img/BG_topbar.jpg) repeat-x; padding: 8px 0;} #TopMenu {} #TopMenu ul { float: right; } #TopMenu li a, #TopMenu li div { color: #000; border: none; font-size: 9pt; margin:0; padding: 0 10px;} #TopMenu li a:hover { color: #000; } #TopMenu p { margin:0; color:#000; font-size: 9pt;} /* == Header ================================================================ */ #HeaderOuter { background:url(/template/img/BG_header.jpg) repeat-x; padding:5px 0 35px; position:relative; z-index:60; } #Header { background: url(/template/img/BG_head.png) no-repeat;margin: 7px auto 0;} #header-info { float:right; width:500px; } #header-cart { float:right; width:200px; } #header-cart .inner { } #header-cart img.left { margin:0 10px 10px 0; } #header-cart .inner h3 { color:#3e3e3e; margin-bottom:3px; font-size:18px; } #header-cart .inner p { color:#8b8b8b; margin:0; font-weight:bold;} #header-cart #crt-price { color: #756470; text-decoration: none; } #header-cart #crt-price:hover { color: #756470; text-decoration: underline; } #header-phone { float:right; width:260px; } #header-phone .inner { } #header-phone img.left { margin:0 10px 0 0; } #header-phone .inner h3 { color:#3e3e3e; margin-bottom:0; font-size:28px; font-weight:400; line-height:1; } #header-phone .inner p { color:#8b8b8b; margin:0; font-weight:bold; font-size:9pt;} #headerPhone img {margin-top:4px;} /* == Logo ================================================================== */ #Logo { float: left; width: auto; } #Logo img { display: block; } /* == Search Form =========================================================== */ #SearchForm { width: auto; padding: 0; margin:15px 15px 0 0; } #SearchForm label { color: #222; float: left; font-weight: 400; margin: 7px 10px 0 0; } #SearchForm #search_query, #SearchForm input.button { float: left; } #SearchForm #search_query { border-color:#fff; margin-right: 0; font-size: 1em; height:16px; border-right:none; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; padding: 9px 10px; color:#696969; width:170px; margin-bottom: 3px;} #SearchForm input.button { background:#fff url(../../img/icon-search.png) center no-repeat; display:block; width:20px; height:20px; text-indent:-9999px; padding:18px; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; border:none;} #SearchForm p { clear: both; margin: 0; text-align: right; color:#fff; } #SearchForm a { color: #fff; font-weight:normal; font-size:9pt;} #SearchForm a strong {font-weight:normal;} #SearchForm a:hover { color: #fff; text-decoration:underline; } .QuickSearch { z-index: 9999; } .QuickSearchHover td{ background: #f4f4f4; } .QuickSearch a, .QuickSearch a:hover { color: #4D4C51; } /* == Primary Navigation ===================================================== */ /* Main Pages Menu change id to PrimaryMenu so as to not use bc's styling */ /* Note for proper styling of Side Category List placed in #PrimaryMenu the Panel must only contain the snippet and no html and be set to Classic not Flyout*/ #PrimaryMenuOuter { position: relative; z-index: 69; margin:-32px 0 0; float:left; } #PrimaryMenu { background: url(/template/img/BG_pagemenu.jpg) repeat-x; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } #PrimaryMenu > ul { float:right; } #PrimaryMenu > ul > li { background:url(/template/img/sep_pagemenu.png) left no-repeat; float: left; } #PrimaryMenu > ul > li:first-child {border-left: none;} #PrimaryMenu > ul > .last {border-right:none;} #PrimaryMenu li { margin-bottom: 0; } #PrimaryMenu > ul > li > a { display: block; padding: 16px 26px 15px; font-size: 15px; font-weight:700; text-decoration: none; color: #fff; text-shadow:1px 1px 1px #6597AF; } #PrimaryMenu > ul > .HasSubMenu > a { background: url(/template/img/arrow_down.png) right 18px no-repeat; padding-right: 56px; } #PrimaryMenu a { text-decoration: none; } #PrimaryMenu > ul > li > a span { display:block; } #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 { } #PrimaryMenu > ul > li > a:hover > .caret, #PrimaryMenu > ul > li.dropdown.open > a > .caret { opacity: 1; filter: alpha(opacity=100); } #PrimaryMenu > ul > li > a:hover { color: #1D78E2; text-shadow:1px 1px 0 rgba(255,255,255,0.45); } /* 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: url(/template/img/BG_flyout.jpg); -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.7); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.7); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } #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 15px; clear: both; font-weight: normal; color: #1D78E2; white-space: nowrap; text-transform:uppercase; font-weight: bold; font-size: 9pt; } #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: black; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);} /* End Navigation */ /* ============================================================================= Content -n- cnt ========================================================================== */ /* ============================================================================= Sidebar -n- sdb ========================================================================== */ .Left, .Right { font-size: 1em; } .Left h2, .Right h2 { color: white; text-transform: uppercase; font-size: 13pt; text-shadow: 1px 1px 1px #6597AF; background: url(/template/img/BG_sidetitle.jpg) no-repeat; padding: 7px 0 7px 20px; margin:0;} .Left .BlockContent, .Right .BlockContent { margin: 0; } .Left .Block { clear:both; } .Right .Block { padding-right:10px; } .Left #SideCategoryList li ul { border-radius: 0 !important; } .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: 195px; font-size: 1em; padding: 3px; margin: 2px 0 0; } #SideNewsletterBox .Textbox { padding:5px; color:#8b8b8b; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-shadow:1px 1px 1px #8b8b8b inset;border: none; margin-right: 10px;} #SideNewsletterBox .button { width: auto; height: auto; padding: 5px 23px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); border: 2px groove #218DCB; font-weight:normal; background: #218DCB; background-image: linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -o-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -moz-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -webkit-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -ms-linear-gradient(bottom, rgb(0,46,102) 0%, rgb(2,100,153) 56%, rgb(81,171,219) 83%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,46,102)), color-stop(0.56, rgb(2,100,153)), color-stop(0.83, rgb(81,171,219)) ); /*background-image: linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -o-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -moz-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -webkit-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -ms-linear-gradient(bottom, rgb(11,98,197) 0%, rgb(33,144,219) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(11,98,197)), color-stop(1, rgb(33,144,219)) );*/} #SideNewsletterBox input[type="submit"]:hover { background: #002e66;} #SideNewsletterBox {display:none;} #Footer #SideNewsletterBox {display:block;} #couponcode, #giftcertificatecode { padding: 5px; } /* SideCatPopOut To use this instead of the flyout set the Side Category List to classic in the admin area then simply add id="SideCatPopOut to .SideCategoryListClassic in SideCategoryList.html under panels. */ #SideCatPopOut { position: relative; /*z-index: 69;*/ } /* resets */ .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li ul { padding-left: 0; } .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li { padding: 0; } .Left #SideCategoryList #SideCatPopOut.SideCategoryListClassic li ul { border: none; } /* --/-- */ #SideCatPopOut > ul > li { position: relative; } #SideCatPopOut > ul > li > a { padding: 3px 0; position: relative; } #SideCatPopOut > ul > li > a .caret { display: inline-block; width: 0; height: 0; position: absolute; right: 8px; top: 6px; text-indent: -99999px; *text-indent: 0; vertical-align: top; border-top: 4px solid transparent; border-left: 4px solid #777; border-bottom: 4px solid transparent; opacity: 0.3; filter: alpha(opacity=30); content: "\2193"; } #SideCatPopOut > ul > li > a:hover > .caret, #SideCatPopOut > ul > li.dropdown.open > a > .caret { opacity: 1; filter: alpha(opacity=100); } /* popout styles */ #SideCatPopOut ul li ul { position: absolute; top: -5px; left: 252px !important; z-index: 1000; float: left; display: none; width: auto !important; padding: 4px 0 !important; margin: 0 !important; list-style: none; background: url(/template/img/BG_flyout.jpg) !important; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } #SideCatPopOut ul li ul li ul { left: 155px !important; } #SideCatPopOut > ul > li > ul > li { margin: 0px 3px; } #SideCatPopOut > ul > li:hover, #SideCatPopOut ul > .dropdown.open { *z-index: 1000; } #SideCatPopOut > ul > li > a:active, #SideCatPopOut .dropdown-toggle:active, #SideCatPopOut .open .dropdown-toggle { outline: 0; } /* Uncomment and remove js in scripts.js if you desire non touch friendly hover dropdown */ /*#SideCatPopOut > ul > li:hover > ul { display: block; }*/ #SideCatPopOut ul > .dropdown.open > .dropdown-menu { display: block; } #SideCatPopOut li li a { display: block; padding: 3px 15px; clear: both; font-weight: normal; text-decoration: none; color: #555555; width:auto !important; } #SideCatPopOut li li li a { padding-left: 25px; } #SideCatPopOut li li li li a { padding-left: 35px; } #SideCatPopOut li li li li li a { padding-left: 45px; } #SideCatPopOut li li li li li li a { padding-left: 55px; } #SideCatPopOut > ul > li > a { } #SideCategoryList { float:left; width: 264px; margin:0;} #SideCategoryList h2 { color:#fff; text-transform:uppercase; font-size:13pt;text-shadow: 1px 1px 1px #6597AF; margin:0; background: url(/template/img/BG_sidetitle.jpg) repeat-y;padding: 7px 0 7px 20px;} #SideCategoryList ul li { background: url(/template/img/BG_sidesep.jpg) top no-repeat; width:249px !important;} #SideCategoryList ul li a { color:#fff; text-transform:uppercase; font-weight:bold; font-size:10pt; text-shadow: 1px 1px 1px #6597AF; text-decoration:none; padding: 7px 7px 6px 20px !important; width:222px !important;} #SideCategoryList ul li a:hover {color: #1D78E2;} #SideCatPopOut { background: url(/template/img/BG_sidecat.jpg) repeat-y;} .sf-sub-indicator { background: url(/template/img/arrow_sidecat.png) right no-repeat !important; } #SideCategoryList ul li a:hover .sf-sub-indicator { background: url(/template/img/arrow_sidecat_hover.png) right no-repeat !important; } #SideCategoryList ul li ul li {background: none; width: auto !important; margin:0;} #SideCategoryList ul li ul li a {color: #1D78E2 !important; text-transform: uppercase; font-weight:bold; text-shadow:none; font-size:9pt; padding: 3px 0 3px 10px !important; width:150px !Important;} #SideCategoryList ul li ul li a:hover {background: none; color:#000 !important; text-decoration: none;} /* ============================================================================= Footer -n- ftr ========================================================================== */ #footer-top { background:#ac4722 url(../../img/bg-footertop.png) center repeat-y; padding:15px 0; } #FooterOuter { padding: 0;background: url(/template/img/BG_footerOuter.jpg) bottom repeat-x; } #Footer { font-size: 1em; background: #fff url(/template/img/BG_footerInner.png) no-repeat; width:950px; height:235px; box-shadow: 0px 3px 8px #3F3F3F;} #Footer .footerImages { float:left; padding:20px 0 0 17px;} #Footer .footerImages img {padding: 0 8px;} #Footer .footerImages a img {vertical-align:bottom; padding: 0 3px;} #Footer .footerMenu {margin: 0 0 0 20px; float:left; width: 350px;} #Footer .footerMenu ul {list-style:none; float:left;padding: 15px 35px 15px 0;} #Footer .footerMenu ul li {float:none; text-align:left; padding: 3px 0;} #Footer .footerMenu ul li a {border: none; padding:0; color:#fff; font-weight:bold;} #Footer .footerMenu ul li a:hover {text-decoration:underline;} #Footer .footerMenu img {position: relative; left: -80px;} #Footer .footerUSA { float:right; width:150px; margin:15px 20px 72px 0;} #Footer .footerUSA p { color:#fff; margin:0; font-size:10pt;} .footerCopyrightWrap { background: url(/template/img/BG_footerCopyright.jpg) repeat-x;position: relative;top: -2px;} .footerCopyright {width:950px; margin: 0 auto;text-align: center; color: white; padding: 12px 0 5px;} .footerCopyright a { color:#fff; } #FooterMenu { width: 950px; } #FooterMenu ul { text-align: left; list-style: none; margin: 0; } #FooterMenu ul li { float: none; display: inline; position: relative; padding: 3px 0;} #FooterMenu ul li a { padding: 0 12px; color: #fff; border: none; text-decoration:none; font-size:14px; font-weight:bold; text-shadow:1px 1px 1px rgba(0,0,0,0.15); } #FooterMenu ul li a:hover { color: #000; clear: both;text-align: right;} #FooterMenu ul ul { display: none;text-align: right; } #footer-phone { float: right; width: 250px; text-align: left; } #footer-phone h3 { color: #3e3e3e; margin-bottom: 0; font-size: 28px; font-weight: 400; line-height: 1; } #footer-phone img { margin:0 5px 20px 0; } #footer-phone p { color: #8b8b8b; margin: 0; font-weight: bold; font-size: 9pt; } #Footer #copyright { font-size: .85em; clear:both; text-align:right; color:#000; margin-bottom:0;} #Footer #design-by { font-size: .8em; text-align:right;color:#000;} /* ============================================================================= Miscelaneous -n- msc ========================================================================== */ .Breadcrumb { font-size: 1em; } .Breadcrumb li:first-child { padding-left: 0; } .CustomWish.Breadcrumb li.last a { background: none; } .FeedLink { display: none; } /* ============================================================================= 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; } #CategoryPagingTop, #CategoryPagingBottom { overflow: hidden; } .CategoryPagination { overflow: hidden; float: right; } .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: left; } .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: none; clear:both; } .SubCategoryList ul, .SubBrandList ul { margin-bottom: 0; padding-left: 0; } .SubCategoryList li { background: #3e3e3e; padding:7px; margin:5px; float:left; } .SubCategoryList li:last-child, .SubBrandList li:last-child { margin-bottom: 0; } .SubCategoryList li a {color:#fff; text-decoration:none;} .SubCategoryList li a:hover {color:#fff; text-decoration:none;} .SubCategoryList li:hover {background:#000;} #ModalContainer.QuickViewModal .ModalContent { background: #fff; } #SitemapContent .SitemapPages, #SitemapContent .SitemapCategories, #SitemapContent .SitemapBrands { float:left; } #SitemapContent .SitemapPages, #SitemapContent .SitemapCategories { margin-right:75px; } /* ============================================================================= Product Lists -n- pls ========================================================================== */ .ProductList li .ProductCompareButton { text-align: center; } .Content .ProductList li, .fastCartContent .ProductList li, .Content .FeaturedProducts .ProductList li { background: none; border: 1px solid transparent; text-align:center; padding: 4px; } .Content .FeaturedProducts .ProductList li { margin:6px 3px 6px 3px; } .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; } .Content .ProductList .ProductDetails { padding:5px 0; } .ProductList .ProductImage { border:none; box-shadow:1px 1px 5px #ccc; border-radius:5px; -mox-border-radius: 5px; -webkit-border-radius: 5px;} .ProductList .ProductImage img { display:block; margin:0 auto; } .ProductList strong, .ProductList strong a { color:#3f3f3f; font-weight:700; } .Content .FeaturedProducts .ProductList strong a { color:#3f3f3f; } .ProductList strong a:hover { color:#3f3f3f; } .ProductPrice, .ProductList em { color:#4DBEF6; font-size:16pt; } .ProductPriceRating strike.RetailPriceValue { font-size: 10pt; color: #8b8b8b; } /* ============================================================================= Product -n- prd ========================================================================== */ /* == Product Thumb ========================================================== */ #ProductDetails .ProductThumbWrap { float: left; margin-right:40px; } #ProductDetails .ProductThumb { float: none; height: auto!important; } #ProductDetails .ProductTinyImageList { } #ProductDetails .ProductTinyImageList li { border: none!important; width: 30px!important; height: 30px!important; } #ProductDetails .ProductTinyImageList li .TinyOuterDiv { border: none!important; } /* == Product Main ========================================================== */ #ProductDetails hr { display: none; } .AddThisButtonBox { width: auto!important; text-align: left!important; padding: 10px 0 0 0!important; } /* details grid */ .ProductDetailsGrid .Label, .productAttributeList .productAttributeLabel { width: auto!important; float: left; text-align: left; padding: 0!important; margin: 0 10px 0 0!important; } .ProductDetailsGrid .DetailRow { padding: 6px 0 0 0; margin-top: 0; } .productAttributeList .productAttributeRow { padding: 6px 0 0 0 !important; margin: 0!important; } .productAttributeList .productAttributeValue { display: inline; float: left;} .productAttributeList .required { color: red; position: absolute;left: -1em;} .ProductDetailsGrid .BulkDiscount { clear: both; padding-top: 15px; } /* product & search tabs */ #ProductTabs { float: left; } .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; } .TabNav li a { display: block; margin: 0; padding: 5px 6px 5px; border: none; top: 0; border: 1px solid #C9C9C9; color: #000; background: #E4E4E4; } .TabNav li a:hover { background: #D4D4D4; } .TabNav li.Active a { border-bottom: none; border-bottom: 1px solid transparent; background: #fff; padding: 5px 6px 5px; font-weight: normal; } #TabPanels { clear: both; margin-bottom: 1em; border: 1px solid #C9C9C9; padding: 10px; margin-top: 0; background: #fff; overflow: hidden; position: relative; z-index: 1; } .PinterestButtonContainer { float:right;} #SimilarProductsByCustomerViews .ProductList li .ProductImage img {max-width: 120px; max-height:120px;} #SimilarProductsByCustomerViews .ProductList li {width: 120px; } /* ============================================================================= Cart -n- crt ========================================================================== */ #CartHeader { overflow: hidden; } #CartHeader h2 { } #CartHeader span .button { margin-top: 7px; } .fastCartContent h2 { color: #3f3f3f; } .fastCartContent h3 { color: #3f3f3f; } .fastCartContent .fastCartTop a, .fastCartContent .ProductList .ProductDetails a { color: #3f3f3f; } .fastCartContent .ProductPrice, .fastCartContent .ProductList em { color: #4DBEF6; } .fastCartContent .fastCartTop a:hover {text-decoration: underline;} .fastCartContent .ProductList .ProductActionAdd a { text-decoration:none; color:#fff;} .fastCartSummaryBox { background-color: transparent; border:1px solid #ccc; } .fastCartSummaryBox .CheckoutButton a { color: #fff; text-decoration: none; } #fastCartContainer .ProductList li { height:auto !important; margin:0 20px;} #fastCartContainer .ProductList .ProductImage { width: 157px; height: 157px; display:block; } /* ============================================================================= 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 ========================================================================== */ #cycle { background:none; margin-bottom:45px; width:686px; float:right;} /* 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: 686px; display: block; border-radius: 6px; box-shadow: 1px 1px 5px dimGray;} .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; float:right;} * 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: none; position: relative; zoom: 1; height:344px; width:686px; float:right;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative; width:686px !important;} /* 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: auto; position: absolute; top:320px; right:20px; 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: 14px; height: 14px; display: block; background:url(../../img/slider-dot.png) no-repeat; cursor: pointer; text-indent: -999em;} .flex-control-nav li a:hover { background:url(../../img/slider-dot-active.png) no-repeat; } .flex-control-nav li a.active { background:url(../../img/slider-dot-active.png) no-repeat; cursor: default;} /* Elastislide Style */ .es-carousel-wrapper{ background:#fff; padding:10px 20px; position:relative; border-top:none; } #HomeFeaturedProducts h2 { font-size:18px; color:#3f3f3f; margin-bottom:15px; margin-left:20px;} #HomeFeaturedProducts h2 span { color:#4DBEF6; } #HomeFeaturedProducts .ProductList .Rating img {margin-bottom: 10px;} #HomeFeaturedProducts .ProductActionAdd { display:none;} #HomeFeaturedProducts h2 a { color: #45515A; text-transform: uppercase; font-size: 9pt; font-weight: bold; text-decoration: none; margin-right:20px; } #HomeFeaturedProducts h2 a img { position: relative; top: -2px; padding-left: 5px; } #HomeFeaturedProducts .ProductListContainer { margin: 0 auto; } .es-carousel-wrapper #featured-prev { display: block; height: 39px; width: 39px; background: url(/template/img/featured-prev.png) no-repeat; position: absolute; left: 1px; top: 90px; z-index: 9; cursor: pointer; } .es-carousel-wrapper #featured-next { display: block; height: 39px; width: 39px; background: url(/template/img/featured-next.png) no-repeat; position: absolute; right: 1px; top: 90px; z-index: 9; cursor: pointer; } .es-carousel{ overflow:hidden; background:none; } .es-carousel ul li{ height:100%; float:left; display:block; } .es-carousel ul li a{ display:block; } .es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%; } .es-nav span{ position:absolute; top:44%; left:-22px; background:url(../../img/featured-prev.png) no-repeat; width:47px; height:47px; margin-top:-13px; text-indent:-9000px; cursor:pointer; display:block !important; } .es-nav span.es-nav-next{ right:-22px; left:auto; background:url(../../img/featured-next.png) no-repeat; } .es-nav span:hover{}