:root {
		--hdrhgt: 25px;
		--navW: 250px;
		--sliderH: 25px;
		--featTogTop: 31px; /* 26px color bar + 5px from bar */
	}
@font-face {
	font-family: ngc3d;
	src: url(../fonts/ngc/Ngc2923D-rg3ZA.otf);
}
@font-face {
	font-family: ngc;
	src: url("../fonts/ngc/Ngc292Title-z89BX.otf");
}
	body, html {
		margin: 0;
		width: 100%;
		height: 100%;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		overscroll-behavior-x: none;
	}
.hide {
	display: none;
}
	#container {
		background: rgb(198,198,198);
		background: -moz-linear-gradient(top, rgb(198,198,198) 0%, rgb(147,147,147) 33%, rgb(58,58,58) 100%);
		background: -webkit-linear-gradient(top, rgb(198,198,198) 0%,rgb(147,147,147) 33%,rgb(58,58,58) 100%);
		background: linear-gradient(to bottom, rgb(198,198,198) 0%,rgb(147,147,147) 33%,rgb(58,58,58) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#3a3a3a',GradientType=0 );
		background-attachment: fixed;
		background-size: 100% 100vh;
		width: 100%;
		overflow: hidden;
	}
	#page_content { /* i need to figure out flex shit */
		float: left;
		width: 100%;
		min-height: calc( 100vh - var(--hdrhgt) );
		display: flex;
		align-items: stretch;
		margin-top: var(--hdrhgt);
	}
	#navigation {
		background-color: rgba(255,255,255,.25);
		width: var(--navW);
		height: auto;
		/*min-height: calc( 100vh - var(--hdrhgt) );  no really, this is good. it forces the page_content div to the remaining height of the viewport*/
		float: left;
		border-right: solid 2px white;
		box-sizing: border-box;
	}
	#navigation img.codLogo {
		display: block;
		width: 90%;
		padding: 5px 5%;
		height: auto;
		margin: 0 auto 5px auto;
		border: none;
		outline: none;
		background-color: rgba(0,84,0,0.75);
	}
	#navigation img.logo {
		display: block;
		height: 125px; /* 150px */
		width: auto;
		margin: 0 auto;
		border: none;
		outline: none;
	}
	#navigation img.storm-relief {
		display: block;
		height: auto;
		width: 100%;
		margin: 0 auto;
		border: none;
		outline: none;
	}
	#navigation h2 {
		color: black;
		font-size: 14px;
		margin: 5px auto;
		text-align: center;
	}
	#navigation table.support {
		width: 100%;
		font-size: 12px;
		line-height: 25px;
		text-align: center;
		margin: 0; /* to remove default margin */
	}
	#navigation table.support td a:link, #navigation table.support td a:visited {
		color: white;
		width: 100%;
		height: 100%;
		display: block;
	}
	#navigation table.support td a:hover {
		color: green;
		background-color: rgba(255,255,255,0.5);
	}
	
	/* Style the buttons that are used to open and close the accordion panel */
	#navigation button.accordion {
		color: white;
	    background-color: rgba(125,125,125,1.00);
	    cursor: pointer;
	    padding: 5px 5px;
	    width: 100%;
	    text-align: left;
	    border: none;
	    outline: none;
	    transition: 0.2s;
		border-bottom: solid 1px black;
		height: 30px;
		line-height: 16px;
	}

	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
	#navigation button.accordion:hover {
		color: white;
		background: linear-gradient(to bottom, rgba(198,198,198,1) 0%,rgba(58,58,58,1) 100%);
	}
	#navigation button.accordion.active {
		color: white;
		background: linear-gradient(to bottom, rgba(171,204,171,1) 0%,rgba(66,127,66,1) 100%);
	}

	/*#navigation button.accordion.running {
		background: linear-gradient(to bottom, rgba(237,223,147,1) 0%,rgba(255, 140, 0,1) 100%);
		color: black;
	}*/
