html, body {
  position: absolute;
  left: 5;
  top: 1;
  width:99%;
  height: 95.8%;
font-size:14px;
}

.menu-container {
  display: flex;
  flex-wrap: nowrap;
  background-color:#618685;
  text-align:center;
  height: 5%;
}

.menu-container > div {
  
  color: white;
  !margin: 10px;
  vertical-align: top;
  !line-height:35px;
 
}

div.titre{width:15%; font-size:25px;font-family:Advent Pro; padding-top:10px; }
div.menu{width:55%;  font-size: 18px;}
div.recherche{width:30%; padding-top:10px; font-size:16px; font-family: Advent Pro;}


ul {
  list-style-type: none;
  margin: 0;
 overflow: hidden;
}

li { float: left;}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
 padding:9px 8px;
  text-decoration: none;
  
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: #fefbd8;
  color: black;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  !min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  !padding: 2px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:14px;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

.main{
	padding-top: 10px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
width:100%;
height:100%;
background-image:url(images/chanteloup.png);
justify-content: space-around;
margin:auto;
!background-repeat:no-repeat;

}
.fiche{
padding-left:5px;
padding-bottom:5px;
width:24%;
height:100%;
border:1px solid;
overflow:auto;
font-size:14px;
font-family: verdana;
!background-image:url(images/fiche.png);
}

.fiche  a{color:green;}
.fiche a:hover {color:red;}
.fiche a:visited{color:Green ;}

.main2{
  display: flex;
  flex-flow: row wrap;
  width:75%;
  height:100.5%;
  justify-content: space-around;
  overflow:hidden;
  border:1px solid;
  !background-image:url(images/fiche.png);
  
  }
  
 .main2 a{color:black;} 
 .main2 a:hover {color:red;}
 .main2 a:visited{color:black;} 
   
   
 .media{
height:95%;
width:99.5%;
!font-size:14px;
overflow:auto;
padding:25px;
} 
.media a{color:green;}
.media a:hover {color:red;}
.media a:visited{color:Green ;}

.media span {
padding-left:10px;
font-size:20px;}

  
  
.arbre{ 
  font-size:14px;
  display: flex;
  width:1400px;
  height:45%;
  flex-flow: row wrap;
  justify-content: space-around;
  padding:5px;

 }

.case{width:15%; height:60px; border:1px solid;
font-family:Aclonica;
text-align:center;
border-radius:5px;
padding:3px;
font-size:14px;
}

.case0{width:25%; height:100px; border:1px solid;
font-family:Aclonica;
text-align:center;
border-radius:5px;
padding:3px;
}

.case1{width:10%; height:60px;
font-family:Aclonica;
font-size:12px;
border:1px solid;
text-align:center;
border-radius:5px;
padding:3px;}	

.case2{width:5.6%; height:60px;
font-family:Advent Pro;
border:1px solid;
font-size:12px;
text-align:center;
border-radius:5px;

}	
.caseE{!width:80px; height:65px;
font-family: Boogaloo;
border:1px solid;
font-size:15px;
text-align:center;
border-radius:5px;
background: linear-gradient(to bottom, Gainsboro 1%,ivory 80%);
}

.casel{!width:80px; height:65px;
font-family: Arial, Helvetica, sans-serif;
border:1px solid;
font-size:13px;
text-align:center;
}	

.espace{width:1400px;
color:red;
display:flex;
flex-flow: row wrap;
justify-content: space-around;
text-align:center;
height:32px; 
font-family: Georgia, sans-serif;
}

.espace1{width:1400px; 
text-align:center;
height:18px; 
!border:1px solid;
font-family: Georgia, sans-serif;
font-size:14px;
color:red;
}

.titreA{width:99%; 
height:30px; 
!border:1px solid;
text-align:center;
font-size:20px;
border-radius:5px;
font-family:Aclonica;
padding:3px;}

div.ligne{border:0px solid; 
text-align:center;
padding-bottom:5px;
font-size:14px;
}

span.notes {text-align: justify;
text-justify: inter-word;
font-family: sofia, cursive;
}



table {width:100%; border-collapse:collapse; }
td {border:1px solid; text-align:left; vertical-align:top; Font-size:15px; color:dimgrey;}
table.chrono {width:80%; border-collapse:collapse; }
td.chrono {border:0px solid; padding-top:10px;!padding-right:10px;  text-align:center; vertical-align:bottom; Font-size:16px; color:dimgrey;}
td.chrono_text{Font-size:18px; color:black;}
div.chrono{padding-bottom:15px;}

a:link {text-decoration:none; }

h2 {color:tomato;font-family:Aclonica; font-size:20px;}
h3{font-size:18px;}
B{font-family:Aclonica; font-size:14px;}
span.titre{font-size:15px; color:Blue;}	


/* tooltiptext*/
.tooltip {
  position: relative;
  display: inline-block;
  !border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}