Update all cobrands for new core styles.

Adjustments necessary due to the preceding commits.

31 files changed, 382 insertions, 565 deletions

diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss
index 564c78348..fd59b3ef9 100644
--- a/web/cobrands/angus/_colours.scss
+++ b/web/cobrands/angus/_colours.scss
@@ -18,6 +18,8 @@ $primary_text: #222222;
 $base_bg: #fff;
 $base_fg: #000;
 
+$header-top-border: false;
+
 $map_nav_bg: $angus_green;
 $nav_fg: #fff;
 $nav_fg_hover: transparent;
diff --git a/web/cobrands/angus/base.scss b/web/cobrands/angus/base.scss
index 87e121266..f03f97a13 100644
--- a/web/cobrands/angus/base.scss
+++ b/web/cobrands/angus/base.scss
@@ -5,9 +5,7 @@
 
 @import "../sass/base";
 
-body.frontpage #site-logo,
-#site-logo
-{
+#site-logo {
     background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 50% no-repeat;
     background-size: contain;
     width: 82px;
@@ -15,7 +13,6 @@ body.frontpage #site-logo,
 }
 
 #site-header {
-    border-top: none;
     background: $angus_green;
 
     form.form__search {
@@ -38,7 +35,3 @@ label[for=pc] {
 .angus_nav, .wrapper__main_menu {
   display: none;
 }
-
-.nav-menu--breadcrumb {
-  display: none;
-}
diff --git a/web/cobrands/angus/layout.scss b/web/cobrands/angus/layout.scss
index 7b819185a..0e3e3201e 100644
--- a/web/cobrands/angus/layout.scss
+++ b/web/cobrands/angus/layout.scss
@@ -4,20 +4,11 @@
 
 $max_page_width: 1200px;
 
-#site-logo,
-body.frontpage #site-logo,
-body.twothirdswidthpage #site-logo
-{
-        position: relative;
-        top: 13px;
-        left: 20px;
-        margin: 0;
-        padding: 0;
-        background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 0 no-repeat;
-        background-size: contain;
-        width: 165px;
-        height: 66px;
-        display: inline-block;
+#site-logo {
+    width: 165px;
+    height: 66px;
+    padding: 0.75em 0;
+    margin: 0 1em;
 }
 
 #site-header {
@@ -25,15 +16,10 @@ body.twothirdswidthpage #site-logo
   border-bottom: solid 8px $angus_dark_green;
   box-shadow: 0 5px 5px rgba(0, 0, 0, .075);
 
-  .container {
-    position: relative;
-    min-height: 5em;
-  }
-
   form.form__search {
     display: block;
     clear: right;
-    margin: .65em 0 .25em;
+    margin-bottom: 25px; // 90x - 2.5em / 2
     padding: 0;
     text-align: right;
     width: 75%;
@@ -124,12 +110,6 @@ body.twothirdswidthpage #site-logo
   }
 }
 
-body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
-  #site-header {
-    height: 91px;
-  }
-}
-
 #front-main {
   background: transparent;
 
@@ -150,7 +130,6 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage {
     .content {
       background: $angus_light_grey;
       background-color: $angus_light_grey;
-
     }
   }
 }
@@ -169,7 +148,7 @@ body.twothirdswidthpage .content .sticky-sidebar {
     left: 43em;
 
     aside {
-        top: 15em;
+        top: 198px;
     }
 }
 
@@ -289,9 +268,11 @@ footer p.social a:active,footer p.social a:focus,footer p.social a:hover
   display: none;
 }
 
+.wrapper__main_menu {
+    display: block;
+}
 
 .nav-menu--breadcrumb {
-  display: block;
   font-size: 0.75em;
   float: left;
 
@@ -335,10 +316,9 @@ body.mappage {
   }
 
   #site-logo {
-    height: 54px;
+    height: 58px;
     width: 111px;
-    top: 7px;
-    left: 7px;
+    padding: 0;
   }
 
   #site-header {
diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss
index 82837b976..97d57391d 100644
--- a/web/cobrands/bristol/_colours.scss
+++ b/web/cobrands/bristol/_colours.scss
@@ -26,6 +26,8 @@ $map_nav_bg: $g1;
 $nav_fg: $b4;
 $nav_fg_hover: $primary;
 
+$header-top-border: false;
+
 $col_click_map: $g1;
 $col_click_map_dark: darken($g1, 10%);
 
diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
index 17dbc0b8c..0b8d6f621 100644
--- a/web/cobrands/bristol/base.scss
+++ b/web/cobrands/bristol/base.scss
@@ -23,7 +23,6 @@
 
 #site-header {
   border-bottom: solid 5px $bcc_red;
-  border-top: none;
   background: $g1; // Can't use background-color as it's ignored in favour of existing background
 }
 
diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 3b9dfa1b6..9049e2da0 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -3,14 +3,12 @@
 @import "../sass/layout";
 
 #site-header {
-  background-color: $g1;
   background: $g1;
   border-bottom: none;
 }
 
-// Don't display a border atop the page
-.nav-wrapper .nav-wrapper-2 {
-  border-top: none;
+#main-nav {
+  float: none;
 }
 
 body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
@@ -20,20 +18,14 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
     background-size: 81px 81px;
     text-indent: 122px;
     height: 111px;
+    width: 11em;
     line-height: 111px;
     font-size: 30px;
-    // Getting rid of absolute positioning allows us to style the BCC nav below nicely
-    position: static;
+    padding: 0;
   }
 
