/*
* MPA3 Main container styles
*/


/* Table of Contents
==================================================
	#Base
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)
	#Clearing */



/* #Base
================================================== */

	.container { position: relative; width: 100%; margin: 0 auto; padding: 0; }
	#headerbg { position: relative; width: 100%; margin: 0 auto; padding: 0; height: 108px;  background: #f8f8f8; border-bottom: #e7e7e7 1px solid; /*border-top: #92c843 6px solid;*/ }
	header {height:108px; margin-bottom:10px; position: relative; width: 918px; margin: 0 auto; }
	/*header:after {
		position:absolute;
		display:block;
		top:108px;
		left:0;
		width:988px;
		height:14px;
		background:url(../images/header_sub.png) center top no-repeat;
		content:'';
	}*/

	#content {position: relative; /*width: 918px;*/ margin: 0 auto;}
	footer {position: relative; padding-top: 16px; padding-bottom:20px; color:#666; width: 918px; margin: 0 auto; border-top: #e7e7e7 1px solid;}
	footer div {
		display: inline-block;
		vertical-align: baseline;
	}
	.column, .columns 	{float: left; display: block; margin: 0;}
	.row 				{margin-bottom: 20px;}

	/* Nested Column Classes */
	.column.alpha, .columns.alpha 				{margin-left: 0;}
	.column.omega, .columns.omega 				{margin-right: 0;}

	/* Base Grid */
	.container .full.columns 					{width: 918px;}


/* #Tablet (Portrait) //Design for a width of 768px//
================================================== */

	@media only screen and (min-width: 768px) and (max-width: 987px) {
		header, #content {width: 768px; }
		header:after {
			width:768px;
			/*background:url(../images/header_sub768.png) center top no-repeat;*/
		}
		.container .full.columns { width: 768px; }
		footer {width: 768px;}
	}

/*	#Mobile (Portrait)  //Design for a width of 320px//
================================================== */

	@media only screen and (max-width: 767px) {
		header, #content {width: 300px;  margin:10px; }
		header:after {
			width:300px;
			/*background:url(../images/header_sub300.png) center top no-repeat;*/
		}
		.columns, .column { margin: 0; }
		.container .full.columns  { width: 300px; }
		footer {width: 100%; padding: 16px 20px 20px; box-sizing: border-box;}
		#mpfooter {clear: left;}
	}

/* #Mobile (Landscape) //Design for a width of 480px//
================================================== */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
		header, #content {width: 420px;  margin:10px; }
		header:after {
			width:420px;
			/*background:url(../images/header_sub420.png) center top no-repeat;*/
		}
		.container .full.columns { width: 420px; }
		footer {width: 100%;}
	}
/* #Clearing
================================================== */

	/* Self Clearing Goodness */
	.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

	/* Use clearfix class on parent to clear nested columns,
	or wrap each row of columns in a <div class="row"> */
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	.row:after,
	.clearfix:after {
	  clear: both; }
	.row,
	.clearfix {
	  zoom: 1; }

	/* You can also use a <br class="clear" /> to clear columns */
	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}