Merge branch 'barnet-newstyle'

Conflicts:
	.gitignore
	perllib/FixMyStreet/Cobrand/FixMyStreet.pm
	perllib/FixMyStreet/Cobrand/UKCouncils.pm
	templates/web/default/reports/council.html
	templates/web/fixmystreet/header.html
	templates/web/fixmystreet/report/display.html
	web/cobrands/bromley/layout.scss
	web/cobrands/fixmystreet/fixmystreet.js
	web/js/map-OpenLayers.js

41 files changed, 954 insertions, 120 deletions

diff --git a/.gitignore b/.gitignore
index 30daa380c..4bd5e9d39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ tags
 /web/cobrands/fixmystreet/*.css
 /web/cobrands/bromley/*.css
 /web/photo
+/web/cobrands/barnet/*.css
 /local
 
 /web/cobrands/fixmystreet/compass_app_log.txt
diff --git a/bin/make_css b/bin/make_css
index 27cbec1b5..22ebddba2 100755
--- a/bin/make_css
+++ b/bin/make_css
@@ -16,9 +16,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
+compass compile --output-style compressed $DIRECTORY/cobrands/barnet
 
 # The rest are plain sass
-for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v "cobrands/\(fixmystreet\|bromley\)"`
+for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v "cobrands/\(fixmystreet\|bromley\|barnet\)"`
 do
     sass --scss --update --style compressed $scss
 done
diff --git a/perllib/FixMyStreet/Cobrand/Barnet.pm b/perllib/FixMyStreet/Cobrand/Barnet.pm
index 6f115ec63..b3876a2c6 100644
--- a/perllib/FixMyStreet/Cobrand/Barnet.pm
+++ b/perllib/FixMyStreet/Cobrand/Barnet.pm
@@ -8,16 +8,100 @@ sub council_id { return 2489; }
 sub council_area { return 'Barnet'; }
 sub council_name { return 'Barnet Council'; }
 sub council_url { return 'barnet'; }
+sub all_reports_style { return 'detailed'; }
+
+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() },
+        town   => 'Barnet',
         centre => '51.612832,-0.218169',
         span   => '0.0563,0.09',
         bounds => [ '51.584682,-0.263169', '51.640982,-0.173169' ],
     };
 }
 
+sub generate_problem_banner {
+    my ( $self, $problem ) = @_;
+
+    my $banner = {};
+    if ( $problem->is_open && time() - $problem->lastupdate_local->epoch > 8 * 7 * 24 * 60 * 60 )
+    {
+        $banner->{id}   = 'unknown';
+        $banner->{text} = _('Unknown');
+    }
+    if ($problem->is_fixed) {
+        $banner->{id} = 'fixed';
+        $banner->{text} = _('Fixed');
+    }
+    if ($problem->is_closed) {
+        $banner->{id} = 'closed';
+        $banner->{text} = _('Closed');
+    }
+
+    if ( grep { $problem->state eq $_ } ( 'investigating', 'in progress', 'planned' ) ) {
+        $banner->{id} = 'progress';
+        $banner->{text} = _('In progress');
+    }
+
+    return $banner;
+}
+
+sub council_rss_alert_options {
+  my $self = shift;
+  my $all_councils = shift;
+  my $c            = shift;
+
+  my %councils = map { $_ => 1 } $self->area_types();
+
+  my $num_councils = scalar keys %$all_councils;
+
+  my ( @options, @reported_to_options );
+  if ( $num_councils == 1 or $num_councils == 2 ) {
+    my ($council, $ward);
+    foreach (values %$all_councils) {
+        if ($councils{$_->{type}}) {
+            $council = $_;
+            $council->{short_name} = $self->short_name( $council );
+            ( $council->{id_name} = $council->{short_name} ) =~ tr/+/_/;
+        } else {
+            $ward = $_;
+            $ward->{short_name} = $self->short_name( $ward );
+            ( $ward->{id_name} = $ward->{short_name} ) =~ tr/+/_/;
+        }
+    }
+
+    push @options,
+      {
+        type      => 'council',
+        id        => sprintf( 'council:%s:%s', $council->{id}, $council->{id_name} ),
+        text      => 'All problems within the council.',
+        rss_text  => sprintf( _('RSS feed of problems within %s'), $council->{name}),
+        uri       => $c->uri_for( '/rss/reports/' . $council->{short_name} ),
+      };
+    push @options,
+      {
+        type     => 'ward',
+        id       => sprintf( 'ward:%s:%s:%s:%s', $council->{id}, $ward->{id}, $council->{id_name}, $ward->{id_name} ),
+        rss_text => sprintf( _('RSS feed of problems within %s ward'), $ward->{name}),
+        text     => sprintf( _('Problems within %s ward'), $ward->{name}),
+        uri      => $c->uri_for( '/rss/reports/' . $council->{short_name} . '/' . $ward->{short_name} ),
+      } if $ward;
+    }
+
+    return ( \@options, @reported_to_options ? \@reported_to_options : undef );
+}
+
+sub example_places {
+    return [ 'N11 1NP', 'Wood St' ];
+}
 1;
 
diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm
index b69bb0f99..2a49e9246 100644
--- a/perllib/FixMyStreet/Cobrand/Default.pm
+++ b/perllib/FixMyStreet/Cobrand/Default.pm
@@ -136,6 +136,15 @@ Parameter is QUERY
 
 sub enter_postcode_text { '' }
 
+=head2 all_reports_style
+
+Return the type of problem information to display on the all reports
+pages for councils. Can be either simple or detailed.
+
+=cut
+
+sub all_reports_style { return 'simple'; }
+
 =head2 set_lang_and_domain
 
     my $set_lang = $cobrand->set_lang_and_domain( $lang, $unicode, $dir )
diff --git a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
index 32ac0ef8d..8d6eb9ec8 100644
--- a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
+++ b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
@@ -21,6 +21,8 @@ sub get_council_sender {
     return 'Email';
 }
 
+sub all_reports_style { return 'detailed'; }
+
 sub generate_problem_banner {
     my ( $self, $problem ) = @_;
 
diff --git a/templates/web/barnet/faq/faq-en-gb.html b/templates/web/barnet/faq/faq-en-gb.html
new file mode 100755
index 000000000..126a03314
--- /dev/null
+++ b/templates/web/barnet/faq/faq-en-gb.html
@@ -0,0 +1,103 @@
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
+
+<h1>Frequently Asked Questions</h1>
+
+<p>These pages are for reporting things which are broken or dirty or damaged or dumped, and need fixing, cleaning or clearing, such as:</p>
+    <ul><li>abandoned vehicles
+    <li>flyposting or graffiti
+    <li>flytipping or litter
+    <li>streetcleaning, such as broken glass in a cycle lane
+    <li>unlit lamposts
+    <li>broken playground equipment
+    <li>potholes
+    </ul>
+
+<dl>
+    <dt>What issues can&rsquo;t be reported here?</dt>
+    <dd><p>It is not a way of reporting all issues. Problems such as:</p>
+    <ul>
+    <li>missed rubbish or recycling collections
+    <li>anti-social behaviour
+    <li>noise pollution or barking dogs
+    <li>fires and smoke/smell pollution
+    <li>proposals for speed bumps/ CCTV/ pedestrian crossings/ new road layouts/ etc.
+    <li>complaining about your neighbours
+    <li>complaining or commenting about the council
+    </ul>
+    </dd>
+
+        <dt>How do I report a problem here?</dt>
+        <dd>After entering a postcode or location, you are shown
+a map of that area. You can view problems already reported in that area,
+or report ones of your own by clicking on the map at the location of
+the problem.</dd>
+        <dt>How are the problems solved?</dt>
+        <dd>They are reported directly to us so we can then resolve the problem.
+        You can also discuss the problem on the website with others if you wish.</dd>
+
+        <dt>Do you remove silly or illegal content?</dt>
+        <dd>Barnet Council and FixMyStreet are not responsible for the content and accuracy
+of material submitted by their users. We reserve the right to edit or remove any
+problems or updates which we consider to be inappropriate upon being informed
+by a user of the site.</dd>
+
+    <dt>Can I use FixMyStreet on my mobile?</dt>
+    <dd>Yes a special mobile friendly version is available to report problem in Barnet’s streets or parks.
+    </dd>
+
+    <dt>Can I use these pages to report problems outside of the London Borough of Barnet?</dd>
+    <dd>No, please visit the main FixMyStreet site at <a href="http://www.fixmystreet.com/">http://www.fixmystreet.com/</a> to report problem outside the borough.</dd>
+
+        <dt>Who built FixMyStreet?</dt>
+        <dd>FixMyStreet was built by <a href="http://www.mysociety.org/">mySociety</a>, in conjunction with the <a href="http://www.youngfoundation.org.uk/">Young Foundation</a>. 
+mySociety is the project of a registered charity which has grown out of the community of
+volunteers who built sites like <a href="http://www.theyworkforyou.com/">TheyWorkForYou</a>. 
+mySociety&rsquo;s primary mission is to build Internet projects which give people simple, tangible
+benefits in the civic and community aspects of their lives. Our first project
+was <a href="http://www.writetothem.com/">WriteToThem</a>, where you can write to any of your
+elected representatives, for free. The charity is called UK Citizens Online Democracy and is charity number 1076346. mySociety 
+can be contacted by email at <a href="mailto:hello&#64;mysociety.org">hello&#64;mysociety.org</a>,
+or by post at: mySociety, 483 Green Lanes, London, N13 4BS, UK.</dd>
+
+    <dt>Why does the site use kilometres for measurements?</dt>
+    <dd>The British national
+    grid reference system, devised by Ordnance Survey (the British national
+    mapping agency) around the time of the second world war, uses eastings and
+    northings measured in metres and kilometres; the maps we use are from
+    Ordnance Survey and so this is what we use to display distances.
+    There you have it: not everything British is in miles!</dd>
+
+    <dt>Why can&rsquo;t I zoom out more on the reporting map?</dt>
+    <dd>We want to keep reports locally focused, so we restrict the ability to
+    move radically between areas. The map on <a href="/my">Your Reports</a> will let you see all
+    the reports you&rsquo;ve made, wherever they are.</dd>
+
+        <dt>Who gets to see my email address?</dt>
+        <dd>If you submit a problem, your details, and details
+        of the problem, will be submitted to Barnet Council.
+Other than the council, only people we authorise to view the FixMyStreet administration interface
+will be able to see your email address and they will never use it for anything other than 
+to help administer FixMyStreet. We will never give or sell your email address to anyone else, 
+unless we are obliged to by law. Your name will not be published anywhere unless you let us.</dd>
+
+        <dt>What emails will you send to me?</dt>
+        <dd>We will email you if someone leaves an update on a
+problem you&rsquo;ve reported, and send you a questionnaire email four weeks
+after you submit a problem, asking for a status update; we&rsquo;ll only ever
+send you emails in relation to your problem.</dd>
+
+        <dt>I&rsquo;d like a site like this for my own location/ where&rsquo;s the "source code" to this site?</dt>
+        <dd>
+The software behind this site is open source, and available
+to you mainly under the GNU Affero GPL software license. You can <a
+href="http://github.com/mysociety/fixmystreet">download the
+source code</a> and help us develop it.
+You&rsquo;re welcome to use it in your own projects, although you must also
+make available the source code to any such projects.
+<a href="http://www.fiksgatami.no/">Fiksgatami</a> is an example of our code
+being used in a Norwegian version of this site.
+</dd>
+
+    </dl>
+
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/barnet/footer.html b/templates/web/barnet/footer.html
index 32c6b5f7b..7982ad530 100644
--- a/templates/web/barnet/footer.html
+++ b/templates/web/barnet/footer.html
@@ -1,7 +1,37 @@
-							</div>
-						<!-- end of content, start of  footer -->
-						</div>
-					</div>
+        <p id="barnet-powered-by" class="desk-only">
+            <a href="http://www.fixmystreet.com/">Powered by <img src="/cobrands/barnet/img/fms-logo.png" style="height:20px;"></a>
+        </p>
+                </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 <img src="/cobrands/barnet/img/fms-logo.png" style="height:20px;"></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/Barnet' %]span[% ELSE %]a href="/reports/Barnet"[% 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>
+
+    </div> <!-- .wrapper -->
+</div>
+</div>
+</div>
+
 <!-- googleoff: index -->
 					<div id="column_nav">
 						<div class="navigation active">
@@ -44,8 +74,7 @@
 						</div>
 					</div>
 <!-- googleon: index -->
-				</div>
-			</div>
-		</div>
+</div>
+</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/web/barnet/header.html b/templates/web/barnet/header.html
index 955473090..1b921d44d 100644
--- a/templates/web/barnet/header.html
+++ b/templates/web/barnet/header.html
@@ -1,60 +1,92 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-	<head>
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/standard.css" media="screen" />
-<!--[if lte IE 6]>
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-six.css" media="screen" />
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-six-print.css" media="print" />
-<![endif]-->
-<!--[if IE 7]>
-	    <link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-seven.css" media="screen" />
-<![endif]-->		
-<!--[if IE 8]>
-	    <link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-eight.css" media="screen" />
-<![endif]-->		
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/print.css" media="print" />
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/handheld.css" media="handheld" />
-		<link rel="Shortcut Icon" type="image/x-icon" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/favicon.ico" />
+<!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="ToC" href="http://www.barnet.gov.uk/site_map" />
 		<meta name="Keywords" content="fixmystreet barnet pothole streetlights report street problem" />
 		<meta name="Description" content="FixMyStreet Barnet: report problems in Barnet like graffiti, fly tipping, broken paving slabs, or street lighting" />
 
- 		<link rel="stylesheet" type="text/css" href="[% version('/css/core.css') %]">    
-		<link rel="stylesheet" type="text/css" href="/cobrands/barnet/css/layout.css">
-
-    [% INCLUDE 'common_header_tags.html' %]
-
-	</head>
-	<body>
-		<div id="wrapper">
-			<div id="ie_wrapper">
-<!-- googleoff: index -->
-				<div id="mobile_name">London Borough of Barnet</div>
-				<div id="mast">
-					<div class="pseudoH1">
-						<a href="http://www.barnet.gov.uk/"><span>London Borough of Barnet</span> <img src="http://pledgebank.barnet.gov.uk/microsites/barnet/site/images/blank.gif" alt="London Borough of Barnet logo" /></a>
-					</div>
-					<ul id="skip" class="hidden">
-						<li><a href="#content" rel="nofollow">Skip to content</a></li>
-						<li><a href="#column_nav" rel="nofollow">Skip to main navigation</a></li>
-					</ul>
-					<div class="mast_links"></div>
-					<span class="clear"></span>
-					<div id="search"></div>
-					<div class="clear"></div>
-				</div>
-<!-- googleon: index -->
-				<div id="page_wrap">
-					<div id="page">
-						<div id="breadcrumb">
-<!-- googleoff:all -->
-							<ul>
-								<li><a href="/">FixMyStreet Home</a></li>
-								<li class="bc_end"><span>[% c.req.uri.path == '/'? 'Report a problem' : "$title" | html  %]</span></li>
-							</ul>
-<!-- googleon:all -->
-						</div>
-						<div id="content" class="withWidth fullWidth">
-              <div id="mysociety">
-
-              <!-- end of header --> 
\ No newline at end of file
+		<link rel="Shortcut Icon" type="image/x-icon" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/favicon.ico" />
+
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/base.css') %]">
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/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/barnet/layout.css') %]">
+        <![endif]-->
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/barnet.css') %]" media="(min-width:48em)">
+        <!--[if (lt IE 9) & (!IEMobile)]>
+            <link rel="stylesheet" href="[% version('/cobrands/barnet/barnet.css') %]">
+        <![endif]-->
+
+        <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script>
+        <script src="[% version('/cobrands/barnet/position_map.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>
+
+    </head>
+    <body class="[% bodyclass | html IF bodyclass %]">
+        <div id="barnet-wrapper">
+        <div id="ie_wrapper">
+            <div id="mast">
+                <div class="pseudoH1">
+                    <a href="http://www.barnet.gov.uk/"><span>London Borough of Barnet</span> <img src="http://pledgebank.barnet.gov.uk/microsites/barnet/site/images/blank.gif" alt="London Borough of Barnet logo" /></a>
+                </div>
+                <ul id="skip" class="hidden">
+                    <li><a href="#content" rel="nofollow">Skip to content</a></li>
+                    <li><a href="#column_nav" rel="nofollow">Skip to main navigation</a></li>
+                </ul>
+                <div class="mast_links"></div>
+                <span class="clear"></span>
+                <div id="search"></div>
+                <div class="clear"></div>
+            </div>
+            <div id="page_wrap">
+                <div id="page">
+                    <div id="breadcrumb">
+        <!-- googleoff:all -->
+                        <ul>
+                            <li><a href="http://www.barnet.gov.uk/">Home</a></li>
+                            <li><a href="/">FixMyStreet</a></li>
+                            <li class="bc_end"><span>
+                            [% IF c.req.uri.path == '/' %]Report a problem[% ELSE %][% title %][% END %]
+                            </span></li>
+                        </ul>
+        <!-- googleon:all -->
+                    </div>
+                    <div id="content" class="withWidth fullWidth">
+                        <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>
+                            [% END %]
+                        </div>
+
+                        <h1 id="page-title">
+                            <span>FixMyStreet</span>
+                        </h1>
+
+        <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 class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
+
+              <!-- end of header -->
diff --git a/templates/web/barnet/index.html b/templates/web/barnet/index.html
new file mode 100644
index 000000000..0dfacf499
--- /dev/null
+++ b/templates/web/barnet/index.html
@@ -0,0 +1,99 @@
+[%# Assumes fixmystreet cobrand is using FMS map template - for bonus points preload all the right map elements. %]
+[% map_js = BLOCK %]
+<script>
+yepnope.addPrefix( 'preload', function ( resource ) {
+    resource.noexec = true;
+    return resource;
+});
+Modernizr.load({
+    load: [
+        "preload![% version('/js/OpenLayers.fixmystreet.js') %]",
+        "preload![% version('/js/map-OpenLayers.js') %]",
+        "preload![% version('/js/map-bing-ol.js') %]",
+        "preload![% version('/js/jquery.ba-hashchange.min.js') %]"
+    ]
+});
+</script>
+[% END %]
+
+[% INCLUDE 'header.html', title => '' , bodyclass => 'frontpage fullwidthpage' %]
+
+[% IF error %]
+    <p class="error">[% error %]</p>
+[% END %]
+
+
+<div id="front-main">
+    <div id="front-main-container">
+        <h1>[% loc('Report, view, or discuss local problems') %]</h1>
+
+        <h2>[% loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)') %]</h2>
+
+        [%
+            question
+                =  c.cobrand.enter_postcode_text()
+                || loc("Enter a nearby GB postcode, or street name and area");
+        %]
+
+        <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="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+                <input type="submit" value="[% loc('Go') %]" id="submit">
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="tablewrapper">
+    <div id="front-howto">
+        <h2>[% loc('How to report a problem') %]</h2>
+        
+        <ol class="big-numbers">
+            <li>[% question %]</li>
+            <li>[% loc('Locate the problem on a map of the area') %]</li>
+            <li>[% loc('Enter details of the problem') %]</li>
+        </ol>
+        
+        <section class="full-width">
+        [% INCLUDE "front/stats.html" %]
+        [% TRY %][% INCLUDE "front/tips.html" %][% CATCH file %][% END %]
+        </section>
+    </div>
+
+
+    [% 
+        recent_photos = c.cobrand.recent_photos(5);
+    %]
+
+    [% IF recent_photos.size %]
+    <div id="front-recently">
+        <h2>[% loc('Recently reported problems') %]</h2>
+
+        <section class="full-width">
+            <ul class="issue-list-a">
+            [% FOREACH p IN recent_photos %]
+                <li>
+                    <a href="/report/[% p.id %]">
+                        <div class="text">
+                            <h4>[% p.title | html %]</h4>
+                            <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
+                        </div>
+                        <div class="img">
+                            <img alt="[% p.title | html %]" title="[% p.title | html %]" height="60" width="90" src="/photo/[% p.id %].fp.jpeg">
+                        </div>
+                    </a>
+                </li>    
+            [% END %]
+            </ul>
+        </section>
+
+    </div>
+    [% END %]
+</div>
+
+
+<!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] -->
+
+
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/barnet/report/new/councils_text_all.html b/templates/web/barnet/report/new/councils_text_all.html
new file mode 100644
index 000000000..20152928b
--- /dev/null
+++ b/templates/web/barnet/report/new/councils_text_all.html
@@ -0,0 +1,4 @@
+<p>
+All the information you provide here will be sent to the <strong>relevant department</strong>.
+[% loc('The subject and details of the problem will be public, plus your name if you give us permission.') %]
+</p>
diff --git a/templates/web/barnet/report/updates-sidebar-notes.html b/templates/web/barnet/report/updates-sidebar-notes.html
new file mode 100644
index 000000000..9fff322a1
--- /dev/null
+++ b/templates/web/barnet/report/updates-sidebar-notes.html
@@ -0,0 +1 @@
+        <p>[% loc( 'Please note that updates are not sent to the relevant department. If you leave your name it will be public. Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>' ) %]</p>
diff --git a/templates/web/default/faq/faq-en-gb.html b/templates/web/default/faq/faq-en-gb.html
index 2c1c43799..4302add0d 100755
--- a/templates/web/default/faq/faq-en-gb.html
+++ b/templates/web/default/faq/faq-en-gb.html
@@ -25,11 +25,11 @@ or clearing</strong>, such as:
     </dd>
 
     <dt>What isn&rsquo;t FixMyStreet for?</dt>
-    <dd>FixMyStreet is not a way of getting in touch with [% c.cobrand.moniker == 'southampton' ? 'the' : 'your' %] council for all
+    <dd>FixMyStreet is not a way of getting in touch with [% c.cobrand.is_council ? 'the' : 'your' %] council for all
     issues &ndash; please use FixMyStreet only for problems such as the above. We
     often route problem reports via cleansing services or highways and so using
     FixMyStreet for other matters may result in a delay in your report getting
-    to the right department. <strong>You will need to contact [% c.cobrand.moniker == 'southampton' ? 'the' : 'your' %] council
+    to the right department. <strong>You will need to contact [% c.cobrand.is_council ? 'the' : 'your' %] council
     directly for problems such as</strong>: 
 
     <ul><li>Anti-social behaviour
@@ -51,7 +51,7 @@ with a map of that area. You can view problems already reported in that area,
 or report ones of your own simply by clicking on the map at the location of
 the problem.</dd>
         <dt>How are the problems solved?</dt>
-        <dd>They are reported to the [% IF c.cobrand.moniker != 'southampton' %]relevant[% END %] council by email. The
+        <dd>They are reported to the [% IF !c.cobrand.is_council %]relevant[% END %] council by email. The
 council can then resolve the problem the way they normally would.
 Alternatively, you can discuss the problem on the website with others[% IF c.cobrand.moniker != 'southampton' %], and
 then together lobby the council to fix it, or fix it directly yourselves[% END %].</dd>
diff --git a/templates/web/default/reports/council.html b/templates/web/default/reports/council.html
index d1c2241c7..75c379bd6 100755
--- a/templates/web/default/reports/council.html
+++ b/templates/web/default/reports/council.html
@@ -14,6 +14,12 @@
     %]
 [% END %]
 
+[% IF c.cobrand.is_council %]
+    [% ward_text = loc( 'View reports by ward' ) %]
+[% ELSE %]
+    [% ward_text = loc( 'Wards of this council' ) %]
+[% END %]
+
 [%
     PROCESS "maps/${map.type}.html";
     INCLUDE 'header.html',
@@ -25,8 +31,8 @@
 
 [% map_html %]
 
-[% IF style != 'new' AND children.size %]
-<h2 style="clear:right">[% loc('Wards of this council') %]</h2>
+[% IF c.cobrand.all_reports_style != 'detailed' AND children.size %]
+<h2 style="clear:right">[% ward_text %]</h2>
 <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
 <ul>
 [% FOR child IN children.values.sort('name') %]
@@ -72,7 +78,7 @@ 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 style == 'new' %]
+[% ELSIF c.cobrand.all_reports_style == 'detailed' %]
     <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 %]">[%
@@ -80,18 +86,14 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
                     'Get updates of reports in Bromley';
                 ELSIF c.cobrand.moniker == 'bromley';
                     'Get updates of reports in this ward';
+                ELSIF c.cobrand.is_council;
+                    tprintf(loc('Get updates of %s problems'), thing);
                 ELSE;
                     tprintf(loc('Get updates of problems in this %s'), thing);
                 END
             %]</a></li>
             [% IF children.size %]
-            <li><a href="#council_wards" id="key-tool-wards" class="chevron">[%
-                IF c.cobrand.moniker == 'bromley';
-                    'View reports by ward';
-                ELSE;
-                    loc('Wards of this council');
-                END
-            %]</a></li>
+            <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% ward_text %]</a></li>
             [% END %]
         </ul>
     </div>
@@ -101,9 +103,9 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
 
 [% TRY %][% INCLUDE 'reports/cobrand_stats.html' %][% CATCH file %][% END %]
 
-[% IF style == 'new' AND children.size %]
+[% IF c.cobrand.all_reports_style == 'detailed' AND children.size %]
 <section id="council_wards" class="hidden-js">
-    <h2>[% loc('Wards of this council') %]</h2>
+<h2>[% ward_text %]</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') %]
@@ -137,7 +139,7 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a
 [% IF problems %]
 
 <ul class="issue-list-a">
-[% IF style == 'new' %]
+[% IF c.cobrand.all_reports_style == 'detailed' %]
 
 [% FOREACH problem IN problems %]
     <li>
diff --git a/templates/web/fixmystreet/alert/_list.html b/templates/web/fixmystreet/alert/_list.html
index e9f877466..e14d394f2 100644
--- a/templates/web/fixmystreet/alert/_list.html
+++ b/templates/web/fixmystreet/alert/_list.html
@@ -30,7 +30,11 @@
   </p>
 
   <p>
+  [% IF c.cobrand.is_council %]
+  Or you can subscribe to an alert for all council problems or one based upon what ward you&rsquo;re in:
+  [% ELSE %]
   [% loc("Or you can subscribe to an alert based upon what ward or council you&rsquo;re in:") %]
+  [% END %]
   </p>
 
     [% IF reported_to_options %]
diff --git a/templates/web/fixmystreet/faq/faq-en-gb.html b/templates/web/fixmystreet/faq/faq-en-gb.html
index 1e676d9f2..badbed06b 100755
--- a/templates/web/fixmystreet/faq/faq-en-gb.html
+++ b/templates/web/fixmystreet/faq/faq-en-gb.html
@@ -36,11 +36,11 @@ or clearing</strong>, such as:
     </dd>
 
     <dt>What isn&rsquo;t FixMyStreet for?</dt>
-    <dd>FixMyStreet is not a way of getting in touch with [% c.cobrand.moniker == 'southampton' ? 'the' : 'your' %] council for all
+    <dd>FixMyStreet is not a way of getting in touch with [% c.cobrand.is_council ? 'the' : 'your' %] council for all
     issues &ndash; please use FixMyStreet only for problems such as the above. We
     often route problem reports via cleansing services or highways and so using
     FixMyStreet for other matters may result in a delay in your report getting
-    to the right department. <strong>You will need to contact [% c.cobrand.moniker == 'southampton' ? 'the' : 'your' %] council
+    to the right department. <strong>You will need to contact [% c.cobrand.is_council ? 'the' : 'your' %] council
     directly for problems such as</strong>: 
 
     <ul><li>Anti-social behaviour
@@ -62,7 +62,7 @@ with a map of that area. You can view problems already reported in that area,
 or report ones of your own simply by clicking on the map at the location of
 the problem.</dd>
         <dt>How are the problems solved?</dt>
-        <dd>They are reported to the [% IF c.cobrand.moniker != 'southampton' %]relevant[% END %] council by email. The
+        <dd>They are reported to the [% IF !c.cobrand.is_council %]relevant[% END %] council by email. The
 council can then resolve the problem the way they normally would.
 Alternatively, you can discuss the problem on the website with others[% IF c.cobrand.moniker != 'southampton' %], and
 then together lobby the council to fix it, or fix it directly yourselves[% END %].</dd>
diff --git a/templates/web/fixmystreet/header.html b/templates/web/fixmystreet/header.html
index 85e693cb6..731af797a 100644
--- a/templates/web/fixmystreet/header.html
+++ b/templates/web/fixmystreet/header.html
@@ -19,6 +19,7 @@
         <![endif]-->
 
         <script src="[% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
+        <script src="[% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js' %]
         [% extra_js %]
                 
diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index 515d5c693..26e041d61 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -57,11 +57,7 @@
 
     [% IF c.cobrand.moniker != 'emptyhomes' %]
     <div class="general-sidebar-notes">
-        <p>
-        [% IF problem.council != '2482' OR problem.send_method_used != 'Open311' %]
-            [% loc( 'Please note that updates are not sent to the council.' ) %]
-        [% END %]
-        [% loc( 'Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>' ) %]</p>
+        [% INCLUDE 'report/updates-sidebar-notes.html' %]
     </div>
     [% END %]
 
diff --git a/templates/web/fixmystreet/report/updates-sidebar-notes.html b/templates/web/fixmystreet/report/updates-sidebar-notes.html
new file mode 100644
index 000000000..7dd6a235c
--- /dev/null
+++ b/templates/web/fixmystreet/report/updates-sidebar-notes.html
@@ -0,0 +1,5 @@
+        <p>
+        [% IF problem.council != '2482' OR problem.send_method_used != 'Open311' %]
+            [% loc( 'Please note that updates are not sent to the council.' ) %]
+        [% END %]
+        [% loc( 'Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>' ) %]</p>
diff --git a/web/cobrands/barnet/_colours.scss b/web/cobrands/barnet/_colours.scss
new file mode 100644
index 000000000..2f5ccc42b
--- /dev/null
+++ b/web/cobrands/barnet/_colours.scss
@@ -0,0 +1,9 @@
+/* COLOURS */
+
+$primary: #E9E9EA;
+$primary_b: #000000;
+$primary_text: #3E3D44;
+
+$contrast1: #E1E3E4;
+$contrast1_dark: darken(#E1E3E4, 10%);
+$contrast2: #AA8D11;
diff --git a/web/cobrands/barnet/barnet.scss b/web/cobrands/barnet/barnet.scss
new file mode 100644
index 000000000..3a2b4ab01
--- /dev/null
+++ b/web/cobrands/barnet/barnet.scss
@@ -0,0 +1,115 @@
+/* Parts of barnet's main CSS needed for its header/footer and adjusted (see
+ * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable;
+ * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm.
+ */
+
+@import "compass";
+
+#column_nav li { list-style: none ;}
+
+#content ol.big-numbers li {
+    padding: 0 0 0 2.5em;
+}
+
+#barnet-wrapper {
+  width: 100%;
+  display: table;
+  caption-side: bottom;
+}
+
+#barnet-powered-by {
+    clear: both;
+}
+
+body {font-size: 77%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;}
+body > html {font-size: 12px;}
+
+#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;}
+#ie_wrapper {display: block; padding: 20px 25px 25px;}
+#page {float: left; width: 100%;}
+
+#mast {clear: both;}
+
+#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;}
+#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;}
+#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;}
+
+#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;}
+
+#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;}
+
+/* ############################################################## */
+
+#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;}
+#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;}
+#content.fullWidth {width: 678px;}
+#content.home {margin-top: 18px;}
+
+.mappage {
+    #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;}
+    #content.fullWidth {width: 900px;}
+}
+
+/* IE6 ignore the second #foo.bar rule so we have to fudge it another way */
+.ie6 {
+    .mappage {
+        #content {
+            margin: 0 0 0 0px;
+            overflow: hidden;
+            float: left;
+            display: inline;
+            width: 900px;
+        }
+    }
+}
+
+#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;}
+#breadcrumb.full {margin: 0;}
+#breadcrumb ul {margin: 0; padding: 0; list-style: none;}
+#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;}
+#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;}
+#breadcrumb ul li span {font-weight: normal; color: #5c6267;}
+
+/* ############################################################## */
+
+#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;}
+
+.ie6 #column_nav {
+    float: none;
+    position: absolute;
+    top: 85px;
+    margin: 0 0 0 0px;
+}
+
+body.mappage #column_nav { display: none; }
+
+#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;}
+#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;}
+#content h1#reports_heading span { display: none; }
+
+#column_nav .navigation {background: #fff; margin: 0 0 4px;}
+#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;}
+#column_nav #nav1 h2 {border-radius: 0 0 0 3px;}
+#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;}
+#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;}
+#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);}
+#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;}
+#column_nav ul li.lastItem {border-bottom: none;}
+#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;}
+#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;}
+
+/* ############################################################## */
+
+#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;}
+#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;}
+#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;}
+#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;}
+#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;}
+#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;}
+#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;}
+#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;}
+#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;}
+#footer a#share_twitter {background-image: url(img/social2-twitter.gif);}
+#footer a#share_youtube {background-image: url(img/social3-youtube.gif);}
+#footer a#share_flickr {background-image: url(img/social4-flickr.gif);}
+#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;}
diff --git a/web/cobrands/barnet/base.scss b/web/cobrands/barnet/base.scss
new file mode 100644
index 000000000..0447c6779
--- /dev/null
+++ b/web/cobrands/barnet/base.scss
@@ -0,0 +1,39 @@
+@import "../fixmystreet/_h5bp";
+@import "./_colours";
+@import "../fixmystreet/_mixins";
+@import "compass";
+
+@import "../fixmystreet/_base";
+
+#mast,
+#breadcrumb,
+#page-title,
+#column_nav,
+#footer,
+#bottomBar
+{ display: none }
+
+#site-header{
+    @include background(none);
+    background-color: white;
+}
+#site-logo {
+    width: 235px;
+    background: url('/cobrands/barnet/img/barnet-logo.gif') -3px -3px no-repeat;
+}
+#nav-link {
+    right: 1em;
+    background: url('/cobrands/barnet/img/barnet-skipnav.png') no-repeat;
+}
+
+#front-main #postcodeForm div input#submit,
+.green-btn,
+button.green-btn,
+input.green-btn,
+.red-btn,
+button.red-btn,
+input.red-btn{
+  @include button-reset;
+  background: #5D6167;
+  color: white;
+}
diff --git a/web/cobrands/barnet/config.rb b/web/cobrands/barnet/config.rb
new file mode 100644
index 000000000..cab97b18f
--- /dev/null
+++ b/web/cobrands/barnet/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/barnet/img/barnet-footer-logo.gif b/web/cobrands/barnet/img/barnet-footer-logo.gif
new file mode 100644
index 000000000..afba1cca2
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-footer-logo.gif
diff --git a/web/cobrands/barnet/img/barnet-logo.gif b/web/cobrands/barnet/img/barnet-logo.gif
new file mode 100644
index 000000000..86e0f4ee8
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-logo.gif
diff --git a/web/cobrands/barnet/img/barnet-skipnav.png b/web/cobrands/barnet/img/barnet-skipnav.png
new file mode 100644
index 000000000..21efe0f67
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-skipnav.png
diff --git a/web/cobrands/barnet/img/bcArrow.gif b/web/cobrands/barnet/img/bcArrow.gif
new file mode 100644
index 000000000..4e7c1848e
--- /dev/null
+++ b/web/cobrands/barnet/img/bcArrow.gif
diff --git a/web/cobrands/barnet/img/browsealoud.gif b/web/cobrands/barnet/img/browsealoud.gif
new file mode 100644
index 000000000..4fbb3eded
--- /dev/null
+++ b/web/cobrands/barnet/img/browsealoud.gif
diff --git a/web/cobrands/barnet/img/directgov.gif b/web/cobrands/barnet/img/directgov.gif
new file mode 100644
index 000000000..1c9dd22e2
--- /dev/null
+++ b/web/cobrands/barnet/img/directgov.gif
diff --git a/web/cobrands/barnet/img/fms-logo.png b/web/cobrands/barnet/img/fms-logo.png
new file mode 100644
index 000000000..23bea6b0f
--- /dev/null
+++ b/web/cobrands/barnet/img/fms-logo.png
diff --git a/web/cobrands/barnet/img/nav-arrow-active.gif b/web/cobrands/barnet/img/nav-arrow-active.gif
new file mode 100644
index 000000000..89ff9d0b3
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-arrow-active.gif
diff --git a/web/cobrands/barnet/img/nav-bg-active.gif b/web/cobrands/barnet/img/nav-bg-active.gif
new file mode 100644
index 000000000..0d2ec9873
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-bg-active.gif
diff --git a/web/cobrands/barnet/img/social1-facebook.gif b/web/cobrands/barnet/img/social1-facebook.gif
new file mode 100644
index 000000000..41b404df0
--- /dev/null
+++ b/web/cobrands/barnet/img/social1-facebook.gif
diff --git a/web/cobrands/barnet/img/social2-twitter.gif b/web/cobrands/barnet/img/social2-twitter.gif
new file mode 100644
index 000000000..17f368536
--- /dev/null
+++ b/web/cobrands/barnet/img/social2-twitter.gif
diff --git a/web/cobrands/barnet/img/social3-youtube.gif b/web/cobrands/barnet/img/social3-youtube.gif
new file mode 100644
index 000000000..eeb6ba356
--- /dev/null
+++ b/web/cobrands/barnet/img/social3-youtube.gif
diff --git a/web/cobrands/barnet/img/social4-flickr.gif b/web/cobrands/barnet/img/social4-flickr.gif
new file mode 100644
index 000000000..300e75da0
--- /dev/null
+++ b/web/cobrands/barnet/img/social4-flickr.gif
diff --git a/web/cobrands/barnet/layout.scss b/web/cobrands/barnet/layout.scss
new file mode 100644
index 000000000..97b27cfff
--- /dev/null
+++ b/web/cobrands/barnet/layout.scss
@@ -0,0 +1,260 @@
+@import "_colours";
+@import "../fixmystreet/_layout";
+
+#mast,
+#breadcrumb,
+#page-title,
+#column_nav,
+#footer,
+#bottomBar {
+    display: block;
+}
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
+}
+
+#front-main {
+    background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
+    width: 678px;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+    #front-main-container {
+        padding: 1em;
+    }
+}
+
+#front_intro {
+    float: left;
+    margin-right: 3em;
+}
+
+#front_recent {
+    margin-left: 3em;
+}
+
+body.fullwidthpage {
+    .content {
+        width: 52em;
+    }
+}
+.ie6 {
+    body.fullwidthpage {
+        #front-main {
+            margin-top: -4em;
+        }
+        #front-howto,
+        #front-recently {
+            width: 26em;
+        }
+        .container {
+            padding: 0;
+        }
+        .content {
+            margin-left: 0px;
+            width: 55em;
+        }
+        div.img {
+            margin-top: -3.3em;
+        }
+    }
+}
+
+body.twothirdswidthpage {
+    .content {
+        @include box-shadow(none);
+        width: 640px;
+        margin-top: 0;
+        .sticky-sidebar {
+            display: none;
+            aside {
+                top: 25em;
+            }
+        }
+    }
+}
+
+.nav-wrapper {
+    display: none;
+}
+
+.mappage {
+    #breadcrumb {
+        margin-left: 0px;
+    }
+}
+
+.frontpage .content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .frontpage .content {
+        border: none;
+    }
+}
+
+#content .container h1 {
+    border-bottom: none;
+    font-size: 2em;
+    margin-bottom: 0.5em;
+}
+
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+    li {
+        a.chevron {
+            background-position: right -3230px;
+        }
+        a.feed {
+            background-position: right -3080px;
+        }
+        a.abuse {
+            background-position: right -2940px;
+        }
+    }
+  }
+  ul#key-tools.singleton {
+    li a {
+        padding-right: 4em;
+    }
+  }
+}
+
+#content h1.big-green-banner {
+    font-size: 1.4em;
+    margin-left: -2em;
+    background: #e1e3e4 url(/cobrands/fixmystreet/images/sprite.png) right -2192px no-repeat
+}
+
+body.frontpage {
+    #user-meta {
+        p {
+            top: 1em;
+            color: $primary_text;
+            a {
+                background: none;
+            }
+        }
+    }
+}
+#user-meta {
+    float: right;
+    p {
+        @include box-shadow(none);
+        color: $primary_text;
+        position: relative;
+        background: none;
+        a {
+            color: $primary_text;
+            background: none;
+        }
+        a:hover {
+            background: $primary;
+        }
+    }
+}
+.ie6 {
+    #user-meta {
+        float: none;
+        p {
+            position: absolute;
+            margin-top: 35px;
+            margin-right: 20px;
+            right: 0px;
+            left: auto;
+        }
+
+    }
+    .mappage {
+        #user-meta {
+            p {
+                margin-right: -100px;
+            }
+        }
+    }
+}
+
+/* barnet styles */
+
+.clear {
+    clear: both;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+#site-header,
+#site-logo {
+    display: none !important;
+}
+
+
+#report-a-problem-sidebar {
+    left: 30em;
+    top: 4em;
+    width: 17em;
+    .sidebar-tips,
+    .sidebar-notes {
+        font-size: 0.9em;
+    }
+}
+.ie6 {
+    #report-a-problem-sidebar {
+        margin-top: -4em;
+        left: 30em;
+        .sidebar-notes {
+            padding-bottom: 0.5em;
+        }
+        p {
+            margin-bottom: 0.4em;
+        }
+    }
+}
+
+
+.general-sidebar-notes {
+    left: 25em;
+    width: 14em;
+    font-size: 1.2em;
+    p {
+        margin-bottom: 0 !important;
+    }
+}
+
+#front-howto #front_stats div big,
+ol.big-numbers > li::before {
+    color: #C0E8E8;
+}
+
+.banner {
+    p {
+        top: -2em;
+    }
+    p#fixed {
+        padding-top: 4em;
+        background: #00BD08;
+    }
+}
+
+
+#map_box {
+    border: 1px solid black;
+}
diff --git a/web/cobrands/barnet/position_map.js b/web/cobrands/barnet/position_map.js
new file mode 100644
index 000000000..e6d46288e
--- /dev/null
+++ b/web/cobrands/barnet/position_map.js
@@ -0,0 +1,17 @@
+function position_map_box() {
+    var map_pos = 'absolute', map_height = $('.wrapper').height();
+    $('#map_box').prependTo('.wrapper').css({
+        zIndex: 0, position: map_pos,
+        top: 1, left: $('.wrapper').left,
+        right: 0, bottom: $('.wrapper').bottom + 1,
+        width: '898px', height: map_height,
+        margin: 0
+    });
+}
+
+function map_fix() {
+    var height = $('.wrapper').height() - 3;
+    $('#map_box').height(height);
+}
+
+var slide_wards_down = 1;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index 3b65f941c..56b2f41d5 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -293,7 +293,6 @@ body.fullwidthpage {
 }
 // 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;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 09dbc46a7..4c795cd05 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -103,35 +103,7 @@ $(function(){
         } else {
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            if (cobrand == 'bromley') {
-                var bromley_right;
-                if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
-                    bromley_right = '-480px';
-                } else {
-                    bromley_right = '0em';
-                }
-                // Do the same as CSS (in case resized from mobile).
-                $('#map_box').prependTo('.content').css({
-                    zIndex: 1, position: 'absolute',
-                    top: '1em', left: '', right: bromley_right, bottom: '',
-                    width: '464px', height: '464px',
-                    margin: 0
-                });
-            } else if ($html.hasClass('ie6')) {
-                $('#map_box').prependTo('.wrapper').css({
-                    zIndex: 0, position: 'absolute',
-                    top: 0, left: 0, right: 0, bottom: 0,
-                    width: '100%', height: $(window).height(),
-                    margin: 0
-                });
-            } else {
-                $('#map_box').prependTo('.wrapper').css({
-                    zIndex: 0, position: 'fixed',
-                    top: 0, left: 0, right: 0, bottom: 0,
-                    width: '100%', height: '100%',
-                    margin: 0
-                });
-            }
+            position_map_box();
             if (typeof fixmystreet !== 'undefined') {
                 if (cobrand == 'bromley') {
                     //$('#bromley-footer').hide();
@@ -353,7 +325,7 @@ $.fn.drawer = function(id, ajax) {
     });
 };
 
