@charset "utf-8";
/* CSS Document */

body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	text-indent: 30px;
	font-size: 18px;
	line-height: 50px;
}

#main {
   	height: 80%;
	display: -moz-flex;
   	display:         -webkit-box;
   	display:         -webkit-flex;
   	display:         -ms-flexbox;
   	display:         flex;
   	-webkit-flex-flow: row;
   	    -ms-flex-flow: row;
   	        flex-flow: row;
}

#main section {
	background: #CFC;
	-webkit-box-flex: 3;
	-webkit-flex: 3 1 70%;
	    -ms-flex: 3 1 70%;
	        flex: 3 1 70%;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	    -ms-flex-order: 2;
	        order: 2;
	margin: 1% 0.5% 1% 0.5%;
   	display:         -webkit-box;
   	display:         -webkit-flex;
   	display:         -ms-flexbox;
   	display:         flex;
   	-webkit-flex-flow: column;
   	    -ms-flex-flow: column;
   	        flex-flow: column;
}

#main nav {
	background: #CCF;
	-webkit-box-flex: 1;
	-webkit-flex: 1 6 15%;
	    -ms-flex: 1 6 15%;
	        flex: 1 6 15%;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	    -ms-flex-order: 1;
	        order: 1;
	margin-top: 1%;
	margin-bottom: 1%;
}

#main aside {
	background: #CCF;
	-webkit-box-flex: 1;
	-webkit-flex: 1 6 15%;
	    -ms-flex: 1 6 15%;
	        flex: 1 6 15%;
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	    -ms-flex-order: 3;
	        order: 3;
	margin-top: 1%;
	margin-bottom: 1%;
}

#main header {
	background: #FC6;
	-webkit-box-flex: 1;
	-webkit-flex: 1 6 15%;
	    -ms-flex: 1 6 15%;
	        flex: 1 6 15%;
	margin: 1% 1% 1% 1%;	
}

#main article {
	background: lightskyblue;
	-webkit-box-flex: 3;
	-webkit-flex: 3 1 60%;
	    -ms-flex: 3 1 60%;
	        flex: 3 1 60%;
	margin: 0% 1% 0% 1%;
}

#main footer {
	background: #FC6;
	-webkit-box-flex: 1;
	-webkit-flex: 1 6 15%;
	    -ms-flex: 1 6 15%;
	        flex: 1 6 15%;
	margin: 1% 1% 1.5% 1%;	
}

header, footer {
	display: block;
	min-height: 10%;
	background: #FC6;
}

header, footer, nav, article, section, aside {
	border: 1px solid black;
}