/* *************************** Site - GBM --------------------------- StyleSheet Index $1 - Global Styles $2 - Website Structure Styles $3 - Header Styles $4 - Content Styles $5 - Sidebar Styles $6 - Footer Styles ***************************/ /* *************************** $1 GLOBAL Styles ***************************/ * { margin: 0; padding: 0; } a { color:#333; text-decoration:none; } a:hover { color:#333; text-decoration:underline; } img { border:0; } fieldset { border:none; } li { list-style:none; } .clear { clear:both; height:0; font-size:0; } .floatRight { float:right; } .floatLeft { float:left; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ /* *************************** $2 Website Structure Styles ***************************/ body { text-align:center; font: 75% Arial, Helvetica, sans-serif; } #container { width:1000px; margin:16px auto; text-align:left; } /* *************************** $3 Header Styles ***************************/ #header { height:120px; background:url(../images/layout/header.png) top right no-repeat; margin-bottom:20px; position: relative; } #header h1 { width:237px; height:68px; background:url(../images/layout/logo.png) no-repeat; } #header h1 span { display:none; } #header ul { width:1000px; height:45px; background:url(../images/nav/nav.png) repeat-x; position:absolute; left:0; bottom:0; } #header ul li { float:left; margin:0 15px; display:inline; font-size:18px; } #header ul li a { float:left; height:45px; padding-top:11px; height/**/:/**/ 34px; color:#fff; } #header ul li a:hover, #header ul li.selected a { text-decoration:none; color:#000; background:url(../images/nav/nav_hover.png) center bottom no-repeat; } #header_search { position:absolute; top:15px; right:5px; width: 330px; } #header_search label { color:#fff; font-size:22px; padding-top:3px; vertical-align:middle; } #header_search .input_field { width:200px; padding: 3px 2px ; border:0px; margin:0 6px; } #header_search input { vertical-align:middle; } #header_search .button { width:34px; height:24px;border:1px solid #fff; width/**/:/**/ 32px; height/**/:/**/ 22px; background:#086896; font-size:12px; color:#fff; cursor:pointer; font-weight:bold; } #header_search .button:hover { background:#1170ff; } #header_search span a { text-decoration:underline; color:#fff; margin-right: 10px; } #header_search span a:hover { text-decoration:none; } #header_search span { display:block; text-align:right; font-size:11px; padding-top:5px; } /* *************************** $4 Content Styles ***************************/ #content { width:100%; overflow:hidden; } #maincontent { width:788px; float:right; } #maincontent p.breadcrumbs { font-size: 10px; color: #000; margin-bottom: 8px; } #maincontent p.breadcrumbs.custom { border-bottom: 12px solid #3e6f86; padding-bottom: 8px; margin-bottom: 18px; } #maincontent p.breadcrumbs a { color: #999; text-decoration: none; } #maincontent h2 { font-size: 24px; color: #fffcfc; background: #3e6f86; padding: 12px 0; text-indent: 20px; margin-bottom: 15px; position: relative; } #maincontent h2 a.show-all { background: #eeeeef url('../images/buttons/show_all.gif') left no-repeat; width: 93px; height: 24px; position: absolute; right: 12px; top: 15px; text-indent: -5000px; } #maincontent h2 a.show-all:hover { background-position: right; color: #000; } #maincontent h2.no-margin { margin: 0; } #maincontent h3 { font-size: 18px; color: #069; margin-bottom: 15px; } #maincontent p { font-size: 14px; color: #666; margin-bottom: 15px; } #maincontent p a { color: #098ae5; text-decoration: underline; } #maincontent .indent-content { padding-left: 22px; margin-bottom: 10px; } #maincontent .simple-list { margin-bottom: 10px; } #maincontent .simple-list li { font-size: 14px; color: #666; background: url('../images/icons/bullet.gif') left no-repeat; padding-left: 22px; margin-bottom: 5px; } #maincontent .prodbrowse { float: right; width:250px; font-size: 11px; color: #868888; } #maincontent .actions { height: 38px; background: #dfe2e2; position: relative; clear: both; } #maincontent .actions.bottom { margin-bottom: 12px; } #maincontent .actions .filter { float:left; margin: 10px 0 0 15px;} #maincontent .actions .filter label { display: block; float: left; font-size: 14px; margin-right: 12px; padding-top: 2px; } #maincontent .actions .filter select { color: #666; font-size: 12px; } #maincontent .actions .page-number { float:left; margin: 12px 0 0 20px; font-size: 12px; font-weight: bold; color: #000; } #maincontent .actions .go-to-page { float:right; margin: 10px 15px 0 0; } #maincontent .actions .go-to-page label { display: block; float: left; margin-right: 12px; padding-top: 2px; font-size: 12px; font-weight: bold; } #maincontent .actions .go-to-page .input-text { padding: 2px; border: none; width: 20px; border-top: 1px solid #858585; border-right: 1px solid #858585; } #maincontent .actions .pages { float:right; margin: 12px 10px 0 0; width:182px; } #maincontent .actions .pages div { display: inline; } #maincontent .actions .pages a { font-size: 12px; font-weight: bold; } #maincontent .actions .pages a:hover { color: #369; } #maincontent .actions .pages td.first-item { width:75px; text-align:left; } #maincontent .actions .pages td.last-item { width:30px; text-align:right } #maincontent .actions .pages .first-item a { background: url('../images/icons/prev.gif') left no-repeat; padding-left: 16px; margin-right: 8px; } #maincontent .actions .pages .first-item a:hover { background: url('../images/icons/prev_hover.gif') left no-repeat; } #maincontent .actions .pages .last-item a { background: url('../images/icons/next.gif') right no-repeat; padding-right: 16px;margin-left: 10px; } #maincontent .actions .pages .last-item a:hover { background: url('../images/icons/next_hover.gif') right no-repeat; } #maincontent .products { padding-top: 25px; } #maincontent .products li { float: left; width: 131px; margin-right: 62px; height: 240px; } #maincontent .products li.last-row-item { margin-right: 0; } #maincontent .products li img { border: 6px solid #333; display: block; margin-bottom: 8px; } #maincontent .products li a.more-info { background: url('../images/buttons/more_info.gif') no-repeat; width: 131px; height: 27px; display: block; text-indent: -5000px; margin-bottom: 10px; } #maincontent .products li a.more-info:hover { background-position: right; } #maincontent .products li p { font-size: 12px; color: #666; margin: 0; } #maincontent .products li p strong { font-weight: bold; color: #020202; } #maincontent .products li p .product-name { font-size: 13px; } #maincontent .products li p a { text-decoration: none; color: #3e6f86; } #maincontent .column-left { width: 310px; float: left; } #maincontent .column-left .box { background: url('../images/layout/box.gif') no-repeat; width: 242px; background-color: #ededed; border: 1px solid #ccc; margin-bottom: 22px; padding: 15px 0 0 35px; } #maincontent .column-left .box h3 { font-size: 18px; color: #999; text-transform: uppercase; margin-bottom: 5px; } #maincontent .column-left .box h3 span { display: block; text-transform: none; font-size: 14px; line-height: 1.6; margin-bottom: 0px; font-weight: normal; } #maincontent .column-left .box p { font-size: 14px; margin-bottom: 10px; color: #000; } #maincontent .column-left .box p a { text-decoration: none; } #maincontent .column-left .box p a:hover { color: #000; } #maincontent .column-right { width: 430px; float: right; border-left: 1px solid #ccc; padding-left: 45px; margin-bottom: 50px; } #maincontent .column-right p { font-size: 12px; font-weight: bold; text-indent: 50px; margin-bottom: 15px; color: #000; } #maincontent .column-right .red { color: red; } #maincontent .column-right strong.error { height: 30px; padding-top: 10px; font-size: 14px; color: #fd0606; margin-left: 60px; display: block; padding-left: 40px; background: url('../images/icons/error.gif') left no-repeat; margin-bottom: 20px; } #maincontent .column-right fieldset label { width: 92px; text-align: right; font-size: 14px; color: #333; display: block; float: left; margin-right: 10px; padding-top: 2px; } #maincontent .column-right fieldset label span { color: red; } #maincontent .column-right fieldset label.custom { display: inline; float: none; } #maincontent .column-right fieldset li { margin-bottom: 10px; } #maincontent .column-right fieldset li.state { position: relative; height: 55px; } #maincontent .column-right fieldset li.state p { position: absolute; left: 50px; bottom: 0; font-size: 12px; font-weight: normal; margin-bottom: 0; } #maincontent .column-right fieldset li.last-item { padding-left: 105px; } #maincontent .column-right fieldset li.last-item input { vertical-align: middle ;} #maincontent .column-right fieldset .input-text { padding: 2px; width: 318px; border: 1px solid #ccc; } #maincontent .column-right fieldset select.error, #maincontent .column-right fieldset .input-text.error { border: 1px solid red; } #maincontent .column-right fieldset .input-text.zip { width: 157px; } #maincontent .column-right fieldset .input-text.m { width: 44px; margin-right: 2px; } #maincontent .column-right fieldset .input-text.l { width: 64px; } #maincontent .column-right fieldset select { margin-right: 42px; width: 80px; } #maincontent .column-right fieldset textarea { width: 320px; height: 135px; padding: 2px; border: 1px solid #ccc; margin-bottom: 2px; } #maincontent .column-right fieldset .input-button { font-size: 14px; font-weight: bold; color: #fff; background: #086896; padding: 3px 7px; text-transform: uppercase; border: none; margin-top: 15px; cursor: pointer; } #maincontent .column-right fieldset .input-button:hover { background: #1170ff ; } #maincontent h3#hot-deals { background: url('../images/headings/hot_deals.gif') no-repeat; width: 107px; height: 15px; text-indent: -5000px; clear: both; float: left; margin-right: 58px; margin-top: 4px; } #maincontent .sort label { margin-right: 5px; } #maincontent .sort select { width: 200px; } #maincontent .products { clear: both; width: 100%; border-collapse: collapse; margin-bottom: 15px; border-spacing: 0; } #maincontent .products thead tr th { background: #717475; font-size: 18px; color: #fff; padding: 10px 0; } #maincontent .products thead tr th.item-1, #maincontent .products tbody tr td.item-1 { padding-left: 20px; width: 460px; } #maincontent .products tbody tr td { padding: 20px 0; vertical-align: top; color: #666; } #maincontent .products tbody tr td a.product { display: block; float: left; border: 6px solid #666; margin-right: 22px; } #maincontent .products tbody tr td a.product:hover { border: 6px solid #1170ff; } #maincontent .products tbody tr td h4 a { font-size: 18px; text-transform: uppercase; display: block; float: left; margin-bottom: 8px; } #maincontent .products tbody tr td h4 a:hover { text-decoration: none; color: #1170ff; } #maincontent .products tbody tr td ul { height: 20px; float: left; } #maincontent .products tbody tr td ul li { display: block; float: left; width: 230px; font-size: 12px; height: auto; } #maincontent .products tbody tr td ul li.first-item { width: 115px; margin: 0; } #maincontent .products tbody tr td p { width: 354px; font-size: 14px; margin-bottom: 10px; float: left; } #maincontent .products tbody tr.odd { background: #f6f4f4; } #maincontent .products tbody tr.even { background: #dfe2e2; } #maincontent .products tbody tr td.item-image { padding-left: 20px; width:146px} #maincontent .products tbody tr td.item-2 { font-size: 18px; font-weight: bold; color: #666; } #maincontent .products tbody tr { } #top-content { background: #3e6f86; padding: 1px; margin-bottom: 10px; } #top-content img { display: block; float: left; margin-right: 45px; } #top-content p { font-size: 18px; color: #fff; padding-top: 13px; width: 365px; float: left; text-align: left;} #maincontent .search { background: #f4f3f3; height: 46px; border-bottom: 1px solid #ccc; position: relative; color: #333; } #maincontent .search p { position: absolute; font-size: 12px; font-weight: bold; top: 14px; left: 20px; } #maincontent .search p strong { color: #069; font-size: 16px; } #maincontent .search span { position: absolute; right: 20px; top: 14px; font-size: 12px; font-weight: bold; } #maincontent .new-search { height: 62px; background: #f4f3f3; color: #333; position: relative; } #maincontent .new-search p { font-size: 12px; font-weight: bold; position: absolute; left: 20px; top: 22px; } #maincontent .new-search .keywords { position: absolute; left: 180px; top: 18px; } #maincontent .new-search .keywords label, #maincontent .new-search .category label { display: block; float: left; margin-right: 6px; padding-top: 3px; font-size: 14px; } #maincontent .new-search .keywords .input-text { width: 182px; padding: 2px; border: 1px solid #ccc; } #maincontent .new-search .category { position: absolute; left: 454px; top: 18px; } #maincontent .new-search .category select { width: 160px; } #maincontent .new-search a { position: absolute; left: 690px; top: 16px; padding: 4px 7px; font-size: 14px; font-weight: bold; text-transform: uppercase; background: #086896; color: #fff; } #maincontent .actions.bg-white { background: #fff; } #maincontent .actions.bg-white .go-to-page input { border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; } #maincontent .search-results { border-collapse: collapse; width: 100%; margin-bottom: 15px; } #maincontent .search-results tr th { background: #717475; font-size: 18px; color: #fff; padding: 7px 0; } #maincontent .search-results tr th.item-1, #maincontent .search-results tr td.item-1 { padding-left: 16px; width: 80px; } #maincontent .search-results tr th.item-2, #maincontent .search-results tr td.item-2 { width: 570px; } #maincontent .search-results tr th.item-3, #maincontent .search-results tr td.item-3 { width: 105px; } #maincontent .search-results tr th span { display: block; float: left; } #maincontent .search-results tr th ul { width: 11px; float: left; margin-left: 6px; } #maincontent .search-results tr th ul li a { width: 13px; height: 11px; text-indent: -5000px; display: block; } #maincontent .search-results tr th ul li.up a { background: url(../images/icons/sortup.gif) left no-repeat; margin-bottom: 2px;} #maincontent .search-results tr th ul li.down a { background: url(../images/icons/sortdown.gif) left no-repeat; } #maincontent .search-results tr th ul li.up a:hover, #maincontent .search-results tr th ul li.down a:hover { background-position: right; } #maincontent .search-results tr td { padding: 15px 0; border-bottom: 1px solid #ccc; color: #666; vertical-align: top; } #maincontent .search-results tr td.item-2 a.product { display: block; float: left; border: 6px solid #333; margin-right: 15px; } #maincontent .search-results tr td.item-2 a.product:hover { border: 6px solid #1170ff; } #maincontent .search-results tr td.item-2 h4 a { display:block; margin-bottom: 6px; font-size: 18px; text-transform: uppercase; } #maincontent .search-results tr td.item-2 h4 a:hover { color: #1170ff; } #maincontent .search-results tr td.item-2 p { float: left; font-size: 12px; display: block; } #maincontent .search-results tr td.item-2 a.more-info { background: url('../images/buttons/more_info_small.gif') no-repeat; width: 84px; height: 18px; display: block; text-indent: -5000px; margin-left: 108px; margin-top: 32px; } #maincontent .search-results tr td.item-2 a.more-info:hover { background-position: right; } #maincontent .search-results tr.last-item td { border: none; } #maincontent .prod { background: none; margin: 0; padding: 0; color: #000; text-indent: 0; } #maincontent h2.prod {width:500px;} #maincontent p.item-nr { font-size: 12px; color: #666; margin-bottom: 16px; } #maincontent .col-left { width: 500px; float: left; margin-right: 20px; } #maincontent .col-left .product-img-large { margin-bottom: 6px; } #maincontent .col-left .product-img-large img { border: 6px solid #333; display: block; } #maincontent .col-left a.enlarge { font-size: 14px; color: #666; margin-left: 190px; margin-bottom: 20px; display: block; } #maincontent .col-left a.enlarge img { vertical-align: middle; margin-right: 6px; } #maincontent .col-left a.enlarge:hover { text-decoration: none; color: #1170ff; } #maincontent .col-left .images-list { margin-left: 19px; margin-bottom: 8px; } #maincontent .col-left .images-list li { display: inline; } #maincontent .col-left .images-list li a { display: block; float: left; width: 66px; height: 48px; margin-right: 8px; } #maincontent .col-left .images-list li.first-item a { width: 25px; height: 33px; background: url('../images/icons/arrowleft.gif') left no-repeat; padding-top: 8px; margin-right: 17px; text-indent: -5000px; } #maincontent .col-left .images-list li.last-item a { width: 25px; height: 33px; background: url('../images/icons/arrowright.gif') left no-repeat; padding-top: 8px; margin: 0 0 0 17px; text-indent: -5000px; } #maincontent .col-left .images-list li.first-item a:hover, #maincontent .col-left .images-list li.last-item a:hover { background-position: right; } #maincontent .col-left span { display: block; clear: both; font-size: 11px; color: #666; margin-left: 108px; } #maincontent .col-left p#picCaption {width:100%;text-align:center;margin:5px 0 15px 0; font-size:11px; } #maincontent .col-right { float: right; width: 250px; } #maincontent .col-right h4 { font-size: 14px; text-transform: uppercase; color: #868888; margin-bottom: 12px; } #maincontent .col-right p.market-price { font-size: 14px; font-weight: bold; color: #000; margin-bottom: 3px; } #maincontent .col-right p.market-price strong { font-weight: normal; color: #666; } #maincontent .col-right p.our-price { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 35px; } #maincontent .col-right p.our-price strong { font-weight: normal; color: #f03; } #maincontent .col-right ul { margin-bottom: 25px; } #maincontent .col-right ul li { color: #666; line-height: 1.8; } #maincontent .col-right ul li strong { color: #333; } #maincontent .col-right p { font-size: 12px; margin-bottom: 25px; } #maincontent .col-right a.download { display: block; padding-left: 30px; font-size: 14px; color: #000; background: url('../images/icons/arrowdownload.gif') no-repeat; margin-bottom:15px; } #maincontent .col-right a.download span { display: block; text-decoration: underline; } #maincontent .col-right a.download:hover { background: url('../images/icons/arrowdownload_hover.gif') no-repeat; text-decoration: none; } /* *************************** $5 Sidebar Styles ***************************/ #sidebar { width:187px; float:left; } #sidebar .category { margin-bottom: 20px; } #sidebar .category li a { height: 14px; display: block; background: url('../images/nav/category_a.gif') top repeat-x; padding: 6px 0 8px 0; text-indent: 17px; text-decoration: none; font-size: 14px; color: #3E6F86; border: 1px solid #ccc; margin-bottom: 3px; } /* SFB 6/28/10 per requested changes */ #sidebar .category li a.featuredCat { font-weight: bold; color: black; background: url("/images/nav/category_b.jpg")top repeat-x; min-height: 70px; font-size: 24px !important; text-align: center;} #sidebar .category li a.featuredCat:hover { background: #E94850 } #sidebar .category li a:hover, #sidebar .category li a.active { background: #3e6f86; color: #fff; } #sidebar #what-is-new a.view-all { display: block; float: right; background: #086896; text-transform: uppercase; color: #fff; font-size: 14px; font-weight: bold; padding: 5px 7px; } #sidebar #what-is-new a.view-all:hover { background: #1170ff; text-decoration: none; } #sidebar #what-is-new h3 { background: url('../images/headings/trading_partners.jpg') no-repeat; clear: both; text-indent: -5000px; border-top: 1px solid #086896; height: 30px; margin-bottom: 20px; } #sidebar #what-is-new ul { padding-bottom: 35px; border-bottom: 1px solid #086896; } #sidebar #what-is-new ul li a { font-size: 14px; color: #666; line-height: 1.7; } #sidebar #what-is-new ul li a:hover, #sidebar #what-is-new ul li a.active { color: #1170ff; } /* *************************** $6 Footer Styles ***************************/ #footer { width: 788px; float: right; background: url('../images/layout/footer.gif') no-repeat; height: 72px; position: relative; margin-top:20px} #footer .list { position: absolute; top: 18px; } #footer .list.one { left: 25px; } #footer .list.two { left: 158px; } #footer .list.three { left: 311px; } #footer .list.four { left: 467px; } #footer .list.five { left: 588px; } #footer .list li { display: inline; margin-right:60px} #footer .list li a { font-size: 12px; color: #666; line-height: 1.4; } #footer .list li a:hover { color: #1170ff; text-decoration: none; } #footer address { color: #666; font-size: 12px; position: absolute; bottom: 7px; right: 0; font-style: normal; } #footer p { position: absolute; left: 0; bottom: 7px; font-size: 12px; color: #666; } #footer p a { color: #666; } /* *************************** $7 Picture Slider Styles ***************************/ .verticalGallery2 { width:100%; margin-bottom:8px; margin-left:20px; overflow:hidden; } .verticalGallery2 .prevAct, .verticalGallery2 .nextAct, .verticalGallery2 .prev, .verticalGallery2 .next { display:block; float:left; width:25px; height:50px; background-position:left top; background-repeat:no-repeat; background-color:transparent; background-position: left center; text-decoration:none; } .verticalGallery2 .prevAct, .verticalGallery2 .prev { background-image:url(../images/icons/arrowleft.gif) } .verticalGallery2 .nextAct, .verticalGallery2 .next { background-image:url(../images/icons/arrowright.gif) } .verticalGallery2 a.nextAct:hover, .verticalGallery2 a.prevAct:hover { background-position: right center; text-decoration:none;} .verticalGallery2 ul li img {border: 1px solid #cccccc } .verticalGallery2 ul { list-style:none; } .verticalGallery2 ul li { display:inline; float:left; height:50px; margin-right:11px; width:64px; text-align:center; border:} .verticalGallery2 #current_thumbs { float: left; } .verticalGallery2 #thumb_holder { overflow:hidden !important; float: left; position: relative; margin: 0 16px 0 16px; }