body{ 

 font-family: arial;
 font-size: 1em;
 line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

header {
	
	vertical-align: middle;
	margin: 0;	
    padding: 0;		
}

nav {

border-radius:0.5em; 	
background-color: #E8E8E8;
text-align: center;
margin-left: 5%; 
margin-right: 5%; 

}

nav ul{
	    margin: 0;
	    padding: 0;
}

nav ul li {
	    display: inline-block;
	    list-style-type: none;
}

ol {
    background-color: #E8E8E8;
	border-radius:1em;
	margin-left: 5%; 
	margin-right: 5%; 	
}

ol li {
    padding: 0.3em;
	list-style-type: decimal;
	font-size: 1em;

}

footer {
	background-color: #CCCCCC;
	border-radius:1em;
	text-align: right;
	}

#navbottom {
 vertical-align: middle;
 background-color:black;
 width:930px;
 clear:both;
 display:block;
 overflow:auto;
 }
 
#centrage {text-align: center;}


p{
font-size:1em;
font-family: Arial; 
font-weight: normal;
color: black;
vertical-align: middle;
text-align : left; 
margin-left: 5%; 
margin-right: 5%; 
margin-top: 0%;
margin-bottom: 0%;
}

p.marge{
font-size:1em;
font-family: Arial; 
font-weight: normal;
color: black;
vertical-align: middle;
text-align : left; 
margin-left: 5%; 
margin-right: 5%; 
margin-top: 0%;
margin-bottom: 0%;
}


p.marge2{
font-size:1em;
font-family: Arial; 
font-weight: normal;
color: black;
vertical-align: middle;
text-align : left; 
margin-left: 2em; 
margin-right: 2em; 
margin-top: 0%;
margin-bottom: 0%;
margin-left: 5%;
margin-right: 5%; 
}
p.marge1{
font-size:0.9em;
font-family: Arial; 
font-weight: normal;
color: black;
vertical-align: middle;
text-align : left; 
margin-left: 1em; 
margin-right: 1em; 
margin-top: 0%;
margin-bottom: 0%;
}


p.ville {
font-size: 0.8em;
color: gray;
vertical-align: middle;
text-align : right;
margin-top: 0%; 
margin-bottom: 0%;}
}

p.blue {
font-size: 1em; 
font-family: Arial;
font-weight: bold;
color: #004184;
text-align : left;
margin-left: 5%; 
margin-right: 5%; 
margin-top: 0%; 
margin-bottom: 0%;}

p.green {
font-size: 1em; 
font-family: Arial;
font-weight: bold;
color: #008600;
text-align : left;
margin-left: 5%; 
margin-right: 5%; 
margin-top: 0%; 
margin-bottom: 0%;}

p.orange {
font-size: 1em; 
font-family: Arial;
font-weight: bold;
color: #FF751a;
text-align : left;
margin-left: 5%; 
margin-right: 5%; 
margin-top: 0%; 
margin-bottom: 0%;
}

p.right {
text-align: right;
}
p.rightmargin {
text-align: right;
margin-right: 5%; 
}
.centrage {text-align: center;}
.centrageblack {text-align: center; background-color: black;}
.centragegray {text-align: center; color: lightslategray;}
.centragefondblanc {text-align: center; background-color: white;}
.centragesmall {text-align: center;}

.small{font-size: 8pt;}

