Absolutely position map pages.

This simplifies the page layout and code. We add a new #map_sidebar for
sidebar positioning, and a $mappage-header-height (defaulting to 4em)
variable. We no longer need:
* position_map_box;
* map_fix;
* special visual centre calculation; or
* custom pan zoom positioning.

As the sidebar now scrolls by itself and nothing can extend outside:
* The big-green-banner is set to 100% width (with negative margins no
  longer required);
* For cobrands that have an overhanging sidebar (e.g. Zurich), we add
  a .with-notes variant that adds a second column to the sidebar,
  perfect for containing secondary notes about the form.

The resizing of the banner also required some tweaking to the size of
the chevron-white SVG images.

Update the $.fn.drawer() method for the new layout. Works well in IE7+8,
and degrades gracefully in IE6.

For IE7, we remove the existing z-index hacks, and put a new, simpler,
one in, and fix a CSS bug that was hiding the map.

Various cobrands are updated to adapt to the changes.

39 files changed, 347 insertions, 575 deletions

diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss
index fa4305715..564c78348 100644
--- a/web/cobrands/angus/_colours.scss
+++ b/web/cobrands/angus/_colours.scss
@@ -24,7 +24,7 @@ $nav_fg_hover: transparent;
 
 $col_big_numbers: $primary;
 
-$col_click_map: $angus_green;
+$col_click_map: $angus_blue;
 $col_click_map_dark: darken($col_click_map, 10%);
 
 $col_fixed_label: $angus_green;
diff --git a/web/cobrands/angus/position_map.js b/web/cobrands/angus/position_map.js
index 36f572f93..31ca1c09a 100644
--- a/web/cobrands/angus/position_map.js
+++ b/web/cobrands/angus/position_map.js
@@ -333,25 +333,4 @@ var add_streetlights = (function() {
     return add_streetlights;
 })();
 
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'absolute',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-    add_streetlights();
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
+$(add_streetlights);
diff --git a/web/cobrands/arreglamibarrio/_colours.scss b/web/cobrands/arreglamibarrio/_colours.scss
index cb7013db2..3b1a671e3 100644
--- a/web/cobrands/arreglamibarrio/_colours.scss
+++ b/web/cobrands/arreglamibarrio/_colours.scss
@@ -14,7 +14,6 @@ $nav_fg_hover: #444;
 
 // The "Click map" box on /around
 $col_click_map: #00BD08;
-$col_click_map_dark: #4B8304;
 
 // The "fixed" message on a report page
 $col_fixed_label: #00BD08;
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index e4686b97c..c36182ff8 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -18,6 +18,5 @@ $nav_fg: #fff;
 $nav_fg_hover: #444;
 
 $col_click_map: $bromley_blue;
-$col_click_map_dark: darken($bromley_blue, 10%);
 $col_fixed_label: $bromley_blue;
 $col_fixed_label_dark: darken($bromley_blue, 10%);
diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss
index 5bd3d958f..72f9607cd 100644
--- a/web/cobrands/default/_colours.scss
+++ b/web/cobrands/default/_colours.scss
@@ -23,7 +23,6 @@ $nav_fg_hover: $primary;
 $col_big_numbers: #ccc;
 
 $col_click_map: $bluey;
-$col_click_map_dark: darken($bluey, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/eastsussex/_colours.scss b/web/cobrands/eastsussex/_colours.scss
index 0887ba82e..c24c6e688 100644
--- a/web/cobrands/eastsussex/_colours.scss
+++ b/web/cobrands/eastsussex/_colours.scss
@@ -5,7 +5,6 @@ $eastsussex_primary: #155F91;
 
 $primary: $eastsussex_primary;
 $col_click_map: $eastsussex_primary;
-$col_click_map_dark: $eastsussex_primary;
 $col_fixed_label_dark: $eastsussex_primary;
 $col_fixed_label: $eastsussex_primary;
 
diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss
index d90a617f1..6ac4bcbad 100644
--- a/web/cobrands/eastsussex/layout.scss
+++ b/web/cobrands/eastsussex/layout.scss
@@ -1,11 +1,12 @@
-@import "_colours";;
+$mappage-header-height: 16em;
+
+@import "_colours";
 @import "../sass/layout";
 
-/* from http://nicolasgallagher.com/micro-clearfix-hack/ */
+// from http://nicolasgallagher.com/micro-clearfix-hack/
 .clearfix:before,
 .clearfix:after { content: " "; display: table; }
 .clearfix:after { clear: both; }
-/* For IE 6/7 only */
 .clearfix { *zoom: 1; }
 
 #front-main {
@@ -13,6 +14,7 @@
     margin-top: 0;
     padding: 0
 }
+
 #front-main-container {
     background-color: $eastsussex_primary;
     padding: 1em;
@@ -71,44 +73,30 @@ body.mappage {
         display: none;
     }
 
-    #fms_pan_zoom {
-        top: 18em!important;
-    }
-
     #mysociety {
         margin-top: 0;
         padding-top: 16em;
         padding-bottom: 0;
         width: auto;
         background: transparent;
+        float: none;
     }
 
-    .content {
-        div {
-            max-width: 27em;
-        }
-
-        // required for non-js placement
-        #map_box {
-            left: 30em;
-        }
-    }
-
-
     #wrapper {
         display: block;
         width: auto;
     }
 
-    #report-a-problem-sidebar {
-        top: 1em;
-    }
-
-    // Keep the headers fixed at the top on the map page
     #site-header {
-        position: fixed;
+        position: fixed; // Keep the headers fixed at the top on the map page
         width: 100%;
         z-index: 2;
+        background: #dae1e5; // the same colour that the .application-nav normally is
+    }
+
+    .application-nav {
+        background: transparent;
+        padding: 0.2em 0 0 0;
     }
 }
 
diff --git a/web/cobrands/eastsussex/position_map.js b/web/cobrands/eastsussex/position_map.js
deleted file mode 100644
index 71794e8d6..000000000
--- a/web/cobrands/eastsussex/position_map.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'absolute',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
index 40ec78543..8899f4c97 100644
--- a/web/cobrands/fiksgatami/_colours.scss
+++ b/web/cobrands/fiksgatami/_colours.scss
@@ -18,7 +18,6 @@ $nav_fg: #fff;
 $nav_fg_hover: $primary;
 
 $col_click_map: $bg;
