html {font-size: 18px;} /* 1rem = 18px */


body {
	font-family: serif;
	line-height: 1.45;
	color: #000;
	margin: 0;
	}
a:hover{color:red;}

div#wrapper {
	margin-top: 4rem;
	margin-left: 10%;
	width: 80%;
	}

h1, h2, h3, h4 {
	font-family: sans-serif;
	margin-bottom: 0;
	}
h2, h3, h4, p, ol, ul { /* H1 is as wide as screen. Other elements use 30em width column */
	max-width: 30em;
	}

/* TYPESCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
h1 { /* Standard page title */
	font-size: /* 2.25rem */ 3.375rem;
	line-height: 1em;
	margin-bottom: 2rem; } 
h1.hub { /* GIANT page title for hub screens */
	font-size: /* 3.375rem */ 5.063rem;
	line-height: 1em;
	}
h2 {font-size: 1.5rem;}
h3 {font-size: 1rem;}
h4 {font-size: 1rem; font-style: italic; }


p {	margin-top: 0;} /* Pushes Ps to right after Hns */
p.lede {font-size: 1.5rem } /* Large size lead paragraph */
p.caption, p.date { /* .caption used in IMG divs. .date used for last updated lines on various screens */
	font-family: sans-serif; 
	font-size: 0.667rem;
	width: 100%;
	}
p.tagline { /* Used above the title on Method screens to summarize the Method */
	font-family: sans-serif;
	font-size: 1.5rem;
	font-weight: 200;
	width: 100%;
	}

dt {font-family: sans-serif; font-weight: bold;}
dd {margin-bottom: 1rem;}

ul, ol {margin-bottom: 1rem;}
ol ol, ul ul {margin-bottom:0;}
ol ol {list-style-type: lower-alpha;}



/*
	TABLE components
*/
div.table {overflow-x:auto;} /* Adds horizontal scrollbar to tables with content that's too wide */ 
table { /* By default, table width collapses to contents */
	border-collapse: collapse;
	margin: 1rem 0 2rem 0;
	}
th, td {
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px solid #ddd;
	}
thead th {
	border-bottom: 3px solid #ddd;
	padding-bottom: 0.25rem;
	}
tr:hover {background-color: #efefef;}

table.wide { /* Wide tables stretch to 100% when that makes content easier to consume */
	font-family: sans-serif;
	font-size: 0.667rem;
	width: 100%;
	}
caption { /* Table caption */
	font-family: sans-serif; 
	font-size: 1rem;
	padding: 0.5rem;
	}
	


/*
	IMAGE components
	Only difference between markup for both image components is class on the container div.
*/
div.image { /* container to sandbox stretched images */
	margin: 2rem 0;
	}
div.image img { /* By default, images stretched to 100% width */
	border: 1px solid #efefef;
	width: 100%;
	}
div.image p.caption {
	text-align: center;
	color: #666;
	max-width: 100%;
	}

div.image-small { /* "Small" images are stretched to 50% width */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin: 2rem 0;
	}
div.image-small img {
	border: 1px solid #efefef;
	width: 50%;
	}
div.image-small p.caption {
	font-size: 1rem;
	color: #666;
	margin-left: 1rem;
	margin-bottom: 0;
	width: 50%;
	}

/* .resource: Thumbnail left, title and content right */
div.resource {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin: 2rem 0;
	}
div.resource img {
	border: 1px solid #efefef;
	margin-right: 1rem;
	width: 8rem;
	}
div.resource div.info {
	/* margin-left: 1rem;*/
	}
div.resource h3 {
	margin-top: 0;
	}
div.resource p {
	color: #666;
	font-family: sans-serif;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div.resource {
		display: block;
		margin: 2rem 0;
		}
	div.resource div.info {
		margin-left: 0;
		}
	}



/*
	HEADER and FOOTER
*/
header, footer {
	background-color: #efefef;
	color: #666;
	font-family: sans-serif;
	font-size: 0.667rem;
	font-weight: 400;
	padding: 2rem 1rem;
	}
header a, footer a {color:#666;text-decoration: none;}
header a:hover, footer a:hover {color: #red;}
footer{margin-top:5rem;}


header nav { /* Global nav links */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	}
header nav a {
	line-height: 0.725rem;
	margin: 0rem;
	padding: 0 1rem;
	}
header img#logo {
	margin: 0 1rem;
	}



blockquote footer{ /* Blockquotes include footers for more info. These styles override the footer styles set above */
	background-color: white;
	border-top: 1px #666;
	margin-top: 0;
	padding: 0;
	}



/*
	SECTION local nav - dark bar beneath global nav with section nav
*/
section {
	background-color: #555;
	color: #ccc;
	font-family: sans-serif;
	width: 100%;
	}
section p {
	font-family: sans-serif;
	font-size: 0.725rem;
	padding: 1rem 2rem;
	max-width: 100%;
	}
section p a {
	color: white;
	font-weight: bold;
	text-decoration: none;
	}



/*
	BREADCRUMB
*/
nav.breadcrumb {font-family:sans-serif;font-size: 0.667rem;color:#666;}
nav.breadcrumb a {color:#666;text-decoration:none;}



/* 
	INTRO containers
	Can be used once per screen.
	Main text in left column. Secondary content in right column.
	Used on Hub and Method screens
*/
div#intro-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 2rem;
	grid-column-gap: 2rem;
	align-items: start;
	}
div#intro-wrapper h2, div#intro-wrapper h3, div#intro-wrapper h4, div#intro-wrapper p {
	width: inherit;
	}
.intro-secondary {font-family: sans-serif;}
.intro-secondary h3 {line-height: 2.9rem;} /* aligns h4 with h2 in primary column */
.intro-secondary h4 {
	font-style: normal;
	}
.intro-secondary h4, .intro-secondary p {
	font-size: 0.725rem;
	}
.intro-secondary ul {margin-top: 0;} /* aligns with top of p.lefe */
.intro-secondary em.category {
	text-transform: uppercase;
	color: #666;
	font-style: normal;
}
.intro-secondary em.date {
	color: #666;
	font-style: normal;
}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div#intro-wrapper {
		grid-template-columns: 1fr;
		}
	}








