/**
 * Contao Open Source CMS, Copyright (C) 2005-2012 Leo Feyer
 * 
 * Pixel Grid with 1120 pixel
 * @copyright  Glen Langer (BugBuster) 2012
 * @author     BugBuster
 * @package    contaogrid-1120-16
 * @license    LGPL 
 */

/**
 * Make the wrapping container 1120 pixel wide
 */
#wrapper {
	width:1120px;
	margin:0 auto;
}

/**
 * Set the default margin of the grid columns
 */
*[class*="grid"] {
	float:left;
	display:inline;
	margin-right:10px;
	margin-left:10px;
    box-sizing:border-box;
-moz-box-sizing:border-box;
}

/**
 * Add a default margin to all content elements, so they align with the floatet
 * ones (otherwise you would have to add "grid12" to every element)
 */
.mod_article>* {
	margin-left:10px;
	margin-right:10px;
}

/**
 * Remove the margin from floated articles, because the margin is already
 * applied to its content elements (see above)
 */
.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,
.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12,
.mod_article.grid13,.mod_article.grid14,.mod_article.grid15,.mod_article.grid16 {
	margin-left:0;
	margin-right:0;
}

/**
 * Grid column widths
 */
.grid1  { width:50px;  }
.grid2  { width:120px; }
.grid3  { width:190px; }
.grid4  { width:260px; }
.grid5  { width:330px; }
.grid6  { width:400px; }
.grid7  { width:470px; }
.grid8  { width:540px; }
.grid9  { width:610px; }
.grid10 { width:680px; }
.grid11 { width:750px; }
.grid12 { width:820px; }
.grid13 { width:890px; }
.grid14 { width:960px; }
.grid15 { width:1030px; }
.grid16 { width:1100px; }

/**
 * For 100% wide, without margin, not within an article
 * e.g. for HTML Modules in header 
 */
.grid16_0 {
    margin: 0 !important;
    width: 100%;
}

/**
 * Floated articles can be 20 pixel wider (no margin)
 */
.mod_article.grid1  { width:70px;  }
.mod_article.grid2  { width:140px; }
.mod_article.grid3  { width:210px; }
.mod_article.grid4  { width:280px; }
.mod_article.grid5  { width:350px; }
.mod_article.grid6  { width:420px; }
.mod_article.grid7  { width:490px; }
.mod_article.grid8  { width:560px; }
.mod_article.grid9  { width:630px; }
.mod_article.grid10 { width:700px; }
.mod_article.grid11 { width:770px; }
.mod_article.grid12 { width:840px; }
.mod_article.grid13 { width:910px; }
.mod_article.grid14 { width:980px; }
.mod_article.grid15 { width:1050px; }
.mod_article.grid16 { width:1120px; }

/**
 * Default offset widths
 */
.offset1  { margin-left:80px;  } 
.offset2  { margin-left:150px; } 
.offset3  { margin-left:220px; } 
.offset4  { margin-left:290px; } 
.offset5  { margin-left:360px; } 
.offset6  { margin-left:430px; } 
.offset7  { margin-left:500px; } 
.offset8  { margin-left:570px; } 
.offset9  { margin-left:640px; } 
.offset10 { margin-left:710px; } 
.offset11 { margin-left:780px; } 
.offset12 { margin-left:850px; } 
.offset13 { margin-left:920px; } 
.offset14 { margin-left:990px; } 
.offset15 { margin-left:1060px; }


/**
 * Reduce the overall width and the width of the grid columns if the screen
 * width is less than 1140px
 */
