/**
 * @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.
 */

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

#content,
#navigation, 
.region-bottom {
	-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;
}

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

#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;
}


@media all and (min-width: 480px) {
	#main {
		position: relative;
	}

	#navigation {
		line-height: 80px;
	}
}

@media all and (max-width: 479px) {
	#main { 
		width: 100%;
	}
}

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

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

	#main { 
		width: 350px;
		height: 265px;
		position: absolute;
		left: 50%;
		top: 150px;
		padding: 15px;
		margin-left: -175px;
	}
	
	#footer .region-logo {
		width: 100%;
		background-color: white;
		position: absolute;
		top: 0;
		margin: 0;
	}
	#footer .region-logo > div { width: 170px; margin: 0 auto;  }
	
	#footer #navigation {
		position: absolute;
		top: 580px;
		width: 100%;
		background-color: #F5F5F5;
	}
	#footer #navigation ul.menu li {
		width: 50%;
		text-align: center;
		background-color: #F5F5F5;
		height: 40px;
		line-height: 40px;
	}
	#footer #navigation ul.menu li:hover { background-color: #FFF; }
	#footer #navigation ul.menu li.active-trail { background: #FFF url("../../images/arrow-right-mobile.png") 0 50% no-repeat scroll; }
	#footer #navigation ul.menu li.active-trail.even { background: #FFF url("../../images/arrow-left-mobile.png") 100% 50% no-repeat scroll; }
	#footer #navigation ul.menu li a { border: 0 none; }
	
	.region-bottom { 
		position: absolute;
		top: 780px; 
		width: 100%;
		height: 70px;
		background-color: #FFF!important;
	}
	.region-bottom .promo-box { display: none; }
	.region-bottom #block-locale-language, .region-bottom .block { 
		float: none; 
		margin: 0 auto; 
		width: 300px; 
		position: static;
		left: auto;
		right: auto;
		text-align: center;
		color: #9498A1;
	}
	.region-bottom #block-locale-language { margin-top: 5px; }
	.region-bottom #block-locale-language ul li { color: #9498A1; }
	.region-bottom #block-locale-language h2 { margin-left: 75px; color: #9498A1; }
	
	#show_hide_thumb { margin: 37px auto 0 auto!important; }
	#show_hide_thumb.open { margin-top: 48px!important; } 
}

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

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

	#main {
		width: 350px;
		height: 265px;
		position: fixed;
		padding: 15px;
	}
	#content, #files { width: 100%; height: 100%; }
	#footer {
		height: 80px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.region-bottom {
		position: fixed;
		bottom: 80px;
		left: 0;
		height: 100px;
		width: 100%;
		padding: 5px 20px;
		margin-bottom: -100px;
		z-index: 1;
	}
}

@media all and (min-width: 960px) and (min-height: 480px) {
	#main { 
		right: 80px;
		top: 80px;
	}
}

@media all and (min-width: 960px) and (max-height: 479px) {
	#main {
		right: 35px;
		top: 35px;
	}
}