body {
	background: #333;
}
#all {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #FFF;
}
#main_content {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
a:link {
	text-decoration: none;
	font-weight: bold;
	font-size: 1.12em;
	color: #960;
}
a:active {
	text-decoration: underline;
	font-weight: bold;
	font-size: 1.12em;
	color: #F90;
}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	font-size: 1.12em;
	color: #F90;
}
a:visited {
	text-decoration: none;
	font-weight: bold;
	font-size: 1.12em;
	color: #960;
}

/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav {
	border-bottom: solid 1.5px #FF9900;
}
nav ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap; /*. Allow navigation items to wrap */
	word-break: break-all; /*. Prevent text overlap */
}
nav li {
	margin: .2em;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
nav li.search-form {
	margin-right: 1em;
	margin-left: auto;
}

/* -------------------------------------------------- 
   sidebar
-----------------------------------------------------*/
aside {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	-webkit-flex: .5;
	-ms-flex: .5;
	flex: .5;
}
.links {
	list-style: none;
}
.links li {
	margin: .5em auto .5em -.5em;
}
.side a:link {
	text-decoration: none;
	font-weight: bold;
	font-size: .9em;
	color: #960;
}
.side a:active {
	text-decoration: underline;
	font-weight: bold;
	font-size: .9em;
	color: #F90;
}
.side a:hover {
	text-decoration: underline;
	font-weight: bold;
	font-size: .9em;
	color: #F90;
}
.side a:visited {
	text-decoration: none;
	font-weight: bold;
	font-size: .9em;
	color: #960;
}

/* -------------------------------------------------- 
   main content columns
-----------------------------------------------------*/
.left {
	-webkit-flex: 1; /*. Set flex for all columns to 1 */
	-ms-flex: 1;
	flex: 1;
	padding: .5em;
	background-color: #ffe6cc; /*4. Unique background */
	color: #333; /*text color */
}
.center {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: .5em;
	background-color: #e6f7ff; /*4. Unique background */
	color: #000; /*text color */
}
.right {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: .5em;
	background-color: #e6ffe6; 
	color: #111; 
}
/* -------------------------------------------------- 
   footer
-----------------------------------------------------*/
footer {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center; /*5. Center alignment */
	-ms-flex-pack: center;
	justify-content: center;
}
.footer_info {
	padding: .3em;
	font-size: 1.1em;
}

/* -------------------------------------------------- 
   6. MEDIA QUERY (for screens under 700px)
-----------------------------------------------------*/
@media screen and (max-width: 700px) {

	/* Stack main content vertically */
	#main_content {
		flex-direction: column; /* display vertically */
	}

	/* Sidebar links display horizontally */
	aside {
		flex-direction: row; /* change to horizontal layout */
		justify-content: center;
	}
	.links {
		display: flex;
		flex-wrap: wrap;
	}
	.links li {
		margin: auto .3em auto; /* margin for horizontal layout */
	}

	/* Footer adjustments */
	footer {
		flex-direction: row; /* footer in a row */
		flex-wrap: wrap; /* allow wrapping */
		justify-content: center;
	}
}