/* Red Star Consumer Site Ver. 1.0 By: Matthew Restorff Email: matthew@bytestudios.com Created: 8.29.07 */ /* General -------------------------------------------------------------*/ * { margin: 0; padding: 0; } body { font: normal 12px "Times New Roman", Times, serif; background-color: #FFF9ED; } a { outline: none; } #container { width: 900px; margin: 0 auto; background: #fff url('/images/bg-main-yellow.jpg') repeat-y top left; } #container_no_rightside { width: 900px; margin: 0 auto; background-color: #fff; } ul, ul li { margin: 0; padding: 0; } /* Header ------------------------------------------------------------*/ #header { position: relative; background: #FFF9ED url('../images/title_logo.gif') no-repeat top left; height: 120px; width: 900px; } #search { position: absolute; left: 630px; top: 48px; width: 270px; color: #0055a6; font: normal 12px Arial, Helvetica, sans-serif; } #search h4 { font: normal 18px "Times New Roman", Times, serif; float: left; margin-right: 5px; } #search h4 strong { color: #f03c31; } #search form { padding-bottom: 50px; padding-top: 5px; } #search form input.search_box { width: 115px; border: 1px solid #0055a6; margin: 0 0px 0 0; } #search form input.search_btn { border: none; margin: 0; } a img { border: none;} /* Main Navigation -----------------------------------------------------------------------------*/ #navigation { float: left; width: 900px; background: transparent url('../images/bg_navigation.gif') no-repeat; list-style: none; } #navigation li { float: left; text-indent: -9999px; } #navigation li a { border: 0; text-decoration: none; display: block; background: transparent url('../images/bg_navigation.gif') no-repeat; } li#menu0 a { width: 75px; height: 40px; background-position: 0 0; } li#menu0 a:hover { background-position: 0 -40px; } li#menu1 a { width: 133px; height: 40px; background-position: -75px 0; } li#menu1 a:hover { background-position: -75px -40px; } li#menu2 a { width: 170px; height: 40px; background-position: -208px 0; } li#menu2 a:hover { background-position: -208px -40px; } li#menu3 a { width: 188px; height: 40px; background-position: -378px 0; } li#menu3 a:hover { background-position: -378px -40px; } li#menu4 a { width: 121px; height: 40px; background-position: -566px 0; } li#menu4 a:hover { background-position: -566px -40px; } li#menu5 a { width: 85px; height: 40px; background-position: -687px 0; } li#menu5 a:hover { background-position: -687px -40px; } li#menu6 a { width: 57px; height: 40px; background-position: -772px 0; } li#menu6 a:hover { background-position: -772px -40px; } li#menu7 a { width: 71px; height: 40px; background-position: -829px 0; } li#menu7 a:hover { background-position: -829px -40px; } /* Main Navigation (active tabs) -----------------------------------------------------------------------------*/ body#products-page #navigation li#menu0 a { background-position: 0 -40px; } body#best-recipes-page #navigation li#menu1 a { background-position: -75px -40px; } body#tips-page #navigation li#menu2 a { background-position: -208px -40px; } body#lessons-page #navigation li#menu3 a { background-position: -378px -40px; } body#science-page #navigation li#menu4 a { background-position: -566px -40px; } body#about-page #navigation li#menu5 a { background-position: -687px -40px; } body#links-page #navigation li#menu6 a { background-position: -772px -40px; } body#contact-page #navigation li#menu7 a { background-position: -829px -40px; } /* Second Nav -----------------------------------------------------------------------------*/ #sec_nav li { padding:0; margin: 0; } /* Left Content -----------------------------------------------------------------------------*/ #leftContent { width: 265px; float: left; background-color: #fff; height: 100%; margin:0;} #leftContent p.bracket { padding: 10px 0px 0px 45px; background: url('../images/bracket.gif') no-repeat top left; width: 220px; height: 62px; color: #C1312D; font: normal 20px "Times New Roman", Times, serif; } #leftContent p.br_2 { padding: 0px 20px 31px 20px; font: normal 17px "Times New Roman", Times, serif; color: #000000; line-height: 27px; } #leftContent div.left_bottom { background: url('../images/orange-bg.jpg') repeat top left; width: 225px; height: 180px; padding: 20px 20px; font: normal 18px "Times New Roman", Times, serif; color: #fff; line-height: 30px; } #leftContent div.left_bottom_new { background: url('/images/bucket_bottom_left.jpg') repeat top left; width: 225px; height: 180px; padding: 20px 20px; font: normal 18px "Times New Roman", Times, serif; color: #fff; line-height: 30px; position: relative; } #leftContent div.left_bottom_new a { position: absolute; height: 110px; width: 219px; background: none; bottom: 12px; right: 23px; } #leftContent div.left_bottom_new form { display: block; position: absolute; width: 108px; height: 19px; background-image: url(/images/zipcode_submit_bg.jpg); background-position: top left; background-repeat: no-repeat; margin: 0px; padding: 2px; bottom: 142px; right: 20px; } #leftContent div.left_bottom_new form input[type=text] { background: none; border: none; width: 81px; height: 16px; padding: 3px 0 0 0; margin: 0; float: left; } #leftContent div.left_bottom_new form input[type=submit] { background: none; border: none; width: 27px; height: 19px; padding: 0; margin: 0; float: left; } #leftContent div.left_top { height: 265px; } #leftContent ul li em { color: #cc3333; margin-left: 10px; font-weight: bold; } #leftNav { list-style: none; margin: 0 0 20px 0; padding: 0 0 0 20px; } #leftNav ul { list-style: none; margin:0; padding:0; } #leftNav li span { color: #cc3333; margin-right: 5px; font-size: 18px; } #leftNav li a { color: #000; text-decoration: none; font: normal 17px Times New Roman, Times, serif; } #leftNav li a:hover, #leftNav li a.active_link { color: #cc3333; } #leftNav li ul { margin: 0 0 3px 0; padding: 0 0 0 15px; list-style: none; } #leftNav li ul li { margin: 0; padding: 0;} #leftNav li ul li a { font: italic 12px Arial, Helvetica, sans-serif; color: #6e84c1; } #leftNav li ul li a:hover, #leftNav li ul li a.active { color: #06499b; text-decoration: none; font-weight: bold; } #leftContent form { padding-top: 20px; padding-left: 15px; } #leftContent form input { border: 1px solid #0055a6; margin-bottom: 10px;} #leftContent form input.store_find { margin-left: 20px; height: 20px; } #leftContent .search2 { border-top: 2px dotted #cc3333; border-bottom: 2px dotted #cc3333; margin: 10px 0 10px 25px; width:220px; padding: 10px 0px; } #leftContent .search2 span { color: #cc3333; font-size: 18px; } #leftContent .search2 h1 { font: normal 22px Times New Roman, Times, serif; color: #0055a6; display: inline;} #leftContent form { padding: 0; margin: 0; } #leftContent form input.btn { border: none; margin-left: 80px; } #leftContent form input.box { width: 215px; margin-top: 10px; } #leftContent .callfor { margin: 10px 25px; } #leftContent .callfor p { padding: 14px 20px 0px 0px; color: #0055a6;} #leftContent .callfor h1 { font: normal 18px Times New Roman, Times, serif; color: #0055a6; margin-bottom: 10px; } #leftContent .callfor a.pdf { color: #CC3333; background: url(/images/pdf.jpg) no-repeat bottom left; padding-left: 25px; padding-top: 10px; } /* Primary Content no right side -----------------------------------------------------------------------------*/ #primaryContentnorightside{ width: 624px; float: left; color: #0055a6; background-color: #fff; font: normal 12px Arial, Helvetica, sans-serif; line-height: 14px; color: #000; margin: 0;} html>body #primaryContentnorightside { width: 635px; float: left; color: #0055a6; background-color: #fff; font: normal 12px Arial, Helvetica, sans-serif; line-height: 14px; color: #000; margin: 0; } #primaryContentnorightside img { /*width: 635px; height: 150px !important; */ margin: 0; } html>body #primaryContentnorightside img { /*width: 635px; height: 100px; width: 371px; height: 163px; height: 150px !important;*/ } #primaryContentnorightside #rightbucket { float: left;} html>body #primaryContentnorightside #rightbucket { float: left;} #primaryContentnorightside p.featured_recipe { height: 27px; background-color: #0055a6; color: #fff; letter-spacing: 2px; padding: 13px 0px 0px 20px; margin-left: 0px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContentnorightside p.featured_recipe2 { width: 340px; height: 27px; background-color: #0055a6; color: #fff; padding: 13px 0px 0px 20px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContentnorightside a { color: #06499b; } #primaryContentnorightside a:visited { color: #6e84c1; } #primaryContentnorightside p { color: #000; font: normal 12px Arial, Helvetica, sans-serif; padding: 0 15px 0 0; line-height: 14px; margin-left: 5px;} #primaryContentnorightside table { margin-left: 5px; } #primaryContentnorightside p.recipe-head { font: bold italic 17px "Times New Roman", Times, serif; background-color: #0055a6; color: #fff; width: 360px; height: 27px; padding: 10px 0 0 20px; margin: 0; } html>body #primaryContentnorightside p.recipe-head { float: left; font: bold italic 17px "Times New Roman", Times, serif; background-color: #0055a6; color: #fff; width: 351px; height: 27px; padding: 10px 0 0 20px; margin: 0; } #primaryContentnorightside .primary_bottom { height: 200px; } #primaryContentnorightside .primary_bottom h2 { font: bold 18px "Times New Roman", Times, serif; color: #0055a6; padding: 10px 0px 10px 20px; } #primaryContentnorightside p.p_2 { margin-top: 10px; padding: 10px 15px 10px 20px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContentnorightside h1 { color: #cc3333; font: bold 18px Times New Roman, Times, serif; } #primaryContentnorightside h5 { letter-spacing: 2px; color: #0055a6; font: normal 11px Arial, Helvetica, sans-serif; margin-bottom: 3px; text-transform: uppercase; margin-left: 4px; font-weight: bold; } #primaryContentnorightside .feature { /*width: 359px;*/ /*margin-right: 10px; */ margin-bottom: 30px; border: 1px solid #0055a6; padding-left: 10px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContentnorightside .feature em { display:block; color: #0055a6; } #primaryContentnorightside .feature h3 { font: bold 16px Times New Roman, Times, serif; width: 160px; float: left; margin-bottom: 20px; margin-top: 5px; color: #0055a6; } #primaryContentnorightside .feature img { float: right; height: 200px; } #primaryContentnorightside .feature p { display: inline; font-size: 12px; } #primaryContentnorightside .feature a { color: #cc3333; text-decoration: none; } #primaryContentnorightside .feature a:hover { text-decoration: underline; } #primaryContentnorightside ul {margin-left: 25px;} #primaryContentnorightside ul.standard_list { margin-bottom: 10px; padding-left: 12px;} #primaryContentnorightside ul.standard_list li { color: #000; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContentnorightside ul li { padding-right: 10px; /*margin-left: 15px;*/ } #primaryContentnorightside .recipe { margin-left: 4px; } #primaryContentnorightside .recipe td { border-bottom: 1px solid #6e84c1; padding: 3px 0; } #primaryContentnorightside .recipe th { border-bottom: 1px solid #6e84c1; padding: 3px; } /*#primaryContentnorightside .recipe li { color: #000; font: normal 12px Arial, Helvetica, sans-serif; margin-bottom: 2px; }*/ #primaryContentnorightside ol { color: #000; margin-left: 30px; padding: 0px 10px 0px 0px; margin-bottom: 20px; } #primaryContentnorightside .faq_head { background: url('../images/faq_header.jpg') no-repeat top left; padding-top: 160px; } #primaryContentnorightside .faq_head p { font: normal 12px Arial, Helvetica, sans-serif; line-height: 18px; } #primaryContentnorightside .faq_head span { background: url('../images/carol_sig2.gif') no-repeat bottom center; padding-bottom: 20px; margin-right: 10px; float: right; } #primaryContentnorightside .dear_head { background: url('../images/dear_header.jpg') no-repeat top left; padding-top: 160px; } #primaryContentnorightside .dear_head h2 { color: #cc3333; font-size: 16px; } #primaryContentnorightside .dear_head p { padding: 10px; font: normal 12px Arial, Helvetica, sans-serif; line-height: 17px; } #primaryContentnorightside .dear_head p.letter { color: #000; margin-bottom: 50px; } #primaryContentnorightside .dear_head p.letter span { display: block; float: right; } #primaryContentnorightside .steps { list-style: none; } #primaryContentnorightside .steps li { display: inline;} /* FAQ Menu */ #primaryContentnorightside dl { width: 610px; } #primaryContentnorightside dl,dd { margin: 0; } #primaryContentnorightside dt { font: normal 12px Arial, Helvetica, sans-serif; margin: 9px 0px; } #primaryContentnorightside dt a { color: #000; text-decoration: none; } #primaryContentnorightside dd a { color: #000; text-decoration: none; } #primaryContentnorightside dt a:hover { text-decoration: underline; } #primaryContentnorightside dl span { color: #cc3333; font-weight: bold; } #primaryContentnorightside dl dd ul { list-style: none; padding: 0px 5px 10px 20px; font: normal 12px Arial, Helvetica, sans-serif; color: #0055A5;} /* Primary Content-----------------------------------------------------------------------------*/ #primaryContent { width: 360px; float: left; color: #0055a6; background-color: #fff; font: normal 12px Arial, Helvetica, sans-serif; line-height: 14px; color: #000; margin: 0; } html>body #primaryContent { width: 371px; float: left; color: #0055a6; background-color: #fff; font: normal 12px Arial, Helvetica, sans-serif; line-height: 14px; color: #000; margin: 0; } .body_copy { line-height: 14px; font: normal 12px Arial, Helvetica, sans-serif; color: #000; } #primaryContent img { margin: 0; } #primaryContent p.featured_recipe { margin: 0; height: 27px; background-color: #0055a6; color: #fff; letter-spacing: 2px; padding: 13px 0px 0px 20px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContent p.featured_recipe2 { width: 340px; height: 27px; background-color: #0055a6; color: #fff; padding: 13px 0px 0px 20px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContent a { color: #06499b; } #primaryContent a:visited { color: #6e84c1; } #primaryContent p { color: #000; font: normal 12px Arial, Helvetica, sans-serif; padding: 0 15px 0 0; line-height: 14px; margin-left: 5px;} #primaryContent p.recipe-head { font: bold italic 17px "Times New Roman", Times, serif; background-color: #0055a6; color: #fff; width: 367px; height: 27px; padding: 10px 0 0 20px; } #primaryContent .primary_bottom { height: 200px; } #primaryContent .primary_bottom h2 { font: bold 18px "Times New Roman", Times, serif; color: #0055a6; padding: 10px 0px 10px 20px; } #primaryContent p.p_2 { margin-top: 10px; padding: 10px 15px 10px 20px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContent h1 { color: #cc3333; font: bold 18px Times New Roman, Times, serif; } #primaryContent h5 { letter-spacing: 2px; color: #0055a6; font: normal 11px Arial, Helvetica, sans-serif; margin-bottom: 3px; text-transform: uppercase; font-weight: bold;} #primaryContent .feature { width: 359px; margin-right: 10px; margin-bottom: 30px; border: 1px solid #0055a6; padding-left: 10px; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContent .feature em { display:block; color: #0055a6; } #primaryContent .feature h3 { font: bold 16px Times New Roman, Times, serif; width: 160px; float: left; margin-bottom: 20px; margin-top: 5px; color: #0055a6; } #primaryContent .feature img { float: right; } #primaryContent .feature p { display: inline; font-size: 12px; } #primaryContent .feature a { color: #cc3333; text-decoration: none; } #primaryContent .feature a:hover { text-decoration: underline; } #primaryContent h5 { margin-left: 5px;} #primaryContent ul.standard_list { margin-bottom: 10px; padding-left: 12px;} #primaryContent ul.standard_list li { color: #000; font: normal 12px Arial, Helvetica, sans-serif; } #primaryContent ul li { padding-right: 10px; margin-left: 15px; } #primaryContent .recipe { list-style: none; margin-bottom: 30px; } #primaryContent .recipe li { color: #000; font: normal 12px Arial, Helvetica, sans-serif; margin-bottom: 2px; } #primaryContent ol { color: #000; margin-left: 30px; padding: 0px 10px 0px 0px; margin-bottom: 20px; } #primaryContent .faq_head { background: url('../images/faq_header.jpg') no-repeat top left; padding-top: 160px; } #primaryContent .faq_head p { font: normal 12px Arial, Helvetica, sans-serif; line-height: 18px; } #primaryContent .faq_head span { background: url('../images/carol_sig2.gif') no-repeat bottom center; padding-bottom: 20px; margin-right: 10px; float: right; } #primaryContent .dear_head { background: url('../images/dear_header.jpg') no-repeat top left; padding-top: 160px; } #primaryContent .dear_head h2 { color: #cc3333; font-size: 16px; } #primaryContent .dear_head p { padding: 10px; font: normal 12px Arial, Helvetica, sans-serif; line-height: 17px; } #primaryContent .dear_head p.letter { color: #000; margin-bottom: 50px; } #primaryContent .dear_head p.letter span { display: block; float: right; } #primaryContent .steps { list-style: none; } #primaryContent .steps li { display: inline;} /* FAQ Menu */ #primaryContent dl { width: 360px; } #primaryContent dl,dd { margin: 0; } #primaryContent dt { font: normal 12px Arial, Helvetica, sans-serif; margin: 9px 0px; } #primaryContent dt a { color: #000; text-decoration: none; } #primaryContent dd a { color: #000; text-decoration: none; } #primaryContent dt a:hover { text-decoration: underline; } #primaryContent dl span { color: #cc3333; font-weight: bold; } #primaryContent dl dd ul { list-style: none; padding: 0px 5px 10px 20px; font: normal 12px Arial, Helvetica, sans-serif; color: #0055A5;} /* Rating Stars */ .feature .star-rating, .feature .star-rating a:hover, .feature .star-rating a:active, .feature .star-rating a:focus, .feature .star-rating .current-rating{ background: url(star.gif) left -1000px repeat-x; } .feature .star-rating{ position:relative; width:55px; height:11px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .feature .star-rating li{ display: inline; } .feature .star-rating a, .feature .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:11px; line-height:25px; outline:none; overflow:hidden; border: none; } .feature .star-rating a:hover, .feature .star-rating a:active, .feature .star-rating a:focus{ background-position: left bottom; } .feature .star-rating a.one-star{ width:20%; z-index:6; } .feature .star-rating a.two-stars{ width:40%; z-index:5; } .feature .star-rating a.three-stars{ width:60%; z-index:4; } .feature .star-rating a.four-stars{ width:80%; z-index:3; } .feature .star-rating a.five-stars{ width:100%; z-index:2; } .feature .star-rating .current-rating{ z-index:1; background-position: left center; } /* smaller star */ .feature .small-star{ width:55px; height:11px; } .feature .small-star, .feature .small-star a:hover, .feature .small-star a:active, .feature .small-star a:focus, .feature .small-star .current-rating{ background-image: url(../images/star_small.gif); line-height: 11px; height: 11px; } /* Right Content -----------------------------------------------------------------------------*/ #rightContent { width: 264px; height: 100%; float: left; background: url('/images/yellow-bg.jpg') repeat top left; padding: 0; margin: 0; } .right_top_old { background: url('../images/love_to_bake.gif') no-repeat top left; width: 264px; height: 265px; text-indent: -9999px; } .right_top { background: url('../images/love_to_bake.jpg') no-repeat top left; width: 264px; height: 265px; text-indent: -9999px; } .right_bottom { background: url('../images/yellow-bg.jpg') repeat top left; width: 234px; height: 180px; color: #0055a6; font: normal 20px "Times New Roman", Times, serif; padding: 20px 10px 0px 20px; line-height: 30px;} .right_bottom a { color: #0055a6; font-size: 16px; } #rightContent .zip_box h2 { color: #fff; font: normal 18px Times New Roman, Times, serif; line-height: 20px; padding: 10px 10px 10px 20px;} #rightContent .zip_box { background: url('/images/red-bg.jpg') repeat top left; width: 264px;} #rightContent .zip_box form { padding: 0; margin: 0; } #rightContent .zip_box form input.btn { border: none; margin-left: 40px; margin-bottom: 15px; } #rightContent .zip_box form input.box { width: 140px; margin: 10px 0px 20px 60px; } /* Footer -----------------------------------------------------------------------------*/ #footer { background-color: #0055a5; width: 900px; height: 35px; text-align: center;} #footer ul { list-style: none; padding-left: 20px; padding-top: 11px; } #footer ul li { display: inline; font: normal 12px Arial, Helvetica, sans-serif; margin-right: 21px; } #footer ul li a { color: #fff; text-decoration: none; } #footer ul li a:hover { text-decoration: underline; }