BODY {
        margin: 0px;
        overflow-y: scroll ;
        overflow-x: hidden ;
        --debug-width: 30em;
}
#annotator {
        border: 1px solid black;
        background-size: cover;
        background-repeat: no-repeat;
}
#menu {
        position: absolute;
        width: 35px;
        right: 0px ;
}
BODY.debug #menu {
        right: var(--debug-width) ;
}
BODY.double #menu {
        width: 70px;
}
BODY.double BUTTON {
        width: 50% ;
}

BODY.read_only CANVAS { pointer-events: none }

#right {
        position: absolute;
        right: 0px;
        width: var(--debug-width) ;
}
#history {
        white-space: pre;
        font-family: monospace;
}
#animate {
        background: #FF0;
        border: 1px solid black;
        width: 100%;
        font-size: 300%;
}
#animate DIV {
        position: absolute;
        background: #DD0;
        pointer-events: none;
}
#animate DIV, #animate { height: 2.5em ; }

#history B { background: #EEE }

#modes, #actions, #colors, #widths, #sizes, #save {
        display: inline-block ;
        border-bottom: 2px solid black ;
}
#widths SPAN, #sizes SPAN, #modes SPAN, #actions SPAN, #save SPAN
        { display: inline-block }
#modes SPAN, #actions SPAN, #save BUTTON.save SPAN
        { font-family: emoji ; transform: scale(1.7, 1.7) }

#save BUTTON.grade { padding: 0px ; font-size: 70%; height: auto }

#menu {
        z-index: 1 ;
}

#menu > DIV {
        width: 100% ;
        box-sizing: border-box ;
        text-align: center ;
}

BUTTON.selected {
        background: #FFF ;
}

BUTTON {
        height: 2.2em ;
        position: relative ;
        border: 0px ;
        width: 100% ;
}

BUTTON, #menu > DIV { background: #DDD ; }

BUTTON:hover           { border: 1px solid #000 ; }
BUTTON[disabled]:hover { border: 0px ; }

BUTTON[disabled] {
        opacity: 0.4 ;
}

BUTTON TT {
        opacity: 0 ;
        padding: 0.1em ;
        right: 1.5em ;
        transition: opacity 1s ;
        pointer-events: none;
}
BUTTON TT, #tags DIV {
        z-index: 3 ;
        position: absolute ;
        background: #FF8 ;
        border: 1px solid #880 ;
}

BODY.help BUTTON TT {
        opacity: 1 ;
}

#tags DIV {
        opacity: 0.7 ;
        font-size: 60% ;
}

BUTTON I {
        z-index: 2 ;
        position: absolute ;
        background: #FFF ;
        color: #000 ;
        border-radius: 1em ;
        right: -0.1em ;
        bottom: -0.5em ;
        opacity: 0.5 ;
        padding: 0.1em ;
        min-width: 1em ;
}
BUTTON:hover I {
        opacity: 1 ;
}

#modes SPAN.point_plus, #modes SPAN.point_minus {
        font-family: monospace ;
        font-size: 60% ;
        padding: 0.2em ;
        color: #FFF ;
}
#modes SPAN.point_plus { background: #080 }
#modes SPAN.point_minus { background: #C00 }

#message {
        position: fixed ;
        right: 2em ;
        top: 2em ;
        background: #0F0 ;
        font-size: 400% ;
        padding: 1em ;
        z-index: 100 ;
        pointer-events: none ;
        opacity: 0;
        transition: opacity 1s;
        font-family: emoticon;
}

#message.display {
        opacity: 1;
        transition: opacity 0s;
}

#message.error {
        background: #F88 ;
}