body {
	font-family: 'Open Sans', sans-serif;
}


#mapid {
	height: 515px;
	max-width: 700px;	
	margin: 0px
	}

.infoBox {
	float:left;
	width: 200px;
	height: 515px;
	margin-right: 0px;
	top:0;
	left:0;
	background-color: #005e99;/* Gold: #FCAF17 Tan: #CDCCA5 */
	font-size: 14px;
	padding: 0px 5px 0px 10px;	
	color: #FFF;
}

.infoBox a {
	color: #FCAF17;
	text-decoration:none;
	/* color: #68B3C8 */
}

.infoBox a:hover {
	text-decoration:underline;
	/* color: #68B3C8 */
}

p.listTitle {
	margin: 8px 5px 2px 0px
}

.legend {
	
	width: 150px;
	background-color: white;
	font-size: 11;
	padding: 0px 3px 8px 4px;
	opacity: 1;
}

.legend p{
	padding: 0px;
	margin: 5px 5px 0px 3px;
	
}

.legend span{
	float:left; width: 12px; height: 12px; border-radius: 8px; margin-right: 4px; border: 1.25px solid black;
}


#legendhead {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:0;
	margin: 0
}


.boxTitle {
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 8px 0px 0px 0px;
	font-weight: bold;
	font-size: 16;
	color: #FCAF17;
	}
	
.ClickForDetails {
	margin: 0px;
	font-style: italic;
	color: #CCC;
	font-size: 9pt;
}

	
ol {
	margin: 0px 0px 0px 0px;
	}

.leaflet-popup-content {
	font-size: 16;
	font-family: 'Open Sans Condensed', sans-serif;
}

.leaflet-popup-content p {
	margin: 5px 0px 5px 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14;
}

.leaflet-control-attribution {
		width:80%;
		max-width: 420px;
	}

@media only screen and (max-width: 650px) {
	.infoBox {
		width:98%;
		float:none;
		height:auto;
		max-height: 280px;
		margin:0px 10px 5px 0px;
		overflow: auto;
	}
	#mapid {
		height: auto;
		min-height: 300px;
		width: 100%;
		margin: 0px;
	}
	.legend {
		margin:0px 10px 5px 0px;
		width: 90%;		
	}
	.legend p {
		float:left;
	}
	.legend p:nth-of-type(1) {
		width:100%;
	}
	.ClickForDetails {
		text-align:center;
	}
	
	.list {
		width: 50%;
		float: left;
		margin-bottom: 10px;
	}
	
	p.listTitle {
		margin-top: 0px;
	}
	
	.boxTitle {
		text-align: center;
	}
}