/**
 * @file
 * Positioning for responsive layout .
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 */

/*
 * Center the page.
 */

#page,
.region-bottom {
	/* For screen sizes larger than 1200px, prevent excessively long lines of text
		 by setting a max-width. */
	margin-left: auto;
	margin-right: auto;
}

#header,
#main,
.region-bottom {
	margin-left: auto;
	margin-right: auto;
	/*max-width: 1100px;*/
}

.region-bottom {
	max-width: 1200px;
}

.front .region-bottom,
.front #footer {
	margin-left: auto;
	margin-right: auto;
	/*max-width: 1100px;*/
	max-width: 1200px;
}

/*
 * Apply the shared properties of grid items in a single, efficient ruleset.
 */
#header,
.region-content,
.region-content-top,
.region-content-bottom,
#navigation,
.region-sidebar-first-container,
.region-sidebar-second-container,
#footer {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
	_display: inline;
	_overflow: hidden;
	_overflow-y: visible;
}
.region-content-top {
	margin-bottom: 10px;
}
#header,
.region-content,
.region-content-top,
.region-content-bottom,
.region-sidebar-first-container,
.region-sidebar-second-container,
#global-messages {
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

.front #content-container .region-content {
	padding-left: 0;
	padding-right: 0;
}

.node-type-mission-template .region-content { padding: 0; }
.region-sidebar-first-container {
	padding-right: 0;
}
.region-sidebar-second-container {
	padding-left: 0;
}

/*
 * Containers for grid items and flow items.
 */

#header,
#main,
#footer {
	*position: relative;
	*zoom: 1;
}
#header:before, #header:after,
#main:before, #main:after,
#footer:before, #footer:after {
	content: "";
	display: table;
}
#header:after,
#main:after,
#footer:after {
	clear: both;
}

/*
 * Navigation bar
 */

@media all and (min-width: 750px) {
	.region-content {
		position: relative;
	}

	#navigation {
		width: 100%;
	}
}

/*
 * Use 3 grid columns for smaller screens.
 */

@media all and (min-width: 750px) and (max-width: 959px) {

	/*
	 * The layout when there is only one sidebar, the left one.
	 */

	.sidebar-first .region-content { /* Span 2 columns, starting in 2nd column from left. */
		float: left;
		width: 72.5%;
		margin-left: 27.5%;
		margin-right: -100%;
	}
	.sidebar-first .region-sidebar-first-container { /* Span 1 column, starting in 1st column from left. */
		float: left;
		width: 27.5%;
		margin-left: 0%;
		margin-right: -27.5%;
	}

	/*
	 * The layout when there is only one sidebar, the right one.
	 */

	.sidebar-second .region-content { /* Span 2 columns, starting in 1st column from left. */
		float: left;
		width: 72.5%;
		margin-left: 0%;
		margin-right: -72.5%;
	}
	.sidebar-second .region-sidebar-second-container { /* Span 1 column, starting in 3rd column from left. */
		float: left;
		width: 27.5%;
		margin-left: 72.5%;
		margin-right: -100%;
	}

	/*
	 * The layout when there are two sidebars.
	 */

	.two-sidebars .region-content { /* Span 2 columns, starting in 2nd column from left. */
		float: left;
		width: 72.5%;
		margin-left: 27.5%;
		margin-right: -100%;
	}
	.two-sidebars .region-sidebar-first-container { /* Span 1 column, starting in 1st column from left. */
		float: left;
		width: 27.5%;
		margin-left: 0%;
		margin-right: -27.5%;
	}
	.two-sidebars .region-sidebar-second-container { /* Start a new row and span all 3 columns. */
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
		*position: relative;
		*zoom: 1;
		padding-left: 0;
		padding-right: 0;
		clear: left;
	}
	.two-sidebars .region-sidebar-second-container:before,
	.two-sidebars .region-sidebar-second-container:after {
		content: "";
		display: table;
	}
	.two-sidebars .region-sidebar-second-container:after {
		clear: both;
	}
	.two-sidebars .region-sidebar-second-container .block {
		padding-left: 10px;
		padding-right: 10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		_display: inline;
		_overflow: hidden;
		_overflow-y: visible;
	}
	.two-sidebars .region-sidebar-second-container .block:nth-child(3n+1) { /* Span 1 column, starting in the 1st column from left. */
		float: left;
		width: 27.5%;
		margin-left: 0%;
		margin-right: -27.5%;
		clear: left;
	}
	.two-sidebars .region-sidebar-second-container .block:nth-child(3n+2) { /* Span 1 column, starting in the 2nd column from left. */
		float: left;
		width: 27.5%;
		margin-left: 27.5%;
		margin-right: -72.5%;
	}
	.two-sidebars .region-sidebar-second-container .block:nth-child(3n) { /* Span 1 column, starting in the 3rd column from left. */
		float: left;
		width: 27.5%;
		margin-left: 72.5%;
		margin-right: -100%;
	}
}

/*
 * Use 5 grid columns for larger screens.
 */

@media all and (min-width: 960px) {

	/*
	 * The layout when there is only one sidebar, the left one.
	 */

	.sidebar-first .region-content { /* Span 4 columns, starting in 2nd column from left. */
		float: left;
		width: 72.5%;
		margin-left: 27.5%;
		margin-right: -100%;
	}
	.sidebar-first .region-sidebar-first-container { /* Span 1 column, starting in 1st column from left. */
		float: left;
		width: 27.5%;
		margin-left: 0%;
		margin-right: -27.5%;
	}

	/*
	 * The layout when there is only one sidebar, the right one.
	 */

	.sidebar-second .region-content { /* Span 4 columns, starting in 1st column from left. */
		float: left;
		width: 72.5%;
		margin-left: 0%;
		margin-right: -72.5%;
	}
	.sidebar-second .region-sidebar-second-container { /* Span 1 column, starting in 5th column from left. */
		float: left;
		width: 27.5%;
		margin-left: 72.5%;
		margin-right: -100%;
	}

	/*
	 * The layout when there are two sidebars.
	 */

	.two-sidebars .region-content { /* Span 3 columns, starting in 2nd column from left. */
		float: left;
		width: 45%;
		margin-left: 27.5%;
		margin-right: -72.5%;
	}
	.two-sidebars .region-sidebar-first-container { /* Span 1 column, starting in 1st column from left. */
		float: left;
		width: 27.5%;
		margin-left: 0%;
		margin-right: -27.5%;
	}
	.two-sidebars .region-sidebar-second-container { /* Span 1 column, starting in 5th column from left. */
		float: left;
		width: 27.5%;
		margin-left: 72.5%;
		margin-right: -100%;
	}
}

@media all and (max-width: 749px) {

	/*
	 * The layout when there is only one sidebar, the left one.
	 */

	.region-content,
	.region-sidebar-first-container,
	.region-sidebar-second-container { /* Span 1 column, starting in 1st column from left. */
		float: none !important;
		width: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.region-sidebar-first-container {
		padding-right: 10px;
	}
	.region-sidebar-second-container {
		padding-left: 10px;
	}
	.sidebars {
		margin-top: 10px;
	}
	#header {
		padding-left: 0;
		padding-right: 0;
		margin-left: 10px;
		margin-right: 10px;
	}
}