@import '../common/common.css';

/*
Any custom CSS for this page goes here.
Includes all color specifications by default; other things can be added to override the defaults.
See ../common/common.css for color variable definitions.
*/

div.legendItem, div.polygonLegend {
	line-height: 24px;
	height: 24px;
}

svg.legendLineSample {
	width: 30px;
	height: 22px;
	left: -7px;
}

span.legendDefinition, span.filterText {
	height: 24px;
}

div#sponsor_logos a {
	float: none;
	clear: left;
	color: white;
	padding: 15px 0;
}

div#sponsor_logos img {
	margin: 5px 2px;
}





body {
	color: var(--dxbrown);
}

a {
	color: var(--stdorange);
}
	a:visited {
		color: var(--khaki);
	}
	a:hover {
		color: var(--dxred);
		text-decoration: none;
	}
	a:active {
		color: var(--beige);
	}

/* the UI that shows up when a user clicks the share button */
div#shareDialog {
	border: 3px solid var(--dxbrown);
}
	/* heading bar in the share UI */
	div#shareDialog h2 {
		background: var(--dxbrown);
		color: white;
	}
	/* the main body of the share UI */
	div#shareLinks {
		background: var(--whitetrans);
	}
	/* text within the share UI */
	span.shareLink, span.shareLink a, span.shareLink a:visited {
		color: var(--dxbrown);
	}
	span.shareLink:hover, span.shareLink a:hover {
		color: var(--dxred);
	}

/* The small box that shows the user the mouse coordinates */
div#coords {
	background: var(--whitetrans);
	border-top: 3px solid var(--dxbrown);
	border-left: 3px solid var(--dxbrown);
}

/* Sidebar that contains all the non-Mapbox controls, logos and text */
div#sidebar {
	background: var(--stdblue);
	border-left: 3px solid var(--dxbrown);
}
	/* box for sponsor logos, inside div#sidebar */
	div#sponsor_logos {
		border: 3px solid var(--dxred);
		background: var(--khaki);
		color: white;
		-webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.2);
		box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.2);
	}
	/* The Filters / Legends / Information 'buttons' */
	div#controls h2 {
		background: var(--khaki);
		color: white;
		-webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
		box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
	}

	/* The base map selectors */
	span.mapSwitcher.active {
		color: var(--dxbrown);
	}
	span.mapSwitcher:hover {
		color: var(--stdorange);
		text-decoration: underline;
	}
	span.mapSwitcher:active {
		color: var(--khaki);
	}
	/* The +/- expand/collapse controls for many items in the sidebar */
	div#controls h2.collapseControl, div#controls h2.collapseControl:after {
		color: white;
	}
	.collapseControl {
		cursor: pointer;
	}
	.collapseControl:after {
		color: var(--dxbrown);
	}
	.collapseControl.active:after {
		color: var(--dxbrown);
	}
	/* The spaces that contain the filter/legend/popup content itself */
	div#filterText, div#legend, div#popupContainer, div#searchText  {
		background: white;
		border: 3px solid var(--dxkhaki);
		scrollbar-color: var(--dxbrown) white;
	}
	/* Text in a legend or filter */
	span.legendDefinition, span.filterText {
		color: var(--dxbrown);
	}


/* Small screens version.  Make sure the breakpoints match up with ../common/common.css */
@media
	only screen and (max-width: 800px),
	only screen and (max-height: 640px)
{
	div#sidebar {
		background: none;
	}

	div#sponsor_logos {
		border: none;
		background: white;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	div#sponsor_logos img {
		margin: 0 0 0 4vw;
	}

	div#filterText, div#legend, div#popupContainer, div#searchText  {
		background: var(--whitetrans);
	}

	h2#filtersHeading {
		top: 0px;
		left: 0px !important;
		padding: 10px 10px 10px 20px !important;
		width: calc(25vw - 6px);
	}

}