/* ERIC MEYER: RESET STYLES RELOADED ________________________________________________________________________*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
 /* FRAMEWORK ________________________________________________________________________*/ body { font-size: 62.5%; color: #353535; background: #FFF; line-height: 1; font-family: Arial, Helvetica, FreeSans, sans-serif; } #bkt { background: url(/sitefiles/18/2009/gfx/top-bar.png) 0 0 repeat-x; } #wrap { width: 960px; margin: 0 auto; padding: 0 0 20px; } #top { width: 960px; height: 160px; float: left; clear: both; position: relative; overflow: hidden; margin: 0 0 7px; } #logo { display: block; width: 448px; height: 59px; position: absolute; top: 32px; left: 5px; clear: both; text-indent: -9999px; overflow: hidden; background: url(/sitefiles/18/2009/gfx/logo.png) 0 0 no-repeat; } #top-content { width: 960px; float: left; clear: both; padding: 0 0 30px; } #col-wrap { width: 960px; float: left; clear: both; } #left-col { width: 160px; float: left; clear: left; } #main-col { float: left; width: 600px; padding: 0 20px; } #bkt .wide { /* #main-col.wide */ width: 780px; padding: 0; float: right; clear: right; } #right-col { width: 160px; float: right; clear: right; } /* GLOBAL SEARCH ________________________________________________________________________*/ #global-search { width: 205px; height: 24px; padding: 0; position: absolute; right: 0; bottom: 6px; clear: both; overflow: hidden; background: url(/sitefiles/18/2009/gfx/global-search.png) 0 0 no-repeat; } #global-search .text { width: 140px; height: 18px; padding: 6px 8px 0; background: none; border: 0; position: absolute; top: 0; left: 0; font-family: Arial, Helvetica, FreeSans, sans-serif; color: #353535; font-size: 1.2em; } #global-search .submit { width: 49px; height: 24px; opacity: 0; *filter: alpha(opacity=0); cursor: pointer; position: absolute; top: 0; right: 0; border: 0; } /* GLOBAL SEARCH ________________________________________________________________________*/ #search-intro-wrap { width: 600px; float: left; clear: both; } #search-intro-wrap p.msg { font-size: 1.2em; line-height: 1.5; padding: .5em 1em; margin: 0 0 1.5em; background: #F5F5F5; border-bottom: 1px solid #E5E5E5; } /* LOGIN ________________________________________________________________________*/ #login { width: 350px; height: 54px; position: absolute; right: 0; bottom: 65px; clear: both; overflow: hidden; background: url(/sitefiles/18/2009/gfx/let-me-in.png) 100% 100% no-repeat; } #bkt .online { background: none; } #login.online{ padding:30px 0px 0px 0px; height:24px; } #login .login {background: url(/sitefiles/18/2009/gfx/let-me-out.png) 100% 100% no-repeat; display:block; float:right; width: 124px; height:22px; text-decoration:none; line-height:22px; font-size:12px; color:#FFF; text-align:center;} #login label { font-size: 1.1em; font-weight: bold; text-transform: uppercase; float: left; clear: left; height: 22px; line-height: 22px; cursor: pointer; color: #FFF; padding: 0 10px 0 0; display: block; width: 82px; text-align: right; } #login .name, #login .pswd { width: 114px; height: 18px; padding: 4px 5px 0; border: 0; float: left; font-family: Arial, Helvetica, FreeSans, sans-serif; color: #353535; font-size: 1.2em; margin: 0 10px 10px 0; background: url(/sitefiles/18/2009/gfx/login-field.png) 0 0 no-repeat; } #login .pswd { clear: right; margin: 0 0 10px; } #login .submit { float: right; width: 124px; height: 22px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; border: 0; padding: 0; color: #fff; } /* COMMON ELEMENTS ________________________________________________________________________*/ .clear { clear: both; } strong { font-weight: bold; } em { font-style: italic; } /* MAIN MENU ________________________________________________________________________*/ #main-menu { display: block; width: 730px; height: 30px; float: left; clear: both; position: absolute; top: 130px; left: 0; } #main-menu li { display: block; float: left; width: 102px; height: 30px; padding: 0 3px 0 0; } #main-menu li a { display: block; float: left; width: 92px; height: 30px; line-height: 30px; padding: 0 5px; text-align: center; color: #1A1B1C; text-decoration: none; font-size: 1.4em; background: url(/sitefiles/18/2009/gfx/main-menu-item.png) 0 -30px no-repeat; } #main-menu li a:hover, #main-menu li.active a { background-position: 0 0; color: #0A233D; } /* PRODUCT MENU ________________________________________________________________________*/ #product-menu { width: 160px; float: left; clear: both; background: url(/sitefiles/18/2009/gfx/left-bar-box.png) 0 0 repeat-y; margin:0 0 20px; } #product-menu li, #product-menu li ul.sub { width: 160px; float: left; clear: both; line-height: 1.9; } #product-menu li.main-first { padding: 1.25em 0 0; background: url(/sitefiles/18/2009/gfx/left-bar-box.png) -160px 0 no-repeat; } #product-menu li.main-last { padding: 0 0 1.25em; background: url(/sitefiles/18/2009/gfx/left-bar-box.png) -320px 100% no-repeat; } #product-menu li a { display: block; width: 120px; padding: 0 20px; float: left; clear: both; color: #000; text-decoration: none; font-size: 1.4em; font-weight: bold; } #product-menu li li a { font-size: 1.2em; font-weight: normal; } #bkt #product-menu li a:hover, #product-menu li.active a { color: #2E5781; } #product-menu li.active li a { color: #000; } #product-menu ul.level1 { padding-left:10px; width:150px!important; } #product-menu ul.level1 li { width:150px; } #product-menu ul.level1 li a { background: url(/sitefiles/18/design/list-marker.jpg) 12px 12px no-repeat; width:110px!important; } #product-menu ul.level1 li.active a { color: #2E5781; } .creditHolders { width:160px; clear:both; text-align:center; } /* BREADCRUMB ________________________________________________________________________*/ ul.breadcromMenu { width:960px; height:14px; padding:0 0 5px 0; } ul.breadcromMenu li { float:left; } ul.breadcromMenu li a{ color:#000000; text-decoration:none; } ul.breadcromMenu li a:hover, ul.breadcromMenu li a.breadcromActive{ color:#2E5781; text-decoration:underline; } /* CART ________________________________________________________________________*/ #cart { width: 158px; padding: 0 1px; float: left; clear: both; background: url(/sitefiles/18/2009/gfx/right-bar-box.png) 0 0 repeat-y; color: #000; position: relative; overflow: hidden; } #cart h2 { width: 140px; height: 30px; line-height: 30px; padding: 0 10px; float: left; clear: both; color: #FFF; font-size: 1.2em; background: url(/sitefiles/18/2009/gfx/right-bar-box.png) -320px 0 no-repeat; position: relative; left: -1px; } #cart ul { width: 158px; padding: 0 1px 10px; background: url(/sitefiles/18/2009/gfx/right-bar-box.png) -160px 100% no-repeat; float: left; clear: both; position: relative; left: -1px; border-top: 1px solid #D9D9D9; margin: 1px 0 0; } #cart ul li { float: left; clear: both; padding: .75em 9px; width: 140px; border-bottom: 1px solid #D9D9D9; } #cart ul li.last { border-color: #FFF; } #cart ul li#cart-total, #cart ul li#cart-actions { border: 0; } #cart ul li p { font-size: 1.2em; line-height: 1.5; width: 140px; float: left; clear: both; position: relative; } #cart ul li p a { color: #000; text-decoration: none; } #cart ul li p a:hover { text-decoration: underline; } #cart ul li strong { font-weight: bold; } #cart ul li .price-delete .price { float: right; padding: 0 20px 0 0; } #cart ul li .price-delete .delete { display: block; width: 12px; height: 12px; position: absolute; right: 0; top: .25em; clear: both; overflow: hidden; text-indent: -9999px; background: url(/sitefiles/18/2009/gfx/remove-item-from-cart.png) 0 0 no-repeat; } #cart ul li#cart-total { font-size: 1.4em; color: #262626; padding: 1.25em 10px 1.5em; } #cart ul li#cart-total .label { float: left; clear: left; } #cart ul li#cart-total .price { float: right; clear: right; } #cart ul li#cart-actions { width: 148px; height: 25px; position: relative; background: url(/sitefiles/18/2009/gfx/cart-controls.png) 50% 0 no-repeat; padding: 0 5px; } #cart ul li#cart-actions a { display: block; height: 25px; line-height: 25px; text-align: center; text-decoration: none; } #cart ul li#cart-actions a:hover { font-weight: bold; letter-spacing: -.025em; } #cart ul li#cart-actions a:active { font-weight: bold; letter-spacing: -.025em; height: 24px; line-height: 24px; padding: 1px 0 0; text-indent: 1px; } #cart ul li#cart-actions .empty { width: 44px; float: left; clear: left; font-size: 1.1em; color: #464646; } #cart ul li#cart-actions .goto-counter { width: 103px; float: right; clear: right; font-size: 1.2em; color: #FFF; } /* FRONT BOXES ________________________________________________________________________*/ .front-boxes { width: 960px; float: left; clear: both; } .front-boxes li { display: block; float: left; padding: 0 30px 0 0; } .front-boxes li.last { padding: 0; } .front-boxes li a { display: block; float: left; } .front-boxes li img { float: left; } /* MAIN COLUMN TYPOGRAPHY ________________________________________________________________________*/ #main-col h1 { font-size: 1.8em; color: #000; padding: 0 0 .5em; border-bottom: 1px solid #E5E5E5; font-weight: normal; } /* PRODUCT LISTING ________________________________________________________________________*/ .product-list, .product-list .wrap { width: 600px; float: left; clear: both; } .product-list .wrap { background: url(/sitefiles/18/2009/gfx/product-list-seperators-y.png) 50% 0 repeat-y; border-top: 4px solid #FFF; border-bottom: 20px solid #FFF; } .product-list .wrap .product { float: left; width: 174px; padding: 0 14px; border-right: 1px solid #E5E5E5; height: 270px; position: relative; overflow: hidden; color: #585858; } #main-col .product-list .wrap .product p { margin:0; line-height:16px; } .product-list .wrap .first { padding: 0 14px 0 10px; } .product-list .wrap .third { border: 0; padding: 0 10px 0 14px; } .product-list .wrap .product h3 { font-size: 1.4em; padding: .9em 0; text-align: center; } .product-list .wrap .product h3 a { color: #353535; text-decoration: none; font-weight: bold; } .product-list .wrap .product h3 a:hover { text-decoration: underline; } .product-list .wrap .product a.img { display: block; width: 174px; clear: both; text-align: center; padding: 0 0 1.5em; } .product-list .wrap .product p.intro { font-size: 1.1em; line-height: 1.5; } .product-list .wrap .product p.price-read-more { width: 170px; height: 16px; line-height: 16px; position: absolute; bottom: 0; left: 4px; overflow: hidden; clear: both; padding: 0 10px 14px; border-bottom: 1px solid #E5E5E5; } .product-list .wrap .second p.price-read-more { width: 174px; } .product-list .wrap .product p.price-read-more strong { float: left; clear: left; font-weight: bold; font-size: 1.2em; } .product-list .wrap .product p.price-read-more a { display: block; width: 59px; height: 16px; float: right; clear: right; color: #FFF; font-size: 1.1em; text-align: center; text-decoration: none; background: url(/sitefiles/18/2009/gfx/view-item.png) 0 0 no-repeat; } .product-list .wrap .product p.price-read-more a:hover { font-weight: bold; letter-spacing: -.025em; } /* PRODUCT DETAILS ________________________________________________________________________*/ #product { width: 600px; float: left; clear: both; padding: 0 0 4px; border-bottom: 1px solid #E5E5E5; } #product .wrap { width: 600px; float: left; clear: both; border-top: 4px solid #FFF; color: #585858; } #product .has-image { background: url(/sitefiles/18/2009/gfx/vert-sep.png) 359px 0 repeat-y; } #product .wrap .text { width: 330px; float: left; clear: left; } #product .wrap .text p#desc { font-size: 1.2em; line-height: 2; margin: 0 0 1em; } #product .wrap .text p#price { font-size: 1.4em; font-weight: bold; margin: 0 0 2.5em; } #product .wrap .text ul, #product .wrap .text ul li { width: 330px; float: left; clear: both; } #product .wrap .text ul li { line-height: 2; } #product .wrap .text ul li label { padding: 0 10px 0 0; cursor: pointer; } #product .wrap .text ul li.qty { color: #113457; font-weight: bold; font-size: 1.2em; padding: 0 0 15px; } #product .wrap .text ul li.qty input { width: 2em; font-weight: bold; text-align: center; color: #113457; border: 1px solid #113457; font-size: 1em; } #product .wrap .text ul li.buy input { width: 100px; height: 30px; text-align: center; color: #FFF; font-weight: bold; font-size: 1.4em; cursor: pointer; padding: 0 0 4px; *padding: 0 0 2px; background: url(/sitefiles/18/2009/gfx/buy-item.png) 0 0 no-repeat; border: 0; } #product .wrap .text ul li.buy input:active { padding: 2px 0 4px; *padding: 0 0 1px; text-indent: 1px; } #product .wrap .img { width: 240px; height: 240px; float: right; clear: right; position: relative; overflow: hidden; } #product .wrap .img img { position: absolute; top: 50%; left: 50%; clear: both; } /* GENERIC TYPOGRAPHY ________________________________________________________________________*/ #main-col .generic-content h1, .generic-content h2, .generic-content h3, .generic-content h4, #main-col h2 { color: #1E1E1E; font-weight: bold; padding: 0 0 .5em; } #main-col .generic-content h1 { font-size: 2.4em; border: 0; } .generic-content h2, #main-col h2 { font-size: 1.6em; } .generic-content h3 { font-size: 1.4em; } .generic-content h4 { font-size: 1.2em; } .generic-content p, .generic-content ul, .generic-content ol, .generic-content dl, #main-col p { font-size: 1.2em; color: #1E1E1E; line-height: 1.833; margin: 0 0 1.833em; } .generic-content img { border: 2px solid #355D87; float: right; margin: .5em 0 1em 1.5em; } .generic-content a { color: #50B3D8; text-decoration: underline; } .generic-content a:hover { text-decoration: none; } .generic-content table { border-collapse: collapse; width: 100%; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin: .5em 0 1.833em; } .generic-content table th { color: #1C2F30; background: #ACC8E4; font-weight: bold; font-size: 1.2em; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; text-align: center; height: 2.4em; vertical-align: middle; } .generic-content table td { color: #263B3D; background: #D1E0F0; font-size: 1.2em; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; text-align: center; height: 2.4em; vertical-align: middle; } /* COUNTER + CHECKOUT ________________________________________________________________________*/ #counter { padding: 0 0 1em; } #counter, #counter table { width: 780px; float: left; clear: both; } #counter table { border-collapse: collapse; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #CCC; table-layout: fixed; } #counter table caption, #counter table thead { display: none; } #counter table td, #counter table th { vertical-align: top; } #counter table tbody td { height: 71px; border-bottom: 1px solid #D9D9D9; background: url(/sitefiles/18/2009/gfx/counter-line-x.png) 0 0 repeat-x; } #counter table tbody td.img { width: 71px; padding: 0 10px 0 0; } #counter table tbody td.img a { display: block; width: 71px; height: 71px; } #counter table tbody td.img a img { float: left; } #counter table tbody td.name-update { width: 460px; padding: 0 10px 0 0; } #counter table tbody td.name-update h3 { font-size: 1.6em; font-weight: bold; padding: .75em 0; } #counter table tbody td.name-update h3 a { color: #000; text-decoration: none; } #counter table tbody td.name-update h3 a:hover { text-decoration: underline; } #counter table tbody td.name-update .label-input { float: left; padding: 0 21px 0 0; line-height: 1.5; color: #000; font-size: 1.4em; margin: 0 15px 0 0; background: url(/sitefiles/18/2009/gfx/refresh.png) 100% 0 no-repeat; position: relative; } #counter table tbody td.name-update .label-input label { padding: 0 .5em 0 0; float: left; cursor: pointer; } #counter table tbody td.name-update .label-input input { border: 1px solid #2D5D8E; font-size: 1em; width: 2em; text-align: center; } #counter table tbody td.name-update .label-input input.update { width: 21px; height: 21px; border: 0; position: absolute; clear: both; top: 0; right: 0; opacity: 0; *filter: alpha(opacity=0); cursor: pointer; } #counter table tbody td.name-update p.per { color: #3B3B3B; font-size: 1.2em; line-height: 1.75; } #counter table tbody td.price { width: 128px; padding: 0 30px 0 0; vertical-align: middle; color: #575757; font-weight: bold; font-size: 2em; text-align: right; } #counter table tbody td.remove { width: 71px; } #counter table tbody td.remove a { padding: 0 0 0 22px; color: #FF2D30; font-size: 1.2em; text-decoration: none; background: url(/sitefiles/18/2009/gfx/remove-item-from-cart.png) 0 50% no-repeat; font-weight: bold; display: block; height: 71px; line-height: 71px; } #counter table tbody td.remove a:hover { text-decoration: underline; } #counter table tfoot th, #counter table tfoot td { background: #EFEFEF; color: #000; vertical-align: middle; text-align: right; font-size: 1.4em; font-weight: bold; padding-bottom: 1em; } #counter table tfoot th { padding-left: 480px; text-align: left; } #counter table tfoot td { padding-right: 101px; } #counter table tfoot tr.total th, #counter table tfoot tr.total td { font-size: 1.8em; height: 2.5em; padding-bottom: 1.5em; } #counter table tfoot tr.tax th, #counter table tfoot tr.tax td { padding-top: 1.5em; } #checkout { width: 780px; float: left; clear: both; padding: 0 0 50px; } #checkout h2 { margin: 0 0 1.5em; } #checkout fieldset { width: 235px; padding: 0 50px 0 0; float: left; } #checkout fieldset legend { color: #4C4C4C; font-weight: bold; font-size: 1.4em; padding: 0; } #checkout fieldset.last { width: 190px; padding: 0; } #checkout fieldset ul { padding: 2em 0 0; } #checkout fieldset ul, #checkout fieldset ul li { width: 235px; float: left; clear: both; } #checkout fieldset ul li { line-height: 2; padding: 0 0 .75em; } #checkout fieldset ul li label { font-size: 1.2em; color: #4C4C4C; cursor: pointer; float: left; clear: left; } #checkout fieldset ul li input { float: right; clear: right; padding: .25em 5px; } #checkout fieldset ul li input.text { width: 140px; border: 1px solid #AAA; } #checkout fieldset.last ul, #checkout fieldset.last ul li { width: 190px; } #checkout fieldset ul li.reverse { padding-left: 25px; position: relative; } #checkout fieldset ul li.reverse input { width: auto; padding: 0; margin: 0; float: none; clear: both; position: absolute; top: .4em; left: 0; } #checkout fieldset ul li.formcontrols { padding: 1em 0 0; } #checkout fieldset ul li.formcontrols input { width: 190px; height: 50px; text-align: center; color: #FFF; font-size: 2em; cursor: pointer; padding: 0 0 4px; *padding: 0 0 2px; background: url(/sitefiles/18/2009/gfx/check-out.png) 0 0 no-repeat; border: 0; letter-spacing: -.04em; } #checkout fieldset ul li.formcontrols input:active { padding: 2px 0 4px; *padding: 0 0 1px; text-indent: 1px; } .selectboxes li label { width:105px; clear:both; display:block; float:left; } #checkout fieldset ul li .error{ background: #ff8a8a; } #checkout fieldset ul li .correct{ background-color: #fff; }