Image Map in Header (CSS created, difficulty placing)

Morning,
The site: http://thefward.com

I’m new to WP and CSS but I have put together the code using various tutorials to create an image map with CSS. The issue I’m having is figuring out how to migrate this code into my theme. I am using Elements of SEO 1.2 by Drew Stauffer and these are the header files available:
Header.php
myheader.php
myheader1.php

I’ve managed to change the banner to a custom image but that’s as far as I’ve gotten. The CSS for the image map is below (note, I’m having difficulty testing it so it may not be in fully working order).

<div id="imgmap">
	<img height="134" width="960" src="banner.jpg" alt="" />
	<ol>
		<li id="area1"><a href="http://thefward.com/?page_id=2">fward</a></li>
	</ol>
</div>

#imgmap {
	position: relative;
	_zoom: 1;
}

#imgmap li {
	position: absolute;
	display: block;
	list-style: none;
	outline: 1px dashed;
	overflow: hidden;
}

#imgmap li a {
	display: block;
	width: 100%;
	height: 100%;
	_background: url(space.gif);
	text-indent: -1000em;
}

#area1 {
	left: 135px;
	top: 12px;
	width: 19px;
	height: 19px;
}

Actually that looks like the code I pulled from http://riddle.pl/mappet/ and not what I came up with. If anyone has experience with this theme or can provide any advice I would appreciate it.

Thank you,
F