#navigation #curmod,
#navigation #currun {
	color: black;
	font-family: monospace;
    background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
    transform: skew(350deg , 0);
    float: right;
    line-height: 10px;
}
#navigation #currun.running {
	background: linear-gradient(to bottom, rgba(237,223,147,1) 0%,rgba(255, 140, 0,1) 100%);
}
#navigation #curmod:empty,
#navigation #currun:empty {
	display: none;
}

	/* Style the accordion panel. Note: hidden by default */
	#navigation div.panel {
	    background-color: lightgrey;
	    display: none;
	}

	/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
	#navigation div.panel.show {
	    display: block;
	}

	#navigation div.panel button {
		font-size: 12px;
		text-align: left;
		border: none;
	    outline: none;
		text-shadow: 1px 1px 0 white;
		color: black;
		display: block;
		width: 100%;
		white-space: nowrap;
		padding: 5px;
		cursor: pointer;
	}
	#navigation div.panel:last-child {
		border-bottom: solid 1px black;
	}


	#navigation #fcsthrs {
		width: 100%;
		height: auto;
	}
	#navigation #fcsthrs table {
		width: 100%;
		text-align: center;
		background-color: lightgrey;
		text-shadow: 1px 1px 0 white;
		font-size: 12px;
	}
	#navigation #fcsthrs table tr td {
		height: 24px;
		cursor: pointer;
	}
	#navigation #fcsthrs table tr td:not(.omit):hover,
	#navigation #fcsthrs table tr td:not(.unavailable):hover {
		background-color: rgba(100,100,100,1.00);
		color: white;
		text-shadow: none;
	}
#navigation #fcsthrs table tr td.unavailable,
#navigation #fcsthrs table tr td.omit {
	color: lightgrey;
	cursor: not-allowed;
}


	#navigation div.panel button:hover,
	#navigation div.panel#modelSelect ul li:hover {
		background-color: rgba(100,100,100,1.00);
		color: white;
		text-shadow: none;
	}
	#navigation div.panel button.selected,
	#navigation div#modelSelect.panel li.selected,
	#navigation #fcsthrs table tr td.selected {
		color: white;
		background-color: rgba(66,127,66,1);
		text-shadow: none;
	}
