html{font-size: 100%;}
html, body {
	margin: 0;
	padding: 0;
	font-size: 1em;
}
/* Prevent iPhone from resizing text */
@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
	IMG{
		border: 0;
		padding: 0;
		margin: 0;
		display: block;
	}
	H1, H2, H3, H4, H5, H6{
		font: normal normal bold 0.8em/18px Arial, Helvetica, sans-serif;
		color: #FFF;
		margin: 0;
	}
	label, input, textarea, span {
		font: normal normal normal 0.8em Arial, Helvetica, sans-serif;
		color: #524535;
	}
		input, textarea{ background-color: #F2E9CC; border: solid 1px #F47320; }
		
	P{
		font: normal normal normal 0.8em/20px Arial, Helvetica, sans-serif;
		color: #524535;
		margin: 0;
		padding: 0 0 5px 0;
	}
	
	UL{
		list-style: none;
		margin: 0;
		padding: 0;
	}
		LI{
			font: normal normal normal 0.8em Arial, Helvetica, sans-serif;
			color: #524535;
			padding: 10px;
		}
	
	A:link, A:visited, A:active{
		font: inherit inherit inherit 0.8em Arial, Helvetica, sans-serif;
		color: #524535;
		text-decoration: none;
	}	
		A:hover { color: #7FA3C1; }
/********************** STRUCTURE **********************/
#container {
	position: absolute;
    width: 840px;
    left: 50%;
    margin-left: -420px; /* half of width */
	padding-bottom: 50px;
}
	
/************* HEADER SECTION *************/
#header{ overflow: hidden; }
	/* Top Navigation Menu */
	ul#navigation{
		margin: 164px 0 0 50px;
		padding: 0;
		float: left;
	}
		#navigation li{	float: left; margin: 0 25px 0 0; padding: 10px;	font-size: 0.8em; }
		#navigation A{
			font-weight: bold;
			color: #FCF4D9;
		}
		#navigation A:hover{ color: #FFF; }
		/* Current Page */
		body#home A.home, body#orders A.orders{ color: #FFF; }

/************* FOOTER SECTION *************/	
#footer{ padding: 5px 0 0 0; text-align: center; }
#footer P#chrissies{ padding: 5pt 0 0 10pt; color: #FFF; font-size: 1em; font-weight: bold; }
#footer span{ padding: 0 0 0 10pt; color: #FFF; font-size: 0.8em; font-weight: bold; }
#footer span A{ color: #FCF4D9; } 
#footer span A:hover{ color: #FFF; }
#footer div{ padding: 0 0 0 10pt; color: #FFF; font-style: italic; }

/************************ PAGE SPECIFIC ************************/	

/* HOME PAGE */
body#home{ background: #F47320 url(bg_homepage.jpg) no-repeat center top; }		
body#home #content{ width: 840px; overflow: hidden; }

body#home H1{ padding: 40px 0 0 0; text-align: center; color: #F9C987; font: normal normal normal 1.7em/18px Georgia, "Times New Roman", Times, serif; letter-spacing: 2pt; }
#content #menu{ text-align: center; margin: 10px 0 15px 0; }
#content #menu span{ padding: 0 10pt; color: #F9C987; font-size: 1em; font-weight: bold; letter-spacing: 1pt; }
body#home A#online{ display: block; margin: 190px 0 0 0; padding: 25px 0; text-align: center; color: #FFF; font: normal normal normal 1.5em/18px Georgia, "Times New Roman", Times, serif; letter-spacing: 2pt; }
	body#home A#online:hover{ color: #F47320; }
body#home H2{ float: left; width: 440px; margin: 0 0 0 80px; padding: 30px 0; text-align: center; color: #603D17; font: normal normal bold 1em/18px Georgia, "Times New Roman", Times, serif; letter-spacing: 0.5pt; }
#content div#hours{ float: right; margin: 15px 60px 0 40px; }
#content #hours span{ display: block; text-align: right; padding: 0; color: #F8C886; }


