body  {
	
	font-family: "Comic Sans MS", cursive;
	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000000;
	background-color: black;	
}

#container {
	width: 99%;
	min-width: 770px;
	height: auto;
	padding-bottom: : 8px;
	margin: 0px auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	border: 0px solid black;
	overflow: hidden;
	background: url(../images/BanniereVille760.jpg) no-repeat center fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
	
} 

#header {

	width: 96%;
	height: 124px;
	text-align: center;
	
	margin-top: 2px;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
	
	
	border: 0px solid white;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
} 

#headerGauche  {
	width: 24%;
	height: 100px;
	float: left;
	margin-left: 1%;
	border: solid red 0px;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #0007dd;
	
}

#headerGauche img    {
	margin-top: 2px;
}

#headerCentre   {
	
	color: #bf076e;
	width: 30%;
	height: 100px;
	float: left;
	
	margin-left: 14.5%;
	
	border: 0px solid white;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
}

#headerCentre h2   {
	margin-top: 4px;
	}
	
#headerDroite   {
	
	color: #bf076e;
	width: 24%;
	height: 100px;
	float: right;
	padding-top:0px;
	
	margin-right: 1%;
	
	border: solid  0px red;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #0007dd;
}


#headerDroite p   {

	margin-top: 1px;
	font-size: 96%;
}
#headerDroite  img {
	
	margin-top: 2px;
}	

#Topcontent    {
	width: 96%;
	height: 150px;
	margin-top: 4px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	border: solid 0px #ff5ddd ;
} 

#Topcontent   h3{
	
	color: #ff00ff;
	width:70%;
	max-width: 70%;
	
	padding-top: 2px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: solid 0px #ff5ddd ;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	
	}
#Topcontent   p{
	
	color: #fab5ff;
	width: 60%;
	max-width: 60%;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	text-align: center;
	border: solid 0px #ff5ddd ;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	background-color: black;
	}	

#Topcontent ul	{
	
	font-size: 98%;
	width : 88%;
	height : 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
	padding : 0px;

list-style-type : none; 
}

#Topcontent ul li	{
	display: inline;
	margin-right: 1%;
	border : 1px solid #ff00ff;
	padding: 4px;
	background-color: #faf30c;
	
}

#Topcontent  a  {
	
	
	color: black;
	height: 28px;
	font-weight: bold;
	text-decoration: none; /*  pas de soulignement*/
	
	text-align: center;
	
	
		
}
#Topcontent  a:visited { /* Les liens lorsque le curseur est dessus. */
	color: black;
	height: 28px;
	font-weight: bold;
	text-decoration: none;
	
	text-align: center;
}

#Topcontent  a:hoover { /* Les liens visités. */
	color: black;
	height: 28px;
	font-weight: bold;
	text-decoration: none;
	
	text-align: center;
}



#content {

	width: 96%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 1px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 6px;
	overflow: hidden;
	border: 0px solid red;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
}

#content #encadreTop     {
	
	width: 99.5%;
	height: 110px;
	margin-top: 6px;
	
	margin-bottom: 9px;
	border: 0px solid pink;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	
}

#content #encadreTopgauche   {
	
	color: #bf076e;
	width: 78%;
	max-width:78%;
	height: auto;
	float: left;
	
	
	border: solid 0px silver;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);	
}


	
#content #encadreTopgauche   h4{
	
	width: 84%;
	font-size: 105%;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

#content #encadreTopdroite   {

	
	width: 19%;
	max-width: 19%;
	height: 102px;
	float: right;
	
	margin-top: 3px;
	margin-right: 1.5%;
	padding-top: 0px;
	border: solid 0px red;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-image: url("../images/inProgress/granddrapgay.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
	
	
	
}

#content #encadreTopdroite  a  {
	
	display: block;
	
	font-weight: bold;
	text-decoration: none; /*  pas de soulignement*/
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: solid 0px white;
	
	
		
}
#content #encadreTopdroite  a:visited { /* Les liens lorsque le curseur est dessus. */
	
	display: block;
	font-weight: bold;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#content #encadreTopdroite  a:hoover { /* Les liens visités. */
	
	display: block;
	font-weight: bold;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


	
#encadreTopdroite  img{
	
	display: block;
	border: 0px;
	margin-top: 26px;
	margin-left: auto;
	margin-right: auto;
	border: solid 0px red;
	text-align: center;

}
	


#panorama    {
	
	float:left;
	width: 98%;
	margin-top: 4px;
	margin-left: .5%;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 0px solid yellow;
	
}
#panorama image    {

	width: 200px;
	padding-bottom: 0px;
	border: solid 1px #ff00ff;
	}



	
#bienvenue   {
	
	text-align: center;
	width: 56%;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	margin-bottom:6px;
	background-color: white;
	border: none;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);

	}
#bienvenue  h4 {
	color: #0007dd;
	margin-top: 0px;
	
	}
#colonneGauche {
	
	
	float: left;
	width: 18%;
	height: 348px;
	margin-top: 10px;
	margin-bottom: 1px;
	
	border: solid 0px #ff00ff;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	
	
}

#colonneGauche img {
	
	width: 94%;
	max-width: 94%;
	max-height: 100%;

}
#colonneGauche  a { /* Les liens qui ne sont pas sous le curseur. */
	color: black;
	font-weight: bold;
	
	
	
}
#colonneGauche a:visited { /* Les liens lorsque le curseur est dessus. */
	color: black;
	font-weight: bold;
	
	text-decoration: none;
	
}

#colonneGauche a:hoover { /* Les liens visités. */
	color: black;
	font-weight: bold;
	
	text-decoration: none;
	
}



#colonneGauche table  {

	font-size: 90%;
	margin-top: 8px;
	border-collapse: separate;
	border-spacing: 18px 18px;
	
	}
	
