<!-- BEGIN disable_viewonline -->
<div class="qeel">
  <div style="height: 40px"></div>
<table align="center" width="75%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td valign="top" width="50%" align="left">
                  <h1 style="text-align: center">Statistiques</h1>
      <span class="gensmall">
      {TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span>
      </td>
     
      <td valign="top" width="50%" align="left">
                  <h1 style="text-align: center">Actuellement</h1>
      <span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span>
      </td>
  </tr>
  <tr>
      <td valign="top" align="center" colspan="2">
      <table><tr><td>
      {L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
      </td></tr></table>
      </td>
  </tr>
  <tr>
      <td valign="top" colspan="2"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td valign="top" align="center" colspan="2">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
</div>
<!-- END disable_viewonline -->

.qeel
{
  background-image: url('http://img19.imageshack.us/img19/3712/sanstitre1cbf.png');
width: 800px;
height: 300px;
  margin: auto;
}

<!-- BEGIN disable_viewonline -->
<div id="all_qeel">
    <!-- TITRE QEEL -->
<div id="d-title"><h1> Qui Est En Ligne ?</h1></div>
<div id="tfa_qeel">
  <div id="tfa_one-bloc">
    <img width="110" src="http://i45.servimg.com/u/f45/11/95/30/70/p612.png" style="position: absolute; top: 20px; right: -56px;" alt="" />
    <!-- BLOC DE GAUCHE(statistiques) -->
    <div class="tfa_d-container">
      <div class="d-content">
        <h2>Statistiques</h2>
        <div class="in_d-content">
          <img style="width: 100px; float:left; margin: 0 0 0 -40px;" src="http://moiphanie.m.o.pic.centerblog.net/66794de1.png" alt="statistiques" />
          Te voila enfin ! Nous t'attendions avec impatience !             
          <!-- NOMBRE DE MEMBRES -->
          <div id="TFAd3">{TOTAL_USERS}
            <script type="text/javascript">
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/Nous avons /,"Dans cette charmante bourgade, nous avons au total, ");
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membres enregistrés/,"Accro's. ");
              document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membre enregistré/,"Accro's. ");
            </script>
          </div>       
       
          <!-- NOMBRE DE MESSAGES -->
          <div id="TFAd2">{TOTAL_POSTS}
            <script type="text/javascript">
              document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/Nos membres ont posté un total de /,"Une population bien active, puisqu'ils ont envoyé, ");
              document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/messages/,"missives.");
            </script>
          </div>       
       
          <!-- DERNIER UTILISATEUR ENREGISTRE -->
          <div id="TFAd4">{NEWEST_USER}
            <script type="text/javascript">
              document.getElementById('TFAd4').innerHTML=document.getElementById('TFAd4').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"La dernière personne qui a franchi nos portes est : ");
            </script> . Nous lui souhaitons tous la !
          </div>
 
          <!-- UTILISATEURS EN LIGNE -->
          <span id="TFAd">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Il y a en tout /,"En ce moment dans la petite bourgade il y a ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateurs en ligne/,"personnes connectées, dont  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateur en ligne/,"personne actuellement connectée dont  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistrés/,"Accro's  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistré/,"Accro's  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisible et/,"mirage et  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisibles et/,"mirages et  ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invités/,"touristes. ");
            document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invité/,"touriste.  ");
          </script>           

        </div>
      </div>
    </div>
 
    <!-- BLOC DE DROITE (groupes) -->     
    <div class="tfa_d-container2">
      <div class="d-content">
        <h2>Les groupes</h2>
        <div class="in_d-content2">                                   
          <!-- DEBUT GROUPES AVEC TRANSITIONS -->
          <br />       
                   
          <!-- INFOBULLE GROUPE 1 -->
          <div class="d-transition-tfa">
            <img width="60"  src="http://tigresse004.t.i.pic.centerblog.net/6aa78ed1.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Modérateur(rice)</h3>
              <span>
                Le modérateur est la pour veillez à ce que tous se passe bien! Et prévenir l'admin ou le fonda du moindre problème! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g2-accro-s-moder</a>
              </span>
            </div>
          </div>         
          <!-- INFOBULLE GROUPE 2 -->
          <div class="d-transition-tfa">
            <img width="60"  src="http://tigresse004.t.i.pic.centerblog.net/4937de07.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Le moder'Anim</h3>
              <span>
                Est l'animateur(rice) du forum. Elle ou il tâche que le forum soit animé, que ce soit pour la section blabla ou la section défis! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g22-moder-anim</a>
              </span>
            </div>
          </div>
          <!-- INFOBULLE GROUPE 3 -->
          <div class="d-transition-tfa">
            <img width="60" src="http://nsa30.casimages.com/img/2012/07/04/120704121720215368.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Moder'Tuto</h3>
              <span>
                Il se charge de toute la partie tutoriel. Que se soit pour félicité les membres ou pour vérifier les tutos! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g28-moder-tuto</a>
              </span>
            </div>
          </div>   
          <!-- INFOBULLE GROUPE 4 -->
          <div class="d-transition-tfa">
            <img width="60" src="http://nsa30.casimages.com/img/2012/07/04/120704122002133954.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Le Graph'</h3>
              <span>
                Il est la pour ce détendre, s'amuser et passé du bon temps. C'est tout! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g5-graph</a>
              </span>
            </div>
          </div>         
          <!-- INFOBULLE GROUPE 5 -->
          <div class="d-transition-tfa">
            <img width="50" src="http://nsa30.casimages.com/img/2012/07/04/120704015838950924.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Le Graph Vip</h3>
              <span>
                C'estpareil que le graph' sauf qu'il a accès à toutes les sections grace a sa participation à la vie du forum! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g6-graph-vip</a>
              </span>
            </div>
          </div>   
          <!-- INFOBULLE GROUPE 6 -->
          <div class="d-transition-tfa">
            <img width="60" src="http://nsa29.casimages.com/img/2012/07/04/120704012205638093.png" alt="" />
            <div class="d-block_transition"> 
              <h3>Le visiteur</h3>
              <span>
                Le visiteur est un membre inscrit mais pas encore présenter et qui n'a pas encore lu le règlement! <br />             
                <a href="lien-groupe">http://accrosgraph.forumactif.com/g10-en-visite</a>
              </span>
            </div>
          </div>         
          <!-- FIN INFOBULLES AVEC TRANSITIONS DES GROUPES -->
          <img style="width: 150px; position: absolute; right: -60px; bottom: -60px;" src="http://nsa30.casimages.com/img/2012/07/04/120704070856450971.png" alt="" />       
          <p style="10px Arial;"> Tous les groupes <a href="http://accrosgraph.forumactif.com/groups"> <stromg></stromg></a></p>       
          <div style="clear:both;"></div>
        </div>     
      </div>   
    </div> 
 
    <!-- DERNIERS CONNECTES --> 
    <div class="tfa_d-container3"> 
      <div id="bloc_bas_qeel">
          <div id="derniers_connectes">
            <div id="conect-content">
            <span id="TFAd5">{LOGGED_IN_USER_LIST}</span>
            <script type="text/javascript">
              document.getElementById('TFAd5').innerHTML=document.getElementById('TFAd5').innerHTML.replace(/Utilisateurs enregistrés/,"Les personnes s'amusant ici :");</script>
            <table id="TFAd6">{L_CONNECTED_MEMBERS}                         
              <script type="text/javascript">document.getElementById('TFAd6').innerHTML=document.getElementById('TFAd6').innerHTML.replace(/Membres connectés/,"Les dernièrs Accro's à s’être connectés :  ");</script>
            </table>
            </div>       
          </div>
        <span id="open_derniers_connectes">Voir les derniers connectés <stromg>▼</stromg></span>     
      </div> 
    </div>
 
    <!-- ANNIVERSAIRES --> 
    <div class="tfa_d-container4">
      <div class="bloc_bas_qeel">
          <div id="d_anniversaires">
            <div id="anniv-content">
              <table>
                {L_WHOSBIRTHDAY_TODAY}
                <span id="TFA2p0">
                  {L_WHOSBIRTHDAY_WEEK}
                  <script type="text/javascript">document.getElementById('TFA2p0').parentNode.innerHTML=document.getElementById('TFA2p0').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les Accro's fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Membres fêtant leur anniversaire dans les 7 prochains jours").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun Accro's ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun Accro's ne fête son anniversaire dans les 7 prochains jours");</script>
                </span>
              </table>
            </div>
          </div>
        <span id="open_anniversaires">Voir les anniversaires <stromg>▼</stromg></span>
      </div>
    </div> 
    <div style="clear:both;"></div>
 
    <img width="100" src="http://i45.servimg.com/u/f45/11/95/30/70/p612.png" style="position: absolute; bottom: 100px; left: -48px;" alt="" /> 
 
    <!-- BLOC INFORMATIONS -->
    <div id="tfa_d-bas">   
      <div class="d-content">
        <h2>Informations</h2>         
        <div class="in_d-content">       
            <!-- BLOC TRANSITION DE GAUCHE -->
            <div id="bas_d-gauche">
              <img height="90" src="http://i45.servimg.com/u/f45/11/95/30/70/p513.png" style="position: absolute; right: 0; top: 4px;" alt="" />
              <div id="bloc_part_qeel">   
              <ul>
                <li>
                  <a style="margin-top: 3px;" class="info_link" href="TON-LIEN">Partenariat</a>
                  <div>
                    <p>
                      Tu souhaites devenir l'un de nos partenaires ?
                      Il suffit de faire ta demande ici : <a href="http://accrosgraph.forumactif.com/f205-demande-de-partenariat"> Partenaires </a>,
                      après avoir lu les conditions.                   
                    </p>
                  </div>
                </li>

                <li>
                  <a class="info_link" href="http://accrosgraph.forumactif.com/g6-graph-vip">Membres VIP</a>
                  <div>
                  <p>
                    Le membre VIP est un ancien du staff, un membre actif, un ami...
                    Tu penses mériter ce rang ? Envoie un MP à un admin.
                  </p>
                  </div>
                </li>

                <li>
                  <a class="info_link" href="TON-LIEN">Postuler</a>
                  <div>
                  <p>
                    Tu souhaites aider la communauté ? Tu penses avoir l'âme d'un dirigeant ?
                    Fais ta demande ici : <a href="http://accrosgraph.forumactif.com/f114-on-recrute-ouvert"> Postuler</a>
                  </p>
                  </div>
                </li>
              </ul>     
              </div>
            </div>
            <!-- BLOC DE DROITE -->
            <div id="bas_d-droite">
              <p>
                Le forum a été créé par Cathy et **Âme**, le design actuel a été réalisé par Cathy que nous remercions.             
                Toute reproduction totale ou partielle est totalement interdite.
                Merci de respecter le travail d'autrui.                   
                Les codes appartiennent aux membres du forum Fa et CSS actif, et nous remercions
                les forums d'entraides pour leur partage.
                <img style="width: 140px; position: absolute; right: -60px; bottom: 0;" src="http://i45.servimg.com/u/f45/11/95/30/70/s10.png" alt="" />
              </p>           
            </div>         
            <div style="clear:both;"></div>   
                         
        </div>     
      </div>   
    </div>
    <img width="180" src="http://tubomania.t.u.pic.centerblog.net/zindosqc.png" style="position: absolute; bottom: -60px; left: 170px;" alt="" />
  </div>
