body /* On travaille sur la balise body, donc sur TOUTE la page */
{
	/*padding : marge intérieure*/
	/*margin : marge extérieure*/
	width: 1010px; /* design taille fixe*/
	margin: auto; /* Pour centrer notre page */
	margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur*/
	margin-bottom: 10px; /* Idem pour le bas du navigateur */

	background: linear-gradient(to bottom left, #C0CFB2 10%, #8BA989 80%);/*rgb(216,191,216); /* Une image de fond  */
	font-family: arial,helvetica,sans-serif;
	font-size: 80%;
	/*mauve très foncé rgb(119,22,83);*/
	/*mauve foncé rgb(147,36,111);*/
	/* mauve soutenu rgb(205,162,184);*/
	 /* mauve rgb(216,191,216); */
	/*mauve light rgb(212,176,195);*/
	/*mauve très claire rgb(242,227,237);*/
	/*vert très foncé #557c5f*/
	/*vert foncé #6e946c*/
	/*vert claire #8BA989*/
	/* gris bleu soutenu #666699*/
}
#Feuille/* "id=" */
{
	/*background: url("../images/Saint_Louis_Bg.jpg") fixed; /* Une image de fond ATTENTION: annulée par renommage de l'image dans le répertoire */
	padding: 4px;
	padding-top: 1px;
}
#Entete
{	
	margin-bottom: 2px;
}
#Entete h1
{
	color: rgb(255,20,147);/*rose*/
	font-size: 90%;
	border-bottom: 1px black solid;
	margin-bottom: 1px;
}
.titre/* "class=" */
{
	padding: Opx;
	margin: Opx;
	font-size: 90%;
	color: white;
	background-color: rgb(147,36,111);/*mauve foncé*/
	border-bottom: 4px solid rgb(242,227,237);/*mauve très claire*/
	font-weight: bold;
}
#Menu
{
	float: left; /* Le menu flottera à gauche */
	width: 180px; /* Très important : donner une taille au menu */
}
.SousMenu0
{
	margin: 0px; /* Pour éviter que les éléments du menu ne soient trop collés: sert pour le premier titre niveau 1 de menus avec gif*/
}
/*.tchat
{
   font-size: 90%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   font-weight: bold;
   text-align: left;
}*/
.zoneConnecte
{
	width:100px;
	font-size: 90%;
	font-family: "Comic Sans MS","Trebuchet MS",Times,"Times New Roman", serif;
	text-align:left;
	text-transform: none;
}
.zoneChat
{
   font-size: 90%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;/*arial,helvetica,sans-serif;*/
   text-align: left;
   Height:200px;
   font-weight: bold;
   border: 1px solid rgb(205,162,184); /*Bordure mauve soutenu*/
   border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
   border-right: solid 1px rgb(212,176,195);/*mauve light*/
   padding:2px;
   background-color:white;
   overflow:auto;
}
.SousMenu0 h2 /* le premier titre niveau 1 de menus avec gif*/
{    
	color: rgb(255,20,147);/*rose*/
	font-family: arial,helvetica,sans-serif;
	text-align: left;
	font-size: 110%;
	text-transform: uppercase;
	margin: 0px;
	margin-bottom: 1px;
}
.SousMenu0 h1 /* Tous les titres niveau 1 de menus */
{    
	color: rgb(255,20,147);/*rose*/
	font-family: arial,helvetica,sans-serif;
	text-align: left;
	font-size: 110%;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.SousMenu1
{
	margin: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.SousMenu1 h1 /* Tous les titres niveau 1 de menus */
{    
	color: rgb(255,20,147);/*rose*/
	font-family: arial,helvetica,sans-serif;
	text-align: left;
	font-size: 110%;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.SousMenu1 h2 /* Tous les titres niveau 2 de menus */
{
	font-size: 90%;
	border: 1px solid rgb(205,162,184); /*Bordure mauve soutenu*/
	border-bottom: solid 1px rgb(119,22,83);/*bord mauve très foncé >>> old rgb(212,176,195) mauve light*/
	border-right: solid 1px rgb(119,22,83);/*bord mauve très foncé >>> old rgb(212,176,195) mauve light*/
	Width: 160px;
	Height: 20px;
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	padding-left: 3px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 3 pixels */
	margin: 0px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-left: 10px; /* on modifie ensuite margin-left à 10px */
	margin-bottom: 5px; /* et margin-bottom à 5px */
	background: rgb(147,36,111);/*mauve foncé*/
	color: white;
	text-decoration: none;
}

.SousMenu1 ul /* Toutes les listes à puces se trouvant dans un sous menu */
{
	list-style-type: none; /* On enlève l'apparence des puces */
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	padding-left: 10px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
	margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
    font-size: 90%;
}
.SousMenu1 a /* Tous les liens se trouvant dans un menu */
{
	display: block;
	border: 1px solid rgb(255,255,255); /*Bordure blanche*/
	border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
	border-right: solid 1px rgb(212,176,195);/*mauve light*/
	width: 160px;
	height: 20px;
	padding-top : 3px; /* la marge du haut =  3 pixels  */
	padding-left: 3px; /* la marge de gauche = 3 pixels */
	margin: 0px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-top: 5px; /* on modifie ensuite juste margin-top*/
	margin-bottom: 5px; /* on modifie ensuite juste margin-bottom, les autres sont à 0px */
	background: rgb(242,227,237);/*mauve très claire*/
	color: black;
	text-decoration: none;
}
.SousMenu1 a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: black;
   color: white;
   text-decoration: none;
}
.MenuSpec a /* lien plus court pour un lien pdf dans un menu */
{
    font-size: 75%;
	width: 148px;
	margin-top: -3px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-left: 8px; /* on modifie ensuite juste margin-top*/
}
.MenuSpec2 a /* lien plus court pour un lien pdf dans un menu */
{
	border-left:0px;
    width: 7px;
	margin-left: -4px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-top: -3px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
}
.MenuNew a /* Tous les liens se trouvant dans un menu et étant nouveau*/
{
	height: 23px;
	padding-top : 1px; /* la marge du haut =  3 pixels  */
	padding-bottom : 1px; /* la marge du haut =  3 pixels  */
	margin-top: 0px; /* on modifie ensuite juste margin-top*/
}
.MenuNew a:hover /* Quand on pointe sur un lien du menu */
{
	height: 23px;
	padding-top : 1px; /* la marge du haut =  3 pixels  */
	padding-bottom : 1px; /* la marge du haut =  3 pixels  */
	margin-top: 0px; /* on modifie ensuite juste margin-top*/
}

.lienSelect a ,.lienSelect a:hover
{
	display: block;
	border: 1px solid rgb(255,255,255); /*Bordure du tableau  blanc*/
	border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
	border-right: solid 1px rgb(212,176,195);/*mauve light*/
	width: 160px;
	height: 20px;
	padding-top : 3px; /* la marge intérieure du haut =  3 pixels  */
	padding-left: 3px; /* la marge de gauche = 3 pixels */
	margin: 0px; /*  marge extérieure - 0px évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-top: 5px; /* on modifie ensuite juste margin-top*/
	margin-bottom: 5px; /* on modifie ensuite juste margin-bottom, les autres sont à 0px */
	background-color: black;
	color: white;
	text-decoration: none;
}
.liensNiv2
{
	font-size: 100%;
	padding-left: 10px; 
}
.liensNiv2 a
{
	color: rgb(255,102,0);/*orange*/
}
.Ident /* Zone de saisie de mot de passe */
{
	Width: 155px; /* dépend de la taille des champs input qu'il contient également*/
	border: 0px; /*  évite d'avoir à en écrire 4 */
	border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
	border-right: solid 1px rgb(212,176,195);/*mauve light*/
	padding-top : 3px; /* la marge intérieure du haut =  3 pixels  */
	padding-left: 3px; /* la marge de gauche = 3 pixels */
	margin: 0px; /*  marge extérieure */
	margin-top: 5px; /* on modifie ensuite juste margin-top*/
	margin-bottom: 5px; /* on modifie ensuite juste margin-bottom, les autres sont à 0px */
	background: rgb(242,227,237);/*mauve très claire*/
	color: black;
	text-decoration: none;
}
#Corps
{
	margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	margin-bottom: 50px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
.modifydate
{	
	font-size: 75%;
	background: rgb(242,227,237);/*mauve très claire*/
	color: rgb(147,36,111);/*mauve foncé*/
}
.modifydateA
{	
	font-size: 75%;
	color: rgb(255,102,0);/*orange*/
}
#Corps h1/* balise titre de niveau 1 pour la zone corps */
{
	font-size: 160%;
	color: rgb(255,102,0);/*orange*/
	font-family: arial,helvetica,sans-serif;
	font-weight: bold;
	margin-bottom: 7px;
}
#Corps h2/* balise titre de niveau 1 CENTRE pour la zone corps */
{
	font-size: 140%;
	color: rgb(255,102,0);/*orange*/
	font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
    font-weight: bold;
	text-align: center;
	margin-bottom: 7px;
}
#Corps h3/* balise titre de niveau 2 pour la zone corps */
{
	margin: 3pt 0cm;
	text-align: left;
	font-size: 120%;
	font-weight: bold;
	font-style: italic;
}
#Corps h5/* balise description chemin page pour la zone corps */
{
	padding: 5px;
	color: white;
	background-color: rgb(147,36,111);/*mauve foncé*/
	margin-top: 1px;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 100%;
}
.centrage/*"class=" balise de centrage*/
{
	text-align: center;
}
.onglet/* bloc pour zone onglet */
{
	border: 2px rgb(147,36,111) solid;/*mauve foncé*/
	padding: 3px; /* marges =  3 pixels  */
	font-size: 75%;
}
.ongletOn/* style pour un onglet actif */
{
	color: white;
	text-decoration: none;
	background-color: rgb(147,36,111);/*mauve foncé*/
	font-weight: bold;
	font-size: 100%;
}
.ongletOff/* style pour un onglet non actif */
{
	color: rgb(147,36,111);/*mauve foncé*/
	text-decoration: none;
	background-color: rgb(242,227,237);/*mauve très claire*/
	font-weight: bold;
	font-size: 100%;
}
#Corps p/* balise paragraphe pour la zone corps */
{
	margin: 3pt 0cm;
	font-family: arial,helvetica,sans-serif;
	font-size: 9pt;
}
.sansGras
{
	font-weight: normal;
}
.tabletype/* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;/*arial,helvetica,sans-serif;*/
   /*border: 1px solid rgb(147,36,111); /* Bordure du tableau mauve foncé*/
}
.tabletype a
{
	color: rgb(122,21,95);/*mauve très foncé*/
}
.tabletype a:visited
{
	color: rgb(219,124,167);/*mauve claire  - rgb(255,102,0)=orange claire -  rgb(153,204,0)=vert kaki claire*/
}
.tabletype th /* Les cellules d'en-tête des tables */
{
   font-size: 90%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;/*arial,helvetica,sans-serif;*/
   text-align: left;
   height: 25;
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   border: 1px solid rgb(255,255,255); /*Bordure du tableau  blanc >>>> old :rgb(147,36,111)Bordure du tableau  mauve foncé*/
   border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
   border-right: solid 1px rgb(212,176,195);/*mauve light*/
   background-color: rgb(242,227,237);/*mauve très claire*/
}
.lienTitre/*les liens dans Les cellules d'en-tête des tables*/
{
	font-size: 90%;
	text-align: center;
}
.tabletype td /* Les cellules normales */
{
   font-size: 75%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   font-weight: bold;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   height: 25;
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   border: 1px solid rgb(255,255,255); /*Bordure du tableau  blanc >>>> old :rgb(147,36,111)Bordure du tableau  mauve foncé*/
   border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
   border-right: solid 1px rgb(212,176,195);/*mauve light*/
   background-color: rgb(242,227,237);/*mauve très claire*/
}
.tabletype2/* Le tableau pour les boutons lien */
{
   font-size: 75%;
   margin: auto; /* Centre le tableau */
}
.tabletype2 a
{
	color: black;
	text-decoration: none;
}
.tabletype2 a:visited
{
	color: rgb(122,21,95);/*mauve très foncé*/
	color: black;
	text-decoration: none;

}
.tabletype2 th /* Les cellules d'en-tête des tables */
{
   font-size: 120%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;/*arial,helvetica,sans-serif;*/
   text-align: center;
   height: 20;
   margin: 100px;
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   border: 1px solid rgb(255,255,255); /*Bordure du tableau  blanc >>>> old :rgb(147,36,111)Bordure du tableau  mauve foncé*/
   border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
   border-right: solid 1px rgb(212,176,195);/*mauve light*/
   background-color: rgb(242,227,237);/*mauve très claire*/
}
.tableinner /* Le tableau dans un tableau */
{
   margin: auto; /* Centre le tableau */
   border: none; /* pas de bordure*/
}
.tableinner th /* Les cellules d'en-tête du tableau dans un tableau */
{
   font-size: 100%;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;/*arial,helvetica,sans-serif;*/
   text-align: left;
   height: 25;
   padding: 0px; /* pas de marge intérieure */
   border: none; /* pas de bordure*/
   background-color: rgb(242,227,237);/*mauve très claire*/
}
.tableMenu /* Le tableau dans un menu pour gérer le new */
{
   margin: Opx; /* annule les marges du tableau */
   border: none; /* pas de bordure*/
}
a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}
.reAligne
{
	position: relative;
	top: 10px;/*baisse l'image de n px*/
}
#PiedDePage
{
	padding: 5px;
	color: white;
	text-align: right;
	background-color: rgb(147,36,111);/*mauve foncé*/
	border-top: 4px solid rgb(242,227,237);/*mauve très claire*/
}

.selectBoxArrow
{
	margin-top:1px;
	float:left;
	position:absolute;
	right:1px;
}	
.selectBoxInput
{
	border:0px;
	padding-left:1px;
	height:16px;
	position:absolute;
	top:0px;
	left:0px;
}
.selectBox
{
	border:1px solid #7f9db9;
	height:20px;	
}
.selectBoxOptionContainer
{
	position:absolute;
	border:1px solid #7f9db9;
	height:100px;
	background-color:#FFF;
	left:-1px;
	top:20px;
	visibility:hidden;
	overflow:auto;
}
.selectBoxAnOption
{
	font-family:arial;
	font-size:12px;
	cursor:default;
	margin:1px;
	overflow:hidden;
	white-space:nowrap;
}
.selectBoxIframe
{
	position:absolute;
	background-color:#FFF;
	border:0px;
	z-index:999;
}	

/*STYLES FOR CSS POPUP*/


#calquePopup {
   position: absolute;
   background-color:#111;
   opacity: 0.3;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
	position: absolute;
	top: 400px;
	left: 600px;
	width:400px;
	height:100px;
	z-index: 9002;

	border: 1px solid rgb(255,255,255); /*Bordure blanche*/
	border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
	border-right: solid 1px rgb(212,176,195);/*mauve light*/
	padding-top : 3px; /* la marge du haut =  3 pixels  */
	padding-left: 3px; /* la marge de gauche = 3 pixels */
	margin: 0px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-top: 5px; /* on modifie ensuite juste margin-top*/
	margin-bottom: 5px; /* on modifie ensuite juste margin-bottom, les autres sont à 0px */
	/*background: rgb(242,227,237);/*mauve très claire*/
	/*color: black;*/
	text-decoration: none;
	
	font-size: 120%;
	color: white;
	background: rgb(147,36,111);/*mauve foncé*/
	font-weight: bold;
	}

#popUpDiv a /* Tous les liens se trouvant dans un PopupDiv */
{
	display: block;
	border: 1px solid rgb(255,255,255); /*Bordure blanche*/
	border-bottom: solid 1px rgb(212,176,195);/*mauve light*/
	border-right: solid 1px rgb(212,176,195);/*mauve light*/
	width: 100px;
	height: 20px;
	padding-top : 3px; /* la marge du haut =  3 pixels  */
	padding-left: 3px; /* la marge de gauche = 3 pixels */
	margin: 0px; /*  évite d'avoir à en écrire 4 (margin-left, margin-right...) */
	margin-top: 5px; /* on modifie ensuite juste margin-top*/
	margin-bottom: 5px; /* on modifie ensuite juste margin-bottom, les autres sont à 0px */
	background: rgb(242,227,237);/*mauve très claire*/
	color: black;
	text-decoration: none;
}
#popUpDiv a:hover /* Quand on pointe sur un lien de popupdiv */
{
   background-color: black;
   color: white;
   text-decoration: none;
}
/*
#popLecAudio {
	position: fixed;
	top: 100px;
	left: 600px;
	width:400px;
	height:100px;
	z-index: 9002;
	text-decoration: none;
}*/

/*concerne toute la partie propre à la barre audio*/
#player {
  background: #FFFFFF;
  position: fixed;
  margin: 30px;
  width: 600px;
  height: 72px;
  top: 10px;/*old 300px pour être sous la photo*/
  left: 50%;/*commande pour placer l'audio au milieu */
  transform: translateX(-40%);/*le déplacer de 50% de sa largeur vers la gauche*/
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 5px 5px 15px rgba(54, 79, 60, 0.4);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 9002;
}

