.active{												/*styling the active class to indicate current page*/
	color:rgba(255, 231, 21,1);							/*I chose to invert the color scheme; the font takes the background color*/
	background-color:rgba(5, 23, 255,.5);				/*and the background takes the font color as defined in the nav a below*/
}

.left{
	background-color: rgba(255, 231, 21, .5);			/*changes the left class' background color*/
	width: 20%;											/*insures the left side stays left when browser window resizes*/
	padding-bottom: 20%;								/*adds padding at the bottom that resizes with browser window resing*/
}

.left, .right{
	display: inline-block;								/*puts both sections side by side*/
	float: left;
}

.right{
	font-size: 110%;									/*text color*/
	background-color: rgba(255,255,255,1);				/*backround color*/
	width: 100%;											/*insures the right side stays right when browser window resizes*/
	padding-left: 1%;									/*separates left and right columns*/
}

.footer{
	color: rgba(255, 231, 21, .75);
	/*text-transform: title;*/
	font-size: 100%;
	clear:both;
	position:relative;
  left: 1;
  bottom: 1;
  width: 100%;
	padding-left: 1%;
	background-color: rgba(0, 0, 128, .85);
}

#level1{
 color: rgba(0, 0, 128, 1);
 /*text-transform: title;*/
 font-size: 100%;
 padding-left: 25px;
}

#level2{
 color: rgba(0, 0, 128, 1);
 /*text-transform: title;*/
 font-size: 100%;
 padding-left: 50px;
}

#level3{
 color: rgba(0, 0, 128, 1);
 /*text-transform: title;*/
 font-size: 100%;
 padding-left: 75px;
}

a{														/*non nav links: not styled*/
	color: rgba(0, 0, 0, 1);							/*from last week - unchanged: text color*/
	background: rgba(255,255,255,1);					/*from last week - unchanged: background color*/
	text-align: center;									/*from last week - unchanged: centering the text*/
}

body{													/*styling the body*/
	padding: .5%;										/*applying padding to the body*/
	margin: 2%;											/*applying margin to the body*/
}

h1{
	color: rgba(255, 231, 21, .75);						/*changing the font color*/
	text-transform: title;							/*from last week: changes the text style*/
	font-size: 400%;									/*increasing the font size*/
}

h2{
	color: rgba(0, 0, 128, 1);							/*from last week: text color*/
	font-size: 150%;									/*from last week: font size*/
}

h3{
	color: rgba(0, 0, 128, 1);							/*from last week: text color*/
	font-size: 125%;									/*from last week: font size*/
}

header{													/*styling the header*/
	background: rgba(255, 231, 21, .75);					/*header background color*/
	background-image: url(../images/foundations.jpg);		/*header background local image*/
	background-position: center;							/*positoning the background image to take into account browser window resigzing*/
	background-repeat: no-repeat;						/*making sure there is only one instance of the image*/
	background-size: 100%;								/*keeps the image covering the whole background width if browser window is resized*/
	min-width: 100%;									/*Ensures the 4 links stay on the same line upon resizing of the browser window*/
	padding: 1%;										/*header styling; applying padding*/
	text-align: center;									/*this will keep h1 and the inline-block centered when resizing the brwoser window*/
}

img{													/*styling the images*/
	width: 75%;											/*defining the width to adapt to browser window resizing*/
	height: 75%;										/*defining the heigth to adapt to browser window resizing*/
	border: 2px solid rgba(255, 0, 0, 1);				/*applying a border to the images*/
	border-radius: 1%;									/*rounding the images borders a little*/
	display:block;										/*defines images as blocks*/
	margin: 0 auto;										/*centers the images, btw, if you place this further up inthe code, it won't work :-)*/
	margin-top: 20%; 									/*applying a margin above the images*/

}

