/* */
body { 
  display: grid;
  grid-template-areas: 
    "header article"
    "nav article";
  grid-template-rows: 1fr 3fr;
  grid-template-columns: 30% 1fr;
  grid-gap: 1px;
  height: 100vh;
  margin: 0;		
  background: #94ff94;
  font: 1em/1.5em Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
header, article, nav, div {
  padding: 5px;
  background: #94ff94;
}
img {
	width: 98%;
	height: auto;
	z-index: 1;
	position: absolute;
}
nav {
	padding: 0;
	display: grid;	
	grid-template-areas:
		" ... ... "
		"play what"
		"back next"
		"first last"
		" ... ... ";
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
}
button {
	background-color: #0066cc;
	border-radius: 0.71em;
    color: #fff;
	height: 2.3em;
    width: 5.7em;
	cursor: pointer;
	margin: 0 auto;
}
button:hover {
	background-color: #ff00ff;
}
.tagline {
	float: right;
	margin-right: 5%;
}
.titleBar { 
  display: inline;
}
.map {
    top: 0; 
    left: 0;
}
p.map {
	display: inline-block;
    position: absolute;
	text-align: right;
	right: 2.75%;
    margin-top: 2.5%;
    font-size: 5vh;
    color: lightgray;
    font-weight: bold;
    z-index: 4;
}
/* Used on nav buttons when auto playing */
.disarm {
	cursor: auto;
	background: grey;
	color: grey
}
.disarm:hover {
	cursor: auto; 
	background: grey;
	color: grey
}
.arm {
	cursor: pointer;
}
#pageHeader {grid-area: header;}
#mainArticle {grid-area: article;}
#mainNav {grid-area: nav;}

#arrowBut {grid-area: what;}
#playBut {grid-area: play;}
#nextBut {grid-area: next;}
#backBut {grid-area: back;}
#unoBut {grid-area: first;}
#lastBut {grid-area: last;}
#slider {
	position: relative;
    float: left;
	width: 96%;
	height: auto;
}
#placeholder {
    z-index: -3;
	position: initial;
	top: 0; 
    left: 0;
}
#active , #arrows{
	z-index: 2;
}
#arrows {
	top: 0; 
    left: 0;
}
/* Minimum aspect ratio 2.1*/
@media (min-aspect-ratio: 21/10){
	body {grid-template-columns: 32% 1fr}
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 2/1) { /* 2 */
	body {grid-template-columns: 25% 1fr;}
	nav {
		grid-template-areas:
			" ... "
			"play"
			"what"
			"next"
			"back" 
			"last"
			"first"
			" ... ";
		grid-template-rows: 1fr 12% 12% 12% 12% 12% 12% 2fr;
		grid-template-columns: 1fr;
		justify-items: center;
	}
}
@media (max-aspect-ratio: 9/5) { /* 1.8 */
	body { 
		grid-template-columns: 20% 1fr;
	}
}
@media (max-aspect-ratio: 7/4) { /* 1.75 */
	body { 
		grid-template-columns: 18% 1fr;
	}
}
@media (max-aspect-ratio: 8/5) { /* 1.6 */
	body { 
		grid-template-columns: 15% 1fr;
	}
}
@media (max-aspect-ratio: 3/2) { /* 1.5 */
	body { 
		grid-template-areas: 
			"header header"
			"nav article";
		grid-template-rows: 8% 1fr;
		grid-template-columns: 12% 1fr;
	}
	p.map {font-size: 5vw;}
}
@media (max-aspect-ratio: 27/20) { /* 1.35 */
	body { 
		grid-template-areas: 
			"... header"
			"... article"
			"... nav";
		grid-template-rows: min-content max-content 1fr;
		grid-template-columns: 6.5% 1fr;
	}
	nav {
		grid-template-areas: 
			"... play what next back last first ...";
		grid-template-rows: 1fr;
		grid-template-columns: 2% 1fr 1fr 1fr 1fr 1fr 1fr 5%;
	}
}
@media (max-aspect-ratio: 5/4) { /* 1.25 */
	body { 
		grid-template-columns: auto 1fr;
	}
}
@media (max-width: 500px) {
	nav {
		grid-template-areas: 
			"play what"
			"next back"
			"last first";
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}
}
/* End */