/*
  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: #009834;
  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: #009834;
  font-size: 150%;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}
/* H3: Petits titres verts dans les pages */
h3 {
  color: #009834;
  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:#007A2C; 
  text-decoration: underline;          /* Souligné */
}
/* A:HOVER : style à donner par défaut lors du passage sur un lien actif */
a:hover {
  text-decoration: underline;          /* Souligné */
}
/* TD : format des cellules de tableau */
td {
//  line-height :1.3em;
  padding-top : 3px;
  padding-bottom : 3px;
}
/*=============================================================================
    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: #A0E0A0;
}
/* 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: #A0E0A0;
}
/* #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:#009834;
}
/* #SIDE : toute la colonne de gauche (incluant le menu) */
#side {
  background-color:#009834;
}
/* #SIDE : toute la colonne de gauche (incluant le menu) */
#side_adm {
  background-color:#A04040;
}
/* #PNL5 : Correspond à toute la zone (image glissante et menu déroulant) en haut en mode non connecté */
#pnl5 { 
  background-color:#A0E0A0;
}
/* #MENUL : Colonne entière du Menu latéral gauche */
#menul {
  background-color:#009834;
}
/* #MENU_RESP : Correspond à l'appel du menu lorsque la largeur est faible */
#menu_resp{
  background-color:#A0E0A0;
  }
/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site */
#pg_Lien_ZITEplus {
  background-color:#C0FFC8;
}
/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site : Couleur des liens actifs*/
#pg_Lien_ZITEplus a {
  color:#009834;
}
/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site */
#pg_Lien_Zite_menu {
  background-color:#009834;
}
/* #PG_LIEN_ZITEPLUS : Page des liens avec les auteurs du site : Couleur des liens actifs*/
#pg_Lien_Zite_menu a {
  color:#FFFFFF;
}
/* #TBLCT : Listes sous forme de table pour toutes les données issues de la base de données*/
#tblct {
//  background-color:  #80FFA0;
}                  
#menuh dl, #menuh dt {
}
#menuh dd, #menuh ul {
}
#menuh td {
  padding-left: 2px;
  padding-right: 2px;
}
/* #MENUH DT : Niveau 1 du Menu déroulant (mode non connecté) */
#menuh dt {
  background-color: #009834;
  color: #FFFFFF;
}
/* DT A : si c'est un lien */
 dt a {
  padding-left: 10px;
  padding-right: 10px;
  color: #FFFFFF;
  font-weight: bold;
  background-color: #009834;
  color: #FFFFFF;
}
/* DT A:HOVER : Quand la souris passe dessus */
#menuh dt a:hover {
  background-color: #C0F0C0;
  color: #000000;
}
/* LI : Niveaus 2, 3 et 4 */
#menuh li {
text-align: center;
background-color: #30C050;
color: #FFFFFF;
}
#menuh li a  {
  padding-left: 5px;
  padding-right: 5px;
  background-color: #30C050;
  color: #FFFFFF;
}                     
#menuh li a:hover {
  background-color: #C0F0C0;
  color: #000000;
}
/* Les contenu des pages des as de l apage d'accueil */
#aspique {   background-color:#D0D0D0; }
#ascoeur {   background-color:#FFC0B0; }
#ascarreau { background-color:#FFD080; }
#astrefle {  background-color:#A0FFA0; }
/*=============================================================================
    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:#A0E0A0 ;
  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;  
}
/* taille des caractères pour l'affichage du plannng */
.planning {
  font-size: 90%;
}
/* ZUL ... et tout ce qui suit : Menu vertical */
.zul {
  color: #FFFFFF;
  font-size: 110%;
}
.zul a {
  text-decoration: none;          // pas de soulignement
  color:#FFFFFF;
}
.zul a:hover {
  color:#000000;
  background-color:#A0E0A0;
}
/* Eléments de menu */
/* décalages des 4 niveaux de menu */
.zli1 {
  padding-left: 10px;
  color: #000000;
  line-height: 1.6em;
}
.zli2 {
  font-size: 95%;
  padding-left: 20px;
  line-height: 1.5em;
  color: #000000;
}
.zli3 {
  font-size: 90%;
  padding-left: 30px;
  line-height: 1.5em;
  color: #000000;
}
.zli4 {
  font-size: 85%;
  padding-left:40px;
  line-height: 1.5em;
  color: #000000;
}
.zon {
  font-weight: bold;  /**/
  background-color:#007227 ;
}
/* EVENCOLOR : Couleur et hauteur des lignes paires */
.evencolor {
  line-height: 1.6em;
  background-color: #E8FFF0;
}
/*ODDCOLOR :  Couleur et hauteur des lignes impaires */
.oddcolor {
  line-height: 1.6em;
  background-color: #C0FFD8;
}
/* PLANNINGCOLOR : Couleur du planning */
.planningcolor {
  line-height: 1.5em;
  background-color: #C0FFD8;
}
/* HEADERCOLOR : Couleur des entêtes de listes en table */
.headercolor {
  background-color:  #60FF88;
}
.headcolor {
  background-color:  #A0FFB8;
}
.backcolor {
  background-color: #ffffff;
}
/* FREEDAY : Jour de la semaine qui n'appartient pas au mois courant dans le planning */
.freeday {
  background-color: #E1FFEC;
  border-left : 0;
}
/* FERIE : Couleur de fond pour les jours déclarés fériés dane le planning */
.ferie {
  background-color: #A0A0A0;
  text-align:center;
}
/* HEADERBLACK : ligne mois et année dans les plannings */
.headerblack {
  font-size: 160%;
  background-color:  #009834;
  color: #FFFFFF;
  font-style: italic;
  vertical-align: middle;
  font-weight: bold;
}
/* NOUVEAU : déclaration de nouvel adhérent dans la liste des adhérents */
.nouveau {
  background-color: #80FFA0;
}
/*  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; }
.rose   {   background-color:  #ffC0C0;   border-bottom: 1px solid #ff8080;  }
.rouge{     background-color:  #ff0000;
            color: #ffffff;
            font-weight: bold; }
.noir{      background-color:  #000000;
            color: #ffffff;
            font-weight: bold; }
.brouge  {  border: 1px solid #FF2020; background-color: #FFBBBB;}
.bvert   {  border: 1px solid #20CC20; background-color: #AAFFAA;}
.bbleu   {  border: 1px solid #4040FF; background-color: #CCCCFF;}
.borange {  border: 1px solid #CC8000; background-color: #FFDDAA;}
.bjaune  {  border: 1px solid #808000; background-color: #FFFF80;}
.bgris:hover  { color: #ffffff; background-color: #808080;} 
.brouge:hover { color: #ffffff; background-color: #800000;} 
.bvert:hover  { color: #ffffff; background-color: #008000;}
.bbleu:hover  { color: #ffffff; background-color: #0000C0;}
.borange:hover{ color: #ffffff; background-color: #806000;}
.bjaune:hover { color: #ffffff; background-color: #808000;}
.mbleu   {  border: 1px solid #4040FF; background-color: #EEEEFF;}