/*__________________________________________________________________________________________________________________________

Cette feuille de style contient les styles de la page d'accueil :
1. Navigation dans la ville + infos bulle
__________________________________________________________________________________________________________________________*/


/*__________________________________________________________________________________________________________________________

POUR VERIFIER LES EVENTUELS PBS DE MISE EN PAGE : VISUALISATION DU DECOUPAGE 
__________________________________________________________________________________________________________________________
table {border: 1px solid black;}
td {border: 1px dotted gray;}
div {border: 1px solid orange;}
img, form {border: 1px dashed blue;}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow;}
ul {border: 1px solid green;}
li {border: 1px solid lightgreen;}
*/

/*__________________________________________________________________________________________________________________________

      1. NAVIGATION DANS LA VILLE + INFOS BULLE
__________________________________________________________________________________________________________________________*/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/solar_map.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.
=================================================================== */

#map {position:relative; width:76em; height:34.4em; clear:both;}
#map img {width:76em; height:34.4em;}
#map ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:0;}
#map ul li {position:absolute; /*border: 1px dashed #2fa829;*/ border: 0.1em solid #fff;}
#map ul li#mdph {width:4em; height:6em; top:8em; left:0em;}
#map ul li#prestations {width:6em; height:5em; top:12em; left:18em;}
#map ul li#scol_emploi {width:36em; height:20em; top:0em; left:40em;}
#map ul li#actualites {width:3em; height:4.5em; top:24.5em; left:38em;}
#map ul li#localisation {width:3em; height:5em; top:21em; left:47em;}
#map ul li#loisirs {width:8em; height:8em; top:22em; left:25em;}
#map ul li#demarches {width:9em; height:9em; top:4em; left:6em;}
#map ul li#guides {width:3em; height:3em; top:29em; left:39em;}
#map ul li#partenaires {width:4em; height:5em; top:6em; left:16em;}

/* remove the absolute position from the list items for lte IE6 */
* html #map ul li {position:static; border:0;}

/* and give the absolute position to the links for lte IE6 */
* html #map ul li a.tl {position:absolute; /*border: 1px dashed #2fa829;*/ border: 0.1em solid #fff;}
* html #map ul li#mdph a.tl {top:8em; left:0em;}
* html #map ul li#prestations a.tl {top:12em; left:18em;}
* html #map ul li#scol_emploi a.tl {top:0em; left:40em;}
* html #map ul li#actualites a.tl {top:24.5em; left:38em;}
* html #map ul li#localisation a.tl {top:21em; left:47em;}
* html #map ul li#loisirs a.tl {top:22em; left:25em;}
* html #map ul li#demarches a.tl {top:4em; left:6em;}
* html #map ul li#guides a.tl {top:29em; left:39em;}
* html #map ul li#partenaires a.tl {top:6em; left:16em;}


#map ul li a {text-decoration:none;}

#map ul li a.tl {display:block; text-indent:-999em; background: url(../images/transparent.gif);}

#map ul li a.tl:hover, #map ul li:hover, #map ul li a.tl:active, #map ul li:active, #map ul li a.tl:focus, #map ul li:focus {z-index:500;}

#map ul li#mdph a.tl {width:4em; height:6em;}
#map ul li#mdph a.tl:hover, #map ul li#mdph:hover, #map ul li#mdph a.tl:focus, #map ul li#mdph:focus, #map ul li#mdph a.tl:active, #map ul li#mdph:active {border: 0.1em solid #2fa829;}
#map ul li#prestations a.tl {width:6em; height:5em;}
#map ul li#prestations a.tl:hover, #map ul li#prestations:hover, #map ul li#prestations a.tl:focus, #map ul li#prestations:focus, #map ul li#prestations a.tl:active, #map ul li#prestations:active {border: 0.1em solid #2fa829;}
#map ul li#scol_emploi a.tl {width:36em; height:20em;}
#map ul li#scol_emploi a.tl:hover, #map ul li#scol_emploi:hover, #map ul li#scol_emploi a.tl:focus, #map ul li#scol_emploi:focus, #map ul li#scol_emploi a.tl:active, #map ul li#scol_emploi:active {border: 0.1em solid #2fa829;}
#map ul li#actualites a.tl {width:3em; height:4.5em;}
#map ul li#actualites a.tl:hover, #map ul li#actualites:hover, #map ul li#actualites a.tl:focus, #map ul li#actualites:focus, #map ul li#actualites a.tl:active, #map ul li#actualites:active {border: 0.1em solid #2fa829;}
#map ul li#localisation a.tl {width:3em; height:5em;}
#map ul li#localisation a.tl:hover, #map ul li#localisation:hover, #map ul li#localisation a.tl:focus, #map ul li#localisation:focus, #map ul li#localisation a.tl:active, #map ul li#localisation:active {border: 0.1em solid #2fa829;}
#map ul li#loisirs a.tl {width:8em; height:8em;}
#map ul li#loisirs a.tl:hover, #map ul li#loisirs:hover, #map ul li#loisirs a.tl:focus, #map ul li#loisirs:focus, #map ul li#loisirs a.tl:active, #map ul li#loisirs:active {border: 0.1em solid #2fa829;}
#map ul li#demarches a.tl {width:9em; height:9em;}
#map ul li#demarches a.tl:hover, #map ul li#demarches:hover, #map ul li#demarches a.tl:focus, #map ul li#demarches:focus, #map ul li#demarches a.tl:active, #map ul li#demarches:active {border: 0.1em solid #2fa829;}
#map ul li#guides a.tl {width:3em; height:3em;}
#map ul li#guides a.tl:hover, #map ul li#guides:hover, #map ul li#guides a.tl:focus, #map ul li#guides:focus, #map ul li#guides a.tl:active, #map ul li#guides:active   {border: 0.1em solid #2fa829;}
#map ul li#partenaires a.tl {width:4em; height:5em;}
#map ul li#partenaires a.tl:hover, #map ul li#partenaires:hover, #map ul li#partenaires a.tl:focus, #map ul li#partenaires:focus, #map ul li#partenaires a.tl:active, #map ul li#partenaires:active {border: 0.1em solid #2fa829;}