-  // Make sure the header is only as tall as it needs to be
+  // White "nav bar" with red border-top, below the logo
   #site-header {
-    height: auto;
-
-    .container {
-      min-height: 0;
-    }
-
     &:after {
       content: " ";
       height: 3.5em;
@@ -74,8 +66,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
 
   .nav-menu {
     // Put the main FMS navigation below the Bristol header
-    float: left;
-    width: 100%;
     margin-top: 7.25em;
 
     a, span {
@@ -101,57 +91,44 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
     background-color: transparent;
   }
 
-  // Stop .nav-wrapper from preventing the logo being clicked
-  .nav-wrapper .nav-wrapper-2 {
-    height: 0;
-    min-height: 0;
-  }
-
   // Put FAQ side nav at correct vertical position
   .content .sticky-sidebar aside {
-    top: 14.5em;
+    top: 12.5em;
   }
 }
 
 body.mappage {
-  // Stop the header being too tall
+  // Add a red border-bottom *inside* the header
   #site-header {
-    min-height: 79px;
-
-    .container {
-      min-height: 0;
+    @include box-sizing(border-box);
+    border-bottom: solid 5px $bcc_red;
+  }
 
-      #site-logo {
-        top: 0.5em;
-        line-height: 44px;
-      }
-    }
+  // Reinstate the floated nav bar on map pages
+  #main-nav {
+    float: right;
   }
 
+  // A few changes to the nav items now they're on a black background
   .nav-menu {
     a, span {
-      text-decoration: none;
       color: white;
       font-size: 1.1em;
-      padding: 1em 0.75em 0.95em;
     }
+
     a:hover {
       background: transparent;
       text-decoration: underline;
     }
+
     a.report-a-problem-btn {
       color: white;
-      margin: 0.5em 0.25em 0.45em;
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+
       &:hover {
         background-color: lighten($bcc_red, 5%);
-      };
-    }
-  }
-
-  // Haven't quite figured out why this can't go on #site-header
-  .nav-wrapper {
-    .nav-wrapper-2 {
-      border-bottom: solid 5px $bcc_red;
+      }
     }
   }
 
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index c36182ff8..9cdf8bdb3 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -20,3 +20,5 @@ $nav_fg_hover: #444;
 $col_click_map: $bromley_blue;
 $col_fixed_label: $bromley_blue;
 $col_fixed_label_dark: darken($bromley_blue, 10%);
+
+$header-top-border-width: 4px;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 5d38b0d9b..8e3d01f7b 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -192,6 +192,7 @@ h1,h2,h3,h4,h5 {
     height: 42px;
     line-height: 0;
     padding: 1.3em 1em;
+    margin: 0 0 0 -3px;
     border: 1px solid #647890;
     width: 20%;
     opacity: 1;
@@ -201,7 +202,6 @@ h1,h2,h3,h4,h5 {
     background: #647890 url("search-icon.png") no-repeat center center !important;
     text-indent: -10000px;
     border-radius: 0 5px 5px 0;
-    margin-left: -3px;
   }
 }
 
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 2e23d1755..cfb5981a9 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -3,31 +3,23 @@
 
 // Alter the logo and the header on every page *but* the map page. On the map
 // page it stays small like in base.css
-body.fullwidthpage,
-body.twothirdswidthpage {
-  #site-header {
-    // Increase the height of the site-header to suit the taller logo image
-    height: auto;
-  }
-  // Override the logo
+body.fullwidthpage, body.twothirdswidthpage, body.authpage {
   #site-logo {
     width: 159px;
     height: 114px;
     background: url(/cobrands/bromley/bromley-logo.png) 0 0 no-repeat;
+    float: left;
   }
 }
 