/* ORDER PAGE */
body#orders{ background: #F47320 url(bg_orderspage.jpg) no-repeat center top; }
body#orders #content{ width: 838px; border: solid 1px #FFF; }
form#orderForm{
	background-color: #F9C987;
	overflow: hidden;
}
div.clear { clear:both; }
#orderList, #confirmation{
	float: left;
	width: 538px;
	background-color: #FFF;
}
	body#orders H1{
		background-color: #BB762B;
		padding: 10px;
	}
		body#orders H1 A{ color: #FFF; font-size: 0.8em; padding: 0 20px; }
		body#orders H1 A#help{ padding: 0 20px 0 320px; }
	#orderItems{ position: relative; padding: 0 19px; }
	body#orders H3, H4, H5, H6{	float: left; background-color: #F47320; margin: 10px 0; padding: 2px 10px; }
	body#orders H3{ width: 335px; text-align: left; }
	H6{ width: 430px; text-align: left; margin-left: 10px; padding: 2px 5px; background-color: #F9C987; }
	H4{ width: 80px; text-align: center; }
	H5{ width: 25px; text-align: center; }
	div.item{
        float: left;
		width: 440px;
		margin: 0 0 3px 10px;
        padding: 0 0 5px 0;
		border-bottom: solid 1px #F47320;
	}
	body#orders H3#specials{ width: 480px; background-color: #5B9FBA; }
	div.specials{ width: 480px;	border-bottom: solid 1px #5B9FBA; }
    #orderItems label, #orderItems span{
        float: left;
    }
		#orderItems label{ width: 355px; }
		#orderItems span.price{ width: 80px; text-align: center; }
		#orderItems span.dscptn{ width: 440px; font-size: 0.7em; font-style: italic; }
		#orderItems input{ float: right; width: 20px; margin: 0 10px 0 0; text-align: center; font-weight: bold; }
		#orderItems input.filled{ background-color: #F47320; color: #FFF; }
	table#sandwiches{
        float: left;
		margin: 0 0 0 10px;
		padding: 0;
		border-collapse: collapse;
		font: normal normal normal 9pt Arial, Helvetica, sans-serif;
		color: #777;
	}
		table#sandwiches TH{ 
			background-color: #F9C987; 
			text-align: left; 
			color: #FFF;
			padding: 5px;
		}
		table#sandwiches TD{ border-right: solid 1px #F9C987;  border-bottom: solid 1px #F9C987; width: 60px; text-align: center; }
		table#sandwiches tfoot TD{ color: #F47320; font-weight: bold; }
		table#sandwiches TR.firstRow{ color: #F47320; font-weight: bold; }
		table#sandwiches TD.firstCol{ width: 185px; text-align: left; }
		table#sandwiches TD span.price{float: right; font-size: 9pt; color: #777; }
		table#sandwiches input{ margin: 0; float: none; }
		table#sandwiches input[type="radio"]{ border: none; background-color: #FFF;}
		table#sandwiches input[type="checkbox"]{ border: none; background-color: #FFF;}
		
#orderDetails, #collection{
	position: relative;
	float: left;
	width: 300px;
}
	body#orders H2{
		background-color: #603E19;
		padding: 10px;
	}
	#floatDetails{
		position:absolute; 
		top: 40px;
		right: 20px;
		width: 260px;
	}
	#floatDetails label, #floatDetails input, #floatDetails textarea{
        float: left;
		display: block;
        margin: 2px 0;
	}
	#floatDetails label{width: 65px;}
	#floatDetails input, #floatDetails textarea{width: 180px;}
	#floatDetails input.hint, #floatDetails textarea.hint{ font-style: italic; color: #AAA; }
	#orderTotal{ margin: 20px 0; }
		#orderTotal input#total{
			width: 130px;
			border: solid 1px #01557A;
			background-color: #F9C987;
			padding: 4px 0;
			font-weight: bold;
			text-align: center;
			color: #603E17;
		}
		#orderTotal input#submit{
			float: right;
			width: 110px;
			background-color: #01557A;
			margin: 2px 10px 2px 0;
			padding: 5px;
			font-weight: bold;
			font-size: 0.7em;
			color: #FFFFFF;
		}
	#collection P{ padding: 5px 10px; }
div#instructions{
	background-color: #FFF;
	width: 760px;
	margin: 20px;
	padding: 10px 20px;
	text-align: left;
}
div#instructions A{ display: block; background-color: #F47320; margin: 5px 0; padding: 2px 10px; 
font: normal normal bold 1em/18px Arial, Helvetica, sans-serif; color: #FFF; text-align: center; }