v. 0.60b

index.css

@@ -153,7 +153,7 @@ button, select, a {
 	font-size: 9px;
 }
 
-#labelEditor div {
+#labelEditor div, #markerEditor div  {
 	display: inline-block;
 }
 
@@ -198,7 +198,7 @@ button, select, a {
 
 div > input[type="color"].editColor {
 	height: 18px;
-	width: 46px;
+	width: 20px;
 	padding: 0;
 	cursor: pointer;
 }
@@ -291,6 +291,7 @@ text.drag {
 }
 
 .ui-dialog, #optionsContainer {
+	-moz-user-select: none;
 	user-select: none;
 }
 
@@ -533,13 +534,15 @@ p {
 	position: fixed;
   display: none;
   text-align: center;
-	top: calc(98vh - (10px + 0.5vw));
+  bottom: 0.5vw;
-	width: 100%;
+  width: 70%;
+  left: 15%;
   cursor: default;
   text-shadow: 1px 1px 2px #1d0e0f;
   color: #ffffff;
   font-size: calc(10px + 0.5vw);
   pointer-events: none;
+	white-space: pre-line;
 }
 
 #optionsContent table td:nth-of-type(1) {
@@ -1182,6 +1185,7 @@ div.states button.selectCapital {
 	left: 50%;
 	transform: translate(-50%, -50%);
 	cursor: default;
+	-moz-user-select: none;
 	user-select: none;
 }
 
@@ -1322,26 +1326,27 @@ input[type="checkbox"] {
   cursor: pointer;
 }
 
-#namesbaseEditor select,
+div.textual select,
-#namesbaseEditor textarea {
+div.textual textarea {
   font-size: 10px;
+	max-width: 366px;
   font-family: Copperplate, monospace;
   outline: none;
 }
 
-#namesbaseEditor input {
+div.textual input {
   font-size: 10px;
   font-family: Copperplate, monospace;
   outline: none;
   height: 12px;
 }
 
-#namesbaseEditor fieldset {
+div.textual fieldset {
   margin: 3px 3px 5px 0;
   border-style: dashed;
 }
 
-#namesbaseEditor span, #namesbaseEditor legend {
+div.textual span, .textual legend {
   font-size: 9px;
   font-weight: bold;
 }
@@ -1362,3 +1367,61 @@ input[type="checkbox"] {
 #namesbaseDouble {
   width: 40px;
 }
+
+#markers {
+	cursor: pointer;
+  font-family: monospace;
+	-moz-user-select: none;
+	user-select: none;
+	text-anchor: middle;
+}
+
+#markerEditor > button {
+	vertical-align: top;
+}
+
+#markerIconTable {
+  font-size: 12px;
+  cursor: pointer;
+}
+
+#markerIconTable td:active {
+  transform: translate(0px, 1px);
+}
+
+#markerIconTable td.selected {
+  outline: 1px solid #9b9b9b;
+}
+
+.highlighted {
+	outline-width: 2px;
+	outline-style: dashed;
+	outline-color: #0da6ff;
+	outline-offset: 100px;
+	fill: none;
+}
+
+div#legend {
+	display: none;
+	position: fixed;
+	width: 25vw;
+  right: 1vw;
+  top: 1vw;
+  font-size: 0.9em;
+	border: 1px solid #5e4fa2;
+	background: #cdb99040;
+	box-shadow: 2px 2px 5px -3px #3a2804;
+	white-space: pre-line;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+div#legendHeader {
+  font-weight: bold;
+  padding: 0 0 4px 14px;
+  border-bottom: 1px solid #5e4fa2;
+}
+
+div#legendBody {
+  padding: 0 10px;
+}