*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html 
{
    color: #222;
    font-size: 100%; /*1em;*/ /* use percent here allow use of em or percent on elements to resize */
    line-height: 1.1;
	font-family: sans-serif;
}
	
body 
{
	height:100%;
	overflow: hidden;
	margin:0;
	padding:0;
	
	
	
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
	
header
{
	background: #ddd;
	border-bottom: 10px solid white;
	padding: 10px;
	
	z-index:2; /* header contents covered by section, so move above section */
	
	
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

footer
{
	/****************************/
	background: #ddd;
	border-top: 10px solid white;
	padding: 10px;
	
	z-index:2; /* footer contents covered by section, so move above section */
	
    font-size: 80%; /*1em;*/ /* use percent here allow use of em or percent on elements to resize */
    line-height: 1.1;
	font-family: sans-serif;

	
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	
}
	
section
{
		
	/* gives overflow for contained elements where needed (requires css config...see below) */
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
	
	
	/*****************************/
	margin-bottom:-80px;
	padding-bottom:80px;
	
	
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
	
	
	
	-webkit-flex: 1 0 auto;
	-moz-flex: 1 0 auto;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	
	
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
	
nav 
{
	background: #ddd;
	border-right: 10px solid white;
	padding: 10px 2px 0px 10px;

	z-index:2; /* nav contents covered by section, so move above section */
	
	display: inline-block /*block*/;
	
	-webkit-flex: 0 0 auto;
	-moz-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}

nav > button, nav > a
{
	display: block; /* navigation elements are block (stacked) */
}
	
	
article 
{
	background: white;
	border: 10px solid gray;
	padding: 10px;
	
	/* margin-bottom:50px; added to provide footer space at the bottom of the article */
	
	
	
	/* gives overflow to this element when a child of a configured parent element...see above) */
	overflow: auto;
    height: auto;
    -webkit-overflow-scrolling: touch; 
	overflow-scrolling: touch;  /* provides the "coasting" scroll effect on touch devices (iphone/ipad/etc...) */



	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}

	
	
	
	
	
	
@media all and (max-width: 959px)
{
	section
	{
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
		
	nav 
	{
		border: none;
		-webkit-flex: 0 0 auto;
		-moz-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	
	nav > button, nav > a
	{
		display: inline-block; /* navigation elements are inline-block (inline) */
	}

}