@media (min-width:980px) and (max-width:1140px)
{
	/**
	 * Reduce the overall width
	 */
	#wrapper {
		width:960px;
	}

	/**
	 * Reduce the grid column widths
	 */
	.grid1  { width:40px; }
	.grid2  { width:100px; }
	.grid3  { width:160px; }
	.grid4  { width:220px; }
	.grid5  { width:280px; }
	.grid6  { width:340px; }
	.grid7  { width:400px; }
	.grid8  { width:460px; }
	.grid9  { width:520px; }
	.grid10 { width:580px; }
	.grid11 { width:640px; }
	.grid12 { width:700px; }
	.grid13 { width:760px; }
	.grid14 { width:820px; }
	.grid15 { width:880px; }
	.grid16 { width:940px; }

	/**
	 * Floated articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:60px; }
	.mod_article.grid2  { width:120px; }
	.mod_article.grid3  { width:180px; }
	.mod_article.grid4  { width:240px; }
	.mod_article.grid5  { width:300px; }
	.mod_article.grid6  { width:360px; }
	.mod_article.grid7  { width:420px; }
	.mod_article.grid8  { width:480px; }
	.mod_article.grid9  { width:540px; }
	.mod_article.grid10 { width:600px; }
	.mod_article.grid11 { width:660px; }
	.mod_article.grid12 { width:720px; }
	.mod_article.grid13 { width:780px; }
	.mod_article.grid14 { width:840px; }
	.mod_article.grid15 { width:900px; }
	.mod_article.grid16 { width:960px; }

	/**
	 * Reduce the offset widths
	 */
	.offset1  { margin-left:70px; }
	.offset2  { margin-left:130px; }
	.offset3  { margin-left:190px; }
	.offset4  { margin-left:250px; }
	.offset5  { margin-left:310px; }
	.offset6  { margin-left:370px; }
	.offset7  { margin-left:430px; }
	.offset8  { margin-left:490px; }
	.offset9  { margin-left:550px; }
	.offset10 { margin-left:610px; }
	.offset11 { margin-left:670px; }
	.offset12 { margin-left:730px; }
	.offset13 { margin-left:790px; }
	.offset14 { margin-left:850px; }
	.offset15 { margin-left:910px; }
}


/**
 * Reduce the overall width and the width of the grid columns if the screen
 * width is less than 980px (e.g. on a portrait tablet)
 */
@media (min-width:768px) and (max-width:979px)
{
	/**
	 * Reduce the overall width
	 */
	#wrapper {
		width:768px;
	}

	/**
	 * Reduce the grid column widths
	 */
	.grid1  { width:28px; }
	.grid2  { width:76px; }
	.grid3  { width:124px; }
	.grid4  { width:172px; }
	.grid5  { width:220px; }
	.grid6  { width:268px; }
	.grid7  { width:316px; }
	.grid8  { width:364px; }
	.grid9  { width:412px; }
	.grid10 { width:460px; }
	.grid11 { width:508px; }
	.grid12 { width:556px; }
	.grid13 { width:604px; }
	.grid14 { width:652px; }
	.grid15 { width:700px; }
	.grid16 { width:748px; }

	/**
	 * Floated articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:48px; }
	.mod_article.grid2  { width:96px; }
	.mod_article.grid3  { width:144px; }
	.mod_article.grid4  { width:192px; }
	.mod_article.grid5  { width:240px; }
	.mod_article.grid6  { width:288px; }
	.mod_article.grid7  { width:336px; }
	.mod_article.grid8  { width:384px; }
	.mod_article.grid9  { width:432px; }
	.mod_article.grid10 { width:480px; }
	.mod_article.grid11 { width:528px; }
	.mod_article.grid12 { width:576px; }
	.mod_article.grid13 { width:624px; }
	.mod_article.grid14 { width:672px; }
	.mod_article.grid15 { width:720px; }
	.mod_article.grid16 { width:768px; }

	/**
	 * Reduce the offset widths
	 */
	.offset1  { margin-left:58px; }
	.offset2  { margin-left:106px; }
	.offset3  { margin-left:154px; }
	.offset4  { margin-left:202px; }
	.offset5  { margin-left:250px; }
	.offset6  { margin-left:298px; }
	.offset7  { margin-left:346px; }
	.offset8  { margin-left:394px; }
	.offset9  { margin-left:442px; }
	.offset10 { margin-left:490px; }
	.offset11 { margin-left:538px; }
	.offset12 { margin-left:586px; }
	.offset13 { margin-left:634px; }
	.offset14 { margin-left:682px; }
	.offset15 { margin-left:730px; }
}

/**
 * Remove all floats and fixed widths if the screen width is less than 768
 * pixel (e.g. on a mobile phone)
 */
@media (max-width:767px)
{
	/**
	 * Remove the overall width
	 */
	#wrapper {
		width:auto;
	}

	/**
	 * Show all columns underneath each other
	 * #3, #5
	 */
	*[class*="grid"] {
		float:none !important;
		display:block !important;
		width:auto !important;
	}
}