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.

27 files changed, 146 insertions, 135 deletions

diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 7bf62e528..337b97b8e 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -7,7 +7,7 @@
         = pc
         ? c.uri_for( "/rss/pc", pc )
         : c.uri_for( "/rss/l/$latitude,$longitude" );
-            
+
     email_url = c.uri_for(
         '/alert/list',
         {
@@ -28,6 +28,7 @@
     );
 
     PROCESS "maps/${map.type}.html" around_page = 1;
+    sidebar_html = PROCESS 'report/new/sidebar.html' js = 1 report.used_map = 1;
 
     SET bodyclass = 'mappage';
     SET rss = [ tprintf(loc('Recent local problems, %s', "%s is the site name"), site_name), rss_url ];
@@ -71,32 +72,32 @@
     </div>
 
 
+    <div id="map_sidebar">
 
-
-    <div id="side">
-
-        [% IF allow_creation %]
+        <div id="side">
+          [% IF allow_creation %]
             [% INCLUDE 'around/_report_banner.html' %]
             [% TRY %][% INCLUDE 'around/extra_text.html' %][% CATCH file %][% END %]
-        [% END %]
-
-        [% INCLUDE 'around/_updates.html' %]
+          [% END %]
+
+          [% INCLUDE 'around/_updates.html' %]
+          <section class="full-width">
+              [% INCLUDE "around/tabbed_lists.html" %]
+          </section>
+        </div>
+
+      [% IF allow_creation %]
+        <div style="display:none" id="side-form">
+        [% INCLUDE "report/new/fill_in_details_form.html"
+            js = 1,
+            report.used_map = 1
+            report.name = c.user.name
+        %]
+        </div>
+      [% END %]
 
-        <section class="full-width">
-            [% INCLUDE "around/tabbed_lists.html" %]
-        </section>
     </div>
 
-    [% IF allow_creation %]
-    <div style="display:none" id="side-form">
-    [% INCLUDE "report/new/fill_in_details_form.html"
-        js = 1,
-        report.used_map = 1
-        report.name = c.user.name
-    %]
-    </div>
-    [% END %]
-
 [% IF allow_creation %]
 </form>
 [% END %]
diff --git a/templates/web/base/header.html b/templates/web/base/header.html
index 7ef37675a..5f4fba1df 100644
--- a/templates/web/base/header.html
+++ b/templates/web/base/header.html
@@ -34,7 +34,6 @@
         <![endif]-->
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/base/my/my.html b/templates/web/base/my/my.html
index c3911d4c1..b56998161 100644
--- a/templates/web/base/my/my.html
+++ b/templates/web/base/my/my.html
@@ -7,9 +7,11 @@
 [% IF problems.size %]
     [% map_html %]
     </div>
-    <div id="side">
+    <div id="map_sidebar">
+        <div id="side">
 [% ELSE %]
-    <div id="skipped-map">
+    <div id="map_sidebar">
+        <div id="skipped-map">
 [% END %]
 
 <h1>[% loc('Your Reports') %]</h1>
@@ -63,6 +65,7 @@
     [% "</ul>" IF loop.last %]
 [% END %]
 
-</div>
+        </div>
+    </div>
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 1068e21e3..312300b9d 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -9,6 +9,8 @@
 
 </div>
 
+<div id="map_sidebar">
+
 <h1>[% loc('Questionnaire') %]</h1>
 
 <h2 class="questionnaire-report-header">[% loc('Your report') %]</h2>
@@ -107,4 +109,6 @@
 
 </form>
 
+</div>
+
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index 05e07d501..e9f0b2914 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -1,4 +1,4 @@
-[% 
+[%
     SET bodyclass = 'mappage';
     PROCESS "report/photo-js.html";
     PROCESS "maps/${map.type}.html";
@@ -13,6 +13,8 @@
 [% map_html %]
 </div>
 
+<div id="map_sidebar">
+
 [% IF login_success %]
     <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p>
     [% INCLUDE 'report/update-form.html' %]
@@ -41,4 +43,6 @@
     [% INCLUDE 'report/update-form.html' %]
 [% END %]
 
+</div>
+
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html
index 55b3a5207..fc272b533 100644
--- a/templates/web/base/report/new/fill_in_details.html
+++ b/templates/web/base/report/new/fill_in_details.html
@@ -1,6 +1,9 @@
 [%
+    sidebar_html = PROCESS 'report/new/sidebar.html';
+
     SET bodyclass = '';
     SET bodyclass = 'mappage' IF report.used_map;
+    SET bodyclass = bodyclass _ " with-notes" IF sidebar_html;
     PROCESS "maps/${map.type}.html" IF report.used_map;
     INCLUDE 'header.html', title => loc('Reporting a problem');
 %]
@@ -25,24 +28,27 @@
     <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% latitude | html %]">
     <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% longitude | html %]">
 
-    [% IF report.used_map %]
-        [% map_html %]
-        </div>
+  [% IF report.used_map %]
+    [% map_html %]
+    </div>
+    <div id="map_sidebar">
         <div id="side">
-    [% ELSE %]
+  [% ELSE %]
+    <div id="map_sidebar">
         <div id="skipped-map">
-    [% END %]
+  [% END %]
+
+            <div id="report-a-problem-main">
+              [% IF login_success %]
+                [% PROCESS 'report/new/login_success_form.html' %]
+              [% ELSIF oauth_need_email %]
+                [% PROCESS 'report/new/oauth_email_form.html' %]
+              [% ELSE %]
+                [% PROCESS 'report/new/fill_in_details_form.html' %]
+              [% END %]
+            </div>
 
-        <div id="report-a-problem-main">
-          [% IF login_success %]
-            [% PROCESS 'report/new/login_success_form.html' %]
-          [% ELSIF oauth_need_email %]
-            [% PROCESS 'report/new/oauth_email_form.html' %]
-          [% ELSE %]
-            [% PROCESS 'report/new/fill_in_details_form.html' %]
-          [% END %]
         </div>
-
     </div>
 </form>
 
diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html
index f9da3753f..663b13e6a 100644
--- a/templates/web/base/report/new/fill_in_details_form.html
+++ b/templates/web/base/report/new/fill_in_details_form.html
@@ -23,7 +23,7 @@
     <p class="form-error">[% loc('Sorry, we could not log you in. Please fill in the form below.') %]</p>
 [% END %]
 
-[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %]
+[% sidebar_html %]
 
 [% INCLUDE 'errors.html' %]
 
diff --git a/templates/web/base/report/new/login_success_form.html b/templates/web/base/report/new/login_success_form.html
index 45d0221a7..2eade7c7d 100644
--- a/templates/web/base/report/new/login_success_form.html
+++ b/templates/web/base/report/new/login_success_form.html
@@ -2,7 +2,7 @@
 
 <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p>
 
-[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %]
+[% sidebar_html %]
 
 [% INCLUDE 'errors.html' %]
 
diff --git a/templates/web/base/report/new/oauth_email_form.html b/templates/web/base/report/new/oauth_email_form.html
index c897aaeea..2c9b1a3ca 100644
--- a/templates/web/base/report/new/oauth_email_form.html
+++ b/templates/web/base/report/new/oauth_email_form.html
@@ -5,7 +5,7 @@
     [% loc('We need your email address, please give it below.') %]
 </p>
 
-[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %]
+[% sidebar_html %]
 
 [% INCLUDE 'errors.html' %]
 
diff --git a/templates/web/base/reports/body.html b/templates/web/base/reports/body.html
index 2ec409765..55f9a0881 100755
--- a/templates/web/base/reports/body.html
+++ b/templates/web/base/reports/body.html
@@ -27,7 +27,8 @@
 [% map_html %]
 
 </div>
-<div id="side">
+<div id="map_sidebar">
+    <div id="side">
 
 <h1 id="reports_heading">
     [% IF ward %]
@@ -66,5 +67,6 @@
 
 [% INCLUDE 'pagination.html', param = 'p' %]
 
+    </div>
 </div>
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/bromley/report/display.html b/templates/web/bromley/report/display.html
index da83e005f..06db8f001 100644
--- a/templates/web/bromley/report/display.html
+++ b/templates/web/bromley/report/display.html
@@ -1,4 +1,4 @@
-[% 
+[%
     PROCESS "report/photo-js.html";
     PROCESS "maps/${map.type}.html";
 
@@ -11,9 +11,10 @@
 %]
 
 [% map_html %]
-
 </div>
 
+<div id="map_sidebar">
+
 [% IF login_success %]
     <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p>
 [% END %]
@@ -107,12 +108,12 @@
                 </select>
             [% ELSE %]
                 [% IF problem.is_fixed AND c.user_exists AND c.user.id == problem.user_id %]
-                
+
                 <input type="checkbox" name="reopen" id="form_reopen" value="1"[% ' checked' IF update.mark_open %]>
                 <label class="inline" for="form_reopen">[% loc('This problem has not been fixed') %]</label>
-                
+
                 [% ELSIF !problem.is_fixed %]
-                
+
                 <div class="checkbox-group">
                     <input type="checkbox" name="fixed" id="form_fixed" value="1"[% ' checked' IF update.mark_fixed %]>
                     <label class="inline" for="form_fixed">[% loc('This problem has been fixed') %]</label>
@@ -124,9 +125,9 @@
         [% IF c.user_exists %]
 
             [% INCLUDE name %]
-            
+
             <input class="final-submit green-btn" type="submit" id="update_post" value="[% loc('Post') %]">
-                
+
 
         [% ELSE %]
 
@@ -146,7 +147,7 @@
                     <h5>Confirm my report by email</h5>
 
                     [% INCLUDE name %]
-                    
+
                     <label for="password_register">[% loc('Password (optional)') %]</label>
 
                     <div class="general-notes">
@@ -185,7 +186,7 @@
     </form>
 </div>
 
-
+</div>
 
 [% INCLUDE 'footer.html' %]
 
diff --git a/templates/web/eastsussex/header.html.template b/templates/web/eastsussex/header.html.template
index d80d4101a..325d1b6e6 100644
--- a/templates/web/eastsussex/header.html.template
+++ b/templates/web/eastsussex/header.html.template
@@ -10,7 +10,6 @@
         <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/layout.css') %]">
     <![endif]-->
 
-    <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/position_map.js') %]" charset="utf-8"></script>
     [% INCLUDE 'common_header_tags.html' %]
     [% extra_js %]
     <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/report-form.js') %]"></script>
diff --git a/templates/web/fiksgatami/header.html b/templates/web/fiksgatami/header.html
index 5bc0eaf4b..b6ca67d24 100644
--- a/templates/web/fiksgatami/header.html
+++ b/templates/web/fiksgatami/header.html
@@ -23,7 +23,6 @@
         <![endif]-->
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/harrogate/header.html b/templates/web/harrogate/header.html
index 451832dda..7ee3a93d2 100644
--- a/templates/web/harrogate/header.html
+++ b/templates/web/harrogate/header.html
@@ -23,7 +23,6 @@
         <![endif]-->
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/hart/header.html b/templates/web/hart/header.html
index 6337aad64..c52ec0af7 100644
--- a/templates/web/hart/header.html
+++ b/templates/web/hart/header.html
@@ -24,21 +24,8 @@
         <![endif]-->
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
-        <script type="text/javascript">
-            $(function(){
-                var $html = $('html');
-                $(window).resize(function(){
-                    if(!$html.hasClass('mobile')) {
-                        // Hart has a bigger header and so needs more room for
-                        // the map controls
-                        $('#fms_pan_zoom').css({ top: '17.75em' });
-                    }
-                }).resize();
-            });
-        </script>
 
         <link rel="Shortcut Icon" type="image/x-icon" href="/cobrands/hart/favicon.ico">
 
diff --git a/templates/web/oxfordshire/header.html b/templates/web/oxfordshire/header.html
index e69757dad..6ad9b8f62 100644
--- a/templates/web/oxfordshire/header.html
+++ b/templates/web/oxfordshire/header.html
@@ -21,7 +21,6 @@
         <![endif]-->
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/oxfordshire/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/seesomething/around/display_location.html b/templates/web/seesomething/around/display_location.html
index b54311264..3ed7cac46 100644
--- a/templates/web/seesomething/around/display_location.html
+++ b/templates/web/seesomething/around/display_location.html
@@ -11,6 +11,7 @@
     );
 
     PROCESS "maps/${map.type}.html";
+    sidebar_html = PROCESS 'report/new/sidebar.html', js = 1, report.used_map = 1;
 
     INCLUDE 'header.html',
         title  => loc('Viewing a location')
@@ -29,19 +30,20 @@
     <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% longitude | html %]">
 
     [% map_html %]
