@charset "UTF-8";
/* event filtering for annual national and regional saummaries */

/* events tab and display */
#eventsContainer h2 {margin-bottom: 0.8em;}
#eventsFilter fieldset { background-color: #efefef; }
#eventsFilter legend {font-weight:normal; font-size:0.9em;}
#eventsFilter label {padding: 5px 3px; white-space:nowrap;  display:inline-block;}
#eventsFilter label:hover {cursor:pointer;}

#eventsFilter label.inactive { color: #ccc; cursor:not-allowed !important;} /* unset inherit initial*/
	
	
#allEvents {margin-top: 1em;}

#allEvents p[aria-hidden=true], #allEvents div[aria-hidden=true],  #allEvents ul[aria-hidden=true]{ display:none;}
#allEvents p[aria-hidden=false], #allEvents div[aria-hidden=false], #allEvents ul[aria-hidden=false] {display:block;}

#allEvents div  { border-left: 3px solid #efefef; padding-left: 40px; margin-left:40px; margin-bottom: 7px; padding-bottom: 3px;margin-top: 1.6em; background-image: none; 
position:relative;}
.region #allEvents div {border-left:none; padding-left: 0; margin-left:0;}

#allEvents figure { display:block; float:right; position:relative; margin-bottom:0 !important; padding-bottom:0 !important; }

#allEvents figure:after {
	content: ".";
	color: #fff;
	line-height:0;
	font-size:1px;
	clear:both;
	display:block;
	width:100%;
	clear:both;
}
#allEvents figcaption { color: #fff; width:100%; box-sizing:border-box;
margin:0; padding: 0 0 0 0.8em; display:block; position:absolute; bottom:0; left:2px; background-color:rgba(0,0,0,0.4); line-height:1.6em; text-align:center;}

#allEvents ul li{ margin-left:2.6em; margin-top: 5px;}

.region #allEvents ul li{ margin-left:2.6em; margin-top: 0px;}

#allEvents ul {background-image:none; border-left: none; margin-top: -1em;}

#noEventsMessage[aria-hidden='true'] {display:none;}
#noEventsMessage[aria-hidden='false'] {display:block;}


#allEvents em {font-style:italic;}
/* redundant for regions */
#allEvents time {border: 2px solid #fff; display:block; position:absolute; left: -40px; top: 0;  color:#666; font-size:0.8em; background-color: #efefef; padding: 3px ; width: 6.4em; border-radius: 1.6em; text-align:center; font-weight:normal; box-sizing: border-box; line-height: 1.6em;}
#allEvents ul time {display:none;}

#allEvents ul {
	padding-bottom: 0;
	margin-top: -0.6em;
}

/* region months */
.region #allEvents time { left:0; float:left; position:relative; padding:5px; }
/* end events */


div i.tc, div i.fire, div i.flood, div i.storage, div i.heat, div i.hightemp, div i.dry, div i.storm, div i.sst, div i.rain, div i.snow, div i.wind, div i.lowtemp, div i.eastcoastlow, div i.coast, div i.hail { 
	width: 30px; 
	height:30px;
	box-sizing:border-box;
	display:block; float:left;
	margin-right: 0.4em;
	overflow:hidden;
}


/*  will print */
div i.tc:before, div i.fire:before, div i.flood:before, div i.storage:before, div i.hightemp:before, div i.lowtemp:before, div i.dry:before, div i.storm:before, div i.sst:before, div i.rain:before, i:before.snow, div i.wind:before, div i.eastcoastlow:before 
div i.rain:before, div i.coast:before, div i.hail:before {
	content:'';
	display:block;
	width:30px;height:30px;
	box-sizing:border-box;
}
/* TODO replace all with SVGs */
/*
div i.tc:before {content: url(/climate/images/symbols/icon-tc.png);}
div i.fire:before {content: url(/climate/images/symbols/icon-fire.png);}
div i.flood:before {content: url(/climate/images/symbols/icon-flood.png);} 
div i.storage:before {content: url(/climate/images/symbols/icon-storage.png);} 
div i.hightemp:before {content: url(/climate/images/symbols/icon-hightemp.png);}
div i.storm:before {content: url(/climate/images/symbols/icon-storm.png);}
div i.sst:before {content: url(/climate/images/symbols/icon-sst.png);}
div i.rain:before {content: url(/climate/images/symbols/icon-rain.png);}
div i.dry:before {content: url(/climate/images/symbols/icon-dry.png);}
div i.eastcoastlow:before {content: url(/climate/images/symbols/icon-eastcoastlow.png);}
div i.snow:before {content: url(/climate/images/symbols/icon-snow.png);}
div i.wind:before {content: url(/climate/images/symbols/icon-wind.png);}
div i.lowtemp:before {content: url(/climate/images/symbols/icon-lowtemp.png);}
div i.coast:before {content: url(/climate/images/symbols/icon-coast.png);}
div i.storage:before {content: url(/climate/images/symbols/icon-storage.png);}
*/

div i.tc:before {content: url(/climate/images/symbols/icon-tc.svg);}
div i.fire:before {content: url(/climate/images/symbols/icon-fire.svg);}
div i.flood:before {content: url(/climate/images/symbols/icon-flood.svg);} /* icon-water.svg old flood icon replaced - new one doesn't quite match format... */
div i.storage:before {content: url(/climate/images/symbols/icon-storage.svg);} /* water drop */
div i.hightemp:before {content: url(/climate/images/symbols/icon-hightemp.svg);}
div i.storm:before {content: url(/climate/images/symbols/icon-storm.svg);}
div i.sst:before {content: url(/climate/images/symbols/icon-sst.svg);}
div i.rain:before {content: url(/climate/images/symbols/icon-rain.svg);}
div i.dry:before {content: url(/climate/images/symbols/icon-dry.svg);}
div i.eastcoastlow:before {content: url(/climate/images/symbols/icon-ecl.svg);} /* icon-eastcoastlow.svg need an icon! */
div i.snow:before {content: url(/climate/images/symbols/icon-snow.svg);}
div i.wind:before {content: url(/climate/images/symbols/icon-wind.svg);}
div i.lowtemp:before {content: url(/climate/images/symbols/icon-lowtemp.svg);}
div i.coast:before {content: url(/climate/images/symbols/icon-coast.svg);}
div i.storage:before {content: url(/climate/images/symbols/icon-storage.svg);} /* water drop */

/* TODO need hail icon */
div i.hail:before {content: url(/climate/images/symbols/icon-hail.svg);}