.bluebold { color: #004184; font-weight: bold; }
.orangebold { color: darkorange; font-weight: bold; }
.greenbold { color: #008600; font-weight: bold; }

.blue { color: #004184; }
.orange { color: #FF751a; }
.green { color: #008600;}
.gray { color: lightslategray;}
.smallgray { color: lightslategray; font-size: 0.8em;}

sup { font-size: 0.7em; }


table,td,th {
font-size: 10pt;
font-family: Arial;
}

th {
 font-size: 10pt;
 font-family: Arial;
 font-weight: normal;
 background-color: #CCCCCC;
 }

td {
border-bottom: 1px solid;
background-color: silver;

}

table {
width : 100% ;}

h1 { border-radius:1em; font-size:1.5em; font-family: Arial; color: black; background-color: lightslategray ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%;  }
h1.blue { border-radius:1em; font-size:1.5em; font-family: Arial; color: #FFFFFF; background-color: #004184; ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%; }
h1.green { border-radius:1em; font-size:1.5em; font-family: Arial; color: #FFFFFF; background-color: #008600; ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%; }
h1.orange { border-radius:1em; font-size:1.5em; font-family: Arial; color: #FFFFFF; background-color: #FF751a; ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%; }
h2 { border-radius:1em; font-size:1.4em; font-family: Arial; color: black; background-color: #CCCCCC ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%; }
h2.actualites { border-radius:1em; font-size:1.8em; font-family: Arial; color: #004184; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%; }
h2.orange {border-radius:1em; font-size: 1.3em; font-family: Arial; font-weight: normal; color: white; background-color: #ff751a; text-align : center; margin-left: 5%; margin-right: 5%;}
h2.green {border-radius:1em; font-size: 1.3em; font-family: Arial; font-weight: normal; color: white; background-color: #008600; text-align : center; margin-left: 5%; margin-right: 5%;}
h2.blue {border-radius:1em; font-size: 1.3em; font-family: Arial; font-weight: normal; color: white; background-color: #004184; text-align : center; margin-left: 5%; margin-right: 5%;}
h3 {font-size:0.9em; color: lightslategray; vertical-align: middle; text-align : left; margin-left: 3em; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%;  }
h3.orange {border-radius:1em; font-size: 1.2em; font-family: Arial; font-weight: normal; color: white; background-color: #ff751a; text-align : center; margin-left: 5%; margin-right: 5%;}
h3.green {border-radius:1em; font-size: 1.2em; font-family: Arial; font-weight: normal; color: white; background-color: #008600; text-align : center; margin-left: 5%; margin-right: 5%;}
h3.blue {border-radius:1em; font-size: 1.2em; font-family: Arial; font-weight: normal; color: white; background-color: #004184; text-align : center; margin-left: 5%; margin-right: 5%;}
h4 { font-size:0.9em; color: white; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; margin-left: 5%; margin-right: 5%;  }

a:link { font-family: Arial; color: black;  }
.lienmenu:link {font-family: Arial; color: white; text-decoration: none; }
.lienorange:link {font-family: Arial; font-weight: normal; color: black; text-decoration: none; border-bottom: 3px solid #FF751a; }
.lienblue:link {font-family: Arial; font-weight: normal; color: black; text-decoration: none; border-bottom: 3px solid #004184; }
.liengreen:link {font-family: Arial; font-weight: normal; color: black; text-decoration: none; border-bottom: 3px solid #008600; }
.lienboldorange:link {font-family: Arial; font-weight: bold; color: black; text-decoration: none; border-bottom: 3px solid #FF751a; }
.lienboldgreen:link {font-family: Arial; font-weight: bold; color: black; }
.lienboldblue:link {font-family: Arial; font-weight: bold; color: black; }
.liensmall:link {font-family: Arial; color: black;}


a:visited { font-family: Arial; color: black ; }
.lienmenu:visited {font-family: Arial; font-weight: normal; color: silver; text-decoration: none; }
.lienorange:visited { font-family: Arial; font-weight: normal; color: black; border-bottom: 3px solid #FF751a; }
.lienblue:visited {font-family: Arial; font-weight: normal; color: black; border-bottom: 3px solid #004184; }
.liengreen:visited {font-family: Arial; font-weight: normal; color: black; border-bottom: 3px solid #008600; }
.lienboldorange:visited { font-family: Arial; font-weight: bold; color: black; border-bottom: 3px solid #FF751a; }
.lienboldgreen:visited {font-family: Arial; font-weight: bold; color: black; }
.lienboldblue:visited {font-family: Arial; font-weight: bold; color: black; }
.liensmall:visited { font-family: Arial; color: black ; }


a:hover { font-family: Arial; font-weight: normal; color: green; text-decoration: none; }
.lienmenu:hover { font-family: Arial; font-weight: normal; color: yellow; text-decoration: none; }
.lienorange:hover {font-family: Arial; font-weight: normal; color:  #FF751a; border-bottom: 3px solid; }
.lienblue:hover {font-family: Arial; font-weight: normal; color: #004184; border-bottom: 3px solid; }
.liengreen:hover {font-family: Arial; font-weight: normal; color:  #008600; border-bottom: 3px solid; }
.lienboldorange:hover {font-family: Arial; font-weight: bold; color:  #FF751a; border-bottom: 3px solid; }
.lienboldgreen:hover {font-family: Arial; font-weight: bold; color: green; }
.lienboldblue:hover {font-family: Arial; font-weight: bold; color: #004184; }
.liensmall:hover { font-family: Arial; font-weight: normal; color: lightslategray ; }

a:active { font-family: Arial; font-weight: normal; color: aqua; text-decoration: none; }

div.gallery {
	margin-left: 5%;
	margin-right: 5%; 
    border: 0.08em solid #ccc;
    float: left;
    width: 11.25em;
}

div.clear {
    clear: both;
}

div.gallery:hover {
    border: 0.08em solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.description {
    padding: 0.1em;
	font-size: 0.8em;
    text-align: center;
}

div.newsphoto {
    display: inline-block;
}

div.newsdescription {
    display: inline-block;
    border-style: solid;
    border-color: #E8E8E8;
}

div.clear {
    clear: both;
}

div.newsgallery img {
    width: 100%;
    height: auto;
}


@media (max-width: 860px){ 

body{
        line-height:1.6em;  
    }

p{

margin-left: 2em; 
margin-right: 2em; 

}	
	
p.marge{

margin-left: 2em; 
margin-right: 2em; 

}

h3 {
	
margin-left: 2em; 
margin-right: 2em; 

}

p.marge2{

margin-left: 2.8em; 
margin-right: 2.8em; 

}
    
}

 
@media (max-width: 600px){ 

body{

        line-height:1.8em;  
    }

p{

margin-left: 0%; 
margin-right: 0%; 

}

p.marge{

margin-left: 0%; 
margin-right: 0%; 

}

p.chapeau{

margin-left: 0%; 
margin-right: 0%;

}

p.centrage{

margin-left: 0%; 
margin-right: 0%;

}

p.centragesmall{

margin-left: 0%; 
margin-right: 0%;

}

nav {

margin-left: 0%; 
margin-right: 0%; 

}

h1{

margin-left: 0%; 
margin-right: 0%; 


}

h1.bluecolor{

margin-left: 0%; 
margin-right: 0%; 

}

h1.blue{

margin-left: 0%; 
margin-right: 0%; 

}

h1.green{

margin-left: 0%; 
margin-right: 0%; 

}

h1.orange{

margin-left: 0%; 
margin-right: 0%; 

}


h2{

margin-left: 0%; 
margin-right: 0%; 


}

h3{

margin-left: 0%; 
margin-right: 0%; 


}

h3.orange{

margin-left: 0%; 
margin-right: 0%; 


}

h3.green{

margin-left: 0%; 
margin-right: 0%; 


}

h3.blue{

margin-left: 0%; 
margin-right: 0%; 


}

p.marge1{

margin-left: 0%; 
margin-right: 0%; 


}

p.marge2{

margin-left: 0%; 
margin-right: 0%; 

}

div.newsgallery {
	margin-left: 5%;
	margin-right: 5%; 
	float: none
 
}

div.newsgallery img {
    max-width: 250px;
    height: auto;
}


}