#navigation div#modelSelect.panel li.unavailable {
	color: rgba(225,225,225,1.00);
	background-color: rgba(128,128,128,0.50);
}
	#navigation div.panel#modelSelect h1 {
		margin: 0;
		font-size: 14px;
		border-bottom: solid 1px black;
		padding: 0 0 0 5%;
		display: block;
		clear: both;
	}
	#navigation div.panel#modelSelect h2 {
		margin: 0;
		font-size: 12px;
		border-bottom: dotted 1px black;
		padding: 0 0 0 10%;
		text-align: left;
		display: block;
		clear: both;
	}
	#navigation div.panel#modelSelect ul {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: auto;
	}
	#navigation div.panel#modelSelect ul li {
		padding: 5px 10px;
		display: inline-block;
		float: left;
		box-sizing: border-box;
		width: 33.33%;
		font-size: 12px;
		text-shadow: 1px 1px 0 white;
		text-align: center;
		user-select: none;
		cursor: pointer;
	}
	#navigation table.runlinks {
		margin: 0 auto;
		min-width: 100%;
		max-width: 100%;
	}
	#navigation table.runlinks th {
		border-bottom: solid 2px black;
	}
	#navigation table.runlinks td {
		height: 25px;
		line-height: 25px;
	}
	#navigation table.runlinks td span.changerun {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 12px;
		color: #444444;
		cursor: pointer;
		user-select: none;
	}
	#navigation table.runlinks td span.changerun:hover {
		color: white;
	}
	#navigation table.runlinks .complete {
		background: -moz-linear-gradient(top, rgba(153,255,140,0) 50%, rgba(153,255,140,1) 100%);
		background: -webkit-linear-gradient(top, rgba(153,255,140,0) 50%,rgba(153,255,140,1) 100%);
		background: linear-gradient(to bottom, rgba(153,255,140,0) 50%,rgba(153,255,140,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff8c', endColorstr='#99ff8c',GradientType=0 );
	}
	#navigation table.runlinks .running {
		background: -moz-linear-gradient(top, rgba(174,174,174,0) 50%, rgba(255,156,86,1) 100%);
		background: -webkit-linear-gradient(top, rgba(174,174,174,0) 50%,rgba(255,156,86,1) 100%);
		background: linear-gradient(to bottom, rgba(174,174,174,0) 50%,rgba(255,156,86,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeaeae', endColorstr='#ff9c56',GradientType=0 );
		text-indent: -1.6em;
	}
	table.runlinks span.current.running sup {
		display: inline-block;
		padding: 0 0px;
		width: 0;
		height: 0;
		overflow: visible;
		line-height: 0px;
		font-size: 10px;
		position: relative;
		vertical-align: baseline;
		top: -0.4em;
		left: 0.2em;
		text-indent: 0;
	}
/*div.modmenu#HRRR table.runlinks span.current.running {
	font-size: 10px
}*/
	#navigation table.runlinks .complete.selected {
		background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 50%, rgba(153,255,140,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 50%,rgba(153,255,140,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0.25) 50%,rgba(153,255,140,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#99ff8c',GradientType=0 );
	}
	#navigation table.runlinks .running.selected {
		background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 50%, rgba(255,156,86,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 50%,rgba(255,156,86,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0.25) 50%,rgba(255,156,86,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#ff9c56',GradientType=0 );
	}

	#navigation #footer {
		font-size: 12px;
		text-align: center;
		padding: 10px 0;
		margin: 10px 0 0 0;
	}
	#navigation #footer a, #navigation #footer a:link, #navigation #footer a:visited {
		color: white;
	}
	#navigation #footer a:hover {
		color: darkgreen;
	}
	#display {
		position: relative;
		width: calc( 100% - var(--navW) );
		float: left;
		box-sizing: border-box;
		word-wrap: break-word;
		overflow: auto;
	}
#display #sitemsg {
	position: fixed;
    bottom: 0;
    width: calc( 100% - var(--navW));
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
    padding: 10px;
    box-sizing: border-box;
	line-height: 30px;
}
#display #sitemsg.open {
	display: block;
}
#display #sitemsg.closed {
	display: none;
}
#display #sitemsg a {
	color: white;
}
#display #sitemsg a:hover {
	background-color: rgba(0,0,0,0.25);
}
		span.niceButton {
			background: rgb(226,226,226);
			background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
			padding: 5px;
			border-radius: 5px;
			display: inline-block;
			min-width: 60px;
			box-sizing: border-box;
			transform: skewX(-10deg);
			-webkit-box-shadow: 2px 2px 4px 2px rgba(0,0,0,.5);
			box-shadow: 2px 2px 4px 2px rgba(0,0,0,.5);
			cursor: pointer;
			user-select: none;
			position: relative;
			transition: ease all 250ms;
		}
		span.niceButton.small {
			min-width: 75px;
		}
		span.niceButton h1.inset {
			text-align: center;
			font: bold 14px arial, sans-serif;
			background-color: rgba(46,86,46,1.00);
			color: transparent;
			text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
			-webkit-background-clip: text;
			-moz-background-clip: text;
			background-clip: text;
			margin: 0.5em 0;
		}
		span.niceButton.small h1.inset {
			font: bold 12px arial, sans-serif;
			margin: 0.1em 0;
		}
		span.niceButton:hover {
			transform: scale(1.5) skewX(-10deg);
			z-index: 10000;
			background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		}
		span.niceButton.unavailable {
			background: linear-gradient(to bottom, rgba(191,191,191,1) 0%,rgba(178,178,178,1) 50%,rgba(168,168,168,1) 51%,rgba(216,216,216,1) 100%);
		}
		span.niceButton.unavailable h1.inset {
			background-color: rgba(225,225,225,1.00);
		}
		span.niceButton.unavailable:hover {
			background: linear-gradient(
				to bottom,
				rgba(243,197,189,1) 0%,
				rgba(232,108,87,1) 50%,
				rgba(234,40,3,1) 51%,
				rgba(255,102,0,1) 75%,
				rgba(199,34,0,1) 100%
			);
		}
		#compTools span.niceButton {
			width: 50%;
			margin: 20px auto;
			display: block;
		}
		#save span.niceButton {
			width: calc( 50% - 20px );
			margin: 10px;
			float: left;
		}
