/* common styles */
html {
	height: 100%;
}
body {
	font-size: 15px;
	font-family: sans-serif;
	position: relative;
	min-width: 760px;
	height: 100%;
	padding: 0;
	margin: 0;
}
a, a:link, a:visited, a:active {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.top_bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28px;
	white-space: nowrap;
	overflow: hidden;
}
.left_pane {
	position: absolute;
	top: 29px;
	bottom: 0;
	left: 0;
	right: 0;
}
.help_pane, .params_pane, .learn_pane {
	display: none;
	position: absolute;
	top: 29px;
	bottom: 0;
	left: 58%;
	right: 0;
	overflow: hidden;
}
.helpon .left_pane, .paramson .left_pane  { right: 42%; }
.helpon .help_pane { display: block; }
.paramson .params_pane { display: block; }
.middle_pane {
	position: relative;
	top: 29px;
	margin: 0 auto;
	padding: 0 30px;
	width: calc(425px + 34%);
	min-height: calc(100% - 40px);
}

.top_bar>* {
	padding: 5px 12px;
	height: 18px;
	min-width: 73px;
	text-align: center;
}
.top_bar>.L { float: left; }
.top_bar>.R { float: right; padding: 5px; }
.top_bar .headline {
	max-width: calc(100% - 560px);
}
.top_bar .headline div {
	overflow: hidden;
	text-overflow: ellipsis;
}
.about h3 { margin-top: 40px; }

a.tab_thumb {
	display: inline-block;
	padding: 6px 14px;
	margin: 0;
	cursor: pointer;
}
.tab_content {
	display: none;
	padding: 15px 4px;
	position: absolute;
	top: 25px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	word-wrap: break-word;
	box-sizing: border-box;
}
.active_content {
	display:block;
}
.tab_content li {
	margin-bottom: 12px;
}
#no_params.nodisplay {
	display: none;
}

#sliders {
	position: relative;
}

.sliderOut {
    display: flex;
	align-items: center;
	height: 45px;
}

.sliderOut > * {
	flex-grow: 1;
	padding: 9px;
}

.sliderLabel { width: 23.2%; text-align: right; }
.sliderRange { width: 53.2%; }
.sliderDispl { width: 23.2%; text-align: left; }

#controls {
	position: absolute;
	top: 16px;
	right: 0;
	z-index: 12;
}
#controls.learn {
	position: static;
	top: 0;
	right: 0;
	text-align: center;
	padding: 12px;
}
#controls>a {
	display: block;
	margin: 4px 0;
	padding: 7px;
	width: 36px;
	height: 36px;
	cursor: pointer;
}
#controls>a::after {
	content: " ";
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-size: 1100%;
	background-repeat: no-repeat;
}
#controls.learn>a {
	display: inline-block;
	border: 1px solid #949ac7;
	width: auto;
	position: relative;
	padding: 8px 11px 7px 41px;
	height: 21px;
}

#controls.learn>a::after {
	position: absolute;
	top: 0;
	width: 34px;
	left: 2px;
	height: 34px;
}

#c_play::after {background-position: 30% 0;}
#c_stop::after {background-position: 50% 0;}
#c_post::after {background-position: 70% 0;}
#c_help::after {background-position: 10% 50%;}
#c_params::after {background-position: 10% 0;}
#c_output::after {background-position: 50% 50%;}
#c_delete::after {background-position: 90% 0;}
#c_play.playing::after {background-position: 30% 50%;}

#play_loading {
	display: block;
	margin: 4px 0;
	padding: 7px;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#play_loading.learn{
	display: inline-block;
}
#controls>*.nodisplay, #controls.learn>*.nodisplay {display: none;}

#errors {
	position: absolute;
	bottom: 0;
	right: 70px;
	max-width: 50%;
}
#errors>div {
	margin: 8px;
	padding: 8px;
	z-index: 12;
}
#tooltip {
	display: none;
	padding: 8px;
	position: absolute;
	bottom: 12px;
	right: 78px;
	max-width: 50%;
	z-index: 12;
}
#tooltip.on {
	display: block;
}
#tooltip.top {
	top: 10px;
	bottom: auto;
}
.learn #tooltip, .learn #errors {
	bottom: 81px;
}
.learn #tooltip.top {
	bottom: auto;
}

.middle_pane>table {
	width: 100%;
}
.middle_pane>table a {
	display: block;
	padding: 2px 3px;
}
.middle_pane>table td:last-child {
	padding: 3px 5px;
}
.middle_pane img {
	width: 200px;
}
a.restore_link {
	display: none;
}
a.restore_link.on {
	display: inline;
}
#modal_back {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	cursor: pointer;
	z-index: 13;
}
#modal_front {
	display: none;
	position: fixed;
	top: 15px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 520px;
	padding: 18px 9px;
	max-height: calc(100% - 70px);
	z-index: 14; /* CodeMirror being an ass */
	overflow-y: auto;
	
}
#modal_back.on, #modal_front.on {
	display: block;
}
#modal_front input, #modal_front textarea {
	margin: 8px 0;
	padding: 2px 8px;
}
#modal_front textarea {
	width: 96%;
	resize: vertical;
}
#modal_front input[type=text],
#modal_front input[type=password]  { width: 300px; }
#modal_front input[type=button] { padding: 4px 20px; }
#modal_front p { margin: 30px 0; }
#modal_front i { opacity: 0.82; }
#modal_front .label {
	display: inline-block;
	width: 140px;
}
#close_modal {
	position: absolute;
	top: 45px;
	right: 30px;
}
#quick_ref div {
	margin: 0 0 12px 12px;
}

