1 files changed, 38 insertions, 0 deletions
diff --git a/mobile.css b/mobile.css
index 3d721de..a6ddd29 100644
--- a/mobile.css
+++ b/mobile.css
@@ -4,6 +4,8 @@ body {
     align-items: stretch;
     margin: 0;
 
+    background-color: #eee;
+
     position: absolute;
     top: 0;
     left: 0;
@@ -45,6 +47,9 @@ body {
     margin: 0;
     overflow: scroll;
     flex-basis: 50%;
+
+    background-color: #ddd;
+
     border-style: solid;
     border-top-width: 1px;
     border-left-width: 0;
@@ -60,6 +65,10 @@ body {
     display: none;
 }
 
+#instructions .current {
+    background-color: yellow;
+}
+
 #instructions .step.current {
     display: list-item;
 }
@@ -72,9 +81,13 @@ body {
     display: block;
     float: right;
     padding: 2ex;
+
+    background-color: #fde;
+    border: 1px solid #aaa;
 }
 
 #die .value {
+    text-align: center;
     padding-bottom: 1ex;
 }
 
@@ -84,6 +97,24 @@ body {
     padding: 0;
     word-spacing: -6px; /* TODO: 0 doesn't work. And for some reason whitespace is being renderded between <li> elements? */
     width: 8em; /* TODO: this shouldn't be hard coded. */
+
+    background-color: ivory;
+    border: 1px solid black;
+}
+
+#nucleotide-selector,
+.genome:not(.locked) {
+    cursor: pointer;
+}
+
+#nucleotide-selector li:hover,
+.genome:not(.locked) .nucleotide:hover {
+    background-color: orange;
+}
+
+.genome .nucleotide.selected,
+.genome:not(.locked) .nucleotide.selected:hover {
+    background-color: red;
 }
 
 #nucleotide-selector li {
@@ -99,10 +130,17 @@ body {
     margin: 0.5ex;
 }
 
+.genome.locked {
+    cursor: text
+}
+
 .genome>ol {
     display: inline-flex;
     flex-wrap: wrap;
     padding: 0;
+    border: 1px solid black;
+
+    background-color: white;
 }
 
 .genome .nucleotide {