</div>
 
</div>
<!-- END disable_viewonline --> 

/* ---------------- QEEL TFA --------------- */

        /* BLOC CONTENANT TOUT LE QEEL */
    #all_qeel {
      margin: 10px auto 40px;
      padding: 0;
      width: 750px;
    }
    /* BLOC CONTENANT LE TITRE DU QEEL */
    #d-title {
      width:750px;
      position: relative;
      z-index: 999;
      margin: 0 auto -40px;
      padding: 0;
      text-align: center;
    }
    /* TITRE DU QEEL */
    #d-title h1 {
      width:100%;
      margin: 0 auto;
      padding: 0;
      font-family: 'Lovers Quarrel', cursive;
      font-size:80px;
      font-weight: normal;
      text-align: center;
      letter-spacing: 3;
      color:#284b5f;
      text-shadow: 0 0 2px #fff;
    }
    /* BLOC PRINCIPAL */
    #tfa_qeel {
      width: 750px;
      margin: 10px auto;
      padding: 8px 0;
      position: relative;
      background: url(http://i45.servimg.com/u/f45/11/95/30/70/j610.jpg) #1f495e;
      -moz-border-radius: 30px;
      -webkit-border-radius:30px;
      border-radius: 30px;
      -moz-box-shadow:0px 0px 4px #000;
      -webkit-box-shadow: 0px 0px 4px #000;
      box-shadow: 0px 0px 4px #000;
    }
    /* DEUXIEME BLOC POUR BORDURE */
    #tfa_one-bloc {
      width:98%;
      margin: auto;
      padding: 0;
      border: 2px dotted #bb5700;
      position: relative;
      -moz-border-radius: 25px;
      -webkit-border-radius:25px;
      border-radius: 25px;
      font: 15px Trochut;
      color: #284b5f;
    }
    /* ----- BLOC STATISTIQUES ----- */
    .tfa_d-container {
      float: left;
      width: 45%;
      height: 240px;
      margin-top: 35px;
      margin-left: 3%;
      padding: 0;
      background: url(http://i45.servimg.com/u/f45/11/95/30/70/j510.jpg) #1f495e;
      -moz-border-radius: 20px;
      -webkit-border-radius:20px;
      border-radius: 20px;
      box-shadow: 0 0 2px #000;
    }
    /* 2EME BLOC POUR BORDURE */
    .d-content {
      width:96%;
      margin: 10px auto;
      padding: 0;
      border: 2px dotted #bb5700;
      position: relative;
      -moz-border-radius: 15px;
      -webkit-border-radius:15px;
      border-radius: 15px;
      position: relative;
    }
    /* TITRE STATISTIQUES */
    .d-content h2 {
      position: absolute;
      top: -55px;
      font-family: 'Lovers Quarrel', cursive;
      font-size: 60px;
      font-weight: normal;
      width: 100%;
      color: #284b5f;
      text-shadow: 0 0 2px #fff;
      text-align: left;
      margin: 0 0 0 25px;
      padding: 0;
    }
    /* CONTENU STATISTIQUES */
    .d-content .in_d-content {
      position: relative;
      width: 96%;
      margin: auto;
      padding: 5px 0;
    }
    /* ------ BLOC DE DROITE ------ */
    .tfa_d-container2 {
      float: right;
      width: 45%;
      height: 240px;
      margin-top: 35px;
      margin-right: 3%;
      padding: 0;
      background: url(http://i45.servimg.com/u/f45/11/95/30/70/j510.jpg) #1f495e;
      -moz-border-radius: 20px;
      -webkit-border-radius:20px;
      border-radius: 20px;
      box-shadow: 0 0 2px #000;
    }
    /* TITRE GROUPE */
    .tfa_d-container2 h2 {
      position: absolute;
      top: -55px;
      right: 20px;
      font-family: 'Lovers Quarrel', cursive;
      font-weight: normal;
      font-size: 60px;
      width: 100%;
      color: #284b5f;
      text-shadow: 0 0 2px #fff;
      text-align: right;
      margin: 0 15px 0 0;
      padding: 0;
    }
    /* CONTENEUR GROUPE */
    .in_d-content2 {
      position: relative;
      width: 300px;
      height: 186px;
      margin: auto;
      padding: 17px 0;
    }
    .in_d-content2 p {
      font: 15px Trochut;
      ;
    }
    /* --------- LES GROUPES ---------- */

        /* BLOC GROUPE */
    .d-transition-tfa {
      position: relative;
      float: left;
      height: 80px;
      margin: auto;
      overflow: hidden;
      width: 100px;
      text-align: center;
      vertical-align: middle;
    }
    /* CONTENU BLOC GROUPE */
    .d-block_transition {
      background: #1f495e;
      width: 100px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      color: #9C9C9C;
      opacity: 0;
      -webkit-transition: all 1.0s ease; /* pour navigateur webkit */
      -moz-transition: all 1.0s ease; /* pour navigateur mozilla */
      -o-transition: all 1.0s ease; /* pour navigateur opera */
      transition: all 1.0s ease; /* pour les navigateurs rÃcents */
    }
    /* BLOC GROUPE AU SURVOL */
    .d-block_transition:hover {
      opacity: 0.8;
    }
    /* IMAGE (icône) DU GROUPE */
    .d-transition-tfa img {
      vertical-align: middle;
    }
    /* NOM DU GROUPE */
    .d-block_transition h3 {
      color: #e7c064;
      font: 12px italic verdana;
      border-bottom: 1px dotted #e19f2d;
      text-align: center;
      width: 96%;
      margin: 0 auto;
      padding: 0;
    }
    /* TEXTE GROUPE */
    .d-block_transition span {
      display: block;
      font-size: 12px;
      color: #fff;
      text-align: center;
      width: 96%;
      margin: 0 auto;
      padding: 0;
    }
    /* LIEN GROUPE */
    .d-block_transition a {
      font-size: 13px;
      color: #64e776;
      text-decoration: none;
    }
    /* ------ LES DERNIERS CONNECTES -------- */
    .tfa_d-container3 {
      position: relative;
      float: left;
      width: 45%;
      margin-left:3%;
      padding: 0;
    }
    #bloc_bas_qeel {
      position: absolute;
      left: 5%;
      width: 88%;
      margin: 0 auto;
      padding: 0;
      z-index: 999;
    }
    #derniers_connectes {
      background: #0D303E;
      position: relative;
      height: 0;
      overflow: hidden;
      color: #fff;
      -moz-border-radius: 0 0 9px 9px;
      -webkit-border-radius: 0 0 9px 9px;
      border-radius: 0 0 9px 9px;
      -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
      -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
      -o-transition: all 1.2s ease; /* pour navigateur opera */
      transition: all 1.2s ease; /* pour les navigateurs rÃcents */
    }
    #open_derniers_connectes {
      background: #0D303E;
      position: relative;
      width: 150px;
      display: block;
      margin: 0 auto;
      padding: 3px;
      font-size: 13px;
      color: #fff;
      text-align: center;
      -moz-border-radius: 0 0 9px 9px;
      -webkit-border-radius: 0 0 15px 15px;
      border-radius: 0 0 15px 15px;
    }
    #bloc_bas_qeel:hover #derniers_connectes {
      height: 80px;
      padding: 3px;
    }
    #conect-content {
      width: 94%;
      margin: auto;
      height: 76px;
      overflow-y: auto;
    }
    #derniers_connectes #TFAd6 .row1 {
      background: transparent;
    }
    /* ------ LES ANNIVERSAIRES -------- */
    .tfa_d-container4 {
      position: relative;
      float: right;
      width: 45%;
      margin-right:3%;
      padding: 0;
    }
    .bloc_bas_qeel {
      position: absolute;
      left: 5%;
      width: 88%;
      margin: 0 auto;
      padding: 0;
      z-index: 3;
    }
    #d_anniversaires {
      background: #0D303E;
      position: relative;
      height: 0;
      overflow: hidden;
      color: #ffffff;
      -moz-border-radius: 0 0 9px 9px;
      -webkit-border-radius: 0 0 9px 9px;
      border-radius: 0 0 9px 9px;
      -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
      -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
      -o-transition: all 1.2s ease; /* pour navigateur opera */
      transition: all 1.2s ease; /* pour les navigateurs rÃcents */
    }
    #open_anniversaires {
      background: #0D303E;
      position: relative;
      width: 150px;
      display: block;
      margin: 0 auto;
      padding: 3px;
      font-size: 13px;
      color: #ffffff;
      text-align: center;
      -moz-border-radius: 0 0 9px 9px;
      -webkit-border-radius: 0 0 15px 15px;
      border-radius: 0 0 15px 15px;
    }
    .bloc_bas_qeel:hover #d_anniversaires {
      height: 80px;
      padding: 3px;
    }
    #anniv-content {
      width: 94%;
      margin: auto;
      height: 76px;
      overflow-y: auto;
    }
    /* SUPRESSION DU FOND DE ROW1 */
    #anniv-content table td.row1 {
      background: transparent !important;
    }
    /* ------ INFORMATION ------- */
    #tfa_d-bas {
      width: 94%;
      margin: 40px auto 10px;
      padding: 5px 0;
      background: url(http://i45.servimg.com/u/f45/11/95/30/70/j510.jpg) #1f495e;
      -moz-border-radius: 20px;
      -webkit-border-radius:20px;
      border-radius: 20px;
      box-shadow: 0 0 2px #000;
    }
    /* TITRE INFORMATION */
    #tfa_d-bas h2 {
      position: absolute;
      width: 80%;
      font-family: 'Lovers Quarrel', cursive;
      font-size: 60px;
      width: 100%;
      color: #284b5f;
      text-shadow: 0 0 2px #fff;
      text-align: center;
      top: -62px;
      margin: 10px auto 0;
      padding: 0;
    }
    /* 2EME BLOC POUR LA BORDURE */
    #tfa_d-bas .d-content {
      width:98%;
      margin: auto;
      padding:0;
      border: 2px dotted #bb5700;
      position: relative;
      -moz-border-radius: 15px;
      -webkit-border-radius:15px;
      border-radius: 15px;
      position: relative;
    }
    /* CONTENU INFORMATION */
    #tfa_d-bas .in_d-content {
      position: relative;
      width: 98%;
      margin: auto;
      padding: 5px 0;
    }
    /* LIENS DANS INFORMATION */
    #tfa_d-bas .in_d-content a {
      color: #353434;
    }
    /* BLOC BAS GAUCHE */
    #bas_d-gauche {
      position: relative;
      width: 40%;
      float: left;
      margin: 0;
      padding: 0;
    }
    /* BLOC BAS DROITE */
    #bas_d-droite {
      position: relative;
      width: 60%;
      float: right;
      margin: 0;
      padding: 0;
    }
    /* PARAGRAPHE DU BLOC DE DROITE */
    #bas_d-droite p {
      width: 96%;
      margin: 5px auto 0;
      padding: 0;
      font: 15px Trochut;
      color: #284b5f;
    }
    /* ----- BLOC TRANSITION BAS GAUCHE ----- */
    #bloc_part_qeel {
      height: 90px;
      width: 96%;
      margin: 3px 0 0 0;
      padding: 0;
      position: relative;
      font: Bold 15px Trochut;
      color: #284b5f;
    }
    /* CONFIGURATION DE LA LISTE avant */
    #bloc_part_qeel ul:before {
      content: "";
      position: absolute;
      z-index: 100;
      background: url(http://i45.servimg.com/u/f45/11/95/30/70/j610.jpg) #1f495e;
      height: 100%;
      width: 110px;
      margin : 0 auto;
      padding: 0;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-box-shadow:0px 0px 2px #000;
      -webkit-box-shadow: 0px 2px 4px #000;
      box-shadow: 0px 0px 2px #000;
    }
    /* LISTE */
    #bloc_part_qeel ul {
      position: relative;
      list-style: none;
      width: 110px;
      padding:0px;
      margin: 0;
    }
    /* ELEMENT DE LA LISTE */
    #bloc_part_qeel ul li {
      height: 30px;
      width: 110px;
      margin: 0 auto;
      padding: 0;
    }
    /* LIENS MENU */
    #bloc_part_qeel ul li a.info_link {
      position: absolute;
      z-index: 110;
      font-weight: bold;
      color: #fff;
      font-size: 16px;
      margin: 0;
      padding-left: 10px;
      display: block;
      width: 100px;
      height: 30px;
      text-decoration: none;
      text-shadow: 0 1px 0 #000;
    }
    a.info_link:hover {
      text-decoration: none;
    }
    /* BLOC CONTENEUR */
    #bloc_part_qeel ul li div {
      width: 100px;
      height: 80px;
      padding: 0;
      background: rgba(31,73,94,0.6);
      overflow: hidden;
      color: white;
      position: absolute;
      top: 5px;
      left: 0;
      z-index: 50;
      opacity: 0;
      margin: 0;
      padding: 0;
      -moz-transition: 1s left, 1s width, 1s opacity;
      -webkit-transition: 1s left, 1s width, 1s opacity;
      -o-transition: 1s left, 1s width, 1s opacity;
    }
    /* BLOC CONTENEUR AU SURVOL */
    #bloc_part_qeel ul li:hover div {
      left:110px;
      opacity: 1;
      width: 160px;
      background: rgba(31,73,94,0.6);
      -moz-transition: 1s left, 1s width, 1s opacity;
      -webkit-transition: 1s left, 1s width, 1s opacity;
      -o-transition: 1s left, 1s width, 1s opacity;
    }
    /*l PARAGRAPHE */
    #bloc_part_qeel ul li div p {
      width: 96%;
      overflow: hidden;
      margin: 3px auto 0;
      paddign: 0;
      font: 13px Trochut;
      color: #fff;
      text-shadow: 0 1px 0 #000;
    }
    /* *****fin du Qeel********** */