html, body {
	margin: 0;
	padding: 0;
	background-image:url(../streetfoodquiz/greybg.png);
	font-family: Arial, Helvetica, sans-serif;
	}

#instruct {
	font-size:26px;
	color:white;
	text-align:center;
}	
	
#navContent{
	margin:auto;
	width:600px;
	height:800px;
	position:relative;
	overflow:hidden;
	}
#game1{
	margin:auto;
	width:600px;
	height:800px;
	right:0px;
	position:absolute;
	}
#game2{
	margin:auto;
	width:600px;
	height:800px;
	right:-800px;
	position:absolute;
	}

.questionText{
	font-size:27px;
	color:#FFF;
	}
.option{
	width:550px;
	height:35px;
	margin:15px;
	font-size:20px;
	color:#FFFFFF;
	padding:2px;
	padding-left:10px;
	border: 2px solid white;
	cursor:pointer;
	background-color:#3399FF;
}
.option:hover{
	border:#FC0 solid 2px;
	color:#FC0;
}

#topbar{
	height:50px;
	margin:auto;
	margin-top:50px;
	color:#FFF;
	font-size:36px;
	font-family:Arial, Helvetica, sans-serif;
	width:1100px;
	border-bottom:solid white 1px;
	text-align: center;
}

.spacer{
	height:30px;
}

.feedback1{
	width:150px;
	padding:5px;
	font-size:30px;
	color:#FFFFCC;
	background-color:#009900;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
}

.feedback2{
	width:150px;
	padding:5px;
	font-size:30px;
	color:#FFFFCC;
	background-color:#CC3300;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
}

@media screen and (max-width:800px) {
	#topbar {margin-left:1%; margin:1%;margin-top:1px; width:96%;height:20px;font-size:15px;}
	#instruct {margin-left:1%; margin:1%;margin-top:10px;margin-bottom:5px; width:98%; height:20px;font-size:15px;color:white;text-align:center;}
	#navContent{margin:1%; width:98%;}
	#game1{margin:1%; width:98%;}
	#game2{margin:1%; width:98%;}
	.spacer{height:0px;}
	img {margin-right:5%; max-width:300px; height:220px}
	.questionText{font-size:18px;}
	.option{font-size:15px}
}

@media screen and (max-width:460px) {
	.option{width:80%; margin-top:5%;}
}