/* set the size of the definition list <dl> and add the background image */
#imap1 {
	display:block; 
   padding: 0; margin: 0;
	width:450px; height:291px; 
	background-image: url(../../images/products/features/audio_features_hover.jpg); 
	background-repeat: no-repeat;
	position:relative;
	}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap1 a#title {
	display: block; 
	width: 450px; height:0; padding-top:291px; overflow:hidden; position:absolute; left:0; top:0; 
	background: transparent url(../../images/products/audio_features_hover.jpg) no-repeat 450px 291px; 
	cursor: default; 
	}
/* the hack for IE pre IE6 */
* html #imap1 a#title {height:240px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap1 a#title:hover {background-position: 0 0; z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap1 li {position:absolute; padding:0; margin:0;}
#imap1 #audio1 {left:212px; top:12px; z-index:20;}
#imap1 #audio2 {left:258px; top:49px; z-index:20;}
#imap1 #audio3 {left:356px; top:76px; z-index:20;}
#imap1 #audio4 {left:408px; top:147px; z-index:20;}
#imap1 #audio5 {left:338px; top:204px; z-index:20;}
#imap1 #audio6 {left:125px; top:166px; z-index:20;}
#imap1 #audio7 {left:48px; top:129px; z-index:20;}
#imap1 #audio8 {left:71px; top:76px; z-index:20;}
#imap1 #audio9 {left:148px; top:49px; z-index:20;}
#imap1 #audio10 {left:200px; top:72px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap1 a#aud1, #imap1 a#aud2, #imap1 a#aud3, #imap1 a#aud4, #imap1 a#aud5, 
#imap1 a#aud6, #imap1 a#aud7, #imap1 a#aud8, #imap1 a#aud9, #imap1 a#aud10 {
	display:block; width:37px; height:37px; 
	text-decoration:none; z-index:20;
	}
	
/* style the span text so that it is not initially displayed */
#imap1 a span, #imap1 a:visited span {
	display:none;
	}
	
/* move the link background image to position 0 0 when hovered */
#imap1 a#aud1:hover, #imap1 a#aud2:hover, #imap1 a#aud3:hover, #imap1 a#aud4:hover, #imap1 a#aud5:hover,
#imap1 a#aud6:hover, #imap1 a#aud7:hover, #imap1 a#aud8:hover, #imap1 a#aud9:hover, #imap1 a#aud10:hover {
	background-position:0 0;
	}
	
/* define the common styling for the span text */
#imap1 a:hover span {
	position:absolute; 
	width:440px !important; 
	display:block; 
	font-family: verdana, arial, helvetica, sans-serif; 
	font-size:10px; background:#fff; 
	color:#555555; padding:4px;
	}
/* the hack for IE pre IE6 */
* html #imap1 a:hover span {
	width:440px; w\idth:388px;
	}
	
/* move the span text to a common position at the bottom of the image map */
#imap1 a#aud1:hover span {left:-212px; top:285px;}		
#imap1 a#aud2:hover span {left:-258px; top:247px;}			
#imap1 a#aud3:hover span {left:-356px; top:219px;}	
#imap1 a#aud4:hover span {left:-408px; top:149px;}
#imap1 a#aud5:hover span {left:-338px; top:93px;}	
#imap1 a#aud6:hover span {left:-125px; top:130px;}
#imap1 a#aud7:hover span {left:-48px; top:166px;}
#imap1 a#aud8:hover span {left:-71px; top:220px;}
#imap1 a#aud9:hover span {left:-148px; top:248px;}
#imap1 a#aud10:hover span {left:-200px; top:225px;}