-// On the map page, we want the header to be much smaller, otherwise it pushes
-// the sidebar down too much
 body.mappage {
-  #site-header {
-    height: 5em;
+  .container {
+    max-width: none;
   }
 
-  // Make the report button match the rest of the nav
-  .nav-menu--main a.report-a-problem-btn {
-      padding: 1.4em 0.75em 1.35em;
-      margin: 0;
+  .bromley-header {
+    margin-bottom: 0;
+    padding-top: 0.5em;
   }
 }
 
@@ -35,10 +27,6 @@ body.mappage {
 .iel8 {
   body.fullwidthpage,
   body.twothirdswidthpage {
-    #site-header {
-    // Increase the height of the site-header to suit the taller logo image
-      height: auto;
-    }
     #site-logo {
       width: 159px;
       height: 114px;
@@ -52,6 +40,12 @@ body.mappage {
   max-width: 1200px;
 }
 
+#main-nav {
+  display: block; // remove flex so nav touches top of parent
+  min-height: 0; // no vertical align, so no need for a height
+  margin-top: 0; // don't bother overlapping the border
+}
+
 // Override the FMS main menu to give it a background colour
 .nav-menu--main {
   background-color: $bromley_blue;
@@ -116,29 +110,17 @@ body.fullwidthpage .container .content footer .tablewrapper {
 // Bromley desktop styles
 //////////////////////////////////////////////////////////////////////////////
 
-// Bromley's logo is bigger on big screens so that it appears to have some
-// left padding
-#site-logo,
-body.frontpage #site-logo {
-  float: left;
-  width: 239px;
-  clear: left;
-  margin-bottom: 20px;
-  // Bromley uses an image element inside a link, so it can be centered using
-  // text-align. We use a background image, so this approximates that.
-  background-position: 50% 0%;
-}
-
 // Bromley's .top-links section floats to the right on bigger screens
 .top-links {
     float: right;
     width: auto;
+    margin-top: 3em;
 }
 
 // Bromley's search form floats to the right too
 .main-search {
   width: 35%;
-  margin: 10px 0 0 0;
+  margin: 0;
   float: right;
   min-width: 287px;
   clear: right;
diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss
index f4a1142ac..6266db6a3 100644
--- a/web/cobrands/eastherts/_colours.scss
+++ b/web/cobrands/eastherts/_colours.scss
@@ -18,6 +18,8 @@ $map_nav_bg: $eh_green;
 $nav_fg: #000;
 $nav_fg_hover: $primary;
 
+$header-top-border: false;
+
 // Colour used for front page 'how to report a problem' steps
 $col_big_numbers: #ccc;
 
diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss
index ee1d78ffa..d9401a47d 100644
--- a/web/cobrands/eastherts/base.scss
+++ b/web/cobrands/eastherts/base.scss
@@ -9,7 +9,6 @@
 }
 
 #site-header {
-  border-top: none;
   background: $eh_blue;
 }
 
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index 9623f33de..eeb5cf0dc 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -1,16 +1,10 @@
 @import "_colours";
 @import "../sass/layout";
 
-#site-header {
+#site-header,
+body.mappage #site-header {
   // default layout.scss sets this, so we need it here as well as base.scss
-  background: $eh_blue;
-  background-image: url(img/header_mid.jpg);
-  background-repeat: repeat-x;
-}
-
-// Get rid of the top border
-.nav-wrapper .nav-wrapper-2 {
-  border-top: none;
+  background: $eh_blue url(img/header_mid.jpg) 0 0 repeat-x;
 }
 
 body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
@@ -22,10 +16,6 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
     background-color: $base_bg;
     height: $logo-height + $eh-nav-height + $fms-nav-height;
 
-    .container {
-      height: auto;
-    }
-
     .container:first-child {
       height: $logo-height;
     }
@@ -125,6 +115,7 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
   #site-logo {
     $img-height: 184px;
     $img-width: 399px;
+    position: absolute;
     top: $logo-height - $img-height;
     width: $img-width;
     height: $img-height;
@@ -135,25 +126,27 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
     background-size: $img-width $img-height;
   }
 
-  .nav-menu {
+  #main-nav {
     position: absolute;
     top: $logo-height + $eh-nav-height;
-    height: $fms-nav-height;
-    margin: 0 auto;
-    width: 60em;
-    padding: 0;
-    text-align: center;
+    width: 100%;
+    float: none;
+    min-height: 0;
+  }
+
+  .nav-menu {
     float: none;
+    width: 100%;
+    text-align: center;
+
     li {
       float: none;
       display: inline-block;
     }
-  }
 
-  // Make elements beneath clickable
-  .nav-wrapper .nav-wrapper-2 {
-    min-height: 0;
-    height: 0;
+    .nav-menu__item--privacy {
+      display: none;
+    }
   }
 }
 
@@ -171,13 +164,6 @@ body.twothirdswidthpage .content .sticky-sidebar aside {
 }
 
 body.mappage {
-  .nav-wrapper .nav-wrapper-2 {
-    background-color: $eh_blue;
-    background-image: url(img/header_mid.jpg);
-    background-repeat: repeat-x;
-    background-position: top;
-  }
-
   #site-logo {
     top: 8px;
   }
@@ -213,17 +199,3 @@ footer ul {
     }
   }
 }
-
-// Stop the FMS nav being too wide and off to the right off the page
-// at this break point.
-@media only screen and (min-width: 48em) and (max-width: 61em) {
-  #main-nav {
-    float: $left;
-    padding-#{$left}: 0;
-  }
-  body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
-    .nav-menu {
-      width: 100%;
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/cobrands/fiksgatami/layout.scss b/web/cobrands/fiksgatami/layout.scss
index 205cccd8d..99cd73ad8 100644
--- a/web/cobrands/fiksgatami/layout.scss
+++ b/web/cobrands/fiksgatami/layout.scss
@@ -1,6 +1,12 @@
 @import "_colours";
 @import "../sass/layout";
 
+#main-nav {
+  display: block; // remove flex so nav touches top of parent
+  min-height: 0; // no vertical align, so no need for a height
+  margin-top: 0; // don't bother overlapping the border
+}
+
 .nav-menu--mysoc {
   padding: 0em 0.5em;
   margin-#{$left}: 0.25em;
diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
index 7be050a23..84132f804 100644
--- a/web/cobrands/fixamingata/_colours.scss
+++ b/web/cobrands/fixamingata/_colours.scss
@@ -14,6 +14,8 @@ $map_nav_bg: #eee;
 $nav_fg: $primary_text;
 $nav_fg_hover: #444;
 
+$header-top-border: false;
+
 $col_click_map: #00BD08;
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixamingata/base.scss b/web/cobrands/fixamingata/base.scss
index 172bab1bd..52c4b50da 100644
--- a/web/cobrands/fixamingata/base.scss
+++ b/web/cobrands/fixamingata/base.scss
@@ -12,13 +12,13 @@
 
 #site-header {
     @include linear-gradient(#000, #ccc 10%, #ccc 90%, #000);
+    padding: 0.5em 0;
 }
 
 #site-logo {
     width: 185px;
     height: 38px;
-    margin-top: 10px;
-    background: url('images/fms-logo.png') no-repeat;
+    background: url('images/fms-logo.png') 0 50% no-repeat;
 }
 
 #report-cta {
diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss
index 555e2641b..e8697a963 100644
--- a/web/cobrands/fixamingata/layout.scss
+++ b/web/cobrands/fixamingata/layout.scss
@@ -67,10 +67,8 @@ h3, h4,
 @import "_colours";
 @import "../sass/layout";
 
-.nav-wrapper {
-    .nav-wrapper-2 {
-        border-top: 0;
-    }
+#site-header {
+    padding: 1em 0;
 }
 
 body.frontpage {
@@ -79,6 +77,17 @@ body.frontpage {
         height: 55px;
         background: url($image-sprite) -2px -115px no-repeat;
     }
+
+    #main-nav {
+        height: 55px + 16px + 16px;
+        margin-left: 300px;
+    }
+}
+
+body.mappage {
+    #site-logo {
+        margin-top: -5px;
+    }
 }
 
 #front-main {
@@ -122,7 +131,3 @@ body.frontpage {
 #postcodeForm { margin-left: -1em !important; margin-right: -1em !important; }
 
 body.fullwidthpage .container .content footer .tablewrapper { background: #fff; }
-
-body.frontpage #site-header { height: 85px; }
-
-body.frontpage #user-meta { margin-top: 1.2em; }
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 4cd4b357f..e34a6712e 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -78,18 +78,14 @@ h3, h4,
     }
 }
 
-.nav-wrapper {
-    .nav-wrapper-2 {
-        border-image-source: url(images/tile-y-border.jpg);
-        border-image-slice: 4 0 0;
-        border-image-repeat: repeat;
-    }
+#site-header {
+    border-image-source: url(images/tile-y-border.jpg);
+    border-image-slice: 4 0 0;
+    border-image-repeat: repeat;
 }
 body.mappage {
-    .nav-wrapper {
-        .nav-wrapper-2 {
-            @include linear-gradient(#000, #222 10%, #222 90%, #000);
-        }
+    #site-header {
+        @include linear-gradient(#000, #222 10%, #222 90%, #000);
     }
 }
 
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index d2dc1c3ed..21a8dbbf9 100644
--- a/web/cobrands/greenwich/_colours.scss
+++ b/web/cobrands/greenwich/_colours.scss
@@ -17,6 +17,8 @@ $map_nav_bg: #fff;
 $nav_fg: #fff;
 $nav_fg_hover: transparent;
 
+$header-top-border: false;
+
 $col_big_numbers: $primary;
 
 $col_click_map: $greenwich_red;
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index db06c9424..7093f0138 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -43,11 +43,10 @@ body.twothirdswidthpage #site-logo
     }
 }
 
-body.frontpage #site-header, #site-header {
-    height: auto;
-
+#site-header,
+body.frontpage #site-header {
     .container {
-        min-height: 0;
+        position: static;
     }
 
     .container:first-child {
@@ -68,10 +67,6 @@ body.frontpage {
     }
 }
 
-.nav-wrapper .nav-wrapper-2 {
-    border-top: none;
-}
-
 .nav-menu--main {
     display: none;
 }
@@ -150,8 +145,15 @@ body.frontpage {
 }
 
 body.mappage {
-    #site-header .container {
-        min-height: 68px;
+    #site-header {
+        background: url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat;
+        background-color: $base_bg;
+        background-size: contain;
+
+        .container {
+            min-height: 0;
+            background: transparent;
+        }
     }
 
     .main-menu-container {
@@ -171,16 +173,18 @@ body.mappage {
         height: 54px;
     }
 
-    .nav-wrapper .nav-wrapper-2 {
-        background: url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat;
-        background-color: $base_bg;
-        background-size: contain;
+    #main-nav {
+        width: auto;
+    }
+
+    .nav-wrapper {
         border-bottom: solid 4px $primary;
     }
 
     .nav-menu--main a.report-a-problem-btn {
         color: $nav_fg;
     }
+
     .nav-menu {
         a, span {
             color: $primary_text;
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index 947b97625..f72106469 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -14,6 +14,9 @@ $base_bg: #ffffff;
 $base_fg: #1a1a1a;
 
 /* Unused here */
-$map_nav_bg: #222;
 $nav_fg: #fff;
 $nav_fg_hover: #444;
+
+$map_nav_bg: $primary;
+$mappage-header-height: 173px + 32px;
+$header-top-border: false;
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index b60a22bd3..8d903dc3d 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -26,8 +26,6 @@ h1.main {
 
 #site-header {
     background: $primary;
-    height: 57px;
-
 
     .mobile-header-nav {
         height: 56px;
@@ -49,6 +47,15 @@ h1.main {
     }
 }
 
+#site-logo {
+    display: block;
+    background: url("/cobrands/hart/hart-logo-mobile.png") 0 50% no-repeat;
+}
+
+#main-nav--hart { // Hart has two main menus, basically same on mobile
+    margin: 0 -1em;
+}
+
 .big-green-banner {
     text-transform: none;
 }
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 0b11024d9..af2b79a50 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -26,110 +26,12 @@
 h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; }
 body { color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; background-color: $base_bg;}
 
-.nav-wrapper-2,
-body.mappage .nav-wrapper .nav-wrapper-2,
-body.frontpage .nav-wrapper-2 {
-    border: 0;
-    border-top: solid 4px $hart_primary;  /* otherwise overridden in base layout.scss
-                                             for some templates only */
-    min-height: auto;
-    background-color: $hart_primary;
-
-    @media only screen and (min-width:48em) {
-        height: 173px;
-    }
-}
-
-@media only screen and (min-width:48em) {
-    #map_box,
-    #map_sidebar {
-        top: 173px + 32px;
-    }
-
-    body.frontpage #site-header {
-        height: 13em;
-
-        .mobile-header-nav {
-            display: none;
-        }
-    }
-
-    body.mappage {
-        .header-container,
-        .main-menu {
-            max-width: none; // containers are full width on map page
-        }
-    }
-
-    #skipped-map {
-        clear: both;
-        margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */
-    }
-
-	#main-nav {
-	  margin-top: 106px;
-    }
-    .nav-menu {
-      margin-left: 157px;
-	  float: none;
-	}
-
-	.nav-menu li {
-	  text-align: center;
-	  text-transform: uppercase;
-	  padding: 0 15px;
-	  font-size: 16px;
-	  border-right: solid 1px white;
-	  line-height: 1.5em;
-	}
-	.nav-menu li:last-child {
-	    border-right: none;
-	}
-
-	.nav-menu a {
-	    padding: 0;
-	    font-size: inherit;
-	}
-
-	.nav-menu li:hover, .nav-menu li:hover a, {
-	  background-color: white;
-	  color: black;
-	  text-decoration: none;
-	}
-}
-
-@media only screen and (max-width: 61em) and (min-width: 48em) {
-    #main-nav {
-        padding-left: 0px;
-        float:none;
-    }
-}
-
 /* -------- For Google translate select box only */
 .header-nav div#google_translate_element .goog-te-gadget { font-family: "Gill Sans MT", Arial, 'Helvetica Neue', Helvetica, sans-serif;    }
 .header-nav div#google_translate_element .goog-te-gadget .goog-te-combo { margin:5px 0 0 5px; padding:0 0 0 2px; background: #9b9b9b; color: #fff; border: 1px solid #606060; font-size: 12px; width: 138px;}
 .header-nav div#google_translate_element .goog-te-gadget .goog-te-combo option { background:#fff; color: #666; padding: 1px 0; margin: 0; }
 /* --- */
 
