html{
	font-family: Arial, sans-serif;
	margin: 0;
	width: 100%;
	height: 100%;
}

body{
	margin: 0;
	width: 100%;
	height: 100%;}

div#conteneur_map{
	width: 70%;
	height: 100%;
	float: right;
}


div#map{
	width: 100%;
	height: 100%;
}

div#map.caroussel{
	height: 80%;
}



div#caroussel{
	height: 20%;
	width: auto;
	overflow-x: scroll;
	overflow-y: hidden;
	display: block;
	white-space: nowrap;
	position: relative;
}

div#caroussel figure{
	height: 100%;
	display: inline-block;
	margin: 0;
	padding: 0;
}

div#caroussel figcaption{
	display: none;
}

div#caroussel figcaption a{
	text-decoration: none;
	color: #BCBCBC;
}


div#caroussel figure:hover figcaption{
	bottom: 0px;
	height: auto;
	width: 145px;
	padding: 5px;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	display: block;
	font-size: 0.8em;
	white-space: normal;	
}

div#caroussel img:hover{
		cursor: pointer;
}


h1#titre{
	background-color: rgb(219, 68, 55);
	color: white;
	font-size: 1.7vw;
	font-style: normal;
	font-weight: normal;
	height: 64px;
	line-height: 64px;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
	display: inline-block;
	width: 100%;
}

	div#slider input#showmenu, div#slider label#showmenulabel{
	  display: none;
	}

div#slider{
	width: 30%;
	max-height: 100%;
	overflow-y : auto;
	background-color: rgb(219, 68, 55);
	margin: 0;
	padding: 0;
	float: left;
}

div#masque, div#montre{
	background-color: white;
	padding: 0 0 20px 0;
	margin: 0;
	min-height: 100%;
	width: 100%;
}

div#slider h2{
	font-size: 1.0em;
	margin: 0;
	padding: 0;
	
}

div#slider h2 img.icone{
	float: right;
	margin-top: 17px;
	margin-right: 5px;
}

div#slider ul.list a{
	text-decoration: none;
	color: grey;
}

div#slider ul.list a:hover{
	color: black;
}

div#slider ul.list a:visited::after{
	position: absolute;
	right: -20px;
	background-image: url('images/icone_check.png');
}

div#montre > h2, div#masque > h2{
	max-width: 100%;
	font-weight: normal;
	vertical-align: middle;
	line-height: 64px;
	padding-left: 10px;
	background-color: #EAE5E5;
}

div#montre p, div#masque p{
	padding-left: 10px;
	color: grey;
}




ul + h2{
	margin-top: 40px;
}

ul.list{
	margin: 0;
	text-indent: 0;
	padding: 0;
}


ul.list li{
	line-height: 39px;
	max-width: 100%;
	border-bottom: 1px dashed #EDEAEA;
	margin: 0;
	padding-left: 3px;
}
ul.list li:last-child{
	border: none;
}

ul.list li a{
	display: inline-block;
}

ul.list li a.actionadmin{
	float: right;
	padding-right: 5px;
}


ul#menu_top{
	padding-left: 0;
	margin: 0;
	padding: 0;
	background-color: #CCCCCC;
	text-align: center;
}

ul#menu_top li{
	display: inline;
}

ul#menu_top li a{
	display: inline-block;
	color: black;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 12px;

}

ul#menu_top li img{
	height: 40px;
	width: 40px;
	vertical-align: middle;
	margin: 8px 8px 8px 0;
}


ul#menu_top li a:hover{
	color: white;
	background-color: black;
}

progress{
	display: block;
	background-color: #f3f3f3;
	background-image: none;
    border: 0;
    height: 50px;
    border-radius: 0;
	width: 95%;
	margin: 0 10px;
	display: none;
	color: black;
	content: "Envoi en cours...";
	text-align: center;
	}

div.formulaire {
	width: 100%;
	max-width: 600px;
	margin: 0;
	padding: 0;
}



