body {
	margin: 0;
    font-size: 16px; /* Coordinate with .character.text and canvas font size. */
    font-family: Roboto, Arial, sans-serif;
}

.withMargin {
    margin: 8px;
}

table {
	border-collapse: collapse;
}
td {
	padding: 0;
}

svg {
    user-select: none;
}

.overflow-scroll {
    overflow: scroll; scrollbar-color: #CDCDCD #F0F0F0;
}
.overflow-visible {
    overflow: visible;
}

.position-corner {
    position: absolute; top: 0; left: 0;
}
.position-offset {
    position: absolute; top: 0px; left: 0px; /* Offset set by JavaScript. */
}

.fillerMapText {
    font-style: italic;
}

.mapContainerCell {
	vertical-align: top;
}
#mapContainerDiv {
	position: relative;
}

#mapBackgroundDiv { z-index: 1; }
#mapImageSvg { z-index: 3; }
#mapWallsSvg { z-index: 4; }
#mapLightsSvg { z-index: 5; }
#mapGridSvg { z-index: 6; }
#compassRose { z-index: 7; }
#mapAnnotationsSvg { z-index: 8; }
#mapCharactersSvg { z-index: 9; }
#mapDrawingsSvg { z-index: 10; }
#mapScratchSvg, #westVisibleNotice, #eastVisibleNotice, #northVisibleNotice, #southVisibleNotice { z-index: 11; }
.restOfScreen { position: relative; z-index: 12; }
.tooltip { z-index: 13; }
#mapContextMenu { z-index: 14; }

.overMap {
    z-index: 20;
    background: white;
    width: 100%;
    height: 100%;
    position: absolute; top: 0; left: 0;
}

.mapFeatures { fill: none; }
.mapFeatures path { vector-effect: non-scaling-stroke; }
.mapFeatures .historical { stroke-width: 2px; }
.mapFeatures .dim { stroke-width: 2.5px; }
.mapFeatures .bright { stroke-width: 3px; }
.mapFeatures .historical .wall { stroke: #a7a7a7; }
.mapFeatures .historical .door { stroke: #964E08; }
.mapFeatures .historical .curtain { stroke: #94090b; }
.mapFeatures .dim .wall { stroke: #d1d1d1; }
.mapFeatures .dim .door { stroke: #d46e0f; }
.mapFeatures .dim .curtain { stroke: #cf0c0f; }
.mapFeatures .bright .wall { stroke: #ffffff; }
.mapFeatures .bright .door { stroke: #f27e11; }
.mapFeatures .bright .curtain { stroke: #f50e12; }

.mapDrawings path {
    stroke-width: 3px;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.mapDrawings path.standard {
    stroke: white;
}
.mapDrawings path.alternate {
    stroke: magenta;
}
.mapDrawings path.highlight {
    stroke-width: 7px;
    stroke: powderblue;
}

.resultDisplay {
    border-style: solid;
    border-color: lightgray;
    padding: 0.5em;
    margin-bottom: 1em;
    margin-right: 0.5em;
    max-height: 400px;
    overflow: auto;
}

#northVisibleNotice {
	position: absolute;
    height: 10px;
	left: 10px;
	top: 0px;
    background-image: url("/map/images/arrowsNorth.svg");
    background-repeat: repeat-x;
}
#southVisibleNotice {
	position: absolute;
    height: 10px;
	left: 10px;
    background-image: url("/map/images/arrowsSouth.svg");
    background-repeat: repeat-x;
}
#westVisibleNotice {
	position: absolute;
    width: 10px;
	left: 0px;
	top: 10px;
    background-image: url("/map/images/arrowsWest.svg");
    background-repeat: repeat-y;
}
#eastVisibleNotice {
	position: absolute;
    width: 10px;
	top: 10px;
    background-image: url("/map/images/arrowsEast.svg");
    background-repeat: repeat-y;
}
#mapScrollDiv {
    position: absolute;
    left: 10px;
    top:10px;
    background-color: black;
}
#mapBackgroundDiv {
    background-color: black;
}

.serverStatusConnected {
    fill: limegreen;
}

.mapNotCurrent {
    background: PapayaWhip;
}

.afk {
    background: slategrey !important;
    padding-top: 3px;
}

#artObjects {
    line-height: 1.8;
}

.artObject {
    padding: 2px;
    border: solid;
    border-radius: 15px;
    cursor: pointer;
}

#fatalErrorDiv {
	font-size: 120%;
	color: red;
}

.drawWithStandard {
    fill: white;
    color: magenta;
    cursor: pointer;
}
.drawWithAlternate {
    fill: magenta;
    color: white;
}

.annotation {
    fill: white;
}
.annotation.standard {
    fill: white;
}
.annotation.alternate {
    fill: magenta;
}
.annotationTextOverflow {
    color: red;
}
.character.icon {
    stroke: cyan;
}
.character.text {
    font-size: 18px;
    fill: cyan;
}
.character.icon.notVisible {
    stroke: orange;
}
.character.text.notVisible {
    fill: orange;
}

.restOfScreen {
	width: 100%;
	vertical-align: top;
    padding-left: 10px;
}

.floatRight {
	float: right;
}

#jumpBox {
    font-size: 120%;
}
.jumpBoxInactive {
    color: grey;
}

.clearfix { 
   clear: both;
}

.noDisplay {
	display: none !important;
}

.hidden {
    visibility: hidden;
}

.tableItem {
    margin: 0 3px;
}

.clickableTableItem {
    margin: 0 3px;
    cursor: pointer;
}

.showLocation {
    font-size: 130%;
    cursor: pointer;
}

.lastSeen {
    color: orange;
}

.neverSeen {
    color: grey;
}

.mapPageButton {
    font-size: 120%;
}

.pointerMoveCursor {
    cursor: move;
}
.pointerGrabbingCursor {
    cursor: grabbing;
}
.pointerProgressCursor {
    cursor: progress;
}
.pointerCrosshairCursor {
    cursor: crosshair;
}

#compassRose {
    position: absolute;
    pointer-events: none;
    user-select: none;
    left: 10px;
    top: 10px;
    width: 120px;
    height: 120px;
    stroke: silver;
    stroke-width: 2px;
    font: bold 18px sans-serif;
    fill: silver;
    color: black;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: lightgray;
}

#connectionStatusTable {
	border-collapse: separate;
}
#connectionStatusTable td:nth-child(1) { text-align: right; }
#connectionStatusTable td:nth-child(3) { text-align: right; }