Fix Simon board borders and small JS inconsistency

index.html

@@ -73,10 +73,10 @@
             </div>
 
             <div id="simonBoard">
-                <div>
+                <div class="simonRow">
                     <div class="blue">&nbsp;</div><div class="yellow">&nbsp;</div>
                 </div>
-                <div>
+                <div class="simonRow">
                     <div class="red">&nbsp;</div><div class="green">&nbsp;</div>
                 </div>
                 <div class="arrow" id="arrowRB"></div>

ktane.css

@@ -135,16 +135,16 @@ h2 {
     height: 64px;
     width: 64px;
 }
-#simonBoard > div:first-child > div {
+#simonBoard > .simonRow:first-child > div {
     border-top-width: 4px;
 }
-#simonBoard > div:last-child > div {
+#simonBoard > .simonRow:first-child + div > div {
     border-bottom-width: 4px;
 }
-#simonBoard > div > div:first-child {
+#simonBoard > .simonRow > div:first-child {
     border-left-width: 4px;
 }
-#simonBoard > div > div:last-child {
+#simonBoard > .simonRow > div:last-child {
     border-right-width: 4px;
 }
 

ktane.js

@@ -173,7 +173,7 @@ $('.jsResetSection').on('click', function () {
     var $checkbox = $('#simonVowel'),
         $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'),
         $arrows = [],
-        mappings = [ // (hasVowel, strikes) -> list of visible arrows
+        mappings = [ // (hasVowel, strikes) -> list of visible arrows by ID
             // No vowel
             [
                 ['RB', 'BY', 'YR'],
@@ -196,8 +196,8 @@ $('.jsResetSection').on('click', function () {
         var hasVowel = +$checkbox.prop('checked'),
             strikes = $strikeButtons.filter(':checked').val();
 
-        for (var i in $arrows) {
-            $arrows[i].removeClass('active');
+        for (var id in $arrows) {
+            $arrows[id].removeClass('active');
         }
 
         $.each(mappings[hasVowel][strikes], function (i, id) {