/*
*
* Zoomable baseline grid
* Type size presets
* As the site gets larger the default font-size needs to become larger
*
*/
body {
	/* 16px / 24px */
	font-size: .94em;
	line-height: 1.4em;
}

/*
*
* Simple elastic gutters
* Note: box-sizing will not work in IE6-7
* Box Sizing changes the box model - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
* This includes the padding into the specified total width as oposed to adding onto it
* This allows us to keep our column width percentages acdcurate and keep our gutters elastic
*
*/

/* OLD WRAPPER - remove when safe
.wrapper {
	padding:0 .75em;
	float: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*/
.wrapper {
	padding:0;
	float: left;
	display: block;
	margin-right: 3%;
}
	.wrapper.last {
		margin-right: 0 !important;
	}
	.wrapper.last-tablet {
		margin: 0;
	}

/* All purpose vertical divider*/
.vert-divider {
	/*padding-left: 1.2em;*/
	border-left: 1px solid #CCD2D6;
}
/* Vertical conten line*/
.vert-line {
	padding-left: .5em;
	border-left: 1px solid #CCD2D6;
}
/* All purpose horizontal divider*/
.horiz-divider {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px solid #CCD2D6;
}
/* All purpose horizontal divider*/
.horiz-line {
	padding-bottom: .5em;
	border-bottom: 1px solid #CCD2D6;
}
/*
*
*  Fixes for IE6-8
*  http://jonikorpi.com/leaving-old-IE-behind/
*
*/
.ie body {
	width: 40em;
	margin: 0 auto;
	font-size: 1.0625em;
}



/* =================================
* Grid Styles Default
* 10 Column Gird
* Used for general layout
================================= */

.col-10-1 {	width: 7.3%; }
.col-10-2 { width: 17.6%; }
.col-10-3 { width: 27.9%; }
.col-10-4 { width: 38.2%; }
.col-10-5 { width: 48.5%; }
.col-10-6 { width: 58.8%; }
.col-10-7 {	width: 69.1%; }
.col-10-8 {	width: 79.4%; }
.col-10-9 {	width: 89.7%;}
.col-10-10 { width: 100%; }

/* =================================
* Grid Styles Special
* 12 Column Grid
* Used for unique areas where spaces need ot be divided in 3rds and 4ths
=================================
*/
.col-12-1 { width: 5.5%; }
.col-12-2 { width: 14%; }
.col-12-3 { width: 22.5%; }
.col-12-4 { width: 31%; }
.col-12-5 { width: 39.5%; }
.col-12-6 { width: 48%; }
.col-12-7 { width: 56.5%; }
.col-12-8 { width: 65%; }
.col-12-9 { width: 73.5%; }
.col-12-10 { width: 82%; }
.col-12-11 { width: 90.5%; }
.col-12-12 { width: 99%; margin: 0; }

/*
*
*  Unique layout adjustments
*
*/

/* Category 2 layout adjustment */
.col-10-2.layout-category-2 {
	display:none !important;
}
.col-10-8.layout-category-2{
	width: 100% !important;
}

/* 6/4 layout adjustment */
.col-10-6.layout-category-2 {
	width:72% !important;
}
.col-10-6.layout-standard{
	width:72%;
}
.col-10-4.layout-standard{
	width:25%;
}


header.main-header,
.content,
.subfooter {
	margin: 0 auto;
	min-width: 748px;
	padding: 0 1.19760479041916em;
}

/*
*
* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   MEDIA QUERIES   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*
* There are no set maximum widths for the outer wrappers of the main content areas of the web site
* Most of the media queries below are used to control the maximum width of the website across many different sizes
* Left and right margins control that width by increasing as the screen gets larger
* This is a future proof feature - if we decide to target a larger width we can adjust the margins and let the size flex wider
*
* The margins are based on a % of the target content size width
* The padding is based on the zoomable baseline - 1em this looks better when the site si scaled upwards
*
* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*
*/

