/*converted all divs from pixel width to percent with, 
 then adjusted float left for all divs, 
 then we had to caclulate math proper margins and padding
 removed some duplicates
 fixed mysterous float bottom which was not an actuall syntax
*/


#container {
	/*height: 650px;*/
	min-height: 650px;
	width: 90%;
	margin-left: 4.5%;
	padding-bottom: 50px;

	min-width: 400px;

	/*using auto margins means you must use both left and right.*/
	background-color: gold;
	/*this is more specific by id*/
	border-radius: 100px;
	border-style: solid;
	border-color: black;
	border-width: 5px;

}


div{
border-radius: 20px;
float: left;
}


#header{
	/*height: 70px;*/
	min-height: 70px;
	clear: both;
	min-width: 300px;


	width: 70%;
	margin-left: 10%;

	padding-left: 5%;
	padding-right: 5%;
	padding-top: 10px;
	padding-bottom: 10px;


	background-color: white;
	/* header holds all of the menus*/

}
#textarea{
/*area with text explaining website*/
	min-height: 500px;
	min-width: 300px;

	width: 70%;
	margin-left: 10%;
	padding: 5%;

	clear: both;
	background-color: black;
	color: white;
	text-align: center;
}


.menu{
	/*styling of all menus*/
	height: 50px;
	min-height: 50px;
	min-width: 120px;

	
	margin-left: 5.75%;
	padding: .5%;
	width: 11%;
	margin-top: 5px;

	background-color: black;
	color: white;
	text-align: center;
}


body{
	background-color: green;
	/*changes background color*/
}