13 files changed, 95 insertions, 86 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9efa0949b..cb2f61d07 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -667,7 +667,6 @@ $.extend(fixmystreet.set_up, {
     //add open/close toggle button (if its not there)
     if ($('#map_links_toggle').length === 0) {
         $('<span>')
-            .html('&nbsp;')
             .attr('id', 'map_links_toggle')
             .on('click', function() {
                 var sub_map_links_css = {},
diff --git a/web/cobrands/fixmystreet/images/compress.png b/web/cobrands/fixmystreet/images/compress.png
deleted file mode 100644
index 500673956..000000000
--- a/web/cobrands/fixmystreet/images/compress.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/compress.svg b/web/cobrands/fixmystreet/images/compress.svg
deleted file mode 100644
index 68efd6b31..000000000
--- a/web/cobrands/fixmystreet/images/compress.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M192 240v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16zM380.75 72c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H208c-8.75 0-16-7.25-16-16V96c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75z"/></svg>
diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png
deleted file mode 100644
index c0c129fb7..000000000
--- a/web/cobrands/fixmystreet/images/expand.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/expand.svg b/web/cobrands/fixmystreet/images/expand.svg
deleted file mode 100644
index 1f063b4b7..000000000
--- a/web/cobrands/fixmystreet/images/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M188.75 264c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H16c-8.75 0-16-7.25-16-16V288c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75zM384 48v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16z"/></svg>
diff --git a/web/cobrands/fixmystreet/images/map-marker.png b/web/cobrands/fixmystreet/images/map-marker.png
deleted file mode 100644
index 5f124dbc6..000000000
--- a/web/cobrands/fixmystreet/images/map-marker.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/map-marker.svg b/web/cobrands/fixmystreet/images/map-marker.svg
deleted file mode 100755
index a84a14526..000000000
--- a/web/cobrands/fixmystreet/images/map-marker.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="28" viewBox="0 0 16 28">
-<path fill="#fff" d="M12 10c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM16 10c0 0.953-0.109 1.937-0.516 2.797l-5.688 12.094c-0.328 0.688-1.047 1.109-1.797 1.109s-1.469-0.422-1.781-1.109l-5.703-12.094c-0.406-0.859-0.516-1.844-0.516-2.797 0-4.422 3.578-8 8-8s8 3.578 8 8z"></path>
-</svg>
diff --git a/web/cobrands/fixmystreet/images/map-tools.png b/web/cobrands/fixmystreet/images/map-tools.png
new file mode 100644
index 000000000..037fb7af2
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/map-tools.png
diff --git a/web/cobrands/fixmystreet/images/map-tools.svg b/web/cobrands/fixmystreet/images/map-tools.svg
new file mode 100644
index 000000000..5be4d71d0
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/map-tools.svg
@@ -0,0 +1 @@
+<svg width="96" height="12" viewBox="0 0 96 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M15.7 9.6a1.4 1.4 0 1 1-2.7 0 1.4 1.4 0 0 1 2.7 0zM13 4.4v2c2.5 0 4.6 2 4.6 4.6h2c0-3.6-3-6.6-6.6-6.6zM13 3a8 8 0 0 1 8 8h2A10 10 0 0 0 13 1v2z" fill="#FFF" fill-rule="nonzero"/><path d="M26 4L31 9.2 29.7 12 28 8.7A3.9 3.9 0 0 1 26 4zm1.8-2.2A4 4 0 0 1 33.1 7l-5.3-5.3zM25.7 1L34 9.3l-.7.7L25 1.7l.7-.7zM42.5 12a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-1.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#FFF"/><path stroke="#FFF" d="M42 3v3l2 2"/><path fill="#FFF" d="M5 2L1 6l4 4zM7 2l4 4-4 4z"/><g fill="#FFF"><path d="M54 5.4l1-1.1c.2 0 .3.2.4.3a3 3 0 0 1 0 4.2L54 10.2A3 3 0 1 1 49.8 6l1-1-.3.3.6 1.5-.3.3A1.5 1.5 0 0 0 53 9l1.5-1.3a1.5 1.5 0 0 0-.5-2.4z"/><path d="M54 6.6l-1 1.1a3 3 0 0 1-.4-4.6L54 1.9A3 3 0 1 1 58.2 6l-1 1 .3-.3-.6-1.5.3-.3A1.5 1.5 0 0 0 55 3l-1.5 1.3a1.5 1.5 0 0 0 .5 2.4z"/></g><path d="M62.6 12l3.4-1.7 3.4 1.7c.2 0 .3-.2.5-.3L69.2 8 72 5.4l-.2-.5-3.8-.5L66.3 1a6.6 6.6 0 0 0-.6 0L64 4.4l-3.8.5-.2.5L62.8 8l-.7 3.7.5.3zM88.6 6H90v5l-1.8-1.8-2.5 2.5-1.4-1.4 2.5-2.5L85 6h3.6zm3.2-3.2L94.3.3l1.4 1.4-2.5 2.5L95.1 6H90V1l1.8 1.8zM78 7.4l-2.8 2.8 1.9 1.8H72V7l1.8 1.8L76.6 6 78 7.4zM79.4 6l2.8-2.8L84.1 5 84 0h-5l1.8 1.8L78 4.6 79.4 6z" fill="#FFF"/></g></svg>
+\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/triangle-grey-left.svg b/web/cobrands/fixmystreet/images/triangle-grey-left.svg
deleted file mode 100644
index 26ea59a23..000000000
--- a/web/cobrands/fixmystreet/images/triangle-grey-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7">
-    <polygon points="3,0 0,3 3,6" fill="#f1f1f1"/>
-</svg>
diff --git a/web/cobrands/fixmystreet/images/triangle-grey-right.svg b/web/cobrands/fixmystreet/images/triangle-grey-right.svg
deleted file mode 100644
index 8ea307b21..000000000
--- a/web/cobrands/fixmystreet/images/triangle-grey-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7">
-    <polygon points="0,0 3,3 0,6" fill="#f1f1f1"/>
-</svg>
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 160a928ef..3b471182d 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1458,63 +1458,56 @@ html.js #map .noscript {
   #{$left}: 0;
   #{$right}: 0;
   bottom: 0;
-  background:#333;
-  background:rgba(0, 0, 0, 0.7);
-  margin:0;
+  background: #333;
+  background: rgba(0, 0, 0, 0.7);
+  margin: 0;
+
   a {
-    @include inline-block;
-    font-size:0.6875em;
-    color:#fff;
-    padding: flip(0.6em 3em 0.5em 1em, 0.6em 1em 0.5em 3em);
-    background-repeat:no-repeat;
-    &#hide_pins_link {
-      background-image:url($image-sprite);
-      background-position: flip(right, -341px) -3976px;
-    }
-    &#map_permalink {
-      background-image:url($image-sprite);
-      background-position: flip(right, -341px) -4070px;
-    }
-    &#fms_shortlist_all {
-      padding: 0.6em 1em 0.5em 1em;
-      &:after {
-         content: "";
-         display: inline-block;
-         width: 16px;
-         height: 16px;
-         @include svg-background-image('/cobrands/fixmystreet/images/map-marker');
-         background-size: 16px 16px;
-         vertical-align: middle;
-         margin: flip(0 0 0 8px, 0 8px 0 0);
-       }
-    }
-    &.feed {
-      background-image:url($image-sprite);
-      background-position: flip(right, -341px) -3936px;
-    }
-    &#toggle-fullscreen {
-      padding: 0.6em 1em 0.5em 1em;
-      &:after {
-        content: "";
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        background-size: 16px 16px;
-        vertical-align: middle;
-        margin-#{$left}: 8px;
-      }
-      &.expand:after {
-        @include svg-background-image('/cobrands/fixmystreet/images/expand');
-      }
-      &.compress:after {
-        @include svg-background-image('/cobrands/fixmystreet/images/compress');
-      }
-    }
+    display: inline-block;
+    font-size: 0.6875em;
+    color: #fff;
+    padding: 0.6em 1em 0.5em 1em;
+
     &:hover {
-      background-color:#000;
-      text-decoration:none;
+      background-color: #000;
+      text-decoration: none;
+    }
+
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-#{left}: 8px;
+      vertical-align: -0.1em;
+      background-size: 96px 12px;
+      @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
     }
   }
