/* responsive.css - marc@elemental.ca */

/* Main Structure Elements */

/* @group container elements */

html,
body {
    height:100%;
}

#page-wrapper {
	width: 100%;
	padding: 0 5px;
	overflow: hidden;
	background: pink;
	background: #999999;
	background: #FFFFFF;
	/*background: rgb(242, 242, 242);
	background: rgba(242, 242, 242, 0.8);*/
}

#page,
.region-bottom {
	max-width: 1200px;
	margin: 0 auto;
	/*background-color: fuchsia;*/
	/*background: #F2F2F2;
	background: rgb(242, 242, 242);
	background: rgba(242, 242, 242, 0.8);*/
}



/* @end */

/* @group content elements */

#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#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;
	margin: 0;
	padding: 0 10px;
}

#header,
#highlighted,
#main,
#footer {
	*position: relative;
	*zoom: 1;
}

#header:before,
#header:after,
.color-wrapper:before,
.color-wrapper:after,
#highlighted:before,
#highlighted:after,
#main:before,
#main:after,
#footer:before,
#footer:after {
	content: "";
	display: table;
}

#header:after,
#highlighted:after,
#main:after,
#footer:after {
	clear: both;
}

#header {
	position: relative;
	width: 100%;
	/*height: 120px;*/
	margin: 0;
	padding: 0;
	/*background: lime;*/
	background: #FFFFFF;
}

#header .color-wrapper {
	/*background: orangered;*/
	/*display: block;*/
	/*width: 100%;*/
	/*height: 160px;*/
	/*min-height: 160px;*/
}

.region-header {
	display: block;
	float: left;
	position: relative;
	width: 100%;
	/*background-color: yellow;*/
}

#main-navigation {
	display: block;
	/*background: pink;*/
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

#highlighted {
	/*background-color: lawngreen;*/
	margin: 0;
	padding: 0;
}

.front #highlighted {
	/*background-color: lawngreen;*/
	margin: 0;
	padding: 0;
}

#main {
	clear: both;
	margin: 40px 0 0;
	margin: 0;
	padding: 0 0 20px;
	background: #FFFFFF;
	/*background-color: salmon;*/
	/*border-top: 10px solid orange;*/
}

.region-view-content-above {
	/*background-color: yellow;*/
	padding-top: 10px;
}

#footer-wrapper {
	width: 100%;
	min-height: 160px;
	margin: 0 0 50px;
	padding: 0;
	background: lime;
	background: #BBBBBB;
}

#footer {
	/*background: greenyellow;*/
	position: relative;
	width: 100%;
	min-height: 160px;
	margin: 0;
	padding: 5px 5px 10px;
}

/* @end */

/* Responsive Columns */

@media all and (min-width: 480px) {
	#main {
		/*padding-top: 3em;*/
		position: relative;
	}

	/*#navigation {
		position: absolute;
		top: 0;
		height: 3em;
		width: 100%;
	}*/
}

@media all and (min-width: 0px) and (max-width: 479px) {

/*NO SIDEBAR*/
	.no-sidebars #content {
		float: left;
		width: 100%;
		/*background-color: indianred;*/
}

	/*LEFT SIDEBAR*/
	.sidebar-first #content {
		float: left;
		width: 60%;
		margin-left: 40%;
		margin-right: -100%;
	}

	.sidebar-first .region-sidebar-first {
		float: left;
		width: 40%;
		margin-left: 0%;
		margin-right: -40%;
	}

	/*RIGHT SIDEBAR*/
	.sidebar-second #content {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-bottom: 20px;
		margin-right: 0%;
		padding-top: 10px;
		/*background-color: cadetblue;*/
}

	.sidebar-second .region-sidebar-second {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: 0%;
		padding-top: 10px;
		/*background-color: fuchsia;*/
	}

	/*TWO SIDEBARS*/
	.two-sidebars #content {
		float: left;
		width: 60%;
		margin-left: 40%;
		margin-right: -100%;
	}

	.two-sidebars .region-sidebar-first {
		float: left;
		width: 40%;
		margin-left: 0%;
		margin-right: -40%;
	}

	.two-sidebars .region-sidebar-second {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
		padding-left: 0;
		padding-right: 0;
		clear: left;
	}

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

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
		float: left;
		width: 33.33333%;
		margin-left: 0%;
		margin-right: -33.33333%;
		clear: left;
	}*/

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
		float: left;
		width: 33.33333%;
		margin-left: 33.33333%;
		margin-right: -66.66667%;
	}*/

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n) {
		float: left;
		width: 33.33333%;
		margin-left: 66.66667%;
		margin-right: -100%;
	}*/
}

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