#save label {
    width: 30%;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
    display: inline-block;
    float: left;
}
#save label input[type="text"] {
    width: 4em;
    border: none;
    outline: none;
    float: right;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
}
#save input.fhrslider {
    margin: 0;
    width: 70%;
	cursor: pointer;
}
div.popup.small span.niceButton:hover {
	transform: scale(1.25) skewX(-10deg);
}
		span.niceButton:hover h1.inset,
		span.niceButton.selected h1.inset {
			background-color: #E0E0E0;
			text-shadow: none;
		}
		span.niceButton.selected {
			background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		}
		.hide {
			display: none !important;
		}
		.show {
			display: block;
		}
div#datascreen {
	overflow: hidden;
	padding-bottom: 20px;
}
		div#titlescreen {
			background-color: rgba(255,255,255,.75);
			box-sizing: border-box;
			margin: 10px;
			padding: 10px;
			border-radius: 10px;
			border: solid 2px black;
			overflow: auto;
		}
		div#titlescreen h1.maintitle,
		div#titlescreen h3.mainsub {
			margin: 0 0 10px 0;
			text-align: center;
			color: transparent;
			background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
			-webkit-background-clip: text;
			-moz-background-clip: text;
			background-clip: text;
			font-style: italic;
			
		}
div#titlescreen h1.maintitle {
	font-family: ngc3d;
	font-size: 3em;
}
div#titlescreen h3.mainsub {
	font-family: ngc;
	font-size: 1.5em;
}
		div#modselection {
			width: 100%;
			display: block;
			padding: 10px 0;
			overflow: visible;
			box-sizing: border-box;
			float: left;
		}
		div#modselection h4 {
			text-align: center;
			border-bottom: solid 2px darkgrey;
			border-radius: 5px;
			position: relative;
			margin: 0 0 15px 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			transition: ease all 250ms;
		}
		div#modselection h4::after {
			content: '';
			left: 50%;
			margin-left: -10px;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 10px solid rgba(0,84,0,0.75);
			transform: rotate(180deg) translate(55px,-15px);
			display: inline-block;
		}
		div#modselection h4.highlight {
			background-color: lightgrey;
		}
		div.modtype {
			float: left;
		}
		div.modrange {
			float: left;
			text-align: center;
		}
		#deter {
			width: 55%;
			padding-right: 5px;
			box-sizing: border-box;
		}
		#deter div.modrange#short {
			width: 25%;
		}
		#deter div.modrange#medium {
			width: 35%;
		}
		#deter div.modrange#long {
			width: 40%;
		}
		#ens {
			width: 15%;
		}
		#ens div.modrange {
			width: 50%;
		}
		#compare {
			width: 30%;
			display: inline-block;
			float: left;
			text-align: center;
		}

	div#maptarget h4 {
		width: 1000px;
		max-width: 100%;
		height: 35px;
		display: block;
		overflow: auto;
		text-align: center;
		margin: 20px auto 0 auto;
		color: white;
		border: solid 2px white;
		border-bottom: none;
		border-radius: 10px 10px 0 0;
		padding: 5px;
		box-sizing: border-box;
		background-color: rgba(0,0,0,0.75);
	}
		div#sectormap {
			max-width: 1000px;
			max-height: calc( 1000px * (9/16) );
			display: block;
			margin: 0 auto 20px auto;
			background: linear-gradient(135deg, rgba(153,191,229,1) 0%,rgba(136,170,204,1) 40%,rgba(117,148,178,1) 100%);
			clear: both;
			position: relative;
		}
		div#sectormap div#large {
			position: absolute;
			bottom: 5px;
			left: 5px;
			background-color: rgba(0,0,0,0.75);
			border-radius: 10px;
			border: solid white 2px;
			display: block;
			overflow: auto;
			color: white;
			padding: 5px;
			font-size: 12px;
			min-width: 150px;
		}
		div#sectormap div#tooltip {
			position: absolute;
			background-color: rgba(0,0,0,0.75);
			border-radius: 5px;
			border: solid white 1px;
			overflow: auto;
			color: white;
			padding: 5px;
			font-size: 12px;
			display: none;
			pointer-events: none;
		}
		div#sectormap div#tooltip.show {
			display: block;
		}
		div#sectormap div#large h3 {
			color: white;
			font-style: normal;
			padding: 0;
			margin: 0;
			text-align: center;
			border-bottom: solid 1px white;
			font-size: 12px
		}
		div#sectormap div#large span.name {
			display: block;
			padding: 5px;
			cursor: pointer;
			user-select: none;
		}
		div#sectormap div#large span.name:hover {
			background-color: rgba(169,255,163,0.50);
		}
		div#sectormap svg {
			display: block;
		}
		div#sectormap svg .land {
			fill: rgba(200,200,200,1);
		}
		div#sectormap svg .graticule {
			fill: transparent;
			stroke: rgba(0,0,0,0.5);
			stroke-width: 0.5px;
			stroke-dasharray: 5;
			pointer-events: none;
		}

		div#sectormap svg .state {
			stroke: #666;
			stroke-width: 1;
			fill: rgba(240,240,240,1.00);
			pointer-events: none;
		}

		div#sectormap svg .centroid {
			stroke: #000000;
			stroke-width: 2;
			fill: rgba(255,255,255,1.00);
			pointer-events: none;
		}
		div#sectormap svg .centroid.f {
			stroke: #000000;
			stroke-width: 2;
			fill: rgba(0,200,0,1.00);
			pointer-events: none;
		}

		div#sectormap svg .mtrigger {
			stroke: none;
			fill: transparent;
			cursor: pointer;
		}

		div#sectormap svg .sector {
			stroke: #0BA100;
			stroke-width: 1;
			fill: rgba(169,255,163,0.50);
			opacity: 0;
			pointer-events: none;
			transition: ease all 500ms;
		}
		span#page_description {
			width: 50%;
			display: inline-block;
			float: left;
		}
		span#alertFront {
			width: calc( 50% - 100px );
			display: inline-block;
			float: left;
			margin: 10px 50px;
			box-sizing: border-box;
			border: solid 2px black;
			border-radius: 10px;
			padding: 10px;
			background: linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
		}
		#alertFront.good {
			background: rgba(204,204,204,1);
			animation: flashGood 10s ease 1;
			animation-fill-mode: forwards;
		}
		#alertFront.bad {
			background: rgba(204,204,204,1);
			animation: flashBad 10s ease 1;
			animation-fill-mode: forwards;
			animation-delay: 1s;
		}
		@keyframes flashGood {
			0%{background-color: rgba(204,204,204,1)}
			10%{background-color: rgba(136,204,136,1)}
			90%{background-color: rgba(136,204,136,1)}
			100%{background-color: rgba(183,204,183,1)}
		}
		@keyframes flashBad {
			0%{background-color: rgba(204,204,204,1)}
			25%{background-color: rgba(255,156,156,1.00)}
			75%{background-color: rgba(255,156,156,1.00)}
			100%{background-color: rgba(245,196,148,1.00)}
		}
