/**
 * @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.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

/*
 * 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;
	max-width: 1200px;
}

/*
 * Apply the shared properties of grid items in a single, efficient ruleset.
 */

#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
	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;
}

@media all and (max-width: 480px) {
	/*#header,
	#content,
	#navigation,
	.region-sidebar-first,
	.region-sidebar-second,
	#footer {
		padding-left: 0px;
		padding-right: 0px;
	}*/
}

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

#header,
#main,
#footer {
	*position: relative;
	*zoom: 0.5;
}
#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: 480px) {*/
	#main {
		padding-top: 4em; /* Move all the children of #main down to make room. */
		/*position: relative;*/
		padding-bottom: 2em;
	}

	#navigation {
		margin: 10px 0 10px 80px;
		height: 30px;
		padding: 0;
	}
	
	@media (max-width: 720px) {
		#navigation {
		}
	}
	
/*}*/

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

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

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

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

	/* Span 1 column, starting in 1st column from left. */
	.sidebar-first .region-sidebar-first {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
		padding-left: 0;
		padding-right: 0;
		clear: left;
	}

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

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

	/* Span 1 column, starting in 3rd column from left. */
	.sidebar-second .region-sidebar-second {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
		padding-left: 0;
		padding-right: 0;
		clear: left;
	}

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

	/* Span 2 columns, starting in 2nd column from left. */
	.two-sidebars #content {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
	}

	/* Span 1 column, starting in 1st column from left. */
	.two-sidebars .region-sidebar-first {
		float: left;
		width: 50%;
		margin-left: 0%;
		margin-right: -50%;
		clear: left;
	}

	/* Start a new row and span all 3 columns. */
	.two-sidebars .region-sidebar-second {
		float: left;
		width: 50%;
		margin-left: 50%;
		margin-right: -100%;
	}

	/* Apply the shared properties of grid items in a single, efficient ruleset. */
	.two-sidebars .region-sidebar-second .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;
		*behavior: url("/path/to/boxsizing.htc");
		_display: inline;
		_overflow: hidden;
		_overflow-y: visible;
	}

	/* Span 1 column, starting in the 1st column from left. */
	.two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
		float: left;
		width: 33.33333%;
		margin-left: 0%;
		margin-right: -33.33333%;
		clear: left;
	}

	/* Span 1 column, starting in the 2nd column from left. */
	.two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
		float: left;
		width: 33.33333%;
		margin-left: 33.33333%;
		margin-right: -66.66667%;
	}

	/* Span 1 column, starting in the 3rd column from left. */
	.two-sidebars .region-sidebar-second .block:nth-child(3n) {
		float: left;
		width: 33.33333%;
		margin-left: 66.66667%;
		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.
	 */

	/* Span 4 columns, starting in 2nd column from left. */
	.sidebar-first #content {
		float: left;
		width: 66.66667%;
		margin-left: 33.33333%;
		margin-right: -100%;
	}

	/* Span 1 column, starting in 1st column from left. */
	.sidebar-first .region-sidebar-first {
		float: left;
		width: 33.33333%;
		margin-left: 0%;
		margin-right: -33.33333%;
	}

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

	/* Span 4 columns, starting in 1st column from left. */
	.sidebar-second #content {
		float: left;
		width: 66.66667%;
		margin-left: 0%;
		margin-right: -66.66667%;
	}

	/* Span 1 column, starting in 5th column from left. */
	.sidebar-second .region-sidebar-second {
		float: left;
		width: 33.33333%;
		margin-left: 66.66667%;
		margin-right: -100%;
	}

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

	/* Span 3 columns, starting in 2nd column from left. */
	.two-sidebars #content {
		float: left;
		width: 60%;
		margin-left: 20%;
		margin-right: -80%;
	}

	/* Span 1 column, starting in 1st column from left. */
	.two-sidebars .region-sidebar-first {
		float: left;
		width: 20%;
		margin-left: 0%;
		margin-right: -20%;
	}

	/* Span 1 column, starting in 5th column from left. */
	.two-sidebars .region-sidebar-second {
		float: left;
		width: 20%;
		margin-left: 80%;
		margin-right: -100%;
	}
}