@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666 url(Images/darkbeans-facet.jpg);
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.oneColElsCtrHdr #container {
	width: 46em;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFBF0;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtrHdr #header {
	text-align: center;
	background: #9e6f53;
	padding: 0 10px 0 20px;
	height: 210px;
	color:#FFFFCC;
	background-image: url(Images/header-bg-pillow210.gif);
	background-repeat: repeat-x;
}
.oneColElsCtrHdr #slogan {
	float: left;
	width: 33.8em;
	height: 194px;
	padding-top:9px;
	position:relative;  /* Required for absolute positioning of #menuwrapper */
}
.oneColElsCtrHdr #logo {
	float: left;
	width: 10em;
	padding-top:9px;
}
.oneColElsCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	/*padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	padding-bottom: 0em;
	padding-top: 1em;
	font:2.75em Georgia, "Times New Roman", Times, serif;
}
.oneColElsCtrHdr #header h2 {
	margin: 0;
	font:1.25em Arial, Helvetica, sans-serif;
}
.oneColElsCtrHdr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;	background: #FFFBF0;
}
.oneColElsCtrHdr #footer {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: #9e6f53;
	color: #FFFFCC;
}

.oneColElsCtrHdr #footer a {
color:#FFFFCC;
text-decoration:none;
}

.oneColElsCtrHdr #footer a:hover {
/* color:#9e6f53;
background-color:#FFFFCC; */
text-decoration:underline;
}
	
.oneColElsCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Format footer as horizontal list with elements separated by vertical bar */
#footer ul {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
 list-style: none;
 text-align:center;
}
#footer li {
 display: inline;
 margin: 0;
 padding: 0 0.2em 0 0.5em;
 border-left: 1px solid;
}
#footer .first {
 padding-left: 0;
 border: 0;
}
/* End of footer code */

/* Start of Coffee Urn watermark code */
.foodMenu {
background: url(Images/menuBackground400.png) no-repeat center; 
}
/* End of Coffee Urn watermark code */

/* Start food menu graphic titles */
#breakfastTitle {height:46px}  /* height of image BreakfastTitle.png */
#breakfastTitle h2 { 
	background: transparent url(Images/breakfastTitle.png) no-repeat top left;
	margin-top: 10px;
	display: block;
	width: 156px;
	height: 46px;
	float: left;
	}
#breakfastTitle h2 span {
	display:none
	}
#dailySpecials h3 { 
	background: transparent url(Images/dailySpecials.png) no-repeat top center;
	display: block;
	/* these center title */ 
	margin-left:auto; 
	margin-right:auto;
	/* end of centering */
	width: 157px;
	height: 35px;
	}
#dailySpecials h3 span {
	display:none
	}
#breakfastCombos h3 { 
	background: transparent url(Images/breakfastCombos.png) no-repeat top center;
	display: block; 
	width: 186px;
	height: 35px;
	}
#breakfastCombos h3 span {
	display:none
	}
#breakfastBurritos h3 { 
	background: transparent url(Images/breakfastBurritos.png) no-repeat top center;
	display: block; 
	width: 195px;
	height: 35px;
	}
#breakfastBurritos h3 span {
	display:none
	}
#omeletsAndEggs h3 { 
	background: transparent url(Images/omeletsAndEggs.png) no-repeat top center;
	display: block; 
	width: 178px;
	height: 35px;
	}
#omeletsAndEggs h3 span {
	display:none
	}
#waffles h3 { 
	background: transparent url(Images/waffles.png) no-repeat top center;
	display: block; 
	width: 90px;
	height: 35px;
	}
#waffles h3 span {
	display:none
	}
#alsoAvailable h3 { 
	background: transparent url(Images/alsoAvailable.png) no-repeat top center;
	display: block; 
	width: 152px;
	height: 35px;
	}
#alsoAvailable h3 span {
	display:none
	}
#lunchTitle {height:46px}  /* height of image lunchTitle.png */
#lunchTitle h2 { 
	background: transparent url(Images/lunchTitle.png) no-repeat top left;
	margin-top: 10px;
	display: block;
	width: 96px;
	height: 46px;
	}
#lunchTitle h2 span {
	display:none
	}
#soup h3 { 
	background: transparent url(Images/soup.png) no-repeat top center;
	display: block; 
	width: 68px;
	height: 35px;
	}
#soup h3 span {
	display:none
	}
#salads h3 { 
	background: transparent url(Images/salads.png) no-repeat top center;
	display: block; 
	width: 82px;
	height: 35px;
	}
#salads h3 span {
	display:none
	}
#coldSandwiches h3 { 
	background: transparent url(Images/coldSandwiches.png) no-repeat top center;
	display: block; 
	width: 173px;
	height: 35px;
	}
#coldSandwiches h3 span {
	display:none
	}
#hotSandwiches h3 { 
	background: transparent url(Images/hotSandwiches.png) no-repeat top center;
	display: block; 
	width: 168px;
	height: 35px;
	}
#hotSandwiches h3 span {
	display:none
	}