#map ul li .xsnazzy,
#map ul li a .xsnazzy
{visibility:hidden;}

/* For IE6 to work */
* html #map ul li a.tl:hover {border:0;}

* html #map ul li a:hover .xsnazzy,
* html #map ul li a:focus .xsnazzy,
* html #map ul li a:active .xsnazzy
{visibility:visible;}

#map ul li:hover .xsnazzy, #map ul li:focus .xsnazzy, #map ul li:active .xsnazzy {visibility:visible;}

/* For IE7 to keep the :hover over .xsnazzy - goodness knows why? */
#map ul li:hover .xsnazzy, #map ul li:focus .xsnazzy, #map ul li:active .xsnazzy {background:url(../images/transparent.gif);}

.xsnazzy {display:block; position:absolute; height:auto;}

#mdph .xsnazzy {left:3em; top:2em; width:20em;}
#prestations .xsnazzy {left:3em; top:-2em; width:20em;}
#scol_emploi .xsnazzy {left:10em; top:0em; width:20em;}
#actualites .xsnazzy {left:2em; top:-2em; width:20em;}
#localisation .xsnazzy {left:2em; top:1em; width:20em;}
#loisirs .xsnazzy {left:6em; top:2em; width:20em;}
#demarches .xsnazzy {left:6em; top:0em; width:20em;}
#guides .xsnazzy {left:2em; top:-1em; width:20em;}
#partenaires .xsnazzy {left:3em; top:0em; width:20em;}

.xsnazzy h2 {margin:0 0.8em; padding: 0; font-size: 1.5em;}
.xsnazzy p {margin:0 1em; padding: 0;}
.xsnazzy h2 a {font-size:1em; color:#2fa829; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
.xsnazzy p {padding-bottom:0.5em; color:#333; font-size:1.1em;}
.xsnazzy {background: transparent; margin:1em;}


.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; font-size:0; overflow:hidden;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#fff; border-left:2px solid #000; border-right:2px solid #000;}
.xb1 {margin:0 8px; background:#000;}
.xb2 {margin:0 6px; background:#000;}
.xb3 {margin:0 4px; background:#000;}
.xb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.xb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.xb6 {margin:0 2px; background:#fff; border-width:0 3px;} 
.xb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} 

.xboxcontent {display:block; background:#fff; border:2px solid #000; border-width:0 2px;}
.xboxcontent a, .xboxcontent a:visited {display:block; /*color:#0068b5; font-size:1.1em;*/ text-indent:0; margin: 0;}

#map ul li a:hover .xsnazzy .xboxcontent a:hover, #map ul li a:focus .xsnazzy .xboxcontent a:focus, #map ul li a:active .xsnazzy .xboxcontent a:active {/*color:#0068b5;*/ text-decoration:underline;}
#map ul li:hover .xsnazzy .xboxcontent a:hover, #map ul li:focus .xsnazzy .xboxcontent a:focus, #map ul li:active .xsnazzy .xboxcontent a:active {/*color:#0068b5;*/ text-decoration:underline;}

.xsnazzy em.point_top {display:block; font-size:0; width:50px; height:25px; background:url(../images/point.gif) center top; position:absolute; left:50px; top:-25px;}
.xsnazzy em.point_bottom {display:block; font-size:0; width:50px; height:25px; background:url(../images/point.gif) center bottom; position:absolute; right:50px; bottom:-25px;}
/* for IE5.5 */
* html .xsnazzy em.point_bottom {bottom:-25px; bo\ttom:-25px;}
.xsnazzy em.point_left {display:block; font-size:0; width:25px; height:50px; background:url(../images/point.gif) left center ;position:absolute; left:-25px; top:10px;}
.xsnazzy em.point_right {display:block; font-size:0; width:25px; height:50px; background:url(../images/point.gif) right center; position:absolute; right:-25px; top:55px;}
/* for IE5.5 */
* html .xsnazzy em.point_right {right:-25px; ri\ght:-25px;}