body {
	background-color: black;
  padding:0;
  margin:0;
  border:0;
}

#debugMsg {
	color: white;
	top: 200px;
	left: 5px;
  width: auto;
  height: auto;
 	z-index: 10000;
	position: fixed;
  font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

a:hover {
 cursor: pointer;
}

td {
	padding: 2px 5px 2px 5px;
}

tr:nth-child(odd) {
	background-color: #555555;
}

tr:nth-child(even) {
	background-color: #444444;
}

window {
  touch-action: pinch-zoom;
}

.warning {
	color: red;
}

.navigation {
  -ms-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

	position: fixed;
	top: 5px;
	left: 5px;
	width: 200px;
	z-index : 1000;

}
div.navImage {
	position: fixed;
	top: 5px;
	left: 5px;
	width: 200px;
	z-index : 1000;
	border-style: solid;
	border-color: #eeeeee;
	border-width: 3px;
}


img.navImage {
	width: 200px;
  object-fit: cover;
}

.zoomminus {
	top: 160px;
	left: 5px;
	width: 30px;
	position: fixed;
	z-index : 1010;
}

.zoomplus {
	top: 160px;
	left: 40px;
	width: 30px;
	position: fixed;
	z-index : 1010;
}


.zoomPercent {
	top: 160px;
	left: 80px;
	width: 30px;
	height: 50px;
  position: fixed;
	color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px #ff0000;
  font-size: 11px;
  text-align: center;
  margin: auto;
	z-index : 3;
}

div.navZone {
	position: absolute;
	z-index : 1001;
	border-style: solid;
	border-color: yellow;
	border-width: 1px;
}

.footer {
	background-color: #222222;
	text-align: center;
	color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 1px 1px #444444;
  font-size: 12px;
  margin: auto;
	padding: 1px;
	position: fixed;
  transform: translate(-50%, 0%);
	z-index : 2000;
  left: 50%;
  bottom: 0px;
	width: 100%;
	height: 48px;
  line-height: 24px;
  margin: auto;
}

a {
	color: #8888ff;
}

.arrows {
	pointer-events:none
	position: relative;
	width: 100%;
	height: 100%;
	z-index : 0;
}

.navUp {
	pointer-events:none
  margin: auto;
	position: absolute;
  left: 50%;
  top: -5px;
	width: 10px;
  transform: translate(-50%, -50%);
	z-index : 0;
}

.navDown {
	pointer-events:none
  margin: auto;
	position: absolute;
  left: 50%;
  bottom: -13px;
	width: 10px;
  transform: translate(-50%, -50%);
	z-index : 0;
}

.navLeft {
	pointer-events:none
  margin: auto;
	position: absolute;
  top: 50%;
  left: -5px;
	height: 10px;
  transform: translate(-50%, -50%);
	z-index : 0;
}

.navRight {
	pointer-events:none
  margin: auto;
	position: absolute;
  top: 50%;
  right: -13px;
	height: 10px;
  transform: translate(-50%, -50%);
	z-index : 0;
}

.tile {
    position: absolute;
	z-index : 2;
}

.sixteenth {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
  position: absolute;
  padding: 0;
  border: 0;
  margin: 0;
	z-index : 1;
}

.canvas {
  border: none;
  height: calc(100% - 1px);
  width: calc(100% - 1px);
  overflow-y: scroll;
  overflow-z: scroll;
  -webkit-overflow-scrolling: touch;
}

.outline {
	display: none;
  position: absolute;
	border-style: solid;
	z-index : 900;
}

.hasInfo {
	border-color: #66ff66;
	border-width: 3px;
}

.noInfo {
	border-color: #aaaaff;
	border-width: 2px;
}

.dropZone {
	border-style: dashed;
	border-width: 1px;
	border-color: yellow;
	z-index : 1000;
	color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.dropZoneHover {
	border-color: white;
	border-width: 2px;
}

.imageOverlay {
	transform-origin: top left;
	display: none;
  position: absolute;
	background-color: #444444;
	color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
	border-style: solid;
	border-width: 10px;
	border-color: #cccccc;
	z-index : 10000;
}

.container {
	z-index : 5;
}