4 files changed, 110 insertions, 33 deletions
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 2fc7f6940..a87d9e7e9 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -355,7 +355,7 @@ label{
 
 // Use full width to reverse .container margins
 .full-width{
-  margin: 0em -1em 0 -1em;
+  margin: 0 -1em;
 }
 
 // #header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
@@ -419,22 +419,49 @@ label{
 
 // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
 
-ul#key-tools{
-  display: block;
-  margin: 0px;
-  padding: 0px;
-  li{
-    display: table-cell;
-    padding: 0em;
-    margin:0em;
-    width: 33.333%;
-    float: left;
-    vertical-align: bottom;
-    text-align: center;
-    a{
-      display: block;
-      background: #444;
-      color:#fff;      
+.shadow-wrap {
+  @extend .full-width;
+  ul#key-tools{
+    @include list-reset-soft;
+    display: table;
+    width:100%;
+    li{
+      display: table-cell;
+      vertical-align: bottom;
+      text-align: center;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display: block;
+        background-color: #f5f5f5;
+        background-repeat: no-repeat;
+        color:#333;
+        padding:4em 2em 1em 2em;
+        text-transform:uppercase;
+        font: {
+          size:0.6875em;
+          family: 'helvetica', 'arial', sans-serif;
+        }
+        &:hover {
+          text-decoration:none;
+          background-color:#333;
+          color:#fff;
+        }
+        &.abuse {
+          background-image:url(images/sprite.png);
+          background-position:center -2424px;
+        }
+        &.feed {
+          background-image:url(images/sprite.png);
+          background-position:center -2563px;
+        }
+        &.chevron {
+          background-image:url(images/sprite.png);
+          background-position:center -2716px;
+        }
+      }
     }
   }
 }
@@ -672,6 +699,28 @@ a:hover.rap-notes-trigger {
   }
 }
 
+.big-green-banner {
+  position: relative;
+  background: $contrast1;
+  color: #fff;
+  padding:1em;
+  text: {
+    transform:uppercase;
+    align:center;
+  }
+  font-size:0.875em;
+  &:before {
+    content: "";
+    left:-0.5em;
+    top:0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 0.5em solid transparent;
+    border-bottom: 0.5em solid #4B8304;
+  }
+}
+
 // this is a bit of a hack to get some differentation between desk and mobile
 .desk-only {
   display:none !important;
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index e031d82ad..bd350d0e9 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index d25c3e9bc..88ba90768 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -168,33 +168,58 @@ body {
 }
 
 // Wraps around #key-tools box
-.shadow-wrap{
+.shadow-wrap {
   position:fixed;
-  bottom: 0em;
-  margin-left: -1em;
+  bottom: 0;
   width: 29em;
   overflow: hidden;
   padding-top: 3em;
   // List sticks to the bottom of the page on desktop
-  ul#key-tools{
+  ul#key-tools {
     border-top: 0.25em solid $primary;
     @include box-shadow(-0em 0px 1em 1em #fff);
-    display: block;
-    overflow:hidden;
-    background: #f6f6f6;
-    li{
-      display: inline;
-      a{
-        font-family: 'helvetica', 'arial',sans-serif;
+    li {
+      border:none;
+      a {
         font-size: 0.75em;
         color:#888888;  
-        background: none;      
-        padding: 0.5em 0;
+        padding: 0.5em 1em 0.5em 0;
+        text-transform:none;
+        &.abuse {
+          background-image:url(images/sprite.png);
+          background-position:right -2935px;
+        }
+        &.feed {
+          background-image:url(images/sprite.png);
+          background-position:right -3074px;
+        }
+        &.chevron {
+          background-image:url(images/sprite.png);
+          background-position:right -3225px;
+        }
       }
     }
   }
 }
 
+
+.big-green-banner {
+  right:-1.25em;
+  margin-left:-2em;
+  font-size:1.375em;
+  padding:1em 3em 1em 1em;
+  background: $contrast1 url(images/sprite.png) right -2188px no-repeat;
+  &:before {
+    right:0;
+    left:auto;
+    top:-0.5em;
+    position: absolute;
+    border-top: 0.5em solid transparent;
+    border-left: 0.5em solid #4B8304;
+    border-bottom:none;
+  }
+}
+
 .full-width{
   margin: 0 0 0em -1em;
   width: 29em;
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 7a512fdf5..9cb48bb9d 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -240,7 +240,7 @@ $(function(){
         heightFix('#report-a-poblem-sidebar:visible', '.content', 26);
     }
 
-    //show/hide on mobile
+    //show/hide notes on mobile
     $('.mobile #report-a-poblem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide();
     $('.mobile').on('click', '.rap-notes-trigger', function(e){
         e.preventDefault();
@@ -255,14 +255,17 @@ $(function(){
             $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">BACK</a>');
         }
     });
-
     $('.mobile').on('click', '.rap-notes-close', function(e){
-        //hide notes, show .content
         e.preventDefault();
+        //hide notes, show .content
         $('.mobile .content').show();
         $('.rap-notes').hide();
+        $('html, body').animate({scrollTop:0}, 1000);
     });
 
+    //move 'skip this step' link on mobile
+    $('.mobile #skip-this-step').hide();
+    $('.mobile #skip-this-step a').appendTo('#key-tools').addClass('chevron').wrap('<li>');
 
     /*
      * Tabs