html,body,head,a,h1,h2,h3,h4,h5,h6,h7,pre,sup,sub,ul,li { margin: 0px;
    padding: 0px;}

body{
background-color:black;
font-family: Trebuchet MS, sans-serif;
}

header{
background-color:#C3A86D;
margin:0px auto 3px auto;
width:100%;
height:50px;
position:relative;
border-bottom:3px solid white;
}

#titre{
position:absolute;
top:0px;
left:0px;
color: white;
padding-left:5% ;
display: table-cell;
vertical-align: bottom;
line-height: 50px;
text-transform: uppercase;
font-size: 30px;
height:100%;
margin:0px auto 0px 0px;
}

#timer{
position:absolute;
top:33%;
left:17%;
background-color: white;
text-transform: uppercase;
font-size: 30px;
display:table;
height:15%;
width:66%;
margin:0px auto 0px auto;
z-index:10;
}

#mag{
display:inline-block;
text-transform: uppercase;
font-size: 30px;
margin:0px auto 0px auto;
z-index:10;
}
#location{
display:inline-block;
text-transform: uppercase;
font-size: 30px;
margin:0px auto 0px auto;
z-index:10;
}
#time{
display:inline-block;
text-transform: uppercase;
font-size: 30px;
margin:0px auto 0px auto;
z-index:10;
}

#timer p{
display:table-cell;
vertical-align:middle;
margin:0px auto 0px auto;

}


#titre span{
text-transform: lowercase;
font-size: 15px;
}

#menu{
float:right;
height:100%;
width:40%;
}


ul#menu_horizontal {
padding-right : 5%;
display:block;
padding-top:25px;
height:50px;
list-style:none;
text-transform: uppercase;
font-size: 15px;


}
 
ul#menu_horizontal li {
padding : 0 0.5em;  
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
}
 
ul#menu_horizontal li.bouton_droite {
float:right;
width:25%;
text-align:center;
border-left:1px solid white;
}
 
#menu a {
color: white;
text-decoration : none;
}

a{
text-decoration:none;
}

ul#menu_horizontal a:hover { text-decoration : underline; }
 
ul#menu_horizontal a img { 
border : none;
padding :  0 0.3em;
}

.about {
margin:20px auto 0px auto;
height:calc(100% - 110px);
background-color:black;
width: 95%; 
color:white;
}

.projet{
display:inline-block;
float:left;
margin-left:50px;
margin-top:50px;
width:33%;
}

.prj_img{
display:inline-block;
float:right;
margin-right:150px;
margin-top:50px;
}


h1{
border-bottom:1px solid white;
font-size:12pt;
text-align:right;

}

 p{

margin-bottom:10px;
font-size:10pt;

}

.biblio a, a:visited{
color :white;
text-decoration:none;
}

.biblio {
margin:20px auto 0px auto;
height:calc(100% - 110px);
background-color:black;
width: 40%; 
color:white;
}

#map {
margin:0px auto 0px auto;
height:calc(100% - 50px);
width: 100%; 
}

.leaflet-container {
    background-color: rgba(0, 0, 0, 0.8) ;
}

#feature_infos {
    width:25%;
    background:white;
    border:2px solid #C3A86D;
    color:#C3A86D;
    position: absolute;
    top:calc(26px + 50px);
   	right:3%;
    padding:20px 0px 0px 0px;
    display:none;
    text-align:center;
}

/* 
#feature_infos:after {
	content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 30px solid #C3A86D;
  position: absolute;
  z-index: 1;
  top: 10%;
  left: -30px;
 
}
 */

#feature_infos.image {
position :relative;
bottom:0px;
width:100%;
}

#feature_infos span#legend {
  z-index: 100;
  position: absolute;
  width:100%;
  background:rgba(0, 0, 0, 0.8);
  line-height:25px;
  color: white;
  font-size: 12px;
  bottom: 0px;
  left: 0px;
}


.custom-popup .leaflet-popup-content-wrapper {
  background:white;
  opacity:0.8;
  color:black;
  width:230px;
  text-align:center;
  -webkit-border-radius: 0px;
	        border-radius: 0px;
  }
  
table {
margin:auto;
border-collapse: collapse;
font-size:12px;
margin-bottom:5%;
width:90%;
color:#C3A86D;
}

table a{
font-weight: bold;
}

tr {
height:30px;
}

td {
width: 40%;
border-bottom: 1px dotted #C3A86D;
padding:10px 0px 10px 0px;
}

td a:hover{
opacity:0.7;
}



td.right{
width: 60%;
/*font-weight:bold;*/
text-align: left;
}

.custom-popup .leaflet-popup-content-wrapper h2 {
text-align:left;
width:100%;

}

.custom-popup .leaflet-popup-content-wrapper a {
text-align:left;
padding-left:5%;
color:#C3A86D;
text-decoration:none;

}

#info a {
text-align:left;
color:#C3A86D;
text-decoration:none;
}

#info h2{
font-size:16px;
text-align:left;
width:95%;
border-bottom: 1px solid #C3A86D;
margin-bottom:10px;
padding-left:5%;
}

.place-label{

 border : 1px solid red;
 letter-spacing: 2px;
 font-weight: bold;
 text-transform: uppercase;


}

#info {
/* font-family: 'Fjalla One', sans-serif; */
}

.legend, .temporal-legend {
  		padding: 10px 10px;
  		background: rgba(255, 255, 255, .8);
   		box-shadow: 0 0 15px rgba(0,0,0,0.2);
   		border-radius: 5px;
	}
	#legendTitle {
		font-family: 'Fjalla One', sans-serif;
		font-size:small;
  	  	text-align: center;
  	  	margin:0px;
   	 	
	}
	.symbolsContainer {
    		float: left;
			margin-left: 50px;
	}
	.legendCircle {
     	border-radius:50%; 
     	border: 1px solid black; 
     	background: rgba(255, 255, 255, .6);
	 	display: inline-block;
	}
	.legendValue {
		font-family: 'Fjalla One', sans-serif;
		font-size:x-small;
   		position: absolute;
    	right: 8px;
	}

#text {
position:absolute;
width:100%;
bottom:0px;
left:0px;
/* 
font-family: 'Fjalla One', sans-serif;
font-size:800%;
 */
line-height: 115%;
color:white;
opacity:1; 


}

#image {
color:white;
opacity:0.75;
z-index:15; 
}



.leaflet-marker-menu-item {
	background: #f00;
	border-radius: 12px;
}

.item-2 {
	background: #06f;
	border: 2px solid #04d;
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}

  svg {
        position: relative;
    }
    
    .city {
    radius:20;
    fill: white;
    stroke-width: 0px;
    }
  
  .grit {
  -webkit-mask-image: url("../IMG/texture.png");
  mask-image: url("../IMG/texture.png");
}  
    
/* 
 path{
 fill:black;
 stroke:black;
 }  
 */

    
 path[route] {
       	fill: none;
        stroke-width: 1px;
        stroke: white;
    }
 circle[visite="1"] {
       fill: white;
        stroke-width: 0px;
        opacity:0;
        radius:50;
    }
    
 circle[visite="0"] {
       fill: none;
        stroke-width: 0px;
        opacity:0;
    }
 
    path.true {
        stroke: #3366FF;
    }
    path.false {
        stroke: #990099;
    }
    circle {
        fill: white;
        opacity: 0.75;
    }
    .area {
        fill: #3366FF;
    }
    .empty {
        fill: #990099;
    }