html, body {
overflow:hidden;margin:0px;padding:0px;  
  font-family: Georgia, "Times New Roman", Times, serif;
 } 
  
img.centre{
/* centrer la photo de bethune*/
display:block;
margin-left:auto;
margin-right:auto;
}
#page {
left:0px;
	/*width: 100%;*/
	height:2000px;overflow:hidden;
	margin-right: auto;
	background-image: url("/Images/arriere%20plan%20principal.jpg");
	/*background-image: url("/Images/fond d'ecran.jpg");*/
	border: 6px grey ridge;
 
}
article {
position:fixed;
overflow:auto;overflow-x:hidden;
/*width:85%;*/
	top:160px;
	left:172px;
	right:5px;
	bottom:62px;
	border-left:6px grey ridge;
	border-top:6px grey ridge;

}

header {
height:152px;
position: fixed;
 width:inherit;

}
/*pied de page*/
footer{
/*width:1025px;*/
position:fixed;bottom:0px;right:0px;left:172px;
height:46px;
 background-color: #0008b;
background-color: rgba(192, 192, 192, 0.5);
/*margin-top:-30px;*/
border-top:6px grey ridge;
border-left:6px grey ridge;
padding-top:6px;
}
img.footer {
	width: 110px;
	height:46px;
	margin-left:14px;
	

}
img.aucentre{
display:block;margin-left:auto;margin-right:auto}

/*--------début du menu de premier niveau--------*/

#menu
{
 position:fixed;
left:10px;
top:133px;/*140

	  /*je met une largeur correspondant a mon image de fond pour le placer a gauche dans l'image */
	height: auto;      
	list-style-type: none;  
	/*margin-top: 182px ;    /*je met un margin 170 pour le baisser*/
	padding: 0; 
	     
	
}
#menu > li
{
	
	width: 150px;
	margin: 5px;
	padding: 0;
	font-size:medium;    
	/*border-right:6px grey ridge;*/



}
#menu li a{
	display: block;         
	color: #FFFFFF;font-size:medium;        
    background-color: #0008b;
	background-color: rgba(192, 192, 192, 0.5);
	margin: 0;
	padding: 3px 4px;
	border:1px solid #FFFFFF;
	text-decoration:none ;
	
	moz-border-radius:8px 0;
	webkit-border-radius:8px 0;
	border-radius:8px 0;
	
}


#menu li a:hover {
        background-color: rgb(175, 214, 1);
        background-color: rgba(175, 214, 1, 0.5);
}
/*---------------fin du menu de premier niveau-------------*/

/*---------------début du menu déroulant-------------------*/

#menu .menuderoulant {
	width:187px;    /*une largeur supérieur au menu li pour se rendre sur le menuderoulant meme avec un espace*/
	display: none;
	list-style-type: none;
	margin: -86px 0 0 173px;   /*-54pxune marge top inferieur pour remonter le menuderoulant et une marge left pour le decaler à droite du menu*/
	padding: 0;
	border: 0;
	position:absolute; /*pour eviter tout decalage*/
	font-size:medium;    
}
#menu .menuderoulant li
{
	float: right;
	margin:0 auto;
	padding: 0;
	border: 0;
	width: 210px;
    border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	

}
#menu .menuderoulant li a
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;       
    background-color:rgb(0, 0, 0);
    background-color:rgba(0,0,0,0.5);
    font-size:medium;    
}
#menu .menuderoulant li a:hover
{
	background-color: rgb(00, 255, 127);
    background-color: rgba(00, 255, 127, 0.8);
    

}

#menu .menuderoulant li a:visited {
    background-color:rgb(227, 22, 30);
    background-color:rgba(227, 22, 30, 0.5);
    
}



#menu li:hover > .menuderoulant { 
	display: block; 
	
}
/*----------fin du menu déroulant----------------*/
/* page principale */

marquee.premier {
width:100%;
	behavior:alternate;color:white; 
	background-color: #0008b;
background-color: rgba(192, 192, 192, 0.5);
;font-size:18px;font-style:oblique;font-weight:bold;height:20px

}
marquee.deuxieme {
width:100%;
behavior:scroll;scrollamount:10 ;color:yellow;
 background-color: #0008b;
background-color: rgba(192, 192, 192, 0.5);
	margin-top:-5px;color:yellow;font-family:Verdana, Arial;font-size:22px;font-style:none;font-weight:bold
}

h1 {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: #ffff99;  
  font-size: 2.3em;  
  text-decoration: underline;  
  text-align: center;
}

h2 {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: blue;  
  font-size: 2em;  
  text-decoration: none;  
  text-align: center;
}
h2.rouge {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: red;  
  font-size: 2em;  
  text-decoration: none;  
  text-align: center;
}
h3 {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: #ffff99;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
}
h3.rouge{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: red;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
}

h3.noir {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: black;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
}

h4 {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: blue;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
}
h4.rouge{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: red;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
}
h4.jaune{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: yellow;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
}

h4.noir {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: black;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
  }
  h4.vert{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: green;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: center;
  }
  h4.vertleft{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: green;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
  }

