* { box-sizing: border-box; }
body { font-family: Verdana, Geneva, sans-serif; font-size: 14px; }
body, textarea { border: 0px; }
table { border-collapse: collapse; }
table, tr, th, td { border: 0; }
textarea { margin: 0; padding: 0; }
h1, h2 { margin: 0.2em 0; }
.hide { display: none; }
.xx-small { font-size: xx-small; }

a { color: #000000; }

/* syntax hilighting */
.hilight_fact { color: #0077FF; }
.hilight_head { color: #008000; }
.hilight_negative_head { color: #ff0000; }
.hilight_body { color: #dd8800; }
.hilight_punctuation { color: #a53872; }
.hilight_variable { font-weight: bold; font-style: italic; }
sub.dictid { color: #888888; font-size: 0.5em; }

/* layout */
#wrapper,
#editor,
#output,
div.tab,
div.panel { width: 100%; min-width: 337px; }
#content { min-width: 337px; max-width: 720px; margin: 0 auto; }

#output textarea { width: 100%; height: 278px; }
#editor textarea { width: 100%; height: 248px; }
#tabs_activators { margin-top: 0.8em; }
div.scroll-outer { overflow: hidden; height: 280px; }
div.scroll-inner { height: 280px; overflow-y: auto; }
div.panel { float: left; border: 1px solid #999999; }
div.flex {
	display: flex;
	flex-direction: column;
	height: 100%;
}
div.expand { flex: 1 }

.tab::after,
.row::after { content: ""; clear: both; display: table; }

/* limit width on wide screens */
@media only screen and (min-width: 735px) {
	.textarea-wrapper textarea,
	div.tab,
	div.panel { width: 720px; }
}

/* footnote and copyleft */
.note { font-size: 0.7em; margin-top: 0.3em; }
span.copyleft {
	display:inline-block;
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

/* intro/examples/tests select */
#intro_select { float: right; }
div.bar-select {
	margin-left: 1em;
	width: 200px;
	text-align: right;
	float: left;
}

/* button/tool bar */
div.button,
div.active-button {
	float: left;
	margin: 0.25em;
	border-width: 0 2px 3px 0;
	border-style: solid;
	border-color: #999999;
	background: #333333;
	color: #FFFFFF;
	padding: 0.1em 0.5em;
	padding-bottom: 0.2em;
	cursor: pointer;
}
.active-button { background: #AAAAAA!Important; }
.disabled-button {
	border-color: #DDDDDD!Important;
	background: #CCCCCC!Important;
	color: #AAAAAA!Important;
}

/* options bar */
#options_bar { float: right; padding-top: 7px; }
#options_bar input[type=checkbox] { display: none; }
#options_bar label::before { content: "☐ ";}
#options_bar input[type=checkbox]:checked ~ label::before { content: "☑ "; }
#options_bar label { display: inline-block; cursor: pointer; }

/* status bar */
#status_bar {
	width: 100%;
	background: #EEEEEE;
	color: #000000;
	border: 1px solid #999999;
	border-top: 0px;
	padding: 0.3em 0.5em;
	font-weight: bold;
}
#status_bar strong { font-weight: normal; }
span.status { font-weight: normal; }
span.running { color: #008000; }
span.stopped { color: #ff0000; }
span.finished { color: #000000; }

/* tabs */
div.tab-activator {
	float: left;
	margin: 0;
	margin-left: 0.1em;
	width: 110px;
	text-align: center;
	border-width: 3px 2px 0 2px;
	border-style: solid;
	border-color: #999999;
	background: #333333;
	color: #FFFFFF;
	padding: 0.1em 0.5em;
	padding-bottom: 0.2em;
	cursor: pointer;
}
div.active-tab-activator { background: #AAAAAA!Important; }

/* steps tab */
div.step-details { padding-bottom: 1em; }
span.collapser { display:inline-block; }
.step-active span.collapser { transform: rotate(90deg); }
div.step-activator {
	width: 100%;
	border-color: #999999;
	background: #666666;
	color: #FFFFFF;
	border: 2px solid #999999;
}