body 
	{ 
		margin: 0; 
		padding: 0; 
	}
		
	#map 
	{ 
		position: absolute; 
		top: 0; 
		bottom: 0; 
		width: 100%;
		z-index:-1; 
		margin-top:75px;
	}

	
    #features 
    {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 50%;
		overflow: auto;
		background: rgba(255, 255, 255, 0.8);
		z-index:1;
    }
    
    #map canvas 
    {
    	cursor: crosshair;
    }

    mapboxgl-popup 
	{
    	max-width: 400px;
	}
		
    #marker {
		background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
		background-size: cover;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		cursor: pointer;
    }


	#menu {
		position: absolute;
		background: #fff;
		padding: 0px 20px;
		font-family: 'Open Sans', sans-serif;
		z-index:999;
		line-height:75px;
	}

	#button {
		background: #fff;
		position: absolute;
		z-index: 1;
		top: 10px;
		right: 10px;
		border-radius: 3px;
		width: 120px;
		border: 1px solid rgba(0, 0, 0, 0.4);
		font-family: 'Open Sans', sans-serif;
	}

	#button a {
		font-size: 13px;
		color: #404040;
		display: block;
		margin: 0;
		padding: 0;
		padding: 10px;
		text-decoration: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		text-align: center;
	}
 
	#button a:last-child {
		border: none;
	}
 
	#button a:hover {
		background-color: #f8f8f8;
		color: #404040;
	}
 
	#button a.active {
		background-color: #3887be;
		color: #ffffff;
	}
 
	#button a.active:hover 
	{
		background: #3074a4;
	}/* CSS Document */

#features {
	position: absolute;
	top: 200px;
	right: 0;
	bottom: 0;
	width: 20%;
	overflow: auto;
	background: rgba(255, 255, 255, 0.8);
}
#map canvas {
	cursor: crosshair;
}

.distance-container {
	position: absolute;
	top: 100px;
	left: 10px;
	z-index: 100;
}
 
.distance-container > * {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	display: block;
	margin: 0;
	padding: 5px 10px;
	border-radius: 3px;
}