/*
ABOUT:        hostesscakes.com/100
TEAM:         bernstein-rein interactive
RELEASE:      fall 2008
LAST UPDATED: 14 may 2009
LOCATION:     kansas city, missouri
*/

/****** ERIC MEYER RESET | learn more @ http://meyerweb.com */
html,body,div,span,applet,object,iframe,embed,object,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; vertical-align:top; font-family:Arial, "Lucida Grande", "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; font-size:100%; }

/* remember to define focus styles! */
:focus { outline:0; }
table { 
/* tables still need 'cellspacing="0"' in the markup */
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:; }
h1,h2,h3,h4,h5,h6,strong { font-weight:600; }
a,a:link,a:visited,a:hover { font-size:1em!important; text-decoration:underline; vertical-align:baseline; }
a:hover { text-decoration:none; }

/* end reset */

/****** PRESENTATIONAL LAYOUT ***/
#page { width:840px; margin:0 auto; position:relative; }
#header { width:100%; height:87px; background:#fff url(../images/ui/header_nav.gif) 23px 0 no-repeat; position:relative; top:-15px; }
#home #header { top:-15px; }
#nav { margin:6px 0 0 200px; width:590px; height:25px; position:relative; top:-40px; }
div#hero,div#features { position:relative; z-index:0; top:-65px; }
#home div#hero,#home div#features { top:-45px; }
img#hero,body#home #footer { position:relative; z-index:0; top:-45px; }
#new #hero { height:454px; }
div.content { margin-top:-45px; width:840px; height:350px; background-repeat:no-repeat!important; }
div.content.main { height:1400px; }
#column-1 { float:left; width:220px; margin:0 40px 0 85px; }
#column-2 { float:left; width:400px; }
body#opt-in-form #column-2 { margin-top:-40px; position:relative; z-index:4; }
body#opt-in-form div.opt-in-button { position:relative; top:-15px; }
#awards-page #column-1 { margin:-20px 0 0 60px; }
#awards-page #column-2 { margin:-20px 0 0 80px; }
.coupon-page #column-1 { position:relative; top:-25px; }

