body, html
{
	width: 100%;
	height: 100%;
	margin: 0;
  background-color: white;
}

body > div
{
	margin: 0;
}

*
{
	vertical-align: top;
}

.controls
{
	width: 15%;
	height: 100%;
	display: inline-block;
	padding: 0;
	margin: 0;
}

#src
{
	width: 70%;
	display: inline-block;
	padding: 0;
	margin: 0;
	white-space: pre;
	font-family: monospace;
	overflow: auto;
	height: 100%;
}

#src span:focus
{
	background-color: yellow;
}

#src .selected
{
	background-color: #FFFFB0;
}

#src .selectParent
{
	background-color: #E0E0E0;
}

#editor
{
	display: none;
	height: 100%;
}

body.editorMode > #editor
{
	display: block;
}

body.editorMode > #browser
{
	display: none;
}

body
{
	overflow: hidden;
}

#editor ul
{
	border-style: solid;
	border-color: black;
	border-width: 1px;
	display: block;
	padding: 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 33%;
	margin: 0;
	overflow: auto;
}

ul#inscope
{
	height: 100%;
	border-bottom-width: 1px !important;
	overflow-y: auto;
}

#editor ul:first-child
{
	border-bottom-width: 0px;
}

#editor #operators, #editor #literals
{
	display: none;
}

#editor .showops > #operators, #editor .showlit > #literals
{
	display: block;
}

#editor li
{
	display: inline-block;
	border-style: solid;
	border-color: lightgrey;
	border-width: 1px;
	padding: 2px;
	margin: 4px;
	min-width: 9mm;
	min-height: 9mm;
  text-size: 4mm;
	cursor: pointer;
}

#nav > li
{
	min-width: 20mm;
}

/* AST Nodes */
#src span
{
	border-width: 1px;
	border-style: solid;
	border-color: lightgrey;
	display: inline-block;
	line-height: 6mm;
	margin-left: 0.5mm;
	margin-right: 0.5mm;
}

#src div
{
	background-color: inherit;
}

.object
{
	display: inline;
}

.object > *
{
	margin-left: 2em;
}

.object:before
{
	content: '#{';
}

.object:after
{
	content: '}';
	display: block;
}

.varname:after
{
	content: ' <-';
}

.lambda
{
	display: inline;
}

.lambdabody
{
	display: block;
	margin-left: 2em;
}
.args
{
	display: inline-block;
}
.args:after
{
	content: '{';
}

.lambdabody:after
{
	display: block;
	content: '}';
	margin-left: -2em;
	background-color: inherit;
}

.funcall > .funcall, .assignment > .funcall
{
	display: inline-block;
}

.funcall > .funcall:before, .op > .funcall:before
{
	content: '(';
}

.funcall > .funcall:after, .op > .funcall:after
{
	content: ')';
}

.string
{
	color: #FF1030;
}

.string:before, .string:after
{
	content: '"';
}

.listlit:before
{
	content: '[';
}

.listlit:after, .arraylit:after
{
	content: ']';
}

.arraylit:before
{
	content: '#[';
}

.funpart
{
	color: #108030;
}

.args
{
	color: #1030C0;
}

.op > div
{
	display: inline-block;
}