-    if ($('html.mobile').length || cobrand == 'bromley') {
+    if ($('html.mobile').length || 'slide_wards_down' ) {
         $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
         $('#key-tool-wards').click(function(e){
             e.preventDefault();
@@ -454,6 +426,8 @@ $.fn.drawer = function(id, ajax) {
                 offset = -110;
             }
             heightFix(window, '.content', offset);
+            // in case we have a map that isn't full screen
+            map_fix();
         }
     }
 
diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js
new file mode 100644
index 000000000..4a18d9f9a
--- /dev/null
+++ b/web/cobrands/fixmystreet/position_map.js
@@ -0,0 +1,21 @@
+function position_map_box() {
+    var $html = $('html');
+    if ($html.hasClass('ie6')) {
+        $('#map_box').prependTo('.wrapper').css({
+            zIndex: 0, position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: $(window).height(),
+            margin: 0
+        });
+    } else {
+        $('#map_box').prependTo('.wrapper').css({
+            zIndex: 0, position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: '100%',
+            margin: 0
+        });
+    }
+}
+
+function map_fix() {}
+var slide_wards_down = 0;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 39e6275ff..d98994d84 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -499,6 +499,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             // e.xy is relative to top left of map, which might not be top left of page
             e.xy.x += bo.left;
             e.xy.y += bo.top;
+
+            // 24 and 64 is the width and height of the marker pin
             if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) {
                 // top of the page, pin hidden by header;
                 // or underneath where the new sidebar will appear