-
     </div>
 
-    <div id="side">
+    <div id="map_sidebar">
+        <div id="side">
             [% INCLUDE 'around/_report_banner.html' %]
-    </div>
-
-    <div style="display:none" id="side-form">
-    [% INCLUDE "report/new/fill_in_details_form.html"
-        js = 1,
-        report.used_map = 1
-        report.name = c.user.name
-    %]
+        </div>
+
+        <div style="display:none" id="side-form">
+        [% INCLUDE "report/new/fill_in_details_form.html"
+            js = 1,
+            report.used_map = 1
+            report.name = c.user.name
+        %]
+        </div>
     </div>
 
 </form>
diff --git a/templates/web/seesomething/tokens/confirm_problem.html b/templates/web/seesomething/tokens/confirm_problem.html
index 4a11d14b4..0a455434b 100644
--- a/templates/web/seesomething/tokens/confirm_problem.html
+++ b/templates/web/seesomething/tokens/confirm_problem.html
@@ -11,19 +11,23 @@
 %]
 
 
-    [% IF report.used_map %]
+[% IF report.used_map %]
     [% map_html %]
-
     </div>
-    [% END %]
+    <div id="map_sidebar">
+[% END %]
+
+        <div id="side">
+            <div id="report-a-problem-main">
+                <h1>Complete</h1>
+                <p>Your report has been sent. If you included contact details we may be in touch to follow up or request more details.</p>
+                <p>Thank you for saying something and making our transport safer.</p>
+                <p><img src="../cobrands/seesomething/images/btp-wmp-logos.png" alt="British Transport Police and the West Midlands Police" width="271" height="116"></p>
+            </div>
+        </div>
 