div.formulaire fieldset{
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

div.formulaire legend{
	display: none;
}

div.formulaire ul{
	padding: 0;
	margin: 0;
	width: 100%;
}

div.formulaire ul li
{
  list-style: none;
  padding: 0;
  margin: 8px 0 8px;
  min-height: 40px;
}

div.formulaire label, div.formulaire span.label{
	float: left;
	width: 30%;
	text-align: right;
	margin: 5px 10px 0 0;
line-height: 26px;
}

div.formulaire input[type=file]{
	display: none;
}

div.formulaire label[for=file]{
	display: block;
	margin: 0 0 15px;
	width: 97%;
	border: 1px solid grey;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

div.formulaire label[for=file]:hover{
	cursor: pointer;
	background-color: grey;
	color: white;
}

input, select, textarea{
	border: 1px solid #CCCCCC;
	font-size: 16px;
	border-radius: 0;
	background: #ffffff;
	padding: 5px;
}

div.formulaire input, div.formulaire select, div.formulaire textarea{
	width: 60%;
}

div.formulaire input[type="file"]{
	border: 0;
}

div.formulaire select.small, div.formulaire input[type="checkbox"], div.formulaire input[type="file"], div.formulaire input[type="radio"]{
	width: auto;
}

div.formulaire input[type="checkbox"]{
	vertical-align: text-top;
	width: 15px;
	height: 15px;
	margin: 0 5px 0;
}


div.formulaire input[type="checkbox"]:checked, div.formulaire input[type="radio"]:checked{
	background-color: red;
}

div.formulaire textarea{
	height: 150px;
}

div.formulaire textarea.moyen{
	height: 100px;
}

div.formulaire textarea.petit{
	height: 50px;
}


div.formulaire input.bouton_envoyer{
	padding: 10px;
	margin: 40px auto 0;
	background-color: white;
	height: 50px;
	width: 92%;
	float: none;
	display: block;
	border: 1px solid black;
}

div.formulaire input.bouton_envoyer:hover{
	color: white;
	border-color: grey;
	background-color: grey;
}

div.formulaire em{
	margin-left: 15%;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
}

div#formulaire_admin, div#details{
	float: left;
	width: 50%;
}

div#formulaire_inscription label{
	width: 35%;
}

div#formulaire_inscription input[type=text], div#formulaire_inscription input[type=email], div#formulaire_inscription input[type=password], div#formulaire_inscription select, div#formulaire_inscription textarea {
	width: 57%;
}

div.gm-style-iw{
	max-width: 160px;
}

div.infobulle{
	padding: 0;
	margin: 0;
}

div.infobulle h3{
	margin: 0 0 10px 0;
	max-width: 140px;
}

div.infobulle h3 a{
	text-decoration: none;
	color: black;
	
}



div#montre img, div#masque img{
	max-width: 100%;
}

div#montre img:hover, div#masque img:hover{
	cursor: pointer;
}

img.apercu{
	width: 60%;
}

img.icone_map{
	display: inline-block;
	vertical-align: bottom;
	margin-right: 3px;
}

span.icone{
	position: relative;
	display: inline-block;
	border-radius: 3px;
	width: 18px;
	height: 20px;
	margin: 2px;
	margin-right: 5px;
	border: 0;
	text-align: center;
	color: white;
	padding: 3px 4px 5px 4px;
}

span.date{
	font-size: 13px;
	background: #B73726;
	line-height: 11px;
	margin-bottom: 7px;
	vertical-align: bottom;
}

span.commune{
	background: #6F467F;
	vertical-align: bottom;
	margin-bottom: 7px;
	padding-bottom: 5px;
	line-height: 23px;
	font-size: 14px;
}

span.maj{
	background: #17752B;
	vertical-align: bottom;
	margin-bottom: 7px;
	padding-bottom: 5px;
	line-height: 23px;
	font-size: 14px;
}

span.icone:after{
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(183, 55, 38, 0);
	border-width: 6px;
	margin-left: -6px;
}

