3 files changed, 64 insertions, 34 deletions

diff --git a/emcclib.js b/emcclib.js
index c81c576..00f718e 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -72,9 +72,8 @@ mergeInto(LibraryManager.library, {
         var item = document.createElement("li");
         item.setAttribute("data-index", value);
         var tick = document.createElement("span");
+        tick.className = "tick";
         tick.appendChild(document.createTextNode("\u2713"));
-        tick.style.color = "transparent";
-        tick.style.paddingRight = "0.5em";
         item.appendChild(tick);
         item.appendChild(document.createTextNode(name));
         gametypesubmenus[menuid].appendChild(item);
@@ -103,8 +102,7 @@ mergeInto(LibraryManager.library, {
         // nicely with their neighbours.
         var tick = document.createElement("span");
         tick.appendChild(document.createTextNode("\u2713"));
-        tick.style.color = "transparent";
-        tick.style.paddingRight = "0.5em";
+        tick.className = "tick";
         item.appendChild(tick);
         item.appendChild(document.createTextNode(name));
         var submenu = document.createElement("ul");
@@ -138,9 +136,9 @@ mergeInto(LibraryManager.library, {
             var item = gametypeitems[i];
             var tick = item.firstChild;
             if (item.getAttribute("data-index") == n) {
-                tick.style.color = "inherit";
+                tick.classList.add("selected");
             } else {
-                tick.style.color = "transparent";
+                tick.classList.remove("selected");
             }
         }
     },
@@ -522,16 +520,9 @@ mergeInto(LibraryManager.library, {
     js_canvas_make_statusbar: function() {
         var statusholder = document.getElementById("statusbarholder");
         statusbar = document.createElement("div");
-        statusbar.style.overflow = "hidden";
+        statusbar.id = "statusbar";
         statusbar.style.width = (onscreen_canvas.width - 4) + "px";
         statusholder.style.width = onscreen_canvas.width + "px";
-        statusbar.style.height = "1.2em";
-        statusbar.style.textAlign = "left";
-        statusbar.style.background = "#d8d8d8";
-        statusbar.style.borderLeft = '2px solid #c8c8c8';
-        statusbar.style.borderTop = '2px solid #c8c8c8';
-        statusbar.style.borderRight = '2px solid #e8e8e8';
-        statusbar.style.borderBottom = '2px solid #e8e8e8';
         statusbar.appendChild(document.createTextNode(" "));
         statusholder.appendChild(statusbar);
     },
diff --git a/emccpre.js b/emccpre.js
index caa3250..961999b 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -179,29 +179,17 @@ function dialog_init(titletext) {
     // Create an overlay on the page which darkens everything
     // beneath it.
     dlg_dimmer = document.createElement("div");
-    dlg_dimmer.style.width = "100%";
-    dlg_dimmer.style.height = "100%";
-    dlg_dimmer.style.background = '#000000';
-    dlg_dimmer.style.position = 'fixed';
-    dlg_dimmer.style.opacity = 0.3;
-    dlg_dimmer.style.top = dlg_dimmer.style.left = 0;
-    dlg_dimmer.style["z-index"] = 99;
+    dlg_dimmer.id = "dlgdimmer";
 
     // Now create a form which sits on top of that in turn.
     dlg_form = document.createElement("form");
+    dlg_form.id = "dlgform";
     dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
-    dlg_form.style.opacity = 1;
-    dlg_form.style.background = '#ffffff';
-    dlg_form.style.color = '#000000';
-    dlg_form.style.position = 'absolute';
-    dlg_form.style.border = "2px solid black";
-    dlg_form.style.padding = "20px";
     dlg_form.style.top = (window.innerHeight / 10) + "px";
     dlg_form.style.left = (window.innerWidth / 6) + "px";
-    dlg_form.style["z-index"] = 100;
 
     var title = document.createElement("p");
-    title.style.marginTop = "0px";
+    title.className = "title";
     title.appendChild(document.createTextNode(titletext));
     dlg_form.appendChild(title);
 
@@ -471,11 +459,7 @@ function initPuzzle() {
     }
     resizable_div = document.getElementById("resizable");
     resizable_div.appendChild(resize_handle);
-    resize_handle.style.position = 'absolute';
-    resize_handle.style.zIndex = 98;
-    resize_handle.style.bottom = "0";
-    resize_handle.style.right = "0";
-    resize_handle.style.cursor = "se-resize";
+    resize_handle.id = "resizehandle";
     resize_handle.title = "Drag to resize the puzzle. Right-click to restore the default size.";
     var resize_xbase = null, resize_ybase = null, restore_pending = false;
     var resize_xoffset = null, resize_yoffset = null;
diff --git a/html/jspage.pl b/html/jspage.pl
index 574f255..3a241e4 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -191,6 +191,61 @@ EOF
     display: flex;
 }
 
+#gamemenu .tick {
+    /* The tick next to a menu item, or its unselected equivalent. */
+    padding-right: 0.5em;
+    color: transparent;
+}
+
+#gamemenu .tick.selected {
+    /* Tick for a selected menu entry. */
+    color: inherit;
+}
+
+#statusbar {
+    overflow: hidden;
+    height: 1.2em;
+    text-align: left;
+    background: #d8d8d8;
+    border-left: 2px solid #c8c8c8;
+    border-top: 2px solid #c8c8c8;
+    border-right: 2px solid #e8e8e8;
+    border-bottom: 2px solid #e8e8e8;
+}
+
+#dlgdimmer {
+    width: 100%;
+    height: 100%;
+    background: #000000;
+    position: fixed;
+    opacity: 0.3;
+    left: 0;
+    top: 0;
+    z-index: 99;
+}
+
+#dlgform {
+    opacity: 1;
+    background: #ffffff;
+    color: #000000;
+    position: absolute;
+    border: 2px solid black;
+    padding: 20px;
+    z-index: 100;
+}
+
+#dlgform .title {
+    margin-top: 0px;
+}
+
+#resizehandle {
+    position: absolute;
+    z-index: 98;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+}
+
 #apology {
     padding: 0 1em 0 1em;
     margin: 1em;