h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
}
body {
	width: 711px;
	margin: auto;
	float: center;
}
section{
	display: table;
	width: 711px;
	margin: auto;
	float: center;
}
/* this, in conjunction with the section display: table, causes the menu to sit beside the content; this will be overridden for displays smaller than 711px */
#menu, #content{
	display: table-cell;
}
#menu{
	width: 160px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
}
/* this creates space around each menu item */
#menu div{	
	padding: 3px;
}
#footer{
	text-align: center;
}
#content{
	padding: 3px;
	text-align: left;
}
#contact{
	text-align: center;
}
#header{
	padding: 3px;
	padding-top: 10px;
}
/*swap menu location and start scaling header if viewport is smaller than default header size*/
@media (max-width: 711px){
	body{
		width: 100%;
	}
	section{
		width: 100%;
		display: block;
	}
	#menu, #content{
	display: block;
	}
	#header  img{
		width: 100%;
	}
	#header {
		padding: 3px;
		padding-top: 3px;
	}
	#menu{
		width: 100%;
	}
	#menu div{
		display: inline;
	}

}