Merge remote-tracking branch 'origin/master' into bromley

48 files changed, 3056 insertions, 2875 deletions

diff --git a/.gitignore b/.gitignore
index 85b7ca758..055e181dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,7 @@ tags
 /web/css/core.css
 /web/css/main.css
 /web/cobrands/fixmystreet/*.css
+/web/cobrands/bromley/*.css
 /local
 
 /web/cobrands/fixmystreet/compass_app_log.txt
diff --git a/bin/make_css b/bin/make_css
index 70625b2f4..27cbec1b5 100755
--- a/bin/make_css
+++ b/bin/make_css
@@ -15,9 +15,10 @@ DIRECTORY=$(cd `dirname $0`/../web && pwd)
 
 # FixMyStreet uses compass
 compass compile --output-style compressed $DIRECTORY/cobrands/fixmystreet
+compass compile --output-style compressed $DIRECTORY/cobrands/bromley
 
 # The rest are plain sass
-for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v cobrands/fixmystreet`
+for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v "cobrands/\(fixmystreet\|bromley\)"`
 do
     sass --scss --update --style compressed $scss
 done
diff --git a/bin/populate_bing_cache b/bin/populate_bing_cache
index a3bef6759..17c8911d0 100755
--- a/bin/populate_bing_cache
+++ b/bin/populate_bing_cache
@@ -9,6 +9,8 @@ use Data::Dumper;
 use FixMyStreet::App;
 use FixMyStreet::Geocode::Bing;
 
+my $bing_culture = 'en-GB';
+
 my $reports = FixMyStreet::App->model('DB::Problem')->search(
     {
         geocode   => undef,
@@ -46,7 +48,7 @@ while ( my $report = $reports->next ) {
     next if $report->geocode;
 
     my $j = FixMyStreet::Geocode::Bing::reverse( $report->latitude,
-        $report->longitude );
+        $report->longitude, $bing_culture );
 
     $report->geocode($j);
     $report->update;
diff --git a/perllib/Catalyst/Plugin/Session/State/Cookie.pm b/perllib/Catalyst/Plugin/Session/State/Cookie.pm
index c4b61123b..ead8be38d 100644
--- a/perllib/Catalyst/Plugin/Session/State/Cookie.pm
+++ b/perllib/Catalyst/Plugin/Session/State/Cookie.pm
@@ -50,6 +50,9 @@ sub update_session_cookie {
 sub cookie_is_rejecting {
     my ( $c, $cookie ) = @_;
 
+    # Don't output cookie for JS files. mySociety addition
+    return 1 if substr($c->request->path, -3) eq '.js';
+
     if ( $cookie->{path} ) {
         return 1 if index '/'.$c->request->path, $cookie->{path};
     }
diff --git a/perllib/FixMyStreet/App/Controller/My.pm b/perllib/FixMyStreet/App/Controller/My.pm
index 60e9dd09f..3de83b265 100644
--- a/perllib/FixMyStreet/App/Controller/My.pm
+++ b/perllib/FixMyStreet/App/Controller/My.pm
@@ -30,9 +30,16 @@ sub my : Path : Args(0) {
 
     my $pins = [];
     my $problems = {};
-    my $rs = $c->user->problems->search( {
+
+    my $params = {
         state => [ FixMyStreet::DB::Result::Problem->visible_states() ],
-    }, {
+    };
+    $params = {
+        %{ $c->cobrand->problems_clause },
+        %$params
+    } if $c->cobrand->problems_clause;
+
+    my $rs = $c->user->problems->search( $params, {
         order_by => { -desc => 'confirmed' },
         rows => 50
     } )->page( $p_page );
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 59e3a4410..afe180c29 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -51,7 +51,7 @@ sub display : Path('') : Args(1) {
         return $c->res->redirect( $c->uri_for($1), 301 );
     }
 
-    $c->forward('load_problem_or_display_error', [ $id ] );
+    $c->forward( 'load_problem_or_display_error', [ $id ] );
     $c->forward( 'load_updates' );
     $c->forward( 'format_problem_for_display' );
 }
@@ -88,7 +88,24 @@ sub load_updates : Private {
         { order_by => 'confirmed' }
     );
 
-    $c->stash->{updates} = $updates;
+    my $questionnaires = $c->model('DB::Questionnaire')->search(
+        {
+            problem_id => $c->stash->{problem}->id,
+            whenanswered => { '!=', undef },
+            old_state => 'confirmed', new_state => 'confirmed',
+        },
+        { order_by => 'whenanswered' }
+    );
+
+    my @combined;
+    while (my $update = $updates->next) {
+        push @combined, [ $update->confirmed, $update ];
+    }
+    while (my $update = $questionnaires->next) {
+        push @combined, [ $update->whenanswered, $update ];
+    }
+    @combined = map { $_->[1] } sort { $a->[0] <=> $b->[0] } @combined;
+    $c->stash->{updates} = \@combined;
 
     return 1;
 }
diff --git a/perllib/FixMyStreet/App/Controller/Reports.pm b/perllib/FixMyStreet/App/Controller/Reports.pm
index e7620f755..9fb72121e 100644
--- a/perllib/FixMyStreet/App/Controller/Reports.pm
+++ b/perllib/FixMyStreet/App/Controller/Reports.pm
@@ -341,9 +341,11 @@ sub load_and_group_problems : Private {
         {
             columns => [
                 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand',
-                { duration => { extract => "epoch from current_timestamp-lastupdate" } },
-                { age      => { extract => "epoch from current_timestamp-confirmed"  } },
-                { confirmed => { extract => 'epoch from confirmed' } },
+                #{ duration => { extract => "epoch from current_timestamp-lastupdate" } },
+                #{ age      => { extract => "epoch from current_timestamp-confirmed"  } },
+                { confirmed  => { extract => 'epoch from confirmed' } },
+                { whensent   => { extract => 'epoch from whensent' } },
+                { lastupdate => { extract => 'epoch from lastupdate' } },
                 { photo    => 'photo is not null' },
             ],
             order_by => { -desc => 'lastupdate' },
@@ -355,9 +357,10 @@ sub load_and_group_problems : Private {
 
     my ( %problems, @pins );
     my $re_councils = join('|', keys %{$c->stash->{areas_info}});
-    my @cols = ( 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand', 'duration', 'age', 'confirmed', 'photo' );
+    my @cols = ( 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand', 'confirmed', 'whensent', 'lastupdate', 'photo' );
     while ( my @problem = $problems->next ) {
         my %problem = zip @cols, @problem;
+        $problem{is_fixed} = FixMyStreet::DB::Result::Problem->fixed_states()->{$problem{state}};
         $c->log->debug( $problem{'cobrand'} . ', cobrand is ' . $c->cobrand->moniker );
         if ( !$problem{council} ) {
             # Problem was not sent to any council, add to possible councils
diff --git a/perllib/FixMyStreet/App/View/Web.pm b/perllib/FixMyStreet/App/View/Web.pm
index 755f1e405..092e362f9 100644
--- a/perllib/FixMyStreet/App/View/Web.pm
+++ b/perllib/FixMyStreet/App/View/Web.pm
@@ -75,6 +75,7 @@ sprintf (different name to avoid clash)
 
 sub tprintf {
     my ( $self, $c, $format, @args ) = @_;
+    @args = @{$args[0]} if ref $args[0] eq 'ARRAY';
     return sprintf $format, @args;
 }
 
diff --git a/perllib/FixMyStreet/Cobrand/Barnet.pm b/perllib/FixMyStreet/Cobrand/Barnet.pm
index 9791b071a..6f115ec63 100644
--- a/perllib/FixMyStreet/Cobrand/Barnet.pm
+++ b/perllib/FixMyStreet/Cobrand/Barnet.pm
@@ -10,7 +10,9 @@ sub council_name { return 'Barnet Council'; }
 sub council_url { return 'barnet'; }
 
 sub disambiguate_location {
+    my $self = shift;
     return {
+        %{ $self->SUPER::disambiguate_location() },
         centre => '51.612832,-0.218169',
         span   => '0.0563,0.09',
         bounds => [ '51.584682,-0.263169', '51.640982,-0.173169' ],
diff --git a/perllib/FixMyStreet/Cobrand/Bromley.pm b/perllib/FixMyStreet/Cobrand/Bromley.pm
new file mode 100644
index 000000000..75174b638
--- /dev/null
+++ b/perllib/FixMyStreet/Cobrand/Bromley.pm
@@ -0,0 +1,35 @@
+package FixMyStreet::Cobrand::Bromley;
+use base 'FixMyStreet::Cobrand::UKCouncils';
+
+use strict;
+use warnings;
+
+sub council_id { return 2482; }
+sub council_area { return 'Bromley'; }
+sub council_name { return 'Bromley Council'; }
+sub council_url { return 'bromley'; }
+
+sub path_to_web_templates {
+    my $self = shift;
+    return [
+        FixMyStreet->path_to( 'templates/web', $self->moniker )->stringify,
+        FixMyStreet->path_to( 'templates/web/fixmystreet' )->stringify
+    ];
+}
+
+sub disambiguate_location {
+    my $self = shift;
+    return {
+        %{ $self->SUPER::disambiguate_location() },
+        centre => '51.366836,0.040623',
+        span   => '0.154963,0.24347',
+        bounds => [ '51.289355,-0.081112', '51.444318,0.162358' ],
+    };
+}
+
+sub example_places {
+    return ( 'BR1 3UH', 'Glebe Rd, Bromley' );
+}
+
+1;
+
diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm
index aacfb5e2b..c45c36b0b 100644
--- a/perllib/FixMyStreet/Cobrand/Default.pm
+++ b/perllib/FixMyStreet/Cobrand/Default.pm
@@ -239,6 +239,8 @@ Returns disambiguating information available
 sub disambiguate_location {
     return {
         country => 'uk',
+        bing_culture => 'en-GB',
+        bing_country => 'United Kingdom'
     };
 }
 
@@ -457,7 +459,7 @@ sub find_closest {
     my ( $self, $latitude, $longitude, $problem ) = @_;
     my $str = '';
 
-    if ( my $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude ) ) {
+    if ( my $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, disambiguate_location()->{bing_culture} ) ) {
         # cache the bing results for use in alerts
         if ( $problem ) {
             $problem->geocode( $j );
@@ -504,7 +506,7 @@ sub find_closest_address_for_rss {
     # if we've not cached it then we don't want to look it up in order to avoid
     # hammering the bing api
     # if ( !$j ) {
-    #     $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, 1 );
+    #     $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, disambiguate_location()->{bing_culture}, 1 );
 
     #     $problem->geocode( $j );
     #     $problem->update;
@@ -914,5 +916,9 @@ Get stats to display on the council reports page
 
 sub get_report_stats { return 0; }
 
+sub example_places {
+    return [ 'B2 4QA', 'Tib St, Manchester' ];
+}
+
 1;
 
diff --git a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm
index 91c5e10ec..4d93aaf76 100644
--- a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm
+++ b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm
@@ -21,7 +21,9 @@ sub problems_clause {
 
 # FIXME - need to double check this is all correct
 sub disambiguate_location {
+    my $self = shift;
     return {
+        %{ $self->SUPER::disambiguate_location() },
         centre => '52.688198,-1.804966',
         span   => '0.1196,0.218675',
         bounds => [ '52.807793,-1.586291', '52.584891,-1.963232' ],
diff --git a/perllib/FixMyStreet/Cobrand/Reading.pm b/perllib/FixMyStreet/Cobrand/Reading.pm
index afc2b6ac6..c8591924e 100644
--- a/perllib/FixMyStreet/Cobrand/Reading.pm
+++ b/perllib/FixMyStreet/Cobrand/Reading.pm
@@ -12,11 +12,13 @@ sub council_name { return 'Reading City Council'; }
 sub council_url { return 'reading'; }
 
 sub disambiguate_location {
+    my $self = shift;
     return {
+        %{ $self->SUPER::disambiguate_location() },
         town   => 'Reading',
-        centre => '51.452983169803964,-0.98382678731985973',
-        span   => '0.0833543573028663,0.124500468843446',
-        bounds => [ '51.409779668156361,-1.0529948144525243', '51.493134025459227,-0.92849434560907829' ],
+        centre => '51.452983,-0.983827',
+        span   => '0.083355,0.1245',
+        bounds => [ '51.409779,-1.052994', '51.493134,-0.928494' ],
     };
 }
 
diff --git a/perllib/FixMyStreet/Cobrand/Southampton.pm b/perllib/FixMyStreet/Cobrand/Southampton.pm
index 5bb7df3b6..b57091bef 100644
--- a/perllib/FixMyStreet/Cobrand/Southampton.pm
+++ b/perllib/FixMyStreet/Cobrand/Southampton.pm
@@ -10,7 +10,9 @@ sub council_name { return 'Southampton City Council'; }
 sub council_url { return 'southampton'; }
 
 sub disambiguate_location {
+    my $self = shift;
     return {
+        %{ $self->SUPER::disambiguate_location() },
         town   => 'Southampton',
         centre => '50.913822,-1.400493',
         span   => '0.084628,0.15701',
diff --git a/perllib/FixMyStreet/Geocode/Bing.pm b/perllib/FixMyStreet/Geocode/Bing.pm
index 856d7061e..f00cf9671 100644
--- a/perllib/FixMyStreet/Geocode/Bing.pm
+++ b/perllib/FixMyStreet/Geocode/Bing.pm
@@ -23,10 +23,11 @@ use Digest::MD5 qw(md5_hex);
 sub string {
     my ( $s, $c, $params ) = @_;
     $s .= '+' . $params->{town} if $params->{town} and $s !~ /$params->{town}/i;
-    my $url = "http://dev.virtualearth.net/REST/v1/Locations?q=$s&c=en-GB"; # FIXME nb-NO for Norway
-    $url .= '&mapView=' . $params->{bounds}[0] . ',' . $params->{bounds}[1]
+    my $url = "http://dev.virtualearth.net/REST/v1/Locations?q=$s";
+    $url .= '&userMapView=' . $params->{bounds}[0] . ',' . $params->{bounds}[1]
         if $params->{bounds};
     $url .= '&userLocation=' . $params->{centre} if $params->{centre};
+    $url .= '&c=' . $params->{bing_culture} if $params->{bing_culture};
 
     my $cache_dir = FixMyStreet->config('GEO_CACHE') . 'bing/';
     my $cache_file = $cache_dir . md5_hex($url);
@@ -43,7 +44,7 @@ sub string {
 
     if (!$js) {
         return { error => _('Sorry, we could not parse that location. Please try again.') };
-    } elsif ($js =~ /BT\d/) {
+    } elsif ($js =~ /BT\d/ && $params->{bing_country} eq 'United Kingdom') {
         return { error => _("We do not currently cover Northern Ireland, I'm afraid.") };
     }
 
@@ -54,9 +55,10 @@ sub string {
 
     my $results = $js->{resourceSets}->[0]->{resources};
     my ( $error, @valid_locations, $latitude, $longitude );
+
     foreach (@$results) {
         my $address = $_->{name};
-        next unless $_->{address}->{countryRegion} eq 'United Kingdom'; # FIXME This is UK only
+        next unless $_->{address}->{countryRegion} eq $params->{bing_country};
         ( $latitude, $longitude ) = @{ $_->{point}->{coordinates} };
         push (@$error, { address => $address, latitude => $latitude, longitude => $longitude });
         push (@valid_locations, $_);
@@ -66,12 +68,13 @@ sub string {
 }
 
 sub reverse {
-    my ( $latitude, $longitude, $cache ) = @_;
+    my ( $latitude, $longitude, $bing_culture, $cache ) = @_;
 
     # Get nearest road-type thing from Bing
     my $key = mySociety::Config::get('BING_MAPS_API_KEY', '');
     if ($key) {
-        my $url = "http://dev.virtualearth.net/REST/v1/Locations/$latitude,$longitude?c=en-GB&key=$key";
+        my $url = "http://dev.virtualearth.net/REST/v1/Locations/$latitude,$longitude?key=$key";
+        $url .= '&c=' . $bing_culture if $bing_culture;
         my $j;
         if ( $cache ) {
             my $cache_dir = FixMyStreet->config('GEO_CACHE') . 'bing/';
diff --git a/perllib/FixMyStreet/Map/OSM/MapQuest.pm b/perllib/FixMyStreet/Map/OSM/MapQuest.pm
new file mode 100644
index 000000000..9cf6de01f
--- /dev/null
+++ b/perllib/FixMyStreet/Map/OSM/MapQuest.pm
@@ -0,0 +1,33 @@
+#!/usr/bin/perl
+#
+# FixMyStreet:Map::OSM::CycleMap
+# OSM CycleMap maps on FixMyStreet.
+#
+# Copyright (c) 2010 UK Citizens Online Democracy. All rights reserved.
+# Email: matthew@mysociety.org; WWW: http://www.mysociety.org/
+
+package FixMyStreet::Map::OSM::MapQuest;
+use base 'FixMyStreet::Map::OSM';
+
+use strict;
+
+sub map_type {
+    return 'OpenLayers.Layer.OSM.MapQuestOpen';
+}
+
+sub map_tiles {
+    my ($self, $x, $y, $z) = @_;
+    my $tile_url = $self->base_tile_url();
+    return [
+        "http://otile1.$tile_url/$z/" . ($x - 1) . "/" . ($y - 1) . ".png",
+        "http://otile2.$tile_url/$z/$x/" . ($y - 1) . ".png",
+        "http://otile3.$tile_url/$z/" . ($x - 1) . "/$y.png",
+        "http://otile4.$tile_url/$z/$x/$y.png",
+    ];
+}
+
+sub base_tile_url {
+    return 'mqcdn.com/tiles/1.0.0/osm/';
+}
+
+1;
diff --git a/perllib/Utils.pm b/perllib/Utils.pm
index 954561a08..4e64836c6 100644
--- a/perllib/Utils.pm
+++ b/perllib/Utils.pm
@@ -190,7 +190,7 @@ sub cleanup_text {
     for ($input) {
 
         # shit -> poo
-        s{\bdog\s*shit\b}{dog poo}ig;
+        s{\bdog\s*shite*?\b}{dog poo}ig;
 
         # 'portakabin' to '[portable cabin]' (and variations)
         s{\b(porta)\s*([ck]abin|loo)\b}{[$1ble $2]}ig;
diff --git a/t/utils.t b/t/utils.t
index 385c482ed..8ff9266fd 100644
--- a/t/utils.t
+++ b/t/utils.t
@@ -2,7 +2,7 @@
 
 use strict;
 use warnings;
-use Test::More tests => 9;
+use Test::More;
 
 use FindBin;
 use lib "$FindBin::Bin/../perllib";
@@ -39,3 +39,26 @@ foreach my $test (@convert_en_to_latlon_tests) {
       [ $lat, $lon ],                                         #
       "convert ($e,$n) to ($lat,$lon)";
 }
+
+my @cleanup_tests = (
+    [ 'dog shit', 'Dog poo', 'dog poo' ],
+    [ 'dog   shit', 'Dog poo', 'with spaces' ],
+    [ 'dog shite', 'Dog poo', 'with extra e' ],
+    [ 'there is dog shit here', 'There is dog poo here', 'with surrounding text' ],
+    [ 'portacabin', '[portable cabin]', 'cabin' ],
+    [ 'portaloo', '[portable loo]', 'loo' ],
+    [ 'porta loo', '[portable loo]', 'with spaces' ],
+    [ '   this is a report    ', 'This is a report', 'leading and trailing spaces' ],
+    [ 'This     is a   report    ', 'This is a report', 'spaces in the middle' ],
+    [ 'I AM SHOUTING AT YOU', 'I am shouting at you', 'all shouting' ],
+    [ 'I am EMPHASISING something', 'I am EMPHASISING something', 'some shouting' ],
+    [ "This has new\n\n\nlines in it", 'This has new Lines in it', 'no new lines' ],
+);
+
+foreach my $test ( @cleanup_tests ) {
+    is Utils::cleanup_text( $test->[0]), $test->[1], $test->[2];
+}
+
+is Utils::cleanup_text( "This has new\n\n\nlines in it", { allow_multiline => 1 } ),  "This has new\n\nLines in it", 'new lines allowed';
+
+done_testing();
diff --git a/templates/web/barnet/footer.html b/templates/web/barnet/footer.html
index 9bbeaa7e9..21848963e 100644
--- a/templates/web/barnet/footer.html
+++ b/templates/web/barnet/footer.html
@@ -14,7 +14,6 @@
                     <li class="section">[% c.req.uri.path == '/reports/Barnet' ? '<strong>All reports</strong>'      : '<a href="/reports/Barnet">All reports</a>'  %]</li>
                     <li class="section">[% c.req.uri.path == '/alert'          ? '<strong>Local alerts</strong>'     : '<a href="/alert">Local alerts</a>'          %]</li>
                     <li class="section">[% c.req.uri.path == '/faq'            ? '<strong>Help</strong>'             : '<a href="/faq">Help</a>'                    %]</li>
-                    <li class="section">[% c.req.uri.path == '/contact'        ? '<strong>Contact</strong>'          : '<a href="/contact">Contact</a>'             %]</li>
                 </ul>
             </ul>
         </div> <!-- end navigation -->
diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html
new file mode 100644
index 000000000..9be0741bf
--- /dev/null
+++ b/templates/web/bromley/footer.html
@@ -0,0 +1,50 @@
+                    [% IF pagefooter %]
+                    <footer role="content-info">
+                        <div class="tablewrapper bordered">
+                            <div id="footer-mobileapps">
+                                <h4>Mobile apps</h4>
+
+                                <ul>
+                                    <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li>
+                                    <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li>
+                                    <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li>
+                                    <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li>
+                                </ul>
+                            </div>
+
+                            <div id="footer-help">
+                            </div>
+                        </div>
+                    </footer>
+                    [% END %]
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
+
+        <div class="nav-wrapper">
+            <div class="nav-wrapper-2">
+                <div id="main-nav" role="navigation">
+                    <ul id="mysoc-menu">
+                        <li><a href="http://www.fixmystreet.com/">Powered by FixMyStreet</a></li>
+                    </ul>
+
+                    <ul id="main-menu">
+                        <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
+                            >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
+                            %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/reports/Bromley' %]span[% ELSE %]a href="/reports/Bromley"[% END
+                            %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END
+                            %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
+                            %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+<!-- [% INCLUDE 'debug_footer.html' %] -->
+    </div> <!-- .wrapper -->
+</body>
+</html>
diff --git a/templates/web/bromley/header.html b/templates/web/bromley/header.html
new file mode 100644
index 000000000..f7beabd8c
--- /dev/null
+++ b/templates/web/bromley/header.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if IE 7]>   <html class="no-js ie7 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if IE 8]>   <html class="no-js ie8 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if IE 9]>   <html class="no-js ie9 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="[% lang_code %]"><!--<![endif]-->
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+        <meta name="HandHeldFriendly" content="true">
+        <meta name="mobileoptimized" content="0">
+
+        <link rel="stylesheet" href="[% version('/cobrands/bromley/base.css') %]">
+        <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]" media="(min-width:48em)"> -->
+	<link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]">
+        <!--[if (lt IE 9) & (!IEMobile)]>
+            <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]"> -->
+        <![endif]-->
+
+        <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script>
+        [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js' %]
+        <script src="[% version('/js/fancybox/jquery.fancybox-1.3.4.pack.js') %]" charset="utf-8"></script>
+                
+        [% IF c.req.uri.host == 'osm.fixmystreet.com' %]
+            <link rel="canonical" href="http://www.fixmystreet.com[% c.req.uri.path_query %]">
+        [% END %]
+
+        [% INCLUDE 'tracking_code.html' %]
+
+    </head>
+    <body class="[% bodyclass | html IF bodyclass %]">
+
+    <div class="wrapper">
+        <div class="table-cell">
+            <header id="site-header" role="banner">
+                <div class="container">
+                    <a href="/" id="site-logo">FixMyStreet</a>
+                    <a href="#main-nav" id="nav-link">Main Navigation</a>
+                </div>
+            </header>
+
+            <div id="user-meta">
+                [% IF c.user_exists %]
+                <p>
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] 
+                    <a href="/auth/sign_out">[% loc('sign out') %]</a>
+                </p>
+                [% ELSE %]
+                    <!-- <a href="/auth">[% loc('Sign in') %]</a> -->
+                [% END %]
+            </div>
+
+            <div class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
+
+        <!-- [% INCLUDE 'debug_header.html' %] -->
diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html
index 999d332d2..abfff624f 100644
--- a/templates/web/default/report/display.html
+++ b/templates/web/default/report/display.html
@@ -1,7 +1,7 @@
 [% 
     PROCESS "maps/${map.type}.html";
 
-    problem_title = problem.title _ ' - ' _ loc('Viewing a problem') | html;
+    problem_title = problem.title _ ' - ' _ loc('Viewing a problem');
     INCLUDE 'header.html'
         title = problem_title
         rss = [ loc('Updates to this problem, FixMyStreet'), "/rss/$problem.id" ]
diff --git a/templates/web/default/report/update.html b/templates/web/default/report/update.html
new file mode 100644
index 000000000..048968eae
--- /dev/null
+++ b/templates/web/default/report/update.html
@@ -0,0 +1,22 @@
+[% IF loop.first %]
+<div id="updates">
+    <h2 class="problem-update-list-header">[% loc('Updates') %]</h2>
+[% END %]
+    <div><div class="problem-update"><p><a name="update_[% update.id %]"></a><em>
+        [% INCLUDE meta_line %]
+    </em></p></div>
+[% IF NOT update.whenanswered %]
+    <div class="update-text">
+        [% add_links( update.text ) | html_para %]
+
+        [% INCLUDE 'report/photo.html' object=update %]
+
+        [% IF c.cobrand.allow_update_reporting %]
+        <p align="right">
+            <small><a rel="nofollow" class="unsuitable-problem" href="[% c.uri_for( '/contact', { id => update.problem_id, update_id => update.id } ) %]">[% loc('Offensive? Unsuitable? Tell us') %]</a></small>
+        </p>
+        [% END %]
+    </div>
+[% END %]
+    </div>
+[% '</div>' IF loop.last %]
diff --git a/templates/web/default/report/updates.html b/templates/web/default/report/updates.html
index 4fd3c75d4..374a7c570 100644
--- a/templates/web/default/report/updates.html
+++ b/templates/web/default/report/updates.html
@@ -1,36 +1,26 @@
-[% FOREACH update IN updates.all %]
-[% IF loop.first %]
-<div id="updates">
-    <h2 class="problem-update-list-header">[% loc('Updates') %]</h2>
+[% FOREACH update IN updates %]
+[% INCLUDE 'report/update.html' %]
 [% END %]
-    <div><div class="problem-update"><p><a name="update_[% update.id %]"></a><em>
-        [% IF update.anonymous || update.name == '' %]
-            [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%]
-        [%- ELSIF update.user.from_council %]
-            [% user_name = update.user.name | html %]
-            [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%]
-        [%- ELSE %]
-            [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%]
-        [%- END -%]
-        [%- c.cobrand.extra_update_meta_text(update) -%]
-        [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %]
-        [%- ", " _ loc( 'reopened' ) IF update.mark_open %]
-        [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %]
-        </em></p>
 
-    </div>
+[% BLOCK meta_line %]
 
-    <div class="update-text">
-        [% add_links( update.text ) | html_para %]
+    [% IF update.whenanswered %]
+        [%# A questionnaire update, currently saying report is still open %]
+        [% tprintf( loc( 'Still open, via questionnaire, %s' ), prettify_epoch( update.whenanswered_local.epoch ) ) %]
+        [% RETURN %]
+    [% END %]
 
-        [% INCLUDE 'report/photo.html' object=update %]
-
-        [% IF c.cobrand.allow_update_reporting %]
-        <p align="right">
-            <small><a rel="nofollow" class="unsuitable-problem" href="[% c.uri_for( '/contact', { id => update.problem_id, update_id => update.id } ) %]">[% loc('Offensive? Unsuitable? Tell us') %]</a></small>
-        </p>
-        [% END %]
-    </div>
-    </div>
-[% '</div>' IF loop.last %]
+    [% IF update.anonymous || update.name == '' %]
+        [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%]
+    [%- ELSIF update.user.from_council %]
+        [% user_name = update.user.name | html %]
+        [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%]
+    [%- ELSE %]
+        [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%]
+    [%- END -%]
+    [%- c.cobrand.extra_update_meta_text(update) -%]
+    [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %]
+    [%- ", " _ loc( 'reopened' ) IF update.mark_open %]
+    [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %]
 [% END %]
+
diff --git a/templates/web/default/reports/cobrand_stats.html b/templates/web/default/reports/cobrand_stats.html
deleted file mode 100644
index e69de29bb..000000000
--- a/templates/web/default/reports/cobrand_stats.html
+++ /dev/null
diff --git a/templates/web/default/reports/council.html b/templates/web/default/reports/council.html
index ec9efbdbf..0d3d43d82 100755
--- a/templates/web/default/reports/council.html
+++ b/templates/web/default/reports/council.html
@@ -13,12 +13,13 @@
     INCLUDE 'header.html',
     title = tprintf(loc('%s - Summary reports'), name)
     context = 'reports'
+    bodyclass = 'mappage'
     rss = [ tprintf(loc('Problems within %s, FixMyStreet'), name), rss_url ]
 %]
 
 [% map_html %]
 
-[% IF children.size %]
+[% IF c.cobrand.moniker != 'fixmystreet' AND children.size %]
 <h2 style="clear:right">[% loc('Wards of this council') %]</h2>
 <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
 <ul>
@@ -31,8 +32,16 @@
 </div>
 <div id="side">
 
+<h1 id="reports_heading">
+    [% IF ward %]
+    [% ward.name %]<span>, </span><a href="[% council_url %]">[% council.name %]</a>
+    [% ELSE %]
+    [% council.name %]
+    [% END %]
+</h1>
+
 [% IF council.generation_high == 10 AND c.cobrand.country == 'GB' %]
-<p id="unknown">This council no longer exists.
+<p id="unknown" class="alert">This council no longer exists.
 [% IF council.name.match('Penwith|Kerrier|Carrick|Restormel|Caradon|North Cornwall') %]
 Its area is now covered by <a href="/reports/Cornwall">Cornwall Council</a>.
 [% ELSIF council.name.match('Durham|Easington|Sedgefield|Teesdale|Wear Valley|Derwentside|Chester le Street') %]
@@ -57,60 +66,49 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
 <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>.
 [% END %]
 </p>
+[% ELSIF c.cobrand.moniker == 'fixmystreet' %]
+    <div class="shadow-wrap">
+        <ul id="key-tools"[% IF NOT children.size %] class="singleton"[% END %]>
+            <li><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[% tprintf(loc('Get updates of problems in this %s'), thing) %]</a></li>
+            [% IF children.size %]
+            <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% loc('Wards of this council') %]</a></li>
+            [% END %]
+        </ul>
+    </div>
 [% ELSE %]
-<p><a href="[% rss_url %]"><img align="right" src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% tprintf(loc('RSS feed of problems in this %s'), thing) %]" border="0" hspace="4"></a>
+    <p><a href="[% rss_url %]"><img align="right" src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% tprintf(loc('RSS feed of problems in this %s'), thing) %]" border="0" hspace="4"></a>
 [% END %]
 
-[% IF c.cobrand.all_councils_report %]
-    [% tprintf( loc('This is a summary of all reports for one %s.'), thing ) %]
-[% ELSE %]
-    [% tprintf( loc('This is a summary of all reports for this %s.'), thing ) %]
+[% TRY %][% INCLUDE 'reports/cobrand_stats.html' %][% CATCH file %][% END %]
+
+[% IF c.cobrand.moniker == 'fixmystreet' AND children.size %]
+<section id="council_wards" class="hidden-js">
+    <h2>[% loc('Wards of this council') %]</h2>
+    <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
+    <ul class="issue-list-a full-width">
+        [% FOR child IN children.values.sort('name') %]
+        <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li>
+        [% END %]
+    </ul>
+</section>
 [% END %]
 
-[% IF ward %]
-[% tprintf( loc('You can <a href="%s">view all reports for the council</a> or <a href="/reports">show all councils</a>.'), council_url ) %]
-[% ELSE %]
-[% loc('You can <a href="/reports">show all councils</a>.') %]
+[% IF c.cobrand.moniker == 'fixmystreet' %]
+<p class="promo">
+    FixMyStreet is now available for local council websites.
+    <a href="/for-councils">Find&nbsp;out&nbsp;more</a>.
+</p>
 [% END %]
 
-<h2>[% name %]</h2>
-
-[% INCLUDE 'reports/cobrand_stats.html' %]
-
-    [% INCLUDE 'pagination.html', param = 'p' %]
-
-    [% INCLUDE column
-        title = loc('Recently fixed')
-        problems = fixed.${council.id}.new
-    %]
+[% INCLUDE 'pagination.html', param = 'p' %]
 
+<section class="full-width">
     [% INCLUDE column
-        title = loc('New problems')
-        problems = open.${council.id}.new
+        problems = problems.${council.id}
     %]
+</section>
 
-    [%# This doesn't really need a whole separate template %]
-    [% IF c.cobrand.moniker == 'emptyhomes' %]
-        [% 
-           INCLUDE column
-            title = loc('Older problems')
-            problems = open.${council.id}.older.merge( open.${council.id}.unknown )
-        %]
-    [% ELSE %]
-        [% INCLUDE column
-            title = loc('Older problems')
-            problems = open.${council.id}.older
-        %]
-        [% INCLUDE column
-            title = loc('Old problems, state unknown')
-            problems = open.${council.id}.unknown
-        %]
-    [% END %]
-
-    [% INCLUDE column
-        title = loc('Old fixed')
-        problems = fixed.${council.id}.old
-    %]
+[% INCLUDE 'pagination.html', param = 'p' %]
 
 </div>
 [% INCLUDE 'footer.html' %]
@@ -118,9 +116,35 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
 [% BLOCK column %]
 [% IF problems %]
 
-<h3>[% title %]</h3>
+<ul class="issue-list-a">
+[% IF c.cobrand.moniker == 'fixmystreet' %]
+
+[% FOREACH problem IN problems %]
+    <li>
+        <a href="[% c.uri_for('/report/' _ problem.id) %]">
+            <div class="text">
+                <h4>[% problem.title | html %]</h4>
+                <small>[% prettify_epoch( problem.confirmed, 1 ) %]
+                [%- IF problem.confirmed != problem.lastupdate AND problem.whensent != problem.lastupdate %], last updated [% prettify_epoch( problem.lastupdate, 1 ) %]
+                [%- END %]</small>
+                [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small>
+                [% ELSIF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small>
+                [% END %]
+                [% IF problem.is_fixed %]
+                    <small>[% loc('(fixed)') %]</small>
+                [% END %]
+            </div>
+            [% IF problem.photo %]
+            <div class="img">
+                <img height="60" width="90" src="/photo/[% problem.id %].fp.jpeg" alt="">
+            </div>
+            [% END %]
+        </a>
+    </li>
+[% END %]
+
+[% ELSE %]
 
-<ul>
 [% FOREACH problem IN problems %]
     <li><a href="[% c.uri_for('/report/' _ problem.id) %]">[% problem.title | html %]</a>
     [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %]
@@ -129,6 +153,8 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
     [% END %]
     </li>
 [% END %]
+
+[% END %]
 </ul>
 
 [% END %]
diff --git a/templates/web/default/reports/index.html b/templates/web/default/reports/index.html
index f14fd079e..283df5285 100755
--- a/templates/web/default/reports/index.html
+++ b/templates/web/default/reports/index.html
@@ -1,35 +1,41 @@
-[% INCLUDE 'header.html', title = loc('Summary reports') %]
+[% INCLUDE 'header.html', title = loc('Summary reports'),  bodyclass => 'fullwidthpage' %]
 
+<h1>[% loc('All Reports') %]</h1>
+
+<div class="intro">
 <p>
 [% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %]
 [% loc('Greyed-out lines are councils that no longer exist.') %]
 </p>
+</div>
 
-<table cellpadding="3" cellspacing="1" border="0">
+<table cellpadding="3" cellspacing="1" border="0" class="nicetable">
+<thead>
 <tr>
-<th>[% loc('Name') %]</th>
-<th>[% loc('New problems') %]</th>
-<th>[% loc('Older problems') %]</th>
-<th>[% loc('Old problems,<br>state unknown') %]</th>
-<th>[% loc('Recently fixed') %]</th>
-<th>[% loc('Older fixed') %]</th>
+<th class="title">[% loc('Name') %]</th>
+<th class="data">[% loc('New <br>problems') %]</th>
+<th class="data">[% loc('Older <br>problems') %]</th>
+<th class="data">[% loc('Old / unknown <br>problems') %]</th>
+<th class="data">[% loc('Recently <br>fixed') %]</th>
+<th class="data">[% loc('Older <br>fixed') %]</th>
 </tr>
+</thead>
 
+<tbody>
 [% FOREACH area IN areas_info_sorted %]
 <tr align="center"
 [%- IF area.generation_high == 10 %] class="gone"
-[%- ELSIF loop.count % 2 %] class="a"
-[%- END -%]
->
-<td align="left"><a href="[% area.url %]">[% area.name %]</a></td>
-<td>[% open.${area.id}.new or 0 %]</td>
-<td>[% open.${area.id}.older or 0 %]</td>
-<td>[% open.${area.id}.unknown or 0 %]</td>
-<td>[% fixed.${area.id}.new or 0 %]</td>
-<td>[% fixed.${area.id}.old or 0 %]</td>
+[%- ELSIF ! (loop.count % 2) %] class="a"
+[%- END %]>
+<td class="title"><a href="[% area.url %]">[% area.name %]</a></td>
+<td class="data">[% open.${area.id}.new or 0 %]</td>
+<td class="data">[% open.${area.id}.older or 0 %]</td>
+<td class="data">[% open.${area.id}.unknown or 0 %]</td>
+<td class="data">[% fixed.${area.id}.new or 0 %]</td>
+<td class="data">[% fixed.${area.id}.old or 0 %]</td>
 </tr>
 [% END %]
+</tbody>
 </table>
 
-[% INCLUDE 'footer.html' %]
-
+[% INCLUDE 'footer.html', pagefooter = 'yes' %]
diff --git a/templates/web/emptyhomes/report/display.html b/templates/web/emptyhomes/report/display.html
index 933a05948..bcce6789d 100644
--- a/templates/web/emptyhomes/report/display.html
+++ b/templates/web/emptyhomes/report/display.html
@@ -1,5 +1,5 @@
 [% 
-    problem_title = loc('Viewing a problem') | html;
+    problem_title = loc('Viewing a problem');
     INCLUDE 'header.html'
         title = problem_title
         robots = 'noindex, nofollow'
diff --git a/templates/web/fixmystreet/alert/index.html b/templates/web/fixmystreet/alert/index.html
index 7bec66305..8d4459c01 100644
--- a/templates/web/fixmystreet/alert/index.html
+++ b/templates/web/fixmystreet/alert/index.html
@@ -21,7 +21,7 @@ within a certain distance of a particular location.') %]
 <form method="get" action="/alert/list" class="full-width">
   <fieldset>
     <div class="form-txt-submit-box">
-      <input type="text" name="pc" value="[% pc | html %]" placeholder="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]">
+      <input type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
       <input class="green-btn" type="submit" value="[% loc('Go') %]">
     </div>
   </fieldset>
diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html
index 605e428a3..04b23ca7f 100644
--- a/templates/web/fixmystreet/index.html
+++ b/templates/web/fixmystreet/index.html
@@ -38,7 +38,7 @@ Modernizr.load({
         <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
             <label for="pc">[% question %]:</label>
             <div>
-                <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]">
+                <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
                 <input type="submit" value="[% loc('Go') %]" id="submit">
             </div>
         </form>
diff --git a/templates/web/fixmystreet/my/my.html b/templates/web/fixmystreet/my/my.html
index 687c5686e..4793989f8 100644
--- a/templates/web/fixmystreet/my/my.html
+++ b/templates/web/fixmystreet/my/my.html
@@ -78,9 +78,13 @@ END %]
                     [% END %]
                 </small>
             </div>    
+            [% IF p.photo %]
+            <div class="img">
+                <img height="60" width="90" src="/photo/[% p.id %].fp.jpeg" alt="">
+            </div>
+            [% END %]
         </a>
     </li>
 
     [% "</ul>" IF loop.last %]
 [% END %]
-
diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index 8a1625d88..72c637a5b 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -1,7 +1,7 @@
 [% 
     PROCESS "maps/${map.type}.html";
 
-    problem_title = problem.title _ ' - ' _ loc('Viewing a problem') | html;
+    problem_title = problem.title _ ' - ' _ loc('Viewing a problem');
     INCLUDE 'header.html'
         title = problem_title
         rss = [ loc('Updates to this problem, FixMyStreet'), "/rss/$problem.id" ]
diff --git a/templates/web/fixmystreet/report/update.html b/templates/web/fixmystreet/report/update.html
new file mode 100644
index 000000000..0803ac758
--- /dev/null
+++ b/templates/web/fixmystreet/report/update.html
@@ -0,0 +1,28 @@
+[% IF loop.first %]
+<section class="full-width">
+    <h4 class="static-with-rule">[% loc('Updates') %]</h4>
+    <ul class="issue-list">
+[% END %]
+        <li>
+            <div class="update-wrap">
+            [% IF update.whenanswered %]
+                <div class="update-text">
+                    <p class="meta-2"> [% INCLUDE meta_line %] </p>
+                </div>
+            [% ELSE %]
+                <div class="update-text">
+                    [% add_links( update.text ) | html_para %]
+
+                    <p class="meta-2">
+                        <a name="update_[% update.id %]"></a>
+                        [% INCLUDE meta_line %]
+                    </p>
+                </div>
+                [% INCLUDE 'report/photo.html' object=update %]
+            [% END %]
+            </div>
+        </li>
+[% IF loop.last %]
+    </ul>
+</section>
+[% END %]
diff --git a/templates/web/fixmystreet/report/updates.html b/templates/web/fixmystreet/report/updates.html
deleted file mode 100644
index 508e2aacc..000000000
--- a/templates/web/fixmystreet/report/updates.html
+++ /dev/null
@@ -1,36 +0,0 @@
-[% FOREACH update IN updates.all %]
-[% IF loop.first %]
-<section class="full-width">
-    <h4 class="static-with-rule">[% loc('Updates') %]</h4>
-    <ul class="issue-list">
-[% END %]
-        <li>
-            <div class="update-wrap">
-                <div class="update-text">
-                    [% add_links( update.text ) | html_para %]
-
-                    <p class="meta-2">
-                        <a name="update_[% update.id %]"></a>
-                        [% IF update.anonymous || update.name == '' %]
-                            [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%]
-                        [%- ELSIF update.user.from_council %]
-                            [% user_name = update.user.name | html %]
-                            [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%]
-                        [%- ELSE %]
-                            [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%]
-                        [%- END -%]
-                        [%- c.cobrand.extra_update_meta_text(update) -%]
-                        [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %]
-                        [%- ", " _ loc( 'reopened' ) IF update.mark_open %]
-                        [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %]
-                    </p>
-                </div>
-
-                [% INCLUDE 'report/photo.html' object=update %]
-            </div>
-        </li>
-[% IF loop.last %]
-    </ul>
-</section>
-[% END %]
-[% END %]
\ No newline at end of file
diff --git a/templates/web/fixmystreet/reports/cobrand_stats.html b/templates/web/fixmystreet/reports/cobrand_stats.html
deleted file mode 100644
index e69de29bb..000000000
--- a/templates/web/fixmystreet/reports/cobrand_stats.html
+++ /dev/null
diff --git a/templates/web/fixmystreet/reports/council.html b/templates/web/fixmystreet/reports/council.html
deleted file mode 100755
index cf5729fb3..000000000
--- a/templates/web/fixmystreet/reports/council.html
+++ /dev/null
@@ -1,131 +0,0 @@
-[% IF ward %]
-    [% name = "$ward.name, $council.name"
-       thing = loc('ward')
-    %]
-[% ELSE %]
-    [% name = council.name
-       thing = loc('council')
-    %]
-[% END %]
-
-[%
-    PROCESS "maps/${map.type}.html";
-    INCLUDE 'header.html',
-    title = tprintf(loc('%s - Summary reports'), name)
-    context = 'reports'
-    bodyclass = 'mappage'
-    rss = [ tprintf(loc('Problems within %s, FixMyStreet'), name), rss_url ]
-%]
-
-[% map_html %]
-</div>
-
-<div id="side">
-
-<h1 id="reports_heading">
-    [% IF ward %]
-    [% ward.name %]<span>, </span><a href="[% council_url %]">[% council.name %]</a>
-    [% ELSE %]
-    [% council.name %]
-    [% END %]
-</h1>
-
-[% IF council.generation_high == 10 AND c.cobrand.country == 'GB' %]
-    <p class="alert">This council no longer exists.
-    [% IF council.name.match('Penwith|Kerrier|Carrick|Restormel|Caradon|North Cornwall') %]
-    Its area is now covered by <a href="/reports/Cornwall">Cornwall Council</a>.
-    [% ELSIF council.name.match('Durham|Easington|Sedgefield|Teesdale|Wear Valley|Derwentside|Chester le Street') %]
-    Its area is now covered by <a href="/reports/Durham+County">Durham County Council</a>.
-    [% ELSIF council.name.match('Blyth Valley|Wansbeck|Castle Morpeth|Tynedale|Alnwick|Berwick upon Tweed') %]
-    Its area is now covered by <a href="/reports/Northumberland">Northumberland County Council</a>.
-    [% ELSIF council.name.match('North Shropshire|Oswestry|Shrewsbury and Atcham|South Shropshire|Bridgnorth') %]
-    Its area is now covered by <a href="/reports/Shropshire">Shropshire Council</a>.
-    [% ELSIF council.name.match('Salisbury|West Wiltshire|Kennet|North Wiltshire') %]
-    Its area is now covered by <a href="/reports/Wiltshire">Wiltshire Council</a>.
-    [% ELSIF council.name.match('Ellesmere Port and Neston|Vale Royal|Chester') %]
-    Its area is now covered by <a href="/reports/Cheshire+West+and+Chester">Cheshire West and Chester Council</a>.
-    [% ELSIF council.name.match('Macclesfield|Congleton|Crewe and Nantwich') %]
-    Its area is now covered by <a href="/reports/Cheshire+East">Cheshire East Council</a>.
-    [% ELSIF council.name.match('Mid Bedfordshire|South Bedfordshire') %]
-    Its area is now covered by <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>.
-    [% ELSIF council.name.match('Cheshire') %]
-    Its area is now covered by <a href="/reports/Cheshire+West+and+Chester">Cheshire West and Chester Council</a> or
-    <a href="/reports/Cheshire+East">Cheshire East Council</a>.
-    [% ELSIF council.name.match('Bedfordshire') %]
-    Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a> or
-    <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>.
-    [% END %]
-    </p>
-[% ELSE %]
-    <div class="shadow-wrap">
-        <ul id="key-tools"[% IF NOT children.size %] class="singleton"[% END %]>
-            <li><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[% tprintf(loc('Get updates of problems in this %s'), thing) %]</a></li>
-            [% IF children.size %]
-            <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% loc('Wards of this council') %]</a></li>
-            [% END %]
-        </ul>
-    </div>
-[% END %]
-
-[% INCLUDE 'reports/cobrand_stats.html' %]
-
-[% IF children.size %]
-<section id="council_wards" class="hidden-js">
-    <h2>[% loc('Wards of this council') %]</h2>
-    <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
-    <ul class="issue-list-a full-width">
-        [% FOR child IN children.values.sort('name') %]
-        <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li>
-        [% END %]
-    </ul>
-</section>
-[% END %]
-
-[% IF c.cobrand.moniker == 'fixmystreet' %]
-<p class="promo">
-    FixMyStreet is now available for local council websites.
-    <a href="/for-councils">Find&nbsp;out&nbsp;more</a>.
-</p>
-[% END %]
-
-[% INCLUDE 'pagination.html', param = 'p' %]
-
-<section class="full-width">
-    [% INCLUDE column
-        problems = problems.${council.id}
-    %]
-</section>
-
-[% INCLUDE 'pagination.html', param = 'p' %]
-
-</div>
-[% INCLUDE 'footer.html' %]
-
-[% BLOCK column %]
-[% IF problems %]
-
-<ul class="issue-list-a">
-[% FOREACH problem IN problems %]
-    <li>
-        <a href="[% c.uri_for('/report/' _ problem.id) %]">
-            <div class="text">
-                <h4>[% problem.title | html %]</h4>
-                <small>[% prettify_epoch( problem.confirmed, 1 ) %]</small>
-                [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %]
-                [% IF c.cobrand.moniker != 'emptyhomes' %]
-                    [% IF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small> [% END %]
-                [% END %]
-            </div>
-            [% IF problem.photo %]
-            <div class="img">
-                <img height="60" width="90" src="/photo/[% problem.id %].fp.jpeg" alt="">
-            </div>
-            [% END %]
-        </a>
-    </li>
-[% END %]
-</ul>
-
-[% END %]
-[% END %]
-
diff --git a/templates/web/fixmystreet/reports/index.html b/templates/web/fixmystreet/reports/index.html
deleted file mode 100755
index 96367d4bb..000000000
--- a/templates/web/fixmystreet/reports/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-[% INCLUDE 'header.html', title = loc('Summary reports'),  bodyclass => 'fullwidthpage' %]
-
-<h1>[% loc('All Reports') %]</h1>
-
-<div class="intro">
-    <p>
-    [% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %]
-    [% loc('Greyed-out lines are councils that no longer exist.') %]
-    </p>
-</div>
-
-<table cellpadding="3" cellspacing="1" border="0" class="nicetable">
-	<thead>
-		<th class="title">[% loc('Name') %]</th>
-		<th class="data">[% loc('New <br>problems') %]</th>
-		<th class="data">[% loc('Older <br>problems') %]</th>
-		<th class="data">[% loc('Old / unknown <br>problems') %]</th>
-		<th class="data">[% loc('Recently <br>fixed') %]</th>
-		<th class="data">[% loc('Older <br>fixed') %]</th>
-	</thead>
-
-	[% FOREACH area IN areas_info_sorted %]
-	<tr align="center"
-	[%- IF area.generation_high == 10 %] class="gone"
-	[%- ELSIF ! (loop.count % 2) %] class="a"
-	[%- END %]>
-		<td class="title"><a href="[% area.url %]">[% area.name %]</a></td>
-		<td class="data">[% open.${area.id}.new or 0 %]</td>
-		<td class="data">[% open.${area.id}.older or 0 %]</td>
-		<td class="data">[% open.${area.id}.unknown or 0 %]</td>
-		<td class="data">[% fixed.${area.id}.new or 0 %]</td>
-		<td class="data">[% fixed.${area.id}.old or 0 %]</td>
-	</tr>
-	[% END %]
-</table>
-
-[% INCLUDE 'footer.html' pagefooter => 'yes' %]
diff --git a/templates/web/fixmystreet/reports/ward.html b/templates/web/fixmystreet/reports/ward.html
deleted file mode 100755
index 8b65ffb28..000000000
--- a/templates/web/fixmystreet/reports/ward.html
+++ /dev/null
@@ -1 +0,0 @@
-[% INCLUDE reports/council.html %]
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
new file mode 100644
index 000000000..c0376274e
--- /dev/null
+++ b/web/cobrands/bromley/_colours.scss
@@ -0,0 +1,8 @@
+/* COLOURS */
+
+$primary: rgb(76,120,168);
+$primary_b: #000000;
+$primary_text: #ffffff;
+
+$contrast1: #00BD08;
+$contrast2: #AA8D11;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
new file mode 100644
index 000000000..4594f832f
--- /dev/null
+++ b/web/cobrands/bromley/base.scss
@@ -0,0 +1,7 @@
+@import "../fixmystreet/_h5bp";
+@import "./_colours";
+@import "../fixmystreet/_mixins";
+@import "compass";
+
+@import "../fixmystreet/_base";
+
diff --git a/web/cobrands/bromley/config.rb b/web/cobrands/bromley/config.rb
new file mode 100644
index 000000000..cab97b18f
--- /dev/null
+++ b/web/cobrands/bromley/config.rb
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = ""
+sass_dir = ""
+images_dir = ""
+javascripts_dir = ""
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+
+line_comments = false # by Compass.app 
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
new file mode 100644
index 000000000..3dc34c6c7
--- /dev/null
+++ b/web/cobrands/bromley/layout.scss
@@ -0,0 +1,11 @@
+@import "_colours";
+@import "../fixmystreet/_layout";
+
+body {
+    background: #fff;
+}
+
+#front-main {
+    background: $primary;
+}
+
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
new file mode 100644
index 000000000..4202564f7
--- /dev/null
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -0,0 +1,1469 @@
+/* HEADINGS and TYPOGRAPHY */
+
+body {
+  font-family: 'MuseoSans', 'Helvetica', 'Arial', sans-serif;
+  margin:0;
+  font-size:1em;
+  line-height:1.5;
+  color: #222;
+  background-color: #fff;
+}
+
+
+p {
+  font-size: 1em;
+  font-weight: normal;
+  margin:0 0 1em 0;
+}
+
+small{
+  font-family: 'helvetica', 'arial',sans-serif;
+  font-style: italic;
+  font-size: 0.8125em;
+  line-height: 1.2307em;
+}
+
+h1 {
+  font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif;
+  font-size: 2em;
+  line-height: 1em;
+  font-weight: normal;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+#front-main h1 {
+  margin-top: 0.7em;
+}
+h1#reports_heading span {
+  display: none;
+}
+h1#reports_heading a {
+  display: block;
+  font-size: 50%;
+}
+
+h2 {
+  font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1.5em; /*24px*/
+  line-height: 1.3333em; /*32px*/
+  font-weight: normal;
+  margin-top: 1.333333333em; /*32px*/
+  margin-bottom: 0.666666666em; /*16px*/
+}
+
+h3 {
+  font-size: 1.25em;
+  line-height: 1.20em;
+  margin-top: 1.2em;
+  margin-bottom: 0.8em;
+  font-weight: bold
+}
+
+h4 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1em; 
+}
+
+// default list styles
+ul, ol {
+  font-size: 1em;
+  margin-bottom: 2em;  
+  margin-left: 2em;
+  padding:0;
+}
+
+li{
+  margin-bottom: 0.5em;
+}
+
+ul li{
+  list-style: square;
+}
+
+ol li {
+  list-style:decimal;
+}
+
+// lets you have a traditional ol but with nicely styled numbers
+// for older browsers it just falls back to the normal ol
+ol.big-numbers {
+  padding: 0;
+  margin: 0;
+  counter-reset: li; // reset counter to be 'li' instead of a number
+  > li {
+    position: relative;
+    list-style: none;
+    padding:0 0 0 2.5em;
+    margin-bottom:2em;
+    &:before {
+      content: counter(li); // set the content to be whatever the 'li' var is
+      counter-increment: li; // add to the counter var
+      position: absolute;
+      left: 0;
+      top:-0.2em;
+      color:#ccc;
+      line-height:1;
+      font: {
+        family: 'helvetica', 'arial', sans-serif;
+        weight:bold;
+        size:2.5em;
+      }
+    }
+  }
+}
+
+dl {
+  margin: 0;
+  padding: 0;
+  dt {
+    font-size: 1em;
+    line-height: 1.5em;
+    font-weight: bold;
+  }
+  dd {
+    font-weight: 1em;
+    line-height: 1.5em;
+    margin:0 0 1em 0;
+  }
+}
+
+blockquote {
+  p:before {
+    content: '“';
+  }
+  p:after {
+    content: '”';
+  }
+}
+
+pre {
+  font-family: monospace;
+}
+
+img {
+  //do this otherwise IE will just not display
+  //any img without a height defined
+  height:auto;
+}
+
+select, input, textarea {
+  font-size: 99%;
+  max-width: 95%;
+}
+
+
+// links
+a,
+a:visited {
+  text-decoration:none;
+  color:#0BA7D1;
+  &:hover,
+  &:active {
+    text-decoration:underline;
+    color:#0D7CCE;    
+  }
+}
+
+// custom type
+.small-print {
+  @extend small;
+  margin-bottom: 1.2307em;
+  color:#666666;
+}
+.meta{
+  color:#555555;
+  font-style: italic;
+  margin-bottom: 0px;
+}
+.meta-2{
+  font-family: 'helvetica', 'arial',sans-serif;
+  color:#666666;
+  font-style: italic;
+  font-size: 0.75em;
+}
+
+h4.static{
+  font-family: 'helvetica', 'arial',sans-serif;
+  text-transform: uppercase;
+  font-size: 0.875em;
+  line-height: 1.71428em;
+  color:#666;
+  margin-top: 2em;
+}
+h4.static-with-rule{
+  @extend.static;
+  background: #f6f6f6;
+  border-top: 0.25em solid $primary;
+  margin-bottom:0.25em;
+  padding: 0.5em 1em;
+}
+
+/* FORMS */
+
+// input placeholders, these need to be on separate lines as if the browser
+// can't understand a selector it will invalidate the whole line.
+::-webkit-input-placeholder {
+  color: #666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+:-moz-placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+:-ms-placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+//this only gets used when the browser doesn't support @placeholder
+.placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+
+// wrap anything inside the form in a fieldset to give
+// us the right spacing
+fieldset {
+  margin: 1em;
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file],
+textarea {
+  width: 100%;
+  // adjust so the sides line up
+  padding: 0.5em;
+  margin: 0 0 0 -0.5em;
+}
+
+textarea {
+  border: 0.125em solid #888888;
+  @include border-radius(0.25em);
+  display: block;
+  font-size: 1em;
+  line-height: 1.5em;
+  font-family: 'helvetica', 'arial', sans-serif;
+  min-height:8em;
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file] {
+  border: 0.125em solid #888888;
+  @include border-radius(0.25em);
+  display: block;
+  font-size: 1em;
+  line-height: 1em;
+}
+input[type=file] {
+  margin-bottom:1em;
+}
+
+label{
+  display: block;
+  margin-top: 1.25em;
+  margin-bottom: 0.25em;
+  font-weight: bold;
+  &.inline{
+    display: inline;
+    padding: 0 2em 0 1em;
+    font-weight: normal;
+  }
+}
+
+// grey background, full width box
+.form-box {
+  margin: 0 -2em 0.25em -2em;
+  background:#eeeeee;
+  padding:1em 2em 1em 2em;
+  max-width:26em;
+  >input[type=text] {
+    margin-bottom:1em;
+  }
+  .title {
+    font-size:1.25em;
+    margin:0.5em 0;
+  }
+  h5 {
+    margin:0;
+    font: {
+      size:1.125em;
+      weight:normal;
+    }
+    strong {
+      font-size:2em;
+      margin-right:0.25em;
+    }
+  }
+}
+// IE6 doesn't extend the grey box back with the above negative margins, and
+// the password box falls off screen for some reason. Just have boring margins,
+// it looks okay.
+.ie6 .form-box {
+    margin: 0 0 0.25em 0;
+}
+
+.form-txt-submit-box {
+  min-height:3em;
+  input[type=password],
+  input[type=text],
+  input[type=email] {
+    width: 65%;
+    float:left;
+  }
+  input[type=submit] {
+    float:right;
+    width:28%;
+    margin-right:0.25em;
+    padding-top:0.7em;
+    padding-bottom:0.6em;
+  }
+}
+
+.checkbox-group {
+  margin:1em 0;
+}
+
+
+// form errors
+div.form-error,
+p.form-error {
+  @include inline-block;
+  background:#ff0000;
+  color:#fff;
+  padding:0 0.5em;
+  margin:0 0 0 -0.5em;
+  @include border-radius(0.25em 0.25em 0 0);
+}
+
+input.form-error,
+textarea.form-error {
+  border-color:#ff0000;
+  @include border-radius(0 0.25em 0.25em 0.25em);
+}
+
+ul.error {
+  background:#ff0000;
+  color:#fff;
+  padding:0 0.5em;
+  margin:0 0 0 -0.5em;
+  @include border-radius(0.25em);
+}
+
+// don't display valid error boxes as now the page jump
+// won't be until the user submits, which is fine
+div.label-valid,
+p.label-valid {
+  display:none !important;
+  visibility: hidden;
+}
+
+
+
+/*** LAYOUT ***/
+
+// Padding creates page margins on mobile
+.container{
+  padding: 0 1em;
+}
+
+// Use full width to reverse .container margins
+.full-width {
+  margin: 0 -1em;
+}
+
+// #site-header creates grey bar in mobile
+// .nav-wrapper-2 is used on desktop
+#site-header{
+  border-top: 0.25em solid $primary;
+  height: 3em;
+  @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
+  .container {
+    min-height:4em;
+  }
+}
+#site-logo{
+  display: block;
+  width: 175px;
+  height: 40px;
+  top: 0.4em;
+  background: url('/cobrands/fixmystreet/images/sprite.png') -3px -3px no-repeat;
+  text-indent: -999999px;
+  position: absolute;
+  z-index:2;
+}
+.ie6 #site-logo {
+  background: url('/cobrands/fixmystreet/images/ie_logo.gif') 0 -5px no-repeat;
+}
+// this is a skip to nav for mobile users only
+#nav-link {
+  width: 50px;
+  height: 48px;
+  background: url('/cobrands/fixmystreet/images/sprite.png') -5px -916px no-repeat;
+  display: block;
+  text-indent: -999999px;
+  position: absolute;
+  right:2em;
+  top:-2px;
+  &:hover {
+    top:2px;
+  }
+}
+
+
+#main-nav{
+  ul{
+    @include list-reset-soft;
+    li{
+      a, span {
+        display: block;
+        padding: 0.5em 1em;
+        background:#f6f6f6;
+        color:#333;
+        font-size: 1.25em;
+        border-bottom: 0.25em solid #333;
+      }
+      a:hover, span.hover {
+        background:  #333;
+        color:#fff;
+        text-decoration: none;
+      }
+    }
+    &#mysoc-menu{
+      li {
+        a {
+          background:$primary;
+          &#mysoc-logo {
+            background-image:url('/cobrands/fixmystreet/images/sprite.png');
+            background-repeat:no-repeat;
+            background-position:-240px -38px;
+            text-indent:-999999px;
+          }
+        }
+      }
+    }
+  }
+}
+.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo {
+  background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat;
+}
+//defines where the table caption is (login stuff on mob, nav menu on desktop)
+.wrapper {
+  width:100%;
+  display:table;
+  caption-side:bottom;
+}
+// this is the user's logged in details or the login link etc
+#user-meta {
+  p {
+    position: relative;
+    background:$primary;
+    padding:1em 6em 1em 1em;
+    a {
+      position: absolute;
+      right:1em;
+      @include inline-block;
+      text-transform:uppercase;
+      font-size:0.75em;
+      background:#333;
+      padding:0.25em 0.75em;
+      color:#fff;
+      @include border-radius(0.25em);
+    }
+  }
+}
+
+
+// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
+.shadow-wrap {
+  @extend .full-width;
+  ul#key-tools{
+    @include list-reset-soft;
+    margin-bottom: 1em;
+    display: table;
+    width:100%;
+    li{
+      display: table-cell;
+      vertical-align: bottom;
+      text-align: center;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display: block;
+        background-color: #f5f5f5;
+        background-repeat: no-repeat;
+        color:#333;
+        padding:4em 2em 1em 2em;
+        text-transform:uppercase;
+        font: {
+          size:0.6875em;
+          family: 'helvetica', 'arial', sans-serif;
+        }
+        &:hover, &.hover, &.active {
+          text-decoration:none;
+          background-color:#333;
+          color:#fff;
+        }
+        &.abuse {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2424px;
+        }
+        &.feed {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2563px;
+        }
+        &.chevron {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2716px;
+        }
+        &.hover, &.active {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2064px;
+        }
+      }
+    }
+  }
+}
+
+//because display:table doesn't work we float
+.ie6, .ie7 {
+  .shadow-wrap {
+    ul#key-tools{
+      background:#f5f5f5;
+      li{
+        float:left;
+        a {
+          padding-left:1.5em;
+          padding-right:3em;
+        }
+      }
+    }
+  }
+}
+.ie6 .shadow-wrap ul#key-tools li a {
+  &.abuse {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right 0px;
+  }
+  &.feed {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right -58px;
+  }
+  &.chevron {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right -116px;
+  }
+  &:hover {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif');
+  }
+}
+
+
+//footer blocks
+#footer-mobileapps {
+  @extend .full-width;
+  padding:1em;
+  h4 {
+    margin:0;
+  }
+  ul {
+    @include list-reset-soft;
+    li {
+      border-bottom:1px solid #AFAFAF;
+      &:last-child {
+        border-bottom:none;
+      }
+      a {
+        display:block;
+        padding:0.5em 0;
+      }
+    }
+  }
+}
+
+#footer-help {
+  ul {
+    @include list-reset-soft;
+    li {
+      border-bottom:1px solid #AFAFAF;
+      &:last-child {
+        border-bottom:none;
+      }
+      h4 {
+        margin:0.75em 0 0.25em 0;
+      }
+      p {
+        font-size:0.75em;
+      }
+    }
+  }
+}
+
+
+
+/*BUTTONS*/
+
+// Default style set for buttons, inputs and .btn class. Red and green class available.
+
+button, input[type=submit],.btn{
+  @include button-reset;
+}
+
+.green-btn,
+button.green-btn,
+input.green-btn{
+  @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
+}
+
+.red-btn,
+button.red-btn,
+input.red-btn{
+  @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
+}
+
+.final-submit,
+input.final-submit {
+  margin:1em 0.5em;
+  float:right;
+}
+
+.button-right,
+.button-left,
+a.button-right,
+a.button-left {
+  @include inline-block;
+  cursor:pointer;
+  font-size: 1em;
+  line-height: 1;
+  margin:0;
+  border:1px solid #999;  
+  color:#333;
+  background: #eee;
+  @include border-radius(4px);
+  &:hover{
+    color:#fff;
+    background:#777;
+    text-decoration: none;
+    border:1px solid #666;  
+  }
+}
+.button-right,
+a.button-right,
+:hover.button-right,
+a:hover.button-right {
+  padding:1em 3em 1em 1em;
+  background-image: url('/cobrands/fixmystreet/images/sprite.png');
+  background-repeat:no-repeat;
+  background-position:right -686px;
+}
+
+.button-left,
+a.button-left,
+:hover.button-left,
+a:hover.button-left {
+  padding:1em 1em 1em 3em;
+  background-image: url('/cobrands/fixmystreet/images/sprite.png');
+  background-repeat:no-repeat;
+  background-position:-18px -802px;
+}
+
+.big-green-banner {
+  position: relative;
+  z-index:1000;
+  top:-1.75em;
+  background: $contrast1;
+  color: #fff;
+  padding:1em;
+  text: {
+    transform:uppercase;
+    align:center;
+  }
+  font-size:0.875em;
+  &:before {
+    content: "";
+    left:-0.5em;
+    top:0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 0.5em solid transparent;
+    border-bottom: 0.5em solid #4B8304;
+  }
+}
+
+.banner {
+  position: relative;
+  z-index:1100;
+  p {
+    position: absolute;
+    top:-1.95em;
+    right:0;
+    @include inline-block;
+    font-size:0.6875em;//11px
+    line-height:1em;
+    padding:0.5em 1em;
+    margin:0;
+    color:#1a1a1a;
+    background: #ccc;
+    text: {
+      transform:uppercase;
+      align:center;
+    }
+    &:before {
+      content: "";
+      left:-0.5em;
+      top:0;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 0.5em solid transparent;
+      border-bottom: 0.5em solid #888;
+    }
+    &#fixed {
+      color:#fff;
+      background: $contrast1;
+      &:before {
+        border-bottom: 0.5em solid #4B8304;
+      }
+    }
+  }
+}
+
+/*OTHER*/
+
+.plain-list {
+  @include list-reset-soft;
+  li {
+    margin-bottom:1em;
+  }
+}
+
+.issue-list{
+  margin: 0 0 1em 0;
+  padding: 0;
+  border-bottom: 0.25em solid $primary;
+  li{
+    list-style: none;
+    background: #f6f6f6;
+    margin: 0.25em 0 0 0;
+    padding: 0.5em 1em;
+    display:block;
+    .update-wrap {
+      display:table;
+      width:100%;
+      .update-text,
+      .update-img {
+        display:table-cell;
+        vertical-align:top;
+        p {
+          margin-bottom: 0.5em;
+        }
+      }
+      .update-img {
+        text-align:right;
+        img {
+          margin:-0.5em -1em 0 0.5em;
+          height:auto;
+        }
+      }
+    }
+  }
+}
+//display:table fixes
+.ie7, .ie7 {
+  .issue-list li .update-wrap {
+    .update-text {
+      float:left;
+      width:19em;
+    }
+    .update-img {
+      float:right;
+    }
+  }
+}
+
+.issue-list-a {
+  margin: 0 0 1em 0;
+  padding: 0;
+  border-bottom: 0.25em solid $primary;
+  li {
+    list-style: none;
+    margin:0;
+    padding:0;
+    a {
+      margin: 0.25em 0 0 0;
+      display:table;
+      background: #f6f6f6;
+      color:#222222;
+      width:100%;
+      &:hover {
+        text-decoration:none;
+        color:#222222;
+        background:#e6e6e6;
+      }
+      .text,
+      .img {
+        display:table-cell;
+        vertical-align:top;
+      }
+      .img {
+        text-align:right;
+        img {
+          height:auto;
+        }
+      }
+      .text {
+        padding:0.25em 1em;
+        h4 {
+          margin:0;
+        }
+        small {
+          color:#666;
+        }
+      }
+    }
+    >p {
+      margin: 0.25em 0 0 0;
+      padding: 0.5em 1em;
+      background: #f6f6f6;
+    }
+  }
+}
+.list-a {
+  @extend .issue-list-a;
+  a {
+    padding:0.5em 1em;
+    font-weight:bold;
+  }
+}
+//display:table fixes
+.ie6, .ie7 {
+  .issue-list-a {
+    overflow:hidden;
+    li a {
+      clear:both;
+      width:auto;
+      display:block;
+      overflow:hidden;
+      .text {
+        float:left;
+        width:18em;
+      }
+      .img {
+        width:6.25em;
+        float:right;
+      }
+    }
+  }
+}
+.ie6 .issue-list-a li a {
+  height:5.5em;
+  .img img {
+    height:60px;
+  }
+}
+
+// fancybox gallery images have a magnifying glass in the corner
+.update-img {
+  a {
+    @include inline-block;
+    position:relative;
+    span {
+      position:absolute;
+      top:0;
+      right:0;
+      display:block;
+      width:20px;
+      height:20px;
+      opacity: 0.5;
+      background:#fff url(images/sprite.png) -16px -1098px no-repeat;
+      //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
+      font: 0/0 a;
+      color: transparent;
+    }
+    &:hover span {
+      opacity: 1;
+    }
+  }
+}
+//bit of a hack - as we can't use em's, push the span out to the right
+//by how much it would be if the user did not resize the text
+.issue-list li .update-wrap .update-img a span {
+  right:-16px;
+  top:-8px;
+}
+
+.problem-header {
+  margin-bottom:1em;
+}
+.problem-header .update-img {
+    float: right;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+// map stuff
+#map_box{
+  @extend .full-width;
+  background: #333;
+  height: 29em;
+  margin-bottom: 1em;
+  overflow: hidden;
+  position: relative;
+  #map {
+    width:100%;
+    height:100%;
+  }
+}
+
+// OpenLayers fix for navigation being top right
+// Left and right so that zoom can be left, pan right.
+#fms_pan_zoom {
+  right: 0.5em !important;
+  top: 0.5em !important;
+  left: 0.5em !important;
+}
+// The left and right of the above causes the navigation to move off-screen left in IE6.
+// XXX Need to check IE7
+.ie6 #fms_pan_zoom {
+  left: auto !important;
+}
+
+// Openlayers map controls (overrides)
+#fms_pan_zoom_panup,
+#fms_pan_zoom_pandown,
+#fms_pan_zoom_panleft,
+#fms_pan_zoom_panright,
+#fms_pan_zoom_zoomin,
+#fms_pan_zoom_zoomout {
+  width:36px !important;
+  height:36px !important;
+  text-indent:-999999px;
+  opacity:0.85;
+  background:url('/cobrands/fixmystreet/images/sprite.png') no-repeat;
+  &:hover {
+    opacity:1;
+  }
+  filter: none !important; // Override OpenLayers PNG handling of the navigation
+}
+
+#fms_pan_zoom_zoomworld {
+  display:none !important;
+  visibility:none !important;
+}
+
+#fms_pan_zoom_panup {
+  background-position:-42px -222px;
+  right:30px !important;
+  left: auto !important;
+  top:0 !important;
+}
+#fms_pan_zoom_pandown {
+  background-position:-42px -282px;
+  right:30px !important;
+  left: auto !important;
+  top:72px !important;
+}
+#fms_pan_zoom_panleft {
+  background-position:-12px -252px;
+  width:48px !important;
+  right:48px !important;
+  left: auto !important;
+  top:36px !important;
+}
+#fms_pan_zoom_panright {
+  background-position:-60px -252px;
+  width:48px !important;
+  right:0 !important;
+  left: auto !important;
+  top:36px !important;
+}
+#fms_pan_zoom_zoomin {
+  background-position:-152px -223px;
+  height:44px !important;
+  left:0 !important;
+  top:0 !important;
+}
+#fms_pan_zoom_zoomout {
+  background-position:-152px -259px;
+  height:44px !important;
+  left:0 !important;
+  top:44px !important;
+}
+
+//hide pins, show old reports etc
+#sub_map_links {
+  position: absolute;
+  left: 0;
+  right:0;
+  bottom: 0;
+  z-index: 1100;
+  background:#333;
+  background:rgba(0, 0, 0, 0.7);
+  margin:0;
+  a {
+    @include inline-block;
+    font-size:0.6875em;
+    color:#fff;
+    padding:0.6em 3em 0.5em 1em;
+    background-repeat:no-repeat;
+    &#hide_pins_link {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -3976px;
+    }
+    &#all_pins_link {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -4022px;
+    }
+    &#map_permalink {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -4070px;
+    }
+    &.feed {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -3936px;
+    }
+    &:hover {
+      background-color:#000;
+      text-decoration:none;
+    }
+  }
+}
+
+.ie6 #sub_map_links a {
+  &#hide_pins_link {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right 1px;
+  }
+  &#all_pins_link {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right -45px;
+  }
+  &#map_permalink {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right -93px;
+  }
+}
+
+#mob_sub_map_links {
+  position: absolute;
+  z-index:1100;
+  bottom:0;
+  display:table;
+  margin:0;
+  width:100%;
+  background:rgba(0, 0, 0, 0.7);
+  a {
+    color:#fff;
+    width:50%;
+    padding:0.5em 0;
+    font-size:1em;
+    display:table-cell;
+    text-align:center;
+    &:hover {
+      background:#000;
+      text-decoration:none;
+    }
+  }
+  &.map_complete {
+    background:none;
+    display:block;
+    border-bottom:4px solid #fff;
+    a#try_again {
+      display:block;
+      margin:0 auto 6em auto;
+      background:rgba(0, 0, 0, 0.8);
+      @include border-radius(0.5em);
+    }
+    a#mob_ok {
+      position:absolute;
+      right:1em;
+      bottom:0;
+      height:20px;
+      padding-top:30px;
+      display:block;
+      width:4em;
+      background:#fff url('/cobrands/fixmystreet/images/sprite.png') 12px -4140px no-repeat;
+      color:#000;
+    }
+  }
+}
+
+.mobile-map-banner {
+  margin:0;
+  position: absolute;
+  top:0;
+  left:0;
+  right:0;
+  font-size:0.75em;
+  background:rgba(0, 0, 0, 0.7);
+  padding:0.75em 30px;
+  a {
+    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
+    font: {
+      weight:normal;
+      size:0.875em;
+    }
+    line-height:1;
+    padding:0.5em 0.75em;
+    position:absolute;
+    left:0.3em;
+    top:0.3em;
+  }
+}
+
+.olControlAttribution {
+    bottom: 3.25em !important;
+    right: 0.25em !important;
+    left: 0.25em !important;
+    color: #222222;
+    font-size:0.75em !important;
+}
+.olControlAttribution img {
+    vertical-align: bottom;
+}
+.olControlPermalink {
+    bottom: 3px !important;
+    right: 3px;
+}
+
+/* Drag is only present in noscript form. XXX Copy from core. */
+#drag {
+    input, img {
+        position: absolute;
+        border: none;
+        max-width: none;
+    }
+    input {
+        cursor: crosshair;
+        background-color: #cccccc;
+    }
+    img {
+        cursor: move;
+    }
+    img.pin {
+        z-index: 100;
+        background-color: inherit;
+    }
+    a img.pin {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+
+// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar)
+a.rap-notes-trigger,
+a:hover.rap-notes-trigger {
+  display:block;
+  width:90%;
+  padding-left:5%;
+  padding-right:5%;
+}
+.rap-notes {
+  margin:1em 0;
+}
+
+//report a problem tabs
+#problems-nav {
+  padding:0 1em;
+  overflow:hidden;
+  border-bottom:0.25em solid #333;
+  ul {
+    @include list-reset-soft;
+    display:table;
+    width:100%;
+    li {
+      display:table-cell;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display:block;
+        background:#e2e2e2;
+        color:#333;
+        padding:1em;
+        text: {
+          transform:uppercase;
+          align:center;
+        }
+        &:hover {
+          text-decoration:none;
+          background:#e6e6e6;
+        }
+        &.active {
+          background:#333;
+          color:#fff;
+        }
+      }
+    }
+  }
+}
+
+//display:table fixes
+.ie6, .ie7 {
+  #problems-nav {
+    clear:both;
+    margin:0;
+    padding:0;
+    ul li {
+      float:left;
+    }
+  }
+}
+
+
+table.nicetable {
+  width:100%;
+  margin-bottom:2em;
+  thead {
+    border-bottom:0.25em solid #ccc;
+    th {
+      font-size:0.75em;
+    }
+  }
+  tr {
+    &.a {
+      background:#f6f6f6;
+    }
+    &:nth-child(even) {
+      background:#f6f6f6;
+    }
+    &.gone {
+        color: #666666;
+        background-color: #cccccc;
+    }
+    &:hover {
+      background:#FFF5CC;
+      cursor:pointer;
+    }
+    td {
+      padding:0.25em;
+      a {
+        &:hover {
+          text-decoration:none;
+        }
+      }
+    }
+  }
+  .title {
+    text-align:left;
+  }
+  .data {
+    width:12%;
+  }
+}
+
+.promo {
+  @extend .full-width;
+  background:$primary;
+  padding:1em;
+  margin-bottom:1em;
+  overflow:hidden;
+  position: relative;
+  .close-promo {
+    position:absolute;
+    top:0.5em;
+    right:0.5em;
+    display:block;
+    width:16px;
+    height:16px;
+    text-indent:-999999px;
+    background:url(images/sprite.png) -341px -263px no-repeat;
+    @include border-radius(4px);
+    &:hover {
+      background:#222 url(images/sprite.png) -341px -223px no-repeat;
+    }
+  }
+}
+
+.alert {
+  @extend .full-width;
+  background:#ff0000;
+  padding:1em;
+  margin-bottom:1em;
+  color:#fff;
+  a, a:hover {
+    color:$primary;
+  }
+}
+
+.pagination {
+  text-align:center;
+  padding:0.5em 1em;
+  background:#eee;
+  position:relative;
+  .prev {
+    position:absolute;
+    left:0.5em;
+  }
+  .next {
+    position:absolute;
+    right:0.5em;
+  }
+  a {
+    @include inline-block;
+    background:$primary;
+    padding-left:0.5em;
+    padding-right:0.5em;
+    color:#1a1a1a;
+    &:hover {
+      color:#1a1a1a;
+      text-decoration:none;
+      background:$primary/1.1;
+    }
+  }
+}
+
+// this is a bit of a hack to get some differentation between desk and mobile
+.desk-only {
+  display:none !important;
+}
+
+// hide anything with this class if js is working
+.js .hidden-js {
+  display: none;
+  visibility: hidden;
+}
+
+// hide anything with this class if js is NOT working
+.no-js .hidden-nojs {
+  display: none !important;
+  visibility: hidden;
+}
+
+
+/* Front page */
+#front-main {
+  text-align:center;
+  h2 {
+    font: {
+      style:italic;
+      family: 'helvetica', 'arial', sans-serif;
+      size:1.1875em;
+    }
+    color:#4d4d4d;
+  }
+  #postcodeForm {
+    @extend .full-width;
+    padding:1em;
+    color: $primary_text;
+    background: $primary;
+    font-family: 'helvetica', 'arial', sans-serif;
+    label {
+      margin:0;
+    }
+    div {
+      display:table;
+      width:100%;
+      background:#fff;
+      border:1px solid $primary_b;
+      input#pc {
+        display:table-cell;
+        margin:0;
+        padding:0.25em 2%;
+        width:82%;
+        border:none;
+        background:none;
+        line-height:1.5em;
+      }
+      input#submit {
+        display:table-cell;
+        border:none;
+        padding:0;
+        margin:0;
+        width:14%;
+        height:35px;
+        background:#000;
+        color:#fff;
+        text-transform:uppercase;
+        @include border-radius(0);
+        &:hover {
+          background:#333;
+        }
+      }
+    }
+  }
+  a#geolocate_link {
+    @include inline-block;
+    vertical-align:top;
+    background:#1a1a1a;
+    color:#C8C8C8;
+    padding:0.5em;
+    font: {
+      family: 'helvetica', 'arial', sans-serif;
+      size:0.8125em;
+    }
+    @include border-radius(0 0 0.25em 0.25em);
+    &:hover {
+      text-decoration:none;
+      background:#2a2a2a;
+    }
+  }
+}
+
+#front-howto {
+  #front_stats {
+    display:table;
+    width:100%;
+    color: $primary_text;
+    background: $primary;
+    font-family: 'helvetica', 'arial', sans-serif;
+    div {
+      display:table-cell;
+      text-align:center;
+      padding:1em;
+      line-height:1.25em;
+      font: {
+        size:0.8125em;
+        weight:bold;
+      }
+      big {
+        display:block;
+        margin-bottom:0.5em;
+        font-size:1.5385em;
+      }
+    }
+  }
+}
+
+#front-recently {
+  .issue-list-a {
+    border-bottom:none;
+    margin-bottom:0;
+  }
+}
+
+#alerts {
+    ul {
+        margin-bottom: 1em;
+    }
+    li {
+        padding: 0em;
+        margin-bottom: 0.5em;
+    }
+    .a {
+        background: #f6f6f6;
+    }
+    img[width="16"] {
+        float: right;
+    }
+}
+
diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss
index 8179f470d..2463cdeeb 100644
--- a/web/cobrands/fixmystreet/_colours.scss
+++ b/web/cobrands/fixmystreet/_colours.scss
@@ -1,11 +1,8 @@
 /* COLOURS */
 
