/* set the size of the definition list <dl> and add the background image */
/* From: http://www.webreference.com/programming/image_map/              */

/* This needs to be styled as a block with width and height values       */
/* at the same size as your main image. Your main image is then          */
/* placed as a background image with no-repeat (so that we only get      */
/* one) and finally a we give this a relative position so that we        */
/* can place the four <dd>'s using absolute positioning.                 */
#imap { display:block; width:630px; height:494px; background:url(full.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:630px; height:0; padding-top:494px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(full-hover.jpg) no-repeat 630px 494px; cursor:default; }

/* the hack for IE pre IE6 */
* html #imap a#title { height:494px; 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 #picmovie { left:7px; top:71px; z-index:20; }
#imap #pictoc { left:7px; top:292px; z-index:20; }
#imap #picslides { left:226px; top:71px; z-index:20; }
#imap #picnotes { left:226px; top:292px; z-index:20; }
#imap #picuser { left:519px; top:81px; z-index:20; }

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#movie { display:block; width:195px; height:205px; background:transparent url(picmovie.jpg) -300px -300px no-repeat; text-decoration:none; z-index:20; }
#imap a#toc { display:block; width:195px; height:179px; background:transparent url(pictoc.gif) -300px -300px no-repeat; text-decoration:none; z-index:20; }
#imap a#slides { display:block; width:280px; height:205px; background:transparent url(picslides.gif) -300px -300px no-repeat; text-decoration:none; z-index:20; }
#imap a#notes { display:block; width:280px; height:179px; background:transparent url(picnotes.gif) -300px -300px no-repeat; text-decoration:none; z-index:20; }
#imap a#user { display:block; width:104px; height:42px; background:transparent url(picuser.gif) -300px -300px 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#movie:hover, #imap a#toc:hover, #imap a#slides:hover, #imap a#notes:hover, #imap a#user:hover { background-position:0 0; }

/* define the common styling for the span text */
#imap a:hover span { position:absolute; width:175px; display:block; font-family:Verdana,Tahoma,Arial; font-size:12px; background:#fff; color:#266184; border:5px double #3280AD; padding:5px; }

/* the hack for IE pre IE6 */
* html #imap a:hover span { width:175px; w\idth:175px; }

/* move the span text to a appropriate positions in relation to each pic */
#imap a#movie:hover span { left:175px; top:-100px; }
#imap a#toc:hover span { left:175px; top:-50px; }
#imap a#slides:hover span { left:-150px; top:50px; }
#imap a#notes:hover span { left:200px; top:-150px; }
#imap a#user:hover span { left:-165px; top:-20px; }

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