/* CSS Document */

#etatsdeslieux, #prochainsrdv {
	float: left;
	margin-right: 40px;
	width: 500px;/* ecran 1366px(L) => 548px*/
	margin-top:140px;
}
#etatsdeslieux {
	margin-left: 120px;
}
#etatsdeslieux li {
	float:left;
	overflow:hidden;
	margin-bottom: 20px;
}
#prochainsrdv #prochainesdates, #geolocalisation, #calendrier {
	float:left;
	overflow:hidden;
	margin: 0 10px 10px 0;
}
#dates  h4, #geolocalisation h4, #calendrier h4 {
	font-size: 100%;
}
#demarrer a, #recevoir a, #envoyer a, #geolocalisation a, #calendrier a, #prochainesdates a {
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-attachment: scroll;
}
#demarrer a:hover, #recevoir a:hover, #envoyer a:hover, #geolocalisation a:hover, #calendrier a:hover, #prochainesdates a:hover{
	background-color: #8fa7c8;/*#2896be;*/
}
#demarrer a:hover h4, #demarrer a:hover p, #recevoir a:hover h4, #envoyer a:hover h4, #envoyer a:hover p, #geolocalisation a:hover h4, #calendrier a:hover h4, #prochainesdates a:hover p  {
	color: #FFFFFF;
}

li#envoyer, li#recevoir {
	width: 240px;
}
li#envoyer {
	margin-right: 20px;
}
li#demarrer {
	width: 100%;
}
#demarrer a {
	display: block;
	position: relative;
	width: 100%;
	height: 212px;
	padding: 20px;
	background-image: url("../images/icones/mauve/jouer.png");
	background-position: 90px 70px;
	background-size: 100px;
}
#demarrer a:hover {
	background-image: url("../images/icones/blanc/jouer.png");
}

#demarrer p {
	margin: 0 0 20px 244px;
}
#recevoir a{
	display: block;
	position: relative;
	width: 100%;/*224px*/
	height: 212px;
	padding: 20px;
	background-image: url("../images/icones/mauve/telecharger.png");
	background-position: 70px 70px;
	background-size: 100px;
}
#recevoir a:hover {
	background-image: url("../images/icones/blanc/telecharger.png");
	background-color: #8fa7c8;/*#2896be;*/
}
#envoyer a {
	display: block;
	position: relative;
	width: 100%;/*224px*/
	height: 212px;
	padding: 20px;
	background-image: url("../images/icones/mauve/envoyer.png");
	background-position: 38px 94px;
	background-size: 64px;
}
#envoyer a:hover{
	background-image: url("../images/icones/blanc/envoyer.png");
}
#envoyer p {
	color: #8fa7c8;/*#2896be;*/
	margin: 65px 0 0 100px;
}
#envoyer span {
	font-size: 143%;
}
#demarrer h4, #envoyer h4, #recevoir h4 {
	font-size: 86%;
	color: #4d4d4d;
	position: absolute;
	top:210px;
}

li#prochainesdates {
	width: 96%;
}
#prochainesdates a{
	display: block;
	width: 100%;/*548px*/
	min-height: 80px;
	padding-top: 15px;
}
#prochainesdates .date{
	float:left;
	width: 22%;/*120px*/
	min-height: 80px;
	padding-left: 20px;
}

li#geolocalisation, li#calendrier {
	width: 47%;
}
#geolocalisation a {
	display: block;
	position: relative;
	width: 100%;/*229px*/
	height: 94px;
	padding: 20px;
	background-image: url("../images/icones/mauve/localisation.png");
	background-position: 20px 50px;
	background-size: 64px;
}
#geolocalisation a:hover {
	background-image: url("../images/icones/blanc/localisation.png");
}
#calendrier a {
	display: block;	
	position: relative;
	width: 100%;/*229px*/
	height: 94px;
	padding: 20px;
	background-image: url("../images/icones/mauve/calendrier.png");
	background-position: 20px 50px;
	background-size: 64px;
}
#calendrier a:hover {
	background-image: url("../images/icones/blanc/calendrier.png");
}
#geolocalisation h4, #calendrier h4 {
	position: absolute;
	top: 10px;
	left: 20px;
}