@import url(https://fonts.googleapis.com/css?family=Open+Sans);


 


/* STRUCTURE */

#pagewrap {
	width: 950px;
	margin: 20px auto;
}

#sidebar {
	width: 33%;
	padding: 25px 35px;
	float: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 1200px) {
	
	#pagewrap {
		width: 75%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}



/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}


/* for 700px or less */
@media screen and (max-width: 414px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}


/* for 700px or less */
@media screen and (max-width: 1100px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}


#content {
	
  background: #fff;
}
#sidebar {
	background: #CE0031;
}
header, #content, #middle, #sidebar {
	margin-bottom: 0px;

}

#sidebar, footer {
	border: solid 1px #fff;
	border-right-color: #fff;
}