/*
  Les couleurs se codent en 3 octets en hexadécimal    ( base 16 :  0 1 2 3 4 5 6 7 8 9 A B C D E F )
  Chaque octet est codé de 00 à FF
  Les octets sont placés dans l'ordre ROUGE, VERT, BLEU
  #000000  noir
  #FF0000  rouge
  #00FF00  vert
  #0000FF  bleu
  #FFFFFF  blanc

mais aussi : 
  #FFFF00  jaune
  #FF8000  orange
  #404040  gris sombre
  #808080  Gris moyen 
  #C0C0C0  Gris clair
  
et toutes les nuances soit 256 * 256 * 256 ... environ 16 millions de couleurs possibles

les ordres : 3 types : 
   xxxxx   ( exemple : body , table, ...)  correspondent aux balises html 
   .xxxxx  ( exemple : .error .table-responsive, ... ) correspondent à des classes affectées à des balises   
   #xxxxx  ( exemple : #entete, #mid ) Correspondnent aux balises html uniques et nommées 

A ces types de lien on paut ajouter (éparé par des espaces :     
   a       correspond aux paramètres à donner quand c'est un lien
   a:hover correspond aux paramètres à donner quand la souris passe au-dessus
   
On peut aussi spécifier l'application de A, A:hover à une classe ou un élément d'une classe : exemples :

  #toto table tr td a:hover   ==> ne s'applique qu"aux cellules des tables si on est dans l'élément #toto  
  .tata table tr td a:hover   ==> ne s'applique qu"aux cellules des tables si on est dans un éléments de classe tata  

2 paramètres séparés par une virgule (exemple :  tr, td  ... le style affecté sera le même pour les 2
2 paramètres séparés par un blanc ( exemple :  .error td ) le style ne sera affecté qu'aux éléments td de .error

Pour la syntaxe, voyez les exemples   
*/

/*=============================================================================
    BALISES HTML 
=============================================================================*/

html { 
  font-family: Trebuchet MS, Arial, Verdana, Geneva, Arial, helvetica, sans-serif;
// Cette taille est la taille par défaut ... 
// toutes les autres tailles sont notées en % par rapport à la taille par défaut
  font-size: 12px;
}  

 /* BODY : paramètres utilisés par défaut partout ou ils ne sont pas spécifiés */
body {
  color: #000000;
  background-color: #FFFFFF ;
}

/* LI : Style par défaut pour les lignes des listes à puce */
li { 
}

ul {
}

/* H1: Gros titres verts centrés dans les pages */
h1 {
  color: #000000;
  font-size: 260%;
  text-align: center;
  margin-top: 0.2em;
  margin-bottom: 0.8em;
  text-transform:uppercase;
}

/* H2: Moyens titres verts dans les pages */
h2 {
  color: #000000;
  font-size: 150%;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

/* H3: Petits titres verts dans les pages */
h3 {
  color: #000000;
  font-size: 110%;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

/* H4: Gros titres rouges centrés dans les pages */
h4 {
  font-size: 200%;
  color:#FF4040;
  text-align: center;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

/* H5: Moyens titres rouges dans les pages */
h5 {
  font-size: 130%;
  color:#FF4040;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

/* H6: Petits titres rouges dans les pages */
h6 {
  color:#FF4040;
  font-size: 110%;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

/* P : style à donner par défaut à tous les paragraphes de texte */
p {
  color:#000000;
}

/* A : style à donner par défaut à tous les liens actifs */
a {
  color:#000000; 
  text-decoration: underline;          /* Souligné */
}

/* A:HOVER : style à donner par défaut lors du passage sur un lien actif */
a:hover {
  text-decoration: underline;          /* Souligné */
  color: #FF0000;
}

/* TD : format des cellules de tableau */
td {
}

/*=============================================================================
    ELEMENTS DESIGNES DIRECTEMENT EXPLOITABLES PAR LE JAVASCRIPT
=============================================================================*/

/* #TOP : utilisé en tête de page lorsque la largeur est faible et que le menu doit être appelé en cliquant en haut à gauche */
#top {
  background-color: #80563C;
}

/* ENTETE : utilisé en tête de page (là ou il y a les boutons) par toutes les pages qui commencent par  "pof" */
#entete {
  background-color: #C0B8B0;
}

/* #MID : utilisé en mode connecté pour les pages affichées */
#mid {
}

/* #ALL : utilisé en mode NON connecté pour les pages affichées */
#all {
}

/* #POFMID : utilisé en mode connecté pour les pages affichées qui commencent par "pof" */
#pofmid {
}

/* #BOT : Utilisé en bas de page (lien vers les développeurs du menu de gauche) */
#bot {
  background-color:#C0B8B0;
}

/* #SIDE : toute la colonne de gauche (incluant le menu) */
#side {
  background-color:#80563C;
}

/* #PNL5 : Correspond à toute la zone (image glissante et menu déroulant) en haut en mode non connecté */
#pnl5 { 
  background-color:#80563C;
}
/* #MENUL : Colonne entière du Menu latéral gauche */
#menul {
  background-color:#80563C;
}
/* #MENU_RESP : Correspond à l'appel du menu lorsque la largeur est faible */
#menu_resp{
  background-color:#C0B8B0;
  }

/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site */
#pg_Lien_ZITEplus {
  background-color:#E0D8D0;
}

/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site : Couleur des liens actifs*/
#pg_Lien_ZITEplus a {
  color:#008040;
}

