body {/*set font to arial and align the main container to the center of the screen. Set the gradient background*/
	font-family: arial;
	text-align:center;
	margin:0 auto;
	background: #91CF51 url('gradient.bmp') 0 0 repeat-x;
}
div#container {/*put all of the text in side out main container back on the left, and set our website width*/
	text-align:left;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
div#header {/*add a gap at the top of our website*/
	margin-top: 10px;
}
div#top {/*define the top of our header, and give it it's image*/
	width: 900px;
	height: 140px;
	background-image: url('top.png');
}
div#bottom {/*define the nbottom of our header, and give it it's image*/
	 width: 900px;
	 height: 50px;
	 background-image: url('bottom.png');
	 background-repeat: no-repeat; /*fix IE issue of making this div higher than it needs to be*/
}
div#navigation {/*set the navigational links to the center in the header*/
	text-align: center;
}
#search {/*put the search bar, in the header, on the right and position it*/
	float: right;
	padding-top: 86px;
	padding-right: 8px;
}
div#footer {/*put our footer links on the right*/
	float: right;
}
.element {/* make out navigational links display next to each other (not on top) and seperate them a bit*/
	border: 0px;
	display: inline;
	padding: 5px;
	margin-left: 3px;
	margin-right: 3px;
}
table.problems th{/*set the header of my tables to be a green slightly darker than the main background colour*/
	background: #71AF31;
}
table.problems td, th{
	border: 1px solid black;
	border: 1px solid black;
	padding: 5px;
	margin: 0px;
	background: #91CF51;
}
table.problems {/*make the space inbetween the cells a dark green border*/
	background: darkgreen;
	border: 1px solid black;
	margin: 0px;
}