html, body {
    height: 100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #222; color: #fff;
    font-size: 80%; }

button, input, li, table { margin-top: 0.2em; }
li button, li input { margin: 0; }

#pageHeader h1 { display: inline-block; margin: 0; color: #fff; }
#pageHeader a { color: #ddf; }
#pageHeader .toolbar { display: inline-block; float: right; }
#pageMain { position: absolute; height: 92%; width: 99%; bottom: 5px; left: 5px; background-color: #333; }

/* Layers */
.layerContainer { position: relative; padding: 0; width: 500px; height: 500px; }
.imageLayer { position: absolute; }
.drawDiv { position: absolute; pointer-events: none; }

/* drag&drop */
.dropBox {}
.dropBoxBorder {
    margin: 20px auto;
    border: 5px dashed #ccc; }
.dropBoxBorder.hover {
    margin: 20px auto;
    border: 5px dashed #cc0; }

/* toolbar */
.toolList ul { padding: 0; }
.toolList li { list-style-type: none; }

/* info */
.infoLayer ul { margin: 0; padding: 2px; list-style-type: none; }
.infoLayer li { margin-top: 0; }
.infoLayer canvas { margin: 0; padding: 2px; }
.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;
    text-shadow: 0 1px 0 #000; }
.infotc { position: absolute; top: 0; left: 50%; right: 50%; text-align: center;
    text-shadow: 0 1px 0 #000; }
.infotr { position: absolute; top: 0; right: 0; text-align: right;
    text-shadow: 0 1px 0 #000; }
.infocl { position: absolute; bottom: 50%; left: 0; text-align: left;
    text-shadow: 0 1px 0 #000; }
.infocr { position: absolute; bottom: 50%; right: 2px; text-align: right;
    text-shadow: 0 1px 0 #000; }
.infobl { position: absolute; bottom: 0; left: 0; text-align: left;
    text-shadow: 0 1px 0 #000; }
.infobc { position: absolute; bottom: 0; left: 50%; right: 50%; text-align: center;
    text-shadow: 0 1px 0 #000; }
.infobr { position: absolute; bottom: 0; right: 0; text-align: right;
    text-shadow: 0 1px 0 #000; }

.plot { position: absolute; width: 100px; height: 50px; bottom: 15px; right: 0; }

/* tag list */
table.tagsTable { border-collapse: collapse; }
table.tagsTable thead th { text-transform: uppercase;
    font-weight: bold; opacity: 0.5;}
table.tagsTable tr:nth-child(even) { background-color: #333; }
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%; }

/* draw list */
.drawList tr:nth-child(even) { background-color: #333; }
/* history list */
.history_list { width: 100%; }

/* help */
.ui-icon { zoom: 125%; }