/*
	page-layout.css
*/

html {
	background: #EEE;
}

body {
	margin: 0;
	padding: 0;
	background: #EEE;
}




section,
header .container,
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;
}


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;
}

article h1>a {
	display: inline-block;
	max-width: calc(100% - 94px);
}

/* sticky song title */
@media screen {
	article h1 {
		position: sticky;
		top: 2.9em;
		padding-top: 0.7em;
		margin-top: 0;
		background: white;
		box-shadow: 0px 8px 8px white
	}
}

@media print {
	.top {
		display: none;
	}
}


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

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

@media only screen
and (min-width: 700px)
and (max-width: 1350px)
and (max-height: 768px) {
	header .container,
	footer .container {
		margin-left: 298px;
	}
}

@media only screen
and (min-width: 700px)
and (max-width: 1350px){
	section {
		margin-left: 328px;
		margin-right: 15px;
	}
	nav {
		width: 280px;
	}
}

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

@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 width or height */
@media only screen
and (max-height: 768px),
only screen
and (max-width: 400px) {
	header {
		height: 3.86em;
	}
	#headerPlaceholder {
		height: 3.86em;
	}
	header h1 {
		font-size: 1.2em;
		margin: 0.6em 0 0 0;
	}
	article .ancor {
		top: -3.5em;
	}
	article h1 { /* part of sticky song title */
		top: 2.3em;
		font-size: 1.4em;
	}
	article h1>a {
		display: inline-block;
		max-width: calc(100% - 78px);
	}
}

/* no sticky song title on small viewport height */
@media only screen
and (max-height: 480px) {
	article h1 {
		position: initial;
		top: initial;
	}
}