/* How to Create an Image Map Using CSS */
/* http://www.webreference.com/programming/image_map/index.html */
/* By Stu Nicholls.*/

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:325px; height:333px; background:url(circle.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:325px; height:0; padding-top:333px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(circle.jpg) no-repeat 325px 325px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:333px; 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 #pic1 {left:33px; top:66px; z-index:20;}
#imap #pic2 {left:117px; top:7px; z-index:20;}
#imap #pic3 {left:204px; top:68px; z-index:20;}
#imap #pic4 {left:32px; top:156px; z-index:20;}
#imap #pic5 {left:118px; top:206px; z-index:20;}
#imap #pic6 {left:204px; top:152px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#falzen, #imap a#kuvertieren, #imap a#frankieren, #imap a#kopieren, #imap a#faxen, #imap a#drucken {display:block; width:95px; height:95px; background:transparent url(hover.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#falzen:hover, #imap a#kuvertieren:hover, #imap a#frankieren:hover, #imap a#kopieren:hover, #imap a#faxen:hover, #imap a#drucken:hover {background-position:0 0;}

/* 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:325px; w\idth:313px;}

/* move the span text to a common position at the bottom of the image map 
#imap a#paul:hover span {left:-36px; top:200px;}
#imap a#ringo:hover span {left:-113px; top:170px;}
#imap a#john:hover span {left:-192px; top:196px;}
#imap a#george:hover span {left:-262px; top:186px;}
*/

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