-$colour_dark: #4e1602;
-$colour: #c23704;
-$colour_alt: #ffeeaa;
-
-
 $primary: #FFD000;
+$primary_b: #F3B11E;
+$primary_text: #222;
 
 $contrast1: #00BD08;
-$contrast2: #AA8D11;
\ No newline at end of file
+$contrast2: #AA8D11;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
new file mode 100644
index 000000000..534b285b1
--- /dev/null
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -0,0 +1,1065 @@
+@import "compass";
+@import "_mixins";
+
+//hacks for desk/mob only stuff
+.desk-only {
+  display:block !important;
+}
+.mob-only {
+  display:none !important;
+}
+
+body {
+  background: #1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+// Page wrapper and header bits follow
+
+.container{
+  margin: 0 auto;
+  padding: 0em;
+  width: 60em;
+  position: relative;
+  z-index:1;
+}
+
+//z-index stack order gets reset to 0 in ie6/7 if you position anything,
+//so to fix things we give it a high value (don't ask me why)
+//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
+//this affects #site-logo
+.ie6, .ie7 {
+  .container {
+    z-index:100;
+  }
+}
+
+.wrapper{
+  display: table;
+  caption-side: top;
+  width: 100%;
+  .table-cell {
+    display:table-cell;
+  }
+}
+
+//pad the top of the wrapper to allow space for the menu to fit in
+//when its positioned absolute below
+.ie6, .ie7 {
+  .wrapper {
+    padding-top:4em;
+  }
+}
+
+.nav-wrapper{
+  display: table-caption;
+  .nav-wrapper-2{
+    width: 100%;
+    min-height: 4em;
+    position: absolute;
+    border-top:4px solid #1a1a1a;
+    @include border-image(url(/cobrands/fixmystreet/images/tile-y-border.jpg) 4 0 0 0);
+    border-left:0;
+    border-right:0;
+    z-index:2;
+  }
+}
+
+//position absolute the menu as ie doesn't like display:table
+.ie6, .ie7 {
+  .nav-wrapper {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    .nav-wrapper-2 {
+      // position static as well so we fix lots of the z-index issues
+      position:static;
+    }
+  }   
+}
+
+// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop
+#site-header {
+  height: auto;
+  background: none;
+  border-top: 0px;
+  .container {
+    position: static;//reset position so the nav links become clickable
+  }
+}
+#site-logo {
+  top: 0.9em;
+  position: absolute;
+  z-index: 3;
+}
+.ie6, .ie7 {
+  #site-header {
+    height:3em;
+    .container {
+      //ie broken z-index bug: the site-logo won't appear if we don't do this
+      //doesn't seem to render the nav link unclickable like in other browsers
+      position: relative;
+    }
+  }
+  #site-logo {
+    position: absolute;
+    top:-3.25em;
+  }
+}
+#nav-link {
+  left:-999999px;
+}
+#main-nav{
+  margin: 0 auto;
+  padding: 0em;
+  width: 60em;
+  ul{
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    float:right;
+    li{
+      list-style: none;
+      display: inline;
+      margin: 0px;
+      padding: 0px;
+      float:left;
+      a,
+      span {
+        display: block;
+        color:#fff;
+        background: none;  
+        border-bottom: none;      
+      }
+    }
+    &#main-menu{
+      li{
+        a, span{
+          padding: 0.75em;
+          font-size: 0.9em;
+        }
+        a:hover{
+          background:#444;
+          @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
+        }
+        a.report-a-problem-btn {
+          background:$primary;
+          padding:0.25em;
+          margin:0.5em;
+          color:#333;
+          @include border-radius(0.25em);
+          &:hover {
+            background:$primary/1.1;
+          }
+        }
+        span {
+          color:$primary;
+        }
+      }
+    }
+    &#mysoc-menu{
+      padding: 0em 0.5em;
+      margin-left: 0.25em;
+      background:$primary url(/cobrands/fixmystreet/images/tile-y.jpg);
+      @include border-radius(0 0 0.375em 0.375em);
+      li{
+        a{
+          background:none;
+          color:#000;
+          text-transform: uppercase;
+          font-size: 0.6875em;
+          padding: 1.3em 0.7em 1em 0.7em;
+          &#mysoc-logo {
+            width:84px;
+            height:16px;
+            background-position:-260px -43px;
+            opacity: 0.8;
+            &:hover {
+              opacity: 1;
+            }
+          }
+          &:hover{
+            color:#fff;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+// .content Is the white box
+
+// The narrow single column box
+.content{
+  width: 27em;
+  margin-top: 3em;
+  background: #fff;
+  padding: 1em;
+  padding-bottom: 3em;
+  margin-left: 0.5em;
+  margin-bottom: -1em;
+  @include box-shadow(0px 0px 6px 1px #000);
+}
+.ie6, .ie7, .ie8  {
+  .content {
+    // If no box-shadow, just want a boring black border to stand it out from the map.
+    border: 1px solid black;
+    //take off margins so we line up properly
+    margin: 0;
+  }
+}
+//weird margining thing for ie8
+.ie8 .content {
+  margin-top:3em;
+}
+
+// map page - has fixed header and different styling
+body.mappage {
+  .content {
+    float:left;
+  }
+  #main-nav ul#main-menu li a,
+  #main-nav ul#main-menu li span {
+    padding: 1.4em 0.75em 1.35em 0.75em;
+  }
+  #main-nav ul#main-menu li a.report-a-problem-btn {
+    padding: 0.5em;
+    margin:0.9em 0.25em 0.85em 0.25em;
+  }
+  .nav-wrapper{
+    .nav-wrapper-2{
+      position: fixed;
+      background: #222;
+      @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
+    }
+  }
+  #site-logo{
+    position: fixed;
+  }
+}
+.ie6, .ie7 {
+  body.mappage {
+    // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove.
+    .container {
+      float: left;
+      width: 27em;
+      margin-left: 1.4em;
+    }
+    .nav-wrapper{
+      z-index:1;
+      .nav-wrapper-2 {
+        position:static;
+      }
+    }
+    #site-logo {
+      position: absolute;
+    }
+  }
+}
+.ie6 {
+  body.mappage {
+    .container {
+      margin-left: 0.7em;
+    }
+  }
+}
+//ie8 needs different stuff on .nav-wrapper so we 
+//have to define all the rest of it again as this resets
+//the z-index base yet again :S
+.ie8 {
+  body.mappage {
+    .nav-wrapper{
+      position: relative;
+      z-index:0;
+      .nav-wrapper-2 {
+        position:static;
+      }
+    }
+    #site-logo {
+      position: absolute;
+    }
+  }
+}
+
+
+
+// full width page
+body.fullwidthpage {
+  .content {
+    width: 57em;
+  }
+  .intro {
+    width:40em;
+  }
+}
+// two thirds width page, also has option for a sidebar which can be sticky or not
+body.twothirdswidthpage {
+  @extend .fullwidthpage;
+  .content {
+    width:40em;
+    position: relative;
+    aside {
+      background:#eee;
+      position:absolute;
+      left:42em;
+      top:0;
+      z-index: -1;
+      width:13em;
+      padding:1em;
+      @include box-shadow(0px 0px 6px 1px #000);
+      h2 {
+        margin-top: 0;
+      }
+      img {
+        margin-bottom: 0.25em;
+      }
+    }
+    .sticky-sidebar {
+      position: absolute;
+      left:42em;
+      z-index: -1;
+      aside {
+        position: fixed;
+        top:7em;
+        left:auto;
+      }
+    }
+  }
+}
+//as ie6 doesn't like 'fixed' we will make it absolute again
+.ie6 body.twothirdswidthpage .content .sticky-sidebar {
+  position:static;
+  aside {
+    position:absolute;
+    left:42em;
+    top:0;
+  }
+}
+
+
+// table wrapper - this enables anything to become a
+// table with div children as table cells
+.tablewrapper {
+  display:table;
+  width:100%;
+  padding:0 0 1em 0;
+  >div {
+    display:table-cell;
+    width:50%;
+  }
+  .full-width {
+    width:auto;
+    margin:0;
+  }
+}
+
+//fix table to be a block for ie, float the children
+.ie6, .ie7 {
+  .tablewrapper {
+    display:block;
+    div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div'
+      width:48%;
+      display:block;
+      float: left;
+      border:none !important;
+    }
+  }
+}
+
+// adds border to the top and goes full width
+.bordered {
+  margin:0 -1em;
+  padding:0 1em;
+  width:auto;
+  border-top:0.25em solid $primary;
+}
+
+//footer blocks
+#footer-mobileapps {
+  border-right:1em solid #fff;
+  background:none;
+  padding:0;
+  @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
+  h2 {
+    color:#222;
+    margin-top:0;
+  }
+  ul {
+    @include list-reset;
+    li {
+      border-bottom:none;
+      float:left;
+      margin:0 1em 1em 0;
+      a {
+        color:#222;
+        padding:0;
+        width: 96px;
+        height: 32px;
+        margin:0 auto;
+        text-indent: -999999px;
+        background: url(/cobrands/fixmystreet/images/sprite.png) -12px -3610px no-repeat;
+        opacity: 0.8;
+        &:hover {
+          opacity: 1;
+        }
+        &.m-app-iphone {
+          background-position: -12px -3610px;
+        }
+        &.m-app-iphone-streetreport {
+          background-position: -12px -3678px;
+          height:50px;
+        }
+        &.m-app-droid {
+          background-position: -12px -3756px;
+        }
+        &.m-app-nokia {
+          background-position: -12px -3820px;
+          width:74px;
+        }
+      }
+    }
+  }
+}
+.ie6, .ie7 {
+  #footer-mobileapps {
+      margin:0 0.5em;
+      margin-right:2%;
+  }
+}
+.ie6 #footer-mobileapps ul li a {
+  background:url(/cobrands/fixmystreet/images/ie_mobileapps.gif) -1px -1px no-repeat;
+  &.m-app-iphone-streetreport {
+    background-position: -1px -69px;
+    height:50px;
+  }
+  &.m-app-droid {
+    background-position: -1px -148px;
+  }
+  &.m-app-nokia {
+    background-position: -1px -212px;
+    width:74px;
+  }
+}
+
+#footer-help {
+  border-left:1em solid #fff;
+  ul {
+    display:table;
+    li {
+      display:table-cell;
+      border-bottom:none;
+      &:last-child {
+        border-left:1.25em solid #fff;
+      }
+    }
+  }
+}
+.ie6, .ie7 {
+  #footer-help {
+    margin-left:2%;
+    ul {
+      width:100%;
+      li {
+        float:left;
+        width:45%
+      }
+    }
+  }
+}
+
+
+// map box (fallback for non js really as most users
+// will have fullscreen map)
+#map_box{
+  position: absolute;
+  height: 29em;
+  width: 29em;
+  right: 1em;
+  top: 3em;
+  z-index:1;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+  top: 4.75em !important;
+}
+
+// push zoom back over to right
+#fms_pan_zoom_zoomin {
+  left:auto !important;
+  right:30px;
+  top:130px !important;
+}
+#fms_pan_zoom_zoomout {
+  left:auto !important;
+  right:30px;
+  top:174px !important;
+}
+
+.olControlAttribution {
+  bottom:0.5em !important;
+  left: auto !important;
+}
+
+#sub_map_links {
+  left:auto;
+  bottom:auto;
+  bottom:2em;
+  #map_links_toggle {
+    display:block;
+    cursor: pointer;
+    position:absolute;
+    left:-1em;
+    width:1em;
+    height:100%;
+    background:#000 url(/cobrands/fixmystreet/images/sprite.png) right -4119px no-repeat;
+    @include border-radius(0.25em 0 0 0.25em);
+    &:hover {
+      left:-1.5em;
+      //use border so we don't have to redefine the background-position
+      border-right:0.5em solid #000;
+    }
+    &.closed {
+      background-position: right -4159px;
+    }
+  }
+}
+.ie6 #sub_map_links #map_links_toggle {
+  height:1.75em;
+  background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
+  &.closed {
+    background-position: center -183px;
+  }
+}
+
+// log in bit, pokes above the .content div
+#user-meta{
+  display:block;
+  position: relative;
+  max-width: 57em;
+  margin:0 auto;
+  p {
+    @include inline-block;
+    position:absolute;
+    top:1em;
+    height:2em;
+    padding:0.25em 6em 0.5em 0.5em;
+    @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+    a {
+      top:0.5em;
+      right:0.5em;
+      font-size:0.6875em;
+      padding:0.5em 0.75em;
+      line-height:1em;
+      &:hover {
+        text-decoration:none;
+        background:#444;
+      }
+    }
+  }
+}
+.ie6, .ie7 {
+  #user-meta {
+    z-index:1;
+    p {
+      top:-2em;
+    }
+  }
+}
+.ie6 #user-meta {
+  width:57em; //ie6 doesn't like max-width
+}
+
+
+
+// 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
+  bottom: 0;
+  width: 29em;
+  overflow: hidden;
+  padding-top: 3em;
+  ul#key-tools {
+    border-top: 0.25em solid $primary;
+    margin: 0;
+    @include box-shadow(-0em 0px 1em 1em #fff);
+    li {
+      border:none;
+      a {
+        font-size: 0.75em;
+        color:#666;
+        padding: 0.5em 1.5em 0.5em 0;
+        text-transform:none;
+        &.abuse {
+          background-image:url(/cobrands/fixmystreet/images/sprite.png);
+          background-position:right -2935px;
+        }
+        &.feed {
+          background-image:url(/cobrands/fixmystreet/images/sprite.png);
+          background-position:right -3074px;
+        }
+        &.chevron {
+          background-image:url(/cobrands/fixmystreet/images/sprite.png);
+          background-position:right -3225px;
+        }
+        &.hover {
+          background-image:url(/cobrands/fixmystreet/images/sprite.png);
+          background-position:right -1876px;
+        }
+      }
+    }
+    &.singleton {
+      li {
+        text-align:right;
+        a {
+          padding-right:3em;
+        }
+      }
+    }
+  }
+  &.static {
+    padding:0 0 1em 0;
+    position: static;
+  }
+}
+// The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
+.ie6 .shadow-wrap {
+  padding-top: 0;
+}
+
+// pokes over the RHS with a little triangle
+.big-green-banner {
+  top:auto;
+  right:-1.25em;
+  margin-left:-2em;
+  font-size:1.375em;
+  padding:1em 3em 1em 1em;
+  background: $contrast1 url(/cobrands/fixmystreet/images/sprite.png) right -2188px no-repeat;
+  &:before {
+    right:0;
+    left:auto;
+    top:-0.5em;
+    position: absolute;
+    border-top: 0.5em solid transparent;
+    border-left: 0.5em solid #4B8304;
+    border-bottom:none;
+  }
+}
+.ie6 .big-green-banner {
+  background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
+}
+
+.banner {
+  // state banners
+  p {
+    top:-2.25em;
+    padding:1em;
+    &:before {
+      left:-0.75em;
+      border-left: 0.75em solid transparent;
+      border-bottom: 0.75em solid #888;
+    }
+    &#fixed {
+      padding-top:5em;
+      background-image:url(/cobrands/fixmystreet/images/sprite.png);
+      background-position:-324px -326px;
+      background-repeat:no-repeat;
+      &:before {
+        border-bottom: 0.75em solid #4B8304;
+      }
+    }
+  }
+}
+.ie6 .banner p {
+  top:-1.5em;
+  &#fixed {
+    background-image:url(/cobrands/fixmystreet/images/ie_fixed.gif);
+    background-position:center 0.75em;
+  }
+}
+
+
+// for pulling elements fullwidth regardless
+// of .contents' padding
+.full-width{
+  margin: 0 0 0em -1em;
+  width: 29em;
+}
+
+/*FORMS*/
+input[type=text],
+input[type=password],
+input[type=email],
+textarea{
+  width: 25em;
+}
+.form-box {
+  max-width:25em;
+}
+
+
+/* form errors */
+div.form-error,
+p.form-error {
+  display:block;
+  width:24.7em;
+}
+
+input.form-error,
+textarea.form-error {
+  @include border-radius(0 0 0.25em 0.25em);
+}
+
+
+// Report a problem sidebar notes
+#report-a-problem-sidebar {
+  position:absolute;
+  z-index:-1;//push behind .content, .container resets z-index for this
+  left:29.5em;
+  top:5em;
+  width:15em;
+  @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+  .sidebar-tips {
+    background:#eeeeee;
+    padding:1em;
+    font-size:0.75em;
+  }
+  .sidebar-notes {
+    background:#333333;
+    padding:1em;
+    color:#ffffff;
+    font-size:0.75em;
+  }
+}
+.ie6, .ie7 {
+  #report-a-problem-sidebar {
+    left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
+  }
+}
+
+.no-js .general-sidebar-notes,
+.no-js #report-a-problem-sidebar {
+  position: static;
+  width: auto;
+  @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+  .sidebar-tips,
+  .sidebar-notes {
+    font-size:1em;
+  }
+}
+
+// More general sidebar notes
+.general-sidebar-notes {
+  position: absolute;
+  left:29.5em;
+  width:15em;
+  z-index: -1; //push behind .content, .container resets z-index for this
+  @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
+  p {
+    background:#eeeeee;
+    font-size:0.75em;
+    padding:0.75em;
+    margin:0;
+    &.dark {
+      background:#333333;
+      color:#ffffff;
+    }
+  }
+}
+
+// Frontpage
+
+body.frontpage {
+  .table-cell {
+    // we do this so we can have full screen width elements
+    >.container {
+      width:100%;
+    }
+    .content {
+      margin:14em auto 0 auto;
+    }
+  }
+  .nav-wrapper-2{
+    height:6em;
+  }
+  #site-header{
+    height:9em;
+  }
+  #site-logo{
+    top:3em;
+    width: 300px;
+    height: 60px;
+    background-position:-2px -108px;
+  }
+  #user-meta {
+    z-index:10;
+    p {
+      top:-4em;
+      right:0;
+      color:#FFD000;
+      background:none;
+      @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
+      a {
+        background:#fff;
+        color:#1a1a1a;
+        &:hover {
+          background:#ddd;
+        }
+      }
+    }
+  }
+}
+//logo fix
+.ie6, .ie7, .ie8 {
+  body.frontpage {
+    #site-logo {
+      position:relative;
+      width:60em;
+      margin:0 auto;
+    }
+  }
+}
+.ie6, .ie7 {
+  body.frontpage {
+    #site-header {
+      height:3em;
+    }
+    #site-logo {
+      top:-1em;
+    }
+    #user-meta p {
+      top:-2em;
+    }
+  }
+}
+.ie6 body.frontpage #site-logo {
+  background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat;
+}
+//weird margining thing for ie8
+.ie8 body.frontpage {
+  #front-main {
+    top:-12em;
+  }
+  .table-cell .content {
+    margin-top:12em;
+  }
+}
+
+// big yellow bit full screen width
+#front-main {
+  color: $primary_text;
+  background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg);
+  position:absolute;
+  width:100%;
+  left:0;
+  top:-15em;
+  #front-main-container {
+    max-width: 57em;
+    margin:0 auto;
+  }
+  h2 {
+    font-style:normal;
+    margin:0;
+    color:#222;
+  }
+  #postcodeForm {
+    background:none;
+    overflow:hidden;
+    margin-right:0.5em;
+    label {
+      margin:0.5em 0;
+    }
+    div {
+      display:block;
+      margin:0 auto;
+      width:20em;
+      overflow:hidden;
+      input#pc {
+        display:block;
+        float:left;
+        padding:0.25em 0.5em;
+        height:1.5em;
+        width:16em;
+      }
+      input#submit {
+        display:block;
+        float:right;
+        width:3em;
+        height:2.3em;
+        padding-top:0.2em;
+      }
+    }
+  }
+  a#geolocate_link {
+    background:none;
+    color:#222;
+    margin:-1em 0 0.5em 0;
+    &:hover {
+      text-decoration:underline;
+      background:none;
+    }
+  }
+}
+.ie6, .ie7 {
+  #front-main {
+    top:2em;
+  }
+}
+
+
+#front-howto {
+  border-right:1em solid #fff;
+  #front_stats {
+    background:none;
+    border-top:0.25em solid $primary;
+    padding-top:1em;
+    div {
+      big {
+        color:$primary;
+        font-size:3.2308em;
+      }
+    }
+  }
+}
+.ie6, .ie7 {
+  #front_stats {
+    div {
+      width:8em;
+      float:left;
+    }
+  }
+}
+
+#front-recently {
+  border-left:1em solid #fff;
+}
+
+#front-howto h2,
+#front-recently h2 {
+   margin-top:0;
+}
+
+
+.ie6, .ie7 {
+  .tablewrapper {
+    #front-howto {
+      margin-right:2%;
+    }
+    #front-recently {
+      margin-left:2%;
+    }
+  }
+}
+
+
+
+
+/* MEDIA QUERIES */
+@media only screen and (min-width: 48em) and (max-width: 61em) {
+  .container {
+      width: 100%;
+  }
+  /*FORMS*/
+  input[type=text],
+  input[type=password],
+  input[type=email],
+  textarea{
+    width: 95%;
+  }
+
+  // Remove central positioning of mainmenu and float right.
+  // Left padding is to ensure no overlap of the site-logo
+  // Background styling replicates header styling
+
+  #main-nav{
+    width: auto;
+    float:right;
+    padding-left: 180px;
+  }
+  .nav-wrapper {
+  //   width:auto;
+    .nav-wrapper-2 {
+      // width:auto;
+    }
+  }
+
+  //Main menu drops below logo and my-soc menu
+  #main-menu{
+    margin-top: 3em;
+  }
+  //therefore header needs to open up
+  #site-header {
+    height:6em;
+  }
+  // Pull OpenLayers navigation down a bit more
+  #fms_pan_zoom {
+    top: 7em !important;
+  }
+
+  //fix the left margin on login bit
+  #user-meta {
+    p {
+      left:1em;
+    }
+  }
+  body.frontpage {
+    #user-meta {
+      p {
+        left:auto;
+      }
+    }
+  }
+
+  //Map becomes percentage width
+  #map_box{
+    left: 32em;
+    width:auto;
+  }
+
+  //put the RAP notes into the main copy area
+  // Note: Also used for the non-JS case.
+  #report-a-problem-sidebar,
+  .general-sidebar-notes {
+    position: static;
+    width: auto;
+    @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+    .sidebar-tips,
+    .sidebar-notes {
+      font-size:1em;
+    }
+  }
+
+  //Revert to mobile use of the .full-width class
+  .full-width{
+    width: auto;
+    margin: 0em -1em 0 -1em;
+  }
+
+  //make fullpage auto width
+  body.fullwidthpage .content {
+    width: auto;
+  }
+
+  //make twothirdswidthpage nearly as small as main
+  //.content: just enough to still fit the sidebar in
+  body.twothirdswidthpage {
+    .content {
+      width:30em;
+      .sticky-sidebar {
+        left:32em;
+        top:30em;
+        aside {
+          top:9em;
+        }
+      }
+    }
+  }
+}
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index a17c93912..55b006b42 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -9,7 +9,6 @@
 @import "_mixins";
 @import "compass";
 
