/* Styles pour le body (polices de la page + fond) */
body{
      font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, Arial, Helvetica, sans-serif;
      font-size: small;
      background-color: #f3f3f3;
      }



/* Style du div qui encadre la liste de définitions 
   Permet de définir l'emplacement de l'image et son encadrement */
#ex {
      border: solid 4px silver;
      margin: 70px auto;
      width: 600px;
      }



/* La carte d'image proprement dite
   Idée originale : Frank Manno http://frankmanno.com/ideas/css-imagemap-redux/ (Nov. 25, 2004) */

/* Affichage de l'image */
dl#cartimage{
                margin: 0;
                padding: 0;
                background: transparent url(Duplicator.jpg) top left no-repeat;
                height: 450px;
                width: 600px;
                position: relative;
                }

/* Pas d'affichage pour la liste */
dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }

/* Pour afficher le titre de la liste en haut de l'image, décommenter ce passage */
/* dl#cartimage dt.title{
                         color: white;
                         display: block;
                         font-size: 115%;
                         font-weight: bold
                         padding: 10px 0 0 5px;
                         background: silver
                         }*/

/* Déclarations des zones cliquables
   Chaque bloc définit une zone cliquable et tous ses attributs */
dd#microblogDef{ top: 240px; right: 160px; }
dd#microblogDef a{ position: absolute; width: 130px; height: 180px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#microblogDef a span{ display: none; }
dd#microblogDef a:hover{ position: absolute; background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#microblogDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 60%;
                          }

dd#blognotesDef{ top: 260px; right: 300px; }
dd#blognotesDef a{ position: absolute; width: 120px; height: 110px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#blognotesDef a span{ display: none; }
dd#blognotesDef a:hover{ position: absolute; background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#blognotesDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 80%;
                          }

dd#photosDef{ top: 27px; left: 200px; }
dd#photosDef a{ position: absolute; width: 90px; height: 70px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#photosDef a span{ display: none; }
dd#photosDef a:hover{ background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#photosDef a:hover span{
                             display: block;
                             text-indent: 0;
                             vertical-align: top;
                             color: #000;
                             background-color: #F4F4F4;
                             font-weight: bold;
                             position: absolute;
                             border: 1px solid #333333;
                             bottom: 100%;
                             margin: 0;
                             padding: 5px;
                             width: 100%;
                             }

dd#cvDef{ top: 24px; left: 460px; }
dd#cvDef a{ position: absolute; width: 128px; height: 111px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#cvDef a span{ display: none; }
dd#cvDef a:hover{ background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#cvDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 70%;
                          }

dd#VVLDef{ top: 62px; left: 7px; }
dd#VVLDef a{ position: absolute; width: 111px; height: 139px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#VVLDef a span{ display: none; }
dd#VVLDef a:hover{ background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#VVLDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 90%;
                          }

dd#sombriflouDef{ top: 250px; left: 1px; }
dd#sombriflouDef a{ position: absolute; width: 88px; height: 195px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#sombriflouDef a span{ display: none; }
dd#sombriflouDef a:hover{ background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#sombriflouDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 80%;
                          }

dd#basilleDef{ top: 146px; left: 282px; }
dd#basilleDef a{ position: absolute; width: 90px; height: 53px; text-decoration: none; border: 3px solid #FFFCE6; background: transparent url(hover.png) repeat; }
dd#basilleDef a span{ display: none; }
dd#basilleDef a:hover{ background: transparent url(note.png) repeat; border: 3px solid #333333; }
dd#basilleDef a:hover span{
                          display: block;
                          text-indent: 0;
                          vertical-align: top;
                          color: #000;
                          background-color: #F4F4F4;
                          font-weight: bold;
                          position: absolute;
                          border: 1px solid #333333;
                          bottom: 100%;
                          margin: 0;
                          padding: 5px;
                          width: 75%;
                          }