.forumline
{
 border-width: 1px;
}

/*code divers*/
        a {
                -moz-transition:color 0.5s; /* Mozilla Firefox */
                -webkit-transition:color 0.5s; /* Safari et Google Chrome */
                -o-transition:color 0.5s; /* Opera */
                transition:color 0.5s;
            }
        a:hover {
                color:#4d3515;
            }

a.nav img
{
width: 200px;
}

/* SUPPRIMER ÉDITION */

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
        /* ENLEVER TOUS LES SOULIGNEMENTS */
       
        a:hover{text-decoration: none !important;}
        a {text-decoration: none !important;}
        a:link {text-decoration: none;}
        a:visited {text-decoration: none;}
       
        /* JUSTIFICATION ET MARGE AUTO */
       
        .postbody {
            padding-left: 15px;
            padding-right: 15px; }

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }


/*fin code divers*/

/*catégorie*/

.LastPost { width:150px;
}

.jess {border: 1px solid #736859;
        background-color: #F1EADF;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-bottomright: 6px;
        -moz-border-radius-topright: 6px;
        -moz-border-radius-bottomleft: 6px;
        padding: 5px;
  border-image: initial;
height:80px;}



/* Mise en forme du "bloc" qui contient le titre */


/* mise en forme du titre lui-même */
.TitreCategorie h2 {
  margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  letter-spacing:2px; /* espacement entre les lettres */
  font-variant:small-caps; /* texte en petites majuscules */
    color:#736859; /* couleur du texte */
    font-family: georgia;
    font-size:16px;
}
a.forumlink:before { content: "▐ "; }

 .forumlink {
        padding-top: 10px;
        margin-left: 10px;
        text-transform: uppercase;
        font-size: 16px!important;
        font-family: georgia;
        letter-spacing: 2px;
        line-height: normal;
        font-weight: lighter;
        color: #736859;
        }

  .categorie {
        background-color: #F1EADF;
        border: 1px dotted #F1EADF;
        font-style: normal 10px georgia;
        padding-top: 5px;
        padding-left: 10px;
        padding-right: 5px;
        -moz-border-radius-topright: 15px;
        -moz-border-radius-bottomright: 0px;
        -webkit-border-radius: 0px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: -3px;
        margin-bottom: 5px;
                        color: #736859;
        display: block;
        text-align: justify;
       
        }

/* Code par Hiro pour CSSACTIF
  Merci de ne pas supprimer cette mention
  (http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
    position:relative;
    width:150px;
    height:80px;
    border:1px solid #736859; /* La vilaine bordure rouge */
    overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
    background:white; /* le bg  de la div qui contient l'avatar */
    position:absolute; /* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:1;/* La position par rapport à l'autre div qui contient les infos */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
    margin-top:100px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
    background:white; /* le bg  de la div qui contient les infos*/
    position:absolute;/* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
    opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
    margin-left:-150px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
  text-align: left;
  overflow:auto;
  background-color: #F1EADF;
}

#englob:hover > .infosp {
  opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
  margin-left:5px;/* et on décale cette div à 0px (position par défaut) */
}
/*fincatégorie*/

/*message*/
.postbody {
    padding-left: 05px;
    padding-right: 05px;
    text-align:justify;
  border: 1px dotted #736859;
}
/*finmessage*/

/*Profil*/

.postdetails.poster-profile img {
width:200px;
display:block;
}

.vava {
border:1px #736859 double;
background-color: #F6F6EF;
margin: 5px;
padding: 5px;
 
}

.jess10 {
padding: 1px;
margin: 1px;
-moz-box-shadow: 2px 2px 5px #736859;
line-height: 0.9;
opacity: 1;
}
span.postdetails, span.poster-profile {
font-size: 10px;
}

.vava2 {
border: 1px #736859 solid;
background-color: #F1EADF;
font-size: 10px;
  padding: 3px;
}

/* Profil Masqué */
.profilmasque /*c'est juste le css du bouton*/
{
background-color: #F6F6EF;
border-bottom: 1px dotted #736859;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-border-radius: 10px; /* en pointillée et en gris*/
font-size: 10px; /*taille de la police*/
letter-spacing: 1px;
}

.profil1/*c'est le css de l'ensemble bouton+profil*/
{
width: 180px;
background-color: #F6F6EF;
border: none;
font-size: 9px;
letter-spacing: 2px;
font-weight: bold;
}


