playground.css

html {
	height: 100%;
}

body {
	color: #222;
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
}

a {
	color: #009;
}

.box {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	border: 300px;
}

#content {
	top: 50px;
	bottom: 25%;
}

.yellow {
	background: #ebdac7;
	margin: 0px;
	padding: 10px;
}

#share-url {
	width: 320px;
	font-size: 16px;
	border: 1px solid #ccc;
	background: #eee;
}
#share-url.show-share-url-false {
	display: none;
}

#code,
#output,
pre,
.lines {
	font-family: Menlo, Courier\ New, monospace;
	font-size: 11pt;
	margin: 0px;
}

#code {
	width: 100%;
	height: 100%;
	background: inherit;
	border: none;
	float: right;
	margin: 0;
	outline: none;
	padding: 0;
	resize: none;
	wrap: off;
}

#output {
	position: absolute;
	overflow: scroll;
	background: #ddd;
	margin-top: 10px;
	padding: 10px;
	top: 75%;
}

#output .system,
#output .loading {
	color: #999;
}

#output .err {
	color: #900;
}

#output pre {
	margin: 0;
}

#banner {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
	padding: 4px;
}

#head {
	font-family: Arial, sans;
	font-size: 32px;
	font-variant: small-caps;
}

#controls {
	padding-left: 20px;
}

input[type="button"] {
	background: #eee;
	border: 1px solid #ccc;
	color: #222;
	font-size: 20px;
	height: 30px;
}

input[type="button"]:hover {
	background: #666;
	color: #fff;
}

label {
	font-family: sans-serif;
	font-size: 16px;
}

input[type="checkbox"] {
	height: 14px;
}

.lines {
	float: left;
	overflow: hidden;
	text-align: right;
}

.lines div {
	color: #d3d3d3;
	padding-right: 5px;
}

.lineerror {
	background: #fdd;
	color: red;
}

.exit {
	color: #d3d3d3;
}