Bones/src/stylesheets/skeleton.css

/* 
* Skeleton V0.1
* Created by Dave Gamache
* www.skeleton.gs
* 4/30/2011
*/


/* Table of Content
==================================================
	#Base 960 Grid 
	#Responsive: Fluid Grid for Downscaling 
	#Responsive: Full Fluid Grid    
	#Mobile: iPad Portrait 
	#Mobile: iPhone Portrait 
	#Mobile: iPhone Landscape 
	#Clearing
	
	
/* Quick Note: The way the grid system works is that the default is a 960 grid that 
scales identical to it's mobile styles. There is also an option to make browser version
fluid rather than mirror mobile on downscale (.fluid960). There is also a fully fluid grid (.fluid), 
which applies to mobile as well.*/
	

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

	.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
	.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	
	/* Nested Column Classes */
	.column.alpha, .columns.alpha 				{ margin-left: 0; }
	.column.omega, .columns.omega 				{ margin-right: 0; }
	
	/* Base Grid */
	.container .one.column 							{ width: 40px;  }
	.container .two.columns 						{ width: 100px; }
	.container .three.columns 					{ width: 160px; }
	.container .four.columns 						{ width: 220px; }
	.container .five.columns 						{ width: 280px; }
	.container .six.columns 						{ width: 340px; }
	.container .seven.columns 					{ width: 400px; }	
	.container .eight.columns 					{ width: 460px; }
	.container .nine.columns 						{ width: 520px; }
	.container .ten.columns 						{ width: 580px; }	
	.container .eleven.columns 					{ width: 640px; }	
	.container .twelve.columns 					{ width: 700px; }
	.container .thirteen.columns 				{ width: 760px; }	
	.container .fourteen.columns 				{ width: 820px; }	
	.container .fifteen.columns 				{ width: 880px; }
	.container .sixteen.columns 				{ width: 940px; }
	
	/* Offsets */	
	.container .offset-by-one 					{ padding-left: 60px;  }
	.container .offset-by-two 					{ padding-left: 120px; }
	.container .offset-by-three 				{ padding-left: 180px; }
	.container .offset-by-four 					{ padding-left: 240px; }
	.container .offset-by-five 					{ padding-left: 300px; }
	.container .offset-by-six 					{ padding-left: 360px; }
	.container .offset-by-seven 				{ padding-left: 420px; }
	.container .offset-by-eight 				{ padding-left: 480px; }
	.container .offset-by-nine 					{ padding-left: 540px; }
	.container .offset-by-ten 					{ padding-left: 600px; }
	.container .offset-by-eleven 				{ padding-left: 660px; }
	.container .offset-by-twelve 				{ padding-left: 720px; }
	.container .offset-by-thirteen 			{ padding-left: 780px; }
	.container .offset-by-fourteen 			{ padding-left: 840px; }
	.container .offset-by-fifteen 			{ padding-left: 900px; }
	
	
	
	
	
/* #Responsive: Fluid Grid for Downscaling 
================================================== */
	  
	/* NOTE: Cannot be used with nested columns. */
		
/*
	@media screen and (min-device-width: 789px) and (max-width: 959px) {	
		.fluid960.container { 
			width: 100%;
			min-width: 320px;  }
		.fluid960.container .column,
		.fluid960.container .columns { margin-left: 1%; margin-right: 1%; }
	
		.fluid960.container .one.column 						{ width: 4.25%;  }
		.fluid960.container .two.columns 						{ width: 10.5%; }
		.fluid960.container .three.columns 					{ width: 16.75%; }
		.fluid960.container .four.columns 					{ width: 23%; }
		.fluid960.container .five.columns 					{ width: 29.25%; }
		.fluid960.container .six.columns 						{ width: 35.5%; }
		.fluid960.container .seven.columns 					{ width: 41.75%; }	
		.fluid960.container .eight.columns 					{ width: 48%; }
		.fluid960.container .nine.columns 					{ width: 54.25%; }
		.fluid960.container .ten.columns 						{ width: 60.5%; }	
		.fluid960.container .eleven.columns 				{ width: 66.75%; }	
		.fluid960.container .twelve.columns 				{ width: 73%; }
		.fluid960.container .thirteen.columns 			{ width: 79.25%; }	
		.fluid960.container .fourteen.columns 			{ width: 85.5%; }	
		.fluid960.container .fifteen.columns 				{ width: 91.75%; }
		.fluid960.container .sixteen.columns 				{ width: 98%; }	
	}
*/
	
	
	
	
/* #Responsive: Fully Fluid Grid  
================================================== */
	  
	/* NOTE: Cannot be used with nested columns. */
		
