3 files changed, 15 insertions, 11 deletions
diff --git a/web/cobrands/fixmystreet/images/fms-pan-zoom.png b/web/cobrands/fixmystreet/images/fms-pan-zoom.png
new file mode 100644
index 000000000..37fdc5335
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-pan-zoom.png
diff --git a/web/cobrands/fixmystreet/images/fms-pan-zoom.svg b/web/cobrands/fixmystreet/images/fms-pan-zoom.svg
new file mode 100644
index 000000000..7ac54539f
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-pan-zoom.svg
@@ -0,0 +1 @@
+<svg width="156" height="72" viewBox="0 0 156 72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="#222" width="36" height="72" rx="4"/><path d="M120 68V4a4 4 0 0 0-4-4H88a4 4 0 0 0-4 4v68h36v-4zM156 4V0h-36v68a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V4zM80 0H40a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h44V0h-4zM40 36h40a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H36V36h4z" fill="#222"/><path fill="#FFF" d="M18 15l5 6H13zM51 18l6-5v10zM69 54l-6 5V49zM18 57l5-6H13zM94 19h16v4H94z"/><path fill="#FFF" d="M104 13v16h-4V13zM130 52h16v4h-16z"/></g></svg>
+\ No newline at end of file
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 21f2de0a2..c7e1a2994 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1399,47 +1399,50 @@ html.js #map .noscript {
   position: absolute;
   cursor: pointer;
   width: 36px;
-  height: 36px;
-  text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary
-  background: url($image-sprite) no-repeat;
+  height: 0;
+  padding-top: 36px;
+  overflow: hidden;
+  @include svg-background-image('/cobrands/fixmystreet/images/fms-pan-zoom');
+  background-size: 156px 72px;
+  background-repeat: no-repeat;
   filter: none !important; // Override OpenLayers PNG handling of the navigation
 }
 
 #fms_pan_zoom_panup {
-  background-position: -42px -222px;
+  background-position: 0 0;
   #{$right}: 30px;
   #{$left}: auto;
   top: 0;
 }
 #fms_pan_zoom_pandown {
-  background-position: -42px -282px;
+  background-position: 0 -36px;
   #{$right}: 30px;
   #{$left}: auto;
   top: 72px;
 }
 #fms_pan_zoom_panleft {
-  background-position: -12px -252px;
+  background-position: -36px 0;
   width: 48px;
   #{$right}: flip(48px, 0);
   #{$left}: auto;
   top: 36px;
 }
 #fms_pan_zoom_panright {
-  background-position: -60px -252px;
+  background-position: -36px -36px;
   width: 48px;
   #{$right}: flip(0, 48px);
   #{$left}: auto;
   top: 36px;
 }
 #fms_pan_zoom_zoomin {
-  background-position: -152px -223px;
-  height: 44px;
+  background-position: -84px 0;
+  padding-top: 44px;
   #{$left}: 0;
   top: 0;
 }
 #fms_pan_zoom_zoomout {
-  background-position: -152px -259px;
-  height: 44px;
+  background-position: -120px 100%;
+  padding-top: 44px;
   #{$left}: 0;
   top: 44px;
 }