#editor .fraction {
	display: inline-block;
	vertical-align: middle;
	padding: 0px 1px;
}
#editor .nominator {
	border-bottom: 1px solid black;
}
#editor b .nominator {
	border-bottom: 1px solid #3EA47B;
}
#editor .denominator {
}
#editor .fraction .nominator, #editor .fraction .denominator {
	display: block;
	font-size: 75%;
	width: 100%;
	text-align: center;
}
#editor .fraction .nominator:empty::before {
	content: "\25a1";
}
#editor .fraction .denominator:empty::before {
	content: "\25a1";
}
#editor .root {
	display: inline-block;
	background: left bottom url(root.png) no-repeat;
	background-size: 8px 10px;
}
#editor b .root {
	background: left bottom url(groot.png) no-repeat;
	background-size: 8px 10px;
}
#editor .root .symbol {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	width: 6px;
	min-height: 24px;
	padding-right: 2px;
	font-size: 75%;
	text-align: right;
	vertical-align:bottom;
}
#editor .root .symbol:empty {
	min-height: 10px;
}
#editor .root .symbol::before {
}
#editor .root .argument {
	display: inline-block;
	border-left: 1px solid black;
	border-top: 1px solid black;
	padding-left: 2px;
}
#editor b .root .argument {
	border-left: 1px solid #3EA47B;
	border-top: 1px solid #3EA47B;
}
#editor .root .argument:empty::before {
	content: "\25a1";
}
#editor .brackets {
	display: inline-block;
	background: left center url(bra.png) no-repeat;
	background-size: 4px 80%;
	margin: 0px 2px;
}
#editor b .brackets {
	background: left center url(gbra.png) no-repeat;
	background-size: 4px 80%;
}
#editor .brackets > .inner {
	display: block;
	background: right center url(ket.png) no-repeat;
	background-size: 4px 80%;
	padding: 0px 4px;
}
#editor b .brackets > .inner {
	background: right center url(gket.png) no-repeat;
	background-size: 4px 80%;
}
#editor .brackets > .inner:empty::before {
	content: "\25a1";
}
#editor .superscript {
	display: inline-block;
	vertical-align: super;
	font-size: 75%;
}
#editor .subscript {
	display: inline-block;
	vertical-align: sub;
	font-size: 75%;
}
#editor .superscript > .inner, #editor .subscript > .inner {
	display: block;
}
#editor .superscript > .inner:empty::before,
		#editor .subscript > .inner:empty::before {
	content: "\25a1";
}


/*=============*/

.text:focus {
	outline: 0px solid transparent;
}

#editor b { color: #3EA47B; }

#editor {
	position: absolute;
	left: 8px; top: 20px;
	overflow: hidden;
}

#editor .iconbar {
	height: 24px;
	max-width: 800px;
	text-align: right;
	white-space: nowrap;
	z-index: 1;
}
#editor .iconbar button, .editor .iconbar input {
	font-size: 80%;
	display: inline-block;
	margin-left: 2px;
	width: 22px;
	height: 22px;
	vertical-align: top;
	background: white;
}
#editor .iconbar button {
	border: 1px outset gray;
}

#editor .iconbar button:last-child {
	width: 80px;
	margin-left: 10px;
}

#text, #canvas {
	position: absolute;
	left: 0; top: 26px;
}
#text {
	right: 0; bottom: 0;
	padding: 8px; overflow-y: auto;
	border: 1px solid black;
	cursor: text;
	white-space: pre-wrap;
}
#canvas {
	cursor: crosshair;
}