Merge branch 'issues/forcouncils/36-mobile-inspector-improvements'

57 files changed, 680 insertions, 441 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index d56521fde..db3b16dcd 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -311,8 +311,9 @@ sub inspect : Private {
     my $problem = $c->stash->{problem};
 
     $c->stash->{categories} = $c->forward('/admin/categories_for_point');
+    $c->stash->{report_meta} = { map { $_->{name} => $_ } @{ $c->stash->{problem}->get_extra_fields() } };
 
-    if ( $c->get_param('save') || $c->get_param('save_inspected') ) {
+    if ( $c->get_param('save') ) {
         $c->forward('/auth/check_csrf_token');
 
         my $valid = 1;
@@ -320,7 +321,7 @@ sub inspect : Private {
         my $reputation_change = 0;
 
         if ($permissions->{report_inspect}) {
-            foreach (qw/detailed_location detailed_information traffic_information/) {
+            foreach (qw/detailed_information traffic_information/) {
                 $problem->set_extra_metadata( $_ => $c->get_param($_) );
             }
 
@@ -363,6 +364,14 @@ sub inspect : Private {
 
         if ($permissions->{report_inspect} || $permissions->{report_edit_category}) {
             $c->forward( '/admin/report_edit_category', [ $problem ] );
+
+            # The new category might require extra metadata (e.g. pothole size), so
+            # we need to update the problem with the new values.
+            my $param_prefix = lc $problem->category;
+            $param_prefix =~ s/[^a-z]//g;
+            $param_prefix = "category_" . $param_prefix . "_";
+            my @contacts = grep { $_->category eq $problem->category } @{$c->stash->{contacts}};
+            $c->forward('/report/new/set_report_extras', [ \@contacts, $param_prefix ]);
         }
 
         if ($valid) {
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index f26120829..7766e08a1 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -849,33 +849,11 @@ sub process_report : Private {
             $report->bodies_missing($missing);
         }
 
-        my @extra;
-        foreach my $contact (@contacts) {
-            my $metas = $contact->get_metadata_for_input;
-            foreach my $field ( @$metas ) {
-                if ( lc( $field->{required} ) eq 'true' ) {
-                    unless ( $c->get_param($field->{code}) ) {
-                        $c->stash->{field_errors}->{ $field->{code} } = _('This information is required');
-                    }
-                }
-                push @extra, {
-                    name => $field->{code},
-                    description => $field->{description},
-                    value => $c->get_param($field->{code}) || '',
-                };
-            }
-        }
+        $c->forward('set_report_extras', [ \@contacts ]);
 
         if ( $c->stash->{non_public_categories}->{ $report->category } ) {
             $report->non_public( 1 );
         }
-
-        $c->cobrand->process_open311_extras( $c, $contacts[0]->body_id, \@extra );
-
-        if ( @extra ) {
-            $c->stash->{report_meta} = { map { $_->{name} => $_ } @extra };
-            $report->set_extra_fields( @extra );
-        }
     } elsif ( @{ $c->stash->{bodies_to_list} } ) {
 
         # There was an area with categories, but we've not been given one. Bail.
@@ -927,6 +905,36 @@ sub contacts_to_bodies : Private {
     }
 }
 
+sub set_report_extras : Private {
+    my ($self, $c, $contacts, $param_prefix) = @_;
+
+    $param_prefix ||= "";
+    my @extra;
+    foreach my $contact (@$contacts) {
+        my $metas = $contact->get_metadata_for_input;
+        foreach my $field ( @$metas ) {
+            if ( lc( $field->{required} ) eq 'true' ) {
+                unless ( $c->get_param($param_prefix . $field->{code}) ) {
+                    $c->stash->{field_errors}->{ $field->{code} } = _('This information is required');
+                }
+            }
+            push @extra, {
+                name => $field->{code},
+                description => $field->{description},
+                value => $c->get_param($param_prefix . $field->{code}) || '',
+            };
+        }
+    }
+
+    $c->cobrand->process_open311_extras( $c, @$contacts[0]->body_id, \@extra )
+        if ( scalar @$contacts );
+
+    if ( @extra ) {
+        $c->stash->{report_meta} = { map { $_->{name} => $_ } @extra };
+        $c->stash->{report}->set_extra_fields( @extra );
+    }
+}
+
 =head2 check_for_errors
 
 Examine the user and the report for errors. If found put them on stash and
diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index 54c39ffb9..122a5d0c9 100644
--- a/perllib/FixMyStreet/TestMech.pm
+++ b/perllib/FixMyStreet/TestMech.pm
@@ -282,6 +282,16 @@ sub get_first_email {
     return $email_as_string;
 }
 
+=head2 contains_or_lacks
+
+Based upon boolean FLAG, checks that content contains or lacks TEXT.
+
+=cut
+
+sub contains_or_lacks {
+    my ($mech, $flag, $text) = @_;
+    $flag ? $mech->content_contains($text) : $mech->content_lacks($text);
+}
 
 =head2 page_errors
 
diff --git a/t/app/controller/report_inspect.t b/t/app/controller/report_inspect.t
index 393a8beb2..831959fff 100644
--- a/t/app/controller/report_inspect.t
+++ b/t/app/controller/report_inspect.t
@@ -46,29 +46,21 @@ FixMyStreet::override_config {
     };
 
     subtest "test basic inspect submission" => sub {
-        $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Lots', state => 'Planned' } });
+        $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Yes', state => 'Planned' } });
         $report->discard_changes;
         is $report->state, 'planned', 'report state changed';
-        is $report->get_extra_metadata('traffic_information'), 'Lots', 'report data changed';
+        is $report->get_extra_metadata('traffic_information'), 'Yes', 'report data changed';
     };
 
     subtest "test inspect & instruct submission" => sub {
         $report->unset_extra_metadata('inspected');
         $report->update;
+        my $reputation = $report->user->get_extra_metadata("reputation");
         $mech->get_ok("/report/$report_id/inspect");
-        $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => "This is a public update." } });
+        $mech->submit_form_ok({ button => 'save', with_fields => { public_update => "This is a public update.", save_inspected => "1" } });
         $report->discard_changes;
         is $report->comments->first->text, "This is a public update.", 'Update was created';
         is $report->get_extra_metadata('inspected'), 1, 'report marked as inspected';
-    };
-
-    subtest "test positive reputation" => sub {
-        $report->unset_extra_metadata('inspected');
-        $report->update;
-        my $reputation = $report->user->get_extra_metadata("reputation");
-        $mech->get_ok("/report/$report_id/inspect");
-        $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => "This is a public update." } });
-        $report->discard_changes;
         is $report->user->get_extra_metadata('reputation'), $reputation+1, "User reputation was increased";
     };
 
@@ -77,7 +69,7 @@ FixMyStreet::override_config {
         $report->update;
         $report->comments->delete_all;
         $mech->get_ok("/report/$report_id/inspect");
-        $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => undef } });
+        $mech->submit_form_ok({ button => 'save', with_fields => { public_update => undef, save_inspected => "1" } });
         is_deeply $mech->page_errors, [ "Please provide a public update for this report." ], 'errors match';
         $report->discard_changes;
         is $report->comments->count, 0, "Update wasn't created";
