/* Note: This document contains valid CSS according to the W3C CSS Validator: http://jigsaw.w3.org/css-validator/ */

/* ## CSS RESET */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ## BOX SIZING */

/* See https://css-tricks.com/box-sizing/ */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


/* ## TYPOGRAPHY */

/* ### Body */

body { font: 100%/1.5 Karla, "Gill Sans", sans-serif; /* Sets baseline font of 16px.  Left in as a small stab at ie6/7 support. */
color: rgb(64, 69, 74);
}

/* ### Headings */

h1 { font-size: 2em; /* 2*16 = 32 */ }

h2{ font-size: 1.5em; /* 1.5*16 = 24 */ }

h3 { font-size: 1.17em; /* 1.17*16 = 18.72 */ }

h4{ font-size: 1em; /* 1*16 = 16 */ }

h5 { font-size: 0.83em; /* 0.83*16 = 13.28 */ }

h6 { font-size: 0.75em; /* 0.75*16 = 12 */ }

article h1, article h2, article h3, article h4, article h5, article h6 {
	font-family:  Helvetica, "HelveticaNeue-CondensedBold", sans-serif;
	line-height: 1;
}

header[role=banner] h1 {
	letter-spacing: .1em;
	margin-bottom: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
	/*margin-bottom: 1.282em;*/
	/* 1.5 line height / 1.17em = 1.282em or 24px */
}

/* ### Paragraph Styles */

p {
	line-height: 1.5;
	/*margin: 0 0 1em;*/
	/* Hyphenation */
	/*word-break: break-all;*/
	/* Non standard for webkit */
	/*word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;*/ 
}


p, blockquote, ul, ol, code {
	max-width: 35em;
	/* With a base font size of 1em or 16px, this sets a readable width for text equal to 3 "alphabets" (3x26 letters) or 560px (16px x 35em) */
	/*max-width: 30em;*/
	/* With a base font size of 1em or 16px, this sets a readable width for text equal to 2.5 "alphabets" (2.5x26 letters) or 480px (16px x 30em) */
}

p+p {
	/* Paragraph indentation */
	/*text-indent: 2em;*/
	/*margin-top: -1em;*/
	}

strong {
	font-weight: bold;
}

em, cite {
	font-style: italic;
}

time {
	color: rgba(5, 5, 5, .5);
	font-size: 0.83em;
	margin: .75em 0;
	/*text-transform: uppercase;*/
}

blockquote {
	margin: 0 0 0 2em;
}

/* ### Lists */

/* Note: may need to thin these lists and use HTML instead -- see http://html5doctor.com/ol-element-attributes/ */
article ol.lower-alpha {
	list-style-type: lower-alpha;
}

article ol.upper-alpha {
	list-style-type: upper-alpha;
}

article ol.upper-roman {
	list-style-type: upper-roman;
}

article ol.lower-roman {
	list-style-type: lower-roman;
}

/* ### Code, User Input, Etc. */

pre, code, kdb {
	/*background-color: rgba(0, 0, 0, .08);*/
	font-family: Menlo, Monaco, Consolas, "Courier New", Verdana, monospace;
}

pre {
	display: block;
	white-space: pre;
	max-width: 31em;
	overflow: auto;
	margin: 1.5em 16.66%;
	padding: 0 2.5em;

	/* See these links:
	http://www.w3schools.com/tags/att_pre_width.asp
	http://www.w3schools.com/tags/tag_pre.asp
	http://html5doctor.com/your-questions-15/
	http://html5doctor.com/writing-style-guide/
	*/
}

code, kdb {
	font-size: 0.83em;
}

kdb {
	/*for keyboard input -- see http://getbootstrap.com/css/#code-user-input */
	border: 1px solid rgba(0,0,0, .4);
	background-color: rgba(0, 0, 0, .075);
	padding: 0 2px;
}

/* ### Links & Anchors */

a, a:visited {
	color: rgb(127, 138, 149);
	border-bottom: 1px solid rgba(0, 0, 0, .3);
	text-decoration: none;
	/* Separate :visited rule not used due to privacy concerns */
}

a:hover{
	background-color: rgba(159, 173, 186, .4);
	color: rgb(71, 71, 71);
	border-bottom: 2px solid rgb(62, 116, 193);
	text-decoration: none;
	text-shadow: none;
}

/* states for accessibility http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm */
a:active {
	color: rgb(247, 101, 6);
}

a:focus	{
	border: 1px solid rgb(247, 101, 6);
}

/* ## HEADER, LOGO, AND NAVIGATION */

header {
	text-align: center;
}

.logo {
	background: transparent;
	height: 144px; /* up from 144px bcs. new logo is 130px high */
	overflow: hidden;
	margin: 0 auto .5em auto;
	padding-top: 16px;
	width: 128px; /*up from 128px bcs. new logo is 130px wide */
}

.lede {
	font-size: 1em;
	font-weight: bold;
	/*margin-bottom: -1.5em;*/
	text-align: right;
}

.contact {
	margin-top: -1.5em;
	text-align: center;
}

#content p {
	line-height: 1.5;
	margin-bottom: 1.5em;
	text-align: center;
}

footer p {
	text-align: center;
}


/* ## LAYOUT AND POSITIONING */

.left {
	float: left;
}

.right {
	float: right;
}


/* ## PRINTER FRIENDLY */

/* see http://webdesign.tutsplus.com/articles/a-web-designers-typographic-boilerplate--webdesign-15234 */

@media print {

	/* Wipe any backgrounds and blacken all text */	
	* { background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
		}

	/* Prevent widows (last lines) and orphans (first lines) */
	p, h2, h3 {
		orphans: 3; /* http://css-tricks.com/almanac/properties/o/orphans/ */
		widows: 3;  /* http://css-tricks.com/almanac/properties/w/widows/ */
		}
		
	/* Prevent page from breaking immediately after a heading */	
	h2, h3 {
		page-break-after: avoid;
	}
}


/* ## PAGE STRUCTURE */

body {
	background: rgb(248,248,250);
	min-width: 320px; /* Keeps page from collapsing further */
}

#wrapper {
	border-top: 16px solid rgba(159, 173, 186, .33);
	min-height: 100%;
	position: relative;
}

.container {
	/*background: gray;*/
	clear: both;
	margin: 0 auto;
	padding: 0 1em;
	max-width: 576px; /* This is equal to 36em and can be divided by 3 and 4 */
}

.container::after {
	clear: both;
	content: " ";
}

header .container {
	/*border-bottom: 1px solid #333;*/
	margin: 48px auto 0 auto;
}

main .container {
	margin-bottom: 2em;
}

footer .container {
	/*border-top: 1px solid #333;*/
	padding-top: 2em;
}

article {
	padding-top: 48px;
}

/* ## MEDIA QUERIES */

/* ### iPad */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
/* Insert styles here */

}

/* ### iPhone */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* Insert styles here */

}