/*-------------------------------------------------------
   BODY
-------------------------------------------------------*/
body {
   text-align: center;
   background: url(../images/bg-body.gif) repeat top left;
   font-size: 13px;
   font-family: Palatino, Georgia, "Times New Roman", serif;
   color: #990033;
}

/*--------------------------------------------------
	CLEAR FIX
--------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/*-------------------------------------------------------
   TYPOGRAPHY and BASIC ELEMENTS
-------------------------------------------------------*/
/* headings */
h1, h2, h3, h4, h5, h6 {
   font-family: Arial, "MS Trebuchet", sans-serif;
}

h1 a {
	text-indent: -9999px;
	display:block;
	height:113px;
	width:296px;
	position: absolute;
	top: 24px;
	left: 78px;
	background: url(../images/bg-h1.gif) no-repeat top left;
}

h2 {
	text-align: center;
	font-size: 28px;
}

	#order h2 {
		font-size: 18px;
		padding-bottom: 5px;
		text-align: left;
	}
	
	#menu-nav h2 {
		text-align: left;
		color: #FFF;
		font-size: 20px;
		padding-top: 6px;
		padding-left: 38px;
		padding-bottom: 22px;
	}

/* paragraphs etc. */
p {
   padding-bottom: 5px;
}

	.right {text-align: right;}
	.center {text-align: center;}

	#content p {line-height: 1.5;}

	#branding p {
		text-align: right;
		float:right;
		padding: 29px 50px 10px 0;
	}
	
	#masthead p {
		font-size: 15px;
	}
		
	#order p {
		font-family: Arial, "MS Trebuchet", sans-serif;
		font-size: 12px;
		color: #545454;
		padding-bottom: 5px;
		line-height: 1;
	}

strong, b {
	font-weight: bold;
}

	#order strong {
		font-weight: normal;
		font-size: 13px;
		color: #990033;
	}
	
em, i {
	font-style: italic;
}

big {
	font-size: 115%;
}

address {font-style: normal;}

	#branding address {
		text-align: right;
		float:right;
		padding-right: 50px;
		line-height: 1.3;
		clear: both;
	}

/* lists */
ul {
   
}

ol {
   
}

/* links */
a, a:visited {
   color: #587e0d;
   font-family: Arial, "MS Trebuchet", sans-serif;
   text-decoration: none;
}

a:hover {
   color: #990033;
}

#branding a, #branding a:visited {
	text-decoration: none;
	color: #990033;
	font-size: 14px;
	font-weight: bold;
}

#branding a:hover {
	color: #587e0d;
}

#menu-nav a {
	display: block;
	width: 201px;
	height: 174px;
	text-indent: -9999px;
	float: left;
	display: inline;
}

	a.meals {
		background: url(../images/link-fresh-meals.jpg) no-repeat top left;
		margin-left: 18px;
	} 
	
	a:hover.meals {
		background: url(../images/link-fresh-meals.jpg) no-repeat bottom left;
	}
	
	a.lunches {
		background: url(../images/link-lunches.jpg) no-repeat top left;
		margin-left: 51px;
	}
	
	a:hover.lunches {
		background: url(../images/link-lunches.jpg) no-repeat bottom left;
	}
	
	a.catering {
		background: url(../images/link-catering.jpg) no-repeat top left;
		margin-left: 51px;
		margin-right: -3px;
	}
	
	a:hover.catering {
		background: url(../images/link-catering.jpg) no-repeat bottom left;
	}

/* images */
img.left {
	float: left;
	margin-right: 10px;
}

img.right {
	float: right;
	margin-left: 10px;
}

img.center {
	margin: 10px auto;
	display: block;
}

img.ingredients {
	margin-left: 26px;
	margin-bottom: 13px;
}

/* forms */
form table {
	width: 350px;
	margin: 0 auto 30px;
}

/* table */
table.menu {
	width: 350px;
	margin: 0 auto;
}

td {
	padding: 2px;
	vertical-align: top;
}

/* horizontal rule */
hr {
   
}


/*-------------------------------------------------------
   CONTAINER
-------------------------------------------------------*/
#container {
   text-align: left;
	width: 800px;
	margin: 20px auto;
	position: relative;
}

/*--------------------------------------------------
	BRANDING
--------------------------------------------------*/
#branding {
	width: 800px;
	height: 148px;
	background: url(../images/bg-branding.png) no-repeat top left;
	position: relative;
}

/*-------------------------------------------------------
   MAIN NAVIGATION
-------------------------------------------------------*/
#mainnav {
   position: absolute;
   top: 156px;
   right: 50px;
   z-index: 999;
   text-align: right;
   font-family: Arial, "MS Trebuchet", sans-serif;
}

