/**
 * 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:10px;
	margin-right:10px;
	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:10px;
	margin-right:10px;
}

/* prot */

*[class*="grid"] .mod_article *[class*="ce_"],*[class*="grid"] .mod_article *[class*="mod_"] {
	margin-left:0px;
	margin-right:0px;
}


/**
 * 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;
}
.no-marg {
	margin-left:0 !important;
	margin-right:0 !important;
}
/**
 * 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;
}

/**
 * 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;
}

.clr { clear: both !important;}

/**
 * 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; }

/**
 * Box column widths
 */

.box.grid6  { width:318px; padding: 10px; }


/**
 * 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:736px;
	}

	/**
	 * Reduce the grid column widths
	 */
	.grid1  { width:26px;  }
	.grid2  { width:72px; }
	.grid3  { width:118px; }
	.grid4  { width:164px; }
	.grid5  { width:210px; }
	.grid6  { width:256px; }
	.grid7  { width:302px; }
	.grid8  { width:348px; }
	.grid9  { width:394px; }
	.grid10 { width:440px; }
	.grid11 { width:486px; }
	.grid12 { width:532px; }
	.grid13 { width:578px; }
	.grid14 { width:624px; }
	.grid15 { width:670px; }
	.grid16 { width:716px; }

	/**
	 * Floated articles can be 20 pixel wider (no margin)
	 */
	.mod_article.grid1  { width:46px;  }
	.mod_article.grid2  { width:92px; }
	.mod_article.grid3  { width:138px; }
	.mod_article.grid4  { width:184px; }
	.mod_article.grid5  { width:230px; }
	.mod_article.grid6  { width:276px; }
	.mod_article.grid7  { width:322px; }
	.mod_article.grid8  { width:368px; }
	.mod_article.grid9  { width:414px; }
	.mod_article.grid10 { width:460px; }
	.mod_article.grid11 { width:506px; }
	.mod_article.grid12 { width:552px; }
	.mod_article.grid13 { width:598px; }
	.mod_article.grid14 { width:644px; }
	.mod_article.grid15 { width:690px; }
	.mod_article.grid16 { width:736px; }

	/**
	 * Box column widths
	 */

	.box.grid6  { width:234px; padding: 10px; }

}



/**
 * 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;
	}
}