.citymap {
	width: 690px;
	height: 347px;
	background-image: url("/map/revisedmap2.jpg");
	background-repeat: no-repeat; 
}

}
ul#maplinks { 
  list-style-type : none;
  position : relative;
  display : block;
  padding : 0;
  width: 0px;
  height: 0px;
  background: transparent;
}

/* This makes the list items (links and spans) easier to manage (float control) */
ul#maplinks li {
  display: inline; 
}

/* Here are link specs and relationship setup */
ul#maplinks li a {
  position : relative;
  display : block;
  text-decoration : none;
}

/* 
  This gets rid of the main content-containing outer span and all within, 
  but it remains available to assistive technologies 
*/
ul#maplinks li a span.offset { 
  margin-top : -9000px; 
  margin-left : -9000px;
  position : absolute;
}

/* This is the general hover and focus state link-span properties */
ul#maplinks li a:hover span.offset, ul#maplinks li a:focus span.offset, ul#maplinks li a:active span.offset {
  color : #000;
  background-image : none;
  background-color : #ffffde;
  border : 1px solid #000;
  display : block;
  width : 160px;
  height : auto;
  font-size: 10px;
  text-decoration : none;
  cursor : pointer;
}

/* 
  This sets the inner span. Padding on the main span 
  was tried but produced odd results in IE (go figure) 
*/
ul#maplinks li a:hover span.offset span, ul#maplinks li a:focus span.offset span, ul#maplinks li a:active span.offset span {
  display : block;
  width : 140px;
  margin : 5px;
}


/* 
  No embedded image styles are needed except maybe border : 0 (not needed here). 
  Images are optional though, as is text. Place images in main outer span. 
  Text goes within the inner span

  What follows are CSS blocks, one for each list item link. This is a solid solution,
  but it uses a lot of CSS info. I will comment the first block only.
*/