-body.frontpage #site-logo,
-#site-logo {
-    display: block;
-    background: url("/cobrands/hart/hart-logo-mobile.png") 0 0 no-repeat;
-    margin: 10px;
-    padding-left: 10px;
-    position: static;
-    @media only screen and (min-width: 48em) {
-        position: relative;
-        top: 1em;
-        margin: 0;
-        margin-left: 2.25em;
-        padding: 0;
-        background: url("/cobrands/hart/hart-logo.png") 0 0 no-repeat;
-        width: 123px;
-        height: 132px;
-    }
-}
-
 .sign-in {
     display: none;
 }
@@ -144,75 +46,18 @@ body.frontpage #site-logo,
 .sign-in a:link, .sign-in a:visited {color:#333; font-weight:bold; text-decoration:none;}
 .sign-in a:hover, .sign-in a:active {text-decoration:underline;}
 
-.main-menu-wrapper {
-    background-color: #FFF;
-    width: 100%;
-
-    @media only screen and (min-width:48em) {
-        position: absolute;
-        box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map
-    }
-}
-
-.main-menu {
-  li {
-      font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
-      margin: 0;
-
-      span { display: none }
-
-      a {
-          padding: 0.5em 1em;
-          background: #f6f6f6;
-          color: #333;
-          font-size: 1.25em;
-          border-bottom: 0.25em solid #333;
-          display: block;
-
-          &:link, &:visited {
-              color: $hart_primary;
-              text-decoration: none;
-          }
-          &:hover {
-              background-color: $hart_primary;
-              color: #FFF;
-          }
-      }
-  }
-  @media only screen and (min-width:48em) {
-    height: 32px;
-    max-width: 60em;
-    margin: 173px auto 0 auto;
-
-    li {
-      float: left;
-      margin-left: 1em;
-      text-align: center;
-
-      span {
-        display: inline;
-      }
-
-      a {
-          padding: 0;
-          background: #fff;
-          color: #333;
-          font-size: 1em;
-          border-bottom: 0;
-          display: inline;
-
-          &:link, &:visited {
-              color: $hart_primary;
-              text-decoration: none;
-          }
-          &:hover {
-              background-color: #fff;
-              color: $hart_primary;
-              text-decoration: underline;
-          }
-      }
+.nav-menu--main {
+    font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
+    a {
+        &:link, &:visited {
+            color: $hart_primary;
+        }
+        &:hover {
+            background-color: $hart_primary;
+            color: #FFF;
+        }
     }
-  }
+    span { display: none }
 }
 
 #front-main {
@@ -386,20 +231,6 @@ body.frontpage .table-cell .content {
   list-style-type: none;
 }
 
-.main-menu ul {
-  margin: 0;
-  line-height: 32px;
-}
-
-.main-menu li {
-  list-style-type: none;
-  color: #000;
-}
-
-.main-menu li.last {
-  padding-right: 0;
-}
-
 //#search input { display: inline; margin: 0; @include border-radius(0em); }
 //#search input.button { font-weight: normal; text-transform: none; }
 // The footer breaks the map pages layout, easier to exclude it than
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 08b084275..ecda2cc1f 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -1,10 +1,6 @@
 @import "_colours";
 @import "../sass/layout";
 
-.content {
-  margin-top: 8em;
-}
-
 #front-main-container {
     background-color: $hart_primary;
 }
@@ -16,3 +12,114 @@ body.twothirdswidthpage .content {
         }
     }
 }
