/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block; 
  width:660px; 
  height:350px; 
  background:url(../img/secc/family_basic0.jpg) no-repeat; 
  position:relative;
  }
  
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block; 
  width:660px; 
  height:0; 
  padding-top:350px; 
  overflow:hidden; 
  position:absolute; 
  left:0; 
  top:0; 
  background:transparent url(../img/secc/family_hover0.jpg) no-repeat 660px 660px; 
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:219px;
  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 #picangel {
  left:32px; 
  top:81px; 
  z-index:20;
}
#imap #picmonica {
  left:97px; 
  top:98px; 
  z-index:20;
}
#imap #pictanya {
  left:476px; 
  top:79px; 
  z-index:20;
}
#imap #picpamela {
  left:265px; 
  top:96px; 
  z-index:20;
}
#imap #picalex {
  left:317px; 
  top:39px; 
  z-index:20;
}
#imap #picmiyuki {
  left:551px; 
  top:94px; 
  z-index:20;
}
#imap #picmarti {
  left:179px; 
  top:81px; 
  z-index:20;
}
#imap #picaxelle {
  left:397px; 
  top:98px; 
  z-index:20;
}
#imap #picben {
  left:371px; 
  top:56px; 
  z-index:20;
}
  
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#angel, #imap a#axelle, #imap a#marti, #imap a#miyuki, #imap a#tanya, #imap a#alex, #imap a#monica, #imap a#ben, #imap a#pamela {
  display:block; 
  width:73px; 
  height:75px; 
  background:transparent url(../img/secc/hover0.gif) -100px -100px 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#angel:hover, #imap a#axelle:hover, #imap a#marti:hover, #imap a#miyuki:hover, #imap a#tanya:hover, #imap a#alex:hover, #imap a#monica:hover, #imap a#ben:hover, #imap a#pamela:hover {
  background-position:0 0;
  }
  
  /* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  width:648px; 
  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:660px; w\idth:660px;
  }
  
  /* move the span text to a common position at the bottom of the image map */
#imap a#angel:hover span {
  left:-32px; 
  top:269px;
  }
#imap a#axelle:hover span {
  left:-397px; 
  top:252px;
  }
#imap a#marti:hover span {
  left:-179px; 
  top:269px;
  }
#imap a#miyuki:hover span {
  left:-551px; 
  top:256px;
  }
#imap a#alex:hover span {
  left:-317px; 
  top: 311px;
  }
#imap a#monica:hover span {
  left:-97px; 
  top:252px;
  }
#imap a#ben:hover span {
  left:-371px; 
  top:294px;
}
#imap a#pamela:hover span {
  left:-265px; 
  top:254px;
}
#imap a#tanya:hover span {
  left:-476px; 
  top:271px;
}
  
  /* add the style for the link span text - first line */
#imap a span:first-line {
  font-weight:bold; 
  font-style:italic;
  }