H2 {
font-size: 15pt;
font-weight: bold;
font-family: "comic sans ms";
color: #000000;
Text-Align: center;}

H3 {
font-size: 12pt;
font-weight: bold;
font-family: "comic sans ms";
color: #000000;
Text-Align: center;}

H4 {
font-size: 11pt;
font-weight: bold;
font-family: "comic sans ms";
color: #000000;
Text-Align: center;}

H6 {
font-size: 7pt;
font-weight: regular;
color: #000000;
font-family: "comic sans ms";
}

TD {
font-size: 11pt;
font-weight: regular;
color: #000000;
font-family: "comic sans ms";
}

BODY {
max-width: 1100px;
Background-Color: #FFF8C3;

font-size: 11pt;
font-weight: regular;
font-family: "comic sans ms";
color: #000000;
Text-Align: justify;
margin-left: 15px;
margin-right: 15px}

/* Couleur scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #308343 #BCECA7;
}

A:link {color:#087329; text-decoration: none} 
A:visited {color:#1FC652; text-decoration: none} 
A:active {color:#1FC652; text-decoration: none}
A:hover {color:#1FC652; text-decoration: underline dotted}

a.info {
   position: relative;
   color: #087329;
   text-decoration: none;
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;
   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
   top: 30px; /* On positionne notre infobulle. */
   left: 20px;
   background: #BCECA7;
   color: #000000;
   padding: 3px;
   border: 1px solid #308343;
   border-left: 1px solid #308343;
}

.largeurecran {max-width:1000px;}
#scrollUp
{
position: fixed;
bottom : 14px;
left: -100px;
opacity: 0.8;
}

.audio audio {
   width: 230px;
   height: 20px;
}
#menu {
  position: fixed;
  left: 180px;
  top: 5px;
   width: 701px;
}
/* pull-down mainmenu css */
.mainmenu{
	float: left;
	width: 100%;
	padding: 0;
}
.mainmenu ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	color:#308343;
	background: #BCECA7;
	padding: 0;
	border: solid #308343;
	border-width: 1px 1px;
        border-radius:10px; 
	margin: 0 0 1em 0;




}

.mainmenu a, .mainmenu a:visited {
	display: block;
font-family:comic sans ms, Arial, Helvetica, sans-serif;font-size:1.0em;font-weight:bold;font-style:normal;text-decoration:underline;
	color: #308343;
	text-decoration: none;
	padding: 0.8em 1em;
}
.mainmenu ul ul a{
	width:100%;
	height:100%;
}
.mainmenu ul a{
	width:1%;
}


.mainmenu li  {
	float: left;
	margin:0;
	padding:0;
}

.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
	
.mainmenu li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width:20em;	
	
	background: #BCECA7;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
}

.mainmenu li li {
	width:20em ;
}

.mainmenu li li a{
	width:13em ;
}

.mainmenu li ul  {
	margin: 0;
}
.mainmenu li ul ul {
	margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
	left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
	left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
	left: auto;
}

.mainmenu li:hover{
	background: #308343;
        border-radius:10px; 
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
	color:#FFF8C3;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
	color:#308343;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
	background: #308343;
	z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
	color: #FFF8C3; 
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
	color: #308343;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
	color: #FFF8C3;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
	color: #308343;
}

            /* Infobulle */ 
            a{ 
                color:#087329; 
                 
            } 
            a:hover,a:focus{
                color:#1FC652;
            }
            
            /* Position et couleur bulle */
            a span{ 
                position:absolute;
                margin-top:25px; 
                margin-left:-25px;
                color:#000000; 
                background:rgba(187, 235, 166, 0.9); 
                padding:3px; 
                border-radius:5px; 
      		border: 1px solid #308343;                
                /* Faire disparaire infobulle par défaut */
                /* On determine l'origine de la rotation */ 
                transform:scale(0) rotate(-180deg);
                /* Faire durer l'effet */
                transition:all .25s;
                /* Effet sur la transparence */ 
                opacity:0;
            }
            
            /* Apparition de la bulle avec le scale à 1 */ 
            a:hover span, a:focus span{ 
                transform:scale(1) rotate(0);
                /* Effet sur la transparence */ 
                opacity:1;
            }

/* end of mainmenu css */
/* style pop-up normal */

      /* Positionnez le pop-up */
      .login-popup {
        position: relative;
        text-align: center;
        width: 100%;
      }
      /* Masquez le pop-up */
      .form-popup {
        display: none;
        position: fixed;
        left: 45%;
        top: 10%;
        transform: translate(-45%, 5%);
        border: 2px solid #308343;
      }
      /* Styles pour le contenu du pop-up */
      .form-container {
        padding: 0px;
        background-color: #FFF8C3;
      }
/* style pop-up gauche */

      /* Positionnez le pop-up */
      .login-popupg {
        position: relative;
        text-align: center;
        width: 100%;
      }
      /* Masquez le pop-up */
      .form-popupg {
        display: none;
        position: fixed;
        left: 15%;
        top: 10%;
        transform: translate(-45%, 5%);
        border: 2px solid #308343;
	Border-color: #308343
      }
      /* Styles pour le contenu du pop-up */
      .form-containerg {
        padding: 0px;
        background-color: #FFF8C3;
      }