/* 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/powercord_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/powercord_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 #powercord1 {left:87px; top:190px; z-index:20;}
#imap1 #powercord2 {left:18px; top:150px; z-index:20;}
#imap1 #powercord3 {left:121px; top:77px; z-index:20;}
#imap1 #powercord4 {left:209px; top:10px; z-index:20;}
#imap1 #powercord5 {left:296px; top:77px; z-index:20;}
#imap1 #powercord6 {left:397px; top:150px; z-index:20;}
#imap1 #powercord7 {left:331px; top:189px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap1 a#cord1, #imap1 a#cord2, #imap1 a#cord3, #imap1 a#cord4, #imap1 a#cord5, 
#imap1 a#cord6, #imap1 a#cord7, #imap1 a#cord8 {
	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#cord1:hover, #imap1 a#cord2:hover, #imap1 a#cord3:hover, #imap1 a#cord4:hover, #imap1 a#cord5:hover,
#imap1 a#cord6:hover, #imap1 a#cord7:hover, #imap1 a#cord8: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#cord1:hover span {left:-80px; top:108px;}
#imap1 a#cord2:hover span {left:-11px; top:148px;}
#imap1 a#cord3:hover span {left:-113px; top:221px;}		
#imap1 a#cord4:hover span {left:-199px; top:287px;}			
#imap1 a#cord5:hover span {left:-286px; top:221px;}	
#imap1 a#cord6:hover span {left:-389px; top:148px;}
#imap1 a#cord7:hover span {left:-322px; top:109px;}