#legend {
	font-family: Arial, sans-serif;
	background: #fff;
	padding: 10px;
	margin: 10px;
	border: 3px solid #666;
}
#legend h3 {
	margin-top: 0;
}
#legend h4 {
	margin-bottom: 0;
}
#legend img {
	vertical-align: middle;
}
#legend div {
	padding: 4px 0;
}
#legend a {
	font-size: 16px;
	color: #666;
}
#legend a:hover {
	color: #a39d6f;
}
#clickInstructions {
	padding-bottom: 1em;
}
#closeLegend {
	margin-top: -0.4em;
	font-size: 24px;
	float: right;
	cursor: pointer;
}

@media only screen and (min-width: 960px) and (max-width: 1240px) {
	#legend a {
		font-size: 16px;
	}	
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#legend a {
		font-size: 14px;
	}	
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	#legend a {
		font-size: 12px;
	}	
}

@media only screen and (max-width: 479px) {
	#legend a {
		font-size: 11px;
	}
}