#player:hover {
 transform: translateX(-40%) scale(1.1);
}

.info {
  height: 90px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(35px);
  transition: all 0.5s ease-in-out;
}

.up {
  transform: translateY(0px);
}

.progress-bar {
  height: 5px;
  width: 73%;
  margin: 3% auto;
  background: #cdd9c2;
  border-radius: 10px;
  cursor: pointer;
  position:relative
  font-family: "Questrial", sans-serif;
}

.progress-bar .fill {
  background-color: #8BA989;
  width: 0%;
  height: 0.3rem;
  pointer-events: none;
  position: absolute;
  border-radius: 2px;
}

.progress-bar .fill .pin {
  background-color: white;
  border-radius: 8px;
  height: 8px;
  border-color:#557c5f;
  border-style:solid;
  border-width: 0.5px;
  position: absolute;
  pointer-events: all;
  width: 8px;
  right: -5px;
  top: -2.8px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  transition: transform 0.25s ease;
}

.progress-bar .fill .pin:active {
  transform: scale(1.5);
}

#Corps .progress-bar h1 {
  color: #364F3C;
  font-size: 6px;
  padding-top:7px;
}

.time--current, .time--total {
  color: #364F3C;
  font-size: 10px;
  position: absolute;
  margin-top: -2px;
}

