body{ 
 font-family: arial;
 font-size: 1em;
}

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

header {
	
	text-align: center;
	vertical-align: middle;
	margin-top : 0.2em;	
    padding: 0;	
	background-color: #E8E8E8;
	border-radius: 0.2em; 
}

nav {

text-align: left;

}

nav.top {
font-size: 1em;
border-radius: 0.5em; 	
background-color: #ffffff;
text-align: center;

}

nav.topmenu {
 font-size: 1em;
 border-radius: 0.5em; 	
background-color: #ffffff;
text-align: center;

}

ul{
    margin: 0;
	padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
	
	}

ul li { 

 display: inline-block;	
 list-style-type: none;
 border-right: 0.1em solid #bbb;
 border-left: 0.1em solid #bbb;
 border-top: 0.1em solid #bbb;
 border-bottom: 0.1em solid #bbb;

}

ul li.topblue { 

 display: inline-block;	
 list-style-type: none;
 border-right: 0.1em solid #bbb;
 border-left: 0.1em solid #bbb;
 border-top: 0.1em solid #bbb;
 border-bottom: 0.1em solid #bbb;
background-color: #6495ED;
}

ul li.topflag { 
 padding-left: 0.2em;
 padding-right: 0.2em;
}

ul li a {
    display: inline-block;
    padding: 0.2em 0.3em ;
	
}

ul li a:hover:not(.active) {
	color: white;
	background-color: #C5B358;}


ul.topnav {
	display: inline-block;	
    list-style-type: none;
    margin: 0;
	padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.2em;
	padding-right: 0.2em;
    overflow: hidden;
    background-color: #8A8A8A;
	border-radius: 0.2em; 
}


ul.topnav li a {
    display: inline-block;
    color: white;
    text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #C5B358;}

ul.topnav li a.active {background-color: #BCBCBC;}


footer {
	background-color: #CCCCCC;
	border-radius:0.2em;
	}

p{
vertical-align: middle;
margin-left: 0.2em; 
margin-right: 0.2em; 
margin-top: 0%;
margin-bottom: 0%;
line-height: 1.7;
}

p.grandemarge{

margin: 5em; 

}


p.blue {
font-size: 12pt; 
font-family: Arial;
font-weight: bold;
color: darkblue;
vertical-align: middle;
text-align : left;
margin-left: 1em; 
margin-right: 1em; 
margin-top: 0%; 
margin-bottom: 0%;}

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

p.orange {
font-size: 12pt; 
font-family: Arial;
font-weight: bold;
color: darkorange;
vertical-align: middle;
text-align : left;
margin-left: 1em; 
margin-right: 1em; 
margin-top: 0%; 
margin-bottom: 0%;
}

p.right {
text-align: right;
}

.center {text-align: center;}

.centersmall{
text-align: center;
font-size: 0.9em;}

.centrageblack {text-align: center; background-color: black;}
.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: darkorange; }
.green { color: #008600;}

h1 { border-radius:0.2em; font-size:1.5em; font-family: Arial; color: white; background-color: #8A8A8A ; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; }
h2 { border-radius:0.2em; 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%; }
h3 { font-size:1em; color: gray; vertical-align: middle; text-align : left; margin-left: 0.2em; margin-top: 0%; margin-bottom: 0%; }
h4 { font-size:0.9em; color: white; font-weight: normal; vertical-align: middle; text-align : center; margin-top: 0%; margin-bottom: 0%; }

a: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; }


a:hover { color : #C5B358;  }

.liensmall:hover { font-family: Arial; font-weight: normal; color: lightslategray; }

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

.floatleft {
    float: left;
}

.clear {
	clear: both;
}

div.photo {
    margin: 0.3em;
    border: 0.08em solid #ccc;
    float: left;
    width: 11.25em;
}

div.left {
    margin: 0.3em;
    border: 0.08em solid #ccc;
    float: left;
}

div.textleft {
    margin-left: 10em;
    border: 0.08em solid blue;
}


div.right {
    margin: 0.3em;
    border: 0.08em solid #ccc;
    float: right;
}

div.clear {
    clear: both;
}

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

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

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

@media (max-width: 860px){ 

body{
        font-size:1.1em;
        line-height:1.5em;
    
    }

p.marge{

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

}

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

}

    
}

 
@media (max-width: 600px){ 

body{
        font-size:1em;
        line-height:1.5em;  
    }
	
p.marge{

margin-left: 0.2em; 
margin-right: 0.2em; 

}

h3{

margin-left: 0.2em; 
margin-right: 0.2em; 

}

p.marge1{

margin-left: 0.3em; 
margin-right: 0.3em; 

}

p.marge2{

margin-left: 0.3em; 
margin-right: 0.3em; 

}	

ul.topnav li.right, 
    ul.topnav li {float: none;}


    }