+
+.mobile-header-nav {
+    display: none;
+}
+
+#site-header {
+    background-color: $hart_primary;
+    margin-bottom: 2em; // To push main content down under abs. pos menu
+}
+
+#site-logo {
+    margin-left: 2.25em;
+    border-bottom: solid 0.75em $primary;
+    padding: 1em 0;
+    background: url("/cobrands/hart/hart-logo.png") 0 50% no-repeat;
+    width: 123px;
+    height: 132px;
+}
+
+#main-nav--hart {
+    margin: 0;
+}
+
+// Menu *in* the header, pushed down from top
+.nav-menu--hart {
+  margin-left: 157px;
+  position: relative;
+  top: 110px;
+  float: none;
+  li {
+    text-align: center;
+    text-transform: uppercase;
+    padding: 0 15px;
+    font-size: 16px;
+    border-right: solid 1px white;
+    line-height: 1.5em;
+  }
+  li:last-child {
+    border-right: none;
+  }
+  a {
+    padding: 0;
+    font-size: inherit;
+  }
+  li:hover, li:hover a {
+    background-color: white;
+    color: black;
+    text-decoration: none;
+  }
+}
+
+// Menu *under* header - with a full width shadow first
+// The !importants are because we do not want this to be reset on a map page as
+// it otherwise would be.
+
+.container--hart {
+    box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map
+    width: 100% !important;
+    position: absolute !important;
+}
+
+#main-nav {
+    min-height: 0;
+    float: none;
+    max-width: 60em; // To have it line up at big widths
+    margin: 11em auto 0; // To push it under heade
+    background-color: #fff;
+}
+
+body.mappage {
+    #site-logo {
+        // XXX Rather than re-overriding this, and margin-right below, should
+        // the 1em padding be on the header container instead of site-logo/
+        // main-nav, or something?
+        margin-left: 2.25em;
+    }
+    #main-nav {
+        max-width: none; // containers are full width on map page, overriding 60em above
+        margin-right: 0;
+    }
+}
+
+.nav-menu--first {
+    padding: 0.25em 0;
+
+    li {
+      float: left;
+      margin-left: 1em;
+      text-align: center;
+
+      a, span {
+        padding: 0;
+        display: inline;
+        font-size: 1em;
+        color: #333;
+        background: #fff;
+      }
+
+      a {
+          &:link, &:visited {
+              color: $hart_primary;
+              text-decoration: none;
+          }
+          &:hover {
+              background-color: #fff;
+              color: $hart_primary;
+              text-decoration: underline;
+          }
+      }
+    }
+}
diff --git a/web/cobrands/oxfordshire/_oxon.scss b/web/cobrands/oxfordshire/_oxon.scss
index c8c49a631..39d2edec7 100644
--- a/web/cobrands/oxfordshire/_oxon.scss
+++ b/web/cobrands/oxfordshire/_oxon.scss
@@ -14,16 +14,15 @@ body {
   a:hover {text-decoration:underline}
   margin:0;
   background:#E0E0E0 url("images/bg.jpg") repeat-y top center;
+}
 
-  #oxford-wrapper {
+#oxford-wrapper {
     background: url("images/bg-y.jpg") repeat-y scroll 0 0 #FFFFFF;
     clear: both;
     display: block;
     margin: 0 auto;
     padding: 0 8px;
     width: 990px;
-  }
-
 }
 
 #oxford-header {
