/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

      #map {
        height: 85%;
        float: left;
        width: 100%;
      }
	   #videoHolder {
		/*left: 5%;	top:10px;  z-index: 10; */
		margin-left: auto; 
		margin-right: auto; 
		top:10px;   
		z-index: 10;
		height:500px;	
		width:500px; 
		position: absolute;  			
      }
      /* Optional: Makes the sample page fill the window. */
		html, body {
        height: 90%;
        margin: 0;
        padding: 0;
		background-color: #CCCCFF;
      }
	  	
		/*    <style>   .buttonA:hover {  border: 0px solid grey;
		/*    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }*/ 
		.button00       {	z-index: 10; top:10px;   height:20px; 
						background-color: blueviolet ; color : white;
						position: absolute;
						left: 2%;  
						width:110px;  padding: 0px; border : 0px;
						text-align: center; font-size: 16px; 
						font-family: 'Trebuchet MS','sans-serif';
						line-height :80%; 
						/*  background-image:url(./Picts/01Explanations110x20.png);   */
						/*	font-size-adjust: 2; 				*/
		}		
		.button00:hover { opacity :.5 ;   }
		.button00:active {background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
		.button01       {	z-index: 4; top:32px;   height:20px; 
						background-color: blueviolet ; color : white;
						position: absolute;
						left: 2%;  
						width:110px;  padding: 0px; border : 0px;
						text-align: center; font-size: 16px; 
						font-family: 'Trebuchet MS','sans-serif';
						/*  background-image:url(./Picts/01Explanations110x20.png);   */
						/*	font-size-adjust: 2; 				*/
						/*	refresh map 				*/
		}		
		.button01:hover { opacity :.5 ;   }
		.button01:active {background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
		.button03 		{  z-index: 5 ; top: 54px;   height: 20px;  /*54 a la place de 94 quand pas de question */ /* refresh map*/
						padding: 0px; border : 0px; /* refresh all */   
						/*background-image:url(Picts/03ShowEveryone110x40.png); */
						position: absolute;			
						background-color: blueviolet ;  color : white;
						left: 2%;
						width:110px; padding: 0px; border : 0px;
						z-index: 4;
						text-align: center;	font-size: 16px;  line-height :80%; 
						font-family: 'Trebuchet MS','sans-serif';
						-webkit-animation : plantAColumnNow 5s infinite; /* Safari 4.0 - 8.0 */
						animation: plantAColumnNow 5s infinite;
						}
		.button03:hover { opacity :.5 ;   }
		.button03:active{ background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
								/* Safari 4.0 - 8.0 */
						@-webkit-keyframes plantAColumnNow {
						    0% {background-color: #0000b3 ;color: #ffff00;}
						   25% {background-color: blueviolet ;color: white;}
						   50% {background-color: #4d4dff ;color: #ffff00;}
						   75% {background-color: blueviolet ;color: white;}
						  100% {background-color: #0000b3 ;color: #ffff00;}
						}
						/* Standard syntax */
						@keyframes plantAColumnNow {
						    0% {background-color: #0000b3 ;color: #ffff00;}
						   25% {background-color: blueviolet ;color: white;}
						   50% {background-color: #4d4dff ;color: #ffff00;}
						   75% {background-color: blueviolet ;color: white;}
						  100% {background-color: #0000b3 ;color: #ffff00;}
						}
		
		.findOnMap 		{  z-index: 5 ; top: 76px;   height: 40px;  /*54 a la place de 94 quand pas de question */ /* refresh map*/
						padding: 0px; border : 0px; /* refresh all */   
						/*background-image:url(Picts/03ShowEveryone110x40.png); */
						position: absolute;			
						background-color: blueviolet ;  color : white;
						left: 2%;
						width:110px; padding: 0px; border : 0px;
						z-index: 4;
						text-align: center;	font-size: 16px;  line-height :80%; 
						font-family: 'Trebuchet MS','sans-serif';
						}
		.findOnMap:hover { opacity :.5 ;   }
		.findOnMap:active{ background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }		
				
		.button3D 		{z-index: 5 ; top: 118px; height: 50px; 	
						/* background-image:url(Picts/08Bubbles110x20.png);*/
						left : 2%;  width:110px;     /* 96 a la place de 186 qd pas de question*/
						position: absolute;
						/* top: 10px;  height :50px; right: 5%; width:60px;	  */
						padding: 0px; border : 0px;
						text-align: center;	font-size: 16px; line-height :100%;
						background-color: blueviolet ;  	color : white; 
						font-family: 'Trebuchet MS','Roboto','sans-serif';
						-webkit-animation : passageEn3D 4s infinite; /* Safari 4.0 - 8.0 */
						animation: passageEn3D 4s infinite;}
		.button3D:hover { opacity :.5 ;   }
		.button3D:active{background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
								/* Safari 4.0 - 8.0 */
						@-webkit-keyframes passageEn3D {
						    0% {background-color: blueviolet ;color: #ffff00;}
						   25% {background-color: blueviolet ;color: white;}
						   50% {background-color: blueviolet ;color: #ffff00;}
						   75% {background-color: blueviolet ;color: white;}
						  100% {background-color: blueviolet ;color: #ffff00;}
						}
						/* Standard syntax */
						@keyframes passageEn3D {
						    0% {background-color: blueviolet ;color: #ffff00;}
						   25% {background-color: blueviolet ;color: white;}
						   50% {background-color: blueviolet ;color: #ffff00;}
						   75% {background-color: blueviolet ;color: white;}
						  100% {background-color: blueviolet ;color: #ffff00;}
						}
						
		.button11 		{ z-index: 5; top : 170px ; height : 20px; 
		/*width:110px;  border : 0px;  height :20px; text-align: center; bottom: 50px; 
		text-decoration: none; background-image:url(Picts/11ContactUs110x20.png); display: inline-block;} Green */
						
						width:110px; left: 2%;/* bottom à la palce de 502 */  
						position: absolute;
						padding: 0px; border : 0px;
						z-index: 5;
						background-color: blueviolet; 	color : white;
						text-align: center;   font-size: 16px; 
						font-family:'Trebuchet MS', 'Roboto','sans-serif';}				
		.button11:hover  { opacity :.5 ;   }
		.button11:active {background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
		
		.buttonExpl 	{  z-index: 5 ; top: 192px;  height: 50px; 
						/* background-image:url(Picts/02ShowLightCol110x30.png); ***********   */
						position: absolute;			
						background-color: blueviolet ;  color : white;
						width:110px;  padding: 0px; border : 0px;      
						left: 2%;
						text-align: center;  font-size: 16px; line-height :90%;
						font-family: 'Trebuchet MS','sans-serif';
 						-webkit-animation : passageExpl 8s infinite; /* Safari 4.0 - 8.0 */
						animation: passageExpl 8s linear infinite alternate;}
								/* Safari 4.0 - 8.0 */
						@-webkit-keyframes passageExpl {
						    0% {opacity: 0.0 ;color: #ffff00;}
						   20% {opacity: 0.33;color: white;}
						   40% {opacity: 0.66;color: #ffff00;}
						   60% {opacity: 1.00;color: white;}
						   80% {opacity: 0.5;color: #ffff00;}
						  100% {opacity: 0.0;color: #ffff00;}
						}
						/* Standard syntax */
						@keyframes passageExpl {
						    0% {opacity: 0.0 ;color: #ffff00;}
						   20% {opacity: 0.33;color: white;}
						   40% {opacity: 0.66;color: #ffff00;}
						   60% {opacity: 1.00;color: white;}
						   80% {opacity: 0.5;color: #ffff00;}
						  100% {opacity: 0.0;color: #ffff00;}
						}
						
						
						
						
		.button04 		{  z-index: 5 ; top: 136px;  height: 40px;  
						/*background-image:url(Picts/04FindMyLightCol110x40.png); */	
						position: absolute;			
						background-color: blueviolet ;  color : white;      
						left: 2%;
						width:110px; padding: 0px; border : 0px;
						z-index: 4;
						text-align: center;	font-size: 16px; 
						font-family: 'Trebuchet MS','sans-serif';
						}
		.button04:hover { opacity :.5 ;   }
		.button04:active{background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
			
		.button05 		{ z-index: 5 ;top: 186px;    height :30px; 
						/*	background-image:url(Picts/05ChooseLightColAsp110x30.png); */
						position: absolute;
						left: 2%;
						opacity :.5 ;
						width:110px; padding: 0px; border : 0px; 
						text-align: center;	font-size: 16px; line-height :80%; letter-spacing :-1px;
						background-color: white ;  	color :    blueviolet;	
						font-family: 'Trebuchet MS','Roboto','sans-serif';}
		
		.button06 		{ z-index: 5 ; top: 218px; height :20px;						      
						/*	background-image:url(Picts/06WhiteFlags110x20.png);} 	content : Whi Flags;  */
						position: absolute;
						left: 2%;
						width:110px; padding: 0px; border : 0px; 
						padding: 0px;border : 0px;
						text-align: center;	font-size: 16px; 
						font-family: 'Trebuchet MS','Roboto','sans-serif';	
						background-color: blueviolet ;  	color : white;			}
		.button06:hover { opacity :.5 ;   }
		.button06:active{background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
		.button07 		{z-index: 5 ; top: 240px;  height :20px;
						/* background-image:url(Picts/07Fountains110x20.png);  */
						position: absolute;
						left: 92%;
						width:110px; padding: 0px; border : 0px;
						z-index: 5;	
						text-align: center;	font-size: 16px; 
						background-color: blueviolet ;  color : white;
						font-family: 'Trebuchet MS','Roboto','sans-serif';}
		.button07:hover { opacity :.5 ;   }
		.button07:active{ background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
		.button08 		{z-index: 5 ; 	top: 262px;  height :20px;
						/* background-image:url(Picts/08Bubbles110x20.png);*/
						position: absolute;
						left: 2%;	
						width:110px; padding: 0px; border : 0px;
						text-align: center;	font-size: 16px; 
						background-color: blueviolet ;  	color : white;
						font-family: 'Trebuchet MS','Roboto','sans-serif';}
		.button08:hover { opacity :.5 ;   }
		.button08:active{background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		
#dialogoverlay{
	display: none;
	opacity: .8;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 10;
	background: #FFF;
}
#dialogbox{
	display: none;
	position: absolute;
	background: #FFF;
	border-radius:1px; 
	/* width:60%; */
	z-index: 10;
	font-family: "Trebuchet MS",'sans-serif';
}
#dialogbox > div{ background:#FFF; margin:1px; }
#dialogbox > div > #dialogboxhead{ background:#E5E5FF; padding:3px; font-family: "Trebuchet MS",'sans-serif';
 /* font-size:19px;  */}
#dialogbox > div > #dialogboxbody{ background:#FFFFFF; padding:3px; font-family: "Trebuchet MS",'sans-serif'; }
/* #dialogbox > div > #dialogboxprom{ background:#F0FFFF; padding:20px; color:#000; }  */
#dialogbox > div > #dialogboxfoot{ background:#E5E5FF; padding:3px; text-align:right; }
#output		{  font-size:70%; }
#InfoZoom	{  font-size:70%; }
#vitesse	{  font-size:70%; }
#idtrouve	{  font-size:70%; }
#succes		{  font-size:70%; }
#InfoZoom	{  font-size:70%; }
#userLocation { font-size:70%; }
#liaison 	{ font-size:70%; }
#statut 	{ font-size:70%; }
#text_latlng { font-size:70%; }
#pres_photo { font-size:70%; }

#loading { position:absolute; display:none; top:60%; width:20%; left:40%; z-index:-1; }
#loading1{ position:absolute; display:none; top:20%; width:20%; left:40%; z-index:-1; }
/*		
		.buttonA       { z-index: 2;  	} 
		.buttonB       { z-index: 2; 	 } 
		.buttonB:hover { opacity :.5 ;   }
		.buttonB:active {background-color: #87CEFA ; box-shadow: 0 5px #666; transform: translateY(4px); }
		.button11 { 	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
			background-color: white;  		color: black;  		width: 110px; 		 }
		.button11:hover {
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
			background-color: #DA70D6; 		color: white; 		}
			
		#floating-panel-bas{ }
	  	#floating-panel-bas:hover {background-color: #DA70D6;}
		
	  	#floating-panel-hautgauche0{ }  
		/* #floating-panel-hautgauche0:hover {background-color: #DA70D6;}  
		
	  	#floating-panel-hautgauche1{ }
	  	/* #floating-panel-hautgauche1:hover {background-color: #DA70D6;} 
		
	  	#floating-panel-hautgauche2{ }
	  	/* #floating-panel-hautgauche2:hover {background-color: #DA70D6;} 

	  	#floating-panel-hautgauche3{
        position: absolute;
        top: 450px;
		width:110px;
        left: 2%;
        z-index: 5;
        background-color: #fff;
        padding: 1px;
        border: 0px solid #5b5b5b;
        text-align: center;
        font-family: 'Trebuchet MS','Roboto','sans-serif';
		opacity: .30 ;  }
	  	#floating-panel-hautgauche3:hover {background-color: #DA70D6;}
		
		#floating-panel-hautgauche4{
        position: absolute;
        top: 500px;
		width:110px;
        left: 2%;
        z-index: 5;
        background-color: #fff;
        padding: 1px;
        border: 1px solid #5b5b5b;
        text-align: center;
        font-family: 'Trebuchet MS','Roboto','sans-serif';
		opacity: .50 ;    }
	  	#floating-panel-hautgauche4:hover {background-color: #DA70D6;}
		 
		#floating-panel-basdroit{
        position: absolute;
        top: 5%;
        right: 3%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #5b5b5b;
        text-align: center;
        font-family: 'Trebuchet MS','Roboto','sans-serif';
		opacity: .75 ;
				</style> 
		}
		
		#div_texte {
		top: 292px;
		height: 200px;  
        left : 2%;  width:110px;
		background-color: #F0FFFF;
		border:0px solid black;
		position: absolute;
		color: black;
		overflow:hidden; /* la partie des objets qui depasse du div est cachee*/   /*
		font-family: "Trebuchet MS",'sans-serif';
        z-index: 4; 
		opacity :0.5;  
		}
		#contenu {
		position: absolute;		 } 
		*/