Add a key to the map

To help people understand that broadcasting is not a precise technology,
we have shown the estimate bleed area on the map.

Because people aren’t familiar with the technology a visual only clue is
not enough. So this commit adds a key to the map, which explains what
the different outlines mean.

It also removes the sticky footer from this page to:
- make the key visible on the page
- make people scroll and review the map before they get to the big green
  button
- not reduce the size of the map any further

app/assets/stylesheets/components/area-list.scss

@@ -1,7 +1,7 @@
 .area-list {
 
   display: inline-block;
-  
+
   &-item {
 
     display: inline-block;
@@ -74,3 +74,48 @@
   }
 
 }
+
+#map {
+  z-index: 50;
+  margin-bottom: govuk-spacing(4);
+}
+
+.area-key {
+
+  display: inline-block;
+  position: relative;
+  margin-right: govuk-spacing(3);
+  margin-bottom: govuk-spacing(5);
+  height: govuk-spacing(7);
+  padding-left: govuk-spacing(8);
+  line-height: govuk-spacing(7);
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: govuk-spacing(7);
+    height: govuk-spacing(7);
+    box-sizing: border-box;
+    margin-right: govuk-spacing(1);
+  }
+
+  &--certain {
+    &:before {
+      border: 4px solid rgba($white, 0.1);
+      background: rgba($govuk-blue, 0.6);
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
+
+  &--likely {
+    &:before {
+      padding: 1px;
+      border: 2px solid $govuk-blue;
+      background: rgba($govuk-blue, 0.2);
+    }
+  }
+
+}