diff --git a/website/index.html b/website/index.html
index 33bcfeb..86e97ac 100644
--- a/website/index.html
+++ b/website/index.html
@@ -56,7 +56,7 @@
       <!-- declares mapBoxToken constant -->
       <script src="./secrets.js" type="text/javascript"></script>
       <!-- this is the guts of it -->
-      <script src="./load-map.js" integrity="sha384-Dz5rVm6gkjHMT0sWOLGuQUEdqMEma27u5vJsimbd1eQ7hoOAqnyvHZTE1oOz6Ap/" crossorigin="anonymous" type="text/javascript"></script>
+      <script src="./load-map.js" nonce="NGINX_CSP_NONCE" type="text/javascript"></script>
     </main>
     <footer>
       <p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
diff --git a/website/load-map.js b/website/load-map.js
index 30ef738..0ac4031 100644
--- a/website/load-map.js
+++ b/website/load-map.js
@@ -413,12 +413,12 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches, caul])
   this._div.innerHTML =
     `<p>Hover over an area for more information</p>
     <section>
-      <div><div class="circle" style="background-color: #4dac26"></div>Fine free</div>
-      <div><div class="circle" style="background-color: #b8e186"></div>Fine free (unconfirmed)</div>
-      <div><div class="circle" style="background-color: #f1b6da"></div>Fine free for children</div>
-      <div><div class="circle" style="background-color: #abd9e9"></div>Fine policy varies</div>
-      <div><div class="circle" style="background-color: #d01c8b"></div>Fines for all users</div>
-      <div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
+      <div><div class="circle fine-free"></div>Fine free</div>
+      <div><div class="circle fine-free-unconfirmed"></div>Fine free (unconfirmed)</div>
+      <div><div class="circle fine-free-kids"></div>Fine free for children</div>
+      <div><div class="circle fine-varies"></div>Fine policy varies</div>
+      <div><div class="circle fine-all"></div>Fines for all users</div>
+      <div><div class="circle fine-unknown"></div>Unknown (help me find out!)</div>
     </section>
     `
   };
diff --git a/website/style.css b/website/style.css
index 636e598..dc00c4a 100644
--- a/website/style.css
+++ b/website/style.css
@@ -91,23 +91,6 @@ nav li a:hover {
   border-top-right-radius: 10px;
 }
 
-@media only screen and (max-width: 800px) {
-
-  nav ul {
-    margin-left: 0;
-    padding-left: 0;
-  }
-
-  nav li {
-    display: block;
-    margin: 0;
-    padding: 0.5em 0 0.5em 1em;
-    border-color: #777;
-    border-left: none;
-    border-right: none;
-  }
-}
-
 #title {
   display: flex;
   align-items: center;
@@ -264,6 +247,49 @@ ul#libraries li {
   text-align: center;
 }
 
+/* rules map key styles */
+
+.fine-free {
+  background-color: #4dac26
+}
+
+.fine-free-unconfirmed {
+  background-color: #b8e186
+}
+
+.fine-free-kids {
+  background-color: #f1b6da
+}
+
+.fine-varies {
+  background-color: #abd9e9
+}
+
+.fine-all {
+  background-color: #d01c8b
+}
+
+.fine-unknown {
+  background-color: #bbb
+}
+
+@media only screen and (max-width: 800px) {
+
+  nav ul {
+    margin-left: 0;
+    padding-left: 0;
+  }
+
+  nav li {
+    display: block;
+    margin: 0;
+    padding: 0.5em 0 0.5em 1em;
+    border-color: #777;
+    border-left: none;
+    border-right: none;
+  }
+}
+
 /* when below max width of para  */
 @media only screen and (max-width: 54em) {