body { 
	margin: 0;
	font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
 }
canvas { display: block; }

#header {height: 100px;}
#center {width: 100%;}
#controls {
  float: left;
  height: 700px;
  width: 30%;
}
#threejsContainer {
  float: left;
  height: 700px;
  width: 66%;
}
#resultsBrowser {
  float: left;
  height: 700px;
  width: 300px;
}

#plootoHeadline{
  display: block;
  width: 220;
  margin: 20px auto 0 auto;
}

#jsonEditor{
  display: block;
  height: 500px;
}


.actionBtn {
	-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
	-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
	box-shadow:inset 0px 39px 0px -24px #e67a73;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e4685d), color-stop(1, #eb675e) );
	background:-moz-linear-gradient( center top, #e4685d 5%, #eb675e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4685d', endColorstr='#eb675e');
	background-color:#e4685d;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
text-indent:0;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:normal;
	font-style:normal;
height:40px;
	line-height:40px;
width:117px;
	text-decoration:none;
	text-align:center;
	text-shadow:0px 1px 0px #b23e35;
}.actionBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eb675e), color-stop(1, #e4685d) );
	background:-moz-linear-gradient( center top, #eb675e 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb675e', endColorstr='#e4685d');
	background-color:#eb675e;
	cursor: pointer;
}.actionBtn:active {
	position:relative;
	top:1px;
}

#generateBtn {
  display: block;
  margin: 20px auto 0 auto;
}

#solutionsList{
	list-style-type: none;
}

#solutionsList li {
	cursor: pointer;
	color: #145E16;
	margin-top: 10px;
}
#solutionsList li:hover{
	color:white;
	background-color: black;
}

#solutionsHeadline{
	padding-inline-start: 40px;
}

#dateTimeControl {
	margin-top: 10px;
}

#datePicker{
	display: inline-block;
	margin-top: 5px;
}

#timeControlWrapper {
	margin-top: 10px;
}

#timeTitle{
	display: block;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #ea675d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

#geoControl{
	margin-top: 10px;
}

.geoTitle {
	width: 100px;
	display: inline-block;
}