/*
		.fluid.container { 
			width: 100%;
			min-width: 320px; }
		.fluid.container .column,
		.fluid.container .columns { margin-left: 1%; margin-right: 1%; }
	
		.fluid.container .one.column 							{ width: 4.25%;  }
		.fluid.container .two.columns 						{ width: 10.5%; }
		.fluid.container .three.columns 					{ width: 16.75%; }
		.fluid.container .four.columns 						{ width: 23%; }
		.fluid.container .five.columns 						{ width: 29.25%; }
		.fluid.container .six.columns 						{ width: 35.5%; }
		.fluid.container .seven.columns 					{ width: 41.75%; }	
		.fluid.container .eight.columns 					{ width: 48%; }
		.fluid.container .nine.columns 						{ width: 54.25%; }
		.fluid.container .ten.columns 						{ width: 60.5%; }	
		.fluid.container .eleven.columns 					{ width: 66.75%; }	
		.fluid.container .twelve.columns 					{ width: 73%; }
		.fluid.container .thirteen.columns 				{ width: 79.25%; }	
		.fluid.container .fourteen.columns 				{ width: 85.5%; }	
		.fluid.container .fifteen.columns 				{ width: 91.75%; }
		.fluid.container .sixteen.columns 				{ width: 98%; }	
*/
	
	
/* #Responsive: Go Mobile
================================================== */	

	/* NOTE: These styles mimic mobile styles in browser */
	
	
/* #Responsive: iPad Portrait
================================================== */	

	/* Note: Design for a width of 768px */

	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.container { width: 768px; }
		.container .column, 
		.container .columns { margin-left: 10px; margin-right: 10px;  }
		.column.alpha, .columns.alpha 				{ margin-left: 0; margin-right: 10px; }
		.column.omega, .columns.omega 				{ margin-right: 0; margin-left: 10px; }
	
		.container .one.column 							{ width: 28px;  }
		.container .two.columns 						{ width: 76px; }
		.container .three.columns 					{ width: 124px; }
		.container .four.columns 						{ width: 172px; }
		.container .five.columns 						{ width: 220px; }
		.container .six.columns 						{ width: 268px; }
		.container .seven.columns 					{ width: 316px; }	
		.container .eight.columns 					{ width: 364px; }
		.container .nine.columns 						{ width: 412px; }
		.container .ten.columns 						{ width: 460px; }	
		.container .eleven.columns 					{ width: 508px; }	
		.container .twelve.columns 					{ width: 556px; }
		.container .thirteen.columns 				{ width: 604px; }	
		.container .fourteen.columns 				{ width: 652px; }	
		.container .fifteen.columns 				{ width: 700px; }
		.container .sixteen.columns 				{ width: 748px; }
	}
	
	
/* Mobile
================================================== */
	
	/* Note: Design for a width of 320px */
	
	@media only screen and (max-width: 767px) {
		.container { width: 300px; }
		.columns, .column { margin: 0; }
		
		.container .one.column,
		.container .two.columns,
		.container .three.columns,
		.container .four.columns,
		.container .five.columns,
		.container .six.columns,
		.container .seven.columns,
		.container .eight.columns,
		.container .nine.columns,
		.container .ten.columns,
		.container .eleven.columns,
		.container .twelve.columns,
		.container .thirteen.columns,
		.container .fourteen.columns,
		.container .fifteen.columns,
		.container .sixteen.columns { width: 300px; }
	}	 
	
	
/* Mobile Landscape
================================================== */

	/* Note: Design for a width of 480px */
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.container { width: 420px; }
		.columns, .column { margin: 0; }
		
		.container .one.column,
		.container .two.columns,
		.container .three.columns,
		.container .four.columns,
		.container .five.columns,
		.container .six.columns,
		.container .seven.columns,
		.container .eight.columns,
		.container .nine.columns,
		.container .ten.columns,
		.container .eleven.columns,
		.container .twelve.columns,
		.container .thirteen.columns,
		.container .fourteen.columns,
		.container .fifteen.columns,
		.container .sixteen.columns { width: 420px; }
	}
	 
	
/* Clearing
================================================== */

	/* Self Clearing Goodness */
	.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
	
	/* Use clearfix class on parent to clear nested columns*/
	.clearfix:before,
	.clearfix:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	.clearfix:after {
	  clear: both; }
	.clearfix {
	  zoom: 1; }
	  
	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}