/* set up the font to be used for the page */
.mapbody {
  font-family: tahoma; arial, sans-serif;
  }

/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block; 
  width:300px; 
  height:210px; 
  background:url(http://www.mauitroop22.org/images/back.jpg) no-repeat; 
  position:relative;
  }

/* set up the definition list <dt><a> to hold the background image for the hover state */
/*  background:transparent url(http://www.mauitroop22.org/images/back_hover.jpg) no-repeat 300px 300px;*/ 
#imap a#title {
  display:block; 
  width:300px; 
  height:0; 
  padding-top:210px; 
  overflow:hidden; 
  position:absolute; 
  left:0; 
  top:0; 
  background:transparent url(http://www.mauitroop22.org/images/back_hover.jpg) no-repeat 300px 210px; 
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:210px;
  he\ight:0;
  }
/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0; 
  z-index:10;
  }
/* place the <dd>s in the correct absolute position */
#imap dd {
  position:absolute; 
  padding:0; 
  margin:0;
  }
#imap #piccm {
  left:57px; 
  top:17px; 
  z-index:20;
  }
#imap #pic1k {
  left:41px; 
  top:94px; 
  z-index:20;
  }
#imap #piclk {
  left:121px; 
  top:46px; 
  z-index:20;
  }
#imap #picct {
  left:158px; 
  top:77px; 
  z-index:20;
  }
#imap #pichg {
  left:186px; 
  top:106px; 
  z-index:20;
  }
#imap #picpp {
  left:134px; 
  top:147px; 
  z-index:20;
  }
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#maluhia, #imap a#peaks, #imap a#lime, #imap a#cattle, a#hosmers, a#polipoli {
  display:block; 
  width:25px; 
  height:25px; 
  background:transparent url(http://www.mauitroop22.org/images/hover.gif) -50px -50px no-repeat; 
  text-decoration:none; 
  z-index:20;
  }
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }
/* move the link background image to position 0 0 when hovered */
#imap a#maluhia:hover, #imap a#peaks:hover, #imap a#lime:hover, #imap a#cattle:hover, #imap a#hosmers:hover, #imap a#polipoli:hover {
  background-position:0 0;
  }
/* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  width:288px; 
  display:block; 
  font-family:arial; 
  font-size:12px; 
  background:#fff; 
  color:#000; 
  border:1px solid #000; 
  padding:5px;
  }
/* the hack for IE pre IE6 */
* html #imap a:hover span {
  width:300px; w\idth:288px;
  }
/* move the span text to a common position at the bottom of the image map */
#imap a#maluhia:hover span {
  left:-57px; 
  top:193px;
  }
#imap a#peaks:hover span {
  left:-41px; top:116px;
  }
#imap a#lime:hover span {
  left:-121px; 
  top:164px;
  }
#imap a#cattle:hover span {
  left:-158px; 
  top:133px;
  }
#imap a#hosmers:hover span {
  left:-186px; 
  top:104px;
  }
#imap a#polipoli:hover span {
  left:-134px; 
  top:73px;
  }
/* add the style for the link span text - first line */
#imap a span:first-line {
  font-weight:bold; 
  font-style:italic;
  }