html, body
{
	height    : 100%;
	width     : 100%;
	margin    : 0;
	padding   : 0;
}

html
{
	font-size: 15px;
}

body
{
	font-size : 0;
}

#map
{
	height : 100%;
}

.overlay_widget
{
	border-radius : 2px;
	padding       : 8px;
	font-family   : Helvetica, Arial, sans-serif;
	font-size     : 9pt;
	color         : #000;
	border        : 1px solid #000;
}

#layer-select
{
	position           : fixed;
	top                : 5px;
	left               : 5px;
	-webkit-appearance : none;
	-moz-appearance    : none;
	appearance         : none;
}
	#layer-select option
	{
		font-size : 1.8rem;
	}

.toggle-controls
{
	position      : fixed;
	background    : rgba(255, 255, 255, 1.0);
	border-radius : .2rem;
	padding       : .8rem;
	font-family   : Helvetica, Arial, sans-serif;
	font-size     : 1.4rem;
	height        : 4.3rem;
	line-height   : 3rem;
	box-sizing    : border-box;
}

.jhm-icon-control
{
	position         : fixed;
	font-size        : 0;
	width            : 3rem;
	height           : 3rem;
	background-color : rgba(255, 255, 255, .4);
	border-radius    : 4px;
	padding          : 2px;
}
	.jhm-icon-control:hover
	{
		background-color : rgba(255, 255, 255, .7);
	}
	.jhm-icon-control>span:hover
	{
		background : rgba(0, 60, 136, .9);
	}

	.jhm-icon-control>span
	{
		display    : block;
		background : rgba(0, 60, 136, .7);
		overflow   : hidden;
	}
#autofollow-control
{
	bottom        : .5rem;
	left          : .5rem;
}

#autorotate-control
{
	bottom        : 4rem;
	left          : .5rem;
}
#refresh-gps-control
{
	bottom    : .5rem;
	left      : 8.5rem;
}
#home-gps-control
{
	bottom    : .5rem;
	left      : 4.5rem;
}

#legend-underlay
{
	background    : rgba(255, 255, 255, .4);
	padding       : .4rem;
	position      : fixed;
	top           : .5rem;
	right         : .5rem;
	color         : rgba(255, 255, 255, 1.0);
	border-radius : .5rem;
}
#legend-underlay:hover { background: rgba(255, 255, 255, .6); }
#legend
{
	border-radius : .5rem;
	padding       : .4rem;
	margin        : 0;
	background    : rgba(0, 60, 136, 0.498039);
	font-family   : Verdana, Helvetica, sans-serif;
}
	#legend:hover { background: rgba(0, 60, 136, .7); }

	#legend h2
	{
		margin: 0;
		margin-bottom : .3rem;
		font-size     : 1.8rem;
		font-weight   : bold;
		text-align    : center;

	}
	#legend p
	{
		margin     : .4rem;
		text-align : center;
		font-size  : 1.2rem;
	}
	#legend .swatch
	{
		vertical-align : middle;
		display        : inline-block;
		width          : 2rem;
		height         : 2rem;
		border-radius  : 1rem;
		margin-bottom  : .1rem;
	}
	#legend div
	{
		vertical-align : middle;
		display        : block;
		line-height    : 100%;
		font-size      : 1.2rem;
	}


/* Hide things on small screens */
@media screen and (max-width:480px){
	.exclude-mobile, #legend
	{
		display: none
	}
}

/* Hide things on small screens */
@media screen and (max-width:960px){
	html
	{
		font-size : 13px;
	}
}


/* Open Layers overrides */
.ol-control
{
	font-size: 1.8rem;
}

.ol-zoom
{
	top    : auto;
	left   : auto;
	bottom : .5rem;
	right  : .5rem;
}

.ol-rotate.ol-control
{
	width         : 6.4rem;
	height        : 6.4rem;
	border-radius : 50%;
	box-sizing    : border-box;
	margin        : 0;
	padding       : 4px;
	top           : auto;
	left          : auto;
	bottom        : .5rem;
	right         : 4.5rem;

}

	.ol-control button.ol-rotate-reset
	{
		width         : 100%;
		height        : 100%;
		box-sizing    : border-box;
		margin        : 0;
		border-radius : 50%;
	}
		.ol-compass
		{
			background-image    : url('/static/north_arrow.svg');
			background-repeat   : no-repeat;
			background-position : center center;
			background-size     : 100% 100%;
			height              : 100%;
			width               : 100%;
			box-sizing          : border-box;
		}

.ol-overlay-container
{
	font-size     : 1.3rem;
	border-radius : .6rem;
	padding       : .8rem;
	font-family   : Helvetica, Arial, sans-serif;
	min-height    : 4.3rem;
	line-height   : 1.2rem;
	box-sizing    : border-box;
	color         : #FFF;
	background    : rgba(55, 85, 180, .7);
	border        : 2px rgba(255, 255, 255, .6) solid;
	max-width     : 460px;
}

.ol-overlay-container a
{
	color: #fff;
}
#disclaimer-control
{
	position         : absolute;
	top              : 30%;
	width            : 30rem;
	max-width        : 100vw;
	margin           : 0 auto;
	left             : calc(50% - 15rem);
	border-radius    : 0;
	border           : 0;
	padding          : .5rem;
	background-color : rgba(255,255,255,.9);
	color            : black;

}
	#disclaimer-control span
	{
		margin      : 0 auto;
		font-size   : 1rem;
		line-height : 1rem;
	}
	#disclaimer-control a
	{
		background      : rgba(50,200,50,.7);
		display         : block;
		text-align      : center;
		width           : 30%;
		margin          : 1rem auto;
		color           : white;
		font-weight     : bold;
		padding         : 1rem;
		border-radius   : .4rem;
		text-decoration : none;
		cursor          : pointer;
	}
	#disclaimer-control a:hover
	{
		background    : rgba(50,200,50,.9);

	}

@media screen and (max-width:960px)
{
	#disclaimer-control span
	{
		font-size   : 1.5rem;
		line-height : 1.8rem;
	}
}
@media screen and (max-width:480px)
{
	#disclaimer-control
	{
		width : 100vw;
		left  : 0;
	}
}