span.date:after {
	border-top-color: #B73726;
}

span.commune:after {
	border-top-color: #6F467F;
}

span.maj:after {
	border-top-color: #17752B;
}


div.historique p{
    overflow: hidden; /* empêche le dépassement des flottants */
	border-bottom: 1px dashed #EDEAEA;
	margin-top: 10px;
	margin-bottom: 0;
	padding-bottom: 10px;
}

div.historique p:last-child{
	border-bottom: 0;
}

div.historique img{
    float: left;
	margin-right: 10px;
}

/* Fenetre login */

.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
div#opacify{
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

div#alerte{
	max-width: 400px;
	width: auto;
	min-width:300px;
	position: relative;
	margin: 10% auto;
	padding: 0;
	border-radius: 5px;
	background: #EAE5E5;
}

div#alerte header{
	border-radius: 5px 5px 0 0;
	height: 40px;
	color: white;
	background-color: rgb(219, 68, 55);
	margin: 0;
	padding: 15px 15px 0 15px;
}

div#alerte header h2{
	font-size: 1.1em;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

div#alerte header a{
	text-decoration: none;
	font-weight: bold;
	color: black;
}

div#alerte footer{
	height: 40px;
	color: white;
	margin: 0;
	padding: 0px  15px 0 15px ;
}

div#alerte footer a{
	margin: 0 0 0 0;
}


div#alerte section{
	padding: 15px;
}



.popup {
	position: fixed;
	z-index: 199999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.popup a{
	text-decoration: none;
	color: black;
	font-weight: bold;
}
 
.popup:target{
	opacity:1;
	pointer-events: auto;
}
 
.popup:target > div {
	margin: 10% auto;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
 
.popup > div {
	max-width: 400px;
	width: auto;
	min-width:300px;
	position: relative;
	margin: 1% auto;
	padding: 0;
	border-radius: 5px;
	background: #EAE5E5;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
 
.popup > div header,.popup > div footer {
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	height: 40px;
	color: white;
}
.popup .footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
}
 
.popup h2 {
	margin:0;
	background-color: rgb(219, 68, 55);
}
 
.popup > div .btn {
	float:right;
}
 
.popup > div section,.popup > div > header, .popup > div > footer {
	padding:15px;
}

.popup > div > header{
	padding-bottom: 0;
	background-color: rgb(219, 68, 55);
}


/*### Mise en admin ####*/

/* font-size */
 
nav#admin h1{
	font-size: 1.5em;
}

nav#admin,
div#top_admin,
div#admin_main p.updated,
div#admin_main h2{
	font-size: 1.3em;
}

/* float */

div#admin_main,
div#selectionner,
div#admin_droite,
ul.historique img.thumb,
div#exemple_signalement,
li.profil,
div#top_admin{
	float: right;
}

div#filtre,
div#formulaire_admin,
nav#admin,
div#admin_gauche,
ul.historique{
	float: left;
}

/* HEIGHT & WIDTH */

div#admin_main{
	width: 70%;
}

table.admin{
	width: 100%;
	max-height: 100%;
}

div#selectionner{
	width: 68%;
	margin-left: 0;
}

div#filtre{
	width: 25%;
	min-width: 250px;
}

table.admin progress{
	height: 30px;
	width: 100px;
}

div#formulaire_admin input.bouton_envoyer{
	width: 100%;
}

div#formulaire_admin{
	max-width: 500px;
}

nav#admin{
	width: 30%;
	height: 100%;
}

ul#menu_admin img{
	vertical-align: middle;
	margin-bottom: 12px;
	width: 40px;
}

div#admin_gauche{
	width: 50%;
}
div#admin_droite{
	width: 45%;
}

/* PADDING & MARGIN */

div#admin_main{
	overflow: scroll;
	margin: 0;
}

div#admin_main > *
{
	margin-left: 2%;
	margin-right: 2%;
}