span#alertFront h4 {
	margin: 0 0 15px 0;
}
span#alertFront a,
span#alertFront a:visited {
	color: black;
	transition: ease all 500ms;
}
span#alertFront a:hover {
	color: white;
	background-color: rgba(0,0,0,0.10)
}
#datascreen #animator #usrwarn {
    position: absolute;
    left: 25%;
    bottom: 10%;
    display: block;
    width: 50%;
    z-index: 1;
    text-align: center;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
	transition: ease all 500ms;
	opacity: 0;
	font-size: 14px;
	pointer-events: none;
	border: solid 1px black;
}
#datascreen #animator #usrwarn.warned {
	pointer-events: all;
	opacity: 1;
}
#datascreen #animator #usrwarn.minor {
    background: rgb(237,237,237,0.8);
	/*background: linear-gradient(to bottom,  rgba(237,237,237,1) 0%,rgba(188,188,188,1) 100%);*/
}
#datascreen #animator #usrwarn.major {
	background: rgba(255,165,63,0.8)
	/*background: linear-gradient(to bottom,  rgba(255,197,127,1) 0%,rgba(255,165,63,1) 100%);*/
}

@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}

#datascreen #quickmod {
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
    padding: 10px;
}
	#animator .featureToggles {
		position: absolute;
		color: white;
		width: 25px;
		padding: 5px;
		font-size: 12px;
		line-height: 25px;
		white-space: nowrap;
		border: solid 2px white;
		border-radius: 15px;
		left: 5px;
		background-color: rgba(0,0,0,.5);
		cursor: pointer;
		user-select: none;
		transition: ease all 200ms;
		z-index: 100;
		overflow: hidden;
		opacity: 1;
	}
