/* couleurs du site: marron rgb(0,153,0), vert rgb(76,36,0) */

/*  FONT POUR LES ONGLETS LUCIDA BRIGHT    */

/* quelques mises au point au démarrage, pas de couleurs pour les liens, et déclarations des class */



body {
width:100%;
  font-family: Arial,Verdana,Helvetica,sans-serif;
}

{
  background-image: url("img/LogoFondC.jpg");
}


a {
  text-decoration: none;
}


a:hover {
  text-decoration: none;
  }

a:link
{
text-decoration: none;
}

.max {
  max-width: 100%;
}

.verde {
color:  rgb(0, 156, 0);
}

.ital {
font-style: italic;
}

.ramon {
color:  rgb(100,50,0); 
/* ex153, 71, 0); */
}

.grass{
font-weight: bold;
}

.gross
{
font-size: large;
}

.moyenn
{
font-size: medium;
}

.ptite
{
font-size: small;
}
.shadowVert 
{
text-shadow: 1px 1px rgb(0,179,0);
}

.motLink{
text-decoration-style:solid  ;
text-shadow: 1px 1px rgb(255,204,0);
}

.controls button {
  border: none;
  cursor: pointer;
  background: rgb(00,179,0);
/*  background-size: contain; */
/*  background-repeat: no-repeat; */
}

.bordureOmbre
{
box-shadow:12px 12px 0px 0px rgb(20,20,20);
}

.bordureOmbreBlanche
{
/* box-shadow:4px 4px 0px 0px rgb(250,250,250); */
text-decoration: underline white;
}

.surlignVert{
background-color: rgba(0,156,0,1);
}

.bordureOmbreVerte
{
box-shadow:2px 2px 2px 2px rgb(0,156,0);
}

.cadreTableau {
    border-style: inset; 
    border-width: 5px; 
    border-color: rgb (97,56,11);
}

/* ===================== l'ombre vert clair ===================  */
.nuageVert {
    background-color: rgb(209,242,235,0.8);  
    border-radius: 40px;
    /* box-shadow: 10px 10px 25px rgba(209,242,235, 0.9); */
    }

/*      =================== les pavés en vert de la radio et du slogan =================== */

#radio {
  border:5px solid rgb(00,179,0); 
  position: absolute;
  z-index: 2;
top: 24px;
 left: 400px;
 padding:1px;         /* c'était 0px */
 text-align: center; 
width: 380px; 
height: 61px;
background-color: rgb(0,153,0); 10px 
}
/* ============= la phrase du slogan ===========  */
#slogan {
  border:3px solid rgb(00,179,0); position: absolute;
  z-index: 1;
top: 85px;            /* c'était 90px */
  left: 440px;
text-align: center; 
width: 380px; 
height: 40px; 
padding:2px; 
/*  padding-bottom:0px; */
/*  padding-top:0px; */
background-color: rgb(0,153,0); 10px 
}

/* ============ le micro ===============  */
#micro {
position: fixed;
z-index: 3;
top: 80px; 
left: 850px;
}
/* ===================== le bouton radio ===============  */
#lector1 {
  border:3px none rgb(00,179,0); 
  position: absolute;
  z-index: 500;
top: 20px;         
left: 780px;
/* border-radius: 30px 30px 30px 30px;    */
}

/* ===================== le bouton radio ===============  */
#lector_Eng {
  border:3px none rgb(00,179,0); 
  position: absolute;
  z-index: 500;
/* EX  top: 20px;         
left: 250px; */
/* color:  rgb(0, 156, 0); */
top: 5px;         
left: 1100px; /* border-radius: 30px 30px 30px 30px;    */
}

/* ===================== le lecteur mp3 ===============  */
#lector {
position: absolute;
border:3px solid rgb(239,240,245); position: absolute;
z-index: 500;
top: 126px;            /*   */
left: 600px;
   border: 1px solid #FF0064;
   background-color: transparent;
   border-radius: 8px
/* border-radius: 30px 30px 30px 30px;  */
}

/* ===================== le pavé de la flèche Baoback ===================  */
#baoback {
 position: absolute;
 z-index: 99;
box-shadow: 8px 8px 10px 10px rgba(203,210,235,0.8);
left: 880px;
top: 197px;
} 

/* ===================== le pavé de la flèche Baoback2 ===================  */
#baoback2 {
 position: absolute;
 z-index: 99;
box-shadow: 8px 8px 10px 10px rgba(203,210,235,0.8);
left: 10px;
top: 20px;
} 
/* ===================== le pavé du flag ===================  */
#flag {
 position: absolute;
 z-index: 99;
 left: 190px;
 top: 145px;
 }

/* ===================== le pavé de la mise à jour  maj ===================  */

#maj {
 position: absolute;
 z-index: 99;
 left: 30px;
 top: 175px;
 width: auto;
font-size: 10px;
}

/* ===================== le pavé de la boite aux lettres   bal  ===================  */