-    <div id="side">
-<div id="report-a-problem-main">
-    <h1>Complete</h1>
-    <p>Your report has been sent. If you included contact details we may be in touch to follow up or request more details.</p>
-    <p>Thank you for saying something and making our transport safer.</p>
-    <p><img src="../cobrands/seesomething/images/btp-wmp-logos.png" alt="British Transport Police and the West Midlands Police" width="271" height="116"></p>
-</div>
+[% IF report.used_map %]
     </div>
+[% END %]
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/stevenage/header.html b/templates/web/stevenage/header.html
index ffcc9ec86..1f124f5aa 100644
--- a/templates/web/stevenage/header.html
+++ b/templates/web/stevenage/header.html
@@ -19,7 +19,6 @@
         <![endif]-->
 
         <script src="[% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/warwickshire/header.html b/templates/web/warwickshire/header.html
index c6d2bc048..b76ecc2ae 100644
--- a/templates/web/warwickshire/header.html
+++ b/templates/web/warwickshire/header.html
@@ -27,7 +27,6 @@
     <![endif]-->
 
     <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-    <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/position_map.js') %]" charset="utf-8"></script>
 
     [% INCLUDE 'common_header_tags.html' %]
 
diff --git a/templates/web/zurich/admin/header.html b/templates/web/zurich/admin/header.html
index 929df8352..a423cf22f 100644
--- a/templates/web/zurich/admin/header.html
+++ b/templates/web/zurich/admin/header.html
@@ -23,7 +23,6 @@
     .overdue { background-color: #ffcccc; }
     select { width: auto; }
     .admin-report-edit select { max-width: 100%; }
-    #fms_pan_zoom { top: 13em !important; }
 </style>
 <script>
 $(function(){
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index a0ff1038d..cac89763d 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -10,6 +10,8 @@
 [% map_html %]
 </div>
 
+<div id="map_sidebar">
+
 <form method="post" action="[% c.uri_for( 'report_edit', problem.id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
     <input type="hidden" name="token" value="[% token %]" >
     <input type="hidden" name="submit" value="1" >
@@ -143,6 +145,8 @@
 </div>
 </form>
 
+</div>
+
 <div id="print_report_map" class="print-only">
 [% INCLUDE 'maps/noscript_map.html' map=print_report_map nsm_prefix="large_" %]
 </div>
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index dd876935c..512ea4708 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -10,6 +10,8 @@
 [% map_html %]
 </div>
 
+<div id="map_sidebar">
+
 [% pstate = problem.get_extra_metadata('closure_status') || problem.state %]
 
 <form id="report_edit" method="post" action="[% c.uri_for( 'report_edit', problem.id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
@@ -296,6 +298,8 @@
 
 </form>
 
+</div>
+
 <script type="text/javascript">
 $(function(){
     var form_fields_changed = false;
diff --git a/templates/web/zurich/header.html b/templates/web/zurich/header.html
index ee00b851c..b87dd913b 100644
--- a/templates/web/zurich/header.html
+++ b/templates/web/zurich/header.html
@@ -23,7 +23,6 @@
         <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css">
 
         <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
-        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html' %]
         [% extra_js %]
 
diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html
index 1e9db6b31..21acab609 100644
--- a/templates/web/zurich/report/new/fill_in_details_form.html
+++ b/templates/web/zurich/report/new/fill_in_details_form.html
@@ -1,33 +1,8 @@
+[% sidebar_html %]
+
 <div id="report-a-problem-main">
     <h1>[% loc('Reporting a problem') %]</h1>
 
-    <div id="report-a-problem-sidebar">
-        <!--
-            The text for this section needs checking, but I can't work out which bit comes from where
-        -->
-        <div class="sidebar-tips">
-            [% IF report.used_map %]
-                [% IF partial_token %]
-                    <p id="unknown">[% loc('Please note your report has <strong>not yet been sent</strong>. Choose a category and add further information below, then submit.') %]</p>
-                [% END %]
-            <p>[% loc('You have located the problem at the point marked with a green pin on the map. If this is not the correct location, simply click on the map again. ') %]</p>
-            [% END %]
-
-            <p>
-            [% IF report.used_map %]
-                [% INCLUDE 'report/new/fill_in_details_text.html' %]
-            [% ELSE %]
-                [% loc('Please fill in the form below with details of the problem, and describe the location as precisely as possible in the details box.') %]
-            [% END %]
-            </p>
-        </div>
-
-        <div class="sidebar-notes">
-            [% INCLUDE 'report/new/notes.html' %]
-        </div>
-
-    </div>
-
     [% INCLUDE 'errors.html' %]
     <fieldset>
         <div id="problem_form">
diff --git a/templates/web/zurich/report/new/sidebar.html b/templates/web/zurich/report/new/sidebar.html
new file mode 100644
index 000000000..2e3d148d2
--- /dev/null
+++ b/templates/web/zurich/report/new/sidebar.html
@@ -0,0 +1,22 @@
+<div id="report-a-problem-sidebar">
+    <div class="sidebar-tips">
+        [% IF report.used_map %]
+            [% IF partial_token %]
+                <p id="unknown">[% loc('Please note your report has <strong>not yet been sent</strong>. Choose a category and add further information below, then submit.') %]</p>
+            [% END %]
+        <p>[% loc('You have located the problem at the point marked with a green pin on the map. If this is not the correct location, simply click on the map again. ') %]</p>
+        [% END %]
+
+        <p>
+        [% IF report.used_map %]
+            [% INCLUDE 'report/new/fill_in_details_text.html' %]
+        [% ELSE %]
+            [% loc('Please fill in the form below with details of the problem, and describe the location as precisely as possible in the details box.') %]
+        [% END %]
+        </p>
+    </div>
+
+    <div class="sidebar-notes">
+        [% INCLUDE 'report/new/notes.html' %]
+    </div>
+</div>
diff --git a/templates/web/zurich/reports/index.html b/templates/web/zurich/reports/index.html
index fd0efcf94..5f7613a1c 100755
--- a/templates/web/zurich/reports/index.html
+++ b/templates/web/zurich/reports/index.html
@@ -7,24 +7,25 @@
 [% map_html %]
 </div>
 
-<div id="side">
+<div id="map_sidebar">
+    <div id="side">
 
-<h1>[% loc('All Reports') %]</h1>
+        <h1>[% loc('All Reports') %]</h1>
 
-[% INCLUDE 'pagination.html', param = 'p' %]
+        [% INCLUDE 'pagination.html', param = 'p' %]
 
-<section class="full-width">
-  [% IF problems.0 %]
-    <ul class="item-list item-list--reports">
-      [% FOREACH problem IN problems.0 %]
-        [% INCLUDE 'reports/_list-entry.html' %]
-      [% END %]
-    </ul>
-  [% END %]
-</section>
+        <section class="full-width">
+          [% IF problems.0 %]
+            <ul class="item-list item-list--reports">
+              [% FOREACH problem IN problems.0 %]
+                [% INCLUDE 'reports/_list-entry.html' %]
+              [% END %]
+            </ul>
+          [% END %]
+        </section>
 
-[% INCLUDE 'pagination.html', param = 'p' %]
+        [% INCLUDE 'pagination.html', param = 'p' %]
 
+    </div>
 </div>
 [% INCLUDE 'footer.html' %]
-