#animator .featureToggles.fade {
	opacity: 0.1;
}
	#animator .featureToggles:hover {
		background-color: rgba(125,215,125,0.75); /* rgba(0,150,225,.5); */
		width: auto;
		min-width: 115px;
		padding: 5px 10px 5px 5px;
		box-sizing: border-box;
		opacity: 1;
	}
#animator .featureToggles.teach {
	width: auto;
	padding: 5px 10px 5px 5px;
	box-sizing: border-box;
	animation: teach 1s ease 30;
}

@keyframes teach {
	0%{background-color: rgba(0,0,0,.5);}
	50%{background-color: rgba(56,120,197,0.75);}
	100%{background-color: rgba(0,0,0,.5);}
}
#animator .featureToggles.good {
	animation: good 1s ease 10;
}
#animator .featureToggles.bad {
	animation: bad 1s ease 10;
}
@keyframes good {
	0%{background-color: rgba(0,0,0,.5);}
	50%{background-color: rgba(60,200,60,0.75);}
	100%{background-color: rgba(0,0,0,.5);}
}
@keyframes bad {
	0%{background-color: rgba(0,0,0,.5);}
	50%{background-color: rgba(225,140,50,0.75);}
	100%{background-color: rgba(0,0,0,.5);}
}
	#animator .featureToggles img {
		display: inline-block;
		padding: 0 5px 0 0;
		height: 25px;
		width: auto;
		float: left;
		vertical-align: bottom;
	}
	#animator #mapToggle {
		top: calc( var(--featTogTop) + 0*45px);
	}
	#animator #settingsToggle {
		top: calc( var(--featTogTop) + 1*45px);
	}
	#animator #compToggle {
		top: calc( var(--featTogTop) + 2*45px);
	}
	#animator #metaToggle {
		top: calc( var(--featTogTop) + 3*45px);
	}
	#animator #alertToggle {
		top: calc( var(--featTogTop) + 4*45px);
	}
	#animator #shareToggle {
		top: calc( var(--featTogTop) + 5*45px);
	}
	#animator #saveToggle {
		top: calc( var(--featTogTop) + 6*45px);
	}
	#animator #devToggle {
		top: calc( var(--featTogTop) + 7*45px);
	}

