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

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

/**
 * Set the default margin of the grid columns
 */
*[class*="grid"] {
	float:left;
	margin-left:10px;
	margin-right:10px;
	display:inline;
	-moz-box-sizing:border-box;
	     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 *[class*="ce_"], .mod_article *[class*="mod_"]{
	margin-left:10px;
	margin-right:10px;
}


/**
 * Handle news and event reader modules which are added via content element and
 * contain content elements themselves (see #5331)
 */
.mod_article .mod_newsreader,.mod_article .mod_eventreader {
	margin-left:0;
	margin-right:0;
}
.mod_article *[class*="layout_"] > *,.mod_article *[class*="event_"] > * {
	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 {
	margin-left:0;
	margin-right:0;
}

/**
 * Automatically clear the floats in the main column, so you do not have to add
 * a clearing div to each article
 */
#main .inside {
	overflow:hidden;
}

/**
 * Grid column widths
 */
.grid1  { width:62px;  }
.grid2  { width:144px; }
.grid3  { width:226px; }
.grid4  { width:308px; }
.grid5  { width:390px; }
.grid6  { width:472px; }
.grid7  { width:554px; }
.grid8  { width:636px; }
.grid9  { width:718px; }
.grid10 { width:800px; }
.grid11 { width:882px; }
.grid12 { width:964px; }

/**
 * Floated articles can be 20 pixel wider (no margin)
 */
.mod_article.grid1  { width:82px;  }
.mod_article.grid2  { width:164px; }
.mod_article.grid3  { width:246px; }
.mod_article.grid4  { width:328px; }
.mod_article.grid5  { width:410px; }
.mod_article.grid6  { width:492px; }
.mod_article.grid7  { width:574px; }
.mod_article.grid8  { width:656px; }
.mod_article.grid9  { width:738px; }
.mod_article.grid10 { width:820px; }
.mod_article.grid11 { width:902px; }
.mod_article.grid12 { width:984px; }

/**
 * Default offset widths
 */
.offset1  { margin-left:92px  !important; }
.offset2  { margin-left:174px !important; }
.offset3  { margin-left:256px !important; }
.offset4  { margin-left:338px !important; }
.offset5  { margin-left:420px !important; }
.offset6  { margin-left:502px !important; }
.offset7  { margin-left:584px !important; }
.offset8  { margin-left:666px !important; }
.offset9  { margin-left:748px !important; }
.offset10 { margin-left:830px !important; }
.offset11 { margin-left:912px !important; }
.offset12 { margin-left:994px !important; }

/**
 * Floated articles do not have margin
 */
.mod_article.offset1  { margin-left:82px  !important; }
.mod_article.offset2  { margin-left:164px !important; }
.mod_article.offset3  { margin-left:246px !important; }
.mod_article.offset4  { margin-left:328px !important; }
.mod_article.offset5  { margin-left:410px !important; }
.mod_article.offset6  { margin-left:492px !important; }
.mod_article.offset7  { margin-left:574px !important; }
.mod_article.offset8  { margin-left:656px !important; }
.mod_article.offset9  { margin-left:738px !important; }
.mod_article.offset10 { margin-left:820px !important; }
.mod_article.offset11 { margin-left:902px !important; }
.mod_article.offset12 { margin-left:984px !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:983px)
{
	/**
	 * Reduce the overall width
	 */
	#wrapper {
		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; }

	/**
	 * Floated articles do not have margin
	 */
	.mod_article.offset1  { margin-left:62px  !important; }
	.mod_article.offset2  { margin-left:124px !important; }
	.mod_article.offset3  { margin-left:186px !important; }
	.mod_article.offset4  { margin-left:248px !important; }
	.mod_article.offset5  { margin-left:310px !important; }
	.mod_article.offset6  { margin-left:372px !important; }
	.mod_article.offset7  { margin-left:434px !important; }
	.mod_article.offset8  { margin-left:496px !important; }
	.mod_article.offset9  { margin-left:558px !important; }
	.mod_article.offset10 { margin-left:620px !important; }
	.mod_article.offset11 { margin-left:682px !important; }
	.mod_article.offset12 { margin-left:744px !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)
{
	/**
	 * Remove the overall width
	 */
	#wrapper {
		width:auto;
	}

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