/* for /climate/early-data/ */

.banner-headline h1{color:#fff; font-size: 2em;  padding: 15px; font-weight: normal;}
.banner-headline {position:relative; min-height:120px; max-height:200px; overflow:hidden; margin-bottom: 2em; margin-top: 1em;}
.banner-headline h1 {position:absolute; width:100%; bottom: 0px; background: rgba(0,0,0,0.6); z-index:99; box-sizing:border-box;}
.banner-image { display:block; width:100%; max-width:100%; height:auto; min-height:120px;}

h2 {color: #000; font-size: 1.4em; border-bottom: 1px dotted #ccc; margin-bottom:0.4em;}

@media print {
.banner {position:relative; color: #000;  background:none;}
.banner  h1 {color:#000; font-size: 2em;  padding:0; position:relative;}
.banner-headline { min-height:2em; margin: 0;}
.banner-headline h1 {position:relative;  background: #fff; z-index:0; padding-left:0;}
.banner-headline img {display:none;}
}

/* for intro block; */
/* change to % ?? */
#map {width:790px; height: 560px; border: 1px solid #ccc; background-color: #efefef; margin-bottom: 1em; position:relative;}



.larger {font-size: 1.1em;}

/* map (taken from case-studies fire-map)*/
.line {
fill: none;
stroke: black;
stroke-width: 2px;
}

.area {
fill: white;
}

.axis--x path {
	display: none;
}

.overlay {
fill: none;
pointer-events: all;
}

.focus circle {
fill: red;
stroke: black;
}


/* ??? */
.heatwave-d-text { color: #fff; fill:#fff; stroke: #ffff;}


/* map background = generic */
.states, .coast {
	fill: #ccc;
	stroke: #fff;
}
/*
svg:hover circle {
	stroke: #000;
	fill: #000;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 200ms;
	-webkit-transition-timing-function: ease-in-out;
}
*/

/*svg.map {position:absolute; z-index:0; } */

div.popUp {
position: absolute;
text-align: center;
width: 180px;
height: 14em;
padding: 5px;
font: 12px sans-serif;
background:rgba(255,255,255,0.8);
border: 2px #fff solid;
border-radius: 8px;
pointer-events: none;
z-index:999;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
text-align: left;
}
div.popUp p {
	margin:0;
	padding:2px;
}

.button-close {
	box-sizing:border-box;
	padding:5px;
	background:#fff;
	border:1px solid #ccc;
	position:absolute;
	bottom: 0;
	right:0;
	border-radius: 0.6em;
	/* background: url(close.gif) no-repeat;*/
}

button:hover.button-close {
	background:#ccc !important;
	box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}

div.popUp p.id {
	text-align:center;
	padding:0.4em;
	border-radius:1.2em;
	background-color:rgba(178,0,0, 0.6);
	color: #fff;
	border:2px solid #efefef;
	width: 2.4em;
	box-sizing:border-box;
	margin-left: -1.4em;
	margin-top: -1.4em;
}
div.popUp[aria-hidden="true"]{display:none; } /*visibility: hidden; */
div.popUp[aria-hidden="false"]{display:block;} /*  visibility: visible;*/

/*
.invisible{visibility:hidden;}
.visible {visibility: visible;}
*/

/* TODO - enclose in container and position it */
.mapControls { position:absolute; left: 10px; top:10px; width:40px; height:80px;}
.zoomIn, .zoomOut { postion:relative; display:inline-block; width:30px; box-sizing:border-box; padding:5px; border-radius: 4px; margin:1px;}
/* #fire-map  {postion:relative;} */