#menuh dl, #menuh dd, #menuh ul {
  background-color: #CF8861;
}
/* #MENUH DT : Niveau 1 du Menu déroulant (mode non connecté) */
#menuh dt {
  color: #FFFFFF;
  background-color: #CF8861
}
/* DT A : si c'est un lien */
#menuh dt a {
  font-weight: bold;
  background-color: #80563C;
  color: #FFFFFF;
}
/* DT A:HOVER : Quand la souris passe dessus */
#menuh dt a:hover {
  background-color: #E0D8D0;
  color: #000000;
}
#menuh dt:hover {
  background-color: #E0D8D0;
  color: #80563C;
}
#menuh td {
  color: #FFFFFF;
}
/* LI : Niveaus 2, 3 et 4 */
#menuh li {
text-align: center;
background-color: #80563C;
color: #FFFFFF;
}
#menuh li a  {
  background-color: #80563C;
  color: #FFFFFF;
}                     
#menuh li a:hover {
  background-color: #E0D8D0;
  color: #000000;
}

#petitmenu {
  background: #A66D4E;
}

/*=============================================================================
    CLASSES
=============================================================================*/

/* TITRE 1 : Utilisé pour les très gros titres*/
.titre1 {
  font-size: 150%;
  font-weight: bold;
}
/* TITRE 2 : Utilisé pour les gros titres*/
.titre2 {
  font-size: 130%;
  font-weight: bold;
}
/* TITRE 3 : Utilisé pour les moyens titres*/
.titre3 {
  font-size: 120%;
  font-weight: bold;
}
/* TITRE 4 : Utilisé pour les titres normaux*/
.titre4 {
  font-size: 110%;
  font-weight: bold;
}
/* COUCHE3 : cadre du bouton "espace adhetents*/
.couche3 {
//  background-color:#FFFFFF ;
}
/* COUCHE3 A : lien du cadre du bouton "espace adhetents*/
.couche3 a {
  color: #000000;
}

.err_login {
  background-color: #ffC0C0;
  color: #800000;  
  }  

/* COUCHE4 : texte du bouton "Espaces adhérents*/
.couche4 {
  background-color:#FFFFFF ;
}
/* BIENVENUE : Fenêtre de login */
.bienvenue_l, .bienvenue{
  background-color:#E0D8D0 ;
  color:#000000;
}
/* BIENVENUE : Lien */
.bienvenue_l a, .bienvenue a{
 color:#000000;
}

/* tout ce qui concerne les menus */
.zul {
  color: #FFFFFF;
}
.zul a {
  color:#FFFFFF;
}
.zul a:hover {
  color:#000000;
  background-color:#E0D8D0;
}
/* Eléments de menu */
/* décalages des 4 niveaux de menu */
.zli1 {
  color: #000000;
}
.zli2 {
  color: #000000;
}
.zli3 {
  color: #000000;
}
.zli4 {
  color: #000000;
}
.zon {                     
   color: #000000;
   background-color:#C0B8B0 ;
}
/* BIENVENUE : passage de la souris*/
.bienvenue_l a:hover, .bienvenue a:hover{
 color:#000000;
 background-color:#FFFFFF;
}
/* BIENVENUE : Paragraphe */
.bienvenue_l p, .bienvenue p{
 color:#000000;  
}

/* EVENCOLOR : Couleur et hauteur des lignes paires */
.evencolor {
  line-height: 1.6em;
  background-color: #E0DCD4;
}
/*ODDCOLOR :  Couleur et hauteur des lignes impaires */
.oddcolor {
  line-height: 1.6em;
  background-color: #F0EEEA;
}

/*BACKCOLOR :  Couleur de fond */
.backcolor {
  background-color:#FAF8F4;
}
/*HEADCOLOR :  Couleur des entêtes de tableau*/
.headcolor {
  background-color:#C0B8B0;
}
/*  Définition des classes de couleur .... */ 
.yellow {   background-color:  #ffff80; }
.aqua {     background-color:  #bbbbff; }
.purple {   background-color:  #F0A0F0; }
.grey {     background-color:  #D0D0D0; }
.darkgrey { background-color:  #808080; }
.lime {     background-color:  #90ff90; }
.orange {   background-color:  #ffcc00; }
.fushia {   background-color:  #ffa0a0; }
.rouge{     background-color:  #ff0000;
            color: #ffffff;
            font-weight: bold; }
.noir{      background-color:  #000000;
            color: #ffffff;
            font-weight: bold; }

/* BIENVENUE : Fenêtre de login */
.bienvenue_l, .bienvenue{
  background-color:#C0B8B0 ;
  color:#000000;
}
/* BIENVENUE : Lien */
.bienvenue_l a, .bienvenue a{
 color:#000000;
}
/* BIENVENUE : passage de la souris*/
.bienvenue_l a:hover, .bienvenue a:hover{
 color:#000000;
 background-color:#FFFFFF;
}
/* BIENVENUE : Paragraphe */
.bienvenue_l p, .bienvenue p{
 color:#000000;  
}

.brouge  {  border: 3px solid #FF2020; background-color: #FFBBBB;}
.bjaune  {  border: 3px solid #FFFF00; background-color: #FFFF80;}
.bvert   {  border: 3px solid #20CC20; background-color: #AAFFAA;}
.bbleu   {  border: 3px solid #4040FF; background-color: #CCCCFF;}
.borange {  border: 3px solid #FFAA00; background-color: #FFDDAA;}
.brouge:hover { color: #ffffff; background-color: #800000;} 
.bjaune:hover { color: #ffffff; background-color: #707000;} 
.bvert:hover  { color: #ffffff; background-color: #008000;}
.bbleu:hover  { color: #ffffff; background-color: #0000C0;}
.borange:hover{ color: #ffffff; background-color: #806000;}