/*
** Toast CSS Framework - 1.1
** Dan Eden wrote this - @dan_eden - http://daneden.me/
** Inspired by and based on Andy Taylor's CSS Grid - http://cssgrid.net/
**
** ----------------------------------------------------------------------------------------------------------------------------
**
** Welcome, young warrior! BE WARY - This framework is delicate, and will fall on your head if you change things too much.
** Things you can probably change safely are the max-width of .row, the padding of the container, and... well. That's about it.
*/

/* import stylesheets and hide from IE/Mac (courtesy of Dan Cederholm - http://simplebits.com) \*/
@import url("reset.css");
@import url("type.css"); /* this is optional - it sets some default typography for your site, for beautiful vertical rhythm. Set at 16px (1em) with 24px line-height (1.5em) */
/* end import/hide */

/*
Page container
*/
.container{
	max-width:1118px;
	padding:18px;
	margin:0 auto;
}

.smallscreen.container, .smallscreen .container {
	max-width: 960px;
}

/*
Column container
*/
.row{
	width:auto;
	max-width:1152px;
	clear:both;
/* 	margin:0; */
/* 	margin:0 1.5625% 0 -1.5625%;	 */
	margin:0 0 0 -3.125%;
	list-style:none; /* So we can make grids out of lists. */
}