.name {
font-size: 15px;
text-align: center;
 
}


/* =================================
PERSONNALISATION DU QUI EST EN LIGNE
====================================
Code proposé par Sayuri
Corrigé par CSSActif
==================================== */
/* conteneur du QEEL */
.QeelPerso {
  border: 4px dotted #7f7757; /* bordure : épaisseur style couleur */
  padding:10px 5px; /* espacement du contenu par rapport à la bordure */
  background-color:#958f67; /* couleur de fond */
  /* coins arrondis (tous navigateurs) */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* Centrage image du QEEL */
.ImgQeel {text-align:center;}

/* Mise en forme des liens vers les groupes */
.ListeGroupes a {
  font-size:16px; /* taille du texte */
  font-weight:bold; /* épaisseur du texte */
  font-style:italic; /* texte en italique */
  text-transform:lowercase; /* texte en minuscules */
  text-decoration: none!important; /* pas de soulignement du lien */
  letter-spacing:1px; /* espacement des lettres */
}

/* Couleurs des groupes */
a.groupe1 { color:#COULEURGROUPE ; }
a.groupe2 { color:#COULEURGROUPE ; }
a.groupe3 { color:#COULEURGROUPE ; }
a.groupe4 { color:#COULEURGROUPE ; }
a.groupe5 { color:#COULEURGROUPE ; }
a.groupe6 { color:#COULEURGROUPE ; }
a.groupe7 { color:#COULEURGROUPE ; }
a.groupe8 { color:#COULEURGROUPE ; }

/* Mise en forme des cellules de statistiques */
.statistiques {
  background-color: #a19c77; /* couleur de fond */
  border: 4px dotted #7f7757; /* bordure : épaisseur style couleur */
  padding:10px;
  margin:10px;
  text-align:left; /* alignement texte */
  /* coins arrondis */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* Limitation en hauteur des blocs de statistiques */
.BlocStats {
  overflow:auto;
  max-height: 200px; /* hauteur maxi */
}

/* Debuggage : on retire le fond de la liste des dernières 24h */
.DeBug td.row1 { background : none; }

/* =================================
PERSONNALISATION DU QUI EST EN LIGNE (fin)
==================================== */

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<!--
=================================
PERSONNALISATION DU QUI EST EN LIGNE
====================================
Code proposé par Sayuri
Corrigé par CSSActif
====================================
-->
<div class="QeelPerso">
  <div class="ImgQeel">
      <!-- BEGIN switch_viewonline_link -->
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></a>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
        <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
      <!-- END switch_viewonline_nolink -->
  </div>
 
  <table width="100%" border="0" cellspacing="5" cellpadding="5" align="center">
      <tr>
        <td colspan="2" align="center" class="ListeGroupes">
            <a href="http://#" class="groupe1">« group 1</a>
            <a href="http://#" class="groupe2">« group 2</a>
            <a href="http://#" class="groupe3">« group 3</a>
            <a href="http://#" class="groupe4">« group 4</a>
            <a href="http://#" class="groupe5">« group 5</a>
            <a href="http://#" class="groupe6">« group 6</a>
            <a href="http://#" class="groupe7">« group 7</a>
            <a href="http://#" class="groupe8">« group 8</a>
        </td>
      </tr>

      <tr>
        <td width="50%" valign="top" align="center" class="statistiques">
            <div class="BlocStats">
              <span class="gensmall">
                  {TOTAL_POSTS}<br />
                  {TOTAL_USERS}<br />
                  {NEWEST_USER}<br /><br />
                  {LOGGED_IN_USER_LIST}
              </span>
            </div>
        </td>
       
        <td width="50%" valign="top" align="center"  class="statistiques">
            <div class="BlocStats">
              <table class="DeBug">{L_CONNECTED_MEMBERS}</table>
            </div>
        </td>
      </tr>
  </table>
</div>
<!--
=================================
PERSONNALISATION DU QUI EST EN LIGNE (fin)
====================================
-->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

<a href="http://#" class="groupe1">« group 1</a>
            <a href="http://#" class="groupe2">« group 2</a>
            <a href="http://#" class="groupe3">« group 3</a>
            <a href="http://#" class="groupe4">« group 4</a>
            <a href="http://#" class="groupe5">« group 5</a>
            <a href="http://#" class="groupe6">« group 6</a>
            <a href="http://#" class="groupe7">« group 7</a>
            <a href="http://#" class="groupe8">« group 8</a>