/* set the size of the definition list <dl> and add the background image */
#tutmap {
	display:	block; 
	width:		476px; 
	height:		352px; 
	background:	url(../images/intro-viewer.jpg) no-repeat; 
	position:	relative;
}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#tutmap a#title {
	display:	block; 
	width:		476px; 
	height:		0; 
	padding-top:	240px; 
	overflow:	hidden; 
	position:	absolute; 
	left:		0; 
	top:		0; 
	background:	transparent url(../images/intro-viewer.jpg) no-repeat 400px 400px; 
	cursor:		default;
}
/* the hack for IE pre IE6 */
* html #tutmap a#title {
	height:		352px; 
	height:		0;
}

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

/* place the <dd>s in the correct absolute position */
#tutmap dd {
	position:	absolute; 
	padding:	0; 
	margin:		0;
}

#tutmap #menu_bar {
	left:		2px; 
	top:		17px; 
	z-index:	20;
}

#tutmap #tool_bar {
	left:		2px; 
	top:		32px; 
	z-index:	20;
}

#tutmap #markers {
	left:		310px; 
	top:		57px; 
	z-index:	20;
}

#tutmap #status {
	left:		208px; 
	top:		333px; 
	z-index:	20;
}

#tutmap #progress {
	left:		109px; 
	top:		333px; 
	z-index:	20;
}

#tutmap #memory {
	left:		2px; 
	top:		333px; 
	z-index:	20;
}

#tutmap #viewerwindow {
	left:		25px; 
	top:		55px; 
	z-index:	20;
}

#tutmap #lefttab {
	left:		2px; 
	top:		55px; 
	z-index:	20;
}

#tutmap #righttab {
	left:		453px; 
	top:		55px; 
	z-index:	20;
}

/* style the <dd><a> links physical size and the background image for the hover */
#tutmap a#a_menu_bar {
	display:	block; 
	width:		109px; 
	height:		15px; 
	background:	transparent url(../images/menu.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_tool_bar {
	display:	block; 
	width:		194px; 
	height:		23px; 
	background:	transparent url(../images/toolbar.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_marker {
	display:	block; 
	width:		43px; 
	height:		38px; 
	background:	transparent url(../images/marker.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_status {
	display:	block; 
	width:		266px; 
	height:		11px; 
	background:	transparent url(../images/status.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_progress {
	display:	block; 
	width:		99px; 
	height:		11px; 
	background:	transparent url(../images/progress.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_memory {
	display:	block; 
	width:		107px; 
	height:		11px; 
	background:	transparent url(../images/memory.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_viewerwindow {
	display:	block; 
	width:		425px; 
	height:		274px; 
	background:	transparent url(../images/viewer.gif) -500px -500px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_lefttab {
	display:	block; 
	width:		20px; 
	height:		280px; 
	background:	transparent url(../images/sidetab.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

#tutmap a#a_righttab {
	display:	block; 
	width:		20px; 
	height:		280px; 
	background:	transparent url(../images/sidetab.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:	20;
}

/* style the span text so that it is not initially displayed */
#tutmap a span, #tutmap a:visited span {
	display:	none;
}

/* move the link background image to position 0 0 when hovered */
#tutmap a#a_menu_bar:hover, #tutmap a#a_tool_bar:hover, #tutmap a#a_marker:hover, #tutmap a#a_status:hover, #tutmap a#a_progress:hover, #tutmap a#a_memory:hover, #tutmap a#a_viewerwindow:hover, #tutmap a#a_lefttab:hover, #tutmap a#a_righttab:hover {
	background-position:0 0;
}

/* define the common styling for the span text */
#tutmap a:hover span {
	position:	relative;  
	width:		400px; 
	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 #tutmap a:hover span {
	width:		400px; 
	width:		388px;
}

/* move the span text to a common position at the bottom of the image map */
#tutmap a#a_menu_bar:hover span {
	left:		0px; 
	top:		340px;
}

#tutmap a#a_tool_bar:hover span {
	left:		0px; 
	top:		325px;
}

#tutmap a#a_marker:hover span {
	left:		-310px;
	top:		300px;
}

#tutmap a#a_status:hover span {
	left:		-206px; 
	top:		24px;
}

#tutmap a#a_progress:hover span {
	left:		-107px; 
	top:		24px;
}

#tutmap a#a_memory:hover span {
	left:		0px; 
	top:		24px;
}

#tutmap a#a_viewerwindow:hover span {
	left:		-23px; 
	top:		302px;
}

#tutmap a#a_lefttab:hover span {
	left:		0px; 
	top:		302px;
}

#tutmap a#a_righttab:hover span {
	left:		-451px; 
	top:		302px;
}