/* 
* Skeleton V1.0.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 5/20/2011
*/


/* Table of Contents
==================================================
	#Base 960 Grid    
	#Tablet (Portrait)
	#Mobile (Portrait) 
	#Mobile (Landscape)
	#Clearing */
	
	

/* #Base 960 Grid 
================================================== */

	.container { 
		clear: both; 
		width: 100%; 
		max-width: 960px; 
		margin: 0 auto;
		padding: 0 0 0 2%;
		/* border-top: 1px solid yellow;  */
	 }
 
	.column, .columns { float: left; display: inline; margin-left: 0%; margin-right: 2%; padding-left: 2%; padding-right: 2%;   /* border-top: 1px solid #fff;   */ }
	.row { margin-bottom: 20px; }
	
	/* Nested Column Classes */
	.column.alpha, .columns.alpha 						{ margin-left: 0; }
	.column.omega, .columns.omega 					{ margin-right: 0; }
	
	.nopad { 
		padding: 0px; 
	}
	
	/*****************************
		12 Column
		Calculator is here: https://docs.google.com/spreadsheet/ccc?key=0AlDnu6LBWY__dDdHakpaRFhzUUlXdVVGRktLS1Z0VWc#gid=0
	*****************************/
	
	/* Base Grid */
	
	.container .one.column 										{ width: 2.33333333333333%;  }
		.container .four .one.column.nopad 					{ width: 20%;  }
		.container .three .one.column.nopad 				{ width: 31.3333333333333%;  }

	.container .two.columns 										{ width: 10.6666666666667%; }
		.container .two.columns.nopad 						{ width: 15%; }
		.container .three .two.columns.nopad 				{ width: 60%; }
		.container .four .two.columns.nopad 				{ width: 49%; }
		.container .eight .two.columns.nopad 				{ width: 23.3333333333333%; /* border-top: 2px solid red;  */ }

	.container .three.columns 									{ width: 19%; }
		.container .three.columns.nopad					 	{ width: 23%;  /* border-top: 2px solid red;  */ }
		.container .twelve .four .three.columns.nopad	{ width: 75%; }
		.container .twelve .three.columns.nopad		 	{ width: 23.3333333333333%; }
	
	.container .four.columns 										{ width: 27.3333333333333%; }
		.container .four.columns.nopad 						{ width: 31.3333333333333%; /* border-top: 1px solid red; */ }
		.container .eight .three.columns.nopad 			{ width: 36.5%; }
		.container .eight .four.columns 						{ width: 45%; }
		.container .eight .four.columns.nopad 				{ width: 49%; }
		.container .twelve .four.columns.nopad 			{ width: 32%;  }
	
	.container .five.columns 										{ width: 35.6666666666667%; }
		.container .five.columns.nopad						{ width: 39.6666666666667%; }
		.container .eight .five.columns.nopad				{ width: 61.5%; }
	
	.container .six.columns 										{ width: 44%; }
		.container .eight .six.columns.nopad				{ width: 72%; }
		.container .eight.nopad .six.columns.nopad		{ width: 72%; }
		.container .twelve .six.columns.nopad				{ width: 49%; }

	.container .seven.columns 									{ width: 52.3333333333333%; }	
		.container .seven.columns.nopad						{ width: 56.3333333333333%; }	

	.container .eight.columns 									{ width: 60.6666666666666%; /* border-top: 2px solid red; */}
		.container .eight.columns.nopad						{ width: 64.6666666666666%; /* border-top: 1px solid red;  */}
		.container .twelve .eight.columns.nopad 			{ width: 65.6666666666666%; }
	
	.container .nine.columns 									{ width: 69%; }
		.container .nine.columns.nopad 						{ width: 73%; /* border-top: 2px solid red;  */ }
	
	.container .ten.columns 										{ width: 77.3333333333333%; }	
	.container .eleven.columns 									{ width: 85.6666666666666%; }	
	.container .twelve.columns 									{ width: 96%; }
	
	
    /* Offsets */
  	.container .offset-by-one                   { padding-left: 8.3333333333333333333333333333333%; }
	.container .offset-by-two                   { padding-left: 16.666666666666666666666666666667%; }
	.container .offset-by-three                 { padding-left: 21%; }
	.container .offset-by-four                  { padding-left: 33.333333333333333333333333333333%; }
	.container .offset-by-five                  { padding-left: 41.666666666666666666666666666667%; }
	.container .offset-by-six                   { padding-left: 50%; }
	.container .offset-by-seven                 { padding-left: 58.333333333333333333333333333333%; }
	.container .offset-by-eight                 { padding-left: 66.666666666666666666666666666667%; }
	.container .offset-by-nine                  { padding-left: 75%; }
	.container .offset-by-ten                   { padding-left: 83.333333333333333333333333333333%; }
	.container .offset-by-eleven                { padding-left: 89.583333333333333333333333333333%; }
    
	
