/*-----------------------------
	core layout
 ----------------------------*/
html { background-color: #000; }
body { font: 12px/1.5 normal arial, helvetica, sans-serif; background: #000 url('../images/body-bg.jpg') no-repeat center top; width: 100%; display: table; color: #fff; }

div.clear { clear: both; }
p { padding: 0 0 0.5em; font-size: 1em; }
a { color: #000; text-decoration: none; border: none; }
a:hover { color: #000; text-decoration: underline; border: none; }

#logo { width: 192px; height: 122px; left: 17px; position: absolute; top: 13px; }

/* headings */
h1, h2 { font-family: Arial, Helvetica, Verdana, sans-serif; margin: 0; padding: 0; line-height: 1; color: #fff; text-align: center; }
h2 { padding: 9px 0 0 0; font-size: 1.2em; }

/*-----------------------------
 	container and columns
 ----------------------------*/
/* container */
#container { width: 976px; margin: 0 auto; text-align: left; position: relative; height: 100%; }

/* header */
#header { width: 976px; height: 152px; position: relative; }

/* stories */
#main-content { width: 976px; float: left;  margin: 0; padding: 0; }

/* home page */
#intro { width: 344px; height: 224px; background: url('../images/intro-bg.jpg') no-repeat center top; float: left; position: relative; }
	#intro h1 { margin: 0; padding: 50px 50px 0 52px; font-size: 1.3em; color: #b20b07; text-align: left; }
	#intro h1 span { font-size: 1.3em; color: #730d0d; }

#main-story { width: 632px; height: 224px; background: url('../images/main-story-bg.jpg') no-repeat center top; float: left; position: relative; }
	#main-story h2 { margin: 0; padding: 40px 204px 0 202px; font-size: 1.5em; color: #1067b4; }
	#main-story p { margin: 0; padding: 5px 164px 0 195px; color: #000; font-size: 1.05em; font-weight: bold; line-height: 1.25; text-align: center; }
	#really-good-school-dinner-link { width: 134px; height: 41px; left: 307px; position: absolute; bottom: 23px; }
	#really-good-school-dinner-logo { left: 11px; top: 6px; position: absolute; }

#dump-your-junk { width:448px; margin-left: 32px; height: 232px; background: url('../images/dump-your-junk-bg.jpg') no-repeat center top; float: left; position: relative; display: inline; }
	#dump-your-junk h2 { margin: 0; padding: 25px 40px 0 96px; font-size: 1.7em; }
	#dump-your-junk p { margin: 0; padding: 19px 16px 0 168px; font-size: 1.15em; line-height: 1.3; text-align: center; }
	#dump-your-junk-link { width: 134px; height: 41px; left: 240px; position: absolute; bottom: 23px; }
	#dump-your-junk-logo { left: 6px; top: 72px; position: absolute; }

#snack-dash { width: 448px; margin-right: 32px; height: 232px; background: url('../images/snack-dash-bg.jpg') no-repeat center top; float: right; position: relative; display: inline; }
	#snack-dash h2 { margin: 0; padding: 25px 40px 0 202px; font-size: 1.7em; }
	#snack-dash p { margin: 0; padding: 27px 60px 0 206px; font-size: 1.15em; line-height: 1.3; text-align: center; }
	#snack-dash-link { width: 134px; height: 41px; left: 180px; position: absolute; bottom: 23px; }
	#snack-dash-logo { left: 2px; top: 5px; position: absolute; }

/* Flash area placements */
#dump-your-junk-flash { width:960px; height: auto; margin: 32px auto 0 auto; position: relative; text-align: center; }
#really-good-school-dinner-flash { width:800px; height: 600px; margin: 32px auto 0 auto; position: relative; text-align: center; }
#snack-dash-flash { width:480px; height: 377px; margin: 32px auto 0 auto; position: relative; text-align: center; }
#no-flash { margin: 0; padding: 0; }


#no-flash p { margin: 0; padding: 30px 0 0 0; font-size: 1.5em; line-height: 1.2; text-align: center; }


/* footer */
#footer { width: 976px; height: 200px; background: url('../images/footer-bg.gif') no-repeat center top; color: #fff; clear: both; }
	#footer p { margin: 0; padding: 60px 0 0 156px; font-size: 1em; line-height: 1.3; text-align: center; color: #000; }
		#footer p span { font-weight: bold; }
	#footer a { color:#000; }

/*-----------------------------
 	Navigation
 ----------------------------*/
#nav { left: 208px; top: 40px; width: 768px; height: 64px; position: absolute; }
	#nav em { display: none; }
	#nav ul { float: left; list-style-type: none; }
		#nav li { display: inline; float:left; margin: 0; padding: 0; }
		#nav li a { display: block; height: 64px; }
		
		#nav li a.really-good-school-dinner { background: transparent url('../images/navigation/really-good-school-dinner.jpg') no-repeat scroll left top; width:184px; }
		#nav li a.really-good-school-dinnerActive { background: transparent url('../images/navigation/really-good-school-dinner.jpg') no-repeat scroll left bottom; width:184px; }
		
		#nav li a.dump-your-junk { background: transparent url('../images/navigation/dump-your-junk.jpg') no-repeat scroll left top; width:192px; }
		#nav li a.dump-your-junkActive { background: transparent url('../images/navigation/dump-your-junk.jpg') no-repeat scroll left bottom; width:192px; }
		
		#nav li a.snack-dash { background: transparent url('../images/navigation/snack-dash.jpg') no-repeat scroll left top; width:184px; }
		#nav li a.snack-dashActive { background: transparent url('../images/navigation/snack-dash.jpg') no-repeat scroll left bottom; width:184px; }
		
		#nav li a:hover { background-position: left bottom; }

/*-----------------------------
 	Main PNG image placements
 ----------------------------*/
#sonic { width:110px; height:159px; padding:0; margin: 402px 0 0 870px; position:absolute; z-index:10; }
#burger { width:262px; height:87px; padding:0; margin: 624px 0 0 4px; position:absolute; z-index:10; }

#frame-left { width:13px; height: 368px; left: 0px; top: 0px; position: absolute; }
#frame-right { width: 23px; height:377px; right: 0px; top: 0px; position: absolute; }
#frame-top { width: 480px; height: 10px; right: 0px; top: 0px; position: absolute; }
#frame-bottom { width: 480px; height: 10px; left: 0px; bottom: 0px; position: absolute; }