/* 	Layout	v1.3
 *	By Matthew Lee
 */  

/* Contain floats: h5bp.com/q */ 
.row:before, [class*='row-']:before, 
.row:after, [class*='row-']:after 	{ content: ""; display: table; }
.row:after, [class*='row-']:after 	{ clear: both; }
.row, [class*='row-'] 	{ zoom: 1; width:100%; margin:auto; float:none; } 

/* Padded boxes using box-sizing */
.box, [class*='box-'] 	{ width:100%; float:none; padding:1.5em; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  }
/* styles for js boxfix */
.no-boxsizing .box, 
.no-boxsizing [class*='box-'] { padding:0; }
.no-boxsizing .boxfix { padding:1.5em; }

/* Default widths */
[class*='size-'] { float:left; }
.size-1-1	{ width:100%; float:none; }
.size-1-2	{ width:50%; }
.size-1-3	{ width:33.3333%; }
.size-1-4 	{ width:25%; }
.size-1-5	{ width:20%; }
.size-1-6	{ width:16.6667%; }
.size-1-8	{ width:12.5%; }
.size-2-3	{ width:66.6667%; }
.size-3-4	{ width:75%; }
.size-2-5	{ width:40%  }				
.size-3-5	{ width:60%; }
.size-4-5	{ width:80%; }
.size-5-6	{ width:83.3333%; }
.size-3-8	{ width:37.5%; }
.size-5-8	{ width:62.5%; }
.size-7-8	{ width:87.5%; }



/* convenience class, add to a .row to make its children order from right to left */
.reverse>[class*='size-'] { float:right; }	
				
/* Base font sizes and zoomable baseline grid */
.gigantic				{ font-size:6.875em; line-height:1.09090909em; }
h1, .massive			{ font-size:4.250em; line-height:1.05882353em; }
h2, .huge				{ font-size:2.625em; line-height:1.14285714em; }
h3, .large				{ font-size:2.250em; line-height:1.33333333em; }
.big					{ font-size:1.250em; line-height:1.2em; }
h4, h5, .normal			{ font-size:1.000em; line-height:1.5em; }
h6, small, .small		{ font-size:0.875em; line-height:1.71428571em; }
.tiny					{ font-size:0.625em; line-height:1.2em; }
.micro					{ font-size:0.5em; 	 line-height:1.5em; }

blockquote, p 			{ margin-bottom:1.5em; }
body 					{ line-height:1.5em; }
code, em, strong, b, i 	{ line-height:1em; } /* fix for these elements nested in other elements increaseing line-height by 1px */


/* Each media size specified should generate a chunk of code similar to this. */
/*
// label - can be for a specific size (min & max) or above / below threshhold (min | max)
@media screen and (min-width:xxx) and (max-width:yyy){
	.fold-label>[class*='size-'] { float:none; width:100%; } 
	.label-1-2 { width:50%; }
} 
*/