/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
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,
b, u, i, center,
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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {text-decoration: none;}


/* =General
-----------------------------------------------------------------------------*/
html{
/*background:#000000 url(../images/bodyBG.jpg) repeat;*/
background:#495901 url(../images/bodyBG.jpg) repeat-x 0px 42px;
height:100%;
}

body {
text-align: left;
font-family: "Microsoft Sans Serif", Arial, sans-serif;
line-height:18px;
}


/* =Wrappers
-----------------------------------------------------------------------------*/
#wrapper { margin: 0 auto; position: relative; width: 960px; height: 100%; clear:both; }

/* =Typography
-----------------------------------------------------------------------------*/
P, h1, h2, h3, h4, h5 {color:white;}

p { font-size:12px; margin-bottom: 18px; }

#home p { font-size:10px; line-height:12px; margin-bottom: 12px; }

#story p { font-size:14px; line-height:20px; margin-bottom: 20px; }


H1 {font-size:24px}  /* displayed at 24px */
H2 {font-size:18px}  /* displayed at 18px */e4e0af
H3 {font-size:15px}  /* displayed at 15px */
H4 {font-size:12px}  /* displayed at 12px */

#home h1 { font-size:20px; line-height:20px; margin-bottom: 4px; padding-top:8px; }
#faq h2 { color:#e4e0af; line-height:24px; }

#story p span { font-size:28px; padding-top:20px; }

#home h2 { font-size:12px; line-height:18px; font-style:italic; }

#recipes h2 { color:#ffffcc; padding-top:8px; line-height:18px;  margin-left:22px; }

input, select, th, td {font-size:12px}

/* =Header
-----------------------------------------------------------------------------*/
#header { width: 100%; height: 40px; background-color:#495901; }
#header img {float:left;}

/* =Content
-----------------------------------------------------------------------------*/

#contentHome {float:right; width:340px; height: 430px; background:#495901 url(../images/homeBG_rightBottom.jpg) no-repeat;}

#contentStory {float:right; width:665px; height: auto; padding-top:60px; background:#1d2800 url(../images/story_BGRight.jpg) no-repeat;}

#franchise #content {float:right; width:960px; height: auto; background:#495901 url(../images/franchiseBG.jpg) no-repeat;}

#contact #content {float:right; width:960px; height: auto; background:url(../images/contactBG.jpg) no-repeat;}

#faq #content {width:960px; height: 640px; background:#495901 url(../images/faqBG.jpg) no-repeat;}

#faq #subContent {float:left; width:245px; margin-left:20px; display: inline;}

#faq #mainContent {float:right; width:660px; padding-top:0px;}

#recipes #content {width:960px; height: 640px; background:url(../images/recipesBG.jpg) no-repeat;}

#recipes #subContent {float:left; width:245px; margin-left:20px; display: inline;}

#recipes #imageHolder {padding-top:18px; position:absolute; right:0px;}

#recipes #mainContent {width:100%;}

.ingredientBox, .directionsBox {float:left; width:396px; height:300px; background:#e8b349 url(../images/ingredientsHead.jpg) no-repeat top left;  margin-left:20px;}

.directionsBox {background:#e8b349 url(../images/directionsHead.jpg) no-repeat top left;}

.ingredientBox p, .directionsBox p {color:#000000; padding:35px 10px 10px 10px; font-size:12px; line-height:16px;}



/* =Images
-----------------------------------------------------------------------------*/
#leftImageHome {float:left; width:620px; height: 640px; background:#495901 url(../images/homeBG_left.jpg) no-repeat;}

#logoHome {float:right; width:340px; height: 210px; background:#495901 url(../images/homeBG_rightTop.jpg) no-repeat;}

#leftImageStory {float:left; width:295px; height: 640px; background:#495901 url(../images/story_BGLeft.jpg) no-repeat;}

#rotatingImage {height:360px; background-color:#292e02; margin-bottom:22px;}




/* =Top Navigation Menu
-----------------------------------------------------------------------------*/ 

#navMain {background-color: #4F5900; min-width:400px; padding-top:8px;}

#navMain ul li { display: inline; text-transform:uppercase; font-size:14px; }

#navMain ul li a {padding: 4px 8px; float: left; border-right: 1px solid #eee399; color: #eee399;}

#navMain ul li a:hover, #navMain ul li a#current {color: #fff; text-decoration:underline;}



/* =Sub Navigation Menu
-----------------------------------------------------------------------------*/ 

#subContent ul li a {font-size:12px; color:#FFFFFF; display:block; width:240px; padding:7px 0 6px 5px;}

#subContent ul li a:hover, #subContent ul li a:focus {background-color:#292e02;}

#recipes #subContent ul li a {font-size:12px; color:#FFFFFF; display:block; width:240px; padding:2px 0 2px 20px;}

#recipes #subContent ul li a:hover, #recipes #subContent ul li a:focus {background-color:#292e02;}


/* =Store Locator Menu
-----------------------------------------------------------------------------*/ 

.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
background:#495901;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a{
display:block;
font-size:12px;
width:244px;
padding:7px 0;
color:#eee399;
font-size:14px;
text-decoration:none;
margin-right:1px;
}
/* style the links hover */
.menu a:hover{
color:#fff;
text-decoration:underline;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:244px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
#navMain ul li div.menu ul li ul li a{
text-transform:none;
border:none;
font-size:12px;
}

/* =TV Commercial
-----------------------------------------------------------------------------*/ 
#commercial {position:absolute; margin:30px 0 0 52px; width:200px; height:124px;}
#commercial a {display:block; width:100%; height:100%;}

/* =Clearfix
-----------------------------------------------------------------------------*/
.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 */