@@ -32,19 +31,19 @@ body {
   overflow:hidden;
   position:relative;
   width:958px;
-
-  /* note================= */
-  height: 133px;
-  height:auto !important;
-  min-height:133px;
-  /* note================= */
+  min-height: 133px;
 
   background: $oxfordshire_lt_green url("images/header.jpg") no-repeat 0 0;
 
   a.logo:hover {cursor:pointer;cursor:hand}
-  a.logo {float:left; display:inline; margin:3px 0 6px 10px; position:relative; overflow:hidden}
-  a.logo span {display:block; position:absolute; top:0; left:0; z-index:10}
-  a.logo,  a.logo span {width:173px; height:38px; background: url("images/logo.jpg") no-repeat 0 0;}
+  a.logo {
+    float:left;
+    margin:3px 0 6px 10px;
+    width:173px;
+    height:38px;
+    background: url("images/logo.jpg") no-repeat 0 50%;
+    text-indent: -999999px;
+  }
 
   h1 {
     float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal;
@@ -236,7 +235,3 @@ body {
     z-index: 1000;
   }
 }
-.oxford-left {
-  float: left !important;
-}
-
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 637b2c139..033dcb0ff 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -20,6 +20,8 @@
 
 #mysoc-logo {
   background-image: none;
+  background-color: $primary;
+  color: #fff;
   text-indent: 0;
   img {
     display: inline;
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 086337383..a1bee844e 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -37,8 +37,7 @@ body, body a {
 }
 
 // White background, so no margin needed.
-.content,
-.iel8 .content {
+.content {
     margin: 0;
 }
 
@@ -62,16 +61,10 @@ body.twothirdswidthpage {
 body.mappage {
   #oxford-wrapper {
     width: auto;
+    background: none;
     padding: 0;
-    background: transparent;
   }
-
   #oxford-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
     width: auto;
     min-height: $mappage-header-height; // override the normal min-height of 133px
     padding: 0;
@@ -86,16 +79,10 @@ body.mappage {
 
     a.logo {
       display: block;
-      float: left;
       height: $mappage-header-height;
       width: 200px;
       margin: 0;
       background: transparent url("images/logo-light-green.gif") no-repeat 50% 50%;
-      text-indent: -999px;
-
-      * {
-        display: none;
-      }
     }
 
     #navigation {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 47980ca21..9a6b00139 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -450,7 +450,7 @@ body.fullwidthpage {
 
 // two thirds width page, also has option for a sidebar which can be sticky or not
 body.twothirdswidthpage {
-  .container {
+  #site-header + .container {
     // This used to be on all containers, but there was a bug in Chrome, so now
     // it's just here so that the sidebar links are still clickable with their
     // negative z-index.
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index 55d0cb6b6..fc4033875 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -1,22 +1,42 @@
 @import "colours";
 @import "../sass/layout";
 
-// d523b431
-.nav-wrapper{
-  .nav-wrapper-2{
+.wrapper {
+    display: table;
+    width: 100%;
+}
+.table-cell {
+    display: table-cell;
+}
+.table-caption {
+    display: table-caption;
+}
+
+#site-header {
+    display: none;
+}
+
+.nav-wrapper {
     position: static;
-    min-height: 0;
-    // e7c122a4 / 0b0a619b / - "Removed mySociety menu and positioned menu"
-    border-top: none;
     padding-top: 0.5em;
     padding-bottom: 0.25em;
     background-color: #6b6969;
     @include linear-gradient(#6b6969, #555454);
 
+    .container {
+        width: auto;
+        max-width: 984px; // match the Stevenage header width
+    }
+
     .iel8 & {
       background-color: #6b6969;
     }
-  }
+}
+
+#main-nav {
+    min-height: 0;
+    margin-top: 0;
+    float: none;
 }
 
 // We use absolute positioning for the header on IE7,
@@ -39,15 +59,6 @@
     }
 }
 
-#main-nav {
-    @include clearfix;
-    width: auto;
-    max-width: 984px; // match the Stevenage header width
-    float: none;
-    padding-left: 0;
-}
-
-
 .nav-menu {
     float: none;
 }
@@ -96,20 +107,6 @@ body.twothirdswidthpage {
 }
 
 // d523b431
-body.frontpage {
-    .nav-wrapper-2 {
-        height: auto;
-    }
-    #site-header {
-        height: auto;
-    }
-}
-
-#site-header {
-    display: none;
-}
-
-// d523b431
 #front-main {
     background: #fff;
     color: #222;
@@ -133,52 +130,30 @@ body.frontpage {
   }
 }
 
-@media only screen and (min-width: 48em) and (max-width: 61em) {
-    // f432a72d - moved sticky sidebars down a bit to account for the larger header
-    body.twothirdswidthpage {
-        .content {
-            .sticky-sidebar {
-                aside {
-                    top: 19em;
-                }
-            }
-        }
-    }
-}
-
 body.mappage {
     #site-header {
         // We use the obscured #site-header to push the
         // content sidebar down beyond .nav-wrapper-2
-        height: 3em;
+        height: 4em;
         display: block;
+        border-top: none;
     }
 
     // Over-specific selector required to trump _layout.scss
-    .nav-wrapper .nav-wrapper-2 {
+    .nav-wrapper {
         position: absolute;
         top: 0;
         padding: 0;
         background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left;
+        .container {
+            max-width: none; // Overriding 984px default above
+        }
     }
 
-    #site-logo {
-        position: absolute;
-        top: 0.5em;
-    }
-
+    // Override the defaults, above
     #main-nav {
         float: right;
-        margin-right: 1em;
-        margin-top: 1em;
-    }
-
-    // again, !important to override _layout.scss
-    .nav-menu--main a,
-    .nav-menu--main span,
-    .report-a-problem-btn {
-        padding: 0.5em 0.75em 0.4em 0.75em !important;
-        margin: 0 !important;
+        min-height: $mappage-header-height;
     }
 
     .nav-menu a {
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index 177d5773e..be8a2e591 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -3,21 +3,13 @@ $mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header +
 @import "_colours";
 @import "../sass/layout";
 
-
 #site-header {
-    position: relative;
+    border-top: none;
     .navbar {
         margin-bottom: 0;
     }
 }
 
-// Needs to be within body.frontpage to override an existing rule in _layout.scss
-body.frontpage {
-    #site-header {
-        height: auto;
-    }
-}
-
 body.mappage {
     footer, .footer-container, #footer-container, #footer-logos-bottom {
         display: none;
@@ -27,10 +19,6 @@ body.mappage {
         display: none;
     }
 
-    .navbar-container {
-        width: auto !important; // 100% width for the FMS nav links container ONLY
-    }
-
     #site-header .navbar {
         margin-top: 0; // remove space between FMS nav links and green header
     }
@@ -41,10 +29,6 @@ body.mappage {
     }
 }
 
