/*
    font google a tester
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">

    font-family:OpenSans;
    font-family: 'Open Sans', sans-serif;
*/

 
a.mainmenu:link {color: rgb(255,255,0); font-size:14pt; font-weight:bold; padding: 5px 5px; text-decoration: none; }
a.mainmenu:visited {color:rgb(255,255,0); font-size:14pt; font-weight:bold; padding: 5px 5px; text-decoration: none; }
a.mainmenu:hover {color: rgb(255,0,0); font-size:14pt; font-weight:bold;  padding: 5px 5px; text-decoration: none;text-shadow: 0px 0px 18px black, 0 0 25px red, 0 0 10px red;}
a.mainmenu:active {color:  rgb(0,0,0); font-size:14pt; font-weight:bold;  padding: 5px 5px; text-decoration: none; }

div.mainpage {
	max-width:980px;
	margin: 0 auto;
	padding: 1px;
	text-align: center;
	/*border: 1px solid rgb(255,100,100);
	/* background-color : rgb(0,0,0);  */
	}

a {font-family:Helvetica; font-size:11pt} 
a:active {color:  rgb(127,173,248); text-decoration: none;}
a:visited  {
	color: rgb(255,255,0);
	text-decoration: none;
}
a:link  {
	color: rgb(255,255,0);
	text-decoration: none;
}
a:hover {
	color: rgb(200,0,0);
	text-shadow: 0px 0px 18px black, 0 0 25px red, 0 0 10px red;
}
a:hover  img{
	border-color: rgb(0,128,255);
	transition: transform 0.5s;
	filter: hue-rotate(180deg) drop-shadow(0px 0px 12px red); /*invert(100%); /*saturate(230%) /*drop-shadow(6px 6px 8px white)*/;
}


div.sectionPageTitle {
  background-color: rgb(67,67,67);
  color: rgb(255,255,255);
  border: 1px solid rgb(192,192,192);  
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: none;
   border-left-style: solid;   
   margin: auto;
   width:85%;  
   height:18px;
   display: table;
   padding: 4px 0;
   border-radius: 10px 10px 0px 0px ;
   text-align: center;
   font-weight: bold;	
} 
div.sectionMutilColonne {
  	/* border: 1px solid rgb(255,0,128);  */
	max-width:100%;
	margin: 0px; 
	padding: 0px;
	padding-left : 0px;
	padding-right : 0px;
	text-align: center; /*center*/ 
    vertical-align:top;
	
}

div.sectionPage {
  background-color: rgb(34,34,34);
  border: 1px solid rgb(192,192,192); 
  margin-top : 0px;
  margin-bottom : 4px;
  margin-right : 0px;
  margin-left : 0px;
  display: inline-block;
  vertical-align:top;
  border-radius:10px;
	/*height: 100%;*/
   width: 98%; 
	padding: 0px;
}

div.sectionPageEnrober {
   /* border: 1px solid rgb(255,255,0) */; 
   display: inline-block;
   vertical-align:top;
   margin-right : 4px;
   margin-left : 4px;
   margin-top : 4px;
   width: 98%; 
	
}

.inactiveText {
	color : rgb(128,128,128);
}

div.divspacer {
	margin: 6px;
	/* margin-top: 15px; */
	overflow:hidden;
}


.col100pourcent {
	width:100%;
	}
	
.rowheight150px {
height:150px;
}	

.textleft {
text-align: left;
}
.textright {
text-align: right;
}
.textcenter {
 text-align: center;
}

@media screen and (max-width: 980px) {
	 .sectionPage40pourcent {
    display: block;
	/*  background-color: lightblue;	 */
	 }
}

/* Image avec autorrsize */
img.image {
	height: auto;
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
    border-radius:10px;
	border: 1px solid rgb(120,120,120);
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin: 3px 3px 3px 3px;
}

/* Image avec autorrsize a travers du texte*/
img.imageintext {
	height: auto;
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
    border-radius:10px;
	border: 1px solid rgb(100,100,100);
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin: 0px 1px 10px 10px;
}

/*espace autour de l'image*/
img.imageborderright{ margin: 0px 8px 0px 0px; }
img.imageborderleft{ margin: 0px 0px 8px 8px; }

/*position de l'image a droite*/
.textImageWrapRight {
float: right;
 margin: 0 0 10px 10px;
} 
/*position de l'image a gauche*/
.textImageWrapLeft {
 float: left;
  margin: 10px 10px 0px 0px;
} 

/*Couleur td d'un tableau 
ex. section sphere celeste
*/
td.containerTitle {
   background-color: #666666;
 } 

/* 
div.alignblockleft {
    border: 1px solid rgb(255,255,120);
	align: left;
}  
*/



