/* set up the font to be used for the page */
body {font-family: tahoma; arial, sans-serif; font-size: 11px; background: #000000; }

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:359px; height:495px; background:url("archive/new/images/map_off.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:359px; height:495px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url("archive/new/images/map_off.jpg") no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {width:359px; he\ight:495px;}

/* 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 #pic_attitude {left:34px; top:21px; z-index:20;}
#imap #pic_illustrations {left:14px; top:219px; z-index:20;}
#imap #pic_art {left:30px; top:373px; z-index:20;}
#imap #pic_relationships {left:173px; top:67px; z-index:20;}
#imap #pic_profile {left:199px; top:332px; z-index:20;}
#imap #pic_contact {left:193px; top:435px; z-index:20;}
#imap #pic_tools {left:200px; top:196px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#attitude {display:block; width:121px; height:179px; background:transparent url("archive/new/images/map_off.jpg") -34px -21px no-repeat; text-decoration:none; z-index:20;}
#imap a#illustrations {display:block; width:170px; height:114px; background:transparent url("archive/new/images/map_off.jpg") -14px -219px no-repeat; text-decoration:none; z-index:20;}
#imap a#art {display:block; width:137px; height:91px; background:transparent url("archive/new/images/map_off.jpg") -30px -373px no-repeat; text-decoration:none; z-index:20;}
#imap a#relationships {display:block; width:172px; height:113px; background:transparent url("archive/new/images/map_off.jpg") -173px -67px no-repeat; text-decoration:none; z-index:20;}
#imap a#profile {display:block; width:126px; height:82px; background:transparent url("archive/new/images/map_off.jpg") -199px -332px no-repeat; text-decoration:none; z-index:20;}
#imap a#contact {display:block; width:95px; height:46px; background:transparent url("archive/new/images/map_off.jpg") -193px -435px no-repeat; text-decoration:none; z-index:20;}
#imap a#tools {display:block; width:151px; height:125px; background:transparent url("archive/new/images/map_off.jpg") -200px -196px 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#attitude:hover {background: url("archive/new/images/map_on.jpg"); background-position:-34px -21px;}
#imap a#illustrations:hover {background: url("archive/new/images/map_on.jpg"); background-position:-14px -219px;}
#imap a#art:hover {background: url("archive/new/images/map_on.jpg"); background-position:-30px -373px;}
#imap a#relationships:hover {background: url("archive/new/images/map_on.jpg"); background-position:-173px -67px;}
#imap a#profile:hover {background: url("archive/new/images/map_on.jpg"); background-position:-199px -332px;}
#imap a#contact:hover {background: url("archive/new/images/map_on.jpg"); background-position:-193px -435px;}
#imap a#tools:hover {background: url("archive/new/images/map_on.jpg"); background-position:-200px -196px;}


/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:388px; 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:400px; w\idth:388px;}


/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}