/****** FOOTER/BG IMAGES ***/
#cakes-info,#coupons-info,#products-info,#awards-info,#muffins-info { background-image:url(../images/ui/bg/generic_footer.gif); }
#coupons-info-main { background-image:url(../images/ui/bg/generic_main_footer.gif); }
#newproducts-info { background-image:url(../images/ui/bg/newproducts_body.jpg); }
#weight-info { background:url(../images/ui/bg/weight_body.jpg) 0 0; height:520px; margin-top:-80px; }
h1,h2,h3,h4,h5,h6,p,a,li,td,dt,dd,form input[type=text] { font-family:Arial, "Lucida Grande", "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; }
h1,h2,h3,h4,h5,h6,p,a,li,td,dt,dd,label { color:#40a0d2; font-size:.78em; line-height:1.54em; }
h4 { font-size:.9em; font-weight:600; padding:15px 0 0; }
p { margin-bottom:1em; }
p.disclaimer { padding-top:1em; font-size:11px; }
h2 { font-weight:bold; font-size:14px; margin-bottom:1em; }
.nutrition-content p { font-size:1.04em; }

/****** NAVIGATION ***/
h1 a#logo { display:block; width:230px; padding-top:150px; height:150px; background:url(../images/ui/h100_logo.png?d=22122009) 0 0 no-repeat; position:absolute; z-index:25; top:-6px; }
#home h1 a#logo { top:-6px; }
#header h2 { position:relative; z-index:3; top:45px; margin:15px 0 0 230px; width:410px; padding-top:40px; height:40px; background-position:0 -300px; background-image:url(../images/ui/sprites.gif?d=22122009); }
#nav li { list-style-type:none; float:left; margin-right:20px; }
#nav li a { background-position:-1100px -1100px; padding-top:15px; height:15px; background-image:url(../images/ui/sprites.gif); }
#nav li#new-prod a { background-position:0 -50px; width:91px; }
#nav li#products a { background-position:0 -100px; width:134px; }
#nav li#nutrition a { background-position:0 -150px; width:146px; }
#nav li#signup a { background-position:0 -200px; width:59px; }
#nav li#awards-and-press a { background-position:0 -250px; width:50px; }

/** hover & select states **/
#nav li#new-prod a:hover,body#new #nav li#new-prod a { background-position:-300px -50px; }
#nav li#products a:hover,body.products-page #nav li#products a { background-position:-300px -100px; }
#nav li#nutrition a:hover,body#nutrition-page #nav li#nutrition a { background-position:-300px -150px; }
#nav li#signup a:hover,body.coupon-page #nav li#signup a { background-position:-300px -200px; }
#nav li#awards-and-press a:hover,body#awards-page #nav li#awards-and-press a { background-position:-300px -250px; }

/****** FAHRNER IMAGE REPLACEMENT ***/
.fir,.img-replace { 
/****** FAHRNER IMAGE REPLACEMENT - core styles ***/
display:block; overflow:hidden; height:0!important; background-position:0 0; background-repeat:no-repeat; }
#page h3.fir { position:relative; z-index:2; width:550px; padding-top:35px; height:35px; background-image:url(../images/typography/content_headers.gif); }
#awards-page #page h3.fir { position:relative; top:-40px; left:145px; background-position:0 0; }
#cakes #page h3.fir { background-position:-50px -50px; }
#new #page h3.fir { padding-top:50px; height:50px; background-position:-65px -200px; }
.products-page #page h3.fir { padding-top:40px; height:40px; background-position:0 -250px; }
#nutrition-page #page h3.fir { top:-100px; background-position:0 -100px; margin-left:140px; }

/****** HOME PAGE: FEATURES ***/
div#features div { float:left; width:280px; height:238px; overflow:hidden; }
div#feature3 { background-image:url(../images/features/home_feature_3.jpg); background-repeat:no-repeat; text-align:center; }
div#feature3 div { margin-top:155px; overflow:hidden; }

/****** TELL A FRIEND ***/
label { display:block; font-weight:600; margin-top:10px; }
.inline { display:inline; }
form input[type=text],form textarea { border:1px solid #40a0d2; padding:4px 3px 3px; font-size:.8em!important; background-color:#fff; font-weight:600; }
input.text-field { border:1px solid #40a0d2; padding:4px 3px 3px; font-size:.8em!important; background-color:#fff; font-weight:600; }
form#tell-a-friend input[type=text] { border:1px solid #40a0d2; line-height:1.2em; width:130px; font-size:10px; padding:0 2px; }
form#tell-a-friend input[type=submit] { background-color:#29aaf7; border:1px solid #29aaf7; color:#fff; font-size:10px; }

/****** COUPON FORM ***/
form#coupon-form input[type=text] { width:230px; font-size:10px; }
form#coupon-form input[type=submit] { background-color:#29aaf7; border:1px solid #29aaf7; color:#fff; font-size:10px; }

/****** WATCHING YOUR WEIGHT ***/
div.product-box { width:265px; height:210px; float:left; margin-bottom:20px; }
div.product-info { width:440px; line-height:1.25em; height:210px; margin-left:10px; float:left; margin-bottom:20px; }
table#facts { border:1px solid #c1c1c1; }
table#facts th,table#facts td { height:25px; vertical-align:middle; font-size:.75em; padding:5px 4px; }
table#facts td { border-bottom:1px solid #c9c9c9; line-height:1em; vertical-align:middle; }
table#facts td,table#facts td strong a { color:#0072b9; text-decoration:none; }
table#facts td strong a:hover { text-decoration:underline; }
table#facts tr.last td { border:0 none; }
table#facts th { color:#fff; font-weight:600; background:url(../images/gradient_1.gif) repeat-x; }
table#facts tr td { background:url(../images/gradient_3.gif) repeat-x; }
table#facts tr.row-odd td { background:url(../images/gradient_2.gif) repeat-x; }
table#facts { width:400px; margin:0 auto; }

/****** AWARDS ***/
#awards-info p { padding:30px 0 0; }

/****** PRODUCTS: CUPCAKES ***/
#all #copy,#cakes #copy { float:left; width:450px; padding-left:60px; margin-right:30px; }
#cakes #copy p { line-height:1.3em; }
#all #sidebar,#cakes #sidebar { width:260px; float:left; }
div.cakes-tell-a-friend { background-image:url(../images/ui/nutrition/cakes_side5.jpg); background-repeat:no-repeat; width:260px; height:118px; text-align:center; }
div.cakes-tell-a-friend div { padding-top:65px; overflow:hidden; }

/****** PRODUCTS: MUFFINS ***/
#new #copy,#muffins #copy { float:left; width:450px; padding:0 0 0 60px; margin:0 30px 0 0; }
#new #copy p,#muffins #copy p { font-size:.735em; line-height:1.25em; }
#new #sidebar,#muffins #sidebar { width:260px; float:left; }
div.muffins-tell-a-friend { background-image:url(../images/ui/nutrition/muffins_side5.jpg); background-repeat:no-repeat; width:260px; height:118px; text-align:center; }
div.muffins-tell-a-friend div { padding-top:65px; overflow:hidden; }

/****** NUTRITION FACTS (POP-UPS) ***/
#nut-chocolate { background-image:url(../images/product/small/chocolate.jpg); }
#nut-carrot { background-image:url(../images/product/small/carrot.jpg); }
#nut-cinnamon { background-image:url(../images/product/small/cinnamon.jpg); }
#nut-twinkie { background-image:url(../images/product/small/twinkie.jpg); }
#nut-strawberry { background-image:url(../images/product/small/strawberry.jpg); }
#nut-lemon { background-image:url(../images/product/small/lemon.jpg); }
.nutrition-content { background-repeat:no-repeat; background-position:10px 10px; color:#035DA9; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; display:none; position:absolute; z-index:1002; top:22%; left:28%; width:600px; height:280px; padding:0; border:1px solid #035DA9; background-color:#fff; overflow:auto; }
.nutrition-fade { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:1001; -moz-opacity:0.8; opacity:.80; filter:alpha(opacity=80); }
.nutrition-content img.cake { float:left; margin:10px 0 0 10px; }
.nutrition-content h2 { margin:10px 0 0 100px; }
.nutrition-content p { margin:0 0 0 100px; }
.nutrition-content p.close { position:absolute; top:0; right:0; padding:5px 10px; background-color:#035da9; }
.nutrition-content p.close a { color:#fff; }
img.nutrition-info { position:absolute; top:60px; left:100px; }

/****** FOOTER ***/
#footer { clear:both; width:100%; margin:0 auto; }
#footer p { text-align:center; font-size:.65em; line-height:.9em; }
#footer ul { margin:0 0 0 248px; }
#footer li { float:left; font-size:.65em; margin:0 25px 0 0; list-style-type:none; line-height:.9em; }

/* Clearing floats without extra markup  */
.wrapper { display:inline-block; }
.wrapper:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .wrapper { height:1%; }
.wrapper { display:block; }