/* set the size of the definition list <dl> and add the background image */
#imap {
	display:block; 
	width:500px; 
	height:326px; 
	background:url(image/organigramma.gif) no-repeat; 
	position:relative;
}

/* set up the definition list <dt><a> to hold the background image for the hover state */
/*#imap a#titolo {
	display:block; 
	width:500px; 
	height:0; 
	padding-top:326px; 
	overflow:hidden; 
	position:absolute; 
	left:0; 
	top:-20px; 
	background:transparent url(image/organigramma_hover.gif) no-repeat 500px 326px; 
	cursor:default;
}
/* the hack for IE pre IE6 */
* html #imap a#titolo {height:326px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#titolo: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: 216px; top: 20px;  z-index:20;}
#imap #pic2 {left: 270px; top: 99px;  z-index:20;}
#imap #pic3 {left: 162px; top: 99px;  z-index:20;}
#imap #pic4 {left: 162px; top: 179px; z-index:20;}
#imap #pic5 {left: 26px;  top: 260px; z-index:20;}
#imap #pic6 {left: 121px; top: 260px; z-index:20;}
#imap #pic7 {left: 216px; top: 260px; z-index:20;}
#imap #pic8 {left: 311px; top: 260px; z-index:20;}
#imap #pic9 {left: 407px; top: 260px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#dir, #imap a#rspp, #imap a#rsq, #imap a#rpvy, #imap a#famm, #imap a#rprg, #imap a#facq, #imap a#fpro, #imap a#rcom {
	display:block; 
	width:70px; 
	height:42px; 
	text-decoration:none; 
	z-index:20;
}
#imap a#dir  {background:transparent url(image/hover_dir.gif)  -100px -100px no-repeat;}
#imap a#rspp {background:transparent url(image/hover_rspp.gif) -100px -100px no-repeat;}
#imap a#rsq  {background:transparent url(image/hover_rsq.gif)  -100px -100px no-repeat;}
#imap a#rpvy {background:transparent url(image/hover_rpvy.gif) -100px -100px no-repeat;}
#imap a#famm {background:transparent url(image/hover_famm.gif) -100px -100px no-repeat;}
#imap a#rprg {background:transparent url(image/hover_rprg.gif) -100px -100px no-repeat;}
#imap a#facq {background:transparent url(image/hover_facq.gif) -100px -100px no-repeat;}
#imap a#fpro {background:transparent url(image/hover_fpro.gif) -100px -100px no-repeat;}
#imap a#rcom {background:transparent url(image/hover_rcom.gif) -100px -100px no-repeat;}


/* 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#dir:hover, #imap a#rspp:hover, #imap a#rsq:hover, #imap a#rpvy:hover, #imap a#famm:hover, #imap a#rprg:hover, #imap a#facq:hover, #imap a#fpro:hover, #imap a#rcom: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:#ccffcc; 
	color:#000; 
	border:1px solid #295868;
	padding:5px;
}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#dir:hover span  {left:-175px; top:344px;text-align:left;padding:15px;}
#imap a#rspp:hover span {left:-229px; top:265px;text-align:left;padding:15px;}
#imap a#rsq:hover span  {left:-121px; top:265px;text-align:left;padding:15px;}
#imap a#rpvy:hover span {left:-121px; top:185px;text-align:left;padding:15px;}
#imap a#famm:hover span {left:15px;   top:104px;text-align:left;padding:15px;}
#imap a#rprg:hover span {left:-80px;  top:104px;text-align:left;padding:15px;}
#imap a#facq:hover span {left:-175px; top:104px;text-align:left;padding:15px;}
#imap a#fpro:hover span {left:-270px; top:104px;text-align:left;padding:15px;}
#imap a#rcom:hover span {left:-366px; top:104px;text-align:left;padding:15px;}

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