/* Website for Gold Star Backers */
/* Fall 2009 */
/* Site design and development by Red Letter Design, www.RedLetterDesign.net */


/* Hacks: 
for min-height in IE6: add height: xxpx !important; height: xxpx;

the content div is floated right so that floats internal to that div can be cleared on the left without interacting with the sidebar.
In order for the background to appear, a clearing div is placed at the end of the content.
*/

/* Reset browser default styles to insure consistency across various browsers */
html, body, div, 
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; line-height: 1; text-align: left; vertical-align: baseline; }
a img, :link img, :visited img { border: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

/* Helpful fixes */
/* -- get rid of Firefox link boxes */
a { outline: none; }
/* -- forces vertical scrollbars in FF to avoid horizontal shift on short pages */
:root, html { overflow-y:scroll; }

/* Layout Structure */
body              { margin: 0; padding: 0 0 40px 0; background: #edab0a url(../images/background.jpg) center top repeat; }
div#wrapper0      { margin: 0 auto; padding: 0; width: 960px; background: url(../images/body.jpg) center top repeat-y; }
div#wrapper1      { margin: 0; padding: 0; background: url(../images/top.jpg) center top no-repeat; }
div#wrapper2      { margin: 0; padding: 0; background: url(../images/bottom.jpg) center bottom no-repeat; position: relative; }

div#content       { padding: 180px 50px 0px 360px; min-height: 600px; height: auto !important; height: 600px; }
div#logo          { position: absolute; top: 30px; left: 50px; width: 435px; height: 135px; }
div#nav           { position: absolute; top: 180px; left: 50px; width: 290px; height: 400px; }
div#footer        { position: relative; padding: 20px 50px 0 50px; height: 50px; }
div#lowerSideInfo { position: absolute;	top: -180px; left: 50px; width: 290px; height: 225px; }
div#printHeader   { display: none; }
div#logolink      { position: absolute; top: 40px; left: 10px; z-index: 10; }
div#socialmedia   { position: absolute; top: 45px; right: 50px; width: 300px; }

/* Social media icons */
div#socialmedia img { float: right; margin-left: 10px; }

/* Front bullets */
div#frontbullets    { height: 500px }		
div#frontbullets ul { list-style-image: url(../images/star.gif);	}
div#frontbullets li { font-size: 16px; line-height: 20px; margin: 0; padding: 0; color: #c84d00; }

/* Typography */
/* -- fonts */
body, input, textarea 	{ font-family: Verdana, "Trebuchet MS", Tahoma, Geneva, sans-serif; }

/* -- for main content, rhythm is 24px */
body, input, textarea { color: #444444; font-size: 14px; line-height: 24px; }
h1				{ font-size: 24px; line-height: 30px; margin: 0; padding:  3px 0   21px 0; font-weight: normal; color: #edab0a; letter-spacing: 1px; }
h2				{ font-size: 18px; line-height: 24px; margin: 0; padding:  0px 0    0   0; font-weight: normal; color: #c84d00; }
h3				{ font-size: 16px; line-height: 24px; margin: 0; padding:  6px 0   18px 0; font-weight: normal; color: #6F5414;  }
p				{ font-size: 14px; line-height: 24px; margin: 0; padding:  6px 0   24px 0; }
li				{ font-size: 13px; line-height: 18px; margin: 0; padding:  0; }
li li			{ font-size: 11px; }
strong 			{ font-weight: bold; color: #6F5414; }
em 				{ font-style: italic; color: #000000; }
blockquote { margin: 9px 0px; padding: 0 9px; border-left: 8px solid #fcdf9d; background-color: #FBF3DC; }
	blockquote p { padding: 9px 0 9px 0; font-style: italic;}
	blockquote p.quoteSource { font-style: normal; font-size: 13px;  }
a { color: #2656b9; }
	a:link 		{ color: #2656b9; }
	a:visited 	{ color: #2656b9; }
	a:hover 	{ color: #c84d00; }
	a:active 	{ color: #c84d00; }
ul { list-style-position: outside; list-style-type: square; margin: 0 0 0 1.5em; padding: 6px 0 12px 0; }
ol { list-style-position: outside; list-style-type: decimal; margin: 0 0 0 1.5em; padding: 6px 0 12px 0; }
ul ul, 
ol ul { list-style-type: disc; margin: 0 0 0 2em; padding: 0; list-style-position: outside; }
ol ol, 
ul ol { list-style-type: lower-alpha; margin: 0 0 0 2em; padding: 0 0 0 0; list-style-position: outside; }
dl { margin: 0; padding: 6px 0 12px 0; }
dt { font-size: 13px; line-height: 18px; margin: 0; padding:  0; font-weight: bold; }
dd { font-size: 13px; line-height: 18px; margin: 0 0 0 1.5em; padding:  0; }

/* Tables */
table  { margin: 0 0 17px 0; padding: 0; background-color: #FBF3DC; border: 1px solid #fdecc3; border-width: 1px 1px 0 1px; }
td, th { padding: 3px; margin: 0; font-size: 12px; line-height: 17px; text-align: left; font-weight: normal; }
th     { vertical-align: middle; background-color: #fcdf9d; font-weight: bold; }
td     { vertical-align: middle; background-color: #FBF3DC; border-bottom: 1px solid #fcdf9d;}

table.products td {vertical-align: top; }
table.products td p {text-align: center; font-size: 12px; }

/* Graphics */
/* note on image sizes: images that align to the top of a para should by (18*n)+11 px high. Those that are internal to a para should be (18*n)+7 px tall. */
img.imgRight    { border: 1px solid #6F5414; padding: 0; margin:  4px  0    0px 18px; float: right; }
img.imgLeft     { border: 1px solid #6F5414; padding: 0; margin:  4px 18px  0px  0;   float: left; }
img.graphicRight    { border: none; padding: 0; margin:  4px  0    0px 18px; float: right; }
img.graphicLeft     { border: none; padding: 0; margin:  4px 18px  0px  0;   float: left; }
/* Forms */
form 				{ border: none; padding: 0; margin: 9px 0; background-color: #FBF3DC; border: 1px solid #fcdf9d;}
textarea 			{ font-size: 13px; width: 98%; border: 1px solid #fcdf9d; }
input.formInput 	{ font-size: 13px;  width: 98%; border: 1px solid #fcdf9d;}
input.button 		{ font-size: 13px; line-height: 18px; }
div.checkInput 		{ padding-right: 20px; float: left;}
label 				{ font-size: 13px; line-height: 18px; font-weight: bold;}
label.selectLabel 	{ font-weight: normal;}
form p 				{ padding: 0; }
div.formSection 	{ margin: 0; padding: 9px 9px; min-height: 18px; height: auto !important; height: 18px; clear: left; }
div#honeypot		{ display: none; }

/* Typography Classes */
.formNote 			{ font-size: 11px; }
.formError 			{ font-size: 11px; font-weight: bold; color: #c84d00; }
.retMessage			{ font-style: italic; font-weight: normal; color: #c84d00; }
.warning   			{ font-weight: bold; color: #c84d00; }
.fieldwarning   	{ font-weight: normal; color: #c84d00; }
.floatclear 		{ clear: both; }
.note               { font-style: italic; font-size: 11px; }
.smalltext          { font-size: 10px; }
.subhead            { font-size: 18px; line-height: 18px; margin: 0; padding: 0 0 18px 0; font-style: italic; }
.immediateSubhead   { margin-top: 0; padding-top: 0; }

/* Float Containers -- to handle floated elements */
div.floatContainer { width: 100%; float: left; }
div.clearingDiv   { clear: both; }


/* Primary Navigation */
div#nav ul { list-style: none; list-style-position: outside; text-indent: 0; margin: 0; padding: 0; }
div#nav li { display: inline; }
div#nav li a { display: block; width: 290px; height: 80px; background-position: left top; text-indent: -5000px;}
div#nav li a:hover { background-position: top center; }
div#nav li.current_page a { background-position: top right; }

div#nav li a#home {background-image: url(../images/home.png);}
div#nav li a#story {background-image: url(../images/story.png);}
div#nav li a#retailers {background-image: url(../images/retailers.png);}
div#nav li a#where {background-image: url(../images/where.png);}
div#nav li a#contact {background-image: url(../images/contact.png);}

/* Footer content */
div#footer p { font-size: 10px; line-height: 18px; color: #6F5414; font-weight: normal; margin: 0; padding: 0 3px 0 0; text-align: right;}
	div#footer p a, 
	div#footer p a:link, 
	div#footer p a:visited 	{ color: #6F5414; text-decoration: none; }
	div#footer p a:hover 	{ color: #c84d00; text-decoration: underline; }
	div#footer p.copyright 	{ padding: 20px 0 0 0; } /* to match the padding on the nav below it */
	
/* Lower Side Info content */
div#footer div#lowerSideInfo p         { color: #333333; }
div#footer div#lowerSideInfo p.name    { display: none; } /* an image provides the name in the screen version */
div#footer div#lowerSideInfo p.address { font-size: 11px; line-height: 18px; text-align: left; padding: 0 0 12px 68px; }
div#footer div#lowerSideInfo p.phone   { font-size: 30px; line-height: 36px; text-align: center; padding: 0; font-weight: bold;}

/* Lower Navigation (in footer) */
p#lowerNavigation span span { margin: 0; padding: 0 6px 0 6px; border-left: 1px solid #cccccc; }
	p#lowerNavigation span span:first-child { border: none; }
	
/* Page specific backgrounds */
div#content.homePage {background: url(../images/muffinstack.jpg) 425px 120px no-repeat;}
div#lowerSideInfo.homePage {background: url(../images/regmini.jpg) left top no-repeat;}
div#lowerSideInfo.storyPage {background: url(../images/capchip.jpg) left top no-repeat;}
div#lowerSideInfo.wherePage {background: url(../images/lemonblueberry.jpg) left top no-repeat;}
div#lowerSideInfo.contactPage {background: url(../images/coffeecake.jpg) left top no-repeat;}
div#lowerSideInfo.retailersPage {background: url(../images/chocolate.jpg) left top no-repeat;}
div#lowerSideInfo.nutritionPage {background: url(../images/strawberrycinnamon.jpg) left top no-repeat;}

/* Nutrition labels */
div.nutrition { width: 170px; float: left; margin-bottom: 20px; }
div.nutrition h2 { font-size: 14px; }