nav a{													/*only styling the links in the navigation*/
	display: inline-block;								/*all links appear in one line*/
	margin: 0% 4% 2% 4%;								/*keeps the look when browser window resizes*/
	min-width: 1%;										/*Ensures the link's text stay on the same line upon resizing of the browser window*/
	border: 1% solid rgba(255, 231, 21, .15); 			/*nav link styling: adding a border*/
	border-radius: 10%;									/*nav link styling: rounding the corners*/
	text-decoration: none;								/*nav link styling: removing the underline*/
	padding: 1% 1.5%;									/*nav link styling: adding padding*/
	color: rgba(5, 23, 255, 1);							/*nav link styling: applying color*/
	background: rgba(255, 231, 21, .5); 				/*nav link styling: applying background color to the nav links*/
	text-align: center;									/*nav link styling: centering the nav link text*/
}
/*From here down is the part pertaining to the final Assigment*/
table{
	color:rgba(5, 23, 255, 1);							/*sets color for the table*/
	border-spacing: 2px;								/*border spacing*/
	border: 1px solid rgba(255,255, 255, 1);			/*makes the table borders white plus styling*/
	margin: 0 auto;										/*centers the table*/
	font-family: "Courrier New", "Times New Roman" , verdana, trebuchet;	/*defines a set of fonts to use in preference*/
	max-width: 90%;										/*sets the max width to 90%*/
	min-width: 75%;										/*sets the min width to 75%*/
}

tr{
	background: rgba(255, 231, 21,.5);					/*changes the rows color to differenciate from header*/
	line-height: 35px;									/*sets the line height for a beautiful auto vertical center*/
	opacity:.8;											/*sets the opacity of the table rows between .6 & .8*/
}

tr:hover{
	opacity:1;											/*changes opacity of row when hovered on*/
}

th{
	text-align: center;									/*centers the text for the header*/
	color: rgba(255, 231, 21,1);						/*changes the color of the header row*/
	background: rgba(5, 23, 255, .5);					/*changes the color of the header background*/

														/*the next 4 lines add a gradient to the header row and account for each specific browser*/
	background: -webkit-linear-gradient(left, rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));
	background: -moz-linear-gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));
	background: -o-linear-gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));
	background: gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));

	border: 1px solid rgba(255, 0, 0, 1);				/*changes the color of the border for the header row*/
	border-bottom: 3px solid rgba(255, 0, 0, 1);		/*makes the bottom border of the header row thicker*/
	border-radius: 5px 5px 0px 0px;						/*curves the top left/right borders of each header cell*/
	padding: 2px 10px 2px 10px;							/*adds padding to the header*/
}

th:first-child {
	text-align: left;									/*aligns the first header row text to left*/
}

td{
	color: rgba(5, 23, 255, 1);							/*assignes the text color*/
	text-align: center;									/*aligns all text to center*/
	font-size: 95%;										/*mofifies the font size*/
	padding: 2px 10px 2px 10px;							/*adds padding*/
	text-shadow: 1px 1px rgba(5, 23, 255, .5);			/*adds text shadow*/
}

td:first-child {
	text-align: left;									/*aligns all rows first column to left*/
}

/*some extra extra stuff*/
tr:active{												/*if you click on a row, it changes: */
	opacity:1;											/*1. the opacity and */
	background: rgba(255, 0, 0, 1);						/*2. the background color...*/
}

td:active{												/*... at the same time, the cell you click on has:*/
	color: rgba(255, 231, 21, 1);						/* a different text color*/
}

.right{
	background-color: rgba(255,255,255,1);				/*backround color*/

														/*the next 4 lines add a gradient to the .right class from last week and account for each specific browser*/
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0),rgba(255, 231, 21,.2));
	background: -moz-linear-gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));
	background: -o-linear-gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));
	background: gradient(rgba(5, 23, 255, 1),rgba(255, 0, 0, 1));

	padding-bottom: 5%;								/*adds padding to the bottom of the right class*/
}

.left{
	padding-bottom: 10%;								/*adds padding to the bottom of the left class*/
}