/* 
	CALL TO ACTION container
*/
.call-to-action {
	background-color: #efefef;
	border-top: 1px solid #ccc;
	font:1rem sans-serif;
	padding: 0 1rem 0.5rem 1rem;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	grid-column-gap: 2rem;
	align-items: center;
	}
a.cta-link { /*for downloads, a is around the div.call-to-action */
	color: #4CAF50;
	text-decoration: none;
	transition: all 0.23s ease-in-out 0s;
	}
a.cta-link:hover {
	color: #409444;
}
a.cta-link:hover button {background-color:#409444;}

.call-to-action button {
	background-color: #4CAF50;
	color: white;
	font-size: 13px; 
	border: none; 
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
	box-sizing:border-box; 
	height:32px; 
	line-height:32px; 
	padding:0 18px; 
	display: inline-block; 
	margin: 0; 
	transition: all 0.23s ease-in-out 0s;
	}
.call-to-action button:hover {cursor:pointer;background-color:#409444;}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	.call-to-action {
		grid-template-columns: 1fr;
		padding: 0 1rem 1rem 1rem;
		}
	}



/*
	TILES container
*/
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	column-gap: 1rem;
	grid-column-gap: 2rem;
	}
.tiles div.resource {
	display: block;
	}
.tiles div.resource img {
	border: 1px solid #efefef;
	margin: 0;
	width: 100%;
	}
.tiles div.resource h3 {
	text-align: center;
	margin: 0.5rem 0;
}
.tiles div.resource p {
	padding: 0.5em;
}



div.two-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
	grid-column-gap: 2rem;
	align-items: start;
	}
.two-columns div.resource {
	display: inherit;
	}
/* If the screen size is 50rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 50rem) {
	div.two-columns {
		grid-template-columns: 1fr;
		}
	}





/*
	MailChimp CTA form
*/
/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}




#mc_embed_signup {
	background: #efefef; 
	border-top: 1px solid #ccc; 
	clear:left; 
	font:1rem sans-serif;
	padding: 0.25rem;
	width:100%;
	}
#mc_embed_signup input[type=submit]#mc-embedded-subscribe {
	background-color: #4CAF50;
	color: white;
	}








/* If the screen size is 30rem wide or less, set the widths to 100% (of div.wrapper */
@media screen and (max-width: 30rem) {
	
	/* SCALE: 0.667 / 1 / 1.5 / 2.25 / 3.375 / 5.063 */
	h1 {
		font-size: 2.25rem;
	}
	h1.hub {
		font-size: 2.25rem;
	}
	h2 {font-size: 1.5rem }
	h3 {font-size: 1rem }
	h4 {font-size: 1rem; font-style: italic; }
	
	p.lede {font-size: 1.25rem }
	p.caption, p.date {
		font-size: 0.667rem;
	}
	p.tagline {
		font-size: 1.25rem;
	}
	caption {
		font-size: 0.725rem;
	}
	p, h1, h2, h3, h4 {
		width: 100%;
	}
	header nav a:not(.home) {
		display: none;
	}
}