/* #Mobile
================================================== */

	/* Note: Design for a width of 480px */
	
	@media only screen and (max-width: 960px) {
	
		.container { 
			clear: both; 
			width: 100%; 
			margin: 0 auto;
			padding: 0%;
		 }
		.column, .columns { margin-left: 0%; margin-right: 0%; padding-left: 2%; padding-right: 2%;  }
		
		.container .one.column,
			.container .four .one.column.nopad,
		.container .two.columns,
			.container .two.columns.nopad,
			.container .eight .two.columns.nopad,
		.container .three.columns,
			.container .three.columns.nopad,
			.container .four.three.columns.nopad,
			.container .eight .three.columns.nopad,
			.container .eight .specialty.three.columns.nopad,
			.container .twelve .three.columns.nopad,
		.container .four.columns,
			.container .four.columns.nopad,
			.container .twelve .four.columns.nopad, 
			.container .eight .four.columns.nopad,
			.container .eight .four.columns,
		.container .five.columns,
		.container .eight .five.columns.nopad,
		.container .six.columns,
			.container .eight .six.columns.nopad,
			.container .twelve .six.columns.nopad, 	
		.container .seven.columns,
		.container .eight.columns,
			.container .eight.columns.nopad,
			.container .twelve .eight.columns.nopad, 
		.container .nine.columns,
			.container .nine.columns.nopad,
		.container .ten.columns,
		.container .eleven.columns,
		.container .twelve.columns,
		.container .thirteen.columns,
		.container .fourteen.columns,
		.container .fifteen.columns,
		.container .sixteen.columns,
		.container .one-third.column, 
		.container .two-thirds.column  
		{ width: 96%; /* border-top: 3px solid green; */ }
		
		.container .four.nopad .one.column.nopad,
		.container .eight .two.columns.nopad,
			.container .eight .three.columns.nopad,
			.container .four.nopad .three.columns.nopad,
		.container .four .two.columns.nopad {
			width: 46%;
			float: left;
		}
		
		.archive-list .two.columns.nopad.alpha {
			width: 20.625%;
		}

		.archive-list .six.columns.nopad.omega,
		.archive-list .three.columns.nopad.omega {
			width: 71.375%;
		}

	
	  	.container .offset-by-one,                  
		.container .offset-by-two,                  
		.container .offset-by-three,             
		.container .offset-by-four,                 
		.container .offset-by-five,            
		.container .offset-by-six,            
		.container .offset-by-seven,         
		.container .offset-by-eight,              
		.container .offset-by-nine,                 
		.container .offset-by-ten,                
		.container .offset-by-eleven { padding-left: 2% !important; }             

		
	}
	
	
	/* #Images
================================================== */

	
	img,
	embed,
	object,
	video {
		max-width: 100% !important;
		height: auto; 
		}
	
	embed {
		min-height: 360px;
	}	
	
	iframe {
		max-width: 100% !important;
	}


	
	
/* #Clearing
================================================== */

	/* Self Clearing Goodness */
	.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 
	
	/* Use clearfix class on parent to clear nested columns, 
	or wrap each row of columns in a <div class="row"> */
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	.row:after,
	.clearfix:after {
	  clear: both; }
	.row, 
	.clearfix {
	  zoom: 1; }
	  
	/* You can also use a <br class="clear" /> to clear columns */
	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}