@import url('layout.css');
@import url('controls.css');

/* leave the remaining rules here for unique elements that don't fit in the other files, such as the one-off text outputs */

#output {
	width: 21em;
	height: 100%;
	margin: 0px;
	border: 0px none;
	padding: 0px;
	background-color: white;
	color: black;
	font-family: 'Lucida Console', Monaco, monospace;
	font-size: 12px;
	resize: none;
}

/*fps, camera location etc*/
.statinfo {
	height: auto;
	width: 100%;
	float: right;
	background-color: #404040;
	padding: 3px;
	border: 1px inset white;
	margin: auto;
	overflow: hidden;
	outline-style: solid;
	outline-width: thin;
	display: inline-block;
	/*
	display: inline-block;
	width: 100%;
	height: auto;
	font-family: Arial;
	font-size: 10px;
	color: black;
	*/
	/*
	margin: 0px;
	border: 0px none;
	padding: 0px;
	background-color: white;
	*/
}

.statlines {
	width: 100%;
	float: right;
	text-align: left;
}

/*
div {
	resize: both; //horizontal, vertical, both, none, see this page: https://www.w3schools.com/cssref/css3_pr_resize.asp
}
*/

#groupexpand {
	width: 5px;
	display: block;
}
#groupexpand:hover {
background-color: green;
}

#groupbox {
	width: 100%;
	height: 3em;
	display: inline-block;
	overflow: hidden;
	color: black;
}
#groupbox:hover {
	height: auto;
}
#groupfield {
	width: auto;
	height: 0px;
	overflow: hidden;
	padding: 3px;
	border: 1px inset white;
	margin: 5px;
	min-height: 1em;
	color: inherit;
}
#groupfield:hover {
	height: auto;
}

#grouptitle {
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	text-align: center;
	width: 100%;
	height: auto;
	padding: 0px;
	border: 1px solid white;
	margin: 0px;
	color: inherit;
}

#spinnerControl {
	display: inline-block;
	width: 100%;
	height: 2em;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
	padding: 0px;
	border: 5px;
	outline-style: solid;
	outline-width: thin;
}
#spinnerLabel {
	float: left;
}
#spinnerInput {
	height: 100%;
	float: right;
	font-size: 10px;
	text-align: right;
	max-width: 30%;
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

#sliderControl {
	display: inline-block;
	width: 100%;
	height: auto;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
	border: 0px none;
	padding: 0px;
	outline-style: solid;
	outline-width: thin;
}
#sliderLabel {
	float: left;
}
#sliderTextValue {
	float: right;
}
#sliderInput {
	float: left;
	width: 95%;
	margin: 0px;
	padding: 0px;
	border: 0px none;
}
#colorControl {
	display: inline-block;
	width: 100%;
	height: 2em;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
	border: 0px none;
	padding: 0px;
	outline-style: solid;
	outline-width: thin;
}
#colorLabel {
	float: left;
}
#colorInput {
	float: right;
	height: 100%;
	width: 50px;
	margin: 0px;
	border: 0px none;
	padding: 0px;
}

#checkControl {
	display: inline-block;
	width: 100%;
	height: 2em;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
	border: 0px none;
	padding: 0px;
	outline-style: solid;
	outline-width: thin;
}
#checkLabel {
	float: left;
}
#checkInput {
	float: right;
	height: 100%;
	width: 10%;
	margin: 0px;
	padding: 0px;
	border: 0px none;
}