#bal {
position:absolute;
z-index: 99;
left: 850px;
top: 28px;
font-size: 12px;
text-shadow: 1px 1px rgb(255,204,0);
padding:1px;
vertical-align: middle; 
/ * border-style-left: ;
border-width-left: 2px rgb(0,179,0);
border-style-: solid;
border-width-top: 2px;
border-color-top: rgb(0,179,0)
}

/* ===================== le pavé du Logo   ===================  */

#logo {
  position: absolute;
  z-index: 100;
  top: 10px;
  left: 35px;
  width: auto;
  height: auto;
  border-width:5px;
  border-style:solid;
  border-color:rgb(76,36,0);
}
	
/*  FONT POUR LES ONGLETS LUCIDA BRIGHT    */

/* ===================== le pavé qui contient les onglets pour choisir  =================== */

#onglets{
  position: absolute;
  z-index: 95;
  top: 195px;
  left: 20px;
  width: auto;
  height: 32px;
 
}


/* ======== le pavé des onglets Anglais actif ou pas  ===================  */
#EnglishTabs { 
  position: relative;
  z-index: 96;
  top: 1px;
  left: 354px;
  width: auto;
  height: 60%;
  /* border-width:2px;  */
  /* border-style:none; */
  /* vert */
  border-color:rgb(0,179,0);
  /* marron border-color:rgb(76,36,0); */
border-top-right-radius : 20px;
}


/*  =============== logo central ===================== */
#logoCentral {
  position: absolute;
  z-index: 100;
 /* top: 300px; */
 /* left: 250px; */
background-color: transparent;

}
/* ===================== le pavé qui contient les trois pavés de la UNE PROPORTIONNEs AU CONTENU ===================  */

#boit1{  
position:absolute;  
  z-index: 90;
top:228px;
left:20px; 
width: 100%;
height:auto;
background-color: rgb(231,255,235);
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;
padding:0px;
border-radius : 0px 10px 10px 10px;
border-style: solid;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de TITRE dans la boit1 ===================  */
.titre01 {

    font-size: 25px;
    /* background-color: rgb(232,240,249,0.8); */
    border-radius: 5px;
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5); 
    padding: 1px;
}

/* ===================== le pavé de TITRE plus petit dans la boit1 ===================  */

.titre02 {
    font-size: 18px;
/*    background-color: rgb(0,153,0,0.8); */
vertical-align: top;
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    padding: 1px;
}



/* ===================== le pavé de la colonne de gauche ===================  */

#paveMeteo{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding-right:50px;
padding-left:50px;
border-radius : 10px 10px 10px 10px;
border-style: none;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de la colonne du MILIEU ===================  */

#paveUne{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding-right:5px;
border-radius : 10px 10px 10px 10px;
border-style: none;
/* border-color: rgb(0, 153, 0); */
}

/* ===================== le pavé de la colonne du MILIEU ===================  */

#logoCentral{  
position:relative;  
top: 2px;
left: 10px; 
/* background-color: rgb(255,255,255) ; */
/* text-decoration-style:none; */
/* text-shadow: 1px 1px rgb(255,204,0); */
text-align: center;  
vertical-align: top; 
padding-right:15px;
padding-right:15px;
border-radius : 10px 40px 10px 40px;
border-style: none;
/* border-color: rgb(0, 153, 0); */
}
/* ===================== le pavé de la colonne de droite ===================  */

#pavePhoto{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding-right:50px;
padding-right:50px;
border-radius : 10px 10px 10px 10px;
border-style: none;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé qui contient les trois pavés  libres; , sans contour ===================  */

#boit2{  
position:absolute;  
width:100%;
top:450px;
left:4px; 
background-color: transparent ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-style: none;
}

/* ===================== le pavé de gauche ===================  */

#boit1g{  
position:relative;  
  z-index: 95;
top:2px; 
left:2px;
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: solid;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de la colonne du CENTRE ===================  */

#boit1c{  
position:relative;  
top:-15px; 
left:75px;
z-index: 30;
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: solid;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de la colonne de droite===================  */

#boit1d{  
position:relative;  
top:95px; 
left:110px;
z-index: 50;
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: solid;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de la colonne de droite sur la page d'accueil ===================  */

#englishside{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
vertical-align: top;
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: none;
border-color: rgb(0, 153, 0);
}

/* ===================== le pavé de la colonne de gauche sur la page d'accueil ===================  */

#moisencours{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: none;
border-color: rgb(0, 153, 0);
}

#moisprécédents{  
position:relative;  
top:2px;
left:2px; 
background-color: rgb(255,255,255) ;
text-decoration-style:none;
text-shadow: 1px 1px rgb(255,204,0);
text-align: center;  
padding:10px;
border-radius : 10px 10px 10px 10px;
border-style: none;
border-color: rgb(0, 153, 0);
}

/* =========== le pavé quand on travaille sur une page en construction NE PAS OUBLIER DE L'ACTIVER EN HTML !!!! ==========  */

#travo {
position:absolute;  
z-index: 90;
top:180px;
left:200px; 
background-color: transparent ;
text-align: center;  
padding:10px;
border-style: none;
}