body {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 20px;
	background: #EDEDED;
}
#flexContainer {
  /* Specifies that the contents will be laid out according to Flexbox rules. */
	display: flex;
} 
header	{
	background: #707070;
	min-height: 100px;
	margin: 3px;
	padding: 3px;
}
nav {
	background: #C9BFBF;
	/* Shorthand property specifying flex-grow, flex-shrink, and flex-basis. */
	flex: 1 1 15%;
	min-width: 150px;
	margin: 3px;
	padding: 3px;
}
aside {
	background: #C9C9C9;
	/* Shorthand property specifying flex-grow, flex-shrink, and flex-basis. */
	flex: 1 1 15%;
	min-width: 150px;
	padding: 3px;
	margin: 3px;
}
#content {
	min-height: 800px;
	background: #ABABAB;
	/* Shorthand property specifying flex-grow, flex-shrink, and flex-basis. */
	flex: 2 1 70%;
	margin: 3px;
	padding: 3px;
}
footer	{
	background: #707070;
	min-height: 50px;
	margin: 3px;
	padding: 3px;
}
/* When the page is resized, use the styles below */
@media all and (max-width: 640px) {
	#flexContainer {
		/* Shorthand property specifying flex-direction and flex-wrap */
		flex-flow: column wrap;
	}
	
	header {
		min-height: 75px;
	}
	
	nav	{
		min-height: 50px;
		/* Specifying the order so the nav appears as the first item in the flex container */
		order: 1;
	}
	aside {
		min-height: 50px;
		/* Specifying the order so the nav appears as the second item in the flex container */
		order: 2;
	}		
	#content {
		/* Specifying the order so the nav appears as the third item in the flex container */
		min-height: 725px;
		order: 3;
	}
	footer {
		min-height: 25px;
	}
}