#editor_container {
	width: calc(100% - 51px);
	height: 100%;
}
#editor_container.learn {
	width: 100%;
	height: calc(100% - 77px);
}



/********** color theme **********/


body.drk, .drk textarea {
	color: #484848;
	background-color: #fff;
}
.drk .top_bar {
	border-bottom: 1px solid #949ac7;
	color: #6b6b6b;
}
.drk .headline {
	border-bottom: 1px solid #949ac7;
}
.drk .top_bar>* {
	border-left: 1px solid #949ac7;
}
.drk .top_bar>a:hover {
	background-color: #f0f1fb;
}
.drk .help_pane, .drk .params_pane, .drk .learn_pane {
	border-left: 1px solid #949ac7;
}
.drk .middle_pane {
	background: #f2f2f2;
}
.drk #modal_front a:hover {color: #3913ff; }
.drk #modal_front h2 {color: #777; }
.drk .about a { color: blue; }
.drk #controls {
    /*background-color: #eaeaea*/
}
.drk #controls>a:hover {
	background-color: #f0f1fb;
}
.drk.helpon #c_help, .drk.helpon #c_help:hover {
	background-color: #949ac7;
}
.drk.helpon #c_help::after {
	background-position: 50% 50%;
}
.drk.paramson #c_params, .drk.paramson #c_params:hover {
	background-color: #949ac7;
}
.drk.paramson #c_params::after {
	background-position: 70% 50%;
}
.drk .middle_pane>table tr:nth-child(odd) {
	background-color: #dcdcdc;
}
.drk .middle_pane>table th {
	background-color: #949ac7;
	color: white;
}
.drk .middle_pane>table a:hover {
	background-color: #f0f1fb;
	outline: 1px solid #949ac7;
}
.drk #output .message {
	color: #3d3;
}
.drk #output .error {
	color: #f11;
}
.drk .tab_content a {
	text-decoration: underline;
}
.drk .tab_content a:hover {
	color: #3913ff;
}
.drk a.tab_thumb:hover {
	background-color: #f0f1fb;
}
.drk a.active_thumb, .drk a.active_thumb:hover {
	background-color: #949ac7;
	color: white;
}
.drk #errors>div {
	border: 1px solid #e66;
	background-color: #ffe6e6;
}
.drk #tooltip {
	border: 1px solid #777;
	background-color: white;
}
.drk #modal_back {
    background-color: rgba(0, 0, 0, 0.44);
}
.drk #modal_front {
	border: 1px solid #999;
	background-color: white;
}
.drk #modal_front input, .drk #modal_front textarea {
	background-color: #f1f1f1;
	border: 1px solid #8e8e8e;
	color: black;
}
.drk #modal_front a {
	text-decoration: underline;
}
.drk #modal_front hr { border: 1px solid #b5b5b5; }
.drk #quick_ref b {
	color: #708;
}
.drk #metadata em {
	color: #909090;
}


/* codemirror theme */
.cm-s-masher-light.CodeMirror { background: #f2f2f2; border-right: 1px solid #949ac7; }
.cm-s-masher-light .CodeMirror-gutters { background: white; border-right: 1px solid #949ac7; }

.learn .cm-s-masher-light.CodeMirror { border-bottom: 1px solid #949ac7; border-right:none; }
.learn .cm-s-masher-light .CodeMirror-gutters { background: transparent; }

/* (everything below is copied from the default theme) */
.cm-s-masher-light .cm-header {color: blue;}
.cm-s-masher-light .cm-quote {color: #090;}
.cm-s-masher-light .cm-keyword {color: #708;}
.cm-s-masher-light .cm-atom {color: #219;}
.cm-s-masher-light .cm-number {color: #164;}
.cm-s-masher-light .cm-def {color: #00f;}
.cm-s-masher-light .cm-variable-2 {color: #05a;}
.cm-s-masher-light .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-masher-light .cm-comment {color: #a50;}
.cm-s-masher-light .cm-string {color: #a11;}
.cm-s-masher-light .cm-string-2 {color: #f50;}
.cm-s-masher-light .cm-meta {color: #555;}
.cm-s-masher-light .cm-qualifier {color: #555;}
.cm-s-masher-light .cm-builtin {color: #30a;}
.cm-s-masher-light .cm-bracket {color: #997;}
.cm-s-masher-light .cm-tag {color: #170;}
.cm-s-masher-light .cm-attribute {color: #00c;}
.cm-s-masher-light .cm-hr {color: #999;}
.cm-s-masher-light .cm-link {color: #00c;}
.cm-s-masher-light .cm-error {color: #f00;}