/**
 * 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:960px;
	margin:0 auto;
}

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

/**
 * 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:1%;
	margin-right:1%;
}

/**
 * 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:1%;
	margin-right:1%;
}

/**
 * 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:6.333%;}
.grid2 {width:14.667%;}
.grid3 {width:23.0%;}
.grid4 {width:31.333%;}
.grid5 {width:39.667%;}
.grid6 {width:48.0%;}
.grid7 {width:56.333%;}
.grid8 {width:64.667%;}
.grid9 {width:73.0%;}
.grid10 {width:81.333%;}
.grid11 {width:89.667%;}
.grid12 {width:98.0%;}

/**
 * Floated articles can be 2% wider (no margin)
 */
.mod_article.grid1 {width:8.333%;}
.mod_article.grid2 {width:16.667%;}
.mod_article.grid3 {width:25.0%;}
.mod_article.grid4 {width:33.333%;}
.mod_article.grid5 {width:41.667%;}
.mod_article.grid6 {width:50.0%;}
.mod_article.grid7 {width:58.333%;}
.mod_article.grid8 {width:66.667%;}
.mod_article.grid9 {width:75.0%;}
.mod_article.grid10 {width:83.333%;}
.mod_article.grid11 {width:91.667%;}
.mod_article.grid12 {width:100%;}

/**
 * Default offset widths
 */
.offset1 {margin-left:9.333% !important;}
.offset2 {margin-left:17.667% !important;}
.offset3 {margin-left:26.0% !important;}
.offset4 {margin-left:34.333% !important;}
.offset5 {margin-left:42.667% !important;}
.offset6 {margin-left:51.0% !important;}
.offset7 {margin-left:59.333% !important;}
.offset8 {margin-left:67.667% !important;}
.offset9 {margin-left:76.0% !important;}
.offset10 {margin-left:84.333% !important;}
.offset11 {margin-left:92.667% !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 screen and (min-width:768px) and (max-width:979px)
{
	/**
	 * Reduce the overall width
	 */
	#wrapper {
		width:744px;
	}

}
/**
 * Remove all floats and fixed widths if the screen width is less than 768
 * pixel (e.g. on a mobile phone)
 */
@media screen and (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;
	}
}