-.content {
-    margin-bottom: 0;
-}
-
 body.twothirdswidthpage .content .sticky-sidebar {
     z-index: 0;
 
@@ -78,6 +62,12 @@ body.mappage .container {
   width: 940px;
 }
 
+body.mappage {
+    .navbar-container {
+        width: auto; // 100% width for the FMS nav links container ONLY
+    }
+}
+
 // http://www.warwickshire.gov.uk/wp-content/themes/gamma/bootstrap-responsive.css
 @media (min-width: 1200px) {
     .container,
diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss
index 746da4ece..b79803d5e 100644
--- a/web/cobrands/zurich/_zurich.scss
+++ b/web/cobrands/zurich/_zurich.scss
@@ -8,12 +8,6 @@ a:hover {
     text-decoration: underline;
 }
 
-// mySociety addition for box shadow on front page with static image
-body.frontpage #zurich-footer-wrapper {
-    padding: 1px 0;
-    @include box-shadow(0 -6px 6px -5px #000);
-}
-
 #zurich-footer {
     margin: 2em auto; // mySociety
     font-size: 67.5%;
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 42d340f1f..d2c4f71b5 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -11,46 +11,83 @@ $mappage-header-height: 7em;
     color: #3c3c3c;
 }
 
-// Front page content needs a shadow.
-// (Purely decorative: No need for border fallback for IE8)
-body.frontpage .content {
-    @include box-shadow(0 0 6px 1px #000);
-}
-// The header on a map page needs a shadow too
-body.mappage .nav-wrapper .nav-wrapper-2 {
-    @include box-shadow(0 0 6px 1px #000);
-    z-index: 2; // One more than #zurich-main-nav so it's on top
-}
-// Except on admin pages where there's an admin nav directly underneath it
-body.mappage.admin .nav-wrapper-2 {
-    @include box-shadow(none);
-}
-
 // Fix positioning of images in the admin
 body.admin .admin-nav-wrapper {
     z-index: 1;
 }
 
 // Different header and logo
-#site-header .container {
-    height: 99px;
-    background: url(logo_portal.x.jpg) top left repeat-x;
+#site-header {
+    border-top: none;
+    margin-bottom: 2em;
+    .container {
+        background: #fff url(logo_portal.x.jpg) top left repeat-x;
+    }
+}
+
+body.mappage {
+    #site-header {
+        // The header on a map page needs a shadow too
+        @include box-shadow(0 0 6px 1px #000);
+        z-index: 2; // One more than #zurich-main-nav so it's on top
+        .container {
+            margin: 0 1em; // White padding left/right
+        }
+    }
+    // Except on admin pages where there's an admin nav directly underneath it
+    &.admin #site-header {
+        @include box-shadow(none);
+    }
 }
 
 #site-logo-text {
     display: inline;
+    position: absolute;
+    top: 0;
+    z-index: 3;
+    padding-top: 83px;
+    padding-left: 10px;
+    color: #585858;
+    font-size: 85%;
+}
+body.mappage #site-logo-text {
+    padding-left: 0;
 }
 
-body.frontpage #site-logo, #site-logo {
+#site-logo {
     width: 415px;
     height: 83px;
-    background: url(logo_portal.jpg) top left no-repeat;
-    top: 0;
-    left: auto; // base set this to 0
+    background-position: top left;
+    margin-left: 0;
+}
+
+body.mappage #site-logo {
+    margin-left: 0;
+}
+
+.nav-wrapper {
+    top: 18px;
+}
+
+#main-nav {
+    margin-top: 0;
+    display: block; // Stop the default 'flex'
+    body.mappage & {
+        // As header gets a z-index above for the shadow
+        // Otherwise this would be invisible underneath
+        z-index: 2;
+        position: relative;
+    }
 }
 
 // Static map on front page
 body.frontpage {
+    // Front page content needs a shadow.
+    // (Purely decorative: No need for border fallback for IE8)
+    .content {
+        @include box-shadow(0 0 6px 1px #000);
+    }
+
     .table-cell {
         background-position: 50% 117px;
         background-repeat: no-repeat;
@@ -64,59 +101,23 @@ body.frontpage {
     }
 
     #site-header {
-        height: 117px;
-        background-color: #fff;
         @include box-shadow(0 0 6px 1px #000);
+        height: 117px;
     }
-}
-
-#site-logo-text {
-    position: absolute;
-    top: 0;
-    z-index: 3;
-    padding-top: 83px;
-    padding-left: 10px;
-    color: #585858;
-    font-size: 85%;
-}
-body.mappage #site-logo-text {
-    position: fixed;
-}
-
-.nav-wrapper {
-    .nav-wrapper-2 {
-        border-top: none;
-    }
-    .nav-wrapper-3 {
-        height: 6em; // rough figure, enough to show the blue band, but less than .nav-wrapper-2 height
-        padding-top: 18px;
-    }
-}
 
-body.mappage {
-    .nav-wrapper {
-        .nav-wrapper-2 {
-            border-top: none;
-            padding: 0 10px;
-            box-sizing: border-box;
-        }
-    }
-    /* Ugh :( But first wrapper is the caption, second is the fixed (so first we
-       can do padding on) so a third seems necessary for the background then. */
-    .nav-wrapper-3 {
-        background: #fff url(logo_portal.x.jpg) top left repeat-x;
-    }
-    .content {
-      margin-top: 1em;
+    #zurich-footer-wrapper {
+        padding: 1px 0;
+        @include box-shadow(0 -6px 6px -5px #000);
+        position: relative;
     }
 }
 
 // Logged in notice in footer (appearing in header)
-.nav-wrapper-2 p:first-child {
+.nav-wrapper p:first-child {
     font-weight: bold;
     margin-top: 0.75em;
 }
-.nav-wrapper-2 p {
+.nav-wrapper p {
     line-height: 1.2;
     color: white;
     clear: right;