/**
 * Contao Open Source CMS
 *
 * Copyright (c) 2005-2013 Leo Feyer
 *
 * @package Core
 * @link    https://contao.org
 * @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
 */

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

#container .block { margin-bottom: 15px; }

#header .inside { width: 1200px; margin: 0 auto; }

#main .inside { overflow:hidden; }

#left .inside { margin: 20px 60px 0 0; }
#right .inside { margin: 5px 0 0 60px; }

#wrapper {
	width:1200px;
	margin:0 auto;
}


@media (min-width:980px)
{

	/**
	 * Grid column widths
	 */
	.grid1  { width:80px;  }
	.grid2  { width:180px; }
	.grid3  { width:280px; }
	.grid4  { width:380px; }
	.grid5  { width:480px; }
	.grid6  { width:580px; }
	.grid7  { width:680px; }
	.grid8  { width:780px; }
	.grid9  { width:880px; }
	.grid10 { width:980px; }
	.grid11 { width:1080px; }
	.grid12 { width:1180px; }
	
	/**
	 * Floated articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:100px;  }
	.mod_article.grid2  { width:200px; }
	.mod_article.grid3  { width:300px; }
	.mod_article.grid4  { width:400px; }
	.mod_article.grid5  { width:500px; }
	.mod_article.grid6  { width:600px; }
	.mod_article.grid7  { width:700px; }
	.mod_article.grid8  { width:800px; }
	.mod_article.grid9  { width:900px; }
	.mod_article.grid10 { width:1000px; }
	.mod_article.grid11 { width:1100px; }
	.mod_article.grid12 { width:1200px; }
	
	/**
	 * Default offset widths
	 */
	.offset1  { margin-left:90px  !important; }
	.offset2  { margin-left:190px !important; }
	.offset3  { margin-left:290px !important; }
	.offset4  { margin-left:390px !important; }
	.offset5  { margin-left:490px !important; }
	.offset6  { margin-left:590px !important; }
	.offset7  { margin-left:690px !important; }
	.offset8  { margin-left:790px !important; }
	.offset9  { margin-left:890px !important; }
	.offset10 { margin-left:990px !important; }
	.offset11 { margin-left:1090px !important; }
	.offset12 { margin-left:1190px !important; }

}



@media (min-width:980px) and (max-width:1199px)
{

	#wrapper {
		width:960px;
		margin:0 auto;
	}

	#header .inside { width: 960px; }

	/**
	 * 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 articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:80px;  }
	.mod_article.grid2  { width:160px; }
	.mod_article.grid3  { width:240px; }
	.mod_article.grid4  { width:320px; }
	.mod_article.grid5  { width:400px; }
	.mod_article.grid6  { width:480px; }
	.mod_article.grid7  { width:560px; }
	.mod_article.grid8  { width:640px; }
	.mod_article.grid9  { width:720px; }
	.mod_article.grid10 { width:800px; }
	.mod_article.grid11 { width:880px; }
	.mod_article.grid12 { width:960px; }
	
	/**
	 * Default offset widths
	 */
	.offset1  { margin-left:90px  !important; }
	.offset2  { margin-left:170px !important; }
	.offset3  { margin-left:250px !important; }
	.offset4  { margin-left:330px !important; }
	.offset5  { margin-left:410px !important; }
	.offset6  { margin-left:490px !important; }
	.offset7  { margin-left:570px !important; }
	.offset8  { margin-left:650px !important; }
	.offset9  { margin-left:730px !important; }
	.offset10 { margin-left:810px !important; }
	.offset11 { margin-left:890px !important; }
	.offset12 { margin-left:970px !important; }

}

/**
 * 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)
{

	#left .inside { margin: 0 30px 0 0; }
	#right .inside { margin: 0 0 0 30px; }

	#wrapper {
		width:744px;
	}

	#header .inside { width: 744px; }

	/**
	 * 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 articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:62px;  }
	.mod_article.grid2  { width:124px; }
	.mod_article.grid3  { width:186px; }
	.mod_article.grid4  { width:248px; }
	.mod_article.grid5  { width:310px; }
	.mod_article.grid6  { width:372px; }
	.mod_article.grid7  { width:434px; }
	.mod_article.grid8  { width:496px; }
	.mod_article.grid9  { width:558px; }
	.mod_article.grid10 { width:620px; }
	.mod_article.grid11 { width:682px; }
	.mod_article.grid12 { width:744px; }

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

/**
 * 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)
{

	#left .inside { margin: 0; }
	#right .inside { margin: 0; }

	/**
	 * Remove the overall width
	 */
	#wrapper {
		width:auto;
		margin: 0 10px 0 10px;
	}

	#header .inside { width: auto; }
	
	#container { clear: both; }

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