body { font-family: Arial, Helvetica, sans-serif; }

/* Layers */
.layerContainer { position: relative; padding: 0; }
.imageLayer { position: absolute; }
.drawDiv { position: absolute; pointer-events: none; }
.dropBox { border: 5px dashed #ccc; }
.dropBox.hover { border: 5px dashed #cc0; }

/* 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%; }