/*
*  @media screen and (min-width: 768px)
*  based on common screen size
*  uses default width settings
*
*/
@media screen and (min-width: 48em) {
	/*
	*
	* Zoomable baseline grid
	* Type size presets
	* As the site gets larger the default font-size needs to become larger
	*
	*/
	body {
		/* Reset baseline grid to 16/16 = 1 */
		font-size: .97em;
		line-height: 1.44em;
	}
}

/*
*  @media screen and (min-width: 840px)
*  good stop gap between target sizes
*  change to 10 Column Grid Defaults
*
*/
@media screen and (min-width: 52.5em) {
	/*
	*
	* Zoomable baseline grid
	* Type size presets
	* As the site gets larger the default font-size needs to become larger
	*
	*/
	body {
		/* 16px / 24px */
		font-size: 1em;
		line-height: 1.5em;
	}
	.wrapper.last-tablet {
		margin: 0 3% 0 0;
	}
	/*
	*
	*  10 Column Page Layouts
	*
	*/
	
	/* Category 2 layout adjustment */
	.col-10-2.layout-category-2 {
		display:block !important;
	}
	.col-10-8.layout-category-2{
		width: 79.4% !important;
	}
	/* 6/4 layout adjustment */
	.col-10-6.layout-category-2 {
		width:width: 58.8%;
	}
	.col-10-4.layout-standard{
		width: 38.2%;
	}
	.col-10-6.layout-standard{
		width:58.8%;
	}
}

/*
*  @media screen and (min-width: 1024px)
*  based on common screen size
*  MAIN BREAK POINT
*
*/
@media screen and (min-width: 64em) {
	/* adjust the max width via margins */
	/* (1024 - 1002) / 2 = 11  ||  11/1024 =  1.07421875% */
	.vert-divider {
		/*padding-left: 2em;*/
	}
	header.main-header,
	.content,
	.subfooter {
		margin: 0 1.07421875%;
		padding: 0 1.19760479041916em;
	}
}
/*
*  @media screen and (min-width: 1110px)
*  used to control widths and keep max size within 100 - 200 pixels of 978 
*
*/
@media screen and (min-width: 69.375em) {
	/* adjust the max width via margins */
	/* (1110 - 1002) / 2 = 54  ||  54/1110 = 4.86486486486486% */
	header.main-header,
	.content,
	.subfooter {
		/*
		margin: 0 4.86486486486486%;
		padding: 0 1.19760479041916em;
		*/
		margin: 0 auto;
		max-width:978px;
	}
}

/*
*  @media screen and (min-width: 1200px)
*  used to control widths and keep max size within 100 - 200 pixels of 978 
*
*/
@media screen and (min-width: 75em) {
	/* adjust the max width via margins */
	/* (1200 - 1002) / 2 = 99  ||  99/1200 = 8.25% */
	header.main-header,
	.content,
	.subfooter {
		/*
		margin: 0 8.25%;
		padding: 0 1.19760479041916em;
		*/
		margin: 0 auto;
		max-width:978px;
	}
}

/*
*  @media screen and (min-width: 1366px)
*  based on common screen size
*  used to control widths and keep max size within 100 - 200 pixels of 978 
*
*/
@media screen and (min-width: 85.375em) {
	/* adjust the max width via margins */
	/* (1366 - 1002) / 2 = 182  ||  182/1366 = 13.32357247437775% */
	header.main-header,
	.content,
	.subfooter {
		/*
		margin: 0 13.32357247437775%;
		padding: 0 1.19760479041916em;
		*/
		margin: 0 auto;
		max-width:978px;
	}
}

/*
*  @media screen and (min-width: 1500px)
*  used to control widths and keep max size within 100 - 200 pixels of 978 
*
*/
@media screen and (min-width: 93.75em) {
	/* adjust the max width via margins */
	/* (1500 - 1002) / 2 = 249  ||  249/1500 = 16.6% */
	header.main-header,
	.content,
	.subfooter {
		/*
		margin: 0 16.6%;
		padding: 0 1.19760479041916em;
		*/
		margin: 0 auto;
		max-width:978px;
	}
}