/*	#####	layout css			#####	*/

html, body					{	background-color:#fff;	}

*							{	margin:0;padding:0; box-sizing:border-box; }
							
header, footer, main, article, nav, aside
							{	border:1px solid #fff; border-radius:10px; }
							
#bodywrap					{	min-height:99.5vh; overflow:hidden; 
								display:flex; flex-flow:column;	} /* nowrap default */

header, footer				{	flex:none;
								display:flex; flex-flow:row;
							}
header						{	height:45px;	}
footer						{	height:60px;	}
main						{	flex:1 1 auto;
								display:flex; flex-flow:row;	
							}
article						{	flex:auto; order:2; overflow:auto; }
#nav						{	font-size:12px; }
nav							{	flex:none; order:1; width:12rem; }
aside						/*{	flex:auto; order:3; max-width:20vw; min-width:0}*/
{	flex:none; order:3; flex-basis:15rem; }
article, nav, aside			{	min-height:40vh; }

nav, aside					{	background-color:#bbd;	}
article						{	background-color:#eef;	}
header, footer				{	background-color:#ddf;	}
.mainhead, .bigfoot			{	flex-basis:50vw; }

/*	#####	static sections		#####	*/

footer > div, header > div		
					{	flex:auto; }

#f1, #datetime		{	order:1; text-align:left; }
#f2, #headline		{	order:2; text-align:center; }
#f3, #login			{	order:3; text-align:right; }

/*	#####	reduced display area	#####	*/

@media all and (max-width: 640px)
{	#main
	{	flex-flow:column; flex:1 1 auto; }
	#main > article,#main > nav, #main > aside
	{	order:0; 			}
	#main > article
	{	min-height:60vh; overflow:auto; }
	#nav, #aside
	{	min-height:20vh; min-width:100vw; overflow:auto; }
	#footer, #header
	{	flex-flow:column; }
	#footer
	{	height:auto; }
	#footer > div, #header > div
	{	flex:none; order:0; text-align:center; min-width:100vw; height:auto; }

}