body {	
	font-family: "Century Gothic", Arial, sans-serif;
}

/*The #container is the Queen of the content of this page, everything lives...inside...her...well, that's disturbing, but I'll stick to it*/
#container {
	width: 900px;
	margin: 0 auto;
	background-color: lightblue;
	padding: 20px;
}

h1 {text-align: center;}
	
ul {
	list-style-type: none;
	color: purple;
	font-weight: normal;
	text-align: center;
	border-top: 2px solid purple;
	border-bottom: 2px solid purple;
	padding: 20px;
	}

/*Browser defaults to stacking the text vertically, so here we are telling list items to line up horizontally */
li {display: inline-block;
	margin:0 20px;
	
	}

/* using "a" to tell the links what attrubutes they should or shouldn't have */
a {
	color: purple;
	text-decoration: none;
}


/* #Main is the helicopter parent of the wild box children and here they are told to stand in a nice orderly line, aligned at the top */
#main {
    text-align: center;
}



/* This is where I call out the entire box class for an attrubute that will remain the same for everything labelled box. I want them to align side by side and to be the same width */
.box {
	display: inline-block;
	width: 300px;    
	margin: 15px;
	vertical-align: top;
}



/* Here we see I had to define attributes for each individual box, so I called them out by their full government names, as I am the parent now for these little rebels. The width of these boxes is already defined in .box so is not included here, only attrubutes that affect them individually are defined here */

#leftbox {    	
		height: 200px;
		background-color: white;
		 border: 5px solid green;
		box-shadow: 5px 5px 10px  gray;
		padding: 10px;
}

#rightbox {
		height: 250px;
		background-color: magenta;
		border: 7px solid blue;
		border-radius: 15px;
	
}

#footer {
		max-width: 700px;
		margin:0 auto; 
}