#animator #readoutVal {
	font-family: "Lucida Console", Monaco, monospace;
	position: absolute;
	background-color: rgba(0,0,0,.5);
	color: white;
	font-size: 12px;
	padding: 2px 5px;
	border-radius: 5px;
	overflow: auto;
	pointer-events: none;
	padding: 5px;
	box-sizing: border-box;
	z-index: 1000;
}
#animator #readoutVal span.label {
	text-align: left;
	display: inline-block;
	float: left;
}
#animator #readoutVal span.value {
	text-align: right;
	display: inline-block;
	float: right;
	padding-left: 10px;
}
#animator #readoutVal sup, #animator #readoutVal sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
#animator #readoutVal sub { 
  top: 0.4em; 
}
#animator .progress-ring {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	user-select: none;
	z-index: 100;
}
#animator .progress-ring__circle {
	transition: stroke-dashoffset 0.2s;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	/*
	24 = radius(20px(r)-8px(stroke)=12px) * 2
	circum = 2R*pi
	circumference is the value used to set the dasharray to "zero percent"
	*/
	stroke-dasharray: calc( 24px * 3.1415926535 ), calc( 24px * 3.1415926535 );
	stroke-dashoffset: calc( 24px * 3.1415926535 );
}
#animator .progress-ring__circle.complete {
	stroke: rgb(0 200 0);
	stroke-dashoffset: 0;
}
	div.popup.large {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.75);
		z-index: 1000;
		transition: 500ms ease;
		color: white;
		padding: 30px 10%;
		box-sizing: border-box;
		z-index: 10000;
	}
	div.popup.small {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 50%;
		background-color: rgba(0,0,0,0.75);
		z-index: 1000;
		transition: 500ms ease;
		color: white;
		padding: 20px;
		border-radius: 20px;
		border: solid 2px white;
		box-sizing: border-box;
		z-index: 10000;
	}
#datascreen #featureNotifications {
	display: block;
	margin: 5px auto 0 auto;
	width: -moz-fit-content;
	width: fit-content;
}
#datascreen .feature-notify {
	display: none; /* hide on page load until classes are applied */
	/*width: -moz-fit-content;
	width: fit-content;*/
	float: left;
	width: auto;
	font-size: 12px;
	line-height: 12px;
	padding: 5px 10px;
	margin: 0 5px;
	box-sizing: border-box;
	border-radius: 15px;
	background-color: rgba(0,0,0,0.25);
}
#datascreen .feature-notify.enabled {
	/* width needs to be declared again because display none/block confuses FF */
	width: -moz-fit-content;
	display: inline-block;
	color: white;
}
#datascreen .feature-notify.disabled {
	/* width needs to be declared again because display none/block confuses FF */
	width: -moz-fit-content;
	display: inline-block;
	color: rgba(200,200,200,1.00);
}
#datascreen .feature-notify::before {
	content: "\00B7"; /*·*/
	font-size: 600%;
    line-height: 0px;
    display: block;
}
#datascreen .feature-notify.enabled::before {
	color: lightgreen;
}
#datascreen .feature-notify.disabled::before {
	color: gray;
}
#datascreen .feature-notify span.message {
    padding-left: 20px;
}
div.popup span.blurb {
	display: block;
	font-size: 12px;
	text-align: center;
	clear: both;
}
	div.popup.closed {
		display: none;
	}
	div.popup.open {
		display: block;
	}
	img.close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
		height: auto;
		display: block;
		cursor: pointer;
	}
	div.popup h3 {
		text-align: center;
		font-size: 16px;
	}
	div.popup h1,
	div.popup h4 {
		text-align: center;
	}
div.popup h5 {
	margin: 0;
	padding: 0;
}
div.popup.small h2 {
	font-size: 12px;
	text-align: center;
}
	div.popup a,
	div.popup a:link,
	div.popup a:visited {
		color: rgb(50,140,50);
	}
	div.popup a:hover {
		color: white;
	}
	div.popup#meta div#metaTarget {
		background: rgb(238,238,238);
		background: linear-gradient(135deg,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
		color: black;
		padding: 10px;
		overflow: auto;
		border-radius: 15px;
		border: solid 3px green;
		width: 66%;
		font-size: 14px;
		margin: 0 auto;
	}

	div.popup#meta div#metaTarget h1.lvltitle {
		text-align: left !important;
		margin: 0;
		padding: 0;
		font-size: 18px;
		color: red;
		font-style: oblique;
	}

	div.popup#meta div#metaTarget h2.prodtitle {
		margin: 0;
		font-size: 20px;
	}
	div.popup#meta div#metaTarget div#col {
		width: 33%;
		box-sizing: border-box;
		float: left;
	}

	div.popup#meta div#metaTarget div#col:not(:nth-of-type(3)) {
		border-right: solid 1px black;
	}

	div.popup#meta div#metaTarget h3.colheader {
		border-bottom: solid 2px black;
		line-height: 25px;
		font-size: 12px;
		margin: 0;
	}
	div.popup#meta div#metaTarget div#col span {
		display: block;
		border-bottom: dotted 1px black;
		line-height: 25px;
		height: 25px;
		padding: 0 10px;
	}

	div.popup#meta div#metaTarget div#metanotes {
		float: left;
	}

	div.popup#meta div#metaTarget #metanotes img {
		display: block;
		margin: 0 auto;
		height: 50px;
	}
