#carte {margin-left:15px;margin-right:10px;}
/* setup the background image of the map */
.uk {padding:0; margin:0; list-style-type:none; background:#fff url(images/carte-tourisme2.gif) no-repeat; width:463px; height:274px; margin:0px 0px 0px 0px; position:relative; z-index:100;}

/* move the text off screen */
.uk li a {text-indent:-999px; display:block; width:4px; height:4px; background:#000;border:1px solid white; position:absolute; line-height:4px;}

/* make the images and description invisible and an absolute position so that it does not take up any space */
.uk li a em {visibility:hidden; position:absolute;}

/* position the square markers */
.uk li a.c1 {top:25.5px; left:202.2px;}
.uk li a.c2 {top:36.5px; left:176.5px;}
.uk li a.c3 {top:54.9px; left:197.9px;}
.uk li a.c4 {top:104px; left:180px;}
.uk li a.c5 {top:105px; left:186px;}
.uk li a.c6 {top:147.2px; left:222.2px;}
.uk li a.c7 {top:157.5px; left:231px;}
.uk li a.c8 {top:96px; left:235px;}
.uk li a.c9 {top:90.4px; left:244.2px;}
.uk li a.c10 {top:97px; left:228.5px;}
.uk li a.c11 {top:114px; left:225px;}
.uk li a.c12 {top:155px; left:237px;}
.uk li a.c13 {top:150.5px; left:245px;}
.uk li a.c14 {top:163px; left:231px;}
.uk li a.c15 {top:163px; left:236px;}
.uk li a.c16 {top:81px; left:206.2px;}

/* move the text back into view on hover */
.uk li a:hover {background:#2E4A5B; text-indent:0; height:1.2em; font-size:12px; color:#fff; line-height:1em; padding:2px 10px; width:45px;}
/* hack for IE5.x */
* html .uk li a:hover {width:110px; height:1.5em; w\idth:45px; he\ight:1.2em;}

/* make the descriptive text visible, give it a size and position */
.uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #2E4A5B; width:150px; color:#2E4A5B; padding:15px;font-style:normal; top:-135px; font-family:verdana, arial, sans-serif; letter-spacing:1px; line-height:1.5em;text-align:center}
/* hack for IE5.x */
* html .uk li a:hover em {width:200px; w\idth:150px;}

/* give the image a border and margin */
.uk li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;margin-left: auto;
  margin-right: auto;
}

/* style the empty span (I know it's not semantically correct) into an arrow point */
.uk li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#2E4A5B; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}