body
{
   margin: 0;
   background: #F7F295;
   font-size: small;
}

#main
{
   margin: 0;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: normal;
   width: 100%;
   background-color: white;
   position: relative;
   padding: 0;
}

#header
{
   padding: .5em;
}

#header #sitebrand
{
	
}

#toplinks
{
   position: static;
   left: 0;
   top: 0;
   width: 100%;
}

#toplinks a,
#toplinks a:hover,
#toplinks a:visited
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: small;
   font-weight: normal;
   color: blue;
   text-decoration: underline;
   display: block;
}

#toplinks img,
#toplinks img a
{
  display:none;
}

#navigation
{
   color: black;
   background-color: white;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
}

#navigation h5 a,
#navigation h5 a:hover,
#navigation h5 a:visited
{
   color: white;
   text-decoration: none;
}

#navigation a,
#navigation a:hover,
#navigation a:visited
{
   color: black;
   text-decoration: none;
}


#navigation .menu a,
#navigation .menu a:hover,
#navigation .menu a:visited
{
   color: white;
}

#navigation img
{
   display:none;
}
#topnav ul li ul
{
display: none;
}
#topnav
{
   color: blue;
   border: solid black;
   background-color: #DE2226;
   padding-left: .5em;
   padding-right: .5em;
   margin: 0;
   margin-bottom: 0;
   padding-top: .25em;
   padding-bottom: 0;
}
#topnav ul li
{
display:block;
line-height:normal;
}
#searchbar
{
   border: solid blue;
   background-color: #F7F295;
   color: black;
   margin: .5em;
   margin-top: 0;
   border: solid black;
   border-top: none;
   text-align: center;
}


#sidenav ul
{
  list-style-type: none;
  padding-left: .1em;
}

#sidenav li
{
   margin-bottom: .47em;
}

#sidenav a:hover,
#toplinks a:hover,
#trythis a:hover
{
   background-color: black;
   color: white;
   font-weight: bold;
}

#trythis a:hover img
{
   background: #F7F295;
   border: thin black;
}

#trythis
{
   display:none;
}

#trythis img
{
   display:none;
}

#sidenav,
#trythis
{
   margin: .25em;
   padding: 0;
   width: 85%;
   background-color: #F7F295;
   border-right: solid black;
   border-left: solid black;
}

/* ---- New part for control --- */
#leftside{
float: left;
width: 15%;
min-width: 110px;
margin: 1%;
padding:0;
}


/* ---- End of new section ---- */

#content
{
   color: black;
   background-color: white;
   width: 80%;
   /*position: absolute;
   right: 18.55%;
   right: .75em;
   top: 10.4em;*/
   float: right;
   margin-right: 1%;

}

#feature
{
   display:none;
}

#feature img
{
   width: 100%;
}

#recipes,
#reviews
{
   color: black;
   padding-right: .5em;
   padding-left: .5em;
   font-size: small;
}

#recipes
{
   position: static;
   float: left;
   width: 36%;
}

#recipes td
{
   text-align: center;
   font-size: x-small;
   font-weight: normal;
}

#reviews
{
   position: relative;
   float: right;
   width: 100%;
   padding: 0;
}

#reviews ul
{
   margin-left: .1em;
}

#footer
{
   clear: both;
   margin: .5em;
   border-top: solid black;
   text-align: center;
   font-size: x-small;
   background-color: white;
}

=======================

#content table
{
   color: black;
   margin: 0;
   padding: 0;
   width: 100%;
}

h3, h5
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: medium;
   font-weight: bold;
   color: black;
   text-decoration: none;
   border: black;
}

h4
{
   padding: 0;
   margin: 0;
   font-weight: bold;
}

h5
{
   color: white;
   background-color: #DE2226;
   border-top: solid black;
   border-bottom: solid black;
   padding-left: .5em;
   margin: 0;
}

h6
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   text-align: center;
   color: black;
   font-size: medium;
   font-weight: normal;
   margin: .25em;
}

img
{
   border: none;
}

/* Control form labels*/
#content form label{
	float: left;
	text-align: left;
	min-width: 9em;
	padding-right: 1em;
}

/* Control the deletion page item layout - enclosed in a definition list */
dl#delete{margin: 0; padding: 0; float: left; width: 100%;}
dl#delete dt{margin:0 1em 0 0; padding:.5em; border: 4px double #000; float:left;}
dl#delete dd{margin:0; padding:0; float: left;}
/* The next rule is a self closing rule to clear the floats this rule works in MOSe browsers*/
dl.last{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* This hack does a self-close but for IE */
* html dl.last {height: 1%;} /* for IE 5 and 6 */
*:first-child+html dl.last{min-height: 1px;} /* for IE 7 */


/* Markup for critical warning */
.warning{font-weight: bold; font-variant: small-caps; font-size: 150%; color:#FF6600;}
#modifyItem label
{
width: 12em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}

#frmlogin label
{
/*width: 2em;
float:left;
text-align:right;
margin-right:.5em;
display:block;*/
float: left;
	text-align: left;
	min-width: 9em;
	padding-right: 1em;
}
#newcustomer
{
	float:left;
	position: relative;
}
#returningcustomer
{
	float:right;
	position: fixed;
}
/*=========This is for navigation=======================

	GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

==============================================================================*/

/*====== GLOBAL OVERRIDES FOR MAJOR ITEMS AND DIFFERING BROWSER DEFAULTS =====*/
table { text-align: left; }
ul { margin-left: 3px; }       /* kill default 50px left padding and set 20px */
li { margin-bottom:  .5em; }          /* set default inter-item vertical spacing */
.tightlist li {margin-bottom: 0.25em; }     /* tighter list for simple bullets */


 /*================= STYLES FOR THE MASTHEAD & CONTROLS ==================*/

.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
	position: relative;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 20px;
	min-width: 100%; /* was 560px */
}

* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
	position: relative;  /* we can simulate a minimum width by creating a large */
	float: left;          /* border in this first div, then placing our content */
	height: 1px;          /* into a second nested div (see 2nd nested div next */
	border-left: 560px solid black;    /* CSS box-model borders are a fixed size */
}

* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
	position: relative;
	margin-left: -560px;
	height: 1px;
}


 /*========================= TOP OF THE MENU CASCADE =========================*/

.menu {
	position: relative;      		/* establish a menu-relative positioning context */
	float: left;             		/* play nicely with others */
	margin-top: -.5em;
	padding: 0;
	border: 0;
	height: 1em;            		/* the menu's overall height */
	width: auto;         			/* we always want our menu to fill the available space */
	background-color: none;
	color: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;         		/* this (and also below) sets the menu's font size */
	z-index: 3;
}

.menu ul {
	padding: 0;
	margin: 0;
	border: 0;
	font-weight: normal;				/* we don't want to view the list as a list */
	list-style-type: none;          /* globally set the menu's item spacing. note */
	line-height: 1em;           	/* this must be 1.0 or 1.5 or 2.0 for Mozilla */
}                               	

.menu li {							
	width: auto;                       /* this WAS 7em; */
	padding-right: .5em;                  /* this WAS non-existant*/
	position: relative;
	display: inline;
	float: left;
	margin: 0;
}

.menu ul li table {
	margin: -1px 0;              	/* IE5 needs -1px top and bottom table margins */
	margin: 0;               		/* re-zero the table margins for everyone but IE5 */
	border-collapse: collapse;      	/* IE5 needs this for the sub-menus to work */
	font-size: 12px;        			/* this sets the base font size for our entire menu */
}

.drop {
	display: block;
	padding: 0px 0.33em;	       		/* this sets the l/r margins for our menu item */
	margin: 0;
	text-align: right;   			/* this right alignment goes with the float:left below */
	cursor: pointer;      			/* IE tries to switch back to an I-beam, don't let it */
	/*cursor:hand;            		IE5 only knows about "hand", so set it both ways -- commented out by BR to help with 		
									validation works ok with firefox 1.5+ and IE 7 */
}

.drop span {        				/* this simultaneously left and right aligns the text and */
	float: left;       				/* the >> in the drop-down menus which link to sub-menus */
}


/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

.menu ul li ul {
	display: none;                  /* initially hide the entire list hierarchy */
	padding: 1px;                   /* this is our box border width */
}

.menu ul li a,
.menu ul li a:visited
{        		/* unselected top-level menu items */
	display: block;
	float: left;
	text-decoration: none;
	height: 18px;
	outline: none; 					/* Gets rid of dotted border on previously clicked items */
	color: white;
}

/* this must be present for IE 5/6, but if the border has a value Firefox and Safari won't work, so the compromise
	is to give the border a thickness of "0". This way it is present, but won't show. It works in all now. */
.menu ul li:hover a,
.menu ul li a:hover {                         /*selected top-level menu items*/ 
	border-top: 0 solid #000;   
	height: 18px;
    color: white;
	background-color: #DE2226;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul,
.menu ul li a:hover ul {           	/* 2nd level drop-down box */
	display: block;
	position: absolute;
	margin: 0;
	top: 2.4em;              			/* place us just up underneath the top-level images */
	left: -1px;       				/* left-align our drop-down to the previous button border */
	height: auto;      				/* the drop-down height will be determiend by line count */
	width: 13.5em;
	color: white;                    /* this sets the unselected-text color */
	background: #DE2226;         		/* this sets our menu's effective "border" color */
    font-size: .7em;
	border-left: solid black;
}

.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {	/* our first dropdown should not be skewed */
	left: 0px;
}

.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny {     /* 2nd level skinny drop-down box */
	width: 10em;   				/* with a 12px default font, this is 97px width (97/12) */
}

.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul {  /* 2nd level neighborhood drop-down box */
	left: auto;
	right: 0;         				/* nudge the right menu right to line up under the border */
}

* html .menu ul.rightmenu li a:hover ul {	/* IE5/6 needs a tweak here */
	right: -1px;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {      	/* 2nd level unselected items */
	border: 0;
	margin: 0;
	padding: 0;
	height: auto;
	color: white;               		/* this sets the unselected drop-down text color */
	background: #DE2226;             /* this sets the drop-down menu background color */
    width: 13.5em;
}

.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {   /* 2nd level selected item */
   color: white;
   background-color: black;
}

.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover { /* 2nd level un+selected items */
   width: 10em;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {    /* hide inactive 3rd-level menus */
   visibility: hidden;
}
     
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul { /* 3rd level drop-down box */
   visibility: visible;
   position: absolute;
   margin-top: -1px;            /* bring the top edge of the 3rd level menu up one */
   top: 0;
   left: 14em;
   width: 10em;
   font-size: 1em;
}

.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */
   width: 10em;
   background: #DE2226;
}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover { /* level3 selected items */
   width: 10em;
   background: #DE2226;
}