@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css);


/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* -------------  */

body {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-family: TI Actu Beta_Regular,Helvetica,Arial,sans-serif;
}

#map {
  width:100%;
  height: 100vh;
}

.TI {
  font-family: TI Actu Beta_Regular,Helvetica,Arial,sans-serif;
}

.TIBold {
  font-family: TI Actu Beta_Bold,Helvetica,Arial,sans-serif;
}

.TIMono {
  font-family:TI Actu Beta Mono_ExBold,Helvetica,Arial,sans-serif;
}

/* TOOLTIP */

ul.contaminantsList  {
  list-style: none;
  -moz-column-count: 2;
  -moz-column-gap: 2em;
  -webkit-column-count: 2;
  -webkit-column-gap: 2em;
  column-count: 2;
  column-gap: 1em;
  margin-top: 2px;
  font-size: 14px;
}

ul.contaminantsList li {
  background-image: url(../img/check.svg);
  background-repeat: no-repeat;
  background-position: 0px 9px, center;
  background-size: 16px;
  padding-left: 20px;
  margin-bottom: 0px;
  padding-top: 8px;
  font-size:14px;
}

ul.contaminantsList  li.unhighlighted {
  background-image: url(../img/x.svg);
}

.unhighlighted {
  opacity: .3;
}

.countyName {
  text-transform: uppercase;
  font-size: 16px;
}

.numSamples {
  margin-top: -2px;
  font-size: 16px;
}

.contaminantsHeader {
  margin-top: 10px;
  font-size: 14px;
  text-transform: uppercase;
}

.contaminantsList {
  /*border-top: solid 1px #000;*/
}

svg {
  position: relative;
}

.state {
	fill:none;
	stroke-width:1px;

}

.site {
	fill:#8B302F;

}
.selectedsite {
	stroke: #FA9192;
}

.nopointerevents {
	pointer-events:none;
}
.allpointerevents {
	pointer-events:all;
	cursor:default;
}

.invisible {
  opacity:0;
}

.nodisplay {
	display:none;
}

.county {
  /*pointer-events: all;*/
  stroke-width: 0.3px;
/*  cursor: pointer;*/
}

.state, .county {
	stroke: #999999;
	stroke-linecap: "round";

}

.selected, .county:hover {
  stroke:#8B302F;
  stroke-width:3px;
}

.leaflet-popup-close-button {
	display:none;
}

.leaflet-container {
  background: #EFEFEF;
  background-image: url(../img/bg_.png);
  font-size: 12px;
  line-height: 1.5;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(237,237,237,1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(237,237,237,1);
  box-shadow: 0px 0px 0px 1px rgba(237,237,237,1);
}



.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 0px;
}

.leaflet-bar {
	box-shadow: 0 0px 1px rgba(0,0,0,0.65);
}

.leaflet-control-zoom, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-bar a:first-child, .leaflet-bar a:last-child {
	border-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.leaflet-popup-pane {
  pointer-events: none;
}

#legend a {
  color: #8B302F;
  text-decoration: none;
}

.sitepopup {
	background: #8B302F none repeat scroll 0% 0%;
	color: #FA9192;

}

.countypopup {
	background: #fc9090 none repeat scroll 0% 0%;
}

/* LEGEND */

#legend {
	padding: 6px 6px 4px;
	font-size: 12px;
  font-family: TI Actu Beta_Bold,Helvetica,Arial,sans-serif;
  width: 285px;
}

#legendContainer {
  background-color: #fff;
  box-shadow: 0 0px 1px rgba(0,0,0,0.65);
  padding: 6px 6px 4px;
}

#legend p#desc {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

#legend div#title{
  margin-bottom: 10px;
  line-height:1.4rem;
  text-transform: uppercase;
  font-size: 18px;
  width:80%;
}

.legendList {
  border-top: 2px solid #000;
  padding-top: 6px;
}

.toggledescbutton {
	pointer-events:all;
	cursor:pointer;
	float:right;
	padding-right:8px;
	padding-left:8px;
	margin-right:10px;
	line-height:.9rem;
  margin-top: -48px;
	color:black;
	font-size:1.2rem;
  background-image: url(../img/toggle.svg);
  width: 26px;
  height: 25px;
}

.toggledescbutton.rotate {
  transform: rotate(180deg);
}


.legendsvg {
	width: 15px;
	height: 15px;
}

.legendText {
  vertical-align: top;
  margin: 0 2px;
}

.legendboxNotTested, .legendboxNotDetected, .legendboxDetected {
	fill: url(#crosshatch);
	width:15px;
	height:15px;
	display:inline-block;
	padding-right:3px;
}

.legendboxDetected {
	fill: #FA9192;
}

.legendboxNotDetected {
	fill: white;
  stroke: #aaa;
}

.legendboxNotTested {
	fill: url(#crosshatch);
}

.legendboxSite {
  fill: #8B302F;
}


.legendentry {
  display: inline-block;
  padding-right: 8px;
  padding-top: 3px;
}

/* MEDIA QUERIES */
@media (min-width: 350px) {
  #legend {
    width: 325px;
  }

}

@media (min-width: 500px) {
	.state {
		fill:none;
		stroke-width:1.5px;
	}
	.county {
		stroke-width: 0.5px;;
	}
	.selected {
		stroke-width:3px;
	}
	.leaflet-bar {
		box-shadow: 0 0px 1px rgba(0,0,0,0.65);
	}
}