display:inline-block;
  background:#FFFFFF; /* couleur de fond */
  border: 1px #D0D0D0 dotted; /* bordure : épaisseur couleur style */
  padding:2px 5px; /* espacement 'intérieur' haut/bas et droite/gauche */
  margin:4px 5px; /* espacement 'extérieur' haut/bas et droite/gauche */
  font-size:15px; /* taille du texte */
  font-weight: bold; /* épaisseur du texte */
  text-decoration: none !important; /* pas de soulignement */
  /* coins arrondis (tous navigateurs) */
  border-radius:5px;
  -moz-border-radius : 5px;
  -webkit-border-radius:5px;
  z-index: 999;

.forumline {
  background-color: transparent;
  background-image: url('ADRESSE VOTRE IMAGE INTERMEDIAIRE') center repeat-y;
  padding: QUELQUESpx; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/
  border: none;
}

<div class="ListeGroupes">
    <a class="groupe1" href="LIEN">Groupe 1</a>
    <a class="groupe2" href="LIEN">Groupe 2</a>
    <a class="groupe3" href="LIEN">Groupe 3</a>
</div>

9   div.infobulle:hover > div{
10     display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
11   
12     /* on positionne notre infobulle par rapport au bloc conteneur */
13     position: center;

28   .corbeille {
29       background-image: url('http://www.crystalxp.net/forum/mesimages/25505/Corbeille%20Pur%20Cristal%20P.png'); /*--- Image de la corbeille ---*/
30       background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
31       background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/

...

39   .rappel {
40       background-image: url('http://www.interencheres.com/medias/img_actu/cloche.png'); /*--- Image de la cloche ---*/
41       background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
42       background-position: center left; /*--- On positionne notre cloche au milieu à gauche ---*/

71   div.cssactif_fiche_header { /* En-tête avec image de fond */
72     background-repeat: none; /* Empêche la répétition de l'image du header */

275   .ajout_haut {
276     background-color: transparent;
277     background-image: url('http://i15.servimg.com/u/f15/17/99/57/17/haut10.png') center top no-repeat;
278     width: 900px;
279     height: 32px;
280     border: none;
281   }
282   
283   .ajout_bas {
284     background-color: transparent;
285     background-image: url('http://i15.servimg.com/u/f15/17/99/57/17/bas10.png') center top no-repeat;
286     width: 900px;
287     height: 32px;
288     border: none;
289   }

291   .forumline {
292     background-color: transparent;
293     background-image: url('ADRESSE VOTRE IMAGE INTERMEDIAIRE') center repeat-y;
294     padding: QUELQUESpx; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/
295     border: none;

body {
background-repeat: no-repeat;
background-position: -88px;
}

.mes-credits
{
    font-weight:normal;
    font-variant:small-caps;
    color:#000000;
    font-size:11px;
    text-align:center;
    font-family:arial, helvetica, sans-serif;
}

/*
=======================================================
MISE EN FORME DE LA BARRE HITSKINIENNE
=======================================================
DEBUT DU CODE
=======================================================
*/

.navi {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px double #FFFFFF;
    opacity: 1.0;
  -webkit-border-bottom-right-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -moz-border-radius-bottomleft: 40px;
}

.mainmenu {
    font-size: 12px;
    color: #FFFFFF;
}

a.mainmenu {
    text-decoration: none;
    color: #FFFFFF;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

a.mainmenu:hover {
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: 1px solid;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.fond-navi {
position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background-color: #BDBDBD;
  z-index:250;
  width: 100%;
  height : 25px;
  -webkit-border-bottom-right-radius: 40px;
  -webkit-border-bottom-left-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -moz-border-radius-bottomleft: 40px;
  opacity : 0.9
}
/*
=======================================================
MISE EN FORME DE LA BARRE HITSKINIENNE
=======================================================
FIN DU CODE
=======================================================
*/

/*
=======================================================
MISE EN FORME DE LA MENTION "SELECTIONNER LE CONTENU"
=======================================================
DEBUT DU CODE
=======================================================
*/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
/*
=======================================================
MISE EN FORME DE LA MENTION "SELECTIONNER LE CONTENU"
=======================================================
FIN DU CODE
=======================================================
*/



/*
=======================================================
MISE EN FORME DES INFOBULLES
=======================================================
DEBUT DU CODE
=======================================================
*/

div.infobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle > div{
  display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
  display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

  /* on positionne notre infobulle par rapport au bloc conteneur */
  position: center;
  top: 5px; /* 5px par rapport au haut du bloc .infobulle */
  left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

  /* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
  background: #ebebeb; /* arrière-plan de l'infobulle */
  color: black; /* texte dans l'infobulle */
  padding: 3px; /* marges internes par rapport aux bords */
  /* bordures de votre infobulle*/
  border: 1px dotted black;
}
/*
=======================================================
MISE EN FORME DES INFOBULLES
=======================================================
FIN DU CODE
=======================================================
*/

/*
MISE EN FORME DES TAGS DE MODERATION
*/
.corbeille {
    background-image: url('http://www.crystalxp.net/forum/mesimages/25505/Corbeille%20Pur%20Cristal%20P.png'); /*--- Image de la corbeille ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: left center; /*--- On positionne notre corbeille au milieu à gauche ---*/
    background-color: #FFFFFF; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
    padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/
    min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/
}

.rappel {
    background-image: url('http://www.interencheres.com/medias/img_actu/cloche.png'); /*--- Image de la cloche ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: left center; /*--- On positionne notre cloche au milieu à gauche ---*/
    background-color: #FE7700; /*--- Couleur de fond ---*/
    border: 1px solid #FE3B00; /*--- Taille, type et couleur de la bordure ---*/
    color: #FEFEFE; /*--- Couleur du texte ---*/
    padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/
    min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/
}

/* FIN 6//////////////////////////////////
MISE EN FORME DES TEGS
*/

/* ------------- FICHE PV-RPG
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_fiche, .cssactif_pv { /* Fond de la fiche */
  background-color: #1D1D1D; /* Couleur de fond */
 
 
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

 
  -webkit-box-shadow: 0 0 10px 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0 0 10px 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0 0 10px 0 #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
     
}

div.cssactif_fiche_header { /* En-tête avec image de fond */
  background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
  background-position: top center; /* Postionne l'image du header en haut, au center */

 
  height: 150px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande */
 
  border-bottom: 15px double #921628; /* Bordure au bas du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style)  */
 
 
  /* Bordures  supérieures arrondies (voir: http://border-radius.com/) */
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
}

td.cssactif_pv_header { /* En-tête avec image de fond */
  background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
  background-position: top center; /* Postionne l'image du header en haut, au center */

  width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
  height: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
 
  border-right: 15px double #921628; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style)  */
 
 
  /* Bordures  gauche arrondies (voir: http://border-radius.com/) */
  -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px; 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
  font-size: 10px; /* Taille du texte: TAILLEpx */
}

div.cssactif_pv_titre h1, div.cssactif_fiche_titre h1 { /* Titre prénoms & nom */

font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

  font-size: 32px; /* Taille du texte: TAILLEpx */
 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
 
  color: #d51731; /* Couleur du texte */
 
  margin: 0; /* Supprime la marge par défaut de l'élément h1 */
 
  text-align: right;  /* Aligne le titre à droite */
  text-transform: uppercase; /* Met le titre en majuscules */
 
}

div.cssactif_fiche_titre, div.cssactif_pv_titre { /* Titre + feat */
  /* Positionne le titre "à cheval" sur la bordure */
  position: relative;
  top: -28px;
 

  text-align: right;      /* Aligne le texte à droite */
 

  padding-right: 20px;    /* Défifine une marge interne */
  color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2, div.cssactif_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111;  /* Couleur du fond des sous-titres */
 border-color: #6a0e1b; /* Couleur de la bordure */
 border-width: 1px 0; /* Taille de la bordure: HAUT & BAS  GAUCHE & DROITE */
 border-style: solid; /* Style de la bordure */
 
    -webkit-box-shadow: 0 0 3 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0 0 3px 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0 0 3px 0 #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

  text-align: center;  /* Aligne le titre au centre */
  text-transform: uppercase; /* Met le titre en majuscules */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* Couleur du titre */
  margin: 0; /* Supprimer marge */
  font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
  font-weight: normal; /*Épaisseur du texte */
  text-shadow: 1px 1px 0 #000; /*Ombre du texte */
  letter-spacing: 5px; /* Espacement des caractères */
 
}

.cssactif_pv_content, .cssactif_fiche_content { /* Contenu */
 padding: 10px; /* Marge interne */
 text-align: justify; /* Justifie le texte */
 text-shadow: 1px 1px 0 #000; /*Ombre du texte */
}

.cssactif_pv em, .cssactif_fiche em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;
 
}


div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
  display: inline-block; /*Place les icones un à côté de l'autre */
  margin: 10px; /* marge entre les icones */
  border: 1px solid #333; /* bordure des icones */
 
  -webkit-box-shadow: 0 0 5px 0 #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0 0 5 0 #000000; /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0 0 5px 0 #000000;  /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
 height: 50px;
 width: 50px; 
}

div.infobulle div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;

  width: 300px; /* Largeur de l'infobulle */

  top: 50px; /* on positionne notre infobulle */
  left: 0;

  background-color: #1D1D1D; /* Couleur de fond */
 
 
  -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
  -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

 
  -webkit-box-shadow: 0 0 10px 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0 0 10px 0 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0 0 10px 0 #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #921628;
      padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV-RPG */

/*==========================================
Previsualisation 1er message
============================================
Debut du code
============================================
*/


.ps_info {
  width:700px;
  height:auto;
  background:white;
  color:black;
  font-size:14px;
  position:absolute;
  z-index: 999;
  display:none;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
  border-left:4px solid #00BFFF ;
  padding:5px;
  font-family:Arial,sans-serif;
}

/*==========================================
Previsualisation 1er message
============================================
Fin du code
============================================
*/

/******************************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS FORUMS EN COLONNE
-----------------------------------------
Code proposé sur CSSActif : http://www.css-actif.com
*[Début du CSS]****************************************************/

/* IMPORTANT : Ceci est la technique dite "clearfix" qui permet de forcer le conteneur des flottants à s'adapter à leur taille */
.BlocForum:after {
  display:table;
  content:"";
  clear:both;
}

/* Positionnement de la description des forums */
.DescForum {
  float:left; /* flottant à gauche */
  width:80%; /* largeur de 80% */
}

/* Positionnement de la liste des sous-forums */
.ListeSousForums {
  float:left; /* flottant à gauche */
  width:20%; /* largeur de 20% */
}




/* mise en page de la description des forums */
.DescForum > div {
  margin:2px 10px 2px 2px; /*marges extérieures, haut droite bas gauche*/
  background:#fff; /* couleur de fond */
  padding:5px; /* marges intérieures, entre le texte et le bord */
  text-align:justify; /* alignement du texte */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0 #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0 #000000;
}


.ListeSousForums a {
  display:block; /* on transforme les liens en blocs */
  background:#fff; /* couleur de fond */
  padding:2px 10px; /* marges internes haut/bas et droite/gauche */
  margin:2px 0; /*marges externes haut/bas et droite/gauche */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}

/*[fin du CSS]*****************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE
*******************************************************************/

/*mise en forme catégorie*/


.StatsForum {
  float:right;
  font-size:9px;
  padding:2px;
}

/*fin du code */


.ajout_haut {
  background-color: transparent;
  background-image: url('http://i15.servimg.com/u/f15/17/99/57/17/haut10.png');
  background-position : center top ;
  background-repeat : no-repeat;
  width: 900px;
  height: 32px;
  border: none;
}

.ajout_bas {
  background-color: transparent;
  background-image: url('http://i15.servimg.com/u/f15/17/99/57/17/bas10.png');
  background-position : center top ;
  background-repeat : no-repeat;
  width: 900px;
  height: 32px;
  border: none;
}


/*Fin mise en forme caté*/


/*
=========================================================
Catégorie : Survole
=========================================================
Début de code
=========================================================
*/

a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 2px dashed #3D403F;
color: #3D403F;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}

a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("http://data0.eklablog.fr/graphandastuce/mod_article49822196_5044da9200c0a.jpg?4022");
color: #3D403F;
text-align: center;
display: block;
border-bottom: 2px dashed #3D403F;
-moz-border-radius:12px;
}


/*
=========================================================
Catégorie : Survole
=========================================================
Fin de code
=========================================================
*/

/*
=========================================================
Page d'Acceuil
=========================================================
Début du code
=========================================================
*/
/* espace pour le menu*/
.space {
  width:6px;
  height:2px;
}
/* fin espace menu* /

/* staff presenté de manière simple avec uniquement une bordure */
.staff {
  width:200px;
  height:70px;
  padding:2px;
  border:1px solid #CABCAB;
}
/* fin staff */

/* top sites aux formes automatiquement arrondis */
.tops {
  width:60px;
  height:60px;
  border:2px dashed #3D403F;
  opacity:0.8;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-transform: rotate(2deg) ;
  -moz-transform: rotate(2deg) ;
  -o-transform: rotate(2deg) ;
  -ms-transform: rotate(2deg) ;
  transform: rotate(2deg) ;
}
/* fin top sites */

/* propriétés communes aux blocs */
.blocstaff,
.blocb,
.blocpoto,
.blocredit,
.blocnews,
.bloctop {
  text-align:justify;
  font-family : Comic Sans MS;
  font-size:11px;
  color:#3D403F;
  letter-spacing: 1px;
  padding:3px;
  background-color:#FFFFFF; 
  border-top:3px solid #3D403F;
  border-bottom:3px solid #3D403F;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -moz-box-shadow:white 1px 1px 0,0 0 3px #3D403F;
  -webkit-box-shadow:white 1px 1px 0,0 0 3px #3D403F;
  box-shadow:1px 1px 0 white,0 0 3px #3D403F;
}
/* fin propriétés communes */

/* bloc staff */
.blocstaff{
  width:230px;
  height:240px;
}
/* fin bloc staff */

/* bloc bienvenue*/
.blocb{
  width:340px;
  height:240px; 
}
/* fin bloc bienvenue */

/* bloc partenariat*/
.blocpoto{
  width:190px;
  height:240px;

}
/* fin bloc partenariat */

/* centre les logos partenaires */
.cpart {
  width:98%;
  height:150px;
  overflow:auto;
}
/* fin logo partenaires */

/* bloc crédit  */
.blocredit{
  width:230px;
  height:200px;
}
/* fin bloc crédit */

/* crédit texte */
.textc {
  font-size:10px;
}
/* fin crédit texte */

/* bloc nouveauté */
.blocnews {
  width:340px;
  height:200px;
}
/* fin bloc nouveauté  */

/* bloc topsites */
.bloctop {
  width:190px;
  height:200px;
}
/* fin bloc topsites */

/* centre logo tops*/
.ctop{
  width:98%;
  height:135px;
  overflow:auto;
}
/* fin centre logo tops */

/* les titres avec pour police Kite One */
.titrepa {
  font-family: 'Kite One', sans-serif;
  font-size:27px;
  color:#3D403F;
}
/* fin titre */

/* petits points sous les titres */
.yoo {
  border-bottom:1px dotted #3D403F;
}
/* fin points sous titres */

/* les liens rapides tout n haut de la PA */
.menu {
  color:#3D403F;
  letter-spacing: 1px;
  font-variant:small-caps;
  font-size:11px;
  padding:2px;
  padding-left:4px;
  padding-right:4px;
  background-color:#FFFFFF;
  border-left:3px solid #3D403F;
  border-right:3px solid #3D403F; 
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}
/* fin liens rapides */

/* les pointillés dérrière le menu à peut-être adapter selon le forum */
.point {
  border-top:6px dotted #3D403F;
  margin-bottom:-10px;
}
/* fin pointillés */

/* simple texte qui se trouve dans les tables pour ne pas deborder */
.textepa {
  width:90%;
  height:180px;
  overflow:auto;
}
/* fin texte */

/* les logos des partenaires dont l'opacité augmente au survol de la souris */
.potos {
  width:88px;
  height:31px; 
  opacity:0.5;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
}

.potos:hover {
  opacity:0.7;
}
/* fin logos partenaires */

/* description derrière la miniban */


.cate
{
  width: 200px;
  height: 70px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 200px;
  height: 70px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 200px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 200px;
  height: 70px;
  top: -70px;
  text-align: justify;
  font-size: 11px;
  color: #505B59;
  padding: 2px;
  overflow: auto;
}
/*
==========================================================
Page d'acceuil
==========================================================
Fin de page
==========================================================
*/

/*
==========================================================
Connexion Rapide
==========================================================
Début du code
==========================================================
*/

/* FORMULAIRE DE CONNEXION RAPIDE AMÉLIORÉ de ORANGE pour CSSACTIF (css-actif.com) */



.cssactif_connexrapide {
  /* Style général: à modifier à votre guise ! */
  background:url(http://img651.imageshack.us/img651/6771/keychainn.png) no-repeat left center
    #3D403F; /* Ajoute une icône de fond no-répétée à gauche et une couleur de fond */
    padding-left: 48px; /* Donne la marge pour l'icône de fond */
  border: 1px solid #3D403F; /* Bordure du formulaire */
  margin: 5px; /* Espacement entre le formulaire et le contenu voisin */
  /*Arrondissement des bordures */
  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

/* Ombre portée de la boîte */
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
 
  /* Style du texte intérieur */
  font-size: 12px;
  color: #FFFFFF;

 
}

.cssactif_connexrapide_form { /* Correspond à la cellule qui contient le formulaire comme tel */
 text-align: center;
   
}
.cssactif_connexrapide_form input.post{ /* Correspond aux entrées de texte qui contiennent les informations de connexion */
 margin-bottom: 3px; /* Marge qui empêche que les champs de se toucher  */
 
 /* Style des entrées: à modifier à votre guise ! */
 background-color: #3D403F;
 border: 1px solid #3D403F;
 padding: 3px;
 
 -webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 #3D403F;
-moz-box-shadow: 0 1px 0 0 #3D403F;
box-shadow: 0 1px 0 0 #3D403F;
font-size: 11px;
color: #FFFFFF;
}

.cssactif_connexrapide_form input.mainoption{ /* Correspond au bouton "Connexion" */
 
    /* Style du bouton: à modifier à votre guise ! */
  background-color: #3D403F;
 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

 
  border: none;
  border-bottom: 2px solid #3D403F;
 
}

.cssactif_connexrapide_form input.mainoption:active { /* Correspond au bouton "Connexion" lors du clic */

    /* Style du bouton lors du clic: à modifier à votre guise ! */

border: none;
border-top:  2px solid #3D403F;
}

/*
==============================================================
CONNEXION RAPIDE AMÉLIORÉ
==============================================================
Fin du code
==============================================================
*/


  /*------------------------------------
Template QEEL par 'Christa Lostmindy
Distribution autorisée sur :
  L'Enae Volare    : http://enaevolare.lostmindy.fr
  CSSActif      : http://www.css-actif.com/
  l'Annuaire FdF  : http://www.forumsdeforumactif.com/
----
Utilisation personnelle et non commerciale autorisée
Modification autorisée
Redistribution strictement interdite
----
Il est strictement interdit de retirer
les crédits présents dans ce code.
--------------------------------------*/
/****************************************
/* MISE EN FORME GENERALE
/****************************************/
/* mise en page générale */
#tableauQeel {
  width: 100%;
  padding: 4px;
  margin: 0 auto;
  color: #000000;
  font-size: 12px;
}
/* Liens statistiques */
.liensStats {
  margin: 5px 0;
}
.liensStats a:link {
  color: #3333cc;
}
.liensStats a:hover,
.liensStats a:active,
.liensStats a:focus {
  color: #990000;
}
.liensStats a:visited {
  color: #3333cc;
}
/* largeur bloc contenant l'image du QEEL*/
.imgOnline {
  min-width: 200px;
}
/* espacement entre certains blocs */
.espace {
  padding: 3px;
}
/* taille des cellules de tableau */
#tabBlocStats,
#tabBlocGroupes {
  width: 50%;
}
#blocStats {
  width: auto;
}
#blocGroupes {
  width: auto;
}
/*********************************
/*  TITRES DU QEEL
/*********************************/
#tableauQeel h2 {
  display: inline-block;
  font-family: "Courier New", Courier, monospace, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  text-shadow: 0.1em 0.1em 0.2em #000000;
  margin-top: 4px;
  margin-bottom: 0px;
  padding: 4px 10px;
  background-color: #d1d7dc;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;

  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;

}
#tableauQeel h2:before {
  content: "► ";
  color: #000000;
}
#tableauQeel h2:after {
  content: " ◄";
  color: #000000;
}
/*************************************
/* MISE EN FORME DES BOITES DE CONTENU
/************************************* */
.contenuQeel {
  background-color: #d1d7dc;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 4px;
  margin: 2px;
  font-size: 10px;
}
.noSpaceTitre {
  margin-top: 0;
}
.liste24h {
  text-align: center;
}
.deBug td {
  background-color: #d1d7dc;
}
/* Ce css permet d'avoir les deux premières boites (statistiques et légendes)
à la même taille en hauteur */
.hauteurFixe {
  height: 45px;
  overflow: auto;
}
/*************************************
/* MISE EN FORME LISTE DES GROUPES
/************************************* */
.qeel-groupes {
  font-size: 0px;
  line-height: 0;
  text-align: center;
}
.qeel-groupes a {
  font-size: 12px;
  line-height: normal;
  display: inline-block;
  padding: 2px 5px;
  margin: 1px 4px;
  font-variant: small-caps;
  font-weight: bold;
  background: transparent;
}
/********************************
/* Affichage des crédits
/********************************/
.lostCredits {
  color: #999999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 2px 4px;
  background: transparent;
  font-weight: bold;
}
.bulleCredits {
  position: relative;
  cursor: pointer;
  color: #ffffff;
  background: #990000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 1px 4px;
}
.bulleCredits  > span {
  position: absolute;
  display: block;
  bottom: 150%;
  left: -20%;
  width: 150px;
  background: #000000;
  color: #ffffff;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  transform: scale(0) rotate(12deg);
}
.bulleCredits  > span:after {
  display: block;
  content: " ";
  width: 0;
  border-width: 8px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
  bottom: -8px;
  left: 5px;
}
.bulleCredits:hover  > span,
.bulleCredits:focus  > span {
  z-index: 500;
  opacity: 1;
  transform: scale(1) rotate(0);
  cursor: default;
}
/*------------------------------------
Template QEEL par 'Christa Lostmindy
http://enaevolare.lostmindy.net
[FIN]
--------------------------------------*/