Move switch service out of black header

Also following the pattern work that Tim and Stephen have done.

app/assets/stylesheets/_grids.scss

@@ -46,7 +46,7 @@
 .align-with-heading {
   display: block;
   text-align: center;
-  margin-top: $gutter;
+  margin-top: 13px;
   padding-left: 2px;
   padding-right: 2px;
 }

app/assets/stylesheets/app.scss

@@ -56,14 +56,16 @@ a {
 
 .column-main {
 
-  > .heading-large {
-    margin-top: $gutter;
+  > .heading-large,
+  > .heading-medium {
+    margin: 10px 0 15px 0;
   }
 
-  > .grid-row  {
+  > .grid-row:first-child  {
 
-    .heading-large {
-      margin-top: $gutter;
+    .heading-large,
+    .heading-medium {
+      margin: 10px 0 15px 0;
     }
 
   }

app/assets/stylesheets/components/navigation.scss

@@ -2,17 +2,35 @@
 
   padding: 0 $gutter 0 0;
 
+  &-service {
+
+    padding: 11px 0 9px 0;
+    border-bottom: 1px solid $border-colour;
+    margin: 0 0 10px;
+    position: relative;
+
+    h2 {
+      @include bold-19;
+      margin: 0 0 0 0;
+    }
+
+    &-switch {
+      @include core-16;
+      text-align: right;
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 13px 0 9px 15px;
+    }
+
+  }
+
   li {
     @include core-19;
     margin: 10px 0 0 0;
     list-style-type: none;
   }
 
-  h2 {
-    @include bold-19;
-    margin: $gutter 0 0 0;
-  }
-
   a {
 
     &:link,

app/assets/stylesheets/views/dashboard.scss

@@ -11,6 +11,11 @@
       border: 0;
     }
   }
+
+  > .heading-medium {
+    margin-top: 10px;
+  }
+
 }
 
 .keyline-block {