html { 
 /*background-color : rgb(16,16,16); 
  */
  background-image: url(../images/bg3.jpg);
/*  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  */
  background-repeat: repeat;
  background-attachment: fixed;
  height:100%
}

/*.parent {*/
 /*
border: 1px solid rgb(255,255,120);
 margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
 /* transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
 
/*
  text-align : center;
  display: table-cell; 
  vertical-align: middle;
  width :800px;
*/
  
/*
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
 /* transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  
}

/**************************************************************/
/**************************** LABIR ***************************/
/**************************************************************/

body.bodylabir
{
 
 font-family: Helvetica; font-size: 11pt;
 /* google font-family: 'Open Sans', sans-serif;
	*/
 background-color : rgb(64,64,64);
}
 
canvas.labircanvas
{
 color: rgb(128,128,128);  
 border:0px solid;
}
/*
hr.labirdiv {
width:99%;
height:1px;
background-color: rgb(0,0,0);
}
*/
div.labirboutons {
background-color: rgb(64,64,64);
}

table.labir {
 border:1px solid rgb(128,128,128); 
}


td.labir {
 border:1px solid rgb(128,128,128);
 background-color: rgb(64,64,64);
 width:20px;
}


.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell; padding-left : 5px; vertical-align: middle;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}


.button {
    background-color: rgb(0,128,128);
    border: none; /*1px solid white;*/
    color: white;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
}

.buttonover:hover {
    background-color: rgb(0,96,96);
    color: white;
}

.buttonLarge {
    width:120px;
	height:60px;
}

/*
div.containerMainMenu {
   background-color: rgb(128,128,128);
   border: 0px solid rgb(170,170,170);
   max-width :980px;
	
   display: table-cell; 
   margin: 0px auto;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 0px;
   padding-right:0px;
   
   border-radius:1px;
   word-wrap:break-word;
  
 }
*/
 
 
/**************************************************************/
/********************** Sphere celeste ************************/
/**************************************************************/

.sphere {
		 font-size: 12px;
}
 
 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: rgb(92,92,92);
    margin: auto;
    padding: 10px;
    border: 1px solid rgb(192,192,192);
    width: 400px;
}

/* The Close Button */
.close {
    float: right;
	color: rgb(255,255,0);
}

.close:hover,
.close:focus {
    color: rgb(0,0,0);
    text-decoration: none;
    cursor: pointer;
}
 

table.menuspherebg
 {
  background-color:rgb(0,0,0);
 }

.buttonTime {
    background-color: rgb(230,230,230);
    border: none;
    color: black;
    padding: 1px 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    width:20px;
    height:16px;
	transition-duration: 0.4s;
}

.buttonTime:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
  
div.section {
    background-color: #666666;
    font-weight: bold;
}

div.myCanvasContainer {
	position: relative;
}

#sunMoon{	 width: 265px;	 height: 80px;	 position: absolute; top:1px; left:580px;	 font-size: 12px;}
#moon{	 width: 300px;	 height: 80px;	 position: absolute; top:1px; 	 font-size: 12px;   }
#datesTime{	 width: 300px;	 height: 80px;	 position: absolute; top:100px; 	 font-size: 12px;   }
#datesBoutons{	 width: 90px;	 height: 80px;	 position: absolute; top:155px; 	 font-size: 12px;   }
#planetes{	 width: 780px;	 height: 20px;	 position: absolute; top:780px; font-size: 12px; }
div.planetesAlign {display:inline; margin: 2px; display: }

/**************************************************************/
/********************** Old ***********************************/
/**************************************************************/


div.topMenuBackground  {
 background-color: rgb(0,67,67);

 background-image: url(../images/bg-top.jpg);
 background-repeat: repeat;
 background-attachment: fixed;
 box-shadow: 0px 15px 20px rgb(20,20,20);
 width:100% -10px;
 padding: 9px;
 border-style: solid;
 border-color: rgb(90,90,90);
 border-right-width: 0px;
 border-left-width: 0px; 
 border-top-width: 0px; 
 border-bottom-width: 1px;
 }
 
div.float {
	padding: 3px;
	display:inline-table; 
 /* 	border: 1px solid rgb(255,0,0);  */
	vertical-align: top;
	text-align: center;
}

/*
div.float p {
 	text-align: center;
  }
*/
.clearfix {
    overflow: auto;
}  
  
div.centrerInPage {
     /*  border:1px solid rgb(0,255,0);    */
    display:table; 
	
    margin : 0px auto; 
	vertical-align: top;
	text-align: center;

} 


