/* ## 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 */

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

/* ## TYPOGRAPHY */

/* ### Body */

body {
	color: #333333;
	font-family: Georgia, serif;
	font-size: 100% /* 16px */;
	font-weight: 400;
	line-height: 1.5;
}

@media only screen and (min-width: 600px) {
	body {
		font-size: 112.5% /*18 px */;
		line-height: 1.5;
	}
}

@media only screen and (min-width: 800px) {
	body {
		font-size: 131.25% /*21 px */;
		line-height: 1.5;
	}
}

@media only screen and (min-width: 1000px) {
	body {
	font-size: 143.75% /* 23 px */;	
	line-height: 1.5;
	}
}

/* ### Headings */

h1 {
	font-family: 'PT Sans', sans-serif;
	font-size: 2em; /* 2*23 = 46px */
	font-weight: 700;	
	text-align: center;
	}

h2 { font-size: 1.5em; /* 1.5*23 = 34.5px */ }

h3 { font-size: 1.17em; /* 1.17*23 = 26.91px */ }

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

h5 { font-size: 0.83em; /* 0.83*23 = 19.09 */ }

h6 { font-size: 0.75em; /* 0.75*23 = 17.25 */ }

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

/* ### Paragraph Styles */

p {
	line-height: 1.5;
	margin: 0 0 1em 0;
	/* 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:last-child {
	margin-bottom: 0
	}

.dek {
	color: #666;
	font-family: Georgia, serif;
	font-size: 1.17em;
	/*font-style: italic;*/
	font-weight: 400;
	text-align: center;
	margin-bottom: 1.333em; /* was 1.5 */
}

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 {
	
	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(5, 156, 199);*/ /* based on Ulysses headers */
	color: #000000;
	border-bottom: 1px solid #999999;
	font-weight: 600;
	text-decoration: none;
	/* Separate :visited rule not used due to privacy concerns */
}

a:hover{
	/* background-color: #f3f3f3; */
	color: rgb(5, 156, 199); /* based on Ulysses headers */
	/* border-bottom: 2px solid #999999; */
	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);
}

/* ### Images */

.container img {
	height: auto;
	margin: 0 0 1em 0;
	max-width: 100%;
}

/* ## 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(255,255,255);
	min-width: 320px; /* Keeps page from collapsing further */
}

#wrapper {
	background: transparent;
	border-top: 0.5em solid #333333;
	border-bottom: 0.5em solid #333333;
	min-height: 100%;
	padding: 2em 0 4em 0;
	position: relative;
	width: 100%;
}

.container {
	background: transparent;
	clear: both;
	margin: 0 auto;
	max-width: 512px /* (16px font-size x 30) + 32px padding = 512px */;
	padding: 0 1em;
	}
	
@media only screen and (min-width: 600px) {
	.container{
	margin: 0 auto;
	max-width: 576px /* (18px font-size x 30) + 36px padding = 576px */;
	}
}

@media only screen and (min-width: 800px) {
	.container {
	max-width: 672px; /* (21px font size x 30) + 42px padding = 672px */
	}
}

@media only screen and (min-width: 1000px) {
	.container {
	max-width: 736px; /* (23px font size x 30) + 46px padding = 736px */
	}
}

/* ## MEDIA QUERIES */

/* ### iPhone */