{
height: 100%;
overflow: auto;
padding: 0;
margin: 0;
}

body
{
height: 100%;
margin: 0px;
padding: 0px;
outline: 0px;
min-height: 100vh;
background-image: url("Images/cigalere_compil_noir.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-color: black;
background-size: contain;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#en_tete
{
   position: absolute;
   left: 0%;
   top: 4%;
   width: 30%;
   height: 70%;  
   color: yellow;
   font-size: medium;
   text-align: center;
   padding: 6px;
}

.logo_e img
{
   float: center;
}

.mess
{
   color: white;
   font-size: small;
   text-align: center;
}
.mess p
{
	line-height: 0.6;
	font-size: small;
	color: white;
}

a
{
   font-size: small;
   color: white;
   text-decoration: none;
   cursor: pointer;
}
a:hover
{
   text-decoration: underline  #8B8000 ;
   color:  #8B8000 ;
}

caption p
{
   text-align: center ;
   margin: 0.6vh;
   font-size: small;
   color: white;
}

caption a
{
   color: white;
   font-size: small;
}
caption a:hover
{
   text-decoration: underline hotpink;
   color: hotpink;
}

table
{
	scrollbar-color: darkblue darkgreen;
	scrollbar-width: thin;
}

tbody, caption, tfoot 
{
	border: 1px solid #c4c4c4 ;
	border-radius: 8px ;
}

tbody tr:nth-child(odd) {  background-color: #00008B; }
tbody tr:nth-child(even){  background-color: #0000FF; }

tbody { background-color: #483D8B; }

td, th
{ 
text-align: center;
color: white;
vertical-align: middle;
font-size: small;
}

th { background-color: navy; }
caption, tfoot { height: 2.8vh; }
caption, tfoot { background-color: darkblue; }

caption.back 	{ background-color: darkgreen ; }
caption.doit 	{ background-color: black ; }
caption.titre 	{ background-color: #483D8B ; }

#association
{
	position: absolute;
    left: 40%;
	top: 20%;
	width: 40vw;
	margin:auto;
}
#association table { width: 40vw; }
#association tbody 
{
	position: absolute;
	max-height: 32vh;
	overflow-y: scroll;
}
#association tfoot
{
	position: absolute; 
	width: 40vw;
	margin-top: 32.4vh; 
	z-index: -1; 
}
#association th.col_1 { width: 20vw; }
#association th.col_2 { width: 5vw;	 }
#association th.col_3 { width: 15vw; }

#bulletins
{
	position: absolute;
    left: 40%;
	top: 20%;
	width: 30vw;
	margin:auto;
}
#bulletins table{width: 30vw;}
#bulletins tbody 
{
	position: absolute;
	max-height: 32vh;
	overflow-y: scroll;
}
#bulletins tfoot
{ 
	position: absolute;
	width: 30vw;
	margin-top: 32.4vh; 
	z-index: -1; 
}
#bulletins th.col_1 { width: 6vw;  }
#bulletins th.col_2 { width: 24vw; }

#documents
{
	position: absolute;
    left: 40%;
	top: 20%;
	width: 40vw;
	margin:auto;
}
#documents table{width: 40vw;}
#documents tbody 
{
	position: absolute;
	max-height: 32vh;
	overflow-y: scroll;
	font-size: small;
}
#documents tfoot
{ 
	position: absolute;
	width: 40vw;
	margin-top: 32.4vh; 
	z-index: -1; 
}
#documents th.col_1 { width: 20vw;  }
#documents th.col_2 { width: 5vw; 	}
#documents th.col_3 { width: 15vw; 	}

#adherents
{
	position: absolute;
    left: 40%;
	top: 20%;
	width: 40vw;
	margin:auto;
}
#adherents table{width: 40vw;}
#adherents tbody 
{
	position: absolute;
	max-height: 52vh;
	overflow-y: scroll;
}
#adherents tfoot
{ 
	position: absolute;
	width: 40vw;
	margin-top: 52.4vh; 
	z-index: -1; 
}
#adherents th.col_1 { width: 2vw;	}
#adherents th.col_2 { width: 8vw;	}
#adherents th.col_3 { width: 8vw;	}
#adherents th.col_4 { width: 12vw; 	}
#adherents th.col_5	{ width: 15vw;	}

#topos
{
	position: absolute;
    left: 40%;
	top: 20%;
	width: 50vw;
	margin:auto;
}
#topos table { width: 50vw; }
#topos tbody 
{
	position: absolute;
	max-height: 38vh;
	overflow-y: scroll;
}
#topos tfoot
{ 
	position: absolute;
	width: 50vw;
	margin-top: 38.4vh; 
	z-index: -1; 
}
#topos th.col_1 { width: 16vw;	}
#topos th.col_2 { width: 4vw;	}
#topos th.col_3 { width: 4vw;	}
#topos th.col_4 { width: 4vw;	}
#topos th.col_5 { width: 4vw;	}
#topos th.col_6 { width: 4vw;	}
#topos th.col_7 { width: 14vw;	}

#topos img.img_o
{
	width: 15px;
	height: 15px;
	border: 0;
	margin: 0;
}
#topos img.img_o:hover
{
	width: 20px;
	height: 20px;
	border: 0;
	margin: 0;
}
#topos img.img_no
{
	width: 15px;
	height: 15px;
	border: 0;
	margin: 0;
}

#photos
{
	position: absolute;
    left: 60%;
	top: 20%;
	width: 30vw;
	margin:auto;
}
#photos table { width: 30vw; }
#photos tbody 
{
	position: absolute;
	max-height: 22vh;
	overflow-y: scroll;
}
#photos tfoot
{
	position: absolute; 
	width: 30vw;
	margin-top: 22.4vh; 
	z-index: -1; 
}
#photos th.col_1 { width: 12vw; }
#photos th.col_2 { width: 4vw;	 }
#photos th.col_3 { width: 14vw; }

#div_photo 			{ position:relative; float:left; height:72vh; top:2vh; left:2vw; }
#div_photo img 		{ border:2px solid #ccc; height:72vh; }
#div_photo p 		{ width:26vw; margin:auto; text-align:center; Color:White; background-color: darkblue;}
#div_photo button 	{ width:10vw; margin:auto; border: 1px solid; border-radius: 6px; Color:White; background-color: darkgreen;}

#diaporama
{
	position:absolute;
	background-color: #00008B;
    left: 2vw;
    top: 2vh;	
	width: 780px;
	margin: auto;
	max-height: 85vh;
	overflow-y: scroll;
	border: solid 1px;
	border-color: white;
	padding: 5px;
}
#diaporama p
{
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size: small;
	text-align: center; 
	background-color: darkblue;
	color: white;
}
#diaporama img
{
	position:relative;
    left: 1.5vw;
	margin: auto;
}

#videos
{
	position: absolute;
	left: 60%;
	top: 20%;
	width: 34vw;
	margin: auto;
}
#videos table { width: 34vw; }
#videos tbody 
{
	position: absolute;
	max-height: 32vh;
	overflow-y: scroll;
}
#videos tfoot
{
	position: absolute; 
	width: 34vw;
	margin-top: 32.4vh; 
	z-index: -1; 
}
#videos th.col_1 { width: 15vw; }
#videos th.col_2 { width: 5vw;	 }
#videos th.col_3 { width: 14vw; }

#div_video 			{ position:relative; float:left; height:72vh; top:2vh; left:2vw; }
#div_video video	{ border:2px solid #ccc; height:72vh; }
#div_video p 		{ width:26vw; margin:auto; text-align:center; Color:White; background-color: darkblue;}
#div_video button 	{ width:10vw; margin:auto; border: 1px solid; border-radius: 6px; Color:White; background-color: darkgreen;}

@keyframes blink_down 
{
	0%		{ scale: 0.5; }
    17%		{ scale: 1; }
	34%		{ acale: 2; }
	50%		{ scale: 3; }
	67%		{ scale: 2; }
	84%		{ scale: 1; }
	100%	{ scale: 0.5; }	
}

#demo img
{
position: absolute;
left: 11%;
top: 42%;
position: absolute;
float: center ;
z-index: 10;
height: 12vh;
animation: blink_down 3s;
animation-iteration-count: 1;
}