@import url(http://fonts.googleapis.com/css?family=Fjalla+One);

body {
	width: 100%;
	height: 100%;
	background-color: #00001f;
	color: #ddd;
	cursor: move;
	font: 9pt Arial, sans-serif;
	line-height: 1.5em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}
h1 {
	color: #575;
	font-size: 30pt;
	font-weight: 200; 
	font-family: 'Fjalla One', cursive;
  position: fixed;
  bottom: 0;
  right: 20px;
}
fieldset {
	width: 270px;
	margin-bottom: 1em;
	padding: 3px;
}
legend {
	font-weight: bold;
}
label {
	margin-right: 0.5em;
	line-height: 2em;
	text-align: right;
	font-weight: bold;
}
#custom {
	display: none;
}
#custom label {
	margin-left: 0.5em;
}
#values label {
	display: inline-block;
	min-width: 75px;
}
input {
	margin: 0.25em 0;
}
.vars {
	width: 3em;
}
#output {
	background-color: #00001f;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}
#controls {
	margin: 5px;
}
#controls > a, #controls > button {
	vertical-align: text-bottom;
}
#controls .move-enabled, .icon:hover {
	border: 1px solid #fff;
}
#panel {
	position: absolute;
	border: 1px solid #575;
	background-color: #000;
	cursor: default;
  left: 10px; top: 20px;
	padding: 5px;
}

.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(images/ui-icons_ffffff_256x240.png);
	border: 1px solid #111;
	padding: 3px;
}
.icon-play {
	background-position: 3px -157px;
}
.icon-pause {
	background-position: -13px -158px;
}
.icon-refresh {
	background-position: -157px -61px;
}
.icon-zoom-in {
	background-position: 3px 3px;
	background-image: url(images/zoom_in.png);
	background-repeat: no-repeat;
}
.icon-zoom-out {
	background-position: 3px 3px;
	background-image: url(images/zoom_out.png);
	background-repeat: no-repeat;
}
.icon-move {
	background-position: 3px 3px;
	background-image: url(images/move.png);
	background-repeat: no-repeat;
}