/* HTML5 ELEMENTS ===================================================== */

article, aside, figure, footer, header, main, nav, section {
    display: block;
	}


/* CSS RESET ===================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, main, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
	}

ol, ul {
	list-style: none;
	}


/* CSS ===================================================== */

html {
	font-size: 62.5%;
    }

body { 
	font-family: "adobe-garamond-pro";
	color:rgb(0,0,0);
	max-width:102.6rem;
	margin:0 auto;
	padding:0 7.6rem;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	background-image:url("../resources/craft_paper.jpg");
	background-position: center top;
	/*background-image:url("../resources/38px_grid.png");
	background-position: center top;*/
	}

img { 
	width:100%;
	height: auto;
	}

/* HEADER ===================================================== */

header { 
	font-size:2.6rem;
	line-height:7.6rem;
	border-bottom:1px solid;
	overflow:auto;
	}

.logo {
	max-width:27rem;
	margin:0 auto;
	}

.logo img {
	vertical-align:bottom;
	}

.open_menu {
	display:none;
	}

nav ul {
	text-align:center;
	overflow:auto;
	}

nav ul li {
	display: inline-block;
	padding:0 1.2rem;
	}


/* BODY OF SITE ===================================================== */

main {
	overflow:auto;
	}

.main_column {
	width:70.37037037037037%;
	float:left; 
	}

h1 {
	font-size:8.4rem;
	font-weight:400;
	font-style:italic;
	text-align:center;
	line-height:1.130952380952381em;
	padding:0.666666666666667em 0 1.357142857142857em 0;
	border-bottom:1px solid rgb(0,0,0);
	margin-bottom:3.8rem;
	color:rgb(44,116,154);
	}

h2 { 
	font-size:2.6rem;
	line-height:3.8rem; 
	margin-bottom:3.8rem;
	}

p + h2 {
	padding-top:3.8rem;
	}

h3 { 
	font-size:2.6rem;
	line-height:3.8rem;
	font-style:italic;
	}
	
p { 
	font-size:2.6rem;
	line-height:3.8rem; 
	margin-bottom:3.8rem;
	}

main ul {
	list-style:disc;
	margin-left:2.6rem;
	font-size:2.6rem;
	line-height:3.8rem; 
	margin-bottom:3.8rem;
	}

.side_column, article img {
	width:22.222222222222222%;
	float:right;
	margin-bottom:3.8rem;
	}

article {
	border-bottom:1px solid rgb(0,0,0);
	margin-bottom:3.7rem;
	overflow:auto;
	clear:both;
	}
	

/* FOOTER ===================================================== */

footer {
	margin-top:11.4rem;	
	border-top:1px solid;
	padding-top:3.7rem;
	}

footer p { 
	font-size:2.4rem;
	}

.credit {
	font-size:1.8rem;
	padding-bottom:11.4rem;
	}


/* LINKS ===================================================== */

a:link { color:rgb(0,0,0); text-decoration:none; }
a:visited { color:rgb(0,0,0); text-decoration:none; }
a:hover { color:rgb(44,116,154); text-decoration:none; }
a:active { color:rgb(44,116,154); text-decoration:none; }

nav a:link { color:rgb(44,116,154); }
nav a:visited { color:rgb(44,116,154); }
nav a:hover { color:rgb(44,116,154); border-bottom:1px solid; }
nav a:active { color:rgb(44,116,154); border-bottom:1px solid; }

.active a { border-bottom:1px solid; }


/* RESPONSIVE ===================================================== */

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

	html {
		font-size: 58%;
		}

	.open_menu {
		display:block;
		text-align:center;
		color:rgb(44,116,154);
		}

	.middle:hover { border-bottom:1px solid; }

	nav  {
		display:none;
		border-top :1px solid;
		}

	.show_nav {
		display:block;
		}

	nav ul li {
		display: block;
		}

	.main_column {
		width:100%;
		float:none; 
		}

	.side_column, article img {
		width:40%;
		float:none;
		}

	.side_column {
		padding-top:3.8rem;
		}
}

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

	html {
		font-size: 50%;
		}

	body { 
		padding:0 2rem;
		}

	h1 {
		font-size:6.2rem;
		}
}