/*
	page-layout.css
*/

html {
	background: #EEE;
}

body {
	margin: 0;
	padding: 0;
}




section,
nav {
	max-width: 540px;
	margin: auto;
}

header,
footer {
	width: 100%;
	margin: 0;
	color: white;
	background: #00529b;
	text-align: center;
}

header h1 {
	color: white;
}

header {
	user-select: none;
	margin-bottom: 32px;
}
header .container {
	margin-left: 32px;
}


footer {
	margin-top: 32px;
}

nav,
article {
	background: white;
}

header,
nav,
footer,
article {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.container,
article {
	padding: 8px;
}

@media only screen
and (max-height: 540px) {
	nav {
		height: 100%;
		overflow: scroll;
	}
}

@media only screen
and (min-width: 860px)
and (max-height: 768px) {
	nav {
		top: 0 !important;
		z-index: 2;
	}
}

@media only screen
and (min-width: 860px)
and (max-width: 1185px){
	section {
		margin-left: 298px;
	}
}

@media only screen
and (min-width: 860px) {
	nav {
		position: fixed;
		left: 32px;
		top: 128px;
	}
}

@media only screen
and (min-width: 860px)
and (max-width: 1185px) {
	nav {
		width: 250px;
	}
}

@media only screen
and (min-width: 1185px) {
	section {
		margin: auto;
	}
}


/* sticky header stuff */
@media screen {
	header {
		position: fixed;
		top: 0;
		z-index: 2;
		height: 6em;
	}
	#headerPlaceholder {
		height: 6em;
	}
	article .ancor {
		position: relative;
		top: -8.45em;
		display: block;
		visibility: hidden;
	}
}

/* smaller header on small viewport height */
@media only screen
and (max-height: 540px) {
	header {
		height: 3.86em;
	}
	#headerPlaceholder {
		height: 3.86em;
	}
	header h1 {
		margin: 0.1em 0;
	}
	article .ancor {
		top: -3.5em;
	}
}