/* COLORS */

/* Background blue:
Accent blue: 16, 155, 242
Green: 118, 255, 17 */


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


/* ## TYPOGRAPHY */

/* ### Body */

body {
	font: 100%/1.5 'Karla', 'Avenir Next', sans-serif; /* Sets baseline font of 16px.  Left in as a small stab at ie6/7 support. */
	color: rgb(22, 22, 22);
	/* text-shadow: 1px 1px 1px rgba(0,0,0, .7) */
	
}

@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-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;
}

/* ### 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:last-child {
	margin-bottom: 0
	}
	
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) */
}


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;
	-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(16, 155, 242); /* based on Ulysses headers */
	border-bottom: 3px solid rgb(16, 155, 242);
	font-weight: 700;
	text-decoration: none;
	/* Separate :visited rule not used due to privacy concerns */
}

a:hover{
	background-color: rgb(16, 155, 242);
	color: rgb(255, 255, 255);
	border-bottom: 2px solid rgb(16, 155, 242);
	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);
}


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

#wrapper {
	min-height: 100%;
	/*position: relative; */
}

.container {
	background: transparent;
	clear: both;
	margin: 0 auto;
	max-width: 512px /* (16px font-size x 30) + 32px padding = 512px */;
	padding: 0 1em;
	/* vertical centering magic */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	/* Taken from: http://www.w3.org/Style/Examples/007/center.en.html#viewport3 */
	}
	
@media only screen and (min-width: 600px) {
	.container{
	margin: 0 auto;
	min-width: 576px /* (18px font-size x 30) + 36px padding = 576px */;
	}
}

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

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