[FiksGataMi] Update cobrand to current design.

20 files changed, 189 insertions, 250 deletions

diff --git a/perllib/FixMyStreet/Cobrand/FiksGataMi.pm b/perllib/FixMyStreet/Cobrand/FiksGataMi.pm
index 461018639..822a0c43b 100644
--- a/perllib/FixMyStreet/Cobrand/FiksGataMi.pm
+++ b/perllib/FixMyStreet/Cobrand/FiksGataMi.pm
@@ -8,11 +8,6 @@ use Carp;
 use mySociety::MaPit;
 use FixMyStreet::Geocode::OSM;
 
-sub path_to_web_templates {
-    my $self = shift;
-    return [ FixMyStreet->path_to( 'templates/web', $self->moniker )->stringify ];
-}
-
 sub country {
     return 'NO';
 }
@@ -41,17 +36,6 @@ sub admin_base_url {
     return 'http://www.fiksgatami.no/admin';
 }
 
-# If lat/lon are present in the URL, OpenLayers will use that to centre the map.
-# Need to specify a zoom to stop it defaulting to null/0.
-sub uri {
-    my ( $self, $uri ) = @_;
-
-    $uri->query_param( zoom => 3 )
-      if $uri->query_param('lat') && !$uri->query_param('zoom');
-
-    return $uri;
-}
-
 sub geocode_postcode {
     my ( $self, $s ) = @_;
 
diff --git a/templates/web/base/index.html b/templates/web/base/index.html
index 5b2b73cfe..cea0f832a 100644
--- a/templates/web/base/index.html
+++ b/templates/web/base/index.html
@@ -14,8 +14,6 @@
     [% END %]
 </p>
 
-[% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %]
-
 [% PROCESS 'around/postcode_form.html' %]
 
 <div id="front_intro">
diff --git a/templates/web/fiksgatami/footer.html b/templates/web/fiksgatami/footer.html
index 986db3967..bd0921e0b 100644
--- a/templates/web/fiksgatami/footer.html
+++ b/templates/web/fiksgatami/footer.html
@@ -1,22 +1,36 @@
-</div></div>
+                    [% IF pagefooter %]
+                    <footer role="content-info">
+                        [% INCLUDE 'front/footer-marketing.html' %]
+                    </footer>
+                    [% END %]
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
 
-<h2 class="v">[% loc('Navigation') %]</h2>
-<ul id="navigation">
-<li><a href="/">[% loc("Report a problem") %]</a></li>
-<li id="nav_new"><a href="/my">[% loc("Your reports") %]</a></li>
-<li><a href="/reports">[% loc("All reports") %]</a></li>
-<li><a href="[% c.uri_for('/alert', {pc =>  pc}) | html %]">[% loc("Local alerts") %]</a></li>
-<li><a href="/faq">[% loc("Help") %]</a></li>
-<li><a href="/contact">[% loc("Contact") %]</a></li>
-</ul>
+        <div class="nav-wrapper">
+            <div class="nav-wrapper-2">
+                <div id="main-nav" role="navigation">
+                    <ul id="mysoc-menu">
+                        <li><a href="http://www.nuug.no/">Foreningen NUUG</a></li>
+                    </ul>
 
-<div id="logo" align="center"><a href="http://www.nuug.no/">Foreningen NUUG</a></div> 
-
-<p id="footer">
-    [% loc('Built by <a href="http://www.mysociety.org/">mySociety</a> and maintained by <a href="http://www.nuug.no/">NUUG</a>') %] | <a href="http://github.com/mysociety/fixmystreet">[% loc('Source code') %]</a>
-</p>
-
-[% INCLUDE 'debug_footer.html' %]
+                    <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' %]span[% ELSE %]a href="/reports"[% 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/fiksgatami/front/footer-marketing.html b/templates/web/fiksgatami/front/footer-marketing.html
new file mode 100644
index 000000000..6069c8793
--- /dev/null
+++ b/templates/web/fiksgatami/front/footer-marketing.html
@@ -0,0 +1,19 @@
+                        <div class="tablewrapper bordered">
+                            <div id="footer-mobileapps">
+                                <p>
+                                    <a href="http://wiki.nuug.no/grupper/fiksgatami/android">Last ned FiksGataMi-app for din Android-telefon.</a>
+                                </p>
+                            </div>
+
+                            <div id="footer-help">
+                                <p>
+                                Powered by <a class="platform-logo" href="http://fixmystreet.org/">FixMyStreet Platform</a>
+                                </p>
+                                <ul>
+                                    <li>
+                                        <h4>[% loc('Are you a developer?') %]</h4>
+                                        <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://fixmystreet.org">available at fixmystreet.org</a>.') %]</p>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
diff --git a/templates/web/fiksgatami/front/news.html b/templates/web/fiksgatami/front/news.html
deleted file mode 100644
index 8ebee90f8..000000000
--- a/templates/web/fiksgatami/front/news.html
+++ /dev/null
@@ -1,12 +0,0 @@
-[%
-    news = [
-        { date = '2011-04-26', text = '<a href="' _ c.config.ANDROID_URL _ '">Last ned FiksGataMi-app for din Android-telefon.</a>' },
-        { date = '2011-04-23', text = 'FiksGataMi sender n&aring; veisaker ogs&aring; til vegvesenet slik at kommuner ikke trenger sende saker videre.' },
-    ]
-%]
-[% FOREACH item IN news %]
-    <p align="center" style="margin-bottom:0">
-        <img width="23" height="12" alt="[% loc('New!') %]" src="/i/new.png" border="0">[% item.date %] [% item.text %]</p>
-    </p>
-[% END %]
-
diff --git a/templates/web/fiksgatami/header.html b/templates/web/fiksgatami/header.html
index e2ea1f684..db3ba546e 100644
--- a/templates/web/fiksgatami/header.html
+++ b/templates/web/fiksgatami/header.html
@@ -1,30 +1,59 @@
 <!doctype html>
-<!--[if lt IE 7]><html class="ie6 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 7]>   <html class="ie7 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 8]>   <html class="ie8 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="[% lang_code %]"><!--<![endif]-->
+<!--[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">
 
-        <link rel="stylesheet" type="text/css" href="[% version('/css/core.css') %]">
-        <link rel="stylesheet" type="text/css" href="[% version('/cobrands/fiksgatami/css.css') %]">
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+        <meta name="HandHeldFriendly" content="true">
+        <meta name="mobileoptimized" content="0">
+
+        [% INCLUDE 'header_opengraph.html' %]
+
+[% SET start = c.config.ADMIN_BASE_URL IF admin %]
+
+        <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/base.css') %]">
+        <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/layout.css') %]" media="(min-width:48em)">
+        [% extra_css %]
+        <!--[if (lt IE 9) & (!IEMobile)]>
+            <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/layout.css') %]">
+        <![endif]-->
+
+        <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script>
+        <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
+        [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js', site_title = 'FiksGataMi' %]
+        [% extra_js %]
+
+        [% TRY %][% PROCESS 'header_extra.html' %][% CATCH file %][% END %]
 
-    [% INCLUDE 'common_header_tags.html', site_title = 'FiksGataMi' %]
     </head>
-    <body>
+    [% TRY %][% PROCESS 'set_body_class.html' %][% CATCH file %][% END %]
+    <body class="[% bodyclass | html IF bodyclass %]">
+
+    <div class="wrapper">
+        <div class="table-cell">
+            <header id="site-header" role="banner">
+                <div class="container">
+                    [% INCLUDE 'header_logo.html' %]
+                    <a href="#main-nav" id="nav-link">Main Navigation</a>
+                </div>
+            </header>
 
-        [% IF NOT title AND NOT c.req.path %]<h1 id="header">[% ELSE %]<div id="header"><a href="/">[% END %]
-            [%- loc('Fix<span id="my">My</span>Street') %]
-        [%- IF NOT title AND NOT c.req.path %]</h1>[% ELSE %]</a></div>[% END %]
+          [% IF c.user_exists %]
+            <div id="user-meta">
+                <p>
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
+                    <a href="/auth/sign_out">[% loc('sign out') %]</a>
+                </p>
+            </div>
+          [% END %]
 
-        <ul id="meta">
-            [% IF c.user_exists %]
-                <li>[% tprintf(loc('Signed in as %s'), c.user.name || c.user.email) %]
-                <li><a href="/auth/sign_out">[% loc('Sign out') %]</a></li>
-            [% ELSE %]
-                <li>&nbsp;</li>
-            [% END %]
-        </ul>
+            [% pre_container_extra %]
 
-        <div id="wrapper"><div id="mysociety">
+            <div class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
 
-    [% INCLUDE 'debug_header.html' %]
+        <!-- [% INCLUDE 'debug_header.html' %] -->
diff --git a/templates/web/fiksgatami/nn/contact/address.html b/templates/web/fiksgatami/nn/contact/address.html
deleted file mode 100644
index e69de29bb..000000000
--- a/templates/web/fiksgatami/nn/contact/address.html
+++ /dev/null
diff --git a/templates/web/fiksgatami/nn/footer.html b/templates/web/fiksgatami/nn/footer.html
index b61cab9ff..3d17e37fb 100644
--- a/templates/web/fiksgatami/nn/footer.html
+++ b/templates/web/fiksgatami/nn/footer.html
@@ -1,22 +1,36 @@
-</div></div>
+                    [% IF pagefooter %]
+                    <footer role="content-info">
+                        [% INCLUDE 'front/footer-marketing.html' %]
+                    </footer>
+                    [% END %]
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
 
-<h2 class="v">[% loc('Navigation') %]</h2>
-<ul id="navigation">
-<li><a href="/">[% loc("Report a problem") %]</a></li>
-<li id="nav_new"><a href="/my">[% loc("Your reports") %]</a></li>
-<li><a href="/reports">[% loc("All reports") %]</a></li>
-<li><a href="[% c.uri_for('/alert', {pc =>  pc}) | html %]">[% loc("Local alerts") %]</a></li>
-<li><a href="/faq">[% loc("Help") %]</a></li>
-<li><a href="/contact">[% loc("Contact") %]</a></li>
-</ul>
+        <div class="nav-wrapper">
+            <div class="nav-wrapper-2">
+                <div id="main-nav" role="navigation">
+                    <ul id="mysoc-menu">
+                        <li><a href="http://www.nuug.no/">Foreininga NUUG</a></li>
+                    </ul>
 
-<div id="logo" align="center"><a href="http://www.nuug.no/">Foreininga NUUG</a></div> 
-
-<p id="footer">
-    [% loc('Built by <a href="http://www.mysociety.org/">mySociety</a> and maintained by <a href="http://www.nuug.no/">NUUG</a>') %] | <a href="http://github.com/mysociety/fixmystreet">[% loc('Source code') %]</a>
-</p>
-
-[% INCLUDE 'debug_footer.html' %]
+                    <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' %]span[% ELSE %]a href="/reports"[% 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/fiksgatami/nn/front/news.html b/templates/web/fiksgatami/nn/front/news.html
deleted file mode 100644
index e7f3184a9..000000000
--- a/templates/web/fiksgatami/nn/front/news.html
+++ /dev/null
@@ -1,12 +0,0 @@
-[%
-    news = [
-        { date = '2011-04-26', text = '<a href="' _ c.config.ANDROID_URL _ '">Last ned FiksGataMi-app til Android-telefonen din.</a>' },
-        { date = '2011-04-23', text = 'Last ned FiksGataMi-app til Android-telefonen din. FiksGataMi sender no vegsaker òg til vegvesenet slik at kommunar ikkje treng senda saker vidare.' },
-    ]
-%]
-[% FOREACH item IN news %]
-    <p align="center" style="margin-bottom:0">
-        <img width="23" height="12" alt="[% loc('New!') %]" src="/i/new.png" border="0">[% item.date %] [% item.text %]</p>
-    </p>
-[% END %]
-
diff --git a/templates/web/fiksgatami/nn/header.html b/templates/web/fiksgatami/nn/header.html
deleted file mode 100644
index 5449eff81..000000000
--- a/templates/web/fiksgatami/nn/header.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!doctype html>
-<!--[if lt IE 7]><html class="ie6 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 7]>   <html class="ie7 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 8]>   <html class="ie8 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="[% lang_code %]"><!--<![endif]-->
-    <head>
-
-        <link rel="stylesheet" type="text/css" href="[% version('/css/core.css') %]">
-        <link rel="stylesheet" type="text/css" href="[% version('/cobrands/fiksgatami/css.css') %]">
-
-    [% INCLUDE 'common_header_tags.html' %]
-    </head>
-    <body>
-
-        [% IF NOT title AND NOT c.req.path %]<h1 id="header">[% ELSE %]<div id="header"><a href="/">[% END %]
-            [%- loc('Fix<span id="my">My</span>Street') %]
-        [%- IF NOT title AND NOT c.req.path %]</h1>[% ELSE %]</a></div>[% END %]
-
-        <ul id="meta">
-            [% IF c.user_exists %]
-                <li>[% tprintf(loc('Signed in as %s'), c.user.name || c.user.email) %]
-                <li><a href="/auth/sign_out">[% loc('Sign out') %]</a></li>
-            [% ELSE %]
-                <li>&nbsp;</li>
-            [% END %]
-        </ul>
-
-        <div id="wrapper"><div id="mysociety">
-
-    [% INCLUDE 'debug_header.html' %]
diff --git a/templates/web/fiksgatami/nn/reports/index.html b/templates/web/fiksgatami/nn/reports/index.html
deleted file mode 100755
index 05296ba76..000000000
--- a/templates/web/fiksgatami/nn/reports/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-[% INCLUDE 'header.html', title = loc('Summary reports') %]
-
-<p>
-[% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %]
-</p>
-
-<table cellpadding="3" cellspacing="1" border="0">
-<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>
-</tr>
-
-[% FOREACH body IN bodies %]
-[% NEXT IF body.id == 301 %]
-<tr align="center"
-[%- IF loop.count % 2 %] class="a"
-[%- END -%]
->
-<td align="left"><a href="[% body.url(c) %]">[% body.name %]</a></td>
-<td>[% open.${body.id}.new or 0 %]</td>
-<td>[% open.${body.id}.older or 0 %]</td>
-<td>[% open.${body.id}.unknown or 0 %]</td>
-<td>[% fixed.${body.id}.new or 0 %]</td>
-<td>[% fixed.${body.id}.old or 0 %]</td>
-</tr>
-[% END %]
-</table>
-
-[% INCLUDE 'footer.html' %]
-
diff --git a/templates/web/fiksgatami/reports/index.html b/templates/web/fiksgatami/reports/index.html
deleted file mode 100755
index 3235b96c4..000000000
--- a/templates/web/fiksgatami/reports/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-[% INCLUDE 'header.html', title = loc('Summary reports') %]
-
-<p>
-[% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %]
-</p>
-
-<table cellpadding="3" cellspacing="1" border="0">
-<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>
-</tr>
-
-[% FOREACH body IN bodies %]
-<tr align="center"
-[%- IF loop.count % 2 %] class="a"
-[%- END -%]
->
-<td align="left"><a href="[% body.url(c) %]">[% body.name %]</a></td>
-<td>[% open.${body.id}.new or 0 %]</td>
-<td>[% open.${body.id}.older or 0 %]</td>
-<td>[% open.${body.id}.unknown or 0 %]</td>
-<td>[% fixed.${body.id}.new or 0 %]</td>
-<td>[% fixed.${body.id}.old or 0 %]</td>
-</tr>
-[% END %]
-</table>
-
-[% INCLUDE 'footer.html' %]
-
diff --git a/templates/web/fixmystreet/front/news.html b/templates/web/fixmystreet/front/news.html
deleted file mode 100644
index 2285ab8d0..000000000
--- a/templates/web/fixmystreet/front/news.html
+++ /dev/null
@@ -1,11 +0,0 @@
-[%#
-    news = [
-        { date = '2008-12-11', text = '<a href="">' _ loc('Get FixMyStreet on your iPhone') _ '</a>' },
-    ]
-%]
-[% FOREACH item IN news %]
-    <p align="center" style="margin-bottom:0">
-        <img width="23" height="12" alt="[% loc('New!') %]" src="/i/new.png" border="0">[% item.date %] [% item.text %]</p>
-    </p>
-[% END %]
-
diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html
index a20c35e51..f92518022 100644
--- a/templates/web/fixmystreet/index.html
+++ b/templates/web/fixmystreet/index.html
@@ -39,8 +39,4 @@ kinds of problems like missed bins use our
     [% INCLUDE 'front/recent.html' %]
 </div>
 
-
-<!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] -->
-
-
 [% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
new file mode 100644
index 000000000..40ec78543
--- /dev/null
+++ b/web/cobrands/fiksgatami/_colours.scss
@@ -0,0 +1,24 @@
+$image-sprite: '/cobrands/fiksgatami/sprite.png';
+
+/* COLOURS */
+
+$header_darker: #0a3f6f;
+
+$bg: #1a4f7f;
+
+$primary: #99bfe1;
+$primary_b: #000000;
+$primary_text: #222222;
+
+$base_bg: $bg;
+$base_fg: #fff;
+
+$map_nav_bg: $bg;
+$nav_fg: #fff;
+$nav_fg_hover: $primary;
+
+$col_click_map: $bg;
+$col_click_map_dark: darken($bg, 10%);
+
+$col_fixed_label: #00BD08;
+$col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fiksgatami/base.scss b/web/cobrands/fiksgatami/base.scss
new file mode 100644
index 000000000..9fccf92db
--- /dev/null
+++ b/web/cobrands/fiksgatami/base.scss
@@ -0,0 +1,7 @@
+@import "../sass/h5bp";
+@import "./_colours";
+@import "../sass/mixins";
+@import "compass";
+
+@import "../sass/base";
+
diff --git a/web/cobrands/fiksgatami/config.rb b/web/cobrands/fiksgatami/config.rb
new file mode 100644
index 000000000..cab97b18f
--- /dev/null
+++ b/web/cobrands/fiksgatami/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/fiksgatami/css.scss b/web/cobrands/fiksgatami/css.scss
deleted file mode 100644
index 2c1144858..000000000
--- a/web/cobrands/fiksgatami/css.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-$header_back: #99bfe1;
-$header_back_lighter: #a9cff1;
-$header_colour: #1a4f7f;
-$header_darker: #0a3f6f;
-
-// Overrides of core.css
-
-#mysociety {
-
-    #front_stats div {
-        width: 6.5em;
-    }
-
-    label {
-        width: 6em;
-    }
-
-    .fieldset div.checkbox, #problem_submit {
-        padding-left: 6.5em;
-    }
-
-}
-
-@import "../../css/main-import";
-
-// Overrides of main.css
-
-body {
-    font-family: Helmet, Freesans, "Helvetica Neue", Arial, sans-serif;
-}
-
-a {
-    &:link { color: #215d93; }
-    &:visited { color: #518dc3; }
-    &:hover, &:active { color: #cc0000; }
-}
-
-#header {
-    padding: 0.1em 0.5em 0.15em;
-}
-
diff --git a/web/cobrands/fiksgatami/layout.scss b/web/cobrands/fiksgatami/layout.scss
new file mode 100644
index 000000000..69e455aa5
--- /dev/null
+++ b/web/cobrands/fiksgatami/layout.scss
@@ -0,0 +1,2 @@
+@import "_colours";
+@import "../sass/layout";
diff --git a/web/cobrands/fiksgatami/sprite.png b/web/cobrands/fiksgatami/sprite.png
new file mode 100644
index 000000000..c1c5e9d88
--- /dev/null
+++ b/web/cobrands/fiksgatami/sprite.png