body
/*  fichier style crée par JCG, modifié par JCG le 20170606  */

{
	font-family: Comic Sans MS;
	/* font-family: Arial; */
	font-size: 20px;
	background-color:white; 
	color:white;
	background-image: url("fondecran/background-2000.png"); 
	background-attachment:fixed; 
}
     
/* entete avec logo et libelle */


/*  header  */
header 
{
	background:  url('');
	color:white; 
	border-radius:  10px;
}

header a
{
	color: white;
}


a
{
	color: white; 
}	

	
ul a:link {color:yellow;}		
ul a:hover{color:red;}
ul a:focus 
{
	color: red;
	background-color: blue; 		
}						

img{float:left;}

img:hover
{
	color: red; 
	font-size: 10px		
}


footer
{
	font-size: 1.1em;  
}	


/*  navigation  */
ul.navig li 
{
		margin:0;
		padding:0;
		list-style-type: none;
		float: left;
		border: 1px solid #486B02;
		background-color: none;	
		width: 12%;
		}
	
ul.navig2 li  /* essai pour séparer les liens en bas de page MHD 19/6/2017 */
{
		/*margin:0 */
		margin-left:5px;
		padding:0;
		list-style-type: none;
		float: left;
		border: 1px solid #FFFFFF;
		background-color: none;	
		width: 13%;
		}
	ul.navig3 li  /* test pour pb: quand on zoome les images se chvauchent à droite MHD 8/4/18 */
{
		/*margin:0 */
		margin-left:5px;
		margin-right:5px
		padding:0;
		list-style-type: none;
		float: left;
		border: 1px solid #FFFFFF;
		background-color: none;	
		
		}
		
/*  =====   menu deroulant   =======   */		

ul.deroul4, ul.deroul4 ul 
{
		margin:0;
		padding:0;
		list-style-type: none;
		float: left;
		/*border: 1px solid #486B02; */
		background-color: none;	
		z-index: 1;
		}
		
		ul.deroul, ul.deroul ul 
{
		margin:0;
		padding:0;
		list-style-type: none;
		float: left;
		border: 1px solid #486B02;
		background-color: none;	
		z-index: 1;
		}
ul.deroul li
{
		float: left;
		width: 20%;
		background-color: none;
		}
		
ul.deroul2 li
{
		float: left;
		width: 90%;
		background-color: none;
		}
		

/* pour masquer les menus déroulants jusqu'à ce qu'ils soient activés, il faut les positionner de maniàre absolue (position: absolute) puis les masquer en les sortant à gauche de l'écran.  */
ul.deroul li ul 
{
		width: 20%;
		position: absolute;
		left: -999em
		}
		
/* en ajoutant une pseudo-classe hover à lélément de liste parent, on peut faire réapparaître la liste en changeant sa position pour la ramener à son emplacement de départ */
.deroul li:hover ul 
{		
		left: auto;
		background-color: #003366;
		}			
/* les styles suivants obligent les liens de derouligation à se comporter comme des éléments de niveau bloc et changent l'apparence de la liste en leur attribuant des couleurs d'arrière-plan et des bordures biseautées; */
ul.deroul a 
{
		display: block;
		color: white;
		text-decoration: none;
		padding: 0.3em 1em;
		border-right: 1px solid #486B02;
		border-left: 1px solid #E4FFD3;		
		}	
ul.deroul li li a 
{	
		border-top: 1px solid #E4FFD3; 
		border-bottom: 1px solid #486B02;
		border-left: 0;
		border-right: 0;
		}
			
/* suppression des bordures indésirables sur les derniers éléments de liste */
ul.deroul li:last-child a 
{
		border-right: 0;
		border-bottom: 0;
		
		}

/*  ===== fin  menu deroulant   =======   */	
	
	.moonright
	{
		float: right;
	}
	.milieu
	{
	float: center;
	}
	
.cadre	
{
	display: inline-block;
	border: 5px navy solid;
	margin-left: auto;
    margin-right: auto;	
    width: 30% ;	
	}	
	
.cadretitre	
{
	display: inline-block;
	background-color: #0000FF;
	width: 95%;
	}	
		
.cadrecouleur
{
	border-color:red;
	}
	
.cadrecouleur2
{
	border-color:orange;
	}
	
.spacer
{
	clear:both;
	}
	
.bordimg 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 1px   ;		
	}	
.bordimg2 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 2px   ;		
	}	
		
.bordlogo 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 5px  solid ;		
	}		

.bordlogo2 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 4px  solid ;
	color: white;
	}	
	.bordlogo3 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 3px  solid ;
	color: red;
	}	
	.bordlogo4 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 1px  solid ;
	color: white;
	}
.bordlogo5 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 0.5px  solid ;
	color: blue;
	}	
.bordlogo6 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 2px  solid ;
	color:#7FDD4C ;
	}			
		
.class-schiaparelli 
{
        width: 95%;	
	border: 3px cyan solid ;
	}
	
.audio 
{
   
   color: black;
   height: 28px;

	}
			
#entete 
{
	left:0px; color:white; 
    width:99%; height:125px; margin:0; border: solid 3px navy;
	text-align:center;
	}
	
#pied  
{ 
	position: relative; top: 0px;
	left:0px; color:white; 
	width:99%; height:125px; margin:0; border: solid 3px navy;
	text-align:center;
	}
	 
.piedpage  
{
	position: relative; top: 0px; 
	left:0px; color:white; 
	width:99%; height:125px; margin:0; border: solid 3px navy;
	text-align:center;
	}
			
			
div.bordlogo 
{
	display: -moz-inline-stack;
	display: inline-block;
	border: 2px navy solid;		
	}
	

.class-europe:hover 
{
	}
	/* ajout MHD 3/04/18 */
.class-07em
{font-size:0.7em
}
p {
  border: 1px solid red;
}

.margerevue
{
 margin-right:20px;
 
}
/* Zoomer les images au passage de la souris ajout du 8/3/19 */

.fois1-5:hover img {
transform:scale(1.5);
}

.foisdeux:hover img {
transform:scale(2);
}
.foistrois:hover img {
transform:scale(3);
}
.foisquatre:hover img {
transform:scale(4);
}
.foiscinq:hover img {
transform:scale(5);
}

/* MHD essai pour cadrer une image au milieu d'un cadre ou d'un bloc 27/06/2019 */
.img-displayed{
    display: block;
    margin-left: auto;
    margin-right: auto; 
}