div#admin_main div#filtre{
	margin-right: 0;	
}

div#admin_main h2{
	color: rgb(219, 68, 55);
	font-weight: normal;
	margin-bottom: 40px;
}

div#admin_main h3, div#admin_main h4{
	font-weight: normal;
	color: rgb(219, 68, 55);
}

div#admin_main div.formulaire ul{
	padding: 0;
}

ul#admin_menu h2{
	color: white;
	font-weight: normal;
}

table.admin{
	border-collapse: collapse;
	border: 1px solid #E0E0E0;
}

div#selectionner{
	margin-left: 0;
}

div#filtre ul{
	margin-top: 0;
}

div#filtre li{
	list-style-type: none;
}

table.admin tr{
	border: 1px solid #E0E0E0;
}

table.admin tr.selected{
	background-color: #B4F7B4;
}

table.admin tr.public0, table.admin tr.inactive{
	background-color: #FCC4C4;
}

table.admin tr.dev{
	display: none;
}


table.admin a{
	text-decoration: none;
}

table.admin progress{
	display: block;
}


div.formulaire li#colselect{
	display: none;
}

div#formulaire_admin{
	padding: 0;
}

div#formulaire_admin img{
	margin-bottom: 20px;
}

div#formulaire_admin input.bouton_envoyer{
	margin-top: 50px;
}

div#top_admin{
	line-height: 63px;
	text-align: center;
	color: grey;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10000;
	padding: 0 25px 0 5px;
	background-color: white;
	opacity: 0.8;
}

nav#admin h1{
	text-align: center;
	font-weight: normal;
	padding-bottom: 50px;}

nav#admin{
	background-color: rgb(219, 68, 55);
	margin: 0;
	position: fixed;
	color: white;
}

ul#menu_admin{
	margin: 0;
	padding: 0;
}
ul#menu_admin li{
	list-style-type: none;
}

ul#menu_admin img{
	vertical-align: middle;
	margin-bottom: 12px;
}

ul#menu_admin li{
	border-top: 1px solid #EDEAEA;	
}

ul#menu_admin li a{
	text-decoration: none;
	color: white;
	display: block;
	line-height: 39px;
	padding-left: 3%;
	font-weight: normal;
}

ul#menu_admin li.selected{
	border: none;
}

ul#menu_admin li.liselected a{
	color: red;
	background-color: white;
}

ul#menu_admin li:last-child{
	border-bottom: 1px solid #EDEAEA;
}


ul#menu_admin a:hover{
	color: red;
	background-color: white;
}

li.profil{
}

ul.historique{
	width: 400px;
	padding: 0;
}

ul.historique li{
	min-height: 80px;
	list-style-type: none;
	padding-top: 5px;
	color: grey;
}

ul.historique img.thumb{
	cursor: pointer;
}

img.thumbb{
	cursor: pointer;
	height: 150px;
}

.grise{
	background-color: #C4C4C4;
}

div#admin_main p.updated{
	line-height: 40px;
	color: rgb(219, 68, 55);
	width: 100%;
	border-top: 1px solid red;
	background-color: rgba(255, 255, 255, 0.8);
	position: fixed;
	bottom: 0;
	margin: 0;
	padding: 0 0 0 20px;
}

div#admin_main p.updated:after{
	height: 0;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}

div#montre p.alerte_en_cours{
	background-color: rgb(219, 68, 55);
	margin-top:-5px;
	color: white;
}

div#exemple_signalement{
	max-width: 41%;
	margin-left: 0;
	border: 1px solid grey;
	background-color: rgb(224, 224, 224);
	padding: 10px;
}

div#exemple_signalement img{
	max-width: 100%;
}

div#exemple_signalement h3{
	margin-top:0;
}

@media(max-width:667px)
{
	nav#admin h1{
		font-size: 2.3vw;
	}
	
	nav#admin,
	div#top_admin,
	div#admin_main p.updated,
	div#admin_main h2{
		font-size: 2.2vw;
	}
}