body {
color:black;
background-color:white;
}

#contenu{
width:850px;
min-height:405px;
margin:20 auto;
border:1px solid gray;
border-radius:50px;
background:white;
background-image: url("cuir2.jpg");
box-shadow: 0px 0px 5px 5px lightgray;
color:black;
}

#titre{
margin:10px auto 0px;
padding-top:10px;
font-size:45px;
color:darkgreen;
text-shadow: 0px 0px 2px black;
text-align:center;
width:90%;
letter-spacing: -3px;
}

/*  classes temporaires  */
.legende{
position:absolute;
z-index:1000;
overflow-y:hidden;
overflow: hidden;
width:70px;
height:17px;
margin:-6px 50px 0 0px;
padding:3px;
padding-left:15px;
transition: 0.5s ease;
background: linear-gradient(white, lightgrey);
border:1px solid black;
border-radius : 10px 10px 10px 10px;
opacity:1;
font-size: 1.05em ;
color:  #1B2A41;
text-shadow: 1px 1px 1px white;
text-align:left;
}

.legende:hover{
text-align:left;
font-size: 1.05em ;
width:405px;
height:435px;
overflow-y: visible;
padding:10px;
margin-left:-300px;
background: linear-gradient(white, lightgrey);
border:1px solid black;
opacity:1;
box-shadow:0px 0px 5px 5px gray,0px 0px 30px 30px white;
}



#arbre
{
width:750px;
list-style-type: none ;
margin: 20px auto;
font-size:16px;
padding: 15px 15px;
}

#arbre>ul {
margin: 0 auto;
list-style:none;
text-align:center;
}

#arbre>li {
border: 1px solid #100F17;
border-radius : 15px;
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
background-image: url("cuir.jpg");
background:white;
background:#D5D3D3;
color: #FDBF75;
height: 75px;
width: 84px;
margin: 0 2px 15px 15px;
padding: 0px;
box-shadow: 2px 2px 2px #76ABDF;
}


#arbre>li[class="vacances"] {
border: 1px solid #100F17;
border-radius : 15px;
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
background:#D5D3D3;
background-image: url("vacances.gif");
color: #FDBF75;
height: 75px;
width: 84px;
margin: 0 2px 15px 15px;
padding: 0px;
box-shadow: 2px 2px 2px #76ABDF;
opacity:0.5;
}


#arbre>li[class="vacances"]:hover,#arbre>li[class="vacances"]:focus {
border: 2px solid #100F17;
height: 73px;
width: 82px;
background:#D5D3D3;
}

#arbre>li:hover,#arbre>li:focus {
border: 2px solid #100F17;
height: 73px;
width: 82px;
background:white;
}

#arbre li a {
width: 100px ;
line-height: 22px ;
font-family: arial;
font-size: 0.65em ;
font-weight: normal;
color: black ;
color:#47324C;
text-decoration: none ;
}

#arbre .titre{
color:black;
font-size: 0.9em ;
width:90%;
line-height:80%;
font-weight:bold;
min-height:25px;
margin-top:-15px;
border-bottom: 1px solid navy ;
display:inline-block;
text-shadow:0px 0px 3px white;
}

.numero{
position:absolute;
top:-10px;left:-14px;
width:25px;height:15px;
border-radius:5px;
border:1px dotted grey;
background:white;
color:grey;
overflow:visible;
z-index:2;
font-size: 0.8em ;
}

.present{
width:15px;
height:8px;
border-radius:7px;
background:green;
background: linear-gradient(135deg, rgba(90,251,53,0.9528186274509804) 0%, rgba(20,150,22,1) 46%);
box-shadow:1px 1px 2px black;
display:inline-block;
vertical-align:middle;
margin-left:5px;
}

.absent{
width:15px;
height:8px;
border-radius:7px;
background:red;
background: linear-gradient(135deg, rgba(246,9,9,1) 30%, rgba(121,11,9,0.9528186274509804) 100%);
display:inline-block;
vertical-align:middle;
margin-left:5px;
}

#message{
width:800px;text-align:left;color:black;font-size:0.9em;padding-left:80px;margin:-60px auto;}

#pied{
width:800px;text-align:right;color:black;font-size:1.7em;padding-right:50px;margin:-20px auto;}