-
 /* HEADINGS and TYPOGRAPHY */
 
 @font-face {
@@ -74,1468 +73,5 @@ noindex:-o-prefocus, #site-header {
   font-family: sans-serif;
 }
 
-
-body {
-  font-family: 'MuseoSans', 'Helvetica', 'Arial', sans-serif;
-  margin:0;
-  font-size:1em;
-  line-height:1.5;
-  color:#222;
-}
-
-
-p {
-  font-size: 1em;
-  font-weight: normal;
-  margin:0 0 1em 0;
-}
-
-small{
-  font-family: 'helvetica', 'arial',sans-serif;
-  font-style: italic;
-  font-size: 0.8125em;
-  line-height: 1.2307em;
-}
-
-h1 {
-  font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif;
-  font-size: 2em;
-  line-height: 1em;
-  font-weight: normal;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-#front-main h1 {
-  margin-top: 0.7em;
-}
-h1#reports_heading span {
-  display: none;
-}
-h1#reports_heading a {
-  display: block;
-  font-size: 50%;
-}
-
-h2 {
-  font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif;
-  font-size: 1.5em; /*24px*/
-  line-height: 1.3333em; /*32px*/
-  font-weight: normal;
-  margin-top: 1.333333333em; /*32px*/
-  margin-bottom: 0.666666666em; /*16px*/
-}
-
-h3 {
-  font-size: 1.25em;
-  line-height: 1.20em;
-  margin-top: 1.2em;
-  margin-bottom: 0.8em;
-  font-weight: bold
-}
-
-h4 {
-  font-size: 1em;
-  font-weight: bold;
-  margin-bottom: 1em; 
-}
-
-// default list styles
-ul, ol {
-  font-size: 1em;
-  margin-bottom: 2em;  
-  margin-left: 2em;
-  padding:0;
-}
-
-li{
-  margin-bottom: 0.5em;
-}
-
-ul li{
-  list-style: square;
-}
-
-ol li {
-  list-style:decimal;
-}
-
-// lets you have a traditional ol but with nicely styled numbers
-// for older browsers it just falls back to the normal ol
-ol.big-numbers {
-  padding: 0;
-  margin: 0;
-  counter-reset: li; // reset counter to be 'li' instead of a number
-  > li {
-    position: relative;
-    list-style: none;
-    padding:0 0 0 2.5em;
-    margin-bottom:2em;
-    &:before {
-      content: counter(li); // set the content to be whatever the 'li' var is
-      counter-increment: li; // add to the counter var
-      position: absolute;
-      left: 0;
-      top:-0.2em;
-      color:#ccc;
-      line-height:1;
-      font: {
-        family: 'helvetica', 'arial', sans-serif;
-        weight:bold;
-        size:2.5em;
-      }
-    }
-  }
-}
-
-dl {
-  margin: 0;
-  padding: 0;
-  dt {
-    font-size: 1em;
-    line-height: 1.5em;
-    font-weight: bold;
-  }
-  dd {
-    font-weight: 1em;
-    line-height: 1.5em;
-    margin:0 0 1em 0;
-  }
-}
-
-blockquote {
-  p:before {
-    content: '“';
-  }
-  p:after {
-    content: '”';
-  }
-}
-
-pre {
-  font-family: monospace;
-}
-
-img {
-  //do this otherwise IE will just not display
-  //any img without a height defined
-  height:auto;
-}
-
-select, input, textarea {
-  font-size: 99%;
-  max-width: 95%;
-}
-
-
-// links
-a,
-a:visited {
-  text-decoration:none;
-  color:#0BA7D1;
-  &:hover,
-  &:active {
-    text-decoration:underline;
-    color:#0D7CCE;    
-  }
-}
-
-// custom type
-.small-print {
-  @extend small;
-  margin-bottom: 1.2307em;
-  color:#666666;
-}
-.meta{
-  color:#555555;
-  font-style: italic;
-  margin-bottom: 0px;
-}
-.meta-2{
-  font-family: 'helvetica', 'arial',sans-serif;
-  color:#666666;
-  font-style: italic;
-  font-size: 0.75em;
-}
-
-h4.static{
-  font-family: 'helvetica', 'arial',sans-serif;
-  text-transform: uppercase;
-  font-size: 0.875em;
-  line-height: 1.71428em;
-  color:#666;
-  margin-top: 2em;
-}
-h4.static-with-rule{
-  @extend.static;
-  background: #f6f6f6;
-  border-top: 0.25em solid $primary;
-  margin-bottom:0.25em;
-  padding: 0.5em 1em;
-}
-
-/* FORMS */
-
-// input placeholders, these need to be on separate lines as if the browser
-// can't understand a selector it will invalidate the whole line.
-::-webkit-input-placeholder {
-  color: #666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-:-moz-placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-:-ms-placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-//this only gets used when the browser doesn't support @placeholder
-.placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-
-// wrap anything inside the form in a fieldset to give
-// us the right spacing
-fieldset {
-  margin: 1em;
-}
-
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=file],
-textarea {
-  width: 100%;
-  // adjust so the sides line up
-  padding: 0.5em;
-  margin: 0 0 0 -0.5em;
-}
-
-textarea {
-  border: 0.125em solid #888888;
-  @include border-radius(0.25em);
-  display: block;
-  font-size: 1em;
-  line-height: 1.5em;
-  font-family: 'helvetica', 'arial', sans-serif;
-  min-height:8em;
-}
-
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=file] {
-  border: 0.125em solid #888888;
-  @include border-radius(0.25em);
-  display: block;
-  font-size: 1em;
-  line-height: 1em;
-}
-input[type=file] {
-  margin-bottom:1em;
-}
-
-label{
-  display: block;
-  margin-top: 1.25em;
-  margin-bottom: 0.25em;
-  font-weight: bold;
-  &.inline{
-    display: inline;
-    padding: 0 2em 0 1em;
-    font-weight: normal;
-  }
-}
-
-// grey background, full width box
-.form-box {
-  margin: 0 -2em 0.25em -2em;
-  background:#eeeeee;
-  padding:1em 2em 1em 2em;
-  max-width:26em;
-  >input[type=text] {
-    margin-bottom:1em;
-  }
-  .title {
-    font-size:1.25em;
-    margin:0.5em 0;
-  }
-  h5 {
-    margin:0;
-    font: {
-      size:1.125em;
-      weight:normal;
-    }
-    strong {
-      font-size:2em;
-      margin-right:0.25em;
-    }
-  }
-}
-// IE6 doesn't extend the grey box back with the above negative margins, and
-// the password box falls off screen for some reason. Just have boring margins,
-// it looks okay.
-.ie6 .form-box {
-    margin: 0 0 0.25em 0;
-}
-
-.form-txt-submit-box {
-  min-height:3em;
-  input[type=password],
-  input[type=text],
-  input[type=email] {
-    width: 65%;
-    float:left;
-  }
-  input[type=submit] {
-    float:right;
-    width:28%;
-    margin-right:0.25em;
-    padding-top:0.7em;
-    padding-bottom:0.6em;
-  }
-}
-
-.checkbox-group {
-  margin:1em 0;
-}
-
-
-// form errors
-div.form-error,
-p.form-error {
-  @include inline-block;
-  background:#ff0000;
-  color:#fff;
-  padding:0 0.5em;
-  margin:0 0 0 -0.5em;
-  @include border-radius(0.25em 0.25em 0 0);
-}
-
-input.form-error,
-textarea.form-error {
-  border-color:#ff0000;
-  @include border-radius(0 0.25em 0.25em 0.25em);
-}
-
-ul.error {
-  background:#ff0000;
-  color:#fff;
-  padding:0 0.5em;
-  margin:0 0 0 -0.5em;
-  @include border-radius(0.25em);
-}
-
-// don't display valid error boxes as now the page jump
-// won't be until the user submits, which is fine
-div.label-valid,
-p.label-valid {
-  display:none !important;
-  visibility: hidden;
-}
-
-
-
-/*** LAYOUT ***/
-
-// Padding creates page margins on mobile
-.container{
-  padding: 0 1em;
-}
-
-// Use full width to reverse .container margins
-.full-width {
-  margin: 0 -1em;
-}
-
-// #site-header creates grey bar in mobile
-// .nav-wrapper-2 is used on desktop
-#site-header{
-  border-top: 0.25em solid $primary;
-  height: 3em;
-  @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
-  .container {
-    min-height:4em;
-  }
-}
-#site-logo{
-  display: block;
-  width: 175px;
-  height: 40px;
-  top: 0.4em;
-  background: url('images/sprite.png') -3px -3px no-repeat;
-  text-indent: -999999px;
-  position: absolute;
-  z-index:2;
-}
-.ie6 #site-logo {
-  background: url('images/ie_logo.gif') 0 -5px no-repeat;
-}
-// this is a skip to nav for mobile users only
-#nav-link {
-  width: 50px;
-  height: 48px;
-  background: url('images/sprite.png') -5px -916px no-repeat;
-  display: block;
-  text-indent: -999999px;
-  position: absolute;
-  right:2em;
-  top:-2px;
-  &:hover {
-    top:2px;
-  }
-}
-
-
-#main-nav{
-  ul{
-    @include list-reset-soft;
-    li{
-      a, span {
-        display: block;
-        padding: 0.5em 1em;
-        background:#f6f6f6;
-        color:#333;
-        font-size: 1.25em;
-        border-bottom: 0.25em solid #333;
-      }
-      a:hover, span.hover {
-        background:  #333;
-        color:#fff;
-        text-decoration: none;
-      }
-    }
-    &#mysoc-menu{
-      li {
-        a {
-          background:$primary;
-          &#mysoc-logo {
-            background-image:url('images/sprite.png');
-            background-repeat:no-repeat;
-            background-position:-240px -38px;
-            text-indent:-999999px;
-          }
-        }
-      }
-    }
-  }
-}
-.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo {
-  background: url('images/ie_mysoc_logo.gif') center no-repeat;
-}
-//defines where the table caption is (login stuff on mob, nav menu on desktop)
-.wrapper {
-  width:100%;
-  display:table;
-  caption-side:bottom;
-}
-// this is the user's logged in details or the login link etc
-#user-meta {
-  p {
-    position: relative;
-    background:$primary;
-    padding:1em 6em 1em 1em;
-    a {
-      position: absolute;
-      right:1em;
-      @include inline-block;
-      text-transform:uppercase;
-      font-size:0.75em;
-      background:#333;
-      padding:0.25em 0.75em;
-      color:#fff;
-      @include border-radius(0.25em);
-    }
-  }
-}
-
-
-// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
-.shadow-wrap {
-  @extend .full-width;
-  ul#key-tools{
-    @include list-reset-soft;
-    margin-bottom: 1em;
-    display: table;
-    width:100%;
-    li{
-      display: table-cell;
-      vertical-align: bottom;
-      text-align: center;
-      border-right:0.25em solid #fff;
-      &:last-child {
-        border-right:none;
-      }
-      a {
-        display: block;
-        background-color: #f5f5f5;
-        background-repeat: no-repeat;
-        color:#333;
-        padding:4em 2em 1em 2em;
-        text-transform:uppercase;
-        font: {
-          size:0.6875em;
-          family: 'helvetica', 'arial', sans-serif;
-        }
-        &:hover, &.hover, &.active {
-          text-decoration:none;
-          background-color:#333;
-          color:#fff;
-        }
-        &.abuse {
-          background-image:url('images/sprite.png');
-          background-position:center -2424px;
-        }
-        &.feed {
-          background-image:url('images/sprite.png');
-          background-position:center -2563px;
-        }
-        &.chevron {
-          background-image:url('images/sprite.png');
-          background-position:center -2716px;
-        }
-        &.hover, &.active {
-          background-image:url('images/sprite.png');
-          background-position:center -2064px;
-        }
-      }
-    }
-  }
-}
-
-//because display:table doesn't work we float
-.ie6, .ie7 {
-  .shadow-wrap {
-    ul#key-tools{
-      background:#f5f5f5;
-      li{
-        float:left;
-        a {
-          padding-left:1.5em;
-          padding-right:3em;
-        }
-      }
-    }
-  }
-}
-.ie6 .shadow-wrap ul#key-tools li a {
-  &.abuse {
-    background-image:url('images/ie_key_tools_sprite.gif');
-    background-position: right 0px;
-  }
-  &.feed {
-    background-image:url('images/ie_key_tools_sprite.gif');
-    background-position: right -58px;
-  }
-  &.chevron {
-    background-image:url('images/ie_key_tools_sprite.gif');
-    background-position: right -116px;
-  }
-  &:hover {
-    background-image:url('images/ie_key_tools_sprite_dark.gif');
-  }
-}
-
-
-//footer blocks
-#footer-mobileapps {
-  @extend .full-width;
-  padding:1em;
-  h4 {
-    margin:0;
-  }
-  ul {
-    @include list-reset-soft;
-    li {
-      border-bottom:1px solid #AFAFAF;
-      &:last-child {
-        border-bottom:none;
-      }
-      a {
-        display:block;
-        padding:0.5em 0;
-      }
-    }
-  }
-}
-
-#footer-help {
-  ul {
-    @include list-reset-soft;
-    li {
-      border-bottom:1px solid #AFAFAF;
-      &:last-child {
-        border-bottom:none;
-      }
-      h4 {
-        margin:0.75em 0 0.25em 0;
-      }
-      p {
-        font-size:0.75em;
-      }
-    }
-  }
-}
-
-
-
-/*BUTTONS*/
-
-// Default style set for buttons, inputs and .btn class. Red and green class available.
-
-button, input[type=submit],.btn{
-  @include button-reset;
-}
-
-.green-btn,
-button.green-btn,
-input.green-btn{
-  @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
-}
-
-.red-btn,
-button.red-btn,
-input.red-btn{
-  @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
-}
-
-.final-submit,
-input.final-submit {
-  margin:1em 0.5em;
-  float:right;
-}
-
-.button-right,
-.button-left,
-a.button-right,
-a.button-left {
-  @include inline-block;
-  cursor:pointer;
-  font-size: 1em;
-  line-height: 1;
-  margin:0;
-  border:1px solid #999;  
-  color:#333;
-  background: #eee;
-  @include border-radius(4px);
-  &:hover{
-    color:#fff;
-    background:#777;
-    text-decoration: none;
-    border:1px solid #666;  
-  }
-}
-.button-right,
-a.button-right,
-:hover.button-right,
-a:hover.button-right {
-  padding:1em 3em 1em 1em;
-  background-image: url('images/sprite.png');
-  background-repeat:no-repeat;
-  background-position:right -686px;
-}
-
-.button-left,
-a.button-left,
-:hover.button-left,
-a:hover.button-left {
-  padding:1em 1em 1em 3em;
-  background-image: url('images/sprite.png');
-  background-repeat:no-repeat;
-  background-position:-18px -802px;
-}
-
-.big-green-banner {
-  position: relative;
-  z-index:1000;
-  top:-1.75em;
-  background: $contrast1;
-  color: #fff;
-  padding:1em;
-  text: {
-    transform:uppercase;
-    align:center;
-  }
-  font-size:0.875em;
-  &:before {
-    content: "";
-    left:-0.5em;
-    top:0;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 0.5em solid transparent;
-    border-bottom: 0.5em solid #4B8304;
-  }
-}
-
-.banner {
-  position: relative;
-  z-index:1100;
-  p {
-    position: absolute;
-    top:-1.95em;
-    right:0;
-    @include inline-block;
-    font-size:0.6875em;//11px
-    line-height:1em;
-    padding:0.5em 1em;
-    margin:0;
-    color:#1a1a1a;
-    background: #ccc;
-    text: {
-      transform:uppercase;
-      align:center;
-    }
-    &:before {
-      content: "";
-      left:-0.5em;
-      top:0;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-left: 0.5em solid transparent;
-      border-bottom: 0.5em solid #888;
-    }
-    &#fixed {
-      color:#fff;
-      background: $contrast1;
-      &:before {
-        border-bottom: 0.5em solid #4B8304;
-      }
-    }
-  }
-}
-
-/*OTHER*/
-
-.plain-list {
-  @include list-reset-soft;
-  li {
-    margin-bottom:1em;
-  }
-}
-
-.issue-list{
-  margin: 0 0 1em 0;
-  padding: 0;
-  border-bottom: 0.25em solid $primary;
-  li{
-    list-style: none;
-    background: #f6f6f6;
-    margin: 0.25em 0 0 0;
-    padding: 0.5em 1em;
-    display:block;
-    .update-wrap {
-      display:table;
-      width:100%;
-      .update-text,
-      .update-img {
-        display:table-cell;
-        vertical-align:top;
-        p {
-          margin-bottom: 0.5em;
-        }
-      }
-      .update-img {
-        text-align:right;
-        img {
-          margin:-0.5em -1em 0 0.5em;
-          height:auto;
-        }
-      }
-    }
-  }
-}
-//display:table fixes
-.ie7, .ie7 {
-  .issue-list li .update-wrap {
-    .update-text {
-      float:left;
-      width:19em;
-    }
-    .update-img {
-      float:right;
-    }
-  }
-}
-
-.issue-list-a {
-  margin: 0 0 1em 0;
-  padding: 0;
-  border-bottom: 0.25em solid $primary;
-  li {
-    list-style: none;
-    margin:0;
-    padding:0;
-    a {
-      margin: 0.25em 0 0 0;
-      display:table;
-      background: #f6f6f6;
-      color:#222222;
-      width:100%;
-      &:hover {
-        text-decoration:none;
-        color:#222222;
-        background:#e6e6e6;
-      }
-      .text,
-      .img {
-        display:table-cell;
-        vertical-align:top;
-      }
-      .img {
-        text-align:right;
-        img {
-          height:auto;
-        }
-      }
-      .text {
-        padding:0.25em 1em;
-        h4 {
-          margin:0;
-        }
-        small {
-          color:#666;
-        }
-      }
-    }
-    >p {
-      margin: 0.25em 0 0 0;
-      padding: 0.5em 1em;
-      background: #f6f6f6;
-    }
-  }
-}
-.list-a {
-  @extend .issue-list-a;
-  a {
-    padding:0.5em 1em;
-    font-weight:bold;
-  }
-}
-//display:table fixes
-.ie6, .ie7 {
-  .issue-list-a {
-    overflow:hidden;
-    li a {
-      clear:both;
-      width:auto;
-      display:block;
-      overflow:hidden;
-      .text {
-        float:left;
-        width:18em;
-      }
-      .img {
-        width:6.25em;
-        float:right;
-      }
-    }
-  }
-}
-.ie6 .issue-list-a li a {
-  height:5.5em;
-  .img img {
-    height:60px;
-  }
-}
-
-// fancybox gallery images have a magnifying glass in the corner
-.update-img {
-  a {
-    @include inline-block;
-    position:relative;
-    span {
-      position:absolute;
-      top:0;
-      right:0;
-      display:block;
-      width:20px;
-      height:20px;
-      opacity: 0.5;
-      background:#fff url(images/sprite.png) -16px -1098px no-repeat;
-      //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
-      font: 0/0 a;
-      color: transparent;
-    }
-    &:hover span {
-      opacity: 1;
-    }
-  }
-}
-//bit of a hack - as we can't use em's, push the span out to the right
-//by how much it would be if the user did not resize the text
-.issue-list li .update-wrap .update-img a span {
-  right:-16px;
-  top:-8px;
-}
-
-.problem-header {
-  margin-bottom:1em;
-}
-.problem-header .update-img {
-    float: right;
-    margin-left: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-// map stuff
-#map_box{
-  @extend .full-width;
-  background: #333;
-  height: 29em;
-  margin-bottom: 1em;
-  overflow: hidden;
-  position: relative;
-  #map {
-    width:100%;
-    height:100%;
-  }
-}
-
-// OpenLayers fix for navigation being top right
-// Left and right so that zoom can be left, pan right.
-#fms_pan_zoom {
-  right: 0.5em !important;
-  top: 0.5em !important;
-  left: 0.5em !important;
-}
-// The left and right of the above causes the navigation to move off-screen left in IE6.
-// XXX Need to check IE7
-.ie6 #fms_pan_zoom {
-  left: auto !important;
-}
-
-// Openlayers map controls (overrides)
-#fms_pan_zoom_panup,
-#fms_pan_zoom_pandown,
-#fms_pan_zoom_panleft,
-#fms_pan_zoom_panright,
-#fms_pan_zoom_zoomin,
-#fms_pan_zoom_zoomout {
-  width:36px !important;
-  height:36px !important;
-  text-indent:-999999px;
-  opacity:0.85;
-  background:url('images/sprite.png') no-repeat;
-  &:hover {
-    opacity:1;
-  }
-  filter: none !important; // Override OpenLayers PNG handling of the navigation
-}
-
-#fms_pan_zoom_zoomworld {
-  display:none !important;
-  visibility:none !important;
-}
-
-#fms_pan_zoom_panup {
-  background-position:-42px -222px;
-  right:30px !important;
-  left: auto !important;
-  top:0 !important;
-}
-#fms_pan_zoom_pandown {
-  background-position:-42px -282px;
-  right:30px !important;
-  left: auto !important;
-  top:72px !important;
-}
-#fms_pan_zoom_panleft {
-  background-position:-12px -252px;
-  width:48px !important;
-  right:48px !important;
-  left: auto !important;
-  top:36px !important;
-}
-#fms_pan_zoom_panright {
-  background-position:-60px -252px;
-  width:48px !important;
-  right:0 !important;
-  left: auto !important;
-  top:36px !important;
-}
-#fms_pan_zoom_zoomin {
-  background-position:-152px -223px;
-  height:44px !important;
-  left:0 !important;
-  top:0 !important;
-}
-#fms_pan_zoom_zoomout {
-  background-position:-152px -259px;
-  height:44px !important;
-  left:0 !important;
-  top:44px !important;
-}
-
-//hide pins, show old reports etc
-#sub_map_links {
-  position: absolute;
-  left: 0;
-  right:0;
-  bottom: 0;
-  z-index: 1100;
-  background:#333;
-  background:rgba(0, 0, 0, 0.7);
-  margin:0;
-  a {
-    @include inline-block;
-    font-size:0.6875em;
-    color:#fff;
-    padding:0.6em 3em 0.5em 1em;
-    background-repeat:no-repeat;
-    &#hide_pins_link {
-      background-image:url('images/sprite.png');
-      background-position: right -3976px;
-    }
-    &#all_pins_link {
-      background-image:url('images/sprite.png');
-      background-position: right -4022px;
-    }
-    &#map_permalink {
-      background-image:url('images/sprite.png');
-      background-position: right -4070px;
-    }
-    &.feed {
-      background-image:url('images/sprite.png');
-      background-position: right -3936px;
-    }
-    &:hover {
-      background-color:#000;
-      text-decoration:none;
-    }
-  }
-}
-
-.ie6 #sub_map_links a {
-  &#hide_pins_link {
-    background-image:url('images/ie_sub_map_links_sprite.gif');
-    background-position: right 1px;
-  }
-  &#all_pins_link {
-    background-image:url('images/ie_sub_map_links_sprite.gif');
-    background-position: right -45px;
-  }
-  &#map_permalink {
-    background-image:url('images/ie_sub_map_links_sprite.gif');
-    background-position: right -93px;
-  }
-}
-
-#mob_sub_map_links {
-  position: absolute;
-  z-index:1100;
-  bottom:0;
-  display:table;
-  margin:0;
-  width:100%;
-  background:rgba(0, 0, 0, 0.7);
-  a {
-    color:#fff;
-    width:50%;
-    padding:0.5em 0;
-    font-size:1em;
-    display:table-cell;
-    text-align:center;
-    &:hover {
-      background:#000;
-      text-decoration:none;
-    }
-  }
-  &.map_complete {
-    background:none;
-    display:block;
-    border-bottom:4px solid #fff;
-    a#try_again {
-      display:block;
-      margin:0 auto 6em auto;
-      background:rgba(0, 0, 0, 0.8);
-      @include border-radius(0.5em);
-    }
-    a#mob_ok {
-      position:absolute;
-      right:1em;
-      bottom:0;
-      height:20px;
-      padding-top:30px;
-      display:block;
-      width:4em;
-      background:#fff url('images/sprite.png') 12px -4140px no-repeat;
-      color:#000;
-    }
-  }
-}
-
-.mobile-map-banner {
-  margin:0;
-  position: absolute;
-  top:0;
-  left:0;
-  right:0;
-  font-size:0.75em;
-  background:rgba(0, 0, 0, 0.7);
-  padding:0.75em 30px;
-  a {
-    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
-    font: {
-      weight:normal;
-      size:0.875em;
-    }
-    line-height:1;
-    padding:0.5em 0.75em;
-    position:absolute;
-    left:0.3em;
-    top:0.3em;
-  }
-}
-
-.olControlAttribution {
-    bottom: 3.25em !important;
-    right: 0.25em !important;
-    left: 0.25em !important;
-    color: #222222;
-    font-size:0.75em !important;
-}
-.olControlAttribution img {
-    vertical-align: bottom;
-}
-.olControlPermalink {
-    bottom: 3px !important;
-    right: 3px;
-}
-
-/* Drag is only present in noscript form. XXX Copy from core. */
-#drag {
-    input, img {
-        position: absolute;
-        border: none;
-        max-width: none;
-    }
-    input {
-        cursor: crosshair;
-        background-color: #cccccc;
-    }
-    img {
-        cursor: move;
-    }
-    img.pin {
-        z-index: 100;
-        background-color: inherit;
-    }
-    a img.pin {
-        cursor: pointer;
-        cursor: hand;
-    }
-}
-
-// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar)
-a.rap-notes-trigger,
-a:hover.rap-notes-trigger {
-  display:block;
-  width:90%;
-  padding-left:5%;
-  padding-right:5%;
-}
-.rap-notes {
-  margin:1em 0;
-}
-
-//report a problem tabs
-#problems-nav {
-  padding:0 1em;
-  overflow:hidden;
-  border-bottom:0.25em solid #333;
-  ul {
-    @include list-reset-soft;
-    display:table;
-    width:100%;
-    li {
-      display:table-cell;
-      border-right:0.25em solid #fff;
-      &:last-child {
-        border-right:none;
-      }
-      a {
-        display:block;
-        background:#e2e2e2;
-        color:#333;
-        padding:1em;
-        text: {
-          transform:uppercase;
-          align:center;
-        }
-        &:hover {
-          text-decoration:none;
-          background:#e6e6e6;
-        }
-        &.active {
-          background:#333;
-          color:#fff;
-        }
-      }
-    }
-  }
-}
-
-//display:table fixes
-.ie6, .ie7 {
-  #problems-nav {
-    clear:both;
-    margin:0;
-    padding:0;
-    ul li {
-      float:left;
-    }
-  }
-}
-
-
-table.nicetable {
-  width:100%;
-  margin-bottom:2em;
-  thead {
-    border-bottom:0.25em solid #ccc;
-    th {
-      font-size:0.75em;
-    }
-  }
-  tr {
-    &.a {
-      background:#f6f6f6;
-    }
-    &:nth-child(even) {
-      background:#f6f6f6;
-    }
-    &.gone {
-        color: #666666;
-        background-color: #cccccc;
-    }
-    &:hover {
-      background:#FFF5CC;
-      cursor:pointer;
-    }
-    td {
-      padding:0.25em;
-      a {
-        &:hover {
-          text-decoration:none;
-        }
-      }
-    }
-  }
-  .title {
-    text-align:left;
-  }
-  .data {
-    width:12%;
-  }
-}
-
-.promo {
-  @extend .full-width;
-  background:$primary;
-  padding:1em;
-  margin-bottom:1em;
-  overflow:hidden;
-  position: relative;
-  .close-promo {
-    position:absolute;
-    top:0.5em;
-    right:0.5em;
-    display:block;
-    width:16px;
-    height:16px;
-    text-indent:-999999px;
-    background:url(images/sprite.png) -341px -263px no-repeat;
-    @include border-radius(4px);
-    &:hover {
-      background:#222 url(images/sprite.png) -341px -223px no-repeat;
-    }
-  }
-}
-
-.alert {
-  @extend .full-width;
-  background:#ff0000;
-  padding:1em;
-  margin-bottom:1em;
-  color:#fff;
-  a, a:hover {
-    color:$primary;
-  }
-}
-
-.pagination {
-  text-align:center;
-  padding:0.5em 1em;
-  background:#eee;
-  position:relative;
-  .prev {
-    position:absolute;
-    left:0.5em;
-  }
-  .next {
-    position:absolute;
-    right:0.5em;
-  }
-  a {
-    @include inline-block;
-    background:$primary;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    color:#1a1a1a;
-    &:hover {
-      color:#1a1a1a;
-      text-decoration:none;
-      background:$primary/1.1;
-    }
-  }
-}
-
-// this is a bit of a hack to get some differentation between desk and mobile
-.desk-only {
-  display:none !important;
-}
-
-// hide anything with this class if js is working
-.js .hidden-js {
-  display: none;
-  visibility: hidden;
-}
-
-// hide anything with this class if js is NOT working
-.no-js .hidden-nojs {
-  display: none !important;
-  visibility: hidden;
-}
-
-
-/* Front page */
-#front-main {
-  text-align:center;
-  h2 {
-    font: {
-      style:italic;
-      family: 'helvetica', 'arial', sans-serif;
-      size:1.1875em;
-    }
-    color:#4d4d4d;
-  }
-  #postcodeForm {
-    @extend .full-width;
-    padding:1em;
-    background:$primary;
-    font-family: 'helvetica', 'arial', sans-serif;
-    label {
-      margin:0;
-    }
-    div {
-      display:table;
-      width:100%;
-      background:#fff;
-      border:1px solid #F3B11E;
-      input#pc {
-        display:table-cell;
-        margin:0;
-        padding:0.25em 2%;
-        width:82%;
-        border:none;
-        background:none;
-        line-height:1.5em;
-      }
-      input#submit {
-        display:table-cell;
-        border:none;
-        padding:0;
-        margin:0;
-        width:14%;
-        height:35px;
-        background:#000;
-        color:#fff;
-        text-transform:uppercase;
-        @include border-radius(0);
-        &:hover {
-          background:#333;
-        }
-      }
-    }
-  }
-  a#geolocate_link {
-    @include inline-block;
-    vertical-align:top;
-    background:#1a1a1a;
-    color:#C8C8C8;
-    padding:0.5em;
-    font: {
-      family: 'helvetica', 'arial', sans-serif;
-      size:0.8125em;
-    }
-    @include border-radius(0 0 0.25em 0.25em);
-    &:hover {
-      text-decoration:none;
-      background:#2a2a2a;
-    }
-  }
-}
-
-#front-howto {
-  #front_stats {
-    display:table;
-    width:100%;
-    background:$primary;
-    font-family: 'helvetica', 'arial', sans-serif;
-    div {
-      display:table-cell;
-      text-align:center;
-      padding:1em;
-      line-height:1.25em;
-      font: {
-        size:0.8125em;
-        weight:bold;
-      }
-      big {
-        display:block;
-        margin-bottom:0.5em;
-        font-size:1.5385em;
-      }
-    }
-  }
-}
-
-#front-recently {
-  .issue-list-a {
-    border-bottom:none;
-    margin-bottom:0;
-  }
-}
-
-#alerts {
-    ul {
-        margin-bottom: 1em;
-    }
-    li {
-        padding: 0em;
-        margin-bottom: 0.5em;
-    }
-    .a {
-        background: #f6f6f6;
-    }
-    img[width="16"] {
-        float: right;
-    }
-}
+@import "_base";
 
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index e1a6f474f..f9d5b3930 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -1,1066 +1,3 @@
-
-@import "compass";
 @import "_colours";
