/* Byte Studios - Classic Group Author: Matthew Restorff and Rebecca Kemnitz Date: 10.14.08 Email: matthew@bytestudios.com and rebecca@bytestudios.com */ * { margin: 0; padding: 0; } a, input[type="image"], input[type="submit"] { outline: none; } img { border: none; } /* stops layout shift on centered content when moving from page with vertical scrollbar and one without */ html, body { height: 100%; margin: 0 0 1px 0; padding: 0; } /* General */ body { background: #c6d2da url(/assets/img/bg.jpg) repeat-x fixed top left; font: normal 11px Arial, Helvetica, sans-serif; color: #000; } #container { margin: 0 auto; width: 959px; position: relative; } #header { width: 959px; height: 95px; left: 0; top: 0; } #logo_blue { background: url(/assets/img/logo_blue.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_blue { margin-left: 26px; } #logo_coffee { background: url(/assets/img/logo_brown.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_coffee { margin-left: 26px; } #logo_aqua { background: url(/assets/img/logo_aqua.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_aqua { margin-left: 26px; } #logo_food { background: url(/assets/img/logo_orange.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_food { margin-left: 26px; } #logo_green { background: url(/assets/img/logo_green.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_green { margin-left: 26px; } #logo_clean { background: url(/assets/img/logo_purple.png) no-repeat top left; display: block; text-indent: -9999px; width: 324px; height: 65px; margin-top: 5px; float: left; margin-left: 15px; } #header>#logo_clean { margin-left: 26px; } #flashcontent { width: 263px; position: absolute; left: 25px; top: 19px; background-color: transparent; z-index: 50; } #header ul { list-style: none; float: right; margin-right: 13px; margin-top: 63px; } #header>ul { margin-right: 25px; } #header ul li { float: left; padding: 0px 10px; border-left: 1px solid #aeb7b5; height: 25px; padding-top: 7px; } #header ul li a { color: #000; text-decoration: none; font-size: 12px; font-weight: bold; } #header ul.blue li a.active, #header ul.blue li a:hover { color: #0067c6; } #header ul.coffee li a.active, #header ul.coffee li a:hover { color: #806841; } #header ul.green li a.active, #header ul.green li a:hover { color: #136801; } #header ul.food li a.active, #header ul.food li a:hover { color: #ff5c00; } #header ul.aqua li a.active, #header ul.aqua li a:hover { color: #41b2ba; } #header ul.clean li a.active, #header ul.clean li a:hover { color: #6a1e84; } #main_nav { position: absolute; z-index: 150; top: 226px; } #main_nav_bot { position: absolute; float: left; clear: both; height: 15px; width: 909px; z-index: 400; top: 249px; } #header { position: absolute; z-index: 300; } #header ul { position: relative; } #center-wrap { background: url(/assets/img/wrap-bg.gif) repeat-y top left; width: 919px; min-height: 300px; float: left; padding: 0 25px; } #center-wrap .bluegrey { color: #6e7a72; font-size: 13px; font-weight: bold; } #navigate { float: left; clear: none; margin: 15px 33px 0 0; } #center-wrap #productslist_links { float: left; width: 171px; list-style: none; } #center-wrap>#productslist_links { width: 171px; } #center-wrap #productslist_links li { border-bottom: 1px solid white; } .category { float:left; width: 153px; color: white; border-bottom: 2px solid white; padding: 4px 9px; background: #0569c6 url(/assets/img/grd_blue.png) repeat-x; } #center-wrap #productslist_links li ul li { list-style: none; border-bottom: 2px solid white; padding:3px 9px; background-color: #c4d8f8; clear: both; } #center-wrap #productslist_links li ul>li { width: 153px; } #center-wrap #productslist_links li ul li.active { background-color: #acb8c5; } #center-wrap #productslist_links li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links li ul li a { text-decoration: none; font-weight: bold; color: #2a2724; } #center-wrap #productslist_links li ul li a:hover { text-decoration: underline; } #center-wrap #productslist_links.coffee li .category { background: #493a23 url(/assets/img/grd_brown.jpg) repeat-x; } #center-wrap #productslist_links.coffee li ul li { background-color: #e0d3c5; } #center-wrap #productslist_links.coffee li ul li.active { background-color: #e0991e; } #center-wrap #productslist_links.coffee li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links.coffee li ul li a { color: #453823; } #center-wrap #productslist_links.green li .category { background: #176a05 url(/assets/img/grd_green.png) repeat-x; } #center-wrap #productslist_links.green li ul li { background-color: #aed4a1; } #center-wrap #productslist_links.green li ul li.active { background-color: #df991e; } #center-wrap #productslist_links.green li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links.green li ul li a { color: #2a2724; } #center-wrap #productslist_links.clean li .category { background: #6d1f87 url(/assets/img/grd_clean.png) repeat-x; } #center-wrap #productslist_links.clean li ul li { background-color: #d1b3db; } #center-wrap #productslist_links.clean li ul li.active { background-color: #e15dff; } #center-wrap #productslist_links.clean li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links.clean li ul li a { color: #2a2724; } #center-wrap #productslist_links.aqua li .category { background: #44b3bb url(/assets/img/grd_aqua.png) repeat-x; } #center-wrap #productslist_links.aqua li ul li { background-color: #ddf2f4; } #center-wrap #productslist_links.aqua li ul li.active { background-color: #81d9e0; } #center-wrap #productslist_links.aqua li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links.aqua li ul li a { color: #2a2724; } #center-wrap #productslist_links.food li .category { background: #ff5f04 url(/assets/img/grd_food.png) repeat-x; } #center-wrap #productslist_links.food li ul li { background-color: #e0d3c5; } #center-wrap #productslist_links.food li ul li.active { background-color: #e0b080; } #center-wrap #productslist_links.food li ul li.active a { color: white; font-weight: normal; } #center-wrap #productslist_links.food li ul li a { color: #2a2724; } #products_section { float: left; border-top: 1px solid black; width: 703px; clear: both; padding-top: 15px; } #product_details { float:left; clear:right; margin-bottom: -13px; width: 720px; } #center-wrap #product_details { width: 710px; } #center_content { float:left; width: 395px; clear:left; font-size: 13px; line-height: 21px; margin-bottom: 13px; } .headline { color: #2a2724; font-weight: bold; font-size: 16px; line-height: 26px; } #center_content a { font-weight: bold; text-decoration:none; color:#e0991e; } #center_content.coffee { color:#453823; } #center_content.green { color:#136801; } #center_content.aqua { color: #41b2ba; } #center_content.clean { color: #6a1e84; } #center_content.coffee a { color:#e0991e; } #center_content .product_coffee { color: #e2a02d; font-weight: bold; } #center_content .coffee_green { color: #136801; font-weight: bold; } /* cms total site editor styles */ #center_content .subhead { font-size: 14px; } #center_content .tiny_text { font-size: 10px; } #center_content .orange { color: #e0991e; } #center_content .orange a { color: #e0991e; } #center_content a .orange { color: #e0991e; } #center_content .green { color: #136801; } #center_content .green a { color: #136801; } #center_content a .green { color: #136801; } #center_content .almost_black { color: #2a2724; } #center_content .almost_black a { color: #2a2724; } #center_content a .almost_black { color: #2a2724; } #center_content .purple { color: #6A1E84; } #center_content .purple a { color: #6A1E84; } #center_content a .purple { color: #6A1E84; } #center_content .tangerine { color: #FF5C00; } #center_content .tangerine a { color: #FF5C00; } #center_content a .tangerine { color: #FF5C00; } #center_content .aqua { color: #41B2BA; } #center_content .aqua a { color: #41B2BA; } #center_content a .aqua { color: #41B2BA; } #center_content .blue { color: #0067C6; } #center_content a .blue { color: #0067C6; } #center_content .blue a { color: #0067C6; } #center_content .brown { color: #453823; } #center_content .brown a { color: #453823; } #center_content a .brown { color: #453823; } #product_listing { border-top: 1px solid #2a2724; float: left; clear: both; width: 500px; padding-top: 18px; } #product_details>#product_listing { width: 703px; } #about>#product_listing { width: 703px; } #about { float: left; clear: both; width: 703px; font-size: 13px; line-height: 21px; margin-top: -13px; } #product_listing .main_cat { float: left; background: #e6edf4 url(/assets/img/bk_maincat.jpg) no-repeat; width: 284px; height: 90px; margin: 0 60px 20px 0 } #product_listing .main_cat img { border: 2px solid #c4d8f8; position: absolute; } #product_listing .main_cat a { position: relative; top: 33px; margin-left: 100px; color: #0067c6 } #product_listing .sub_cat { float: left; width: 175px; height: 100px; margin: 0 60px 20px 0; overflow: hidden; padding:20px 0 0 90px; font-size: 11px; line-height: 17px; color: #2e332f; } #product_listing .sub_cat a { color: #0067c6; } #your_order { float: left; width: 702px; border-top: 1px solid #2a2724; border-bottom: 1px solid #2a2724; margin: 9px 0 13px 0; padding: 3px 8px 8px 3px; color: #2a2724; } #your_order a { color: #0067c6; } #online_order_form { float: left; border: 1px solid #b6b6b4; width: 702px; } #online_order_form .header { background-color: #e9eae4; width: 702px; display: block; font-weight: bold; line-height: 37px; font-size: 11px; } #online_order_form .product { margin: 0 12px; width: 678px; border-top: 1px solid #b6b6b4; } #online_order_form .product .image { float: left; clear: none; width: 192px; } #online_order_form .product .image img { margin: 6px; } #online_order_form .product .description { float: left; clear: none; width: 222px; font-size: 11px; line-height: 17px; margin-top: 35px; } #online_order_form .product .manufacturer { float: left; clear: none; width: 187px; font-size: 11px; line-height: 17px; margin-top: 52px; } #online_order_form .product .quantity { float: left; clear: none; width: 40px; margin-top: 52px; } #main_nav { list-style: none; clear: both; float: left; width: 908px; height: 37px; border-top: 1px solid #aeb8b5; width: 908px; background-color: black; border-left: 1px solid #aeb8b5; font-size: 13px; line-height: 13px; font-weight: bold; } #main_nav li { display: block; float: left; height: 32px; background: #dcdfde url(/assets/img/main_nav_grd.png) repeat; border-right: 1px solid #aeb8b5; text-align: center; padding-top: 5px; overflow } #main_nav li a { color: #2e332f; text-decoration: none; } #main_nav.blue li a.active, #main_nav.blue li a:hover { color: #0067c6; } #main_nav.coffee li a.active, #main_nav.coffee li a:hover { color: #806841; } #main_nav.green li a.active, #main_nav.green li a:hover { color: #136801; } #main_nav.food li a.active, #main_nav.food li a:hover { color: #ff5c00; } #main_nav.aqua li a.active, #main_nav.aqua li a:hover { color: #41b2ba; } #main_nav.clean li a.active, #main_nav.clean li a:hover { color: #6a1e84; } #main_nav li:hover {cursor:pointer;} #main_nav.blue li:hover a { color: #0067c6; } #main_nav.coffee li:hover a { color: #806841; } #main_nav.green li:hover a { color: #136801; } #main_nav.food li:hover a { color: #ff5c00; } #main_nav.aqua li:hover a { color: #41b2ba; } #main_nav.clean li:hover a { color: #6a1e84; } #product_details #product_list { list-style: none; display: inline; line-height: 15px; } #product_details #product_list li strong { line-height: 19px; } #product_details #product_list li { display: inline; } #product_details #product_list.brands li img { margin: 0 40px 40px 0; } #product_details #product_list.coffee_machines { width: 714px;} #product_details #product_list.coffee_machines li { display: block; float: left; width: 285px; margin: 0 70px 20px 0; } #product_details #product_list.coffee_machines li img { float: left; margin-right: -10px; } #product_details #product_list.coffee_machines li a { color: #e0991e; } #product_details #center_callouts { float: left; width: 758px; clear: both; overflow: hidden; } #product_details #center_callouts img { margin-right: 53px; } .product_page_summary { float: left; width: 200px; clear: right; overflow: hidden; height: 150px; padding: 10px 0 0 100px; color: #3e3e3e; margin: 0 15px 15px 0; } .product_page_summary a { font-weight: bold; color: #e0991e; } #quick_find { float: left; clear: left; width: 171px; font-size: 14px; line-height: 26px; margin-top: 3px; } #breadcrumb_links { float: left; width: 395px; margin: 10px 0 4px 0; font-weight: bold; text-transform: lowercase; font-size: 12px; position: relative; z-index: 300; } #breadcrumb_links.blue { color: #0062c8; } #breadcrumb_links.coffee { color: #e0991e; } #breadcrumb_links.aqua { color: #80ccd1; } #breadcrumb_links.food { color: #ff5c00; } #breadcrumb_links.green { color: #e0991e; } #breadcrumb_links.clean { color: #6a1e84; } #logo.blue { background: url(/assets/img/logo_blue.png) no-repeat top left; } #breadcrumb_links li { list-style: none; display: inline; } #breadcrumb_links li a { text-decoration: none; color: #2a2724; font-weight: normal; } #breadcrumb_links li a:hover { text-decoration: underline; } #right_bucketwrap { float: left; margin-top: 21px; margin-left: 26px; width: 284px; } #product_details>#right_bucketwrap { margin-top: 6px; width: 284px; } #right_bucketwrap .product_callout { margin-bottom: 23px; } #contact { float: left; clear: both; height: 72px; width: 284px; background: #dde1e0 url(/assets/img/contact_bg.png) repeat-x; font-size: 13px; text-align: center; line-height: 17px; margin-bottom: 23px; } #contact a { font-weight: bold; color: black; } #contact_2 { float: left; clear: both; height: 72px; width: 284px; background: #dde1e0 url(/assets/img/contact_bg.png) repeat-x; font-size: 13px; text-align: center; line-height: 17px; margin-bottom: 23px; } #contact_2 a { font-weight: bold; color: black; position: relative; top: 10px; } .bucket_lgcoffee { float:left; clear:both; background: #dde1e0 url(/assets/img/bucketlgcoffee_bg.png) repeat-x; width:284px; margin-bottom: 23px; } .bucket_lgcoffee .textpicarea { width:282px; border-left: 1px solid #9fb0a5; border-right: 1px solid #9fb0a5; text-align: center; float:left; clear:both; color: #6e7a72; font-size: 12px; line-height: 18px; } .bucket_lgcoffeeheadline { font-weight: bold; font-size: 14px; } .bucket_lgcoffee .textpicarea div { margin-top: 5px; line-height: 17px; } .bucket_lgcoffee .textpicarea div img { margin-bottom: 5px; } .bucket_lgcoffee .textpicarea div a { color: #2a2724; text-decoration: none; font-weight: bold; } .bucket_lgcoffee .textpicarea .right_col { float: right; margin-right: 12px; clear: both; width: 127px; } .bucket_lgcoffee .textpicarea .left_col { float: left; margin-left: 12px; clear: right; width: 127px; } #vitality { width: 604px; height: 224px; background: url(/assets/img/img-vitality.jpg) no-repeat top left; float: left; margin-top: 20px; } #vitality p { margin: 70px 70px 0 70px; line-height: 20px; } #vitality p a { color: #369029; text-decoration: none; font-weight: bold; } #coffee { float: left; width: 284px; height: 222px; overflow: hidden;} #center-wrap #coffee { margin: 20px 0 0 20px; } #right_bucketwrap #coffee { margin: 0 0 23px 0; clear: both; } #coffee img { width: 284px; height: 222px; top: 0; left: 0 } #bucket-wrap { width: 959px; float: left; color: #6e7a72; margin: 20px 0 22px 0; } #bucket-wrap>div>.content { min-height: 85px; } .bucket_grey { float: left; clear: right; background: #dfe3e1 url(/assets/img/buckbot_bg.png) repeat-x; width: 284px; margin-right: 25px; } .bucket_grey .topbev { float: left; clear: both; background: #dfe3e1 url(/assets/img/buckbot_topbev.png) no-repeat; width: 284px; height: 14px; } .bucket_grey .botbev { float: left; clear: both; background: #dfe3e1 url(/assets/img/buckbot_botbev.png) no-repeat; width: 284px; height: 15px; } .bucket_grey .content { float: left; clear: both; width: 282px; border-left: 1px solid #b0b9b5; border-right: 1px solid #b0b9b5; } .bucket_grey .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 14px; } /* .bucket_grey .content .textarea .callout { font-weight: bold; font-size: 14px; line-height: 17px; } */ .bucket_grey .content .textarea a { color: #47504a; } .bucket_grey .content .imagearea { float: right; margin-top: -11px; } .bucket_brown { float: left; clear: right; background: #56462c url(/assets/img/buckbot_bg_brown.png) repeat-x; width: 284px; margin-right: 25px; color: white; } .bucket_brown .topbev { float: left; clear: both; background: #806841 url(/assets/img/buckbot_topbev_brown.png) no-repeat; width: 284px; height: 14px; } .bucket_brown .botbev { float: left; clear: both; background: #56462c url(/assets/img/buckbot_botbev_brown.png) no-repeat; width: 284px; height: 15px; } .bucket_brown .content { float: left; clear: both; width: 282px; border-left: 1px solid #b0b9b5; border-right: 1px solid #b0b9b5; } .bucket_brown .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 14px; } /* .bucket_brown .content .textarea .callout { font-weight: bold; font-size: 14px; line-height: 17px; } */ .bucket_brown .content .textarea a { color: white; } .bucket_brown .content .imagearea { float: right; margin-top: -11px; } .bucket_green { float: left; clear: right; background: #adda9a url(/assets/img/buckbot_bg_g.png) repeat-x; width: 284px; margin-right: 25px; color: #6e7a72; } .bucket_green .topbev { float: left; clear: both; background: #806841 url(/assets/img/buckbot_topbev_g.png) no-repeat; width: 284px; height: 14px; } .bucket_green .botbev { float: left; clear: both; background: #56462c url(/assets/img/buckbot_botbev_g.png) no-repeat; width: 284px; height: 15px; } .bucket_green .content { float: left; clear: both; width: 282px; border-left: 1px solid #b0b9b5; border-right: 1px solid #b0b9b5; } .bucket_green .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 14px; } /* .bucket_green .content .textarea .callout { font-weight: bold; font-size: 14px; line-height: 17px; } */ .bucket_green .content .textarea a { color: #47504a; } .bucket_green .content .imagearea { float: right; margin-top: -11px; } #eco_wrap { float: left; clear: right; width: 291px; margin-right: 15px; } #eco_wrap #eco_callout { float:left; width:291px; position:relative; overflow:hidden; height:67px; border-right: 1px solid #b0b8b5; border-left: 1px solid #b0b8b5; background: #a9d995 url(/assets/img/bkt_ecogrd.png) repeat-x; color: #136801; font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; } #eco_wrap #eco_callout .fact { position: absolute; top: 210px; left: 17px; height: 67px; overflow: hidden; width: 255px; } #right_bucketwrap #eco_wrap { margin: 0 0 23px 0; clear: both; } .bktG { float: left; clear: right; width: 293px; margin-right: 15px; color: #6e7a72; } .bktG .content { background: #dde1e0 url(/assets/img/bktG_grd.png) repeat-x; height: 103px; width: 291px; clear: none; border-right: 1px solid #b0b9b5; border-left: 1px solid #b0b9b5; overflow: hidden; } .bktG .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 16px; } .bktG .content .textarea a, .bktG .content .textarea strong { font-weight: bold; color: #6e7a72; line-height: 20px; text-decoration: none; } .bktG .content .imagearea { float: right; width: 77px; text-align: right; } .bktG .content>.imagearea { width: 82px; } #right_bucketwrap .bktG { margin:0 0 23px 0; } .bktB { float: left; clear: right; width: 293px; margin-right: 15px; color: white; } .bktB .content { background: #dde1e0 url(/assets/img/bktB_grd.png) repeat-x; height: 103px; width: 291px; clear: none; border-right: 1px solid #b0b9b5; border-left: 1px solid #b0b9b5; overflow: hidden; } .bktB .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 16px; } .bktB .content .textarea a { font-weight: bold; color: white; line-height: 20px; text-decoration: none; } .bktB .content .textarea strong { line-height: 20px; } .bktB .content .imagearea { float: right; width: 77px; text-align: right; } .bktB .content>.imagearea { width: 82px; } #right_bucketwrap .bktB { margin:0 0 23px 0; } .bktGR { float: left; clear: right; width: 293px; margin-right: 15px; } .bktGR .content { background: #aad997 url(/assets/img/bktGR_grd.png) repeat-x; height: 103px; width: 291px; clear: none; border-right: 1px solid #b0b9b5; border-left: 1px solid #b0b9b5; overflow: hidden; } .bktGR .content .textarea { float: right; width: 194px; clear: none; margin-top: -2px; margin-left: 10px; font-size: 12px; margin-right: 5px; line-height: 16px; } .bktGR .content .textarea strong { line-height: 20px; } .bktGR .content .textarea a { font-weight: bold; color: #6e7a72; line-height: 20px; text-decoration: none; } .bktGR .content .imagearea { float: right; width: 77px; text-align: right; } .bktGR .content>.imagearea { width: 82px; } #right_bucketwrap .bktGR { margin:0 0 23px 0; } #bucket-wrap a { font-weight: bold; text-decoration: none; } #footer { width: 959px; float: left; background: url(/assets/img/footer-bg.gif) no-repeat top left; height: 37px; text-align: center; font-size: 13px; padding-top:3px; color:#888; margin-right: -3px; }