#mainnav p {padding: 0;}

#mainnav a.current {color: #990033;}

/*--------------------------------------------------
	WRAPPER
--------------------------------------------------*/
#wrapper {
	background: url(../images/bg-wrapper.png) repeat-y top left;
}

/*-------------------------------------------------------
   MASTHEAD
-------------------------------------------------------*/
#masthead {
   width: 273px;
   padding: 22px 409px 0 60px;
   height: 274px;
   padding-top: 22px;
   margin: 0 auto;
   background: url(../images/bg-masthead.jpg) no-repeat top left;
   margin-bottom: -50px;
   text-align: center;
}

/*-------------------------------------------------------
   MAIN CONTENT
   800px
-------------------------------------------------------*/
#content {
   padding: 0 29px;
   width: 742px;
   float: left;
   margin-bottom: 15px;
}

	#about #content,
	#contact #content,
	#menu_fresh #content,
	#menu_lunch #content,
	#menu_catering #content {
		padding-top: 50px;
	}


/*--------------------------------------------------
	LEFT-COL
--------------------------------------------------*/
#left-col {
	float:left;
	width: 442px;
}

	#home #left-col {
		width: 374px;
	}
	
#order {
	height: 107px;
	padding-top:12px;
	width: 325px;
	padding-left: 40px;
	padding-right: 10px;
	background: url(../images/bg-order.gif) no-repeat top left;
}

.spacer {
    margin: 0px; padding: 0px; border: 0px;
    clear: both;
    font-size: 1px; line-height: 1px;
}

/* In the CSS below, the numbers used are the following:
    2px: the width of the border
    3px: a fudge factor needed for IE5/win (see below)
    5px: the width of the border (2px) plus the 3px IE5/win fudge factor
    10px: the width or height of the border image
*/

.tl, .tr, .bl, .br {
    width: 10px; 
    height: 10px;
    padding: 0px; 
    border: 0px;
    z-index: 99;
}

.tl, .bl { float: left; clear: both; }
.tr, .br { float: right; clear: right; }
.tl { margin: -2px 0px 0px -2px; }
.tr { margin: -2px -2px 0px 0px; }
.bl { margin: -10px 0px 0px 0px; }
.br { margin: -10px 0px 0px 0px; }

/* IE5-5.5/win needs the border scooted to the left or right by an
   additional 3px! Why? */
.tl {
    margin-left: -5px;
    ma\rgin-left: -2px;
}
html>body .tl {
    margin-left: -2px;
}
.tr {
    margin-right: -5px;
    ma\rgin-right: -2px;
}
html>body .tr {
    margin-right: -2px;
}
.bl {
    margin-left: -3px;
    ma\rgin-left: 0px;
}
html>body .bl {
    margin-left: 0px;
}
.br {
    margin-right: -3px;
    ma\rgin-right: 0px;
}
html>body .br {
    margin-right: 0px;
}
/* To get around a known bug in IE5/win, apply the
   border (no margin, padding or positioning) to the
   content class and apply whatever positioning you
   want to the contentWrapper class. */
.box-content {
    margin: 0px;
    padding: 0px;
    border: 2px solid #d4ebb4;
}
.box {
    /* position this div however you want, but
       keep its padding and border at zero */
   padding: 15px 0 0;
   border: 0px;
	text-align: center;
}

.box p, .box h3, .box h4 {
	margin: 0 39px;
	padding-bottom: 10px;
}

.box h3 {
	font-size: 16px;
	font-weight: bold;
	font-family: Palatino, Georgia, serif;
}

.box h4 {
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	font-family: Palatino, Georgia, serif;
	padding-bottom: 5px;
	padding-top: 5px;
}

/*--------------------------------------------------
	RIGHT-COL
--------------------------------------------------*/
#right-col {
	float: left;
	font-family: Arial, "MS Trebuchet", sans-serif;
	width: 300px;
	text-align: center;
}

	#home #right-col {
		width: 368px;
		
	}
	
/*--------------------------------------------------
	MENU NAV
--------------------------------------------------*/
#menu-nav {
	width: 742px;
	height: 246px;
	margin: 0 auto;
	background: url(../images/bg-menu-nav.gif) no-repeat top left;
	clear: both;
}

/*-------------------------------------------------------
   FOOTER
-------------------------------------------------------*/
#footer {
   width: 800px;
   height: 50px;
   background: url(../images/bg-footer.png) no-repeat top left;
}