-@import "_mixins";
-
-//hacks for desk/mob only stuff
-.desk-only {
-  display:block !important;
-}
-.mob-only {
-  display:none !important;
-}
-
-body {
-  background: #1A1A1A url(images/tile.jpg) 0 0 repeat;
-}
-
-h1 {
-    margin-top: 0;
-}
-
-// Page wrapper and header bits follow
-
-.container{
-  margin: 0 auto;
-  padding: 0em;
-  width: 60em;
-  position: relative;
-  z-index:1;
-}
-
-//z-index stack order gets reset to 0 in ie6/7 if you position anything,
-//so to fix things we give it a high value (don't ask me why)
-//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
-//this affects #site-logo
-.ie6, .ie7 {
-  .container {
-    z-index:100;
-  }
-}
-
-.wrapper{
-  display: table;
-  caption-side: top;
-  width: 100%;
-  .table-cell {
-    display:table-cell;
-  }
-}
-
-//pad the top of the wrapper to allow space for the menu to fit in
-//when its positioned absolute below
-.ie6, .ie7 {
-  .wrapper {
-    padding-top:4em;
-  }
-}
-
-.nav-wrapper{
-  display: table-caption;
-  .nav-wrapper-2{
-    width: 100%;
-    min-height: 4em;
-    position: absolute;
-    border-top:4px solid #1a1a1a;
-    @include border-image(url(images/tile-y-border.jpg) 4 0 0 0);
-    border-left:0;
-    border-right:0;
-    z-index:2;
-  }
-}
-
-//position absolute the menu as ie doesn't like display:table
-.ie6, .ie7 {
-  .nav-wrapper {
-    position: absolute;
-    top:0;
-    left:0;
-    width:100%;
-    .nav-wrapper-2 {
-      // position static as well so we fix lots of the z-index issues
-      position:static;
-    }
-  }   
-}
-
-// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop
-#site-header {
-  height: auto;
-  background: none;
-  border-top: 0px;
-  .container {
-    position: static;//reset position so the nav links become clickable
-  }
-}
-#site-logo {
-  top: 0.9em;
-  position: absolute;
-  z-index: 3;
-}
-.ie6, .ie7 {
-  #site-header {
-    height:3em;
-    .container {
-      //ie broken z-index bug: the site-logo won't appear if we don't do this
-      //doesn't seem to render the nav link unclickable like in other browsers
-      position: relative;
-    }
-  }
-  #site-logo {
-    position: absolute;
-    top:-3.25em;
-  }
-}
-#nav-link {
-  left:-999999px;
-}
-#main-nav{
-  margin: 0 auto;
-  padding: 0em;
-  width: 60em;
-  ul{
-    list-style: none;
-    padding: 0px;
-    margin: 0px;
-    float:right;
-    li{
-      list-style: none;
-      display: inline;
-      margin: 0px;
-      padding: 0px;
-      float:left;
-      a,
-      span {
-        display: block;
-        color:#fff;
-        background: none;  
-        border-bottom: none;      
-      }
-    }
-    &#main-menu{
-      li{
-        a, span{
-          padding: 0.75em;
-          font-size: 0.9em;
-        }
-        a:hover{
-          background:#444;
-          @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
-        }
-        a.report-a-problem-btn {
-          background:$primary;
-          padding:0.25em;
-          margin:0.5em;
-          color:#333;
-          @include border-radius(0.25em);
-          &:hover {
-            background:$primary/1.1;
-          }
-        }
-        span {
-          color:$primary;
-        }
-      }
-    }
-    &#mysoc-menu{
-      padding: 0em 0.5em;
-      margin-left: 0.25em;
-      background:$primary url(images/tile-y.jpg);
-      @include border-radius(0 0 0.375em 0.375em);
-      li{
-        a{
-          background:none;
-          color:#000;
-          text-transform: uppercase;
-          font-size: 0.6875em;
-          padding: 1.3em 0.7em 1em 0.7em;
-          &#mysoc-logo {
-            width:84px;
-            height:16px;
-            background-position:-260px -43px;
-            opacity: 0.8;
-            &:hover {
-              opacity: 1;
-            }
-          }
-          &:hover{
-            color:#fff;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-
-
-// .content Is the white box
-
-// The narrow single column box
-.content{
-  width: 27em;
-  margin-top: 3em;
-  background: #fff;
-  padding: 1em;
-  padding-bottom: 3em;
-  margin-left: 0.5em;
-  margin-bottom: -1em;
-  @include box-shadow(0px 0px 6px 1px #000);
-}
-.ie6, .ie7, .ie8  {
-  .content {
-    // If no box-shadow, just want a boring black border to stand it out from the map.
-    border: 1px solid black;
-    //take off margins so we line up properly
-    margin: 0;
-  }
-}
-//weird margining thing for ie8
-.ie8 .content {
-  margin-top:3em;
-}
-
-// map page - has fixed header and different styling
-body.mappage {
-  .content {
-    float:left;
-  }
-  #main-nav ul#main-menu li a,
-  #main-nav ul#main-menu li span {
-    padding: 1.4em 0.75em 1.35em 0.75em;
-  }
-  #main-nav ul#main-menu li a.report-a-problem-btn {
-    padding: 0.5em;
-    margin:0.9em 0.25em 0.85em 0.25em;
-  }
-  .nav-wrapper{
-    .nav-wrapper-2{
-      position: fixed;
-      background: #222;
-      @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
-    }
-  }
-  #site-logo{
-    position: fixed;
-  }
-}
-.ie6, .ie7 {
-  body.mappage {
-    // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove.
-    .container {
-      float: left;
-      width: 27em;
-      margin-left: 1.4em;
-    }
-    .nav-wrapper{
-      z-index:1;
-      .nav-wrapper-2 {
-        position:static;
-      }
-    }
-    #site-logo {
-      position: absolute;
-    }
-  }
-}
-.ie6 {
-  body.mappage {
-    .container {
-      margin-left: 0.7em;
-    }
-  }
-}
-//ie8 needs different stuff on .nav-wrapper so we 
-//have to define all the rest of it again as this resets
-//the z-index base yet again :S
-.ie8 {
-  body.mappage {
-    .nav-wrapper{
-      position: relative;
-      z-index:0;
-      .nav-wrapper-2 {
-        position:static;
-      }
-    }
-    #site-logo {
-      position: absolute;
-    }
-  }
-}
-
-
-
-// full width page
-body.fullwidthpage {
-  .content {
-    width: 57em;
-  }
-  .intro {
-    width:40em;
-  }
-}
-// two thirds width page, also has option for a sidebar which can be sticky or not
-body.twothirdswidthpage {
-  @extend .fullwidthpage;
-  .content {
-    width:40em;
-    position: relative;
-    aside {
-      background:#eee;
-      position:absolute;
-      left:42em;
-      top:0;
-      z-index: -1;
-      width:13em;
-      padding:1em;
-      @include box-shadow(0px 0px 6px 1px #000);
-      h2 {
-        margin-top: 0;
-      }
-      img {
-        margin-bottom: 0.25em;
-      }
-    }
-    .sticky-sidebar {
-      position: absolute;
-      left:42em;
-      z-index: -1;
-      aside {
-        position: fixed;
-        top:7em;
-        left:auto;
-      }
-    }
-  }
-}
-//as ie6 doesn't like 'fixed' we will make it absolute again
-.ie6 body.twothirdswidthpage .content .sticky-sidebar {
-  position:static;
-  aside {
-    position:absolute;
-    left:42em;
-    top:0;
-  }
-}
-
-
-// table wrapper - this enables anything to become a
-// table with div children as table cells
-.tablewrapper {
-  display:table;
-  width:100%;
-  padding:0 0 1em 0;
-  >div {
-    display:table-cell;
-    width:50%;
-  }
-  .full-width {
-    width:auto;
-    margin:0;
-  }
-}
-
-//fix table to be a block for ie, float the children
-.ie6, .ie7 {
-  .tablewrapper {
-    display:block;
-    div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div'
-      width:48%;
-      display:block;
-      float: left;
-      border:none !important;
-    }
-  }
-}
-
-// adds border to the top and goes full width
-.bordered {
-  margin:0 -1em;
-  padding:0 1em;
-  width:auto;
-  border-top:0.25em solid $primary;
-}
-
-//footer blocks
-#footer-mobileapps {
-  border-right:1em solid #fff;
-  background:none;
-  padding:0;
-  @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
-  h2 {
-    color:#222;
-    margin-top:0;
-  }
-  ul {
-    @include list-reset;
-    li {
-      border-bottom:none;
-      float:left;
-      margin:0 1em 1em 0;
-      a {
-        color:#222;
-        padding:0;
-        width: 96px;
-        height: 32px;
-        margin:0 auto;
-        text-indent: -999999px;
-        background: url(images/sprite.png) -12px -3610px no-repeat;
-        opacity: 0.8;
-        &:hover {
-          opacity: 1;
-        }
-        &.m-app-iphone {
-          background-position: -12px -3610px;
-        }
-        &.m-app-iphone-streetreport {
-          background-position: -12px -3678px;
-          height:50px;
-        }
-        &.m-app-droid {
-          background-position: -12px -3756px;
-        }
-        &.m-app-nokia {
-          background-position: -12px -3820px;
-          width:74px;
-        }
-      }
-    }
-  }
-}
-.ie6, .ie7 {
-  #footer-mobileapps {
-      margin:0 0.5em;
-      margin-right:2%;
-  }
-}
-.ie6 #footer-mobileapps ul li a {
-  background:url(images/ie_mobileapps.gif) -1px -1px no-repeat;
-  &.m-app-iphone-streetreport {
-    background-position: -1px -69px;
-    height:50px;
-  }
-  &.m-app-droid {
-    background-position: -1px -148px;
-  }
-  &.m-app-nokia {
-    background-position: -1px -212px;
-    width:74px;
-  }
-}
-
-#footer-help {
-  border-left:1em solid #fff;
-  ul {
-    display:table;
-    li {
-      display:table-cell;
-      border-bottom:none;
-      &:last-child {
-        border-left:1.25em solid #fff;
-      }
-    }
-  }
-}
-.ie6, .ie7 {
-  #footer-help {
-    margin-left:2%;
-    ul {
-      width:100%;
-      li {
-        float:left;
-        width:45%
-      }
-    }
-  }
-}
-
-
-// map box (fallback for non js really as most users
-// will have fullscreen map)
-#map_box{
-  position: absolute;
-  height: 29em;
-  width: 29em;
-  right: 1em;
-  top: 3em;
-  z-index:1;
-}
-
-// Pull OpenLayers navigation down a bit
-#fms_pan_zoom {
-  top: 4.75em !important;
-}
-
-// push zoom back over to right
-#fms_pan_zoom_zoomin {
-  left:auto !important;
-  right:30px;
-  top:130px !important;
-}
-#fms_pan_zoom_zoomout {
-  left:auto !important;
-  right:30px;
-  top:174px !important;
-}
-
-.olControlAttribution {
-  bottom:0.5em !important;
-  left: auto !important;
-}
-
-#sub_map_links {
-  left:auto;
-  bottom:auto;
-  bottom:2em;
-  #map_links_toggle {
-    display:block;
-    cursor: pointer;
-    position:absolute;
-    left:-1em;
-    width:1em;
-    height:100%;
-    background:#000 url(images/sprite.png) right -4119px no-repeat;
-    @include border-radius(0.25em 0 0 0.25em);
-    &:hover {
-      left:-1.5em;
-      //use border so we don't have to redefine the background-position
-      border-right:0.5em solid #000;
-    }
-    &.closed {
-      background-position: right -4159px;
-    }
-  }
-}
-.ie6 #sub_map_links #map_links_toggle {
-  height:1.75em;
-  background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
-  &.closed {
-    background-position: center -183px;
-  }
-}
-
-// log in bit, pokes above the .content div
-#user-meta{
-  display:block;
-  position: relative;
-  max-width: 57em;
-  margin:0 auto;
-  p {
-    @include inline-block;
-    position:absolute;
-    top:1em;
-    height:2em;
-    padding:0.25em 6em 0.5em 0.5em;
-    @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
-    a {
-      top:0.5em;
-      right:0.5em;
-      font-size:0.6875em;
-      padding:0.5em 0.75em;
-      line-height:1em;
-      &:hover {
-        text-decoration:none;
-        background:#444;
-      }
-    }
-  }
-}
-.ie6, .ie7 {
-  #user-meta {
-    z-index:1;
-    p {
-      top:-2em;
-    }
-  }
-}
-.ie6 #user-meta {
-  width:57em; //ie6 doesn't like max-width
-}
-
-
-
-// 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
-  bottom: 0;
-  width: 29em;
-  overflow: hidden;
-  padding-top: 3em;
-  ul#key-tools {
-    border-top: 0.25em solid $primary;
-    margin: 0;
-    @include box-shadow(-0em 0px 1em 1em #fff);
-    li {
-      border:none;
-      a {
-        font-size: 0.75em;
-        color:#666;
-        padding: 0.5em 1.5em 0.5em 0;
-        text-transform:none;
-        &.abuse {
-          background-image:url(images/sprite.png);
-          background-position:right -2935px;
-        }
-        &.feed {
-          background-image:url(images/sprite.png);
-          background-position:right -3074px;
-        }
-        &.chevron {
-          background-image:url(images/sprite.png);
-          background-position:right -3225px;
-        }
-        &.hover {
-          background-image:url(images/sprite.png);
-          background-position:right -1876px;
-        }
-      }
-    }
-    &.singleton {
-      li {
-        text-align:right;
-        a {
-          padding-right:3em;
-        }
-      }
-    }
-  }
-  &.static {
-    padding:0 0 1em 0;
-    position: static;
-  }
-}
-// The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
-.ie6 .shadow-wrap {
-  padding-top: 0;
-}
-
-// pokes over the RHS with a little triangle
-.big-green-banner {
-  top:auto;
-  right:-1.25em;
-  margin-left:-2em;
-  font-size:1.375em;
-  padding:1em 3em 1em 1em;
-  background: $contrast1 url(images/sprite.png) right -2188px no-repeat;
-  &:before {
-    right:0;
-    left:auto;
-    top:-0.5em;
-    position: absolute;
-    border-top: 0.5em solid transparent;
-    border-left: 0.5em solid #4B8304;
-    border-bottom:none;
-  }
-}
-.ie6 .big-green-banner {
-  background: $contrast1 url(images/ie_green_chevron.gif) right center no-repeat;
-}
-
-.banner {
-  // state banners
-  p {
-    top:-2.25em;
-    padding:1em;
-    &:before {
-      left:-0.75em;
-      border-left: 0.75em solid transparent;
-      border-bottom: 0.75em solid #888;
-    }
-    &#fixed {
-      padding-top:5em;
-      background-image:url(images/sprite.png);
-      background-position:-324px -326px;
-      background-repeat:no-repeat;
-      &:before {
-        border-bottom: 0.75em solid #4B8304;
-      }
-    }
-  }
-}
-.ie6 .banner p {
-  top:-1.5em;
-  &#fixed {
-    background-image:url(images/ie_fixed.gif);
-    background-position:center 0.75em;
-  }
-}
-
-
-// for pulling elements fullwidth regardless
-// of .contents' padding
-.full-width{
-  margin: 0 0 0em -1em;
-  width: 29em;
-}
-
-/*FORMS*/
-input[type=text],
-input[type=password],
-input[type=email],
-textarea{
-  width: 25em;
-}
-.form-box {
-  max-width:25em;
-}
-
-
-/* form errors */
-div.form-error,
-p.form-error {
-  display:block;
-  width:24.7em;
-}
-
-input.form-error,
-textarea.form-error {
-  @include border-radius(0 0 0.25em 0.25em);
-}
-
-
-// Report a problem sidebar notes
-#report-a-problem-sidebar {
-  position:absolute;
-  z-index:-1;//push behind .content, .container resets z-index for this
-  left:29.5em;
-  top:5em;
-  width:15em;
-  @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
-  .sidebar-tips {
-    background:#eeeeee;
-    padding:1em;
-    font-size:0.75em;
-  }
-  .sidebar-notes {
-    background:#333333;
-    padding:1em;
-    color:#ffffff;
-    font-size:0.75em;
-  }
-}
-.ie6, .ie7 {
-  #report-a-problem-sidebar {
-    left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
-  }
-}
-
-.no-js .general-sidebar-notes,
-.no-js #report-a-problem-sidebar {
-  position: static;
-  width: auto;
-  @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
-  .sidebar-tips,
-  .sidebar-notes {
-    font-size:1em;
-  }
-}
-
-// More general sidebar notes
-.general-sidebar-notes {
-  position: absolute;
-  left:29.5em;
-  width:15em;
-  z-index: -1; //push behind .content, .container resets z-index for this
-  @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
-  p {
-    background:#eeeeee;
-    font-size:0.75em;
-    padding:0.75em;
-    margin:0;
-    &.dark {
-      background:#333333;
-      color:#ffffff;
-    }
-  }
-}
-
-// Frontpage
-
-body.frontpage {
-  .table-cell {
-    // we do this so we can have full screen width elements
-    >.container {
-      width:100%;
-    }
-    .content {
-      margin:14em auto 0 auto;
-    }
-  }
-  .nav-wrapper-2{
-    height:6em;
-  }
-  #site-header{
-    height:9em;
-  }
-  #site-logo{
-    top:3em;
-    width: 300px;
-    height: 60px;
-    background-position:-2px -108px;
-  }
-  #user-meta {
-    z-index:10;
-    p {
-      top:-4em;
-      right:0;
-      color:#FFD000;
-      background:none;
-      @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
-      a {
-        background:#fff;
-        color:#1a1a1a;
-        &:hover {
-          background:#ddd;
-        }
-      }
-    }
-  }
-}
-//logo fix
-.ie6, .ie7, .ie8 {
-  body.frontpage {
-    #site-logo {
-      position:relative;
-      width:60em;
-      margin:0 auto;
-    }
-  }
-}
-.ie6, .ie7 {
-  body.frontpage {
-    #site-header {
-      height:3em;
-    }
-    #site-logo {
-      top:-1em;
-    }
-    #user-meta p {
-      top:-2em;
-    }
-  }
-}
-.ie6 body.frontpage #site-logo {
-  background:url(images/ie_front_logo.gif) 0 0 no-repeat;
-}
-//weird margining thing for ie8
-.ie8 body.frontpage {
-  #front-main {
-    top:-12em;
-  }
-  .table-cell .content {
-    margin-top:12em;
-  }
-}
-
-// big yellow bit full screen width
-#front-main {
-  background:$primary url(images/tile-y.jpg);
-  position:absolute;
-  width:100%;
-  left:0;
-  top:-15em;
-  #front-main-container {
-    max-width: 57em;
-    margin:0 auto;
-  }
-  h2 {
-    font-style:normal;
-    margin:0;
-    color:#222;
-  }
-  #postcodeForm {
-    background:none;
-    overflow:hidden;
-    margin-right:0.5em;
-    label {
-      margin:0.5em 0;
-    }
-    div {
-      display:block;
-      margin:0 auto;
-      width:20em;
-      overflow:hidden;
-      input#pc {
-        display:block;
-        float:left;
-        padding:0.25em 0.5em;
-        height:1.5em;
-        width:16em;
-      }
-      input#submit {
-        display:block;
-        float:right;
-        width:3em;
-        height:2.3em;
-        padding-top:0.2em;
-      }
-    }
-  }
-  a#geolocate_link {
-    background:none;
-    color:#222;
-    margin:-1em 0 0.5em 0;
-    &:hover {
-      text-decoration:underline;
-      background:none;
-    }
-  }
-}
-.ie6, .ie7 {
-  #front-main {
-    top:2em;
-  }
-}
-
-
-#front-howto {
-  border-right:1em solid #fff;
-  #front_stats {
-    background:none;
-    border-top:0.25em solid $primary;
-    padding-top:1em;
-    div {
-      big {
-        color:$primary;
-        font-size:3.2308em;
-      }
-    }
-  }
-}
-.ie6, .ie7 {
-  #front_stats {
-    div {
-      width:8em;
-      float:left;
-    }
-  }
-}
-
-#front-recently {
-  border-left:1em solid #fff;
-}
-
-#front-howto h2,
-#front-recently h2 {
-   margin-top:0;
-}
-
-
-.ie6, .ie7 {
-  .tablewrapper {
-    #front-howto {
-      margin-right:2%;
-    }
-    #front-recently {
-      margin-left:2%;
-    }
-  }
-}
-
-
-
-
-/* MEDIA QUERIES */
-@media only screen and (min-width: 48em) and (max-width: 61em) {
-  .container {
-      width: 100%;
-  }
-  /*FORMS*/
-  input[type=text],
-  input[type=password],
-  input[type=email],
-  textarea{
-    width: 95%;
-  }
-
-  // Remove central positioning of mainmenu and float right.
-  // Left padding is to ensure no overlap of the site-logo
-  // Background styling replicates header styling
-
-  #main-nav{
-    width: auto;
-    float:right;
-    padding-left: 180px;
-  }
-  .nav-wrapper {
-  //   width:auto;
-    .nav-wrapper-2 {
-      // width:auto;
-    }
-  }
-
-  //Main menu drops below logo and my-soc menu
-  #main-menu{
-    margin-top: 3em;
-  }
-  //therefore header needs to open up
-  #site-header {
-    height:6em;
-  }
-  // Pull OpenLayers navigation down a bit more
-  #fms_pan_zoom {
-    top: 7em !important;
-  }
-
-  //fix the left margin on login bit
-  #user-meta {
-    p {
-      left:1em;
-    }
-  }
-  body.frontpage {
-    #user-meta {
-      p {
-        left:auto;
-      }
-    }
-  }
-
-  //Map becomes percentage width
-  #map_box{
-    left: 32em;
-    width:auto;
-  }
-
-  //put the RAP notes into the main copy area
-  // Note: Also used for the non-JS case.
-  #report-a-problem-sidebar,
-  .general-sidebar-notes {
-    position: static;
-    width: auto;
-    @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
-    .sidebar-tips,
-    .sidebar-notes {
-      font-size:1em;
-    }
-  }
-
-  //Revert to mobile use of the .full-width class
-  .full-width{
-    width: auto;
-    margin: 0em -1em 0 -1em;
-  }
-
-  //make fullpage auto width
-  body.fullwidthpage .content {
-    width: auto;
-  }
+@import "_layout";
 