+
+  .feed:after {
+    background-position: -12px 0;
+  }
+
+  #hide_pins_link:after {
+    background-position: -24px 0;
+  }
+
+  #map_permalink:after {
+    background-position: -48px 0;
+  }
+
+  #fms_shortlist_all:after {
+    background-position: -60px 0;
+  }
+
+  #toggle-fullscreen:after {
+    background-position: -72px 0;
+  }
+
+  #toggle-fullscreen.compress:after {
+    background-position: -84px 0;
+  }
 }
 
 #mob_sub_map_links {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 73fe4f5e0..7fd33a53f 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -613,28 +613,58 @@ body.authpage {
 #sub_map_links {
   #{$left}: auto;
   bottom: 2em;
-  #map_links_toggle {
-    display:block;
-    cursor: pointer;
-    position:absolute;
-    #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */
-    width: 1em;
-    height:100%;
-    background:#000 inline-image("../fixmystreet/images/triangle-grey-#{$right}.svg") 50% 50% no-repeat;
-    @include border-radius(flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0));
-    &:hover {
-      #{$left}: -1.5em;
-      //use border so we don't have to redefine the background-position
-      border-#{$right}: 0.5em solid #000;
+}
+
+#map_links_toggle {
+  display: block;
+  cursor: pointer;
+  position: absolute;
+  #{$left}: -1em;
+  width: 1em;
+  height: 100%;
+  border-radius: flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0);
+  background-color: #333;
+
+  &:hover {
+    #{$left}: -1.2em;
+    width: 1.2em;
+    background-color: #000;
+  }
+
+  &:after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 6px;
+    height: 12px;
+    margin-#{$left}: ((16px - 6px) / 2); // horizontally centre in 16px wide parent
+    background-size: 96px 12px;
+    @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
+  }
+
+  // Expanded arrow points towards edge of window.
+  // Closed arrow points away from edge of window.
+  @if ($right == 'right') {
+
+    &:after {
+      background-position: -6px 0;
+    }
+
+    &.closed:after {
+      background-position: 0 0;
+    }
+
+  } @else {
+
+    &:after {
+      background-position: 0 0;
     }
-    &.closed {
-      background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg");
+
+    &.closed:after {
+      background-position: -6px 0;
     }
   }
 }
-.iel8 #sub_map_links #map_links_toggle {
-    height: 1.75em;
-}
 
 
 // Wraps around #key-tools box - sticks to the bottom of the screen on desktop