body {
    overflow: hidden;
}

div.info {
    position:fixed;
    border: solid 3px black;
    display: inline-block;
    font-size: 20px;
    background-color:white;
}

div#lastCommand {
    font-style: italic;
}

div#info {
    background-color:rgba(255,255,255,0.6);
    top:55vh;
    left:55vw;
}

div#info pre {
    margin:0;
}

div#counter {
    display: none;
}

div#counterBar {
    height: 3vh;
    background-color: blue;
}

div#counterVal {
    line-height:26vh;
    font-size: 20vh;
    text-align: center;
}

div#counter:focus #counterBar {
    background-color: green;
}

div#counter.visible {
    width: 60vh;
    height: 30vh;
    display: inline-block;
}
#plshout.error {
    color: red;
}

div.kplot {
    position:absolute;
    top:32px;
    left:0;
    height: calc(100vh - 32px);
    width:100vw;
    background-color:white;
    display:none;
    overflow: hidden;
}

div.kplot.cur {
    display: inline-block;
}

div.kplot.four {
    width:50vw;
    height: calc(50vh - 16px);
}
#statPlot.four {
    left:50vw;
}
#histPlot.four {
    top: calc(50vh + 16px);
}
#agePlot.four {
    top: calc(50vh + 16px);
    left:50vw;
}

img#areaImg {
    display:inline-block;
    position:absolute;
    top:32px;
    left:0;
    opacity: 0.25;
    pointer-events: none;
}

div#showModele{
    display:none;
    font-size: 20px;
    top:5vh;
}
div#showModele.shown{
    display:inline-block;
}

div#cmdline {
    position:absolute;
    top:0;
    height:30px;
}
div#cmdline input {
    height:28px;
    line-height: 28px;
    font-size: 16px;
}
div#cmdline button {
    height:28px;
    font-size: 16px;
    line-height: 28px;
    width:30px;
}

div#statControl:hover {
    opacity:1;
}

.info button {
    font-size: 3vh;
    white-space: nowrap;
    overflow: hidden;
}

button.short {
    max-width:12vh;
}

button.sel {
    background-color: #bdb;
}

#coords {
    display: inline-block;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    opacity: 0.8;
    color: black;
    font-weight: 800;
    height: 3vh;
    font-size:3vh;
    line-height:3vh;
    transition: opacity 1s ease 0s;
}
#coords.hidden {
    opacity: 0;
}

#percent {
    display: inline-block;
    background-color: #ffffffaa;
    color: black;
    position:fixed;
    font-size: 22px;
    z-index:1000;
}

#uleft {
    font-size: 14px;
}

#help {
    display: none;
    position: fixed;
    border: solid 3px yellow;
    background-color: blue;
    left: 20px;
    bottom: 40px;
    color: yellow;
}

#help.show {
    display: block;
}

#help div.selected {
    background-color: yellow;
    color: black;
}

#help b {
    display: inline-block;
    width: 40px;
}

.info button.close {
    float:right;
}

@media (min-width: 700px) {
    #statControl {
        position: fixed;
        top:0;
        right:0;
        opacity:1;
    }
}

@media not all and (min-width: 700px) {
    div#statControl {
        display:none;
        position:absolute;
        top:0px;
        right:0px;
        opacity:0.1;
    }
}