.form-entry {
	margin-right: 30px;
}

.form-input select {
	margin-top:13px;  /* so that it lines up with input range */
}

#options, #animation_container {
	clear: both;
}

#options, #backToEarthButton, #debug {
	position: fixed;
	position: -ms-device-fixed;
}

#options {
	transition-property: all;
	transition-duration: 0.2s;
	top:15px;
	margin-top:0px;
}

	#options * {
		transition-property: all;
		transition-duration: 0.2s;
		position:relative;
	}

	#options:not(.collapsed) .collapsible {
		top:0px;
		opacity:1;
		height:157px;
	}

	#options.collapsed .collapsible {
		/* This is a hack job. With a day of studying, I could write something much better */
		top:-157px;
		opacity:0;
		height:0px;
	}

	#options #chevron {
		height:100px;
		width:51px;
		height:29px; /* image is 56 x 98. 98/56*29 == 50.75 */
		background-size: 51px;
		background-repeat:no-repeat;
	}

	#options.collapsed #chevron:not(:hover) {
		background-image:url(images/chevron_down.png);

	}

	#options.collapsed #chevron:hover {
		background-image:url(images/chevron_down_hover.png);
	}

	#options:not(.collapsed) #chevron:not(:hover) {
		background-image:url(images/chevron_up.png);
	}

	#options:not(.collapsed) #chevron:hover {
		background-image:url(images/chevron_up_hover.png);
	}

#backToEarthButton {
	bottom: 30px;
	right: 10px;
	font-size: 30px;
	transition-property: all;
	transition-duration: 0.2s;
}

	#backToEarthButton.hidden {
		visibility: hidden;
		right: -200px;
	}

	#backToEarthButton button {
		font-size: 30px;
	}

.show_on_hover {
	visibility: hidden;
}

.animation_body:hover .show_on_hover {
	visibility: visible;
}

body {
	color: white;
	background-color: black;
	-ms-touch-action: manipulation;
	font-family: Consolas;
	overflow: auto;
}

#animation {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

text {
	fill: white;
}

svg {
}

.hidden {
	/* display: none; */
	opacity: 0;
}

#debug {
	right: 10px;
}

#debug.hidden {
	display:none;
}

.debugPair {
	display:block;
}

	.debugPair :not(.debugLabel) {
		font-weight:bold;
	}