<style type="text/css">

body {
	
	Margin: 0;
	Padding: 0;
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 

 
.pic {
 
  float: left;
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
   
 
}

/*GROW*/
.grow img {
	width: 100%;	
 	height: 100%;
  
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 110%;
  height: 110%;
}


#container {
	position:relative;
	width:969px;
	margin:0 auto;
	/*background:#eee;	*/
}


.videoWrapper {
	position: relative;
	top:860px;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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;
}
footer ul  {
	text-align:center;
	display:inline;
	
	
}
footer ul li {
	text-align:center;
	display:inline;
	padding-right: 180px;
    padding-left: 180px;
	
}

footer ul li a:active  {
  /* Applies to activated links */
  text-decoration:underline;
  font-weight:      bold;
  font-size:16px;
  color:            black;
  } 

nav 	{
	width:33.33%;
	float:left;
	text-align:right;
	/*background:#666;*/
	padding: 40px 8px 14px 0px ;
	font-family: "Courier New", Courier, monospace;
	font-weight:bold;
		font-size:18px;
}
ul {
	
	list-style-type: none;
}




.main 	{
	float:left;
	width:66.66%;
	height:360px;
	padding:10px 0px 0px 0px;
	text-align:right;
	
}

p {
	margin:0;
}
.col-1-2	{
	float:left;
	width:50%;
	padding:0 0px;
}

aside	{
	height:360px;
	float:left;
	width:33%;
	
	background-image: url(images/aaside.png);
	padding:10px 0px 0px 0px;
	text-align:center;	

	
}
aside h2{
	padding-top:40px;
}

	a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  font-weight:      bold;
  
  color:            #000000;
  } 
a:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  font-weight:      bold;
  color:            #000000;
  
  } 
a:hover   {
  /* Applies to links under the pointer */
  
  font-weight:      bold;
  
  color:            grey;
  } 
a:active  {
  /* Applies to activated links */
  
  font-weight:      bold;
  font-size:14px;
  color:            grey;
  } 

/* 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: 20px 0px 200px 0px ;
	/*background: #ddd;*/
	float:left;
}
footer ul li {
	display:inline;
	padding-right: 100px;
    
    padding-left: 100px;
}
	.main	{
		width: 67%;	/* 66.66666 */
		height:240px;
	}
	

	.col-1-2	{
		/*force these to take up the full width */
		width: 100%;
	}
		nav {
		width: 33%;
	}
	aside	{
		width: 33%; /* 33.33333% */
		height:240px;
	}
	aside h2{
	padding-top:0px;
}
	.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%;
		
		padding: 0px 0px 0px 0px ;
		text-align:center;
	}
	nav ul li {
	display:inline;
	padding-right: 50px;
    
    padding-left: 25px;
}
	.main {
		width: 100%;
		height:180px;
	}
	
	aside {
		display: none;
		width: 50%;
		height:180px;
	}
	.videoWrapper {
		position: relative;
		top:700px;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
}
	ul li{
		display: inline;
		height: 60px;
	}
	footer {
	position: relative;
	top: 20px;
	padding: 20px 0px 0px 0px ;
	/*background: #ddd;*/
	float:left;
	
}
footer ul li {
	display:inline;
	padding-right: 25px;
    
    padding-left: 25px;
}


</style>