#combos h3 { 
	background: transparent url(Images/combos.png) no-repeat top center;
	display: block; 
	width: 82px;
	height: 35px;
	}
#combos h3 span {
	display:none
	} 
#beverageTitle {height:46px}  /* height of image beverageTitle.png */
#beverageTitle h2 { 
	background: transparent url(Images/beveragesTitle.png) no-repeat top left;
	margin-top: 10px;
	display: block;
	width: 152px;
	height: 46px;
	}
#beverageTitle h2 span {
	display:none
	}
#steamingBeverages h3 { 
	background: transparent url(Images/steamingBeverages.png) no-repeat top center;
	display: block; 
	width: 210px;
	height: 35px;
	}
#steamingBeverages h3 span {
	display:none
	} 
#signatureBeverages h3 { 
	background: transparent url(Images/signatureBeverages.png) no-repeat top center;
	display: block; 
	width: 214px;
	height: 35px;
	}
#signatureBeverages h3 span {
	display:none
	} 
#coldAndIcedBeverages h3 { 
	background: transparent url(Images/coldAndIcedBeverages.png) no-repeat top center;
	display: block; 
	width: 235px;
	height: 35px;
	}
#coldAndIcedBeverages h3 span {
	display:none
	}
#dessertsTitle {height:46px}  /* height of image dessertsTitle.png */
#dessertsTitle h2 { 
	background: transparent url(Images/dessertsTitle.png) no-repeat top left;
	margin-top: 10px;
	display: block;
	width: 125px;
	height: 46px;
	}
#dessertsTitle h2 span {
	display:none
	}
#pies h3 { 
	background: transparent url(Images/pies.png) no-repeat top center;
	display: block; 
	width: 52px;
	height: 35px;
	}
#pies h3 span {
	display:none
	}
#cake h3 { 
	background: transparent url(Images/cake.png) no-repeat top center;
	display: block; 
	width: 58px;
	height: 35px;
	}
#cake h3 span {
	display:none
	}
#iceCream h3 { 
	background: transparent url(Images/iceCream.png) no-repeat top center;
	display: block; 
	width: 120px;
	height: 35px;
	}
#iceCream h3 span {
	display:none
	}
#cookies h3 { 
	background: transparent url(Images/cookies.png) no-repeat top center;
	display: block; 
	width: 82px;
	height: 35px;
	}
#cookies h3 span {
	display:none
	}
#brownies h3 { 
	background: transparent url(Images/brownies.png) no-repeat top center;
	display: block; 
	width: 96px;
	height: 35px;
	}
#brownies h3 span {
	display:none
	}
#lemonSquares h3 { 
	background: transparent url(Images/lemonSquares.png) no-repeat top center;
	display: block; 
	width: 156px;
	height: 35px;
	}
#lemonSquares h3 span {
	display:none
	}
/* End food menu graphic titles */

/* Start of bean bullet code */
.beanList ul
{ 
list-style-type: none;
padding: 0;
margin: 0;
}

.beanList li
{
background-image: url(Images/bean-bullet.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 3em; padding-top:.5em; padding-bottom:.5em;
}
/* end of bean bullet code */



/**************** menu coding *****************/
/* #menuwrapper is used to position the horizontal menu bar centered at the bottom  */
/* of the #slogan area in the #header                                               */
#menuwrapper {  /* This goes at the bottom #slogan */
	position:absolute;
	bottom:1px;  /* Note: "position:relative" required in ancestor #header for this to work */
	/* Otherwise this ends up at the very bottom of the browser window */
right:0px; /* Needed in IE to line up with #slogan div instead or right side of browser window */
	width:100%; /* Take up full width of #slogan div */
}
#menu {
	/*background: #eee; */
width: 30em; /* Use width of "#menu ul" times number of menu items across */
	margin:0 auto 0 auto;  /* auto left & right margin needed to center #menu in Firefox */
	text-align:left;  /* Inherited "center" causes drop-down to be offset 1/2 button to right in IE */
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 6em;
	float: left;
}
#menu a, #menu h2 {
	/* font: bold 11px/16px arial, helvetica, sans-serif; */
font: .8em Verdana, Arial, Helvetica, sans-serif;
	display: block;
	border-width: 2px;
	border-style: solid;
/*	border-color: #ccc #888 #555 #bbb; */
	border-color: #c6a58d #572714 #41180a #ac8165;
	margin: 0;/* padding: 2px 3px; */
}
#menu ul ul li a {
	font-size:100%
}  /* avoids shrinking font size in submenu items (eg. .8 of .8em) */
#menu h2 {
	color: #fff;
	background: #000;/* text-transform: uppercase; */
}
#menu a {
	color: #FFFFCC;
	text-decoration: none;
	background-color: #77442a;
}
#menu a:hover {
	color: #77442a;
	background: #ffffcc;
}
#menu li {
	position: relative;
}
#menu ul ul {
	position: absolute;
	z-index: 500;
}
#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {
	display: none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
	display: block;
}
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->