#body{
   	background-color:#e9e5e0;
	background-repeat: no-repeat;
 }
#corps{
	background-color:#bebebe;
    max-width:960px;
	border:2px solid blue;
	width:auto;
    margin: auto;
	font-family: arial,calibri, serif;
  	font-size: 0.9em;
    position:relative;
}

header{
	background-image: url(../images/ciel.png);
	color:red;
	height:auto;
    font-size: 3em;
    font-weight: bold;
	text-align:center;
	line-height:2;
}
/*menu*/
nav {
	border:1px solid black;
	background-color:#f6f8dc;
	text-align:center;
	font-size:1em;
	height:auto;
}
nav a:hover{
	background-color: red;
	color: #fff;
}
	
nav a{ 
	text-decoration: none;
	background-color:#3a9eee;
	color:#fff;
}

nav  li{
	display: inline-block;
	vertical-align: top;	
}

.inf{
	background-color:#f6f8dc;
	border:2px solid black;
	margin:auto;
	padding:20px;
}
.titre{
	background-color:#f6f8dc;
	margin:auto;
}

#gentlemen{
	background-image: url(../images/gentlemen.jpg);
	background-repeat: no-repeat;
	margin:auto;
	max-width:960px;
    width:auto;
	line-height:13px;
}
#cyclo{
	line-height:13px;
	background-image: url(../images/tours.jpg);
	background-repeat: no-repeat;
	margin:auto;
	max-width:960px;
    width:auto;
}
/*trombine*/

#element{
    display:inline-block;
    vertical-align:top;
	Width:25%;
    margin-top:10px;
} 
.trombine a.bulle span {
     display: none;
   }
.trombine a.bulle:hover span {
      display: block;
      position: fixed;
	  right:0px;
	  top:100px;
   }
.trombine li a,p{
	display:inline-block;
    vertical-align:bottom;
} 
#lrv{
	line-height:13px;
	background-image: url(../images/gravel.jpg);
	background-repeat: no-repeat;
	margin:auto;
	max-width:960px;
    width:auto;
}
.calendrier{
	display:inline;
	border-collapse:collapse; 
	margin:auto;
	height: 100%;
	overflow:scroll;
}
.calendrier tr{
	background-color:#fff;
	border:3px solid #0a42be;
}	
.calendrier td{
	border: 2px solid black;
	padding-left:7px;
}
.calendrier th {
	color: red;
	font-weight:bold;
	border: 2px solid black;	
}
.guide{
	color:#fff;
	display: flex;
	margin-left:40px;
}

p{
    margin-left:20px;
}
a{
	text-decoration: none;
	color: #000000;
	cursor:pointer;
}
li{
	text-decoration:none;	
}


aside{
    position:relative;
}
aside,aside{
	display: inline-block;
    vertical-align: top;
}

/*compteur*/
#compteur{	
	background-color:#f6f8dc;
    max-width:960px;
	width:auto;
    margin: auto;	
	text-align:center;
	border-radius:10px;	
}
.boutonN{
	text-align:center;
	background-color:#000;
	color: #fff;
	border:1px solid black;
}
.boutonN:hover{
	background-color:#fff;
	color:#000;
}
.boutonR{
	text-align:center;
	background-color:red;
	color: #fff;
	border:1px solid red;	
}
.boutonR:hover{
	background-color:#fff;
	color:#000;
}
.boutonB{
	text-align:center;
	background-color:blue;
	color: #fff;
	border:1px solid blue;
}
.boutonB:hover{
	background-color:#fff;
	color:#000;
}
.button{
	cursor:pointer;
	font-size:0.9em;
	text-align:center;
	background-color:#fff;
	color: black;
	border:1px solid black;
    border-radius: 4px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button:hover{
	background-color: #bdbdbd;
	color: red;
}
.mailto{
	color:blue;
	text-decoration:underline;
}
@media screen  and (max-width: 320px) {
	header{
		font-size: 1em;
	}
	body{
		font-size : 0.8em;
		line-height : 10px;
	}
	#corps{
	width:auto;
    margin: auto;
  	font-size: 0.8em;
	}

}
@media screen  and (max-width: 770px) {
	header{
		font-size: 1em;
	}
	body{
		font-size : 0.8em;
		line-height : 10px;
	}
	#corps{
	width:auto;
    margin: auto;
  	font-size: 0.8em;
}
	img{
		display:none;
	}
	nav{
		width:auto;
		height:auto;
		font-size:0.7em;
	}
	#gentlemen, #cyclo, #lrv{
		line-height : 10px;
	}
	h1, h2{
		text-transform: lowercase;
	}	
}