html, body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px; padding: 0; }

#pageMain {
    height: 82vh;
    padding: 2px;
}

/* Layers */
.layerContainer {
    position: relative; padding: 0;
    margin: auto; text-align: center; }
.imageLayer {
    position: absolute;
    left: 0px; }
.drawDiv { position: absolute; pointer-events: none; }

.dropBox {}
.dropBoxBorder {
    margin: 20px auto;
    border: 5px dashed #ccc; }
.dropBoxBorder.hover {
    margin: 20px auto;
    border: 5px dashed #cc0; }

.inline { display: inline-block !important; }

/* Info */
.info { color: #cde; text-shadow: 1px 1px #000; font-size: 80%; }
.infoc { color: #ff0; text-shadow: 1px 1px #000; font-size: 120%; }
.infotl { position: absolute; top: 0; left: 0; text-align: left; }
.infotc { position: absolute; top: 0; left: 50%; right: 50%; text-align: center; }
.infotr { position: absolute; top: 0; right: 0; text-align: right; }
.infocl { position: absolute; bottom: 50%; left: 0; text-align: left; }
.infocr { position: absolute; bottom: 50%; right: 2px; text-align: right; }
.infobl { position: absolute; bottom: 0; left: 0; text-align: left; }
.infobc { position: absolute; bottom: 0; left: 50%; right: 50%; text-align: center; }
.infobr { position: absolute; bottom: 0; right: 0; text-align: right; }

.plot { position: absolute; width: 100px; height: 50px; bottom: 15px; right: 0; }
.infoLayer ul { margin: 0; padding: 2px; list-style-type: none; }
.infoLayer li { margin-top: 0; }
.infoLayer canvas { margin: 0; padding: 2px; }

/* Tag list */
table.tagsTable { border-collapse: collapse; }
table.tagsTable thead th { text-transform: uppercase;
    font-weight: bold; opacity: 0.5;}
table.drawsTable { border-collapse: collapse; }
table.drawsTable td { vertical-align: middle; }
table.drawsTable thead th { text-transform: uppercase;
    font-weight: bold; opacity: 0.5;}
.highlighted { background: #f87217; }
.tags form { width: 50%; }