-$col_click_map_dark: darken($bg, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
index a35e3147f..8ebd0712f 100644
--- a/web/cobrands/fixamingata/_colours.scss
+++ b/web/cobrands/fixamingata/_colours.scss
@@ -14,6 +14,5 @@ $nav_fg: $primary_text;
 $nav_fg_hover: #444;
 
 $col_click_map: #00BD08;
-$col_click_map_dark: #4B8304;
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixmindelo/_colours.scss b/web/cobrands/fixmindelo/_colours.scss
index ac39f72e3..e92843203 100644
--- a/web/cobrands/fixmindelo/_colours.scss
+++ b/web/cobrands/fixmindelo/_colours.scss
@@ -18,7 +18,6 @@ $nav_fg: #000;
 $nav_fg_hover: $primary;
 
 $col_click_map: $mindelo_green;
-$col_click_map_dark: darken($mindelo_green, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index 17447c86e..908356d36 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -14,7 +14,6 @@ $nav_fg_hover: #444;
 
 // The "Click map" box on /around
 $col_click_map: #00BD08;
-$col_click_map_dark: #4B8304;
 
 // The "fixed" message on a report page
 $col_fixed_label: #00BD08;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index f148f5ad7..dc9637d08 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -11,25 +11,6 @@ function isR2L() {
 }
 
 /*
- * general height fixing function
- *
- * elem1: element to check against
- * elem2: target element
- * offset: this will be added (if present) to the final value, useful for height errors
- */
-function heightFix(elem1, elem2, offset, force) {
-    var h1 = $(elem1).height(),
-        h2 = $(elem2).height();
-    if (offset === undefined) {
-        offset = 0;
-    }
-    if (h1 > h2 || force) {
-        $(elem2).css( { 'min-height': h1+offset } );
-    }
-}
-
-
-/*
  * very simple tab function
  *
  * elem: trigger element, must have an href attribute (so probably needs to be an <a>)
@@ -56,20 +37,6 @@ function tabs(elem, indirect) {
     }
 }
 
-/* Geographic function for faking map centre, as it appears to be offset from
-   where it actually is */
-
-function fixmystreet_midpoint() {
-    var $content = $('.content'), mb = $('#map_box');
-        r2l = isR2L(),
-        diff = r2l ? mb.width() : (mb.offset().left - $content.width()),
-        q = ($content.offset().left - diff) / 2;
-    if ((r2l && q > 0) || (!r2l && q < 0)) {
-        return 0;
-    }
-    return q;
-}
-
 
 $(function(){
     var $html = $('html');
@@ -87,12 +54,7 @@ $(function(){
         if (last_type == type) { return; }
         if (type == 'mobile') {
             $html.addClass('mobile');
-            $('#map_box').prependTo('.content').css({
-                zIndex: '', position: '',
-                top: '', left: '', right: '', bottom: '',
-                width: '', height: '10em',
-                margin: ''
-            });
+            $('#map_box').css({ height: '10em' });
             if (typeof fixmystreet !== 'undefined') {
                 fixmystreet.state_map = ''; // XXX
             }
@@ -110,8 +72,6 @@ $(function(){
                     .addClass('mobile-map-banner')
                     .appendTo('#map_box')
                     .html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
-            } else {
-                $('#fms_pan_zoom').css({ top: '0.5em' });
             }
             $('span.report-a-problem-btn').on('click.reportBtn', function(){
                 $('html, body').animate({scrollTop:0}, 500);
@@ -121,7 +81,7 @@ $(function(){
         } else {
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            position_map_box();
+            $('#map_box').css({ height: '' });
             if (typeof fixmystreet !== 'undefined') {
                 fixmystreet.state_map = 'full';
             }
@@ -131,6 +91,12 @@ $(function(){
                 if (cobrand !== 'oxfordshire') {
                     $('#site-header').show();
                 }
+                $('#map_box').prependTo('.content').css({
+                    position: '',
+                    top: '', left: '', right: '', bottom: '',
+                    height: '',
+                    margin: ''
+                });
                 if (typeof variation !== 'undefined' && variation === 1) {
                     banner_text = 'Click map to request a fix';
                 }
@@ -139,7 +105,7 @@ $(function(){
                     .prependTo('#side')
                     .html(banner_text);
             }
-            $('#fms_pan_zoom').css({ top: '4.75em' });
+            $('#fms_pan_zoom').css({ top: '' });
             $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
         }
         last_type = type;
@@ -148,11 +114,6 @@ $(function(){
     /*
      * Report a problem page
      */
-    //desktop
-    if ($('#report-a-problem-sidebar').is(':visible')) {
-        heightFix('#report-a-problem-sidebar', '.content', 26);
-    }
-
     //show/hide notes on mobile
     $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide();
     $('.rap-notes-trigger').click(function(e){
@@ -384,68 +345,74 @@ $(function(){
 
 // A sliding drawer from the bottom of the page, large version
 $.fn.drawer = function(id, ajax) {
-    // IE7 positions the fixed tool bar 1em to the left unless it comes after
-    // the full-width section, ho-hum. Move it to where it would be after an
-    // open/close anyway
-    if ($('html.ie7').length) {
-        var $sw = $('.shadow-wrap'), $content = $('.content[role="main"]');
-        $sw.appendTo($content);
-    }
+
+    // The link/button that triggered the drawer
+    var $this = $(this);
+
+    // A bunch of elements that will come in handy when opening/closing
+    // the drawer. Because $sw changes its position in the DOM, we capture
+    // all these elements just once, the first time .drawer() is called.
+    var $sidebar = $('#map_sidebar');
+    var $sw = $this.parents('.shadow-wrap');
+    var $swparent = $sw.parent();
+
     this.toggle(function(){
-        var $this = $(this), d = $('#' + id), $content = $('.content[role="main"]');
-        if (!$this.addClass('hover').data('setup')) {
-            // make a drawer div with an innerDiv
-            if (!d.length) {
-                d = $('<div id="' + id + '">');
-            }
-            var innerDiv = $('<div>');
-            d.wrapInner(innerDiv);
+        // Find the specified drawer, or create it if it doesn't exist
+        var $drawer = $('#' + id);
+        if ($drawer.length === 0) {
+            $drawer = $('<div id="' + id + '">');
+            $drawer.appendTo($swparent);
+        }
 
-            // if ajax, load it with a spinner
+        if ( ! $this.data('setup') ) {
+            // Optionally fill $drawer with HTML from an AJAX data source
             if (ajax) {
                 var href = $this.attr('href') + ';ajax=1';
                 var margin = isR2L() ? 'margin-left' : 'margin-right';
-                $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="' + margin + ':2em;">');
-                innerDiv.load(href, function(){
-                    $('.spinner').remove();
-                });
+                var $ajax_result = $('<div>').appendTo($drawer);
+                $ajax_result.html('<p style="text-align:center">Loading</p>');
+                $ajax_result.load(href);
             }
 
-            // Tall drawer - put after .content for scrolling to work okay.
-            // position over the top of the main .content in precisely the correct location
+            // Style up the $drawer
+            var drawer_top = $(window).height() - $sw.height();
             var drawer_css = {
-                position: 'absolute',
-                zIndex: '1100',
-                marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low
-                top: $(window).height() - $content.offset().top
+                position: 'fixed',
+                zIndex: 10,
+                top: drawer_top,
+                bottom: 0,
+                width: $sidebar.css('width'),
+                paddingLeft: $sidebar.css('padding-left'),
+                paddingRight: $sidebar.css('padding-right'),
+                overflow: 'auto',
+                background: '#fff'
             };
             drawer_css[isR2L() ? 'right' : 'left'] = 0;
-            d.insertAfter($content).addClass('content').css(drawer_css)
-                .removeClass('hidden-js').find('h2').css({ marginTop: 0 });
+            $drawer.css(drawer_css).removeClass('hidden-js').find('h2').css({ marginTop: 0 });
             $this.data('setup', true);
         }
 
-        //do the animation
-        $('.shadow-wrap').prependTo(d).addClass('static');
-        d.show().animate({top:'3em'}, 1000, function(){
-            $content.fadeOut(function() {
-                d.css({ position: 'relative' });
-            });
-        });
+        // Insert the .shadow-wrap controls into the top of the drawer.
+        $sw.addClass('static').prependTo($drawer);
+
+        // Animate the drawer into place, enitrely covering the sidebar.
+        var sidebar_top_px = $sidebar.position().top;
+        $drawer.show().animate({ top: sidebar_top_px }, 1000);
+
     }, function(e){
-        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap'),
-            $content = $('.content[role="main"]'),
-            tot_height = $(window).height() - d.offset().top;
-        $this.removeClass('hover');
-        d.css({ position: 'absolute' }).animate({ top: tot_height }, 1000, function(){
-            d.hide();
-            $sw.appendTo($content).removeClass('static');
+        // Slide the drawer down, move the .shadow-wrap back to its
+        // original parent, and hide the drawer for potential re-use later.
+        var $drawer = $('#' + id);
+        var drawer_top = $(window).height() - $sw.height();
+
+        $drawer.animate({ top: drawer_top }, 1000, function(){
+            $sw.removeClass('static').appendTo($swparent);
+            $drawer.hide();
         });
-        $content.show();
     });
 };
 
-    if ($('html.mobile').length || slide_wards_down ) {
+    if ($('html.mobile').length) {
         $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
         $('#key-tool-wards').click(function(e){
             e.preventDefault();
@@ -537,23 +504,4 @@ $.fn.drawer = function(id, ajax) {
         });
     }
 
-    /*
-     * heightfix the desktop .content div
-     *
-     * this must be kept near the end so that the
-     * rendered height is used after any page manipulation (such as tabs)
-     */
-    if (!$('html.mobile').length) {
-        if (!($('body').hasClass('fullwidthpage'))){
-            var offset = -15 * 16;
-            if (cobrand == 'oxfordshire') {
-                // Oxfordshire uses box-sizing:border-box and padding to work out height
-                offset = 0;
-            }
-            heightFix(window, '.content', offset, 1);
-            // in case we have a map that isn't full screen
-            map_fix();
-        }
-    }
-
 });
diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg
index 4dc587e79..544197dd2 100644
--- a/web/cobrands/fixmystreet/images/chevron-white-left.svg
+++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M62 0H49L36 16l13 16h13L49 16"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M42 0H29L16 16l13 16h13L29 16"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg
index 3aa713765..7a953bfbc 100644
--- a/web/cobrands/fixmystreet/images/chevron-white-right.svg
+++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js
deleted file mode 100644
index 71794e8d6..000000000
--- a/web/cobrands/fixmystreet/position_map.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'absolute',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index 2f3aa913c..d2dc1c3ed 100644
--- a/web/cobrands/greenwich/_colours.scss
+++ b/web/cobrands/greenwich/_colours.scss
@@ -20,7 +20,6 @@ $nav_fg_hover: transparent;
 $col_big_numbers: $primary;
 
 $col_click_map: $greenwich_red;
-$col_click_map_dark: darken($col_click_map, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/harrogate/_colours.scss b/web/cobrands/harrogate/_colours.scss
index 11bf383f7..1c943ede3 100644
--- a/web/cobrands/harrogate/_colours.scss
+++ b/web/cobrands/harrogate/_colours.scss
@@ -8,7 +8,6 @@ $primary: $harrogate_primary;
 $primary_dark: darken($harrogate_primary, 20%);
 
 $col_click_map: $harrogate_primary;
-$col_click_map_dark: $harrogate_primary;
 $col_fixed_label_dark: $harrogate_primary;
 $col_fixed_label: $harrogate_primary;
 
diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss
index 417eff539..904a707b1 100644
--- a/web/cobrands/harrogate/layout.scss
+++ b/web/cobrands/harrogate/layout.scss
@@ -1,3 +1,6 @@
+// Super tall map page header to accommodate the big logo
+$mappage-header-height: 10em;
+
 @import "_colours";
 @import "../sass/layout";
 
@@ -7,7 +10,7 @@
 
     body.frontpage #site-logo,
     .ie6 body.frontpage #site-logo,
-    
+
     body.twothirdswidthpage #site-logo,
     .ie6 body.twothirdswidthpage #site-logo
     {
@@ -22,21 +25,11 @@
 
     body.frontpage #site-header,
     .ie6 body.frontpage #site-header,
-
     body.twothirdswidthpage #site-header,
-    .ie6 body.twothirdswidthpage #site-header,
-
-    body.mappage #site-header,
-    .ie6 body.mappage #site-header,
-    body.mappage .nav-wrapper-2,
-    .ie6 body.mappage .nav-wrapper-2
+    .ie6 body.twothirdswidthpage #site-header
     {
         height: 10em;
     }
-
-    #fms_pan_zoom {
-        top: 10.75em!important;
-    }
 }
 
 @media only screen and (min-width: 48em) {
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index ce47a17c4..947b97625 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -4,7 +4,6 @@ $hart_primary: #7ECBA2;
 
 $primary: $hart_primary;
 $col_click_map: $hart_primary;
-$col_click_map_dark: $hart_primary;
 $col_fixed_label_dark: $hart_primary;
 $col_fixed_label: $hart_primary;
 
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 2f535e398..039567f32 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -20,23 +20,23 @@ input[type=text],
 input[type=password],
 input[type=email],
 input[type=file],
-textarea, 
+textarea,
 select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px;
 @include border-radius(0); }
 
 .green-btn, button.green-btn, input.green-btn {
-    background: #5b7189; 
-    border: 1px solid #8e9eb0; 
-    color: #fff; 
-    font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; 
-    font-weight: normal; 
-    margin: 0; min-height: 23px; 
+    background: #5b7189;
+    border: 1px solid #8e9eb0;
+    color: #fff;
+    font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
+    font-weight: normal;
+    margin: 0; min-height: 23px;
     /* outline: 1px solid #405062; */
-    padding: 4px 8px; 
-    text-transform: uppercase; 
+    padding: 4px 8px;
+    text-transform: uppercase;
 }
-.green-btn:hover, button.green-btn:hover, input.green-btn:hover { 
-    background: #5b7189; border: 1px solid #8e9eb0; 
+.green-btn:hover, button.green-btn:hover, input.green-btn:hover {
+    background: #5b7189; border: 1px solid #8e9eb0;
 }
 .form-txt-submit-box input[type=submit] {
     padding-top: 0; padding-bottom: 0; width: auto;
@@ -46,11 +46,11 @@ select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1d
 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, 
+.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 
+    border-top: solid 4px $hart_primary;  /* otherwise overridden in base layout.scss
                                              for some templates only */
     min-height: auto;
     background-color: $hart_primary;
@@ -61,6 +61,11 @@ body.frontpage .nav-wrapper-2 {
 }
 
 @media only screen and (min-width:48em) {
+    #map_box,
+    #map_sidebar {
+        top: 173px + 32px;
+    }
+
     body.frontpage #site-header {
         height: 13em;
 
@@ -69,6 +74,13 @@ body.frontpage .nav-wrapper-2 {
         }
     }
 
+    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 */
@@ -153,22 +165,16 @@ body.frontpage #site-logo,
 .sign-in a:hover, .sign-in a:active {text-decoration:underline;}
 
 .main-menu-wrapper {
-    /* z-index:2; */
     background-color: #FFF;
-    width:100%;
+    width: 100%;
+
     @media only screen and (min-width:48em) {
         position: absolute;
-    }
-}
-
-@media only screen and (min-width:48em) {
-    body.mappage .main-menu-wrapper {
-        position: fixed
+        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;
@@ -194,8 +200,7 @@ body.frontpage #site-logo,
       }
   }
   @media only screen and (min-width:48em) {
-    margin-top: 173px;
-    height: 2em;
+    height: 32px;
     max-width: 60em;
     margin: 173px auto 0 auto;
 
@@ -204,7 +209,7 @@ body.frontpage #site-logo,
       margin-left: 1em;
       text-align: center;
 
-      span { 
+      span {
         display: inline;
       }
 
@@ -256,10 +261,10 @@ body.frontpage .table-cell .content {
     height: auto;
     overflow: hidden;
     padding: 15px 15px 50px 15px;
-    color:#fff; 
+    color:#fff;
 
     @media only screen and (min-width:48em) {
-        margin-left:-15px; 
+        margin-left:-15px;
         padding: 35px 25px 40px 25px;
     }
 
@@ -306,10 +311,10 @@ body.frontpage .table-cell .content {
     p {
       margin: 0;
     }
-    a:link, a:visited { 
-        color: #fff; text-decoration: none; 
+    a:link, a:visited {
+        color: #fff; text-decoration: none;
     }
-    a:hover, a:active { 
+    a:hover, a:active {
         text-decoration: underline;
     }
 
@@ -335,30 +340,30 @@ body.frontpage .table-cell .content {
     }
 
     .footer-nav,  {
-        height:35px; 
+        height:35px;
 
         margin-left: 0;
         margin-bottom: 0;
 
         @media only screen and (min-width:48em) {
-            float: right; 
+            float: right;
         }
 
-        li { 
+        li {
             list-style-type: none;
-            float: left; 
+            float: left;
             width: 50%;
             margin-bottom: 0;
 
             a {
                 display: block;
-                border-bottom:1px solid #797f7f; 
+                border-bottom:1px solid #797f7f;
                 padding: 10px 0;
                 margin-left: 10px;
                 margin-right: 10px;
             }
             @media only screen and (min-width:48em) {
-                border-right:1px solid #fff; 
+                border-right:1px solid #fff;
                 width: auto;
                 a {
                     border-bottom: none;
@@ -366,8 +371,8 @@ body.frontpage .table-cell .content {
                     margin-left: 0;
                     margin-right: 0;
                 }
-                &:last-child { 
-                    border: none; 
+                &:last-child {
+                    border: none;
                     padding-right: 0;
                 }
             }
@@ -411,7 +416,7 @@ body.frontpage .table-cell .content {
 
 .main-menu ul {
   margin: 0;
-  padding-top: 8px;
+  line-height: 32px;
 }
 
 .main-menu li {
@@ -423,9 +428,6 @@ body.frontpage .table-cell .content {
   padding-right: 0;
 }
 
-.main-menu li.last a:hover, .main-menu li.last a:active {
-}
-
 //#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
@@ -433,6 +435,7 @@ body.frontpage .table-cell .content {
 body.mappage .hart-footer-wrapper {
   display: none;
 }
+
 #hart-powered-by {
     float: left;
     width: 50%;
@@ -454,10 +457,6 @@ body.mappage .hart-footer-wrapper {
     display: inline;
 }
 
-#fms_pan_zoom {
-    top: 12em;
-}
-
 #hart_hants_note {
     background-color: lighten($hart_primary, 30%);
     padding: 0.5em;
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 99f8bdfcf..d277ab76f 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -11,10 +11,7 @@
       padding: 0em;
       position: relative;
   }
-  body.mappage .content {
-    margin-top: 14em;
-  }
-  
+
   #front-main-container {
       background-color: $hart_primary;
   }
@@ -28,7 +25,7 @@
 }
 
 body.twothirdswidthpage .content {
-    width: 30em; 
+    width: 30em;
     aside {
         left: 672px;
         width: 208px;
diff --git a/web/cobrands/hart/position_map.js b/web/cobrands/hart/position_map.js
deleted file mode 100644
index e5bc78c9a..000000000
--- a/web/cobrands/hart/position_map.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'absolute',
-            top: 250, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 250, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index ed494674a..a8a78dc6e 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -21,7 +21,6 @@ $nav_fg: #fff;
 $nav_fg_hover: #444;
 
 $col_click_map: $oxfordshire_lt_green;
-$col_click_map_dark: $primary_text;
 
 $col_fixed_label: $oxfordshire_lt_green;
 $col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%);
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index d6c009019..b6446e38c 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -1,3 +1,7 @@
+// We specify a 4em header height in pixels, to make
+// the .menubar link padding calculations simpler.
+$mappage-header-height: 64px;
+
 @import "_colours";
 @import "../sass/layout";
 @import "../sass/report_list_pins";
@@ -71,10 +75,6 @@ body.twothirdswidthpage {
 .full-width { width: 464px; }
 .shadow-wrap { width: 464px; }
 
-#map_box {
-    width: 956px;
-    height: 600px;
-}
 .content { width: 432px; }
 
 body.fullwidthpage .content { width: auto; }
@@ -94,8 +94,6 @@ body.twothirdswidthpage .content {
 }
 
 body.mappage {
-  $mappage-header-height: 60px;
-
   #oxford-wrapper {
     width: auto;
     padding: 0;
@@ -103,13 +101,13 @@ body.mappage {
   }
 
   #oxford-header {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    z-index: 2; // 1 more than `body.mappage .content`
+    z-index: 1;
     width: auto;
-    min-height: $mappage-header-height;
+    min-height: $mappage-header-height; // override the normal min-height of 133px
     padding: 0;
     background-color: #069b01; // picked from header.jpg
     background-position: 100% 40%;
@@ -190,36 +188,27 @@ body.mappage {
     width: auto;
   }
 
-  .content {
-    padding: 1em;
-    padding-top: $mappage-header-height + 10px;
-    position: relative;
-    z-index: 1;
-    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  #map_sidebar {
     background-color: $oxfordshire_very_light_green;
+  }
 
-    // fixmystreet.js gives this element a min-height equal to the window height.
-    // Set border-box sizing, so that our padding doesn't get added onto height.
-    box-sizing: border-box;
-
-    .extra-text {
-      padding: 1em;
-      margin: 0 -1em;
-      border-bottom: 1px solid $oxfordshire_mid_grey_green;
+  .extra-text {
+    padding: 1em;
+    margin: 0 -1em;
+    border-bottom: 1px solid $oxfordshire_mid_grey_green;
 
-      p:last-child {
-        margin-bottom: 0;
-      }
+    p:last-child {
+      margin-bottom: 0;
     }
+  }
 
-    .full-width {
-      width: auto;
-      margin: 0 -1em;
-    }
+  .full-width {
+    width: auto;
+    margin: 0 -1em;
+  }
 
-    input[type="file"] {
-      background-color: transparent;
-    }
+  input[type="file"] {
+    background-color: transparent;
   }
 
   // Space between green header and sidebar content
@@ -306,8 +295,6 @@ h4.static-with-rule {
 }
 
 .shadow-wrap {
-    width: 432px;
-
     ul#key-tools {
         -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
         -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js
deleted file mode 100644
index bcd0e0c12..000000000
--- a/web/cobrands/oxfordshire/position_map.js
+++ /dev/null
@@ -1,22 +0,0 @@
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'absolute',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
-
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b8eafdbe4..dfe03ebf1 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -829,25 +829,13 @@ input.final-submit {
 
 .big-green-banner {
   position: relative;
-  top:-1.75em;
+  top: -1.75em;
   background: $col_click_map;
   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 $col_click_map_dark;
-  }
+  padding: 1em;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 0.875em;
 }
 
 .banner {
@@ -1061,17 +1049,27 @@ input.final-submit {
 }
 
 // map stuff
-#map_box{
+#map_box {
   @extend .full-width;
   background: #333;
   height: 29em;
   margin-bottom: 1em;
   overflow: hidden;
   position: relative;
+
   #map {
     width: 100%;
     height: 100%;
-    position: relative;
+
+    // IE7 doesn't understand 100% height when the parent height is "auto",
+    // so we have to explicitly tell it to pin the element to the top and
+    // bottom of the parent. No need for an ie7-specific condition, because
+    // this makes no difference in other browsers.
+    // We keep the "height: 100%" in there to give IE7 context for the 100%
+    // height on #map's child, div.olMapViewport.
+    position: absolute;
+    top: 0;
+    bottom: 0;
   }
 }
 
@@ -1085,7 +1083,7 @@ html.js #map .noscript {
 // OpenLayers fix for navigation being top right
 // Left and right so that zoom can be left, pan right.
 #fms_pan_zoom {
-  top: 0.5em;
+  top: 0.5em; // This will be overridden in JS if there's a full screen map with banner
   #{$left}: 0.5em;
   #{$right}: 0.5em;
 }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index cdb15e691..e0913b0ee 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -3,13 +3,15 @@
 
 $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
 $layout_front_stats_color: $primary !default;
+$mappage-header-height: 4em !default;
 
 .internal-link-fixed-header {
     display: block;
-    /* 5em is roughly the height of .nav-wrapper-2 (4em) plus the border-top on
-    .nav-wrapper-2 (4px), plus the padding-top on .item-list__item (0.5em). */
-    padding-top: 5em;
-    margin-top: -5em;
+    /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the
+     * border-top on .nav-wrapper-2 (4px), plus the padding-top on
+     * .item-list__item (0.5em). */
+    padding-top: $mappage-header-height + 1em;
+    margin-top: -($mappage-header-height + 1em);
 }
 
 //hacks for desk/mob only stuff
@@ -43,16 +45,6 @@ h1 {
   position: relative;
 }
 
-//z-index stack order gets reset to 0 in ie6/7 if you position anything,
-//so to fix things we give it a high value (don't ask me why)
-//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
-//this affects #site-logo
-.ie6, .ie7 {
-  .container {
-    z-index:100;
-  }
-}
-
 .wrapper{
   display: table;
   caption-side: top;
@@ -106,27 +98,22 @@ h1 {
   .container {
     position: static;//reset position so the nav links become clickable
   }
+
+  .ie6 &,
+  .ie7 & {
+      height: 3em;
+      // Without this, the #site-logo is unclickable.
+      // Something to do with broken z-index nesting in IE6-7.
+      z-index: 2;
+  }
 }
+
 #site-logo {
   top: 0.9em;
   #{$left}: auto;
   position: absolute;
   z-index: 3;
 }
-.ie6, .ie7 {
-  #site-header {
-    height:3em;
-    .container {
-      //ie broken z-index bug: the site-logo won't appear if we don't do this
-      //doesn't seem to render the nav link unclickable like in other browsers
-      position: relative;
-    }
-  }
-  #site-logo {
-    position: absolute;
-    top:-3.25em;
-  }
-}
 
 #nav-link {
   #{$right}: auto;
@@ -236,18 +223,42 @@ h1 {
 
 // map page - has fixed header and different styling
 body.mappage {
+
+  .wrapper .table-cell,
+  .nav-wrapper {
+    // No need for the table-cell stuff now we're using absolute positioning
+    display: block;
+  }
+
   .container {
     width: auto;
+    position: static;
   }
 
   .content {
-    float: $left;
-    padding: 1em 1em 10em;
+    width: auto;
+    padding: 0;
     margin: 0;
   }
 
+  #site-header {
+    // With the exception of the #site-logo child, the rest of
+    // #site-header gets entirely hidden behind .nav-wrapper-2
+    position: absolute;
+    z-index: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: $mappage-header-height;
+  }
+
   #site-logo {
+    position: absolute;
     #{$left}: 12px;
+    // Also inherits...
+    //   `top: 0.9em`
+    //   `z-index: 3`
+    // ...from the non-mappage version, above
   }
 
   #main-nav {
@@ -255,6 +266,27 @@ body.mappage {
     margin-#{$right}: 1em;
   }
 
+  .nav-wrapper {
+    .nav-wrapper-2 {
+      position: absolute;
+      z-index: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: $map_nav_bg;
+
+      // Watch out! If the nav links break onto two lines, the header will
+      // get taller, and overlap the top of #map_sidebar and #map_box.
+      // (But at least the nav links will be legible.)
+      min-height: $mappage-header-height;
+
+      // Count the 4px border-top as part of the height (mappage-header-height)
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  }
+
   .nav-menu--main a, .nav-menu--main span {
     padding: 1.4em 0.75em 1.35em;
   }
@@ -264,17 +296,6 @@ body.mappage {
     margin: 0.9em 0.25em 0.85em;
   }
 
-  .nav-wrapper{
-    .nav-wrapper-2{
-      position: fixed;
-      background: $map_nav_bg;
-    }
-  }
-
-  #site-logo{
-    position: fixed;
-  }
-
   #user-meta {
     max-width: none;
     p {
@@ -348,6 +369,42 @@ body.mappage {
   }
 }
 
+#map_box {
+  position: absolute;
+  z-index: auto;
+  top: $mappage-header-height;
+  bottom: 0;
+  #{$right}: 0;
+  #{$left}: 29em; // width of sidebar
+  width: auto; // stretch from right edge of sidebar to left edge of window
+  height: auto; // stretch from bottom of header to bottom of window
+  margin: 0;
+
+  .with-notes & {
+    #{$left}: 44em;
+  }
+}
+
+#map_sidebar {
+  position: absolute;
+  z-index: auto;
+  top: $mappage-header-height;
+  #{$left}: 0;
+  bottom: 0;
+  width: 27em; // width of sidebar, minus padding
+  padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element
+  overflow: auto; // vertical scrollbar when list is taller than window
+  background-color: #fff; // since no longer in the flow inside .content
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+
+  .with-notes & {
+    width: 42em;
+    // TODO: Should have a bitmap image fallback for old browsers!!
+    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+  }
+}
+
 #skip-this-step {
   display: block;
   color: inherit;
@@ -598,17 +655,6 @@ body.authpage {
   }
 }
 
-// map box (fallback for non js really as most users
-// will have fullscreen map)
-#map_box{
-  position: absolute;
-  height: 29em;
-  width: 29em;
-  #{$right}: 1em;
-  top: 3em;
-  z-index:1;
-}
-
 // Openlayers map controls (overrides)
 #fms_pan_zoom_panup,
 #fms_pan_zoom_pandown,
@@ -765,13 +811,22 @@ body.authpage {
   &.static {
     padding: 0 0 1em;
     position: static;
+    width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars)
   }
 }
+
 // The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
 .ie6 .shadow-wrap {
   padding-top: 0;
 }
 
+// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap.
+// We can set a fixed width instead, which might result in a horizontal scrollbar
+// while the drawer is opening. Quel dommage.
+.iel8 .shadow-wrap.static {
+    width: 29em;
+}
+
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;
@@ -781,24 +836,14 @@ body.authpage {
     margin-bottom: 0;
 }
 
-// pokes over the RHS with a little triangle
 .big-green-banner {
   top: auto;
-  #{$right}: -1.25em;
-  margin-#{$left}: -2em;
+  margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375);
   font-size: 1.375em;
-  padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
+  padding: flip(1em 2em 1em 1em, 1em 1em 1em 2em);
   background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat;
-  background-size: 27px+36px 33px;
-  &:before {
-    left: flip(auto, 0);
-    right: flip(0, auto);
-    top: -0.5em;
-    position: absolute;
-    border-top: 0.5em solid transparent;
-    border-#{$left}: 0.5em solid $col_click_map_dark;
-    border-bottom:none;
-  }
+  background-size: 43px 33px;
+
   span {
     display: block;
     font-size: 80%;
@@ -849,14 +894,6 @@ body.authpage {
   }
 }
 
-
-// for pulling elements fullwidth regardless
-// of .contents' padding
-.full-width{
-  margin: flip(0 0 0em -1em, 0 -1em 0 0);
-  width: 29em;
-}
-
 /*FORMS*/
 input[type=text],
 input[type=password],
@@ -876,40 +913,32 @@ textarea.form-error {
   @include border-radius(0 0 0.25em 0.25em);
 }
 
-#report-a-problem-sidebar {
-    position: absolute;
-    #{$left}: 29em;
-    width: 15em;
-    @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+// If the form is .with-notes, limit the width of the inputs
+// to make space for the #report-a-problem-sidebar.
+#side-form, #side {
+  .with-notes & {
+    width: 27em;
+  }
 }
 
-// Report a problem sidebar notes
+// Notes presented alongside the reporting form
 #report-a-problem-sidebar {
-  top:5em;
-  div {
-    padding:1em;
-    font-size:0.75em;
-    background:#eeeeee;
-  }
-  .sidebar-notes {
-    background:#333333;
-    color:#ffffff;
+  margin-bottom: 2em;
+
+  // If the parent is .with-notes we know we have space to
+  // float the sidebar content to the side of the form.
+  .with-notes & {
+    float: #{$right};
+    width: 13em;
+    margin-#{$right}: -15em;
   }
-}
-.ie6, .ie7 {
-  #report-a-problem-sidebar {
-    #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
-    z-index: 1;
+
+  div {
+    font-size: 0.75em;
   }
-}
 
-.no-js #report-a-problem-sidebar {
-  position: static;
-  width: auto;
-  @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
-  .sidebar-tips,
   .sidebar-notes {
-    font-size:1em;
+    color: #666;
   }
 }
 
@@ -1139,12 +1168,6 @@ body.frontpage {
     background-position: 50% 50%;
   }
 
-  //Map becomes percentage width
-  #map_box{
-    #{$left}: 32em;
-    width:auto;
-  }
-
   //Revert to mobile use of the .full-width class
   .full-width{
     width: auto;
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index 143588b0e..2b77c4675 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -79,7 +79,7 @@ body.frontpage {
 
 .click-the-map {
   color: #000;
-  margin: -10px -1em 0; // overlap padding on parents
+  margin: -1em -1em 0; // overlap padding on parents
   padding: 18px;
   border-bottom: 1px solid #e5e5e5;
   // TODO This is not right-to-left enabled yet
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 54eda1b2c..62514b8f3 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -14,6 +14,5 @@ $nav_fg: #fff;
 $nav_fg_hover: #444;
 
 $col_click_map: #00BD08;
-$col_click_map_dark: #4B8304;
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index 937485c69..19dc38470 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -96,14 +96,6 @@ body.twothirdswidthpage {
     }
 }
 
-// 15591af7 - Stevenage Map page changes
-#map_box {
-    top: 140px;
-}
-#fms_pan_zoom {
-    top: 190px !important;
-}
-
 // 2a23e09f - Moved menu on map page and reverted to full header.
 #report-a-problem-sidebar {
     top: 9em;
@@ -183,7 +175,6 @@ body.mappage {
         position: absolute;
         top: 0;
         padding: 0;
-        height: 4em;
         background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left;
     }
 
diff --git a/web/cobrands/trinidadtobago/_colours.scss b/web/cobrands/trinidadtobago/_colours.scss
index f5d0e2b90..c96c6a7c3 100644
--- a/web/cobrands/trinidadtobago/_colours.scss
+++ b/web/cobrands/trinidadtobago/_colours.scss
@@ -17,7 +17,6 @@ $nav_fg: #000;
 $nav_fg_hover: $primary;
 
 $col_click_map: $trinidad_secondary;
-$col_click_map_dark: darken($trinidad_secondary, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss
index 41ede9ea0..473d8cb03 100644
--- a/web/cobrands/warwickshire/_colours.scss
+++ b/web/cobrands/warwickshire/_colours.scss
@@ -14,7 +14,6 @@ $nav_fg: #000;
 $nav_fg_hover: $primary;
 
 $col_click_map: $green;
-$col_click_map_dark: darken($green, 10%);
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index e1d34cee6..1318e1a11 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -1,3 +1,5 @@
+$mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header + #mega-menu-navbar
+
 @import "_colours";
 @import "../sass/layout";
 
@@ -22,10 +24,6 @@ body.frontpage {
     }
 }
 
-#fms_pan_zoom {
-    top: 14em !important;
-}
-
 @media (max-width: 61em) and (min-width: 48em) {
     #site-header {
         height: auto;
@@ -41,11 +39,17 @@ body.mappage {
         display: none;
     }
 
-    #wrapper {
-        padding: 0;
-        width: auto;
-        display: block;
-        position: relative;
+    .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
+    }
+
+    #mega-menu-navbar .navbar-inner {
+        border-width: 0 0 1px 0;
+        border-radius: 0;
     }
 }
 
diff --git a/web/cobrands/warwickshire/position_map.js b/web/cobrands/warwickshire/position_map.js
deleted file mode 100644
index 02ec71f2f..000000000
--- a/web/cobrands/warwickshire/position_map.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function position_map_box() {
-    var $html = $('html');
-    if ($html.hasClass('ie6')) {
-        $('#map_box').prependTo('body').css({
-            zIndex: -1, position: 'absolute',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: $(window).height(),
-            margin: 0
-        });
-    } else {
-        $('#map_box').prependTo('body').css({
-            zIndex: 0, position: 'fixed',
-            top: 0, left: 0, right: 0, bottom: 0,
-            width: '100%', height: '100%',
-            margin: 0
-        });
-    }
-}
-
-function map_fix() {}
-var slide_wards_down = 0;
diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss
index 8ae175583..d05be2102 100644
--- a/web/cobrands/zurich/_colours.scss
+++ b/web/cobrands/zurich/_colours.scss
@@ -15,9 +15,7 @@ $map_nav_bg: #fff;
 $nav_fg: $primary_text;
 $nav_fg_hover: $primary/1.1;
 
-
 $col_click_map: $zurich_blue;
-$col_click_map_dark: darken($zurich_blue, 20%);
 
 $col_fixed_label: #648721;
 $col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index a23d8a9ae..e80cdb468 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -1,3 +1,6 @@
+// Zurich has a taller map page header than most cobrands.
+$mappage-header-height: 7em;
+
 @import "colours";
 @import "../sass/layout";
 @import "zurich";
@@ -24,8 +27,9 @@ body.mappage .content, body.frontpage .content {
     }
 }
 /* The header on a map page needs a shadow too */
-body.mappage .nav-wrapper-2 {
+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 {
@@ -90,7 +94,7 @@ body.mappage #site-logo-text {
         border-top: none;
     }
     .nav-wrapper-3 {
-        height: 99px;
+        height: 6em; // rough figure, enough to show the blue band, but less than .nav-wrapper-2 height
         padding-top: 18px;
     }
 }
@@ -99,7 +103,6 @@ body.mappage {
     .nav-wrapper {
         .nav-wrapper-2 {
             border-top: none;
-            height: 117px; // 99px+18px for padding
             padding: 0 10px;
             box-sizing: border-box;
         }
@@ -107,8 +110,6 @@ body.mappage {
     /* 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 {
-        height: 99px;
-        padding-top: 18px;
         background: #fff url(logo_portal.x.jpg) top left repeat-x;
     }
     .content {
@@ -187,6 +188,19 @@ body.mappage {
     #zurich-footer {
         display: none;
     }
+
+    #map_sidebar {
+        padding-top: 3em; // make space for the #zurich-main-nav
+    }
+
+    #zurich-main-nav {
+      margin: 0;
+      position: absolute;
+      top: 7em;
+      left: 0;
+      width: 29em; // width of #map_sidebar (including padding)
+      z-index: 1;
+    }
 }
 
 body.twothirdswidthpage {
@@ -224,7 +238,7 @@ body.twothirdswidthpage {
 }
 
 #fms_pan_zoom {
-    top: 9em !important;
+    top: 2em;
 }
 #fms_pan_zoom_zoomin {
     top: 0;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index e089a0bab..f5f5f2934 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -18,6 +18,7 @@ function fixmystreet_update_pin(lonlat) {
             }
             $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show();
             $('#side-form').hide();
+            $('body').removeClass('with-notes');
             return;
         }
         $('#side-form, #site-logo').show();
@@ -72,9 +73,6 @@ function fixmystreet_zoomToBounds(bounds) {
         z = 13;
     }
     fixmystreet.map.setCenter(center, z);
-    if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
-        fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false });
-    }
 }
 
 function fms_markers_list(pins, transform) {
@@ -396,13 +394,10 @@ $(function(){
         }, fixmystreet.map_options)
     );
 
-    // Need to do this here, after the map is created
-    if ($('html').hasClass('mobile')) {
-        if (fixmystreet.page == 'around') {
-            $('#fms_pan_zoom').css({ top: '2.75em' });
-        }
-    } else {
-        $('#fms_pan_zoom').css({ top: '4.75em' });
+    // Need to do this here, after the map is created (might not have been when
+    // resize() called)
+    if ($('html').hasClass('mobile') && fixmystreet.page == 'around') {
+        $('#fms_pan_zoom').css({ top: '2.75em' });
     }
 
     // Set it up our way
@@ -440,10 +435,6 @@ $(function(){
         fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
     }
 
-    if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
-        fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false });
-    }
-
     if (document.getElementById('mapForm')) {
         var click = new OpenLayers.Control.Click();
         fixmystreet.map.addControl(click);
@@ -470,6 +461,8 @@ $(function(){
         fixmystreet.drag.deactivate();
         $('#side-form').hide();
         $('#side').show();
+        $('body').removeClass('with-notes');
+        fixmystreet.map.updateSize(); // required after changing the size of the map element
         $('#sub_map_links').show();
         //only on mobile
         $('#mob_sub_map_links').remove();
@@ -529,12 +522,8 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
             case "zoomin":
             case "zoomout":
             case "zoomworld":
-                var mid_point = 0;
-                if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
-                    mid_point = fixmystreet_midpoint();
-                }
                 var size = this.map.getSize(),
-                    xy = { x: size.w / 2 + mid_point, y: size.h / 2 };
+                    xy = { x: size.w / 2, y: size.h / 2 };
                 switch (btn.action) {
                     case "zoomin":
                         this.map.zoomTo(this.map.getZoom() + 1, xy);
@@ -576,14 +565,6 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink,
         }
 
         var center = this.map.getCenter();
-        if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) {
-            // Translate the permalink co-ords so that 'centre' is accurate
-            var mid_point = fixmystreet_midpoint();
-            var p = this.map.getViewPortPxFromLonLat(center);
-            p.x += mid_point;
-            p.y += 25;
-            center = this.map.getLonLatFromViewPortPx(p);
-        }
 
         var zoom = this.map.getZoom();
         if ( alter_zoom ) {
@@ -738,6 +719,12 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             return;
         }
 
+        // If there are notes to be displayed, add the .with-notes class
+        // to make the sidebar wider.
+        if ($('#report-a-problem-sidebar').length) {
+            $('body').addClass('with-notes');
+        }
+
         /* For some reason on IOS5 if you use the jQuery show method it
          * doesn't display the JS validation error messages unless you do this
          * or you cause a screen redraw by changing the phone orientation.
@@ -746,11 +733,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             document.getElementById('side-form').style.display = 'block';
         }
         $('#side').hide();
-        if (typeof heightFix !== 'undefined') {
-            heightFix('#report-a-problem-sidebar', '.content', 26);
-        }
 
-        fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused.
+        fixmystreet.map.updateSize(); // required after changing the size of the map element
 
         fixmystreet.map.panDuration = 100;
         fixmystreet.map.panTo(lonlat);
diff --git a/web/js/map-google.js b/web/js/map-google.js
index 0e7cd824e..5009bebac 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -119,9 +119,6 @@ function fms_map_clicked(e) {
     }
 
     $('#side').hide();
-    if (typeof heightFix !== 'undefined') {
-        heightFix('#report-a-problem-sidebar', '.content', 26);
-    }
 
     // If we clicked the map somewhere inconvenient
     // TODO
@@ -190,13 +187,6 @@ function fms_map_initialize() {
     paddingDiv.index = 0;
     fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv);
 
-    if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
-        // TODO Work better with window resizing, this is pretty 'set up' only at present
-        var q = fixmystreet_midpoint();
-        // Need to try and fake the 'centre' being 75% from the edge
-        fixmystreet.map.panBy(-q, -25);
-    }
-
     if (document.getElementById('mapForm')) {
         var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked);
     }