/* body text fonts (serif) */
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-regular.ttf);
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-italic.ttf);
	font-style: italic;
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-bold.ttf);
	font-weight: bold;
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-bolditalic.ttf);
	font-style: italic;
	font-weight: bold;
}

/* header, section, and caption fonts (sans-serif) */
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-regular.otf);
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-italic.otf);
	font-style: italic;
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-bold.otf);
	font-weight: bold;
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-bolditalic.otf);
	font-style: italic;
	font-weight: bold;
}

/* alternate font (more designer-style) */
@font-face{
	font-family: Adelle;
	src: url(fonts/adelle-regular.otf);
}
@font-face{
	font-family: Adelle;
	src: url(fonts/adelle-italic.otf);
	font-style: italic;
}

/* text styles */
h1, h2, h3, h4, h5, h6 {
	font-family: Serpentine;
	font-weight: bold;
	color: #007f3e; /* primary color */
	line-height: 1;
}

h1+h2, h2+h3, h3+h4 {
	margin-top: -.8em;
}

h3.dept {
	font-family: Adelle;
	font-style: italic;
	color: #007f3e; /* primary color */
	border-bottom: 4px solid #276bad; /* secondary color */
	padding-bottom: 2px;
}

figcaption {
	font-family: Serpentine;
	font-size: 1rem;
	color: #007f3e; /* primary color */
	padding: 2rem 3rem;
}

.contents h1, .contents h2 {
	color: #276bad; /* secondary color */
	font-family: Adelle;
	font-size: 2rem;
	font-style: italic;
}

.title {
	font-variant: small-caps;
}

.author {
	font-style: italic;
	text-align: right;
}

.italic, .caption-credit {
	font-style: italic;
}

.italic em {
	font-style: normal;
}


/* sections */
body {
	font-family: Antiqua;
	font-size: 1.25rem;
	line-height: 1.66;
	margin: 0;
	padding: 0;
}

a#header-bar {
	background-color: #007f3e; /* primary color */
	display: block;
	text-decoration: none;
	position: fixed; /* Make it stick/fixed */
	top: 0; /* Stay on top */
	width: 100%; /* Full width */
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

a header {
	margin: 0 auto;
	max-width: 720px;
	padding: 1.4rem 0 .6rem;
	width: 100%;
}

a header img {
	display: block;
	float: left;
	height: 3rem;
	margin-top: -.8rem;
}

a header p {
	color: white;
	font: italic bold .8rem arial, sans-serif;
	line-height: 1.25rem;
	margin: 0 4%;
	padding-top: .25rem;
	text-align: right;
}

main {
	max-width: 720px;
	margin: 6.5rem auto 5rem;
}

main header {
	border-bottom: 1px solid #276bad; /* secondary color */
	margin: 0 4% 40px;
	position: relative;
	z-index: 500;
}

main header img.logo {
	width: 50%;
}

main header img.cover {
	box-shadow: 0px 5px 10px gray;
	text-align: right;
	/*margin-right: 1rem;*/
	width: 10vw;
}

main header img.column-logo {
	float: right;
	width: 6vw;
}

article {
	margin: 0 6%;
}

article p:first-child:first-letter {
	color: #007f3e; /* primary color */
	float: left;
	font-size: 7rem;
	line-height: .75;
	padding-top: 0.2rem;
	padding-right: 0.3rem;
	margin-bottom: -0.2rem;
}

aside {
	border-left: 3px dotted #276bad; /* secondary color */
	font-size: 1.1rem;
	line-height: 1.66;
	margin: 3rem 0;
	padding-left: 2rem;
}

footer.article-end {
	background-color: #EEEEEE;
	margin: 2rem 0 0 0;
	padding: 0.5rem 6%;
}

a#footer-bar {
	background-color: #007f3e; /* primary color */
	display: block;
	text-decoration: none;
	text-align: center;
	color: white;
	font: italic bold .8rem arial, sans-serif;
	position: fixed; /* Make it stick/fixed */
	bottom: 0; /* Stay on bottom */
	width: 100%; /* Full width */
}

/* blocks */
figure {
	margin: 3rem 0;
	border: 1px solid #999;
}

img {
	max-width: 100%;
}

img.shadow {
	box-shadow: 0px 5px 20px #999;
}

figure img.shadow {
	max-width: 90%;
	margin: 2rem 5% 0;
}

figure img.shadow:last-child {
	max-width: 90%;
	margin: 0 5% 2rem;
}

hr {
	margin: 5rem 0;
}

header hr {
	margin: 0;
}

.author img {
	margin-top: -2rem;
	width: 16rem;
}

img.end-marker {
	height: 1rem;
	margin-bottom: -1px;
}

@media only screen and (max-width: 720px) {

	main {
		margin-bottom: 3rem;
	}

	.contents header {
		margin: 1rem;
	}

	.contents footer figure {
		display: block;
		padding: 0 2rem;
	}

	.links {
		display: block;
		text-align: center;
	}

	.links .btn {
		border-radius: .5rem;
		display: block;
		font-size: 1rem;
		margin-top: 1rem;
		padding: 1rem;
	}
}

@media print {
	#header-bar, #footer-bar {
		visibility: hidden;
	}
	main {
		margin: auto;
	}
}