canvas {
	width: calc(100% - 15em);
}

div#uiBase {
	display: inline-block;
	position: relative;
	vertical-align: top;
	background-color: rgba(0, 0, 0, 0.5);
	margin-left: 0em;
	padding: 0.5em;
	width: 12em;
}

.planetIdLabel {
	position: relative;
	left: calc(2.2em + 0px);
	font-size: 1em;
}

.orbitLabel {
	position: relative;
	left: calc(3.5em);
	font-size: 1em;
}

.planetEntry {
	margin-top: 0.5em;
}

span#idLabel {
	display: inline-block;
	position: relative;
	width: 2em;
	text-align: center;
	top: -0.5em;
}

.colourBox {
	display: inline-block;
	width: 3em;
	height: 1.5em;
}

.orbitInputBox, .orbitInputBoxDisabled{
	position: relative;
	display: inline-block;
	width: 3em;
	left: 2.2em;
	height: 1.5em;
	top: calc(-0.5em - 1px);
	text-align: center;
	vertical-align: center;
}

.orbitInputBoxDisabled {
	background-color: #cccccc;
}

input {
	vertical-align: middle;
}

button {
	width: 100%;
	margin-top: 1em;
	color: #ffffff;
	background-color: #359116;
	border: none;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

button:hover {
	background-color: #43b51d;
}

div.speedDisplay {
	width: 100%;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

input.speedControlSlider {
	width: 100%;
	padding: 0;
	margin: 0;
}


input.speedControlSlider {
	-webkit-appearance: none;
	width: 100%;
	height: 2px;
	background: #888888;
	outline: none;
	opacity: 0.75;
	-webkit-transition: .2s;
	transition: opacity .2s;
	pointer-events: auto;
}

input.speedControlSliderDisabled {
	pointer-events: none;
	-webkit-appearance: none;
	width: 100%;
	margin-left: 0px; /* not sure why this is needed, but without it, the slider shifts to the right a bit when disabled */
	height: 2px;
	background: #888888;
	outline: none;
	opacity: 0.2;
	pointer-events: none;
}

input.speedControlSlider:hover {
	opacity: 1;
	background: #ffffff;
}

input.speedControlSlider::-webkit-slider-thumb, input.speedControlSliderDisabled::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 20px;
	background: #ffffff;
	cursor: pointer;
}

input.speedControlSlider::-moz-range-thumb, input.speedControlSliderDisabled::-moz-range-thumb {
	width: 15px;
	height: 20px;
	background: #333333;
	cursor: pointer;
}