wip"

client/assets/styles/game.css

@@ -454,4 +454,8 @@
     #mnml .game .skills button, #mnml .game .stats {
         font-size: 75%;
     }
+
+    .game-construct .name {
+        display: none;
+    }
 }

client/assets/styles/instance.css

@@ -164,7 +164,7 @@
     }
 }
 
-.vbox button {
+.vbox-btn {
     width: 100%;
     margin: 0;
     background-color: #333;
@@ -179,7 +179,7 @@
     cursor: pointer;
 }
 
-.vbox-table td:active {
+.vbox-table td:active, .vbox-table td:focus {
     background: whitesmoke;
     color: black;
 }

client/assets/styles/vbox.less

@@ -0,0 +1,49 @@
+@green: #1FF01F;
+@red: #a52a2a;
+@blue: #3498db;
+@white: #f5f5f5; // whitesmoke
+@purple: #9355b5; // 6lack - that far cover
+
+.vbox-vbox {
+    grid-area: vbox;
+
+    display: flex;
+    flex-flow: column;
+
+    .vbox-colours {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-gap: 1em;
+        align-items: center;
+        margin: 1em 0;
+
+        svg {
+            width: 100%;
+            stroke: none;
+            border: 2px solid #222;
+        }
+
+        svg.red {
+            fill: @red;
+        }
+
+        svg.green {
+            fill: @green;
+        }
+
+        .blue {
+            fill: @blue;
+        }
+    }
+
+    .vbox-skills, .vbox-specs {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1em;
+        align-items: center;
+
+        button {
+            width: 100%;
+        }
+    }
+}