#animator {
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		position: relative;
		margin: 0 auto;
		display: block;
		overflow: auto;
		min-width: 800px; /* free to set */
		/*width controlled by content which is determined by JS*/
		width: -moz-fit-content;
		width: fit-content;
		overflow: hidden;
	}
	#animator #rateChange {
		position: absolute;
		top: calc( 50% - 36px );
		left: calc( 50% - 100px );
		z-index: 100;
		width: 200px;
		height: 72px;
		color: white;
		text-align: center;
		font-size: 72px;
		line-height: 72px;
		-webkit-text-stroke: 5px black;
		text-stroke: 5px black;
		font-weight: 900;
		-webkit-text-stroke: 3px black;
		text-stroke: 5px black;
		box-sizing: border-box;
		user-select: none;
		white-space: nowrap;
		display: none;
	}
	#animator canvas#canvas {
		display: block;
		background-color: black;
		width: 100%;
		cursor: crosshair;
	}
	#animator[data-fsound="false"] canvas#canvas {
		cursor: pointer;
	}
	#animator canvas#progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none;
		user-select: none;
	}
	
	#animator #controls {
		font-size: 12px;
		width: 100%;
		height: 25px;
		margin: 0 auto;
		user-select: none;
	}

	#animator #timerBar {
		background: rgb(66,127,66);
		background: linear-gradient(to bottom, rgb(66,127,66) 0%,rgb(171,204,171) 100%);
		text-align: center;
		float: left;
		line-height: 25px;
		text-shadow: white 1px 1px 1px;
		height: 100%;
		width: 75%;
		overflow: hidden;
		position: relative;
	}
#animator #timerBar.incomplete {
    background: linear-gradient(180deg, rgba(255,140,0,1.00), rgba(237,223,147,1.00), rgba(66,127,66,1.00), rgba(171,204,171,1.00));
    background-size: 100% 300%;
    animation: warn 10s ease 1;
	animation-fill-mode: forwards;
}
#animator #timerBar.incomplete::after {
	content: "Incomplete Data Set";
}

@keyframes warn {
    0%{
		background-position:50% 0%;
		color: black;
		text-shadow: white 1px 1px 1px;
	}
    90%{
		background-position:50% 0%;
		color: black;
		text-shadow: white 1px 1px 1px;
	}
    100%{
		background-position:50% 100%;
		color: white;
		text-shadow: none;
	}
}
	#animator #slider {
		position: absolute;
		background: #e2e2e2;
		background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
		color: black;
		width: 40px;
		height: 25px;
		line-height: 23px;
		border: 1px solid #000;
		border-radius: 12px;
		z-index: 100;
		top: 0; /* keeps the marker from breaking to new line due to text in rollover region */
		left: 0;
		cursor: pointer;
		box-sizing: border-box;
		/*pointer-events: none;  i think because techincally its just a visual indicator, no longer dragged */
	}
	#animator #controls button {
		width: 5%;
		height: 100%;
		color: white;
		float: left;
		display: block;
		box-sizing: border-box;
		font-size: 12px;
		border: none;
		cursor: pointer;
		user-select: none;
		background: rgb(204,204,204);
		background: linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		outline: none;
	}
	#animator #controls button[name="rate"]:active {
		background: rgb(171,204,171);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/speed.png), linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#animator #controls button[name="rate"] {
		background: rgb(204,204,204);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/speed.png), linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#animator #controls button[name="step"]:active {
		background: rgb(171,204,171);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/step.png), linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#animator #controls button[name="step"] {
		background: rgb(204,204,204);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/step.png), linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#animator #controls button[name="rate"][value="-"],
	#animator #controls button[name="step"][value="-"]{
		transform: scaleX(-1);
	}
	#animator #controls button[name="loopToggle"][value="stopped"] {
		background: rgb(171,204,171);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/play.png),linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
#animator #controls button[name="loopToggle"][value="stopped"].loadRequired {
	background: rgba(255, 140, 0,1);
	background-image: url("https://weather.cod.edu/assets/images/common/ani/loadplay.png"),linear-gradient(to bottom, rgba(237,223,147,1) 0%,rgba(255, 140, 0,1) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
}

	#animator #controls button[name="loopToggle"][value="started"] {
		background: rgb(204,204,204);
		background-image: url(https://weather.cod.edu/assets/images/common/ani/stop.png),linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

	}