/**
 * Make the wrapping container 960 pixel wide
 */
#wrapper {
	width:960px;
	margin:0 auto;
}
@media screen and (min-width:768px) and (max-width:979px) {
	#wrapper {
		width:100%;
		margin:0 auto;
	}
	#header .inside,
	#footer .inside,
	#container .inside{
		max-width: 744px;
		margin: 0 auto;
	}
}
@media screen and (min-width:980px){
	#wrapper {
		width:960px;
		width:auto;
		margin:0 auto;
	}
	#header .inside,
	#footer .inside,
	#container .inside{
		min-width: 768px;
		max-width: 960px;
		margin: 0 auto;
	}
}
/**
 * Set the default margin of the grid columns
 */
*[class*="grid"] {
	float:left;
	margin-left:10px;
	margin-right:10px;
	display:inline;
}

/**
 * Add a default margin to all content elements, so they align with the floatet ones (no need to add "grid12" to every element)
 */
/*.inside > *:not([class*="grid"]){
	margin-left:10px;
	margin-right:10px;
}*/

/**
 * Remove margin from nested grids
 */
.section.grid1, .section.grid2, .section.grid3, .section.grid4, .section.grid5, .section.grid6, .section.grid7, .section.grid8, .section.grid9, .section.grid10, .section.grid11, .section.grid12 {
	margin-left:0;
	margin-right:0;
}

/**
 * Clear floats of main columns, avoid clearing divs
 */
#main .inside {
	overflow:hidden;
}

/**
 * Grid column widths
 */
.grid1 {	width:60px;}
.grid2 {	width:140px;}
.grid3 {	width:220px;}
.grid4 {	width:300px;}
.grid5 {	width:380px;}
.grid6 {	width:460px;}
.grid7 {	width:540px;}
.grid8 {	width:620px;}
.grid9 {	width:700px;}
.grid10 {width:780px;}
.grid11 {width:860px;}
.grid12 {width:940px;}

/**
 * Floated grids can be 20 pixel wider (no margin)
 */
.section.grid1 {	width:80px;}
.section.grid2 {	width:160px;}
.section.grid3 {	width:240px;}
.section.grid4 {	width:320px;}
.section.grid5 {	width:400px;}
.section.grid6 {	width:480px;}
.section.grid7 {	width:560px;}
.section.grid8 {	width:640px;}
.section.grid9 {	width:720px;}
.section.grid10 {width:800px;}
.section.grid11 {width:880px;}
.section.grid12 {width:960px;}

/**
 * Default offset widths
 */
.offset1 {margin-left:90px;}
.offset2 {margin-left:170px;}
.offset3 {margin-left:250px;}
.offset4 {margin-left:330px;}
.offset5 {margin-left:410px;}
.offset6 {margin-left:490px;}
.offset7 {margin-left:570px;}
.offset8 {margin-left:650px;}
.offset9 {margin-left:730px;}
.offset10 {margin-left:810px;}
.offset11 {margin-left:890px;}
.offset12 {margin-left:970px;}

/**
 * Reduce width of grid columns for width < 980px
 */
@media screen and (min-width:768px) and (max-width:979px) {
	
	/**
	 * Reduce the overall width
	 */

	/**
	 * Reduce the grid column widths
	 */
	.grid1 {width:42px;}
	.grid2 {width:104px;}
	.grid3 {width:166px;}
	.grid4 {width:228px;}
	.grid5 {width:290px;}
	.grid6 {width:352px;}
	.grid7 {width:414px;}
	.grid8 {width:476px;}
	.grid9 {width:538px;}
	.grid10 {width:600px;}
	.grid11 {width:662px;}
	.grid12 {width:724px;}

	/**
	 * Floated grids can be 20 pixel wider (no margin)
	 */
	.section.grid1 {	width:62px;}
	.section.grid2 {width:124px;}
	.section.grid3 {width:186px;}
	.section.grid4 {width:248px;}
	.section.grid5 {width:310px;}
	.section.grid6 {width:372px;}
	.section.grid7 {width:434px;}
	.section.grid8 {width:496px;}
	.section.grid9 {width:558px;}
	.section.grid10 {width:620px;}
	.section.grid11 {width:682px;}
	.section.grid12 {width:744px;}

	/**
	 * Reduce the offset widths
	 */
	.offset1 {margin-left:72px;}
	.offset2 {margin-left:134px;}
	.offset3 {margin-left:196px;}
	.offset4 {margin-left:258px;}
	.offset5 {margin-left:320px;}
	.offset6 {margin-left:382px;}
	.offset7 {margin-left:444px;}
	.offset8 {margin-left:506px;}
	.offset9 {margin-left:568px;}
	.offset10 {margin-left:630px;}
	.offset11 {margin-left:692px;}
	.offset12 {margin-left:754px;}
}

/**
 * Reduce width of grid columns for width < 768px
 */
@media screen and (max-width:767px) {	
	/**
	 * Remove the overall width
	 */
	#wrapper {
		width:auto;
	}

	/**
	 * Align Columns underneath each other
	 */
	*[class*="grid"] {
		float:none !important;
		display:block !important;
		width:auto !important;
	}
	
	/**
	 * Destroy offset margins
	*/
	[class*="offset"] {
		margin-left: 10px !important;
	}	
}