/* ==================================================================== SETUP ================ */
/* =========================================================================================== */


@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600);

html,
body {
	font-family: Open Sans, Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: 14px;}

	
	
	

/* ================================================================= HEADINGS ================ */
/* =========================================================================================== */


/* ============================== H1 ====== */

.typography h1 {
	font-size: 28px;
	font-weight: 100;}
	
.typography h1.page-title {
	margin: 20px 0;
	border-bottom: 1px solid red;}

	
/* ============================== H2 ====== */

.typography h2 {
	font-size: 24px;
	font-weight: 100;}

	
/* ============================== H3 ====== */

.typography h3 {
	font-size: 20px;
	font-weight: 400;
	padding-bottom: 25px;}

	
/* ============================== H4 ====== */

.typography h4 {
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 20px;}
	
	

	
	
	

/* ================================================================ BODY COPY ================ */
/* =========================================================================================== */
	
.typography {
	font-weight: 400;
}

.typography img {
	max-width: 100%;
}

	
/* ============================== PARAGRAPHS ====== */

.typography p {
	padding-bottom: 10px;
}

.typography li {
	padding-bottom: 5px;
}

.typography ul,
.typography ol {
	padding-left: 25px;
	padding-bottom: 20px;
}

.details {
	font-size: 14px;
	color: #777777;
	text-transform: uppercase;
	padding: 4px 0 5px;
}	

.details.small {
	font-size: 12px;
}

.grey-text {
	color: #777777;
}

.breadcrumbs {
	margin-top: -10px;
	padding-bottom: 15px;
}

.breadcrumbs a {
	text-decoration: none;
}

.medium {
	font-size: 16px;
}

.typography blockquote {
	margin-top: 10px;
	padding: 0 15px 10px 15px;
	border-left: 10px solid #DDDDDD;
}


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

.typography a {
	color: #444444;
}

.typography a.title-link {
	color: inherit;
	text-decoration: none;
}

.typography a.title-link:hover {
	color: #444444;
}


	
/* ============================== TEXT-BASED ELEMENTS ====== */

.flag {
	font-size: 12px;
	padding: 2px 6px;
	display: inline-block;
	margin: 0 4px;
	background: #E3E3E3;
}

.flag.red {
	color: #FFFFFF;
	background: #C22C27;
}

.flag.green {
	color: #FFFFFF;
	background: #A1BF3A;
}

.flag.dark-grey {
	color: #FFFFFF;
	background: #444444;
}

.flag.float-left {
	display: block;
	float: left;
	margin: 7px 8px 0 0;
}

.message {
	color: #e2b412;
}

.message:before {
	content: '\f05a';
	display: inline-block;
	padding-right: 5px;
	font-family: FontAwesome;
}

.message.bad {
	color: #C22C27;
}

.message.bad:before {
	content: '\f00d';
}

.message.good {
	color: #A1BF3A;
}

.message.good:before {
	content: '\f00c';
}



	
/* ============================== TABLES ====== */

td {
	vertical-align: top;
}

tr:nth-child(even){
	background: #EEEEEE;
}

.typography table p {
	padding: 0;
}

table {
	max-width: 100%;
}