.time--current {
  left: 15px;
}

.time--total {
  right: 15px;
}

.currently-playing {
  text-align: center;
  margin-top: -3px;
}

#Corps .song-name {
  font-family: "Questrial", sans-serif;
  margin: 0;
  font-size: 0.8em;
  letter-spacing: 3px;
  color: #364F3C;
}

.controls {
  display: flex;
  align-items: center;
  font-size: 0.8em;
  justify-content: center;
  color: #8BA989;
}

.controls .play, .controls .pause {
  margin: 10px 25px;
  color: #6e946c;
}

.controls .download {
  margin-right: 30px;
  font-size: 0.8em;
}

}
.controls .stop {
  color: #6e946c;
}

.controls .volumeD {
  left: 30px;
  position: absolute;
}

.controls .volumeU {
  left: 10px;
  position: absolute;
}

.controls .next {
  margin-left: 30px;
}

.controls .speed {
  right: 70px;
  position: absolute;
  font-size: 1.0em;
  color: #557c5f;
}
.controls .minus  {
  right: 50px;
  position: absolute;
  font-size: 0.8em;
}

.controls .valspeed  {
  right: 30px;
  position: absolute;
  font-size: 0.8em;
  color: #557c5f;
}

.controls .plus  {
  right: 10px;
  position: absolute;
  font-size: 0.8em;
}

.play, .pause, .next, .previous, .download, .stop, .volumeU, .volumeD, .plus, .minus {
  transition: all 0.5s ease;
}
.play:hover, .pause:hover, .next:hover, .previous:hover, .download:hover, .stop:hover, .volumeU:hover, .volumeD:hover, .plus:hover, .minus:hover {
  color: #557c5f;
}