/* GENERIC */

a:link
{
	color: #0000bb;
}
a:visited
{
	color: #551a8b;
}
a:link:active
{
	color: #7f0000;
}
a:visited:active
{
	color: #7f0000;
}

article
{
	background: #efeed7;
	border: 1px solid lightgrey;
	border-radius: 0.75rem;
	color: black;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
}
article p:first-child
{
	margin-top: 0;
}
article p:last-child
{
	margin-bottom: 0;
}

body
{
	background: #006060;
	color: black;
    margin: 0;
    padding: 0;
}

div
{
    margin: 0;
    padding: 0;
}

footer
{
	background: white;
	border-radius: 0.75rem;
	color: black;
	font-size: small;
	margin: 0.5rem;
	padding: 0.5rem 0.75rem calc( 1.25rem + 32px ) 0.75rem;
	text-align: center;
}

h1
{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.75rem;
    margin: 0;
    padding: 0;
}

h2
{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.5rem;
    margin: 0;
    padding: 0;
}

header
{
	background: white;
	border-radius: 0.75rem;
	color: black;
	margin: 0.5rem;
	padding: 0.5rem 0.75rem;
}

hr
{
	border: 2px solid #006060;
	margin: 1.5rem auto 1rem auto;
}

html
{
	font-family: Verdana, Geneva, sans-serif;
}

main
{
	background: white;
	border-radius: 0.75rem;
	color: black;
	margin: 0.5rem;
	padding: 0.5rem 0.75rem;

	/* Needed for proper display in IE11 */
	display: block;
}

nav
{
    margin: 0;
    padding: 0;
}

p
{
    margin: 1em 0;
    padding: 0;
}

pre
{
	font-family: "Courier New", Courier, monospace;
    margin: 0;
    overflow: auto;
    padding: 0;
}

section
{
    margin: 0;
	padding: 0;
}

/* CLASSES */

div.banner
{
    margin: 0;
    padding: 0;
}
div.banner p
{
    margin: 0;
    padding: 0;
	text-align: center;
}
div.banner p:first-child
{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 2.5rem;
	font-weight: bolder;
}
div.banner p:last-child
{
	font-size: small;
	margin-bottom: 1rem;
}

div.pubhistory p
{
	font-weight: bold;
	margin-bottom: 0;
}
div.pubhistory ul
{
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

nav.helper
{
	background: #cfcfcf;
	color: black;
	font-size: small;
	padding: 0.25rem 0.5rem;
}
nav.helper ul
{
	display: flex;
	list-style-type: none;
    margin: 0;
    padding: 0;
}
nav.helper li
{
    margin: 0;
    padding: 0 0.5rem 0 0;
}
nav.helper li:not(:first-child)
{
    border-left: 1px solid black;
    padding: 0 0 0 0.5rem;
}

nav.primary ul
{
	list-style-type: none;
	display: block;
	margin: 0 auto;
    padding: 0;
	width: 100%;
}
nav.primary li
{
    margin: 0 0 0.25rem 0;
    padding: 0;
}

nav.primary a
{
	background: #b2cfcf;
	border: 2px solid black;
	border-radius: 0.5rem;
	color: black;
	display: flex;
	font-weight: bold;
	justify-content: center;
    margin: 0;
	padding: 0.375rem 1rem;
	text-decoration: none;
}
nav.primary a:focus, nav.primary a:hover
{
	background: #e2e2b3;
	color: black;
	text-decoration: underline;
}
nav.primary a.onpage
{
	text-decoration: overline;
}
nav.primary a.onpage:focus, nav.primary a.onpage:hover
{
	text-decoration: overline underline;
}

p.byline
{
	font-weight: bold;
    margin: 0.5rem 0 1.5rem 0;
}

p.dinkus
{
	text-align: center;
}

p.epistle
{
	text-align: center;
}

section.articleoids p
{
	background: #efeed7;
	border: 1px solid lightgrey;
	border-radius: 0.75rem;
	color: black;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
}
section.articleoids p:first-child
{
	margin-top: 0;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1023px)	/* [0,1024) */
{
	footer
	{
		background-image: url(img/foot-l.png);
		background-position: center calc(100% - 0.5rem);
		background-repeat: no-repeat;
	}
}

@media only screen and (min-width: 579px)	/* [579,inf) */
{

	header
	{
		background-position: calc(12.5% - 48px + 1rem) calc( 100% - 1rem + 96px - 1.75rem - ( ( 1.125rem + 2px ) * 8 ) ), calc(87.5% + 48px - 1rem) calc(100% - 1rem + 0.25rem);
		background-repeat: no-repeat, no-repeat;
	}

	header#page_about { background-image: url(img/about-l.png), url(img/about-r.png); }
	header#page_chronology { background-image: url(img/chronology-l.png), url(img/chronology-r.png); }
	header#page_home { background-image: url(img/home-l.png), url(img/home-r.png); }
	header#page_poem { background-image: url(img/poem-l.png), url(img/poem-r.png); }
	header#page_poems { background-image: url(img/poems-l.png), url(img/poems-r.png); }
	header#page_site-map { background-image: url(img/site-map-l.png), url(img/site-map-r.png); }
	header#page_stories { background-image: url(img/stories-l.png), url(img/stories-r.png); }
	header#page_story { background-image: url(img/story-l.png), url(img/story-r.png); }

	div.banner p:first-child
	{
		font-size: 3.5rem;
	}

	nav.primary ul
	{
		width: 50%;
	}
}

@media only screen and (min-width: 1024px)	/* [1024,inf) */
{
	body
	{
		background: linear-gradient(to bottom, black, #006060, black) no-repeat center /cover fixed;
		color: black;
		margin: 0 auto;
		max-width: 992px;
	}

	footer
	{
		background-image: url(img/foot-l.png), url(img/foot-r.png);
		background-position: 1.5rem center, calc(100% - 1.5rem) center;
		background-repeat: no-repeat, no-repeat;
		border: 1px solid white;
		border-radius: 1.5rem;
		box-shadow: 0px 0px 8px 8px #e2e2b3;
		margin: 32px 0 16px 0;
		padding: calc(0.25rem + 16px) 1.5rem;
	}

	header
	{
		background-position: 1.5rem 1.5rem, calc(100% - 1.5rem) 1.5rem;
		border: 1px solid white;
		border-radius: 1.5rem;
		box-shadow: 0px 0px 8px 8px #e2e2b3;
		margin: 16px 0 32px 0;
		padding: 0.5rem 1.5rem 1rem 1.5rem;
	}

	main
	{
		border: 1px solid white;
		border-radius: 1.5rem;
		box-shadow: 0px 0px 8px 8px #e2e2b3;
		margin: 32px 0;
		padding: 1rem 1.5rem 0.5rem 1.5rem;
	}

	div.banner p:first-child
	{
		font-size: 4.5rem;
	}
	div.banner p:last-child
	{
		margin-bottom: 1.5rem;
	}

	nav.primary ul
	{
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}
	nav.primary li
	{
		flex: 1 1 0px;
	}
	nav.primary a
	{
		margin: 0 2px;
	}
}