div.containerCollapse {
	padding: 4px;
 	/* border: 1px solid rgb(255,0,0);  */
}
div.containerTitle {
   background-color: rgb(67,67,67);
   border: 1px solid rgb(192,192,192);  
   
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: none;
   border-left-style: solid;   
   margin: auto;
   width:85%;  
   display: table;
   /*  width:940px;  */
  /*  max-width :940px; */   
   padding: 4px;
   border-radius: 10px 10px 0px 0px ;
   text-align: center;
   font-weight: bold;
} 
div.container {
   background-color: rgb(67,67,67);
   border: 1px solid rgb(192,192,192); 
   max-width :980px;
	

  
    display: table-cell; 
/*  display: table;   */  
   /* display: inline-block;  */   
   margin: 0px auto;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right:5px;
   
   border-radius:10px;
 /*   text-align: center; */
   word-wrap:break-word;
   
   /*empeche l'image de overfloder le div*/
   overflow-x: hidden; 
   overflow-y: hidden; 
   
  /*  vertical-align: middle; */
} 

 
div.containerPhoto {
   background-color: rgb(34,34,34);
   border: 1px solid rgb(192,192,192);
   display: table; 
   padding: 7px;
   border-radius:10px;
   text-align: center;
} 


 
/* div:hover{
background-color: rgb(255,65,65);
}  */



img.imagelittlespacer{ margin: 0px 2px 0px 0px; }
img.imagebigspacer{ margin: 0px 5px 0px 0px; }

img.imgcontainer {
    border: 1px solid rgb(120,120,120);
    padding: 1px;
	border-image-outset: 10px;
    border-radius:10px; 
}  
 
.titleThumnail{
    font-size: 8pt;
} 
 

 
 /*
 cadre avec juste photo
 */
div.cadrephoto {
/*    background-color: rgb(0,72,100);
   border: 2px solid rgb(170,170,170);
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;   
   margin: auto;
   padding: 8px;
   border-radius: 10px 10px 10px 10px ;
   text-align: center;
   clear: both; */
   
	max-width:100%;
	border: 1px solid rgb(170,170,170);
	background-color: rgb(92,92,92);
	margin: 5px;
	margin-top:0px;
	padding: 8px;
	border-radius:10px;
	
   
}
/*
div.cadrephoto2 {
   margin: auto;
   padding: 8px;
   clear: both;
}
 */
div.spacer {
 	clear: both;
} 
div.spacerhorizontal{
	height: 8px;
}
div.spacervertical{
	width: 8px;
}
  
div.textDisplay { 
    vertical-align: middle;
    padding: 2px;
}

	 
.alignleft {text-align: left;}
.alignright {text-align: right;}
.aligncenter {text-align: center;}

.valigntop {vertical-align: top;}
.valignmiddle {vertical-align: middle;}
.valignbottom {vertical-align: bottom;}

.textJustify {
 text-align: justify;
 text-justify: inter-word;
}

 


body.bodyphotodisplay {
 font-family: Helvetica; font-size: 11pt;
 color: rgb(255,255,255);  
 margin: 10px;
 padding: 10px;
 /*background-color : rgb(0,0,0); /*rgb(131,144,152);*/
}



body 
{
  height: 100%;

 font-family: Helvetica; font-size: 11pt;
 /*
 google font-family: 'Open Sans', sans-serif; 
*/	
 color: rgb(220,220,200);  
 margin: 0px;
 padding: 0px;
 /*background-color : rgb(64,64,64); /*rgb(131,144,152);*/  

 -webkit-text-size-adjust: none;


/*  background-image: url(../bgbody.gif);
  background-attachment:fixed;
 background-repeat:repeat-x;   */
}

/************************************************/
/* SphereObservateur   */
/************************************************/

.sliderSphereObservateur {
  -webkit-appearance: none;
  width: 500px;
  height: 10px;
  /*background: rgb(0,0,0);
  outline: none;*/
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}