[class*="col_"]{
	float:left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row [class*="col_"]{
	margin-left: 3.125%;
}

.row .col_1{ width:5.208% }
.row .col_2{ width:13.542% }
.row .col_3{ width:21.875% }
.row .col_4{ width:30.208% }
.row .col_5{ width:38.542% }
.row .col_6{ width:46.875% }
.row .col_7{ width:55.208% }
.row .col_8{ width:63.542% }
.row .col_9{ width:71.875% }
.row .col_10{ width:80.208% }
.row .col_11{ width:88.542% }
.row .col_12{ width:96.875%; margin-left:0; }

*[class*="push_"], *[class*="pull_"] {
	position: relative;
}

.row .push_1 { left: 8.333%; }
.row .push_2 { left: 16.667%; }
.row .push_3 { left: 25%; }
.row .push_4 { left: 33.333%; }
.row .push_5 { left: 41.667%; }
.row .push_6 { left: 50%; }
.row .push_7 { left: 58.333%; }
.row .push_8 { left: 66.667%; }
.row .push_9 { left: 75%; }
.row .push_10 { left: 83.333%; }
.row .push_11 { left: 91.667%; }
.row .push_12 { left: 100%; }

.row .pull_1 { left: -8.333%; }
.row .pull_2 { left: -16.667%; }
.row .pull_3 { left: -25%; }
.row .pull_4 { left: -33.333%; }
.row .pull_5 { left: -41.667%; }
.row .pull_6 { left: -50%; }
.row .pull_7 { left: -58.333%; }
.row .pull_8 { left: -66.667%; }
.row .pull_9 { left: -75%; }
.row .pull_10 { left: -83.333%; }
.row .pull_11 { left: -91.667%; }
.row .pull_12 { left: -100%; }

/* per request from @amit_heroic, prefixes and suffixes like in 960.gs */

.row .prefix_1 { margin-left: 11.458%; }
.row .prefix_2 { margin-left: 19.792%; }
.row .prefix_3 { margin-left: 28.125%; }
.row .prefix_4 { margin-left: 36.458%; }
.row .prefix_5 { margin-left: 44.792%; }
.row .prefix_6 { margin-left: 53.125%; }
.row .prefix_7 { margin-left: 61.458%; }
.row .prefix_8 { margin-left: 69.792%; }
.row .prefix_9 { margin-left: 78.125%; }
.row .prefix_10 { margin-left: 86.458%; }
.row .prefix_11 { margin-left: 94.792%; }
.row .prefix_12 { margin-left: 103.125%; }

.row .suffix_1 { margin-right: 8.333%; }
.row .suffix_2 { margin-right: 16.667%; }
.row .suffix_3 { margin-right: 25%; }
.row .suffix_4 { margin-right: 33.333%; }
.row .suffix_5 { margin-right: 41.667%; }
.row .suffix_6 { margin-right: 50%; }
.row .suffix_7 { margin-right: 58.333%; }
.row .suffix_8 { margin-right: 66.667%; }
.row .suffix_9 { margin-right: 75%; }
.row .suffix_10 { margin-right: 83.333%; }
.row .suffix_11 { margin-right: 91.667%; }
.row .suffix_12 { margin-right: 100%; }

/* People seem to avoid frameworks because of trouble with 'real' blocks - this will help! */

.box { padding: .75em; } /* this will surely break the grid? not with box-sizing: border-box. */
.box { padding: .75em 1% !ie; } /* crummy IE */

/* internet explorer gets a ton of specififed widths because it doesn't understand box-sizing in version 7. but weirdly enough, it does in 6! */
.col_1.box { width:3.208% !ie; }
.col_2.box { width:11.542% !ie; }
.col_3.box { width:18.875% !ie; }
.col_4.box { width:28.208% !ie; }
.col_5.box { width:36.542% !ie; }
.col_6.box { width:44.875% !ie; }
.col_7.box { width:53.208% !ie; }
.col_8.box { width:61.542% !ie; }
.col_9.box { width:69.875% !ie; }
.col_10.box { width:78.208% !ie; }
.col_11.box { width:86.542% !ie; }
.col_12.box { width:94.875% !ie;}

/* fluid images, videos etc */

img, object, embed, video { max-width: 100%; }
img { height: auto; }

/* Here's where it gets good. Remember .last? That's gone. Remember the clearfix? NOT UP IN HERE! */

.nest > :first-child { /* nested grids */	
	margin-left: 0;
}

/* new clearfix from Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.row:before,
.row:after,
.group:before,
.group:after {
    content:"";
    display:table;
}

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

/* For IE 6/7 (trigger hasLayout) */
.row, .group {
    zoom:1;
}

/* media queries for mobile, tablet, and small screen friendly websites */


@media handheld, only screen and (max-width: 767px) {
	.row, .body, .container {
	width: 100%;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	}
	/* kill prefixes and suffixes, otherwise 1-column version breaks */
	.pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11 {padding-left: 0;}
	.suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11 {padding-right: 0;}

	/************************************************************************/

	/* cssgrid.net - mobile presets */
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6,
	.col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		clear: both;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 20px;
		padding-right: 20px;
		width: 96% !important;
		width: -moz-available;
	}


	/* Columnal - sub columns */
	.col_2 .col_1, 
	.col_3 .col_2, .col_3 .col_1,
	.col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
	.col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
	.col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
	.col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
	.col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
	.col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
	.col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
	.col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1,
	.col_12 .col_11, .col_12 .col_10, .col_12 .col_9, .col_12 .col_8, .col_12 .col_7, .col_12 .col_6, .col_12 .col_5, .col_12 .col_4, .col_12 .col_3, .col_12 .col_2, .col_12 .col_1 {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/* .row {width: 100%;} */
	/* Type presets */
	.container h1 {margin:.5em 0 .5em;}
	.container h2 {margin:.5em 0 .535em;}
	.container h3 {margin:.5em 0 .57em;}
	.container h4 {margin:.5em 0 .615em;}
	.container h5 {margin:.5em 0 .67em;}
	.container h6 {margin:.5em 0 .8em;}

	/* .reverse {padding-top: 1em; margin-bottom: 1em;} */

	/* Columnal content control - use on any elements to show/hide content on mobile */
	.mobile-hide {display: none;}
	.mobile-only {display: block;}

	/*****************************************
	   CUSTOM ADDITIONS FOR MOBILE SITE LAYOUT 
	*****************************************/
}