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

/* set up the container to hold the background image for the hover state */
#imap1 a#title {
	float: left;
	display: block; 
	width: 450px; height:0; padding-top:291px; overflow:hidden; position:absolute; left:0; top:0; 
	background: transparent url(../../images/products/digital-video_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 #digital1 {left:119px; top:181px; z-index:20;}
#imap1 #digital2 {left:39px; top:99px; z-index:20;}
#imap1 #digital3 {left:138px; top:48px; z-index:20;}
#imap1 #digital4 {left:223px; top:81px; z-index:20;}
#imap1 #digital5 {left:269px; top:17px; z-index:20;}
#imap1 #digital6 {left:372px; top:43px; z-index:20;}
#imap1 #digital7 {left:294px; top:155px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap1 a#dig1, #imap1 a#dig2, #imap1 a#dig3, #imap1 a#dig4, #imap1 a#dig5, 
#imap1 a#dig6, #imap1 a#dig7 {
	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#dig1:hover, #imap1 a#dig2:hover, #imap1 a#dig3:hover, #imap1 a#dig4:hover, #imap1 a#dig5:hover,
#imap1 a#dig6:hover, #imap1 a#dig7: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#dig1:hover span {left:-119px; top:109px;}		
#imap1 a#dig2:hover span {left:-39px; top:192px;}			
#imap1 a#dig3:hover span {left:-138px; top:241px;}	
#imap1 a#dig4:hover span {left:-223px; top:211px;}
#imap1 a#dig5:hover span {left:-269px; top:274px;}	
#imap1 a#dig6:hover span {left:-372px; top:248px;}
#imap1 a#dig7:hover span {left:-294px; top:137px;}