/************************************************/
/* Menu de la page principale compatible IPAD et les autre browser   */
/************************************************/
.bg {background: url(backgroundmainpagemenu.gif);}
.menu_style {padding:0 0 0 1px; margin:0; list-style:none; height:24px; background:#ffffff url(backgroundmainpagemenu.gif) repeat-x; position:relative; font-family:Helvetica, sans-serif; }
.menu_style li.top {display:block; float:left; position:relative;}
.menu_style li a.top_link {display:block; float:left; height:24px; line-height:22px; color:#ffffff; text-decoration:none; font-size:16px; font-weight:bold; padding:0 0 0 2px; cursor:pointer;}
.menu_style li a.top_link span {float:left; font-weight:bold; display:block; padding:0 10px 0 10px; height:24px;}
.menu_style li a.top_link:hover {color:#000; background: url(backgroundmainpagemenu.gif) no-repeat;}
.menu_style li a.top_link:hover span {background:url(backgroundmainpagemenu.gif) no-repeat right top;}
.menu_style li:hover > a.top_link {color:#ffffff; background: url(../backgroundmainpagemenubg.gif) }
.menu_style li:hover > a.top_link span {background:url(../backgroundmainpagemenubg.gif) right top;}
.menu_style table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu_style a:hover {visibility:visible;}
.menu_style li:hover {position:relative; z-index:200;text-align: left;}
.menu_style ul, 
.menu_style :hover ul ul, 
.menu_style :hover ul :hover ul ul,
.menu_style :hover ul :hover ul :hover ul ul,
.menu_style :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

/*************************/
/* sous Menu item Generalite,pollution lumineuse,projet  */
/*************************/
.menu_style :hover ul.sub {left:2px; top:24px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:240px; height:auto;}
.menu_style :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:240px;}
.menu_style :hover ul.sub li a {font-weight:normal;display:block; font-size:13px; height:20px; width:240px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul.sub li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item lien */
/*************************/
.menu_style :hover ul.sub6 {left:-30px; top:24px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:240px; height:auto;}
.menu_style :hover ul.sub6 li {display:block; height:20px; position:relative; float:left; width:240px;}
.menu_style :hover ul.sub6 li a {font-weight:normal;display:block; font-size:13px; height:20px; width:240px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul.sub6 li a:hover {background:#49A3FF; color:#fff;}


/*************************/
/* sous Menu item Generalite sub menu les trophees */
/*************************/
.menu_style :hover ul :hover ul.sub4 {left:230px; top:0px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:240px; height:auto;}
.menu_style :hover ul :hover ul.sub4 li {display:block; height:20px; position:relative; float:left; width:240px;}
.menu_style :hover ul :hover ul.sub4 li a {font-weight:normal;display:block; font-size:13px; height:20px; width:240px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul :hover ul.sub4 li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item Services Au membres,activite  */
/*************************/
.menu_style :hover ul.sub2 {left:2px; top:24px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:520px; height:auto;}
.menu_style :hover ul.sub2 li {display:block; height:20px; position:relative; float:left; width:520px;}
.menu_style :hover ul.sub2 li a {font-weight:normal;display:block; font-size:13px; height:20px; width:520px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul.sub2 li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item Observation - outils diverse*/
/*************************/
.menu_style :hover ul :hover ul.suboutils {left:150px; top:0px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:300px; height:auto;}
.menu_style :hover ul :hover ul.suboutils li {display:block; height:20px; position:relative; float:left; width:300px;}
.menu_style :hover ul :hover ul.suboutils li a {font-weight:normal;display:block; font-size:13px; height:20px; width:300px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul :hover ul.suboutils li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item service - Affiches, kiosques et drapeaux*/
/*************************/
.menu_style :hover ul :hover ul.subaffiches {left:200px; top:0px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:300px; height:auto;}
.menu_style :hover ul :hover ul.subaffiches li {display:block; height:20px; position:relative; float:left; width:300px;}
.menu_style :hover ul :hover ul.subaffiches li a {font-weight:normal;display:block; font-size:13px; height:20px; width:300px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul :hover ul.subaffiches li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item observation ,documentation */
/*************************/
.menu_style :hover ul.sub3 {left:2px; top:24px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:320px; height:auto;}
.menu_style :hover ul.sub3 li {display:block; height:20px; position:relative; float:left; width:320px;}
.menu_style :hover ul.sub3 li a {font-weight:normal;display:block; font-size:13px; height:20px; width:320px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul.sub3 li a:hover {background:#49A3FF; color:#fff;}

/*************************/
/* sous Menu item contact  */
/*************************/
.menu_style :hover ul.sub5 {left:-115px; top:24px; right:2px; background: #355d70; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:270px; height:auto;}
.menu_style :hover ul.sub5 li {display:block; height:20px; position:relative; float:left; width:270px;}
.menu_style :hover ul.sub5 li a {font-weight:normal;display:block; font-size:13px; height:20px; width:270px; line-height:20px; text-indent:5px; color:#ffffff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;}
.menu_style :hover ul.sub5 li a:hover {background:#49A3FF; color:#fff;}

.menu_style :hover ul :hover ul,
.menu_style :hover ul :hover ul :hover ul,
.menu_style :hover ul :hover ul :hover ul :hover ul,
.menu_style :hover ul :hover ul :hover ul :hover ul :hover ul{left:90px; top:-4px; background: #fff; padding:0px 0; border:1px solid #999999; white-space:nowrap; width:93px; z-index:200; height:auto;}