h5 {  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: blue;  
  text-align: center;
}
h4.vertclair{  
  font-family: Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: lime;  
  font-size: 1.1em; 
    text-decoration: none;  
  text-align: left;
}



h1.france {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: yellow;  
  font-size: 2em;  
  text-decoration: none;  
  text-align: left;
}

h1.francepetit {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: yellow;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
}

h1.franceenrouge {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: red;  
  font-size: 1.8em;  
  text-decoration: none;  
  text-align: left;
}

h1.englandpetit {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: white;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
}

h1.belgepetit {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: lime;  
  font-size: 1.5em;  
  text-decoration: none;  
  text-align: left;
}

h1.tous {  
  font-family: century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: yellow;  
  font-size: 1.3em;  
  text-decoration: none;  
  text-align: left;
}

h1.england {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: white;  
  font-size: 2em;  
  text-decoration: none;  
  text-align: left;
}

h1.belge {  
  font-family: arial, black, century, gothic, Verdana, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;  
  color: lime;  
  font-size: 2em;  
  text-decoration: none;  
  text-align: left;
}

a.france {  
  color: yellow;  
  text-decoration: none;
}

a.francetrespetit {  
  color: red;  
  text-decoration: none;  
  font-size: 0.8em;
}

a.englandtrespetit {  
  color: white;  
  text-decoration: none;  
  font-size: 0.8em;
}

a.belgetrespetit {  
  color: lime;  
  text-decoration: none;  
  font-size: 0.8em;
}

a.england {  
  color: white;  
  text-decoration: none;
}

a.belge {  
  color: lime;  
  text-decoration: none;
}

a:hover {  
  color: red;
}

a:visited {  
  text-decoration: none;
}
/* compteur*/
.compteur

{		position:fixed;
		top:445px;
	color: white;
	font-size:small;
	width: 150px;
	margin: 5px;
	
	margin-bottom: 20px;
	text-align:center

}



/*diaporama*/
 #diaporama {
		width:600px;
		height:416px;
		position:absolute;
				
		/*left:50%;		/* On pousse le diaporama à droite de la moitié de la largeur de la fenêtre */
		margin-left:120px;/*-300px;	/* puis on le rapproche de la gauche de la moitié de sa propre largeur. */
		
		/*top:50%;		/* On pousse le diaporama en bas de la moitié de la hauteur de la fenêtre */
		margin-top:0px;/*-208px;	/* puis on le rapproche du haut de la moitié de sa propre hauteur. */
	    }
	    #diaporama img:hover {
	    opacity:1;
	}
	    #diaporama div img + img,
	 	#diaporama  div span span{
    	display:none;}
    	#diaporama div img:hover + img {
	display:inline;
	position:absolute;
	width:450px;
	left:50%;
	margin-left:-225px;
	height:416px;
	top:50%;
	margin-top:-208px;
	z-index:1;
	
	}
	/*affichage texte sur fond orange */
	#diaporama div span:hover span {
	display:block;
	position:absolute;
	/*padding:0px 5px 0px 5px;*/
	width:600px;
	text-align:center;
	text-decoration:none;
	background-color:orange;
	top:400px;
	border-radius:0px 0px 10px 10px;	
	
}


	    #diaporama div img + .grande {	/* On utilise ici le sélecteur de frère adjacent */
		display:none;			/* pour rendre tous nos agrandissements invisibles. */
	    }
	    #diaporama div img:hover + .grande {
		display:inline;			/* Au survol de la souris, l'image adjacente à la miniature, notre agrandissement, devient visible */
		position:absolute;		/* et on le place au centre de la page pour qu'il se loge au centre du diaporama. */
		width:450px;			/* Les dimensions de l'agrandissement sont les mêmes que celles de notre div.centre. */
		left:50%;
		margin-left:-225px;	/* On centre l'agrandissement par rapport à sa propre largeur. */
		height:300px;
		top:50%;
		margin-top:-157px;	/* On centre l'agrandissement par rapport à sa propre hauteur. */
	    opacity:1;
		text-decoration:none;
	    }
	    #diaporama img {
		float:left;
		width:75px;
		height:50px;
		opacity:0.7;
		-moz-border-radius: 10px;
	    -webkit-border-radius: 10px;
	    -o-border-radius: 10px;
	    -khtml-border-radius: 10px;
	    border-radius: 10px;
	    }
	    #diaporama .haut,
	    #diaporama .bas {
		width:600px;
		height:50px;
	    }
	    
	    #diaporama .gauche ,
	    #diaporama.droite{
		float:left;
		width:75px;
		height:300px;
	    }
	    #diaporama .centre {
		float:left;
		width:450px;
		height:300px;
	    }
	    #diaporama .centre .contenu {
		position:absolute;
		width:450px;
		margin-top:240px;
		font-family: Tahoma, Geneva, Kalimati, sans-serif; 
		text-align:center;
		

	    }
        .auto-style1 {
			text-align: right;
			color:gray;
		}
		
		}
        .auto-style2 {
			border-width: 0px;
		}

address {  
  margin-top: 1em;  
  padding-top: 1em;  
  border-top-width: thin;  
  border-top-style: dotted;  
  border-top-color: initial;
}