/* temporary css, based on (and changed from) CSS Grid Layout 2 https://www.quackit.com/html/templates/simple_website_templates.cfm - the Terms of Use stated at the time of download "Some parts of the site have free templates that you can download and use. There are also code examples throughout the site. You can copy these and use in your own projects without asking permission." (https://www.quackit.com/terms_of_use.cfm) 
04.2018	
*/

body { 
	display: grid;
	grid-template-areas: 
		"header header header"
		"nav article rightcol"
		"footer footer footer";
	grid-template-rows: 80px 1fr 70px;	
	grid-template-columns: 20% 1fr 15%;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	height: 100vh;
	margin: 0;
	}	
header, footer, article, nav, div {
	padding: 1.2em;
	/* background: gold; 
	background: #fffafa; */
	background: #fff5ee;
	}
#pageHeader {
	grid-area: header;
	}
#pageFooter {
	grid-area: footer;
	}
#mainArticle { 
	grid-area: article;			
	}
#mainNav { 
	grid-area: nav; 
	}
#siteRightCol { 
	grid-area: rightcol; 
	} 
/* Links */	
header a, div a, nav a {
	text-decoration: none;
	} 
header a:link {
	color: #674846;
	}
a:link {
	color: #006994; 
	}
a:hover {
	background: #ffba00; 
	}
/* Various */
header {
	font-size: 1.5em;
	font-weight: bold;
   letter-spacing: 1px; 
	}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
	body { 
/*	grid-template-areas: 
			"header"
			"article"
			"rightcol"
			"nav"
			"footer"; */ 
		grid-template-areas: 
			"header"
			"nav"
			"article"
			"rightcol"
			"footer";
/*		grid-template-rows: 80px 1fr 70px 1fr 70px; */	
		grid-template-rows: 80px 1fr 1fr 70px 70px;
		grid-template-columns: 1fr;
 	}
}