/* 
	
	Name: grid.css
	Version: 1.0.0
	
	-
	
	Table of Contents
========================
   
    #Base Grid
	#Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Align
	#Responsive Images and Embeds
	#Clearing Content
	 
*/

/*  #Base  Grid
==================================================================================================== */

	.row{ 
		position:relative; 
		width:760px; 
		margin:15px;
	}
	
	.row .row{ width:auto; margin:0; }

 	.span1, 
	.span2, 
	.span3, 
	.span4, 
	.span5, 
	.span6, 
	.span7, 
	.span8, 
	.span9, 
	.span10, 
	.span11, 
	.span12 { float:left; }

	.span1{ 
		width: 45px;  
		margin-left:20px; 
	}
	
	.span2{ 
		width: 110px; 
		margin-left:20px; 
	}
	
	.span3{ 
		width: 175px; 
		margin-left:20px; 
	}
	
	.span4{ 
		width: 240px; 
		margin-left:20px; 
	}
	
	.span5{ 
		width: 305px; 
		margin-left:20px; 
	}
	
	.span6{ 
		width: 320px; 
		margin-left:30px; 
	}
	
	.span7{ 
		width: 435px; 
		margin-left:20px; 
	}
	
	.span8{ 
		width: 500px; 
		margin-left:20px; 
	}
	
	.span9{ 
		width: 565px; 
		margin-left:20px; 
	}
	
	.span10{ 
		width: 630px;
		margin-left:20px; 
	}
	
	.span11{ 
		width: 695px; 
		margin-left:20px; 
	}
	
	.span12{ 
		width: 760px;
		margin-left:20px; 
	}
	
	.span1:first-child, 
	.span2:first-child, 
	.span3:first-child, 
	.span4:first-child, 
	.span5:first-child, 
	.span6:first-child, 
	.span7:first-child, 
	.span8:first-child, 
	.span9:first-child, 
	.span10:first-child, 
	.span11:first-child, 
	.span12:first-child{ margin-left:0; }
 
 
/*  #Tablet (Portrait)
==================================================================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.row{ width:705px; }

	.span1{ 
		width: 45px;  
		margin-left:15px; 
	}
	
	.span2{ 
		width: 105px; 
		margin-left:15px; 
	}
	
	.span3{ 
		width: 165px; 
		margin-left:15px; 
	}
	
	.span4{ 
		width: 225px; 
		margin-left:15px; 
	}
	
	.span5{ 
		width: 285px; 
		margin-left:15px; 
	}
	
	.span6{ 
		width: 345px; 
		margin-left:15px; 
	}
	
	.span7{ 
		width: 405px; 
		margin-left:15px; 
	}
	
	.span8{ 
		width: 465px; 
		margin-left:15px; 
	}
	
	.span9{ 
		width: 525px; 
		margin-left:15px; 
	}
	
	.span10{ 
		width: 585px;
		margin-left:15px; 
	}
	
	.span11{ 
		width: 646px; 
		margin-left:15px; 
	}
	
	.span12{ 
		width: 705px;
		margin-left:15px; 
	}
	
}
	
/*  #Mobile (Portrait)
==================================================================================================== */

@media only screen and (max-width: 767px) {
	
	.row{ width:280px; }
	
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12{ 
		width:280px; 
		margin-left:0; 
	}
	
}
	
/*  #Mobile (Landscape)
==================================================================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.row{ width:420px; }
	
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12{ 
		width:420px; 
		margin-left:0; 
	}
		
}

/*  #Align
==================================================================================================== */

	.float-left{ float:left; }
	.float-right{ float:right; }


/*  #Responsive Images and Embedss
==================================================================================================== */

	.responsive-img{ 
		max-width:100%; 
		height:auto; 
	}
	
	.responsive-embed{
		position:relative;
		padding:0px;
		padding-bottom:56.25%; /* 16/9 ratio */
		height:0;
		overflow:hidden;
		margin-bottom:20px;
	}

	.responsive-embed iframe,
	.responsive-embed object,
	.responsive-embed embed{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	

/*  #Clearing
==================================================================================================== */

	.row:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
		.row{display:block;}
		/*  \*/

		.row{min-height:1%;}
		* html .row{height:1%;}

	/* Clear Fix Hack - add  class="fixed"  to div's that have floated elements in them */
	.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
		.fixed{display:block;}
		/*  \*/
		.fixed{min-height:1%;}
		* html .fixed{height:1%;}
		
	/* Clear <br class="clear" /> */	
	.clear{
      clear:both;
      display:block;
      overflow:hidden;
      visibility:hidden;
      width: 0;
      height: 0;
	}