html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
	background-color: #333;
}

#header {
	background-color: #111;
	color: #eee;
	padding: 10px;
}

#header #title {
	float: left;
	font-family: "Varela Round";
	font-size: 20px;
	padding: 10px;
}

#header #options {
	float: left;
	font-size: 14px;
}

#header #options input:focus, #header #options select:focus {
	outline: none;
}

#header #options ul {
	list-style-type: none;
}

#header #options ul li {
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #555;
}

#container {
	min-height: 100%;
	background-color: #333;
}

#container #editor {
	width: 100%;
	min-height: 100px;
	margin-left: auto;
	margin-right: auto;
	background-color: #333;
	color: #aaa;
	display: block;
}

#container #editor:focus {
	outline: none;
}

#container:after {
	content: "";
	display: block;
}

#container #result {
	padding: 10px;
}

#footer, #container:after {
	height: 20px;
}

#footer {
	background-color: #111;
	color: #eee;
	padding: 10px;
	padding-bottom: 40px;
}
#footer p {
	padding-right: 10px;
}

.clear { clear:both; }
.left { float:left; }
.right { float:right; }