div.popup#settings {
	padding: 30px 5%;
}
div.popup#settings h4 {
	margin: 5px;
	border-bottom: white 2px solid;
}
div.popup#settings h4 span.loaddeetz {
	cursor: pointer;
	user-select: none;
}
div.popup#settings hr {
	width: 100%;
	margin-bottom: 20px;
	visibility: hidden;
}
div.popup#settings div.setting {
    position: relative;
    display: inline-block;
    overflow: visible;
    width: 25%;
    float: left;
}
div.popup#settings div.setting:nth-of-type(1) {
    width: 50%;
}
div.popup#settings span.deetz {
	display: none;
	float: left;
	width: 70%;
	font-size: 14px;
}
div.popup#settings div.buttonGroup {
	position: relative;
    display: block;
    width: 100%;
    float: left;
    text-align: center;
	border-right: white 1px dotted;
}
div.popup#settings div.setting:nth-of-type(3) div.buttonGroup,
div.popup#settings div.setting:nth-of-type(7) div.buttonGroup {
	border-right: none;
}
div.popup#settings span.niceButton {
	/* I'm not sure why they need a fixed reduction to width? but these values work. */
	width: calc( 50% - 22.5px );
	margin: 10px;
}
div.popup#settings div.buttonGroup#parcel span.niceButton {
	width: calc( 25% - 23.5px );
}
div.popup#settings div.buttonGroup#measure span.niceButton {
	width: calc( 33.3% - 23px );
}
div.popup#settings span.niceButton:hover {
	transform: scale(1.25) skewX(-10deg);
}
div.popup#settings div.buttonGroup input[name="resLabel"] {
	display: inline-block;
    float: left;
    width: calc( 25% - 10px );
    text-align: center;
    height: 30px;
    border: none;
    padding: 0px;
    margin: 15px 0 15px 10px;
    font-size: 1em;
}
div.popup#settings div.buttonGroup input.formslider {
    display: inline-block;
    float: left;
    height: 30px;
    width: calc( 75% - 10px );
    margin: 15px 5px;
    padding: 0;
    outline: none;
    border: none;
}
div.popup#settings div#settingmeta {
	width: 50%;
    margin: 0 auto;
    display: block;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
	clear: both; /* FF will not display correctly if clear is undefined due to previous elements having float declared */
}
	div.popup#share input[type="text"] {
		text-align: center;
		display: block;
		margin: 0 auto;
		padding: 5px;
		box-sizing: border-box;
		width: 100%;
	}
	div.popup#share button {
		width: 10%;
		height: 28px;
		display: block;
		padding: 0 14px;
		margin: 0 auto;
		box-sizing: content-box;
		color: white;
		background: rgb(204,204,204);
		background: linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		border: none;
		outline: none;
		cursor: pointer;
	}
	div.popup#share button:active {
		background: rgb(66,127,66);
		background: linear-gradient(to bottom, rgb(66,127,66) 0%,rgb(171,204,171) 100%);
	}
	div.popup#share #socialbuttons {
		width: -moz-fit-content;
		width: fit-content;
		overflow: auto;
		display: block;
		margin: 0 auto;
	}
	div.popup#share #socialbuttons a,
	div.popup#share #socialbuttons a:link,
	div.popup#share #socialbuttons a:visited  {
		font-size: 30px;
		color: white;
	}