@@ -101,10 +93,10 @@ FixMyStreet::override_config {
             $user->user_body_permissions->delete;
             $user->user_body_permissions->create({ body => $oxon, permission_type => $test->{type} });
             $mech->get_ok("/report/$report_id/inspect");
-            has_or_lacks($test->{priority}, 'Priority');
-            has_or_lacks($test->{priority}, 'High');
-            has_or_lacks($test->{category}, 'Category');
-            has_or_lacks($test->{detailed}, 'Detailed problem information');
+            $mech->contains_or_lacks($test->{priority}, 'Priority');
+            $mech->contains_or_lacks($test->{priority}, 'High');
+            $mech->contains_or_lacks($test->{category}, 'Category');
+            $mech->contains_or_lacks($test->{detailed}, 'Extra details');
             $mech->submit_form_ok({
                 button => 'save',
                 with_fields => {
@@ -138,8 +130,3 @@ END {
     $mech->delete_body($brum);
     done_testing();
 }
-
-sub has_or_lacks {
-    my ($flag, $text) = @_;
-    $flag ? $mech->content_contains($text) : $mech->content_lacks($text);
-}
diff --git a/t/cobrand/zurich.t b/t/cobrand/zurich.t
index 53d8dba0f..1ea55b003 100644
--- a/t/cobrand/zurich.t
+++ b/t/cobrand/zurich.t
@@ -936,8 +936,8 @@ subtest 'Status update shown as appropriate' => sub {
             my ($state, $update, $public, $user_response) = @$_;
             $report->update({ state => $state });
             $mech->get_ok( '/admin/report_edit/' . $report->id );
-            contains_or_lacks($mech, $update, "<textarea name='status_update'");
-            contains_or_lacks($mech, $public || $user_response, '<div class="admin-official-answer">');
+            $mech->contains_or_lacks($update, "name='status_update'");
+            $mech->contains_or_lacks($public || $user_response, '<div class="admin-official-answer">');
 
             if ($public) {
                 $mech->get_ok( '/report/' . $report->id );
@@ -947,17 +947,6 @@ subtest 'Status update shown as appropriate' => sub {
     };
 };
 
-# TODO refactor into FixMyStreet::TestMech;
-sub contains_or_lacks {
-    my ($mech, $contains, $text) = @_;
-    if ($contains) {
-        $mech->content_contains($text);
-    }
-    else {
-        $mech->content_lacks($text);
-    }
-}
-
 subtest 'time_spent' => sub {
     FixMyStreet::override_config {
         ALLOWED_COBRANDS => [ 'zurich' ],
diff --git a/templates/web/base/admin/body-form.html b/templates/web/base/admin/body-form.html
index 13e688097..303afb682 100644
--- a/templates/web/base/admin/body-form.html
+++ b/templates/web/base/admin/body-form.html
@@ -22,7 +22,7 @@
     </div>
     <p>
         <label for="name">[% loc('Name') %]</label>
-        <input type="text" name="name" id="name" value="[% body.name | html %]" size="50">
+        <input type="text" class="form-control" name="name" id="name" value="[% body.name | html %]" size="50">
     </p>
 
     <div class="admin-hint">
@@ -35,7 +35,7 @@
     </div>
     <p>
         <label for="parent">[% loc('Parent') %]</label>
-        <select name="parent" id="parent">
+        <select class="form-control" name="parent" id="parent">
             <option value=""> -- [% loc('Select a body') %] -- </option>
             [% FOR b IN bodies %]
             <option value="[% b.id %]"[% ' selected' IF body.parent.id == b.id %]>[% b.name %]</option>
@@ -73,7 +73,7 @@
     </div>
     <p>
         <label for="area_ids">[% loc('Area covered') %]</label>
-        <select name="area_ids" id="area_ids" multiple>
+        <select class="form-control" name="area_ids" id="area_ids" multiple>
             <option value=""> -- [% loc('Select an area') %] -- </option>
             [% SET body_areas = body.areas %]
             [% FOR area IN areas %]
@@ -85,7 +85,7 @@
 
     <p>
         <label for="external_url">[% loc('External URL') %]</label>
-        <input type="text" name="external_url" id="external_url" value="[% body.external_url | html %]" size="50">
+        <input type="text" class="form-control" name="external_url" id="external_url" value="[% body.external_url | html %]" size="50">
     </p>
     <div class="admin-hint">
       <p>[% loc( "You can mark a body as deleted if you do not want it to be active on the site." ) %]</p>
@@ -105,7 +105,7 @@
     </div>
     <p>
         <label for="send_method">Send Method</label>
-        <select name="send_method" id="send_method">
+        <select class="form-control" name="send_method" id="send_method">
             <option value=""> -- Select a method -- </option>
             [% FOR method IN send_methods %]
             <option value="[% method %]"[% ' selected' IF body.send_method == method %]>[% method %]</option>
@@ -118,7 +118,7 @@
         [% loc(
           "These settings are for bodies that use Open311 (or other back-end integration) to receive problem reports.<br>
            <strong>You don't need to set them if the Send Method is email.</strong>.
-           For more information on Open311, see 
+           For more information on Open311, see
            <a href='https://www.mysociety.org/2013/01/17/open311-explained/' class='admin-offsite-link'>this article</a>.
            "
         ) %]
@@ -127,14 +127,14 @@
       <div class="admin-hint">
         <p>
           [% loc(
-            "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to 
+            "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to
             when sending reports to this body."
           ) %]
         </p>
       </div>
     <p>
         <label for="endpoint">[% loc('Endpoint') %]</label>
-        <input type="text" name="endpoint" id="endpoint" value="[% body.endpoint | html %]" size="50">
+        <input type="text" class="form-control" name="endpoint" id="endpoint" value="[% body.endpoint | html %]" size="50">
     </p>
 
     <div class="admin-hint">
@@ -147,7 +147,7 @@
     </div>
     <p>
         <label for="jurisdiction">Open311 Jurisdiction</label>
-        <input type="text" name="jurisdiction" id="jurisdiction" value="[% body.jurisdiction | html %]" size="50">
+        <input type="text" class="form-control" name="jurisdiction" id="jurisdiction" value="[% body.jurisdiction | html %]" size="50">
     </p>
 
     <div class="admin-hint">
@@ -160,7 +160,7 @@
     </div>
     <p>
         <label for="api_key">Open311 API Key</label>
-        <input type="text" name="api_key" id="api_key" value="[% body.api_key | html %]" size="25">
+        <input type="text" class="form-control" name="api_key" id="api_key" value="[% body.api_key | html %]" size="25">
     </p>
 
     <div class="admin-hint">
@@ -168,7 +168,7 @@
         [% loc(
           "Enable <strong>Open311 update-sending</strong> if the endpoint will send and receive
           updates to existing reports. If you're not sure, it probably does not, so leave this unchecked.
-          For more information, see 
+          For more information, see
           <a href='https://www.mysociety.org/2013/02/20/open311-extended/' class='admin-offsite-link'>this article</a>."
         ) %]
       </p>
@@ -181,7 +181,7 @@
     <div class="admin-hint">
       <p>
         [% loc(
-          "If you've enabled Open311 update-sending above, you must identify which 
+          "If you've enabled Open311 update-sending above, you must identify which
           FixMyStreet <strong>user</strong> will be attributed as the creator of those updates
           when they are shown on the site. Enter the ID (number) of that user."
         ) %]
@@ -198,7 +198,7 @@
     <div class="admin-hint">
       <p>
         [% loc(
-          "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong> 
+          "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong>
           if you do <strong>not</strong> want that user to be notified whenever these updates are created."
         ) %]
       </p>
@@ -211,7 +211,7 @@
     <div class="admin-hint">
       <p>
         [% loc(
-          "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in 
+          "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in
           its updates. Enable <strong>extended Open311 stauses</strong> if you want to allow extra states to be passed.
           Check that your cobrand supports this feature before switching it on."
         ) %]
@@ -222,11 +222,11 @@
         <label for="send_extended_statuses" class="inline">Send extended Open311 statuses with service request updates</label>
     </p>
     </div>
-    
+
     <div class="admin-hint">
       <p>
         [% loc(
-          "Enable this <strong>can be devolved</strong> setting if one or more contacts have a 
+          "Enable this <strong>can be devolved</strong> setting if one or more contacts have a
           different endpoint (and send method) from the body's. For example, if reports for some categories of
           problem must be emailed, while others can be sent over Open311."
         ) %]
@@ -239,11 +239,11 @@
         <input type="checkbox" id="can_be_devolved" name="can_be_devolved"[% ' checked' IF body.can_be_devolved %]>
         <label for="can_be_devolved" class="inline">Send method or endpoints can be devolved to contacts (i.e, can be different from the body's)</label>
     </p>
-    
+
     <p>
     <input type="hidden" name="posted" value="body">
     <input type="hidden" name="token" value="[% csrf_token %]">
-    <input type="submit" value="[% body ? loc('Update body') : loc('Add body') %]">
+    <input type="submit" class="btn" value="[% body ? loc('Update body') : loc('Add body') %]">
     </p>
     </form>
 
diff --git a/templates/web/base/admin/body.html b/templates/web/base/admin/body.html
index 6d23c1458..065cafe2d 100644
--- a/templates/web/base/admin/body.html
+++ b/templates/web/base/admin/body.html
@@ -102,12 +102,12 @@
   <p>
     <input type="hidden" name="posted" value="update">
     <input type="hidden" name="token" value="[% csrf_token %]">
-    <input type="submit" name="Update statuses" value="[% loc('Update statuses') %]">
+    <input type="submit" class="btn" name="Update statuses" value="[% loc('Update statuses') %]">
   </p>
 </form>
 
 <p class="fms-admin-info">
-    [% loc("Each contact for the body has a category, which is displayed to the public. 
+    [% loc("Each contact for the body has a category, which is displayed to the public.
             Different categories <strong>can have the same contact</strong> (email address).
             This means you can add many categories even if you only have one contact for the body.
     ") %]
@@ -138,12 +138,12 @@
         </p>
       </div>
       <p>
-        <strong>[% loc('Category:') %] </strong><input type="text" name="category" size="30" value="[% contact.category | html %]">
+        <strong>[% loc('Category:') %] </strong><input type="text" class="form-control" name="category" size="30" value="[% contact.category | html %]">
       </p>
 
     <div class="admin-hint">
       <p>
-        [% loc("The <strong>email address</strong> is the destination to which reports about this category will be sent. 
+        [% loc("The <strong>email address</strong> is the destination to which reports about this category will be sent.
         Other categories for this body may have the same email address.") %]
       </p>
       [% IF (body.send_method AND body.send_method != 'Email') OR body.can_be_devolved  %]
@@ -154,7 +154,7 @@
     </div>
 
     <p>
-      <strong>[% loc('Email address:') %] </strong><input type="text" name="email" size="30" value="[% contact.email | html %]">
+      <strong>[% loc('Email address:') %] </strong><input type="text" class="form-control" name="email" size="30" value="[% contact.email | html %]">
     </p>
 
     <div class="admin-hint">
@@ -170,7 +170,7 @@
 
     <div class="admin-hint">
       <p>
-        [% loc("Check <strong>deleted</strong> to remove the category from use. 
+        [% loc("Check <strong>deleted</strong> to remove the category from use.
         It will not appear as an available category in the drop-down menu on the report-a-problem page.") %]
       </p>
     </div>
@@ -217,7 +217,7 @@
     <p>
       <input type="hidden" name="posted" value="new" >
       <input type="hidden" name="token" value="[% csrf_token %]" >
-      <input type="submit" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]" >
+      <input type="submit" class="btn" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]" >
     </p>
 
     <div>
diff --git a/templates/web/base/admin/category_edit.html b/templates/web/base/admin/category_edit.html
index 05fa2ca4e..7cc45f80f 100644
--- a/templates/web/base/admin/category_edit.html
+++ b/templates/web/base/admin/category_edit.html
@@ -25,12 +25,12 @@
     <input type="hidden" name="token" value="[% csrf_token %]" >
 
     <p><strong>[% loc('Email:') %] </strong>
-    <input type="text" name="email" value="[% contact.email | html %]" size="30"> 
+    <input type="text" class="form-control" name="email" value="[% contact.email | html %]" size="30">
 
     <p>
       [% IF c.cobrand.moniker != 'zurich' %]
         <input type="checkbox" name="confirmed" value="1" id="confirmed"[% ' checked' IF contact.confirmed %]>
-        <label class="inline" for="confirmed">[% loc('Confirmed' ) %]</label> 
+        <label class="inline" for="confirmed">[% loc('Confirmed' ) %]</label>
       [% ELSE %]
         <input type="hidden" name="confirmed" value="1">
       [% END %]
@@ -63,22 +63,22 @@
     <form method="post" action="[% c.uri_for('body', body_id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
     <p>
         <label for="endpoint">Endpoint</label>
-        <input type="text" name="endpoint" id="endpoint" value="[% contact.endpoint | html %]" size="50">
+        <input type="text" class="form-control" name="endpoint" id="endpoint" value="[% contact.endpoint | html %]" size="50">
     </p>
 
     <p>
         <label for="jurisdiction">Jurisdiction</label>
-        <input type="text" name="jurisdiction" id="jurisdiction" value="[% contact.jurisdiction | html %]" size="50">
+        <input type="text" class="form-control" name="jurisdiction" id="jurisdiction" value="[% contact.jurisdiction | html %]" size="50">
     </p>
 
     <p>
         <label for="api_key">Api Key</label>
-        <input type="text" name="api_key" id="api_key" value="[% contact.api_key | html %]" size="25">
+        <input type="text" class="form-control" name="api_key" id="api_key" value="[% contact.api_key | html %]" size="25">
     </p>
 
     <p>
         <label for="send_method">Send Method</label>
-        <select name="send_method">
+        <select class="form-control" name="send_method">
             <option value=""> -- Select a method -- </option>
             [% FOR method IN send_methods %]
             <option value="[% method %]"[% ' selected' IF contact.send_method == method %]>[% method %]</option>
@@ -88,7 +88,7 @@
     [% END %]
 
     <input type="hidden" name="posted" value="new">
-    <p><input type="submit" name="Save changes" value="[% loc('Save changes') %]">
+    <p><input type="submit" class="btn" name="Save changes" value="[% loc('Save changes') %]">
 </form>
 
 [% IF contact.extra %]
diff --git a/templates/web/base/admin/index.html b/templates/web/base/admin/index.html
index beb4dad7f..f573f0e7a 100644
--- a/templates/web/base/admin/index.html
+++ b/templates/web/base/admin/index.html
@@ -22,18 +22,18 @@ and to receive notices of updates.
 
 <form method="get" action="[% c.uri_for('reports') %]" accept-charset="utf-8">
     <p><label for="search_reports">[% loc('Search Reports') %]</label>
-        <input type="text" name="search"  size="30" id="search_reports" value="[% searched | html %]">
+        <input type="text" class="form-control" name="search"  size="30" id="search_reports" value="[% searched | html %]">
 </form>
 
 <form method="get" action="[% c.uri_for('users') %]" accept-charset="utf-8">
     <p><label for="search_users">[% loc('Search Users') %]</label>
-        <input type="text" name="search"  size="30" id="search_users" value="[% searched | html %]">
+        <input type="text" class="form-control" name="search"  size="30" id="search_users" value="[% searched | html %]">
 </form>
 
 [% IF c.user.is_superuser %]
   <form method="get" action="[% c.uri_for('bodies') %]">
   <label for="search_body">[% loc('Edit body details') %]</label>
-  <select id="search_body" name="body">
+  <select class="form-control" id="search_body" name="body">
   [% FOREACH body IN bodies %]
     [%- SET id = body.id %]
       <option[% IF body.deleted %] class="adminhidden"[% END %] value="[% body.id %]">
@@ -42,7 +42,7 @@ and to receive notices of updates.
       </option>
   [% END %]
   </select>
-  <input type="submit" value="[% loc('Go') %]">
+  <input type="submit" class="btn" value="[% loc('Go') %]">
   </form>
 [% END %]
 
diff --git a/templates/web/base/admin/report_blocks.html b/templates/web/base/admin/report_blocks.html
index 941bff821..3561d865d 100644
--- a/templates/web/base/admin/report_blocks.html
+++ b/templates/web/base/admin/report_blocks.html
@@ -38,12 +38,12 @@ SET state_groups = [
 
 [% BLOCK abuse_button -%]
 [% IF allowed_pages.abuse_edit -%]
-[% IF email_in_abuse %]<small>[% loc('(Email in abuse table)') %]</small>[% ELSE %]<input type="submit" name="banuser" value="[% loc('Ban email address') %]" />[% END %]
+[% IF email_in_abuse %]<small>[% loc('(Email in abuse table)') %]</small>[% ELSE %]<input type="submit" class="btn" name="banuser" value="[% loc('Ban email address') %]" />[% END %]
 [%- END %]
 [%- END %]
 
 [% BLOCK flag_button -%]
-[% IF user.flagged || user_flagged %]<input type="submit" name="removeuserflag" value="[% loc('Remove flag') %]">[% ELSE %]<input type="submit" name="flaguser" value="[% loc('Flag user') %]" />[% END %]
+[% IF user.flagged || user_flagged %]<input type="submit" class="btn" name="removeuserflag" value="[% loc('Remove flag') %]">[% ELSE %]<input type="submit" class="btn" name="flaguser" value="[% loc('Flag user') %]" />[% END %]
 [%- END %]
 
 [%# note: date format here (i.e., dd.mm.YYYY) currently used by Zurich %]
diff --git a/templates/web/base/admin/report_edit.html b/templates/web/base/admin/report_edit.html
index 96e59d1c4..02e75563c 100644
--- a/templates/web/base/admin/report_edit.html
+++ b/templates/web/base/admin/report_edit.html
@@ -21,7 +21,7 @@
 
 <div class="sidebar">
 
-    <p align="center"><input type="submit" name="Submit changes" value="[% loc('Submit changes') %]"></p>
+    <p align="center"><input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]"></p>
 
     <ul>
     [%- cobrand_data = problem.cobrand_data;
@@ -81,9 +81,9 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
     ([% problem.send_method_used %])
   [% END %]
   [% IF problem.state == 'confirmed' AND problem.whensent %]
-    <input data-confirm="[% loc('Are you sure?') %]" type="submit" name="resend" value="[% loc('Resend report') %]">
+    <input data-confirm="[% loc('Are you sure?') %]" class="btn" type="submit" name="resend" value="[% loc('Resend report') %]">
   [% ELSIF NOT problem.whensent %]
-    <input type="submit" name="mark_sent" value="[% loc('Mark as sent') %]">
+    <input type="submit" class="btn" name="mark_sent" value="[% loc('Mark as sent') %]">
   [% END %]
 </li>
 <li class="sm">[% loc('Last update:') %] [% PROCESS format_time time=problem.lastupdate %]</li>
@@ -95,11 +95,11 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
 <li>[% loc('Going to send questionnaire?') %] [% IF problem.send_questionnaire %][% loc('Yes') %][% ELSE %][% loc('No') %][% END %]</li>
 
 <li><label for="external_id">[% loc('External ID') %]:</label>
-    <input type="text" name="external_id" id="external_id" value="[% problem.external_id | html %]">
+    <input type="text" class="form-control" name="external_id" id="external_id" value="[% problem.external_id | html %]">
 <li><label for="external_body">[% loc('External body') %]:</label>
-    <input type="text" name="external_body" body="external_body" value="[% problem.external_body | html %]">
+    <input type="text" class="form-control" name="external_body" body="external_body" value="[% problem.external_body | html %]">
 <li><label for="external_team">[% loc('External team') %]:</label>
-    <input type="text" name="external_team" team="external_team" value="[% problem.external_team | html %]">
+    <input type="text" class="form-control" name="external_team" team="external_team" value="[% problem.external_team | html %]">
 
 </ul>
 </div>
@@ -108,12 +108,12 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
 
 <ul class="plain-list">
 <li><label for='title'>[% loc('Subject:') %]</label>
-    <input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></li>
+    <input size=60 type='text' class="form-control" id='title' name='title' value='[% problem.title | html %]'></li>
 <li><label for='detail'>[% loc('Details:') %]</label>
-<textarea name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li>
+<textarea class="form-control" name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li>
 
 <li><label class="inline-text" for="state">[% loc('State:') %]</label>
-<select name="state"  id="state">
+<select class="form-control" name="state"  id="state">
 [% FOREACH group IN state_groups %]
     <optgroup label="[% group.0 %]">
     [% FOREACH state IN group.1 %]
@@ -123,7 +123,7 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
 [% END %]
 </select></li>
 <li><label class="inline-text" for="category">[% loc('Category:') %]</label>
-<select name="category" id="category">
+<select class="form-control" name="category" id="category">
   [% IF NOT problem.category OR NOT categories.grep(problem.category).size %]
   <optgroup label="[% loc('Existing category') %]">
     <option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option>
@@ -138,14 +138,14 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
   [% END %]
 </select></li>
 <li><label class="inline-text" for="anonymous">[% loc('Anonymous:') %]</label>
-<select name="anonymous"  id="anonymous">
+<select class="form-control" name="anonymous"  id="anonymous">
 <option [% 'selected ' IF problem.anonymous %]value="1">[% loc('Yes') %]</option>
 <option [% 'selected ' IF !problem.anonymous %]value="0">[% loc('No') %]</option>
 </select></li>
 <li><label for="name">[% loc('Name:') %]</label>
-    <input type='text' name='name' id='name' value='[% problem.name | html %]'></li>
+    <input type='text' class="form-control" name='name' id='name' value='[% problem.name | html %]'></li>
 <li><label for="email">[% loc('Email:') %]</label>
-    <input type='text' id='email' name='email' value='[% problem.user.email | html %]'>
+    <input type='text' class="form-control" id='email' name='email' value='[% problem.user.email | html %]'>
     [% PROCESS abuse_button %]
     [% PROCESS flag_button user=problem.user %]
 </li>
@@ -177,7 +177,7 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
 [% END %]
 
 </ul>
-<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]">
+<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]">
 </form>
 
 </div>
diff --git a/templates/web/base/admin/responsepriorities/edit.html b/templates/web/base/admin/responsepriorities/edit.html
index b05ebfaf9..89f41a069 100644
--- a/templates/web/base/admin/responsepriorities/edit.html
+++ b/templates/web/base/admin/responsepriorities/edit.html
@@ -11,7 +11,7 @@
 
     <p>
         <strong>[% loc('Name:') %] </strong>
-        <input type="text" name="name" class="required" size="30" value="[% rp.name | html %]">
+        <input type="text" name="name" class="required form-control" size="30" value="[% rp.name | html %]">
     </p>
     <p>
       <strong>[% loc('Categories:') %]</strong>
@@ -34,7 +34,7 @@
     </p>
     <p>
       <input type="hidden" name="token" value="[% csrf_token %]" >
-      <input type="submit" name="Edit priorities" value="[% rp.id ? loc('Save changes') : loc('Create priority') %]" >
+      <input type="submit" class="btn" name="Edit priorities" value="[% rp.id ? loc('Save changes') : loc('Create priority') %]" >
     </p>
 </form>
 
diff --git a/templates/web/base/admin/stats.html b/templates/web/base/admin/stats.html
index 897e2fc44..535f04d18 100644
--- a/templates/web/base/admin/stats.html
+++ b/templates/web/base/admin/stats.html
@@ -68,13 +68,13 @@
 
 <form method="post" action="[% c.uri_for('stats') %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
     <p>
-    <label for="start_date">[% loc('Start Date:') %]</label><input type="text"
+    <label for="start_date">[% loc('Start Date:') %]</label><input type="text" class="form-control"
       placeholder="[% loc('Click here or enter as dd/mm/yyyy') %]" name="start_date" id="start_date"
       value="[% start_date ? start_date.strftime( '%d/%m/%Y') : '' | html %]" />
     </p>
 
     <p>
-    <label for="end_date">[% loc('End Date:') %]</label><input type="text"
+    <label for="end_date">[% loc('End Date:') %]</label><input type="text" class="form-control"
       placeholder="[% loc('Click here or enter as dd/mm/yyyy') %]" name="end_date" id="end_date" size="5"
       value="[% end_date ? end_date.strftime( '%d/%m/%Y') : '' | html %]" />
     </p>
@@ -89,7 +89,7 @@
 
     [% IF c.user.is_superuser %]
       <p>
-      [% loc('Council:') %] <select id='body' name='body'>
+      [% loc('Council:') %] <select class="form-control" id='body' name='body'>
           <option value=''>[% loc('No council') %]</option>
           [% FOR body IN bodies %]
           <option value="[% body.id %]"[% ' selected' IF body.id == selected_body %]>[% body.name %]</option>
@@ -99,7 +99,7 @@
     [% END %]
 
     <p>
-    <input type="submit" name="getcounts"  size="30" id="getcounts" value="Get Count" />
+    <input type="submit" class="btn" name="getcounts"  size="30" id="getcounts" value="Get Count" />
     </p>
 </form>
 
diff --git a/templates/web/base/admin/template_edit.html b/templates/web/base/admin/template_edit.html
index 54058a04c..8ce3c28dd 100644
--- a/templates/web/base/admin/template_edit.html
+++ b/templates/web/base/admin/template_edit.html
@@ -11,11 +11,11 @@
 
     <p>
         <strong>[% loc('Title:') %] </strong>
-        <input type="text" name="title" class="required" size="30" value="[% rt.title| html %]">
+        <input type="text" name="title" class="required form-control" size="30" value="[% rt.title| html %]">
     </p>
     <p>
         <strong>[% loc('Text:') %] </strong>
-        <textarea name="text" class="required">[% rt.text |html %]</textarea>
+        <textarea class="form-control" name="text" class="required">[% rt.text |html %]</textarea>
     </p>
     <p>
       <label>
@@ -38,11 +38,11 @@
     </p>
     <p>
       <input type="hidden" name="token" value="[% csrf_token %]" >
-      <input type="submit" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" >
+      <input type="submit" class="btn" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" >
     </p>
     [% IF rt.id %]
         <p>
-            <input class="delete" type="submit" name="delete_template" value="[% loc('Delete template') %]">
+            <input class="delete btn-danger" type="submit" name="delete_template" value="[% loc('Delete template') %]">
         </p>
     [% END %]
 </form>
diff --git a/templates/web/base/admin/update_edit.html b/templates/web/base/admin/update_edit.html
index 06bee6010..2b20c50b3 100644
--- a/templates/web/base/admin/update_edit.html
+++ b/templates/web/base/admin/update_edit.html
@@ -18,19 +18,21 @@
 <li><a href="[% uri %]#update_[% update.id %]" class="admin-offsite-link">[% loc('View report on site' )%]</a></li>
 
 <li><label for='detail'>[% loc('Text:') %]</label>
-<textarea name='text' id='text' cols=60 rows=10>[% update.text | html %]</textarea></li>
+<textarea class="form-control" name='text' id='text' cols=60 rows=10>[% update.text | html %]</textarea></li>
 
-<li><label for="anonymous">[% loc('Anonymous:') %]</label> <select name="anonymous"  id="anonymous">
+<li><label for="anonymous">[% loc('Anonymous:') %]</label>
+<select class="form-control" name="anonymous" id="anonymous">
 <option [% 'selected ' IF update.anonymous %]value="1">[% loc('Yes') %]</option>
 <option [% 'selected ' IF !update.anonymous %]value="0">[% loc('No') %]</option>
 </select></li>
-<li><label for="state">[% loc('State:') %]</label> <select name="state"  id="state">
+<li><label for="state">[% loc('State:') %]</label>
+<select class="form-control" name="state"  id="state">
     [% FOREACH state IN [ ['confirmed', loc('Open')], ['hidden', loc('Hidden')], ['unconfirmed',loc('Unconfirmed')] ] %]
         <option [% 'selected ' IF state.0 == update.state %] value="[% state.0 %]">[% state.1 %]</option>
     [% END %]
 </select></li>
-<li>[% loc('Name:') %] <input type='text' name='name' id='name' value='[% update.name | html %]'></li>
-<li>[% loc('Email:') %] <input type='text' id='email' name='email' value='[% update.user.email | html %]'>
+<li>[% loc('Name:') %] <input type='text' class="form-control" name='name' id='name' value='[% update.name | html %]'></li>
+<li>[% loc('Email:') %] <input type='text' class="form-control" id='email' name='email' value='[% update.user.email | html %]'>
 [%- IF update.user.from_body && update.user.from_body.id == update.problem.bodies_str %]
 [% ' (' _ tprintf(loc('user is from same council as problem - %d'), update.user.from_body.id ) _')' %]
 [% END -%]
@@ -72,6 +74,6 @@
 [% END %]
 
 </ul>
-<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" ></form>
+<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" ></form>
 
 [% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/base/admin/user-form.html b/templates/web/base/admin/user-form.html
index 87324666d..5adc200a1 100644
--- a/templates/web/base/admin/user-form.html
+++ b/templates/web/base/admin/user-form.html
@@ -16,12 +16,12 @@
             </p>
           </div>
           <label for="name">[% loc('Name:') %]</label>
-          <input type='text' name='name' id='name' value='[% user.name | html %]'>
+          <input type='text' class="form-control" name='name' id='name' value='[% user.name | html %]'>
         </li>
         <li><label for="email">[% loc('Email:') %]</label>
-        <input type='text' id='email' name='email' value='[% user.email | html %]'></li>
+        <input type='text' class="form-control" id='email' name='email' value='[% user.email | html %]'></li>
         <li><label for="phone">[% loc('Phone:') %]</label>
-        <input type='text' id='phone' name='phone' value='[% user.phone | html %]'></li>
+        <input type='text' class="form-control" id='phone' name='phone' value='[% user.phone | html %]'></li>
 
         [% IF c.user.is_superuser || c.cobrand.moniker == 'zurich' %]
           <li>
@@ -35,7 +35,7 @@
                 %]
               </p>
             </div>
-            [% loc('Body:') %] <select id='body' name='body'>
+            [% loc('Body:') %] <select class="form-control" id='body' name='body'>
               <option value=''>[% loc('No body') %]</option>
           [% FOR body IN bodies %]
               <option value="[% body.id %]"[% ' selected data-originally-selected' IF body.id == user.from_body.id %]>[% body.name %]</option>
@@ -64,7 +64,7 @@
               </p>
             </div>
             [% loc('Area:') %]
-            <select id='area_id' name='area_id' [% 'disabled' UNLESS c.user.has_permission_to('user_assign_areas', user.from_body.id) %]>
+            <select class="form-control" id='area_id' name='area_id' [% 'disabled' UNLESS c.user.has_permission_to('user_assign_areas', user.from_body.id) %]>
               <option value=''>[% loc('No area') %]</option>
               [% FOREACH area IN areas %]
                 <option value="[% area.id %]"[% ' selected' IF area.id == user.area_id %]>[% area.name | html %]</option>
@@ -98,7 +98,7 @@
             </div>
             [% IF c.user.is_superuser %]
               [% loc('Trusted by bodies:') %]<br />
-              <select id='body' name='trusted_bodies' multiple>
+              <select class="form-control" id='body' name='trusted_bodies' multiple>
                 [% FOR body IN bodies %]
                   <option value="[% body.id %]"[% ' selected' IF user.has_permission_to('trusted', body.id) %]>[% body.name %]</option>
                 [% END %]
@@ -159,5 +159,5 @@
         [% END %]
       [% END %]
     </ul>
-    <input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
+    <input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" >
 </form>
diff --git a/templates/web/base/auth/change_email.html b/templates/web/base/auth/change_email.html
index 471782e42..a444b8c31 100644
--- a/templates/web/base/auth/change_email.html
+++ b/templates/web/base/auth/change_email.html
@@ -27,7 +27,7 @@
         <input class="form-control" type="email" name="email" id="email" value="[% email | html %]">
     </div>
     <div class="final-submit">
-        <input type="submit" value="[% loc('Change email address') %]">
+        <input type="submit" class="btn" value="[% loc('Change email address') %]">
     </div>
 
     </fieldset>
diff --git a/templates/web/base/auth/change_password.html b/templates/web/base/auth/change_password.html
index 50ecc93a2..094d131eb 100644
--- a/templates/web/base/auth/change_password.html
+++ b/templates/web/base/auth/change_password.html
@@ -40,7 +40,7 @@ INCLUDE 'header.html', title = loc('Change password'), bodyclass = bclass
         <input class="form-control" type="password" name="confirm" value="[% confirm | html %]">
     </div>
     <div class="final-submit">
-        <input type="submit" value="[% loc('Change password') %]">
+        <input type="submit" class="btn" value="[% loc('Change password') %]">
     </div>
 
     </fieldset>
diff --git a/templates/web/base/dashboard/index.html b/templates/web/base/dashboard/index.html
index c0f94ce56..1af507569 100644
--- a/templates/web/base/dashboard/index.html
+++ b/templates/web/base/dashboard/index.html
@@ -19,7 +19,7 @@
 <div class="filters">
     <p>
         <label for="ward">Ward:</label>
-        <select name="ward"><option value=''>All</option>
+        <select class="form-control" name="ward"><option value=''>All</option>
             [% FOR w IN children.values.sort('name') %]
                 <option value="[% w.id %]"[% ' selected' IF w.id == ward %]>[% w.name %]</option>
             [% END %]
@@ -28,7 +28,7 @@
 
     <p>
         <label for="category">Report category:</label>
-        <select name="category"><option value=''>All</option>
+        <select class="form-control" name="category"><option value=''>All</option>
             [% FOR cat_op IN category_options %]
                 <option value='[% cat_op | html %]'[% ' selected' IF category == cat_op %]>[% cat_op | html %]</option>
             [% END %]
@@ -36,7 +36,7 @@
     </p>
 
     <p>
-        <input type="submit" value="Look up">
+        <input type="submit" class="btn" value="Look up">
     </p>
 
     <br clear="all" />
@@ -135,7 +135,7 @@
 <h2>Reports</h2>
 
                 </select>
-<p>Report state: <select name="state">
+<p>Report state: <select class="form-control" name="state">
 <option value=''>All</option>
                 [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating',
                 loc('Investigating')], ['action scheduled', loc('Planned')], ['in progress',
@@ -143,7 +143,7 @@
                     <option [% 'selected ' IF state.0 == q_state %] value="[% state.0 %]">[% state.1 %]</option>
                 [% END %]
 </select>
-<input type="submit" value="Look up">
+<input type="submit" class="btn" value="Look up">
 <a class="export_as_csv" href="[% c.req.uri_with({ export => 1 }) %]">Export as CSV</a>
 
 <table width="100%" id="reports">
diff --git a/templates/web/base/questionnaire/creator_fixed.html b/templates/web/base/questionnaire/creator_fixed.html
index 5b6d1254a..bcd9a9514 100644
--- a/templates/web/base/questionnaire/creator_fixed.html
+++ b/templates/web/base/questionnaire/creator_fixed.html
@@ -16,7 +16,7 @@
 <label class="inline" for="reported_no">[% loc('No') %]</label>
 </p>
 
-<p><input type="submit" name="submit" value="[% loc('Submit') %]"></p>
+<p><input type="submit" class="btn" name="submit" value="[% loc('Submit') %]"></p>
 
 </form>
 
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 217bd827e..5e6cef3b7 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -107,7 +107,7 @@
     </p>
 </div>
 
-<p><input type="submit" name="submit" value="[% loc('Submit questionnaire') %]"></p>
+<p><input type="submit" class="btn" name="submit" value="[% loc('Submit questionnaire') %]"></p>
 
 </form>
 
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index 31a8cd9ad..34a7ea96c 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -1,49 +1,38 @@
 [% PROCESS 'admin/report_blocks.html'; # For the report state dropdown %]
 [% permissions = c.user.permissions(c, problem.bodies_str) %]
 [% second_column = BLOCK -%]
-  <div id="side-report-secondary">
-    <div class="problem-inspector-fields clearfix">
-      [% INCLUDE 'errors.html' %]
+  <div id="side-inspect">
+    [% INCLUDE 'errors.html' %]
 
-      <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
-        <p class="left">
-          <label for="problem_id">[% loc('Report ID:') %]</label>
-          <input type="text" readonly id="problem_id" value="[% problem.id %]">
-        </p>
+    <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
 
-[% IF permissions.report_edit_priority OR permissions.report_inspect %]
-        <p class="right">
-          <label for="problem_priority">[% loc('Priority:') %]</label>
-          <select name="priority" id="problem_priority">
-            <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
-            [% FOREACH priority IN problem.response_priorities %]
-              <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
-            [% END %]
-          </select>
+      <div class="inspect-section">
+        <p>
+          <strong>[% loc('Report ID:') %]</strong>
+          [% problem.id %]
         </p>
-[% END %]
-
-[% IF permissions.report_inspect %]
-        <p class="left">
-          <label for="state">[% loc('State:') %]</label>
-            [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
-          <select name="state" id="state">
-            [% FOREACH group IN state_groups %]
-              <optgroup label="[% group.0 %]">
-                [% FOREACH state IN group.1 %]
-                  <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
-                [% END %]
-              </optgroup>
-            [% END %]
-          </select>
+        <p>
+          [% SET local_coords = problem.local_coords; %]
+          <strong>[% loc('Easting/Northing:') %]</strong>
+          <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
+          <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
+          <input type="hidden" name="longitude" value="[% problem.longitude %]">
+          <input type="hidden" name="latitude" value="[% problem.latitude %]">
         </p>
-[% END %]
+        <p>
+          <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn--block btn--navigate">[% loc('Navigate to this problem') %]</a>
+        </p>
+        <p>
+          <a href="#" class="btn btn--block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a>
+        </p>
+      </div>
 
-[% IF permissions.report_edit_category OR permissions.report_inspect %]
-        <p class="right">
-          <label for="category">[% loc('Category:') %]</label>
+    [% IF permissions.report_edit_category OR permissions.report_inspect %]
+      <div class="inspect-section">
+        <p>
+          <label for="category">[% loc('Category') %]</label>
             [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
-          <select name="category" id="category">
+          <select name="category" id="category" class="form-control">
             [% IF NOT problem.category OR NOT categories.grep(problem.category).size %]
             <optgroup label="[% loc('Existing category') %]">
               <option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option>
@@ -58,62 +47,102 @@
             [% END %]
           </select>
         </p>
-[% END %]
 
+        [% FOREACH category IN categories %]
+          [% cat_prefix = category | lower | replace('[^a-z]', '') %]
+          [% cat_prefix = "category_" _ cat_prefix _ "_" %]
+          [% IF category == problem.category %]
+            <p data-category="[% category | html %]">
+              [% INCLUDE 'report/new/category_extras_fields.html' %]
+            </p>
+          [% ELSIF category_extras.$category.size %]
+            <p data-category="[% category | html %]" class="hidden">
+              [% INCLUDE 'report/new/category_extras_fields.html' report_meta='' %]
+            </p>
+          [% END %]
+        [% END %]
+
+        [% IF permissions.report_inspect %]
         <p>
-          [% SET local_coords = problem.local_coords; %]
-          <strong>[% loc('Easting/Northing:') %]</strong>
-          <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
-          <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
-          <input type="hidden" name="longitude" value="[% problem.longitude %]">
-          <input type="hidden" name="latitude" value="[% problem.latitude %]">
-        </p>
-        <p style="clear:both;">
-          <a href="#" id="geolocate_link">[% loc('Use my current location') %]</a>,
-          [% loc('or drag the pin on the map') %] &raquo;
+          <label for="state">[% loc('State') %]</label>
+            [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
+          <select name="state" id="state" class="form-control">
+            [% FOREACH group IN state_groups %]
+              <optgroup label="[% group.0 %]">
+                [% FOREACH state IN group.1 %]
+                  <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
+                [% END %]
+              </optgroup>
+            [% END %]
+          </select>
         </p>
+        [% END %]
 
-[% IF permissions.report_inspect %]
+      </div>
+    [% END %]
+
+    [% IF permissions.report_edit_priority OR permissions.report_inspect %]
+      <div class="inspect-section">
         <p>
-          <label for="detailed_information">[% loc('Detailed problem location:') %]</label>
-          <textarea rows="2" name="detailed_location">[% problem.get_extra_metadata('detailed_location') | html %]</textarea>
+          <label for="problem_priority">[% loc('Priority') %]</label>
+          <select name="priority" id="problem_priority" class="form-control">
+            <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
+            [% FOREACH priority IN problem.response_priorities %]
+              <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
+            [% END %]
+          </select>
         </p>
+
+        [% IF permissions.report_inspect %]
         <p>
-          <label for="detailed_information">[% loc('Detailed problem information:') %]</label>
-          <textarea rows="2" name="detailed_information">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
+          <label for="traffic_information">[% loc('Traffic management required?') %]</label>
+          [% traffic_info = problem.get_extra_metadata('traffic_information') %]
+          <select id="traffic_information" name="traffic_information" class="form-control">
+            <option value=""[% ' selected' IF NOT traffic_info %]>-</option>
+            <option[% ' selected' IF traffic_info == "Yes" %]>Yes</option>
+            <option[% ' selected' IF traffic_info == "No" %]>No</option>
+          </select>
         </p>
         <p>
-          <label for="traffic_information">[% loc('Traffic management information:') %]</label>
-          <textarea rows="2" name="traffic_information">[% problem.get_extra_metadata('traffic_information') | html %]</textarea>
+          <label for="detailed_information">[% loc('Extra details') %]</label>
+          <textarea rows="2" name="detailed_information" id="detailed_information" class="form-control">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
         </p>
-[% END %]
+        [% END %]
 
-        <p>
-          <input type="hidden" name="token" value="[% csrf_token %]">
-          <a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a>
-          <input type="submit" value="[% loc('Save changes') %]" name="save" />
-        </p>
-[% IF permissions.report_inspect %]
-        [% UNLESS problem.get_extra_metadata('inspected') %]
-          <p>
-            <label for="public_update">[% loc('Public update:') %]</label>
-            [% INCLUDE 'admin/response_templates_select.html' for='public_update' %]
-            <textarea rows="2" name="public_update" id="public_update" required>[% public_update | html %]</textarea>
-          </p>
+      </div>
+    [% END %]
+
+      <div class="inspect-section">
+
+        [% IF permissions.report_inspect %]
           <p>
-            <input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" />
+            <label class="label-containing-checkbox">
+              <input type="checkbox" name="save_inspected" value="1" class="js-toggle-public-update" [% 'checked' IF save_inspected %]>
+              [% loc('Save with a public update') %]
+            </label>
           </p>
-        [% ELSE %]
           <p>
-            [% IF problem.whensent %]
-              [% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %]
-            [% ELSE %]
-              [% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %]
-            [% END %]
+            <label for="public_update">[% loc('Public update:') %]</label>
+            [% INCLUDE 'admin/response_templates_select.html' for='public_update' %]
+            <textarea rows="2" name="public_update" id="public_update" class="form-control">[% public_update | html %]</textarea>
           </p>
         [% END %]
-[% END %]
-      </form>
-    </div>
+
+        [% IF problem.get_extra_metadata('inspected') %]
+          [% IF problem.whensent %]
+            <p>[% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %]</p>
+          [% ELSE %]
+            <p>[% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %]</p>
+          [% END %]
+        [% END %]
+
+        <p>
+          <input type="hidden" name="token" value="[% csrf_token %]">
+          <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a>
+          <input class="btn btn-primary" type="submit" value="[% loc('Save changes') %]" name="save" />
+        </p>
+      </div>
+
+    </form>
   </div>
 [%- END %]
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index 7dfaf979e..469ee5bc5 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -46,7 +46,7 @@
             Revert to original title
         </label>
       [% END %]
-        <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
+        <h1><input class="form-control" type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
     </div>
   [% END %]
 
@@ -91,7 +91,7 @@
             Revert to original text
         </label>
       [% END %]
-        <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
+        <textarea class="form-control" name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
     </p>
 
     <div class="moderate-edit">
@@ -103,7 +103,7 @@
         </p>
         <p>
             <label for="moderation_reason">Moderation reason:</label>
-            <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
+            <input type="text" class="form-control" name="moderation_reason" placeholder="Describe why you are moderating this">
         </p>
         <p>
             <input type="submit" class="green-btn" value="Save changes">
@@ -126,10 +126,10 @@
   %]
     <div class="moderate-display segmented-control" role="menu">
       [% IF permissions.moderate %]
-        <a class="js-moderate" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a>
+        <a class="js-moderate btn" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a>
       [% END %]
       [% IF !hide_inspect_button AND permissions.keys.grep('report_inspect|report_edit_category|report_edit_priority').size %]
-        <a href="/report/[% problem.id %]/inspect" role="menuitem">
+        <a class="btn" href="/report/[% problem.id %]/inspect#side-inspect" role="menuitem">
           [%~ IF permissions.report_inspect ~%]
             [%~ loc('Inspect') ~%]
           [%~ ELSE ~%]
@@ -139,9 +139,9 @@
       [% END %]
       [% IF c.user.has_permission_to('planned_reports', problem.bodies_str_ids) %]
           [%~ IF c.user.is_planned_report(problem) ~%]
-            <label for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
+            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
           [%~ ELSE ~%]
-            <label for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
+            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
           [%~ END ~%]
       [% END %]
     </div>
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index fb8cd8191..1ee5c4636 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -14,6 +14,11 @@
 </div>
 
 <div id="map_sidebar">
+
+[% IF two_column_sidebar %]
+  <div class="two_column_sidebar">
+[% END %]
+
   <div id="side-report">
 
 [% IF login_success %]
@@ -47,6 +52,11 @@
   </div>
 
   [% second_column %]
+
+[% IF two_column_sidebar %]
+  </div>
+[% END %]
+
 </div>
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
index f12e9dbc7..f27ed8da5 100644
--- a/templates/web/base/report/display_tools.html
+++ b/templates/web/base/report/display_tools.html
@@ -3,7 +3,7 @@
         [% IF c.user_exists AND c.cobrand.users_can_hide AND c.user.belongs_to_body( problem.bodies_str ) %]
         <li><form method="post" action="/report/delete/[% problem.id %]" id="remove-from-site-form">
             <input type="hidden" name="token" value="[% csrf_token %]">
-            <input type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site" value="[% loc('Remove from site') %]">
+            <input type="submit" id="key-tool-report-abuse" class="abuse btn" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site" value="[% loc('Remove from site') %]">
         </form></li>
         [% ELSIF c.cobrand.moniker != 'zurich' %]
         <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[% loc('Report abuse' ) %]</a></li>
@@ -44,7 +44,7 @@
         <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label>
         <div class="form-txt-submit-box">
           [% IF NOT c.user_exists %]
-            <input type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]">
+            <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]">
           [% END %]
             <input class="green-btn" type="submit" value="[% loc('Subscribe') %]">
         </div>
diff --git a/templates/web/base/report/inspect.html b/templates/web/base/report/inspect.html
index 0a3fdcbb2..f4a9e4c46 100644
--- a/templates/web/base/report/inspect.html
+++ b/templates/web/base/report/inspect.html
@@ -1,5 +1,6 @@
 [%
   SET bodyclass = 'mappage with-actions';
+  SET two_column_sidebar = 1;
   PROCESS 'report/_inspect.html';
   SET shown_form = 1 UNLESS problem.get_extra_metadata('inspected');
   INCLUDE 'report/display.html', hide_inspect_button = 1;
diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index 6b01f93e0..084dd2d93 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -15,25 +15,7 @@
         list_of_names.join( '</strong>' _ loc(' or ') _ '<strong>' )
       ); %]
     </p>
-      [%- FOR meta IN category_extras.$category %]
-        [%- meta_name = meta.code -%]
-
-        <label for="form_[% meta_name %]">[% meta.description %]</label>
-        [% IF field_errors.$meta_name %]
-        <p class='form-error'>[% field_errors.$meta_name %]</p>
-        [% END -%]
-        [% IF meta.variable != 'false' %]
-          [% IF meta.exists('values') %]
-            <select class="form-control" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
-              [% FOR option IN meta.values %]
-                <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option>
-              [% END %]
-            </select>
-          [% ELSE %]
-            <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
-          [% END %]
-        [% END %]
-      [%- END %]
+    [% INCLUDE 'report/new/category_extras_fields.html' %]
     </div>
   [%- END %]
 </div>
diff --git a/templates/web/base/report/new/category_extras_fields.html b/templates/web/base/report/new/category_extras_fields.html
new file mode 100644
index 000000000..ec72ee7f3
--- /dev/null
+++ b/templates/web/base/report/new/category_extras_fields.html
@@ -0,0 +1,19 @@
+[%- FOR meta IN category_extras.$category %]
+  [%- meta_name = meta.code -%]
+
+  <label for="[% cat_prefix %]form_[% meta_name %]">[% meta.description %]</label>
+  [% IF field_errors.$meta_name %]
+  <p class='form-error'>[% field_errors.$meta_name %]</p>
+  [% END -%]
+  [% IF meta.variable != 'false' %]
+    [% IF meta.exists('values') %]
+      <select class="form-control" name="[% cat_prefix %][% meta_name %]" id="[% cat_prefix %]form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+        [% FOR option IN meta.values %]
+          <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option>
+        [% END %]
+      </select>
+    [% ELSE %]
+      <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% cat_prefix %][% meta_name %]" id="[% cat_prefix %]form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+    [% END %]
+  [% END %]
+[%- END %]
diff --git a/templates/web/base/report/update.html b/templates/web/base/report/update.html
index 1a30a48f1..7c2c39eb2 100644
--- a/templates/web/base/report/update.html
+++ b/templates/web/base/report/update.html
@@ -39,7 +39,7 @@
                         <label><input type="checkbox" name="update_revert_detail" class="revert-textarea">
                         Revert to original</label>
                         [% END %]
-                        <textarea name="update_detail">[% update.text | add_links %]</textarea>
+                        <textarea class="form-control" name="update_detail">[% update.text | add_links %]</textarea>
                     </div>
                     [% END %]
 
@@ -55,7 +55,7 @@
             [% IF moderating %]
                 <div class="moderate-edit">
                     <label for="moderation_reason">Moderation reason:</label>
-                    <input type="text" name="moderation_reason" 
+                    <input type="text" class="form-control" name="moderation_reason"
                         placeholder="Describe why you are moderating this">
                     <input type="submit" class="red-btn" value="Save changes">
                     <input type="button" class="btn cancel" value="Discard changes">
diff --git a/templates/web/base/report/update/form_update.html b/templates/web/base/report/update/form_update.html
index 55125ba4b..a3d4615e1 100644
--- a/templates/web/base/report/update/form_update.html
+++ b/templates/web/base/report/update/form_update.html
@@ -33,11 +33,11 @@
 [% IF field_errors.update %]
     <div class='form-error'>[% field_errors.update %]</div>
 [% END %]
-<textarea rows="7" cols="30" name="update" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea>
+<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea>
 
 [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %]
     <label for="form_state">[% loc( 'State' ) %]</label>
-    <select name="state" id="form_state">
+    <select name="state" id="form_state" class="form-control">
     [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating',
     loc('Investigating')], ['action scheduled', loc('Action Scheduled')],
     ['in progress', loc('In Progress')], ['duplicate', loc('Duplicate')],
diff --git a/templates/web/base/report/update/form_user_loggedout_by_email.html b/templates/web/base/report/update/form_user_loggedout_by_email.html
index aae37502b..04a842bef 100644
--- a/templates/web/base/report/update/form_user_loggedout_by_email.html
+++ b/templates/web/base/report/update/form_user_loggedout_by_email.html
@@ -2,7 +2,7 @@
     <h5>[% loc('<strong>No</strong> Let me confirm my update by email') %]</h5>
 
     [% INCLUDE 'report/update/form_name.html' %]
-    
+
     <label for="password_register">[% loc('Password (optional)') %]</label>
 
     <div class="general-notes">
@@ -10,7 +10,7 @@
     </div>
 
     <div class="form-txt-submit-box">
-        <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input type="password" class="form-control" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/base/report/update/form_user_loggedout_password.html b/templates/web/base/report/update/form_user_loggedout_password.html
index 593ccf3de..d24f8bd15 100644
--- a/templates/web/base/report/update/form_user_loggedout_password.html
+++ b/templates/web/base/report/update/form_user_loggedout_password.html
@@ -6,7 +6,7 @@
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+        <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/base/reports/_list-filters.html b/templates/web/base/reports/_list-filters.html
index 0a36d8486..e0452eb08 100644
--- a/templates/web/base/reports/_list-filters.html
+++ b/templates/web/base/reports/_list-filters.html
@@ -1,5 +1,5 @@
 [% select_status = BLOCK %]
-    <select name="status" id="statuses">
+    <select class="form-control" name="status" id="statuses">
         <option value="all"[% ' selected' IF filter_status == 'all' %]>[% loc('all reports') %]</option>
         <option value="open"[% ' selected' IF filter_status == 'open' %]>[% loc('unfixed reports') %]</option>
         <option value="closed"[% ' selected' IF filter_status == 'closed' %]>[% loc('closed reports') %]</option>
@@ -8,7 +8,7 @@
 [% END %]
 
 [% select_category = BLOCK %]
-    <select name="filter_category" id="filter_categories">
+    <select class="form-control" name="filter_category" id="filter_categories">
         <option value="">[% loc('Everything') %]</option>
         [% FOR category IN filter_categories %]
             <option value="[% category | html %]"[% ' selected' IF filter_category == category %]>
diff --git a/templates/web/fixamingata/report/new/form_user_loggedout.html b/templates/web/fixamingata/report/new/form_user_loggedout.html
index c391ce75f..7d5b0bf39 100644
--- a/templates/web/fixamingata/report/new/form_user_loggedout.html
+++ b/templates/web/fixamingata/report/new/form_user_loggedout.html
@@ -18,7 +18,7 @@
             <p class='form-error'>[% field_errors.name %]</p>
         [% END %]
 
-        <input type="text" class="form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+        <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
 
         [%# if there is nothing in the name field then set check box as default on form %]
         <div class="checkbox-group">
@@ -27,7 +27,7 @@
         </div>
 
         <label for="form_phone">[% loc('Phone number (optional)') %]</label>
-        <input type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+        <input type="text" class="form-control" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
 
         <div class="general-notes form-focus-hidden">
             <p>[% loc('We never show your email address or phone number.') %]</p>
@@ -40,7 +40,7 @@
         </div>
 
         <div class="form-txt-submit-box">
-            <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+            <input type="password" class="form-control" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
         </div>
     </div>
@@ -53,10 +53,10 @@
             [% IF field_errors.password %]
                 <p class='form-error'>[% field_errors.password %]</p>
             [% END %]
-            <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+            <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
             <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]">
         </div>
-        
+
         <div class="checkbox-group">
             <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
             <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
diff --git a/templates/web/seesomething/admin/stats.html b/templates/web/seesomething/admin/stats.html
index 4cf184f4f..155bff472 100644
--- a/templates/web/seesomething/admin/stats.html
+++ b/templates/web/seesomething/admin/stats.html
@@ -9,24 +9,24 @@
 
 <form method="post" action="[% c.uri_for('stats') %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" id="filter-form">
     <label for="form_category">Transport Type: </label>
-    <select name="category" id="form_category">
+    <select class="form-control" name="category" id="form_category">
         <option value="">Select</option>
         [% PROCESS options, option_list = [ 'Bus', 'Metro', 'Train' ], selected = category %]
     </select>
 
     <label for="form_subcategory">Incident Type: </label>
-    <select name="subcategory" id="form_subcategory">
+    <select class="form-control" name="subcategory" id="form_subcategory">
         <option value="">Select</option>
         [% PROCESS options, option_list = ['Smoking', 'Drugs', 'Anti-social Behaviour', 'Loud Music', 'Damage', 'Feet on Seats', 'Other'], selected = subcategory %]
     </select>
 
     <label for="form_service">Device: </label>
-    <select name="service" id="form_service">
+    <select class="form-control" name="service" id="form_service">
         <option value="">Select</option>
         [% PROCESS options, option_list = [ 'Android', 'iPhone' ], selected = service %]
     </select>
 
-    <input type="submit" name="getcounts"  size="30" id="getcounts" value="Look Up" />
+    <input type="submit" class="btn" name="getcounts"  size="30" id="getcounts" value="Look Up" />
 </form>
 
 [% IF pager.total_entries == 0 %]
diff --git a/templates/web/seesomething/auth/general.html b/templates/web/seesomething/auth/general.html
index 4fe2829d3..09639d15b 100644
--- a/templates/web/seesomething/auth/general.html
+++ b/templates/web/seesomething/auth/general.html
@@ -23,11 +23,11 @@
         [% ELSIF sign_in_error %]
             <div class="form-error">[% loc('There was a problem with your email/password combination. If you cannot remember your password, or do not have one, please fill in the &lsquo;sign in by email&rsquo; section of the form.') %]</div>
         [% END %]
-        <input type="email" class="required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]">
+        <input type="email" class="form-control required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]">
 
         <div class="form-txt-submit-box">
             <label class="n" for="password_sign_in">Password</label>
-            <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+            <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
         </div>
 
         <div class="form-txt-submit-box">
diff --git a/templates/web/seesomething/report/new/fill_in_details_form.html b/templates/web/seesomething/report/new/fill_in_details_form.html
index 54977f141..21b51384b 100644
--- a/templates/web/seesomething/report/new/fill_in_details_form.html
+++ b/templates/web/seesomething/report/new/fill_in_details_form.html
@@ -17,12 +17,12 @@
             [% IF field_errors.detail %]
                 <p class='form-error'>[% field_errors.detail %]</p>
             [% END %]
-            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
+            <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
 
             [% IF js %]
                 <div id="form_category_row">
                     <label for="form_category">[% loc('Transport Category') %]</label>
-                    <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
+                    <select class="form-control" name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
                 </div>
             [% ELSE %]
                 [% IF category_options.size %]
@@ -36,7 +36,7 @@
 
             <div id="form_subcategory_row">
                 <label for="form_subcategory">[% loc('Incident Category') %]</label>
-                <select name="subcategory" id="form_subcategory" required>
+                <select class="form-control" name="subcategory" id="form_subcategory" required>
                     <option value="">-- Pick a category --</option>
                     <option value="Smoking/other drugs">Smoking/other drugs</option>
                     <option value="Drugs">Drugs</option>
@@ -78,18 +78,18 @@
                 <p class='form-error'>[% field_errors.name %]</p>
             [% END %]
 
-            <input type="text" class="form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+            <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
 
             <label for="form_email">[% loc('Your email (optional)') %]</label>
             [% IF field_errors.email %]
                 <p class='form-error'>[% field_errors.email %]</p>
             [% END %]
-            <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]">
+            <input type="email" class="form-control" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]">
 
 
 
-            <label class="" for="form_phone">[% loc('Phone number (optional)') %]</label>
-            <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+            <label for="form_phone">[% loc('Phone number (optional)') %]</label>
+            <input type="text" class="form-control" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
 
             <div class="form-txt-submit-box ">
                 <input class="green-btn" type="submit" id="submit_noname" name="submit_noname" value="[% loc('Submit') %]">
diff --git a/templates/web/zurich/admin/body-form.html b/templates/web/zurich/admin/body-form.html
index 966bdf799..de9fac0e2 100644
--- a/templates/web/zurich/admin/body-form.html
+++ b/templates/web/zurich/admin/body-form.html
@@ -2,17 +2,17 @@
 
     <p>
         <label for="name">[% loc('Name') %]</label>
-        <input type="text" name="name" id="name" value="[% body.name %]" size="50">
+        <input type="text" class="form-control" name="name" id="name" value="[% body.name %]" size="50">
     </p>
 
     <p>
         <label for="email">[% loc('Email') %]</label>
-        <input type="text" name="endpoint" id="email" value="[% body.endpoint %]" size="50">
+        <input type="text" class="form-control" name="endpoint" id="email" value="[% body.endpoint %]" size="50">
     </p>
 
     <p>
         <label for="parent">[% loc('Parent') %]</label>
-        <select name="parent" id="parent">
+        <select class="form-control" name="parent" id="parent">
             <option value=""> -- [% loc('Select a body') %] -- </option>
             [% FOR b IN bodies %]
             <option value="[% b.id %]"[% ' selected' IF body.parent.id == b.id %]>[% b.name %]</option>
@@ -22,7 +22,7 @@
 
     <p>
         <label for="area_ids">[% loc('Area covered') %]</label>
-        <select name="area_ids" id="area_ids" multiple>
+        <select class="form-control" name="area_ids" id="area_ids" multiple>
             <option value=""> -- [% loc('Select an area') %] -- </option>
             [% SET body_areas = body.areas %]
             [% FOR area IN areas %]
@@ -49,7 +49,7 @@
     <input type="hidden" name="posted" value="body">
     <input type="hidden" name="token" value="[% csrf_token %]">
     <p>
-    <input type="submit" value="[% body ? loc('Update body') : loc('Add body') %]">
+    <input type="submit" class="btn" value="[% body ? loc('Update body') : loc('Add body') %]">
     </p>
     </form>
 
diff --git a/templates/web/zurich/admin/body.html b/templates/web/zurich/admin/body.html
index 1a156773d..435f42885 100644
--- a/templates/web/zurich/admin/body.html
+++ b/templates/web/zurich/admin/body.html
@@ -40,23 +40,26 @@
     <form method="post" action="[% c.uri_for('body', body_id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
 
         <p>
-          <strong>[% loc('Category:') %] </strong><input type="text" name="category" size="30" value="[% contact.category | html %]">
+        <strong>[% loc('Category:') %] </strong>
+        <input type="text" class="form-control" name="category" size="30" value="[% contact.category | html %]">
         </p>
 
         <p>
-        <strong>[% loc('Email:') %] </strong><input type="text" name="email" size="30" value="[% contact.email | html %]">
+        <strong>[% loc('Email:') %] </strong>
+        <input type="text" class="form-control" name="email" size="30" value="[% contact.email | html %]">
         </p>
 
-        <input type="hidden" name="confirmed" value="1" id="confirmed"> 
+        <input type="hidden" name="confirmed" value="1" id="confirmed">
 
         <p>
-        <strong>[% loc('Note:') %] </strong> <textarea name="note" rows="3" cols="40"></textarea>
+        <strong>[% loc('Note:') %] </strong>
+        <textarea class="form-control" name="note" rows="3" cols="40"></textarea>
         </p>
 
         <p>
         <input type="hidden" name="posted" value="new" >
         <input type="hidden" name="token" value="[% csrf_token %]" >
-        <input type="submit" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]">
+        <input type="submit" class="btn" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]">
         </p>
 
         <div>
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index 509ddfd7c..3df9459f9 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -101,28 +101,28 @@
 
 <div class="admin-report-edit admin-report-edit--interact">
 
-<p align="right" class="screen-only"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
-<p align="right" class="screen-only"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
+<p align="right" class="screen-only"><input type="submit" class="btn" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
+<p align="right" class="screen-only"><input type="submit" class="btn" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
 
 <ul class="no-bullets screen-only">
     <li>
         <label for="new_internal_note">[% loc('New internal note:') %]</label>
-        <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea>
+        <textarea class="form-control" name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea>
     </li>
     <li>
         <label for="status_update">[% loc('New note to DM:') %]</label>
-        <textarea name='status_update' id='status_update' cols=60 rows=4></textarea>
+        <textarea class="form-control" name='status_update' id='status_update' cols=60 rows=4></textarea>
     </li>
 </ul>
 
 <p class="screen-only">
     <label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
-    <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
+    <input type="text" class="form-control" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
 </p>
 
 <p class="clearfix screen-only">
-    <input style="float:left" type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
-    <input style="float:right" type="submit" name="no_more_updates" value="[% loc('No further updates') %]">
+    <input style="float:left" type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" >
+    <input style="float:right" type="submit" class="btn" name="no_more_updates" value="[% loc('No further updates') %]">
 </p>
 
 [% INCLUDE 'admin/list_updates.html' %]
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 4ef55e75a..ec65cf99f 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -39,11 +39,11 @@
   [% ELSE %]
 
     <dt><label for='title'>[% loc('Subject:') %]</label></dt>
-    <dd class="screen-only"><input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></dd>
+    <dd class="screen-only"><input size=60 type='text' class="form-control" id='title' name='title' value='[% problem.title | html %]'></dd>
     <dd class="print-only">[% problem.title | html %]</dd>
 
     <dt><label for='detail'>[% loc('Details:') %]</label></dt>
-    <dd class="screen-only"><textarea name='detail' id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea></dd>
+    <dd class="screen-only"><textarea name='detail' class="form-control" id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea></dd>
     <dd class="print-only">[% problem.detail | html %]</dd>
 
     [% IF problem.extra.original_detail %]
@@ -137,21 +137,21 @@
         <label for="new_internal_note">[% loc('New internal note:') %]</label>
     </dt>
     <dd class="screen-only">
-        <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea>
+        <textarea class="form-control" name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea>
     </dd>
 
     <dt class="screen-only">
         <label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
     </dt>
     <dd class="screen-only">
-      <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
+      <input type="text" class="form-control" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
     </dd>
 
     <dt class="screen-only">
         <span class="mock-label">[% loc('State:') %]</span>
     </dt>
     <dd class="screen-only">
-        <select name="state"  id="state" data-pstate="[% pstate %]">
+        <select class="form-control" name="state"  id="state" data-pstate="[% pstate %]">
             <option value="">--</option>
           [% FOREACH s IN states %]
             <option [% 'selected ' IF s.state == pstate %] value="[% s.state %]">[% s.trans %]</option>
@@ -167,7 +167,7 @@
     <li class="assignation">
         <div id="assignation__category">
             <label for="category">[% loc('Assign to different category:') %]</label>
-            <select name="category" id="category">
+            <select class="form-control" name="category" id="category">
                 <option value="">--</option>
               [% FOREACH cat IN categories %]
                 <option value="[% cat %]">[% cat %]</option>
@@ -184,7 +184,7 @@
   [% IF admin_type != 'super' AND list %]
     <li class="assignation" id="assignation__subdivision">
         <label for="body_subdivision">[% loc('Assign to subdivision:') %]</label>
-        <select name="body_subdivision" id="body_subdivision" class="assignation__select">
+        <select name="body_subdivision" id="body_subdivision" class="form-control assignation__select">
             <option value="">--</option>
             [% list %]
         </select>
@@ -209,7 +209,7 @@
                 [% loc('Assign to competent body:') %]
               [% END %]
             </label>
-            <select name="body_external" id="body_external">
+            <select class="form-control" name="body_external" id="body_external">
                 <option value="">--</option>
               [% FOR body IN bodies %]
                 [% NEXT IF body.parent OR body.bodies OR body.deleted %]
@@ -225,7 +225,7 @@
         </li>
         <li>
             [% INCLUDE 'admin/response_templates_select.html' for='external_body' %]
-            <textarea name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea>
+            <textarea class="form-control" name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea>
         </li>
         </ul>
     [% END %]
@@ -242,7 +242,7 @@
         [% END %]
         </label>
         [% INCLUDE 'admin/response_templates_select.html' for='status_update' %]
-        <textarea name='status_update' id='status_update' cols=60 rows=5>
+        <textarea class="form-control" name='status_update' id='status_update' cols=60 rows=5>
         [%- problem.extra.public_response || default_public_response | html -%]
         </textarea>
         </li>
@@ -256,12 +256,12 @@
       # only a private email will be sent to the user.  However, in all cases,
       # this is the end of processing, so we mark this with the same text used
       # for 'No further updates %]
-    <input type="submit" name="publish_response" value="[% loc('No further updates') %]">
+    <input type="submit" class="btn" name="publish_response" value="[% loc('No further updates') %]">
   [% END %]
 
     [%# This button simply saves changes, but does NOT close the report (though
       # it may trigger other workflow %]
-    <input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
+    <input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" >
 </p>
 
 [% IF c.cobrand.problem_has_public_response(problem) || c.cobrand.problem_has_user_response(problem) %]
diff --git a/templates/web/zurich/admin/stats.html b/templates/web/zurich/admin/stats.html
index fa8104496..ce8e238f7 100644
--- a/templates/web/zurich/admin/stats.html
+++ b/templates/web/zurich/admin/stats.html
@@ -9,7 +9,7 @@
 [% END %]
 
 <form method="get" action="[% c.uri_for('stats') %]">
-<p><select name="ym">
+<p><select class="form-control" name="ym">
     <option value="">[% loc('All reports') %]</option>
     [% FOR y IN [ 2013 .. date.format(date.now, '%Y') ];
         SET max = 12;
@@ -23,7 +23,7 @@
     [% END %]
 </select>
 
-<input type="submit" value="[% loc('Go') %]">
+<input type="submit" class="btn" value="[% loc('Go') %]">
 </form>
 
 <ul>
diff --git a/templates/web/zurich/admin/template_edit.html b/templates/web/zurich/admin/template_edit.html
index dbad55f08..e954d566c 100644
--- a/templates/web/zurich/admin/template_edit.html
+++ b/templates/web/zurich/admin/template_edit.html
@@ -18,19 +18,19 @@
 
     <p>
         <strong>[% loc('Title:') %] </strong>
-        <input type="text" name="title" class="required" size="30" value="[% rt.title| html %]">
+        <input type="text" name="title" class="form-control required" size="30" value="[% rt.title| html %]">
     </p>
     <p>
         <strong>[% loc('Text:') %] </strong>
-        <textarea name="text" class="required">[% rt.text |html %]</textarea> 
+        <textarea name="text" class="form-control required">[% rt.text |html %]</textarea>
     </p>
     <p>
     <input type="hidden" name="token" value="[% csrf_token %]" >
-    <input type="submit" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" >
+    <input type="submit" class="btn" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" >
     </p>
     [% IF rt.id %]
         <p>
-            <input class="delete" type="submit" name="delete_template" value="[% loc('Delete template') %]">
+            <input class="delete btn-danger" type="submit" name="delete_template" value="[% loc('Delete template') %]">
         </p>
     [% END %]
 </form>
diff --git a/templates/web/zurich/admin/update_edit.html b/templates/web/zurich/admin/update_edit.html
index adafff3a8..b2cde0b92 100644
--- a/templates/web/zurich/admin/update_edit.html
+++ b/templates/web/zurich/admin/update_edit.html
@@ -10,11 +10,11 @@
 <li><a href="[% c.uri_for_email( '/report', update.problem_id ) %]#update_[% update.id %]">[% loc('View report on site' )%]</a></li>
 
 <li><label for='detail'>[% loc('Text:') %]</label>
-<textarea name='text' id='text' cols=60 rows=5>[% update.text | html %]</textarea></li>
+<textarea class="form-control" name='text' id='text' cols=60 rows=5>[% update.text | html %]</textarea></li>
 
 <input type="hidden" name="anonymous" value="[% update.anonymous %]">
 
-<li>[% loc('State:') %] <select name="state"  id="state">
+<li>[% loc('State:') %] <select class="form-control" name="state" id="state">
     [% FOREACH state IN [ ['confirmed', loc('Open')], ['hidden', loc('Hidden')], ['unconfirmed',loc('Unconfirmed')] ] %]
         <option [% 'selected ' IF state.0 == update.state %] value="[% state.0 %]">[% state.1 %]</option>
     [% END %]
@@ -35,6 +35,6 @@
 <label for="remove_photo" class="inline">[% loc("Remove photo (can't be undone!)") %]</label></li>
 [% END %]
 </ul>
-<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" ></form>
+<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" ></form>
 
 [% INCLUDE 'admin/footer.html' %]
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 869654b87..905f20f41 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -152,6 +152,19 @@
     }
 }
 
+.btn-primary {
+    @include button-reset(
+        mix($primary, #fff, 50%),
+        $primary,
+        mix($primary, #ccc, 30%),
+        inherit,
+        darken($primary, 3%),
+        darken(mix($primary, #fff, 50%), 3%),
+        mix($primary, #ccc, 30%),
+        inherit
+    );
+}
+
 .variant1 {
     #site-header {
         border-top-color: #fff;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9b78ca580..4aeb14d88 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -370,7 +370,9 @@ $.extend(fixmystreet.set_up, {
   },
 
   category_change: function() {
-    // Deal with changes to category by asking for details from the server.
+    // Deal with changes to report category.
+
+    // On the new report form, does this by asking for details from the server.
     // Delegation is necessary because #form_category may be replaced during the lifetime of the page
     $("#problem_form").on("change.category", "select#form_category", function(){
         var args = {
@@ -395,8 +397,18 @@ $.extend(fixmystreet.set_up, {
             }
         });
     });
+
+    // On the manage/inspect report form, we already have all the extra inputs
+    // in the DOM, we just need to hide/show them as appropriate.
+    $('form#report_inspect_form [name=category]').change(function() {
+        var category = $(this).val();
+        var selector = "[data-category='"+category+"']";
+        $("form#report_inspect_form [data-category]:not("+selector+")").addClass("hidden");
+        $("form#report_inspect_form "+selector).removeClass("hidden");
+    });
   },
 
+
   contribute_as: function() {
     $('.content').on('change', '.js-contribute-as', function(){
         var opt = this.options[this.selectedIndex],
@@ -426,6 +438,25 @@ $.extend(fixmystreet.set_up, {
     $('.js-contribute-as').change();
   },
 
+  inspect_with_public_update: function() {
+    $('.js-toggle-public-update').each(function() {
+        var $checkbox = $(this);
+        var toggle_public_update = function() {
+            if ($checkbox.prop('checked')) {
+                $('#public_update').parents('p').show();
+            } else {
+                $('#public_update').parents('p').hide();
+            }
+        };
+
+        $checkbox.on('change', function() {
+            toggle_public_update();
+        });
+
+        toggle_public_update();
+    });
+  },
+
   on_resize: function() {
     var last_type;
     $(window).on('resize', function() {
diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png
new file mode 100644
index 000000000..e3f216814
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.png
diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg
new file mode 100644
index 000000000..80b5172c6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png
new file mode 100644
index 000000000..c7caa518a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs@2x.png
diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png
new file mode 100644
index 000000000..c37331e0d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.png
diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg
new file mode 100644
index 000000000..a00b08825
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png
new file mode 100644
index 000000000..1ea3659eb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate@2x.png
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 12f92b531..955c341bf 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -69,4 +69,21 @@ dd, p {
   & > :last-child {
     margin-bottom: 0;
   }
+
+  .segmented-control + & {
+    margin-top: 1em;
+  }
+}
+
+.btn-primary {
+    @include button-reset(
+        $oxfordshire_button_top,
+        $oxfordshire_button_bottom,
+        $oxfordshire_button_border,
+        #fff,
+        darken($oxfordshire_button_bottom, 3%),
+        darken($oxfordshire_button_top, 3%),
+        $oxfordshire_button_border,
+        #fff
+    );
 }
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index c44e91586..22edca768 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -60,6 +60,8 @@ body.twothirdswidthpage {
     }
 }
 
+// TODO: This entire section is very suspicious
+//
 // To prevent font size larger interfering with the fixed Oxfordshire layout
 .container { width: auto; }
 body:not(.admin) .full-width { width: 464px; }
@@ -223,11 +225,10 @@ body.mappage {
 
 #map_sidebar {
   background-color: $oxfordshire_very_light_green;
+}
 
-  .with-actions & {
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-  }
+#side-inspect {
+  background-color: #deead2;
 }
 
 .item-list--reports {
@@ -286,11 +287,12 @@ h4.static-with-rule {
 
 #oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
+  width: 24em; // up from default 20em
 
   #pc {
-    padding: 0 2%;
-    width: 89%;
-    height: 38px;
+    padding: 0 0 0 2%;
+    width: 20em;
+    height: 40px;
   }
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7462682ee..612d8cf55 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -246,7 +246,7 @@ textarea {
 
 textarea {
   line-height: 1.5em;
-  min-height: 8em;
+  min-height: 5em;
 }
 
 label{
@@ -285,6 +285,10 @@ label{
 select.form-control {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     height: 2.2em; // roughly equal to default input height
+
+    &[multiple] {
+        height: auto;
+    }
 }
 
 .form-section-heading {
@@ -398,27 +402,14 @@ select.form-control {
   margin:1em 0;
 }
 
-.problem-inspector-fields {
-  select {
-    height: 2.4em; // match text inputs
-    -webkit-appearance: menulist-button; // so it's the right height in Safari
-  }
-
-  p.left,
-  p.right {
-    width: 46%;
-
-    label {
-        margin-top: 0;
-    }
-  }
-
-  p.left {
-    float: #{$left};
-  }
+.label-containing-checkbox {
+  padding-#{$left}: 24px;
+  position: relative;
 
-  p.right {
-    float: #{$right};
+  input {
+    position: absolute;
+    #{$left}: 0;
+    top: 0.2em;
   }
 }
 
@@ -725,22 +716,22 @@ footer {
 
 /*BUTTONS*/
 
-// Default style set for buttons, inputs and .btn class. Red and green class available.
-// NB: a.btn is included in the selector otherwise a:visited is more specific and
-// the wrong text colour is applied.
-button, input[type=submit], .btn, a.btn {
+.btn {
   @include button-reset;
 }
 
-.green-btn,
-button.green-btn,
-input.green-btn{
+.btn + .btn {
+  // Ensure extra space between inline buttons placed next to each other.
+  margin-#{$left}: 0.5em;
+}
+
+.btn-primary,
+.green-btn {
   @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
-.red-btn,
-button.red-btn,
-input.red-btn{
+.btn-danger,
+.red-btn {
   @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
@@ -753,10 +744,6 @@ input.final-submit {
 .btn--facebook {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -768,10 +755,6 @@ input.final-submit {
 .btn--twitter {
     @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -780,9 +763,45 @@ input.final-submit {
     }
 }
 
+.btn--navigate,
+.btn--geolocate {
+    &:before {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0;
+        background-size: 16px 16px;
+        margin-#{$right}: 0.5em;
+        vertical-align: -0.1em; // vertically centre icon in button
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/navigate.svg), none;
+        }
+    }
+}
+
+.btn--geolocate {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
+        }
+    }
+}
+
 .btn--block {
     display: block;
-    width: auto;
+    text-align: center;
 }
 
 // Under the button to override its text transform and width
@@ -1463,6 +1482,27 @@ label .muted {
   }
 }
 
+.inspect-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  padding-top: 1.5em;
+  margin-top: 1.5em;
+
+  &:first-child {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  & > :first-child,
+  & > :first-child > :first-child {
+    margin-top: 0;
+  }
+}
+
+.inspect-section--hidden {
+  display: none;
+}
+
 
 table.nicetable {
   width:100%;
@@ -1803,36 +1843,37 @@ table.nicetable {
 
 .segmented-control {
   @include clearfix();
-  display: flex; // fancy full-width buttons for browsers that support flexbox
+  @include flex-container(); // fancy full-width buttons for browsers that support flexbox
 
   & > * {
     display: block;
-    margin: 0;
-    padding: 0.75em 0.5em;
     text-align: center;
-    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
-    border: 1px solid #ccc;
     border-right-width: 0; // avoid double border between items
-    font-weight: bold;
-    color: inherit !important;
-    text-decoration: none !important;
-    cursor: pointer;
     float: left; // float fallback for browsers that don't support flexbox
-    flex: 1 0 auto;
+    @include flex(1 0 auto, 1);
+  }
 
-    &:hover {
-      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
-    }
+  .btn {
+    padding: 0.75em 0.5em;
+    border-radius: 0;
+  }
+
+  .btn + .btn {
+    margin-#{$left}: 0;
   }
 
   & > :first-child {
-    border-radius: 0.25em 0 0 0.25em;
+    border-radius: 4px 0 0 4px;
   }
 
   & > :last-child {
-    border-radius: 0 0.25em 0.25em 0;
+    border-radius: 0 4px 4px 0;
     border-right-width: 1px; // reinstate border on last item
   }
+
+  & > :first-child:last-child {
+    border-radius: 4px;
+  }
 }
 
 // A special case of segmented control, where each "button" (or label) is
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 3bf3612ae..e7ccd5b03 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -3,6 +3,10 @@
 $image-sprite: '../fixmystreet/images/sprite.png' !default;
 $layout_front_stats_color: $primary !default;
 $mappage-header-height: 4em !default;
+$mappage-sidebar-width: 29em;
+$mappage-sidebar-padding: 1em;
+$mappage-with-notes-sidebar-width: 44em;
+$mappage-with-actions-sidebar-width: 58em;
 
 .internal-link-fixed-header {
     display: block;
@@ -222,6 +226,10 @@ h1 {
   }
 }
 
+.full-width {
+  margin: 0 ($mappage-sidebar-padding * -1);
+}
+
 // map page - has fixed header and different styling
 body.mappage {
 
@@ -339,17 +347,17 @@ body.mappage.admin {
   top: $mappage-header-height;
   bottom: 0;
   #{$right}: 0;
-  #{$left}: 29em; // width of sidebar
+  #{$left}: $mappage-sidebar-width;
   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;
+    #{$left}: $mappage-with-notes-sidebar-width;
   }
 
   .with-actions & {
-    #{$left}: 58em;
+    #{$left}: $mappage-with-actions-sidebar-width;
   }
 }
 
@@ -359,41 +367,92 @@ body.mappage.admin {
   top: $mappage-header-height;
   #{$left}: 0;
   bottom: 0;
-  width: 27em; // width of sidebar, minus padding
-  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
+  width: ($mappage-sidebar-width - ($mappage-sidebar-padding * 2));
+  padding: $mappage-sidebar-padding;
   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;
+    width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2));
     // 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);
   }
 
   .with-actions & {
-    width: 58em;
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+    width: $mappage-with-actions-sidebar-width;
+    max-width: 100%; // Secondary column will squish on screens 768-960px
+    padding: 0; // Padding will be handled by children of .two_column_sidebar
+
+    &:after {
+      display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar
+    }
   }
-}
 
-// Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed
-// elements, one group clip outside padding, one clips inside. So using padding
-// in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we
-// add some extra height using ::after.
-// https://bugzilla.mozilla.org/show_bug.cgi?id=748518
-#map_sidebar::after {
+  // Chrome/Safari count padding-bottom as part of the scrollable content in
+  // an overflow:scroll element (technically in contravention of the spec),
+  // whereas Firefox/IE render the padding outside the scrollable area.
+  // We need padding at the bottom of the sidebar, to stop .shadow-wrap from
+  // obscuring content at the bottom of the sidebar. So we use an :after
+  // pseudo-element instead of padding.
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+  &:after {
     content: "";
     display: block;
     height: 4em;
-    clear: both;
+  }
 }
 
-// IE<=8 does not support ::after
-.iel8 #map_sidebar {
-    padding-bottom: 4em;
+// This goes inside #map_sidebar, and establishes a flex container allowing
+// us to split the sidebar into two side-by-side columns.
+.two_column_sidebar {
+  @include flex-container();
+  @include flex-align(stretch); // children will fill entire height of this element
+  min-height: 100%; // this element will fill entire height of parent (#map_sidebar)
+
+  & > * {
+    // Columns should start at 50% width, and (eg: if scrollbars appear,
+    // reducing the available width), shrink down to less than 50%.
+    @include box-sizing(border-box);
+    @include flex(0 1 auto);
+    width: 50%;
+    padding: $mappage-sidebar-padding;
+
+    // Add extra space at the bottom of the sidebar columns, to stop
+    // .shadow-wrap obscuring text at the bottom of the sidebar.
+    &:after {
+      content: "";
+      display: block;
+      height: 4em;
+    }
+  }
+
+  // Default for children is to share the horizontal space equally amongst
+  // themselves. But to make sure that the edge of #side-report lines up
+  // with the edge of .shadow-wrap, we give #side-report a fixed width,
+  // and leave the other column to shrink to the remaining space.
+  #side-report {
+    width: $mappage-sidebar-width;
+    @include flex(0 0 auto);
+  }
+
+  // No flexbox in IE8, so we settle for floating the columns instead.
+  // They will no longer stretch the full height of the sidebar, and the
+  // width of #side-report will no longer match the width of .shadow-wrap
+  // when a scrollbar is present.
+  .iel8 & {
+    @include clearfix();
+
+    & > * {
+      float: left;
+      width: 50%;
+    }
+
+    #side-report {
+      width: 50%;
+    }
+  }
 }
 
 #skip-this-step {
@@ -693,12 +752,15 @@ body.authpage {
 
 // Wraps around #key-tools box - sticks to the bottom of the screen on desktop
 .shadow-wrap {
-  position:fixed;
-  z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it
+  position: fixed;
+  z-index: 10; //this is just to ensure anythign inside .content that has position set goes sites it
   bottom: 0;
-  width: 29em;
+  #{$left}: 0;
+  margin: 0;
+  width: $mappage-sidebar-width;
   overflow: hidden;
   padding-top: 2em;
+
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
@@ -757,13 +819,6 @@ body.authpage {
   }
 }
 
-// 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;
@@ -879,18 +934,9 @@ textarea.form-error {
   }
 }
 
-// Similar to .with-notes, there's a special version of the
-// report details page, that includes a secondary column.
-body.with-actions {
-  #side-report {
-    width: 27em;
-    float: #{$left};
-  }
-
-  #side-report-secondary {
-    width: 27em;
-    float: #{$right};
-  }
+// The coloured sidebar column on .with-actions pages.
+#side-inspect {
+  background-color: #E9F2FF;
 }
 
 // More general notes
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index a1a278ad0..6d4f523ce 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,32 +1,45 @@
 $direction: 'left' !default;
 
 // Button reset
-@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
+// Uses !important a few times to quickly reset
+// styles from a:link, a:hover, a:visited etc.
+@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
   display: inline-block;
-  cursor:pointer;
-  font:{
-    size: 0.875em;
-    family: Helmet, Freesans, sans-serif;
-    weight:bold;
-  }
-  text-transform:uppercase;
-  line-height: 1.375em;
-  padding: 0.7em 0.5em 0.5em;
-  margin:0;
+  margin: 0;
+  padding: 0.75em 1em;
   width: auto;
   height: auto;
   vertical-align: top;
+  text-align: center;
+
+  font-size: 1em;
+  line-height: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  text-decoration: none !important;
+  color: $text !important;
+
+  cursor: pointer;
+  background: $bg-bottom;
+  @include linear-gradient($bg-top, $bg-bottom);
+
+  border: 1px solid $border;
   @include border-radius(4px);
-  background: $c1;
-  @include linear-gradient($c1, $c2);
-  border:1px solid $c3;
-  color:$c4;
-  &:hover, &:hover:enabled {
-    background:$c5;
-    @include linear-gradient($c6, $c5);
-    text-decoration: none;
-    border:1px solid $c7;
-    color:$c8;
+
+  &:hover,
+  &:focus {
+    background: $hover-bg-bottom;
+    @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+    text-decoration: none !important;
+    border-color: $hover-border;
+    color: $hover-text !important;
+  }
+
+  &:disabled {
+    background: $bg-bottom;
+    border-color: $border;
+    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
+    cursor: default;
   }
 }
 
@@ -126,3 +139,28 @@ $right: right;
     background: #{$prefix}linear-gradient($stops);
   }
 }
+
+@mixin flex-container() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex($values, $values2009: 0) {
+  -webkit-box-flex: $values2009;
+  -moz-box-flex: $values2009;
+  -webkit-box-flex: $values;
+  -moz-box-flex: $values;
+  -webkit-flex: $values;
+  -ms-flex: $values;
+  flex: $values;
+}
+
+@mixin flex-align($alignment) {
+  -webkit-box-align: $alignment;
+  -webkit-align-items: $alignment;
+  -ms-flex-align: $alignment;
+  align-items: $alignment;
+}