#colonneGauche  table  tr td  {
	
	text-align: center;
	height: 22px;
	border: solid 1px #c72aa0; 
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #fae9ff;
	}



#galerie   {
	
	float:left;
	width: 79%;
	max-width: 79%;
	height: 348px;
	margin-top: 8px;
	margin-bottom: 1px;
	margin-left: 1%;
	
	border: solid 0px yellow;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
		
	}

#galerie  a { /* Les liens qui ne sont pas sous le curseur. */
	color: #00f;
	font-weight: bold;
	font-size: 110%;
	
	
}

#galerie a:visited { /* Les liens lorsque le curseur est dessus. */
	color: #00f;
	font-weight: bold;
	font-size: 110%;
	text-decoration: none;
	
}

#galerie a:hoover { /* Les liens visités. */
	color: #00f;
	font-weight: bold;
	font-size: 110%;
	text-decoration: none;
	
}

	
#boiteCentre   {

	float: left;
	width: 73%;
	max-width: 73%;
	height: 328px;
	margin-top:0px;
	padding-top: 20px;
	border: solid 0px blue;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #fab5ff;

	}
	
#boiteCentre  table   {
	
	font-size: 90%;
	margin-top:0px;
	margin-left: 0px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 20px 30px;
	border: solid 0px black;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	}

#boiteCentre  table  td  {
	
	height: 88px;
	text-align: center;
	border: none;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #ffa500;
	
}
	
#boiteCentre p    {
				
		text-align: left;
		
}


#boiteCentre  a { /* Les liens qui ne sont pas sous le curseur. */
	color: #00f;
	font-weight: bold;
	
}

#boiteCentre a:visited { /* Les liens lorsque le curseur est dessus. */
	color: #00f;
	font-weight: bold;
	text-decoration: none;
}

#boiteCentre a:hoover { /* Les liens visités. */
	color: #00f;
	font-weight: bold;
	text-decoration: none;
	
}

#boiteInterieurCentre   {

	width: 94%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
	border: solid 0px red;	
}

#boiteInterieurCentre  p {
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	
	
	border: solid 0px green;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}
	
#boiteInterieurCentre  h2  {
		
		font-size: 130%;
		margin-top: 5px;
		color: #c72aa0;
		text-align: center;		
}
		
#boiteInterieurCentre  h4  {
		
		font-size: 105%;
		color: #c72aa0;
		text-align: center;
		margin: 10px;
		
}		
	
#inscrivezvous  {

	font-size: 1.25vw;
	width: 24%;
	max-width: 24%;
	height: 348px;
	float: right;
	margin-top: 0px;
	color:  #bf076e;
	text-align: left;
	border: solid 0px green;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
	background-color:#a000c0;
	

}

#inscrivezvous h3    {
	
	color: #ffc8ee;
	margin-top: 28px;
	margin-bottom: 24px;
	margin-left: auto;
	margin-right: auto;
	}

#inscrivezvous img{
	
	margin-left: auto;
	margin-right: auto;
	border: solid 0px red;
	text-align: center;
}

#inscrivezvous p  {

	color: #ffc8ee;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	
}

#boiteRetour  {
		width: 100%;
		float: left;
		
		
		margin-top: 8px;
		text-align: center;
		
		
}	
	
#boiteRetour  a { /* Les liens qui ne sont pas sous le curseur. */
	
	padding-left: 8px;
	padding-right: 8px;
	color: black;
	font-size: 90%;
	border: 0px solid white;
		-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #fab5ff;
	
}
#boiteRetour a:visited { /* Les liens lorsque le curseur est dessus. */
	padding-left: 8px;
	padding-right: 8px;
	color: black;
	font-size: 90%;
	text-decoration: none;
	border: 0px solid white;
		-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #fab5ff;
}

#boiteRetour a:hoover { /* Les liens visités. */
	
	padding-left: 8px;
	padding-right: 8px;
	color: black;
	font-size: 90%;
	text-decoration: none;
	border: 0px solid white;
		-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #fab5ff;
}	
	
#footer {

	width: 94%;
	height: 40px;
	float: left;
	margin-top: 2px;
	margin-bottom: 6px;
	margin-left: 2%;
	border: solid black 0px;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: #ff00ff;
	}
	
#footer #texteDefile    {
	
	
	color: #00f;
	font-size: 96%;
	width: 70%;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	border: 0px solid white;

	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	background-color: white;
}
	
.petit {
	font-size: 82%;
	}
.petitCentre   {
	display: block;
	font-size: 94%;
	margin-top: 18px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 90%;
}	
.paddingTexte	{

	text-align: center;
	font-size: 90%;
	margin-top: 4px;
	margin-left: 1.5%;
	margin-right: 1.5%;
	}

.small  {
	font-size: 90%;
	text-align: left;
	margin-left: 28px;
	margin-right: 28px;
}
.plusGros    {
	font-size: 125%;
	}
.menugeneral   {
	font-size: 90%;
	
	border: solid black 2px;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: white;
	}
	

.menugay   {
	
	font-size: 110%;
	height: 40px;
	border: solid black 2px;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color: white;
	}	
.centre  {
	text-align: center;
	
	}
.centrer   {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 80%;
}

.echange {
		font-size: 1.25vw;
		color: #bf076e;
		text-align: center;
		margin: 10px;

}
	
.cliquezici     {
	
	width: 74%;
	font-size: 84%;
	
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	text-align: center;
	
	border: solid 1px #ff00ff;
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	background-color:  white;
	}
.lienInscription   {
	
	
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 80%;
	border: 2px solid  #ff00ff; 
	-moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(/PIE.htc);
	
	background-color: white;
}