/* Stu Nicholls - http://www.cssplay.co.uk*/
/* setup the background image for each map */
#err {padding:0; margin:0; list-style-type:none; background:#fff url(http://www.cerdagne.net/ole/maps/panoramaerr.jpg); width:815px; height:280px; position:relative; }

#sega {padding:0; margin:0; margin-bottom:1.5em; list-style-type:none; background:#fff url(http://www.cerdagne.net/ole/maps/segalera.jpg); width:600px; height:400px; margin:auto; position:relative;  }

#foret {padding:0; margin:0; margin-bottom:1.5em; list-style-type:none; background:#fff url(http://www.cerdagne.net/ole/maps/foretmap.jpg); width:600px; height:400px; margin:auto; position:relative;  }

#village {padding:0; margin:0; margin-bottom:1.5em; list-style-type:none; background:#fff url(http://www.cerdagne.net/ole/maps/villagemap.jpg); width:630px; height:338px; margin:auto; position:relative;  }


/* move the text off screen */
.popupmap li a {text-indent:-999px; display:block; width:15px; height:15px; background-image:url(http://www.cerdagne.net/ole/maps/point.png); position:absolute; line-height:8px;}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.popupmap li a em {visibility:hidden; position:absolute;}

/* position the round markers*/
 /*1 - Panorama Err: #err */
.popupmap li a.sega {top:185px;	left:282px;}
.popupmap li a.vedri {top:255px; left:400px;}
.popupmap li a.routefor {top:180px; left:390px;}
.popupmap li a.fourn {top:200px; left:245px;}
.popupmap li a.burriu{top:240px; left:660px;}
.popupmap li a.llivia {top:260px; left:560px;}
.popupmap li a.juan{top:195px; left:160px;}
.popupmap li a.pouade{top:140px; left:550px;}
.popupmap li a.llosca{top:200px; left:580px;}
.popupmap li a.village{top:240px; left:475px;}


/* 2 - Segalera: #sega */
.popupmap li a.bosquet {top:355px; left:300px;}
.popupmap li a.refuge {top:150px; left:50px;}
.popupmap li a.soldat {top:70px; left:450px;}
.popupmap li a.versllo {top:95px; left:290px;}
.popupmap li a.jasse {top:250px; left:500px;}


/* 3 - Route forestière: #foret*/
.popupmap li a.fontan {top:185px; left:535px;}
.popupmap li a.fontan2 {top:210px; left:500px;}
.popupmap li a.passmata {top:370px; left:250px;}
.popupmap li a.cotze {top:170px; left:30px;}


/* 4 - Le village: #village*/
.popupmap li a.gare {top:70px; left:120px;}
.popupmap li a.ball {top:175px; left:240px;}
.popupmap li a.poste{top:70px; left:200px;}
.popupmap li a.place{top:110px; left:130px;}
.popupmap li a.grest{top:75px; left:390px;}
.popupmap li a.errbas{top:60px; left:20px;}
.popupmap li a.notari{top:110px; left:430px;}
.popupmap li a.loisirs{top:100px; left:60px;}


/* move the text back into view on hover */
.popupmap li a:hover {background:#600; text-indent:0; height:1.2em; font-size:0.8em; color:#fff; line-height:1em; padding:2px 5px; width:300px; z-index:200; }
/* hack for IE5.x */
* html .popupmap li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.popupmap li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:none; width:300px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em; outline: none;  z-index:200;}
/* hack for IE5.x */
* html .popupmap li a:hover em {width:250px; w\idth:300px;}
/* give the image a border and margin */
.popupmap li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px; z-index:200;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.popupmap 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:#600; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .popupmap li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}



/* ================================================================ 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/balloons.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
 /* common styling */
.balloon {
font-family: verdana, sans-serif; 

}
.balloon ul {
padding:0; 
margin:0;
border:0;
list-style-type: none;
}
.balloon ul li {
float:left;
margin:0px;
width:160px;
height:160px;
}
.balloon ul li img {margin-left:-5px; margin-top:-5px;  padding-left:0;}
.balloon ul li a, .balloon ul li a:visited {
display:block;
text-decoration:none; 
color:#000;
background:#fff;
}
.balloon ul li a img, .balloon ul li a:visited img {
border:0;
}

.balloon ul li dl {
visibility:hidden;
position:absolute;
}

.balloon table {
margin:-2px;
border:0;
padding:0;
border-collapse:collapse;

}


.balloon dt {margin:0; padding:5px; font-size:1.1em; font-weight:bold; color:#6699cc; text-align:center;}
.balloon dd {margin:0; padding:5px 15px; color:#808080; font-size:0.8em; background:#fff ;}
.balloon dd p {padding:0; margin:10px 0; line-height:1em;}

.balloon dl#headeradt {width:160px; padding:0 ; height:auto; border: 2px solid #808080; background:#fff ;}
.balloon dl#headerlvv {width:160px; padding:0 ; height:auto; border: 2px solid #808080; background:#fff ;}
.balloon dl#headerci {width:160px; padding:0 ; height:auto; border: 2px solid #808080; background:#fff ;}
.balloon dl#headerjmlm {width:160px; padding:0 ; height:auto; border: 2px solid #808080; background:#fff ;}
.balloon dl#nuages {width:140px; padding:0 ; height:auto; border: 2px solid #808080; background:#fff ;}


/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon ul li:hover,
.balloon ul li a:hover {
color:#000; 
position:relative;
cursor: pointer;
cursor:hand;
}

.balloon ul li:hover dl#headeradt,
.balloon ul li a:hover dl#headeradt {
visibility:visible;
color:#000;
top:15px;
left:320px;
cursor:default;
}
.balloon ul li:hover dl#headerlvv,
.balloon ul li a:hover dl#headerlvv {
visibility:visible;
color:#000;
top:15px;
left:320px;
cursor:default;
}
.balloon ul li:hover dl#headerci,
.balloon ul li a:hover dl#headerci {
visibility:visible;
color:#000;
top:15px;
left:320px;
cursor:default;
}

.balloon ul li:hover dl#headerjmlm,
.balloon ul li a:hover dl#headerjmlm {
visibility:visible;
color:#000;
top:15px;
left:320px;
cursor:default;
}

.balloon ul li:hover dl#nuages,
.balloon ul li a:hover dl#nuages {
visibility:visible;
color:#000;
top:30px;
left:50px;
cursor:default;
}

.balloon ul li:hover dl a,
.balloon ul li a:hover dl a {
height:auto;
color:#6699CC;
background:transparent;
text-decoration:none;
display:inline;
}

.balloon ul li:hover dl a:hover,
.balloon ul li a:hover dl a:hover {
text-decoration:none;
background:transparent;
}