/* ============================================================
   MarkItUp-Editor
   Der Bausatz des Plugins bringt eigene Farben mit. Hier werden
   seine Stellschrauben auf die Marken des Themes gelegt und die
   Flaechen zu Haarlinien zurueckgenommen.
   ============================================================ */
body .mybbeditor {
	--mu-bg:            transparent;
	--mu-bg-bar:        transparent;
	--mu-bg-menu:       var(--md-scrim-solid);
	--mu-border:        var(--md-rule-hair);
	--mu-border-strong: var(--md-rule-soft);
	--mu-text:          var(--md-ink);
	--mu-text-dim:      var(--md-ink-dim);
	--mu-accent:        var(--md-ink-bright);
	--mu-font-mono:     var(--md-f-sans);
	--mu-font-body:     var(--md-f-sans);

	--mu-btn:    30px;
	--mu-icon:   15px;
	--mu-gap:    2px;
	--mu-group:  10px;
	--mu-height: 26rem;
	--mu-menu:   13rem;
	--mu-radius: 0;
	--mu-speed:  var(--md-dur);
}

body .mybbeditor .markItUp {
	background: none;
	border: 1px solid var(--md-rule-hair);
}
body .mybbeditor .markItUpContainer { font-size: var(--md-t-body); }

body .mybbeditor .markItUpHeader {
	padding: .45rem .6rem;
	background: none;
	border-bottom: 1px solid var(--md-rule-hair);
}
body .mybbeditor .markItUpHeader ul .markItUpSeparator {
	height: 16px;
	background: var(--md-rule-hair);
}

/* Zeichenknoepfe: kein Kasten, die Helligkeit traegt den Zustand. */
body .mybbeditor .markItUpHeader > ul > li > a {
	border-color: transparent;
	background-color: var(--md-ink-faint);
	transition: background-color var(--md-dur) var(--md-ease);
}
body .mybbeditor .markItUpHeader > ul > li > a:hover,
body .mybbeditor .markItUpHeader > ul > li > a:focus {
	background-color: var(--md-ink-bright);
	border-color: transparent;
}
body .mybbeditor .markItUpHeader ul .markItUpDropMenu > a::after {
	background-color: var(--md-ink-faint);
}
body .mybbeditor .markItUpHeader ul .markItUpDropMenu > a:hover::after,
body .mybbeditor .markItUpHeader ul .markItUpDropMenu > a:focus::after {
	background-color: var(--md-ink-bright);
}

/* Klappmenues */
body .mybbeditor .markItUpHeader ul ul {
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	box-shadow: none;
}
body .mybbeditor .markItUpHeader ul ul li { border-bottom: 1px solid var(--md-rule-hair); }
body .mybbeditor .markItUpHeader ul ul a {
	padding: .5rem .9rem;
	font-size: var(--md-t-body);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
}
body .mybbeditor .markItUpHeader ul ul a:hover,
body .mybbeditor .markItUpHeader ul ul a:focus {
	background: var(--md-wash);
	color: var(--md-ink-bright);
}
body .mybbeditor .markItUpHeader ul ul .markItUpSeparator { background: var(--md-rule-hair); }

/* Schreibflaeche */
body .mybbeditor .markItUpEditor {
	min-height: 14rem;
	padding: 1.1rem 1.2rem;
	background: var(--md-wash);
	border-top: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-body);
	line-height: 1.8;
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink);
}
body .mybbeditor .markItUpEditor:focus {
	border-color: transparent;
	box-shadow: none;
	outline: 1px solid var(--md-accent-soft);
	outline-offset: -1px;
}
body .mybbeditor .markItUpPreviewFrame {
	background: none;
	border-top: 1px solid var(--md-rule-hair);
}
body .mybbeditor .markItUpResizeHandle {
	height: 10px;
	background-image: repeating-linear-gradient(to bottom, var(--md-rule-soft) 0 1px, transparent 1px 4px);
}

/* Farbfelder */
body .mybbeditor .markItUpButton10 ul a { border: 1px solid var(--md-rule-hair); }
body .mybbeditor .markItUpButton10 ul a:hover,
body .mybbeditor .markItUpButton10 ul a:focus { border-color: var(--md-rule); }