Now the stylesheet. I will explain on how to use spritesheets below the code dump.

�

html, body { 
	margin:0px; 
	padding:0px; 
	color:#333333; 
}

div#map {
	width:600px;
	height:400px;
	margin:0px auto;
	border:4px solid #CCCCCC;
	background-color:#000000;
	z-index:0;
	overflow: hidden;
}

div#map2 {
	width: 800px;
	height:250px;
	border:5px solid #990000;
	margin:10px auto;
	overflow: hidden;
}

div.content {
	position: relative;
	overflow: hidden;
}

div.content div.tile {
	width:64px;
	position: absolute;
	height:64px;
	line-height:64px;
	background-image:url('grass_and_water.png');
}

div.content div.tile:hover { 
	opacity:0.8; 
	-moz-opacity:0.8; 
	-webkit-opacity:0.8; 
	-khtml-opacity:0.8; 
}

.grass_0 { background-position:0px 0px; }
.grass_1 { background-position:64px 0px;}
.grass_2 { background-position:128px 0px; }
.grass_3 { background-position:192px 0px;}
.grass_4 { background-position:0px 58px;}
.grass_5 { background-position:64px 58px;}
.grass_6 { background-position:128px 58px;}
.grass_7 { background-position:192px 58px; }

div#map div#content div.tile div.object {}

.npc_0 { background:transparent url('temple.png') top left no-repeat; position:relative;width:256px; height:128px;left:-128px;bottom:96px; }

�

This is where the other classes will be needed (.grass_0, .grass_1 etc) Those classes will be set by the tile variable of the game map array. However those classes just have one css attribute, the background-position. So for example .grass_1 uses 64px and 0px. This will show the second image from the upper left of the tiles image. Basically you're just giving coordinates for the upper left corner of the tile. This + tiles width and height will result in the wanted tile. Sounds much more complicated than it is. I think I added enough example tiles to make this clear.