<style type="text/css">

body {
	Margin: 0;
	Padding: 0;
	
	
}

*	{
	 -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			-box-sizing: border-box;
}

#container {
	position:relative;
	width:968px;
	margin:0 auto;
	/*background:#eee;	*/
}




header {
	width:66.66%;
	padding: 0px 0px 0px 8px ;
	/*background: #ddd;*/
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
}
footer {
	width: 100%;
	position: relative;
	top: 0px;
	padding: 40px 10px 200px 10px ;
	/*background: #ddd;*/
	float:left;
font-family: "Courier New", Courier, monospace;
	font-weight:bold;
		font-size:18px;
}




.main 	{
	float:left;
	height:402px;
	width:66.66%;
	padding-top:20%;
	text-align:centre;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 150%;
	font-weight:bold;
	/*background: #ddd;*/
}


.col-1-2	{
	float:left;
	width:50%;
	padding:0 10px;
}

aside	{
	float:left;
	height:402px;
	width:33.33%;
	background-image: url(images/aaside01.png); 
	background-repeat: no-repeat;
	padding-top: 20%;
	
	
}

.main p {
	margin: 0;
	padding-top:2%;
	padding-left:30%;
	text-align:centre;
	/*height:340px;*/
	/*padding-top:30%;*/
}
.main h3 {
	
	/*height:340px;*/
	padding-left:30%;
	padding-top:10%;
	text-align:centre;
	
}


		

	

/* Media queries for adaptive layout */
/* for 599 and below */
@media only screen and (max-width: 959px) {
	#container {
		/* Set our conttainer to its new size */
		width: 640px;
	}
	
	header {
		float:left;
		width:67%;
	}
	footer {
	position: relative;
	top:20px;
	padding: 0px 0px 200px 0px ;
	/*background: #ddd;*/
	float:left;
}
	.main {
		padding-top:30%;
		font-size: 100%;
		text-align:center;
	}
	

	.col-1-2	{
		/*force these to take up the full width */
		width: 100%;
	}
		nav {
		width: 33%;
	}
	aside	{
		height:270px;
		width: 33%; /* 33.33333% */
	}
	.videoWrapper {
		position: relative;
		top:620px;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
}

/* for 479px and below */
@media only screen and (max-width:639px) {
	#container {
		width: 320px;
	}

	
	header{
		padding: 0px 0px 0px 0px ;
		width:100%;
		/*height: 67px;*/
		
		
	}
	header img{
		width:100%;
		padding: 0px 0px 0px 0px ;
	}
	nav {
		width: 100%;
		text-align:center;
		padding: 0px 0px 0px 0px ;
	}
	nav ul li {
	display:inline;
	padding-right: 50px;
    
    padding-left: 25px;
}
	.main {
		width: 100%;
		padding-top:110%;
		padding-right:20%;
		font-size: 100%;
		text-align:left;
	}
	
	aside {
		/*display:none;*/
		width: 100%;
		height: 90px;
		text-align:center;
	}
	.videoWrapper {
		position: relative;
		top:340px;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
}
	 ul li{
		display: inline;
		height: 60px;
	}
	footer {
	position: relative;
	top: 0px;
	padding: 20px 0px 0px 0px ;
	/*background: #ddd;*/
	float:left;
	
}
footer ul li {
	display:inline;
	padding-right: 25px;
    
    padding-left: 25px;
}


</style>