#toc {
    display: none;
}
#mtw {
    display: block;
    position: fixed;
    left: .5em;
    bottom: 0;
    width: calc(100% - 56em);
}
#mw {
    left: calc(100% - 55em);
    overflow-y: auto;
    position: fixed;
    bottom: 0;
}


/* single-screen */
#mtw.preview,
#mw.editor {
    opacity: 0;
    z-index: 1;
}
#mw.preview,
#mtw.editor {
    z-index: 5;
}
#mtw.single,
#mw.single {
    margin: 0;
    left: 1em;
    left: max(1em, calc((100% - 56em) / 2));
}
#mtw.single {
    width: 55em;
    width: min(55em, calc(100% - 2em));
}


#mp {
    position: relative;
}
#mt, #mtr {
    width: 100%;
    height: calc(100% - 1px);
    color: #444;
    background: #f7f7f7;
    border: 1px solid #999;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: 'consolas', monospace, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word; /*ie*/
    overflow-y: scroll;
    line-height: 1.3em;
    font-size: .9em;
    position: relative;
    scrollbar-color: #eb0 #f7f7f7;
}
html.dark #mt {
    color: #eee;
    background: #222;
    border: 1px solid #777;
    scrollbar-color: #b80 #282828;
}
#mtr {
    position: absolute;
    top: 0;
    left: 0;
}
#save.force-save {
    color: #400;
    background: #f97;
    border-radius: .15em;
}
#save.disabled {
    opacity: .4;
}
#helpbox {
    display: none;
    position: fixed;
    background: #f7f7f7;
    box-shadow: 0 .5em 2em #777;
    border-radius: .4em;
    padding: 2em;
    top: 4em;
    overflow-y: auto;
    height: calc(100% - 12em);
    left: calc(50% - 15em);
    right: 0;
    width: 30em;
    z-index: 9001;
}
#helpclose {
    display: block;
}
html.dark #helpbox {
    background: #222;
    box-shadow: 0 .5em 2em #444;
    border: 1px solid #079;
    border-width: 1px 0;
}

# mt {opacity: .5;top:1px}