/*NO SIDEBAR*/
	.no-sidebars #content {
		float: left;
		width: 100%;
		/*background-color: khaki;*/
}

	/*LEFT SIDEBAR*/
	.sidebar-first #content {
		float: left;
		width: 60%;
		margin-left: 40%;
		margin-right: -100%;
	}

	.sidebar-first .region-sidebar-first {
		float: left;
		width: 40%;
		margin-left: 0%;
		margin-right: -40%;
	}

	/*RIGHT SIDEBAR*/
	.sidebar-second #content {
		float: left;
		width: 60%;
		margin-left: 0%;
		margin-right: -60%;
		/*background-color: orchid;*/
	}

	.sidebar-second .region-sidebar-second {
		float: left;
		width: 40%;
		margin-left: 60%;
		margin-right: -100%;
		padding-top: 10px;
		/*background-color: salmon;*/
	}

	/*TWO SIDEBARS*/
	.two-sidebars #content {
		float: left;
		width: 60%;
		margin-left: 40%;
		margin-right: -100%;
		padding-top: 10px;
	}

	.two-sidebars .region-sidebar-first {
		float: left;
		width: 40%;
		margin-left: 0%;
		margin-right: -40%;
	}

	.two-sidebars .region-sidebar-second {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-right: -100%;
		padding-left: 0;
		padding-right: 0;
		clear: left;
	}

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

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
		float: left;
		width: 33.33333%;
		margin-left: 0%;
		margin-right: -33.33333%;
		clear: left;
	}*/

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
		float: left;
		width: 33.33333%;
		margin-left: 33.33333%;
		margin-right: -66.66667%;
	}*/

	/*.two-sidebars .region-sidebar-second .block:nth-child(3n) {
		float: left;
		width: 33.33333%;
		margin-left: 66.66667%;
		margin-right: -100%;
	}*/
}

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

/*NO SIDEBAR*/
	.no-sidebars #content {
		float: left;
		width: 100%;
		/*background-color: orange;*/
}

	/*LEFT SIDEBAR*/
	.sidebar-first #content {
		float: left;
		width: 70%;
		margin-left: 30%;
		margin-right: -100%;
	}

	.sidebar-first .region-sidebar-first {
		float: left;
		width: 30%;
		margin-left: 0%;
		margin-right: -30%;
	}

	/*RIGHT SIDEBAR*/
	.sidebar-second #content {
		float: left;
		width: 60%;
		margin-left: 0%;
		margin-right: -60%;
		padding-top: 10px;
		/*background-color: teal;*/
}

	.sidebar-second .region-sidebar-second {
		float: left;
		width: 40%;
		margin-left: 60%;
		margin-right: -100%;
		padding-top: 10px;
		/*background-color: orangered;*/
}

	/*TWO SIDEBARs*/
	.two-sidebars #content {
		float: left;
		width: 60%;
		margin-left: 20%;
		margin-right: -80%;
	}

	.two-sidebars .region-sidebar-first {
		float: left;
		width: 20%;
		margin-left: 0%;
		margin-right: -20%;
	}

	.two-sidebars .region-sidebar-second {
		float: left;
		width: 20%;
		margin-left: 80%;
		margin-right: -100%;
	}
}