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

/* set the size of the definition list <dl> and add the background image */
#imap {
    display:block; 
    width:813px; 
    height:570px; 
    background:url(../images/mainMenu.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:400px; 
    height:0; 
    padding-top:240px; 
    overflow:hidden; 
    position:absolute; 
    left:0; 
    top:0; 
    background:transparent url(../images/beatles_hover.jpg) no-repeat 400px 400px; 
    cursor:default;
}

/* the hack for IE pre IE6 */
    * html #imap a#title {
    height:570px;
    he\ight:0;
}

/* place the <dd>s in the correct absolute position */
#imap dd {
    position:absolute; 
    padding:0; 
    margin:0;
}

#imap #memos {
    left:11px; 
    top:132px; 
    z-index:20;
}

#imap #clients {
    left:78px; 
    top:159px; 
    z-index:20;
}

#imap #mailroom {
    left:415px; 
    top:159px; 
    z-index:20;
}

#imap #reports {
    left:584px; 
    top:150px; 
    z-index:20;
}

#imap #rolodex {
    left:247px; 
    top:271px; 
    z-index:20;    
}

#imap #quickword {
    left:420px; 
    top:271px; 
    z-index:20;
}

#imap #forms {
    left:588px; 
    top:271px; 
    z-index:20;
}

#imap #downloads {
    left:78px; 
    top:376px; 
    z-index:20;
}

#imap #utilities {
    left:420px; 
    top:376px; 
    z-index:20;
}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#memos {
    display:block; 
    width:52px; 
    height:54px; 
    text-decoration:none; 
    z-index:20;
}

#imap a#clients, #imap a#mailroom, #imap a#reports, #imap a#rolodex, #imap a#quickword, #imap a#forms, 
#imap a#downloads, #imap a#utilities {
    display:block; 
    width:136px; 
    height:101px; 
    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#memos:hover, #imap a#clients:hover, #imap a#mailroom:hover, #imap a#reports:hover, #imap a#rolodex:hover, 
#imap a#quickword:hover, #imap a#forms:hover, #imap a#downloads:hover, #imap a#utilities:hover {
    background-position:0 0;
}

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

/* move the span text to a common position at the bottom of the image map */
#imap a#memos:hover span {
    left:-2px; 
    top:65px;
}

#imap a#clients:hover span {
    left:-2px; 
    top:102px;
}

#imap a#mailroom:hover span {
    left:-2px; 
    top:102px;
}

#imap a#reports:hover span {
    left:-170px; 
    top:110px;
}

#imap a#rolodex:hover span {
    left:-2px; 
    top:100px;
}

#imap a#quickword:hover span {
    left:-2px; 
    top:100px;
}

#imap a#forms:hover span {
    left:-174px; 
    top:100px;
}

#imap a#downloads:hover span {
    left:-2px; 
    top:100px;
}

#imap a#utilities:hover span {
    left:-2px; 
    top:100px;
}

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