/* set up the font to be used for the page */


/* set the size of the definition list <dl> and add the background image */
#imap {display:block; margin-left: 10px; width:190px; height:124px; background:url(images/mapa.png) no-repeat; position:relative; } 

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:154px; height:0; padding-top:99px; overflow:hidden; position:absolute; left:0; top:0; /*background:transparent url(teste.jpg) no-repeat 400px 400px;*/ cursor:default; border: 0px solid #ddd; }
/* the hack for IE pre IE6 */
* html #imap a#title {height:154px; height:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title: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 #picportovelho {left:53px; top:12px; z-index:20;}
#imap #piccolorado {left:150px; top:68px; z-index:20;}
#imap #picariquemes {left:91px; top:21px; z-index:20;}
#imap #picvilhena {left:158px; top:56px; z-index:20;}
#imap #picjiparana {left:120px; top:32px; z-index:20;}
#imap #piccacoal {left:137px; top:41px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#portovelho, #imap a#ariquemes, #imap a#jiparana, #imap a#vilhena, #imap a#colorado, #imap a#cacoal {display:block; width: 12px; height:12px; background:transparent url(../images/hover.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;}

/* 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#portovelho, #imap a#ariquemes:hover, #imap a#jiparana:hover, #imap a#vilhena:hover, #imap a#colorado:hover, #imap a#cacoal:hover {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:325px; 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 #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#portovelho:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}
#imap a#colorado:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}
#imap a#ariquemes:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}
#imap a#vilhena:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}
#imap a#jiparana:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}
#imap a#cacoal:hover span {left:-200px; top:15px; color: #529e3a;text-align: left;}

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