-  //make twothirdswidthpage nearly as small as main
-  //.content: just enough to still fit the sidebar in
-  body.twothirdswidthpage {
-    .content {
-      width:30em;
-      .sticky-sidebar {
-        left:32em;
-        top:30em;
-        aside {
-          top:9em;
-        }
-      }
-    }
-  }
-}
diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js
index 50f159635..54bf95964 100644
--- a/web/js/map-OpenStreetMap.js
+++ b/web/js/map-OpenStreetMap.js
@@ -79,14 +79,14 @@ OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
 });
 
 /**
- * Class: OpenLayers.Layer.OSM.Osmarender
+ * Class: OpenLayers.Layer.OSM.MapQuestOpen
  *
  * Inherits from:
  *  - <OpenLayers.Layer.OSM>
  */
-OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, {
+OpenLayers.Layer.OSM.MapQuestOpen = OpenLayers.Class(OpenLayers.Layer.OSM, {
     /**
-     * Constructor: OpenLayers.Layer.OSM.Osmarender
+     * Constructor: OpenLayers.Layer.OSM.MapQuestOpen
      *
      * Parameters:
      * name - {String}
@@ -94,16 +94,22 @@ OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, {
      */
     initialize: function(name, options) {
         var url = [
-            "http://a.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
-            "http://b.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
-            "http://c.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
+            "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+            "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+            "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+            "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
         ];
-        options = OpenLayers.Util.extend({ numZoomLevels: 18, buffer: 0 }, options);
+        options = OpenLayers.Util.extend({
+            /* Below line added to OSM's file in order to allow minimum zoom level */
+            maxResolution: 156543.0339/Math.pow(2, options.zoomOffset || 0),
+            numZoomLevels: 19,
+            buffer: 0
+        }, options);
         var newArguments = [name, url, options];
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
 
-    CLASS_NAME: "OpenLayers.Layer.OSM.Osmarender"
+    CLASS_NAME: "OpenLayers.Layer.OSM.MapQuestOpen"
 });
 
 /**