/* ==========================================================================
   HTML5 Boilerplate display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; margin: 0; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #b7d6fd; color: #fff; text-shadow: none; }
::selection { background: #b7d6fd; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: 0em; }
sub { bottom: 0em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }   
/* End HTML5 Boilerplate */



/* ==========================================================================
   Fluid Grid by Matt Hofstadt
========================================================================== */
/* First, apply a natural box layout model to all elements */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  *behavior: url(../js/vendor/boxsizing.htc); /* Polyfill support for IE6 & IE7 */
}


/* .section separates content vertically */
.section {
	padding: 0 20px 35px; /* Keeps space on edges as content becomes responsive */
}

/* .row centers content and defines width */
.row {
	width: 100%;
	max-width: 1080px; /* Defines max content width... can be anything since everything uses percentages! :) */
	min-width: 727px; /* Subtract 40px section padding from mobile media querie break point (767 - 40 = 727px) */
	margin: 0 auto;
	position: relative;
}

.row.wide { max-width: 1180px; }

.row.small { max-width: 945px; }

.row.narrow { max-width: 790px; }

/* Remove edge padding */
.row.reset { padding: 0px; }

/* Better solve floating problems / AKA - Clearfix Hack */
.section:before,
.section:after,
.row:before,
.row:after {
	content: "";
	display: table;
}

.section:after,
.row:after {
	clear: both;
}

.section,
.row {
	*zoom: 1;
}

/*---- Columns ----*/
.col-one, 
.col-two, 
.col-three, 
.col-four, 
.col-five, 
.col-six, 
.col-seven, 
.col-eight, 
.col-nine, 
.col-ten, 
.col-eleven,
.form-fourth,
.form-third,
.form-half {
	margin-right: 3.2%; /* Gutter between columns */
	display: block;
	float: left;
	min-height: 1px;
}

/* Make sure last of each column row has zero margin to maintain structure - no need for using .col-last */
/* Uses JS to add support for old browsers */
.col-one:last-child, .col-two:last-child, .col-three:last-child, .col-four:last-child, .col-five:last-child, .col-six:last-child, .col-seven:last-child, .col-eight:last-child, .col-nine:last-child, .col-ten:last-child, .col-eleven:last-child {
	margin-right: 0;
}

/* Column Widths */
.col-one { width: 5.4%; }

.col-two { width: 14%; }

.col-three { width: 22.6%; }

.col-four { width: 31.2%; }

.col-five { width: 39.8%; }

.col-six { width: 48.4%; }

.col-seven { width: 57%; }

.col-eight { width: 65.6%; }

.col-nine { width: 74.2%; }

.col-ten { width: 82.8%; }

.col-eleven { width: 91.4%; }

/* I suppose a .col-twelve would be the same as a .row: use whichever is more sematically pleasing; */
.col-twelve {
	width: 100%;
	float: left;
}

/* Form Widths */
.form-fourth { width: 22.6%; }

.form-third { width: 31.2%; }

.form-half { width: 48.4%; }

.form-full {
	width: 100%;
	float: left;
}

/* This is only needed if you absolutely must support really old browsers */
/* Removes right margin from last element in a row to maintain structure */
.col-last,
.form-last { margin-right: 0px; }

/*---- Grid Groups (removes right margin from every Nth element to maintain structure) ----*/
/* Uses JS (Selectivizr) to add support for :nth-child pseudo-class in older browsers */
.group-by-two .col-six:nth-child(2n+2),
.group-by-three .col-four:nth-child(3n+3),
.group-by-four .col-three:nth-child(4n+4),
.group-by-six .col-two:nth-child(6n+6) { 
	margin-right: 0; 
}

/*---- Responsive Images ----*/
img, object, embed { max-width: 100%; }

img { 
	width: auto\9;
	height: auto !important;
	-ms-interpolation-mode: bicubic;
}


/*---- Smaller screens ----*/
@media only screen and (max-width: 1023px) {

	body {
		font-size: 0.8em;
		line-height: 1.5em;
	}
	
}


/*---- Mobile ----*/
@media handheld, only screen and (max-width: 768px) {

	body {
		font-size: 16px;
		-webkit-text-size-adjust: none;
	}
	
	body, .section, .row {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.col-one, 
	.col-two, 
	.col-three, 
	.col-four, 
	.col-five, 
	.col-six, 
	.col-seven, 
	.col-eight, 
	.col-nine, 
	.col-ten, 
	.col-eleven,
	.col-twelve, 
	.row {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.form-fourth,
	.form-third,
	.form-half {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

	/* Clearfix for float issues when columns resolve to stack on top of each other */
	.col-one:before, 
	.col-one:after, 
	.col-two:before, 
	.col-two:after, 
	.col-three:before, 
	.col-three:after, 
	.col-four:before, 
	.col-four:after, 
	.col-five:before, 
	.col-five:after, 
	.col-six:before, 
	.col-six:after, 
	.col-seven:before, 
	.col-seven:after, 
	.col-eight:before, 
	.col-eight:after, 
	.col-nine:before, 
	.col-nine:after, 
	.col-ten:before, 
	.col-ten:after, 
	.col-eleven:before, 
	.col-eleven:after, 
	.col-twelve:before, 
	.col-twelve:after {
		content:"";
		display:table;
	}

	.col-one:after, .col-two:after, .col-three:after, .col-four:after, .col-five:after, .col-six:after, .col-seven:after, .col-eight:after, .col-nine:after, .col-ten:after, .col-eleven:after, .col-twelve:after {
		clear:both;
	}

	.col-one, .col-two, .col-three, .col-four, .col-five, .col-six, .col-seven, .col-eight, .col-nine, .col-ten, .col-eleven, .col-twelve {
		*zoom: 1;
	}

}


@media handheld, only screen and (max-width: 768px) {

	.row.wide { max-width: 1020px; }

}