Show a tour when users first create a service

This commit adds a 3 screen tour, similar to those used on GOV.UK Verify
and Passports.

We guerilla tested this on Friday, and it really helped users to build a
mental model of how Notify works, so that when they’re playing around
with it they have a greater sense of what they’re aiming to do. This
makes concepts like templates and placeholders click more quickly.

https://www.pivotaltracker.com/story/show/116710119

app/assets/stylesheets/app.scss

@@ -127,4 +127,4 @@ a[rel="external"] {
   @include media(tablet) {
     @include external-link-19;
   }
-}
+}

app/assets/stylesheets/components/banner.scss

@@ -71,7 +71,7 @@
   a {
     &:link,
     &:visited {
-      color: $text-colour;
+      padding: $gutter-half;
       text-decoration: underline;
     }
   }
@@ -110,13 +110,54 @@
   background: $govuk-blue;
   color: $white;
   margin-top: $gutter;
+  padding: $gutter-half;
 
-  .heading-medium {
+  p {
     margin: 0 0 10px 0;
   }
 
+  &-action {
+    text-align: right;
+  }
+
+}
+
+.banner-tour {
+
+  @extend %banner;
+  background: $govuk-blue;
+  color: $white;
+  margin-top: $gutter;
+  padding: $gutter * 2;
+
+  .heading-large {
+    margin: 0 0 $gutter 0;
+  }
+
+  p {
+    
+    margin-bottom: $gutter;
+
+    &:last-child {
+      margin-bottom: 0
+    }
+
+    & + p {
+      margin-top: -$gutter-half;
+    }
+
+  }
+
   a {
 
+    @include bold-24;
+    display: inline-block;
+    background-image: file-url('tour-next.png');
+    background-size: auto 24px;
+    padding: 0 23px 0 0;
+    background-position: right 3px;
+    background-repeat: no-repeat;
+
     &:link,
     &:visited {
       color: $white;
@@ -124,19 +165,25 @@
 
     &:hover,
     &:active {
-      color: $light-blue-25;
+      background-color: $link-hover-colour;
+      outline: 10px solid $link-hover-colour;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $yellow;
+      outline: 10px solid $yellow;
     }
 
   }
 
-  .big-number {
-
-    margin-top: 10px;
-
-    &-label {
-      padding-bottom: 0;
-    }
+  img {
+    max-width: 100%;
+    display: block;
+  }
 
+  &-image-flush-bottom {
+    margin: 40px 0 -60px 0;
   }
 
 }