html{
	margin:0;
	padding:0;
	border:0;
}

body{
	color:black;
	background:#fff;
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	margin:0;
	padding:0;
	font-size:100%;
	background: url('images/stripes.png') no-repeat top center;
}

#wrapper{
	width:100%;
}

#plate {
	position:absolute;
	bottom:200px;
	left:0;
	height:238px;
	width:400px;
}

#header{
	/*background:#7d132a;*/
	margin:0 auto;
	position:relative;
	padding: 50px 80px 20px;
}

#logo{
	position:relative;
	top:0;
	left:0;
	float:left;
}

#logo img, #motto img{
	width:100%;
	margin:0;
	padding:0;
}

#motto{
	position:relative;
	float:left;
	margin-left:1%;
}

#date{
	float:right;
	color:#FDB912;
	margin-top:50px;
}

#meal{
	margin:0 auto 15px;
}

#food{
	margin:0;
	padding:0;
	text-align:center;
}

#food li{
	text-align:left;
	display:inline-block;
	*display:inline;
	width:23%;
	font-size:100%;
	padding:0 0 10px 4%;
	vertical-align:top;
}

#food li:first-child {
	width:40%
}

#food #Entree li{
	
	font-size:45px;
	line-height:43px;
	padding:15px 0;
}


	

#food .foodlist{
	margin:0;
	padding:0;
}

#food .foodlist li{
	display: block;
    width: 100%;
    font-size: 27px;
    line-height: 25px;
    padding: 8px 0;
}

#food .foodlist li strong{
	font-size:120%;
	color: #7d132a;
}

#gradeselector{
	width:100%;
	text-align:center;
}

#date {
	font-size: 40px !important;
	font-weight: 300 !important;
	color:#6d6e71 !important;

}
#logo {
	float:left;
}
#date {
	float: right;
}
#logo h2 {
	text-transform: uppercase;
	color:#6d6e71 !important;
	font-weight:600 !important;
	font-size: 55px;
	letter-spacing: 3px;
}
.bolder {
	font-weight:800 !important;
}

.food-container {
	position: relative;
}

.food-container ul li {
	float:left;
}
.food-container ul li ul li {
	float:none;
	color:#6d6e71 !important;
}
.food-title {
	text-transform: uppercase;
}

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

@media screen and (max-width: 400px) {
	#date, #meal {
		font-size:100%;
	}
	
	#food li{
		font-size:100%;
	}
	
}

@media screen and (min-width: 401px) {
	#date, #meal {
		font-size:100%;
	}
	
	#food li{
		font-size:100%;
	}
}

@media screen and (min-width: 594px) {
	#date, #meal {
		font-size:150%;
	}
	
	#food li{
		font-size:150%;
	}
}

@media screen and (min-width: 673px) {
	#date, #meal {
		font-size:200%;
	}
	
	#food li{
		font-size:170%;
	}
}

@media screen and (min-width: 783px) {
	#date, #meal{
		font-size:200%;
	}
	
	#food li{
		font-size:170%;
	}
	
	
}

@media screen and (min-width: 790px) {
	#date, #meal{
		font-size:250%;
	}
	
	#food li{
		font-size:170%;
	}
}
@media screen and (min-width: 890px) {
	#date, #meal{
		font-size:250%;
	}
	
	#food li{
		font-size:200%;
	}
	
	
}
@media screen and (min-width: 900px) {
	#date, #meal{
		font-size:300%;
	}
	
	#food li{
		font-size:200%;
	}
}


@media screen and (min-width: 1008px) {
	#date {
		font-size:400%;
	}
	
	#meal{
		font-size:500%;
	}
	
	#food li{
		font-size:230%;
	}

}



@media screen and (min-width: 1110px) {
	#date{
		font-size:500%;
	}
	
	#meal{
		font-size:800%;
	}
	
	#food li{
		font-size:280%;
	}
	
	
}