body {
margin: 0;
padding: 0;
background-image: url(http://brainfarto.com/images/greenstripbg.gif);
background-color: #c8e19d;
font-family: Arial;
font-size: 12px;
color: black;
text-align: center;
}

#container {
margin: auto;
width: 687px;
padding-top: 20px;
}

#header {
background-image: url(http://www.brainfarto.com/images/body_top3.gif);
width: 687px;
height: 137px;
}

#middle {
background-color: white;
overflow: auto; /*The "overflow" instance tells what the browser what to do when the space has been expanded beyond its means. "Auto" means it will extend the div, rather than adding a scrollbar or hiding its content alltogether. This div also importantly provides the white background to the center of the site.*/
}

#th {
margin: 0;
padding: 10px;
max-width: 487px;
text-align: left;
float: left;
/*The "float" instance is one of the most complex things that I'm familiar with in CSS because it's more difficult to describe than to see in practice. Remove the float to see how the #News is shifted down. This is because DIVS are naturally trying to stack in a list form. Remember that the reason the #news is still on the right (but shifted down) is because it's been left-margined over there. Floating the #th div means it won't affect that div, though it will interact with the #middle div if it expands largely enough.*/
}

#news {
margin-left: 487px;
padding: 1em;
max-width: 200px;
font-size: 11px;
text-align: right;
/*There's not much going on here that you haven't already seen, except that if this div is expanded vertically it'll only affect the middle, not the floating #th div. Also note that no heights are specified for either this div or #th -- the content defines the height of each div. We've adding padding to both so they aren't flush against #middle.*/
}

#sidebar {
background-color: transparent;
margin-left: 225px;
max-width: 250px;
font-size: 11px;
padding-top: 80px;
text-align: center;
clear: both;
}

#profile {
background-color: transparent;
margin: auto;
padding: 20px;
max-width: 487px;
font-size: 11px;
text-align: justify;
float: inherit;
}

#resume {
background-color: transparent;
margin: 0 auto;
padding: 5px;
max-width: 487px;
font-size: 11px;
text-align: left;
clear: both;
}

#links {
background-color: transparent;
margin: 0;
padding: 20px;
max-width: 487px;
font-size: 11px;
text-align: left;
float: left;
}

#link {
background-color: transparent;
margin-left: 215px;
max-width: 500px;
text-align: center;
font-size: 11px;
padding: 5px;
clear: both;
float:left;
}

#bottom {
background-color:transparent;
margin: 0;
padding-bottom: 20px;
width: 687px;
height: 40px;
background-image: url(http://www.brainfarto.com/images/body_bot.gif);
background-repeat: no-repeat;
font-size: 10px;
color: gray;
clear: both;
/*The most important thing to recognize here is the "clear: both" instance. This is telling the CSS to cut-off any float commands that are in place. Without it, the #bottom div wouldn't render properly.*/
}

#news p {
margin-bottom: 9px;
/*This is just styling the spaces between paragraphs ("p") in the #news div.*/
}

#sidebar p {
margin-bottom: 9px;
}

#profile p {
margin-bottom: 9px;
}

a:link {
	text-decoration: none;
	color: #6d6d6d;
}

a:visited {
	text-decoration: none;
		color: #0f0f0f;
}

a:hover {
	text-decoration: underline;
		color: #6d6d6d;
}

a:active {
	text-decoration: none;
		color: #3b3b3b;
}

a img{
	border: 2px transparent solid;
}

.new {
border: 2px #5dc31f solid;
}