/*------------------------------------*\
	$TYPE
\*------------------------------------*/

body {
	font: 16px/26px Helvetica, Arial, sans-serif;
	color: #333; 
	}



/*--- HEADINGS ---*/

h1, h2, h3, h4, h5, h6 {
	color: #333;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:normal;
}

h1.title {
	font-size:2.5em;
	line-height:1;
	margin-top: 14px;
	margin-bottom: 14px;
}

h1{
	font-size:2em;			/* 32px */
	line-height:1;		/* 48px */
	margin-top: 14px;
	margin-bottom: 7px;
}
h2{
	font-size:1.5em;		/* 24px */
	line-height:1;			/* 24px */
	margin-top: 14px;
	margin-bottom: 7px;
}
h3{
	font-size:1.25em;		/* 20px */
	line-height:1;		/* 24px */
	margin-top: 14px;
	margin-bottom: 7px;
}

h4{
	font-size:1.25em;		/* 20px */
	line-height:1;		/* 24px */
	margin-top: 14px;
	margin-bottom: 7px;
	color: #fff;
	background: #9DBB5F;
	padding: 7px;
}

h4.blue {background: #1385B5;}
h4.yellow {background: #FED13F;}
h4.red {background: #EC2E2D;}

h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;			/* 16px */
	line-height:1.5;		/* 24px */
	margin-bottom: 3px;
}


p { margin: 0 0 7px 0; }

.header-banner p { margin: 0; padding:0; }

hr {
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 7px 0;
	margin:0 0 7px 0;
	height:0;
	}

mark{
	border-bottom:2px solid;
}
pre{
	padding:10px;
}
pre code,
pre mark{
	background:none;
}

/*--- FIGURES ---*/
figure img{
	display:block;
	margin-bottom:0;
}

/*--- LINKS ---*/

a,
a:active,
a:focus,
a:visited{
	color:#0074BC;
	text-decoration:none;
}


a:hover{
	text-decoration:underline;
}


/*--- LISTS ---*/
ul, ol, dd {
margin-left: 30px;
margin-bottom: 7px;
}

li > ul,
li > ol{
	/* Let’s take care of lists in lists */
	margin-bottom:0;
}

/*
A numbered list is NOT the same as an ordered one: csswizardry.com/2011/09/ordered-and-numbered-lists-the-differences/
Use this class when you want a list to be numbered but it has no order.
*/
ul.numbered{
	list-style:decimal outside;
}
dt{
	font-weight:bold;
}



/*--- CODE ---*/
pre,
code{
	font-family:"Inconsolata", "Monaco", "Consolas", "Courier New", Courier, monospace;
}
pre{
	overflow:auto;
	line-height:24px; /* Having to define explicit pixel values :( */
}


.sponsor-title {
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}


/*------------------------------------*\
	$IMAGES
\*------------------------------------*/

.img-right, .img-left, .img-center, .img-inner {
	background: #FAFAFA;
    border: 1px solid #DCDCDC;
	padding: 5px;
}
.img-right {
  	margin: 5px 0px 10px 10px;  
  	float: right;
}
.img-left {
  	margin: 5px 10px 10px 0px;
  	float: left;
}
.img-center {
  	display:block;
	margin: 5px auto 10px auto;
  	clear: both;
}



.img-right p, .img-left p, .inner-center p, .img-inner p{
	margin:3px 0 -2px;
	padding:0;
	font-size: 9px;
	text-align:right;
	font-weight: normal;
	line-height: 9px;
}

.img-noframe-right {
  	margin: 5px 0px 10px 10px;  
  	float: right;
}
.img-noframe-left {
  	margin: 5px 10px 10px 0px;
  	float: left;
}
.img-noframe-center {
  	margin: 5px auto 10px auto;
  	clear: both;
}

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
	height:auto;
}





/*------------------------------------*\
	$FORMS
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
*/
fieldset{
	padding:1.5em;
	border:1px solid #ccc;
}
label{
	display:block;
}
.text-input{
	/* With the advent of various HTML5 input types (email, url, etc) input[type=text] is no longer suitable for for styling non-textearea text-inputs. Use .text-input instead. */
}
label,
.text-input,
textarea,
.btn{
	cursor:pointer;
}
	.text-input:active,
	.text-input:focus,
	textarea:active,
	textarea:focus{
		cursor:text;
	}

/* A class of .check-list can be added to a <ul> to create a multi-column list of inputs. */
.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin-left:0;
}
.check-list li{
	width:25%;
	float:left;
}
.check-label{
	display:inline;
}
fieldset > :last-child{
	/* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
	margin-bottom:0;
}





/*------------------------------------*\
	$TABLES
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
table{
	width:100%;
	max-width:100%;
}

th,td{
	vertical-align:top;
	padding-top:7px;
}


.align-middle td{
	vertical-align:middle;
}
table.zebra {
	border:1px solid #ccc;
}

.zebra th,.zebra td{
	vertical-align:top;
	padding:7px 7px 0;
	border:1px solid #ccc;
}


/*
Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
See jsfiddle.net/csswizardry/UJJay/
*/
[colspan="1"]{
    text-align:left;
}
[rowspan="1"]{
    vertical-align:top;
}
.zebra tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}


/* Normal Buttons ---------------------- */
.button { width: auto; background: #2ba6cb; border: 1px solid #1e728c; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; -moz-transition: background-color 0.15s ease-in-out; -o-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; /* Hovers */ /* Sizes */ /* Colors */ /* Radii */ -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; /* Layout */ /* Disabled ---------- */ }
.button:hover, .button:focus { color: white; background-color: #2284a1; }
.button:active { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; }
.button.large { font-size: 17px; padding: 15px 30px 16px; }
.button.medium { font-size: 14px; }
.button.small { font-size: 11px; padding: 7px 14px 8px; }
.button.tiny { font-size: 10px; padding: 5px 10px 6px; }
.button.expand { width: 100%; text-align: center; }
.button.primary { background-color: #2ba6cb; border: 1px solid #1e728c; }
.button.primary:hover, .button.primary:focus { background-color: #2284a1; }
.button.success { background-color: #5da423; border: 1px solid #396516; }
.button.success:hover, .button.success:focus { background-color: #457a1a; }
.button.alert { background-color: #c60f13; border: 1px solid #7f0a0c; }
.button.alert:hover, .button.alert:focus { background-color: #970b0e; }
.button.secondary { background-color: #e9e9e9; color: #1d1d1d; border: 1px solid #c3c3c3; }
.button.secondary:hover, .button.secondary:focus { background-color: #d0d0d0; }

.button.round { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
.button.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; }
.button.left-align { text-align: left; text-indent: 12px; }
.button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.button.disabled :hover, .button[disabled] :hover { background: #2ba6cb; }
.button.disabled.success, .button[disabled].success { background-color: #5da423; }
.button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #5da423; outline: none; }
.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
.button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #c60f13; outline: none; }
.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
.button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #e9e9e9; outline: none; }

/* Don't use native buttons on iOS */
input[type=submit].button, button.button { -webkit-appearance: none; }

/* Correct FF button padding */
@-moz-document url-prefix() { button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding: 0; }
  input[type="submit"].tiny.button { padding: 3px 10px 4px; }
  input[type="submit"].small.button { padding: 5px 14px 6px; }
  input[type="submit"].button, input[type=submit].medium.button { padding: 8px 20px 9px; }
  input[type="submit"].large.button { padding: 13px 30px 14px; } }