@charset "UTF-8";
/*
	simple printed text styling with responsive scaling
	Dan Wilcox 2016
*/

/* web fonts */
/*@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Source+Sans+Pro:400');*/

/* local fonts */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	src:
		local("Montserrat SemiBold"),
		local("Montserrat-SemiBold"),
		url("fonts/Montserrat-SemiBold.woff2") format("woff2"),
		url("fonts/Montserrat-SemiBold.woff") format("woff"),
		url(fonts/Montserrat-SemiBold.ttf) format("truetype");
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 400;
	src:
		local("Source Sans Pro"),
		local("SourceSansPro-Regular"),
		url("fonts/SourceSansPro-Regular.woff2") format("woff2"),
		url("fonts/SourceSansPro-Regular.woff") format("woff"),
		url(fonts/SourceSansPro-Regular.ttf) format("truetype");
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* ***** MAIN ***** */

/* white text on black background */
body {
	font-family: "Source Sans Pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background: #FFF;
	color: #000;
}

/* center in page with a little side space*/
#container {
	width: 90%;
	height: auto;
	margin: auto;
	padding-bottom: 0.5em;
	text-align: left;
}

/* per-page content, picked up by browser reader modes */
#content {}

/* ***** HEADER ***** */

/* space down a little from top, use as header class */
#siteheader {
	text-align: left;
	margin-top: 1em;
	margin-bottom: 2em;
}

/* upper left corner */
#sitename {
	display: block;
	float: left;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 110%;
	font-family: "Montserrat", "Verdana", "Geneva", sans-serif;
}

/* upper right corner, use as a nav class */
#sitenav {
	display: block;
	float: right;
	font-weight: bold;
	font-family: "Montserrat", "Verdana", "Geneva", sans-serif;
}

#sitenav ul {
	padding: 0;
	margin: 0;
}

#sitenav ul li {
	display: inline-block;
	padding: 0 0.25em;
}

/* ***** FOOTER ***** */

/* space down a little from page content above, use as footer class */
#sitefooter {
	margin-top: 2em;
	text-align: left;
}

/* lower left corner */
#copyright {
	float: left;
}

/* lower right corner */
#social {
	float: right;
}

/* sticky footer using css3 flexbox:
   https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
#container {
	display: flex;
	min-height: 96.5vh; /* use most of viewport height w/ room for footer */
	flex-direction: column;
}

/* sticky footer using css3 flexbox,
   allow flex resize so content pushes footer down */
#content {
	flex: 1;
}

/* ***** BREADCRUMBS **** */

/* smaller size */
#breadcrumbs {
	font-size: small;
	font-weight: normal;
}

/* ***** PAGINATION ***** */

.pagination {
	list-style: none;
	padding: 0;
	text-align: center;
}

.pagination li {
	display: inline-block;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* ***** FOOTNOTES ***** */

/* smaller text */
.footnotes {
	font-size: 80%;
}

/* a little wider, space down from page content */
.footnotes hr {
	width: 70%;
	margin-top: 2em;
}

/* ***** SYLING ***** */

/* header font */
h1, h2, h3, h4, h5, h6 {
	font-family: "Montserrat", "Verdana", "Geneva", sans-serif;
}

/* 4 headers oughta be enough for anyone */
h1 {
	font-weight: bold;
	text-transform: uppercase;
}

h2 {
	font-weight: bold;
}

h3 {
	font-weight: bold;
	text-decoration: underline;
}

/* simple colored links */
a {
	text-decoration: none;
	color: #0421EA;
}

/* a little hover interaction */
a:hover {
	text-decoration: underline;
}

/* accent rule */
hr {
	width: 50%;
	height: 1px;
	background-color: #CCC;
	border: 0;
}

/* attempt to autosize, limit max-width to page */
img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	margin: 0 auto;
	/* avoid blurry resizing on retina screens */
	image-rendering: crisp-edges;
}

/* centered figure & figcaption */
figure {
	text-align: center;
}

/* attempt to autosize, limit max-width to page */
video {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	margin: 0 auto;
}

/* attempt to autosize, limit max-width to page */
audio {
	max-width: 100%;
}

/* centered table with cell outlines & bold headers */
table, tr, th, td {
	margin: auto;
	padding: 0.5em;
	border-collapse: collapse;
	border: 0.1em solid #CCC;
}

/* allow table cell word wrapping */
td {
	word-wrap: break-word;
}

/* italics inset to left & right, small lefthand border */
blockquote {
	font-style: italic;
	margin-left: 2em;
	margin-right: 2em;
	padding-left: 0.5em;
	border-left: 0.15em solid #CCC;
}

/* allow word wrapping */
pre {
	white-space: pre-wrap;       /* CSS 3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* allow embeds to resize */
iframe {
	max-width: 100%;
	text-align: center;
}

/* ***** ITEM GRID ***** */

/* a centered grid of floating items */
.itemgrid {
	text-align: center;
}

/* a responsive floating div */
.item {
	display: inline-block;
	min-width: 200px; /* reasonable min size? */
	height: auto;
	position: relative;
	vertical-align: middle;
	margin: 10px;
	overflow: hidden;
}

/* ***** TABLES ***** */

/* make sure both cols try to use the available space,
   this makes tables with differing content roughly align vertically,
   use as table class */
.twocol td {
	width: 50%;
}

/* make sure all three cols try to use available space,
   use as table class */
.threecol td {
	width: 33%;
}

/* ***** HELPERS ***** */

/* center things */
.centered {
	text-align: center;
}

/* left align things */
.left {
	text-align: left;
}

/* right align things */
.right {
	text-align: right;
}

/* left align things but allow them to be centered by a parent */
.inlineleft {
	display: inline-block;
	text-align: left;
}

/* no border please, mostly applicable to tables */
.noborder, .noborder table, .noborder tr, .noborder td, .noborder th {
	border: none;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

/* clear preceding floats */
.clearfix {
	float: none;
	clear: both;
}

/* extra space between embeds */
.embed {
	margin-bottom: 1em;
}

/* ***** SCALING ***** */

/* Sumo Devices, Huge Screens */
@media only screen and (min-width : 1440px) {

	/* limit size */
	#container {
		width: 60%;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

	/* stop floating so these can be centered */
	.item {
		float: none;
		display: inline-block;
	}

	/* let cells autosize */
	.twocol, .threecol td {
		width: auto;
	}

	/* allow for resizing iframes
	   http://avexdesigns.com/responsive-youtube-embed */
	.embed {
		height: 0;
		display: block !important;
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
	}

	/* allow for resizing iframes */
	.embed iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

	/* use full size */
	#container {
		width: 100%;
	}

	/* center floating elements */
	#sitename, #social, #copyright {
		text-align: center;
		width: 100%;
	}

	/* center nav */
	#siteheader {
		text-align: center;
	}

	/* center nav below sitename */
	#sitenav {
		display: inline-block;
		float: none;
		margin-top: 1em;
	}

	/* add margin to space out from #social above */
	#copyright {
		margin-top: 1em;
	}

	/* attempt to autosize embeds */
	iframe {
		width: auto;
		height: 100%;
	}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {}