help tyding up this css

[hargi]

http://www.qeliz.ac.uk/mat/performingarts.html

yet another CSS plea
got the page above using the following css

body, html {
	margin: 1em auto;
	padding: 0;
	width: 100%;
	font:  16pt   Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	color: #000000;
	background: #d7ebd3; 
}

#content {
	background-color: #d7ebd3;
	width: 100%;

	padding: 0;
}

#content-left {
	float: left;
	width: 360px;
	background-color: #5e9a80;
	padding-left: 20px;
}

#content-right {
	float: right;
	width: 360px;
	background-color: #d7ebd3;
	padding-right: 20px;
}

h1 { 
	background: #d7ebd3 url("logo2.gif") no-repeat;
	width: 100%;
	height: 150px;
	padding: 0;
	float: left;
	text-indent: -9999px;
	border-bottom: 10px solid #f2a3b9;
}

h2 {
background: #5e9a80;
	text-align: center;
	padding: 5px;
	font: 14pt Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	font-weight: bold;
}

#navbar ul{
	margin-top: -65px;
	margin-right: 10px;
	float: right;
}

#navbar li {
	margin-left: 12px;
	font: 14pt Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	display: inline;
	list-style-type: none;
	position: relative;
}

#left li {
	list-style-type: none;
	text-decoration: none;
	padding: 0px;
	margin-top: 0px;
}

#right li {
	list-style-type: none;
	text-decoration: none;
	padding: 0px;
	margin-top: 0px;
}

#footer	{
	clear: both;
	background: #E7E8BF ; 
	color: #333;
	height: 25px;
	font: 8pt Arial Rounded MT Bold, century gothic, verdana, tahoma, sans-serif;
	text-align: center; }
	
a:link, a:visited {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
	background: #5e9a80;
}

I want
1. Rid of the top light green and the start of the dark green to be top of the page
2. The image moved more into the centre
3. Rid of the light green bit between the 2 dark green bits
4. This dark green bit needs to be narrower and go all the way to the bottom of the page.

Thanks i thought i had the hang of it but obviously not
TIA