[FixMyStreet.com] Add information for councils.

Fixes #765.

18 files changed, 844 insertions, 3 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Static.pm b/perllib/FixMyStreet/App/Controller/Static.pm
index 40e2431ea..8cd82b68e 100755
--- a/perllib/FixMyStreet/App/Controller/Static.pm
+++ b/perllib/FixMyStreet/App/Controller/Static.pm
@@ -35,10 +35,10 @@ sub faq : Global : Args(0) {
     # There should be a faq template for each language in a cobrand or default.
     # This is because putting the FAQ translations into the PO files is
     # overkill.
-    
+
     # We rely on the list of languages for the site being restricted so that there
     # will be a faq template for that language/cobrand combo.
-        
+
     my $lang_code = $c->stash->{lang_code};
     my $template  = "faq/faq-$lang_code.html";
     $c->stash->{template} = $template;
diff --git a/templates/web/fixmystreet.com/static/council.html b/templates/web/fixmystreet.com/static/council.html
new file mode 100644
index 000000000..89235616c
--- /dev/null
+++ b/templates/web/fixmystreet.com/static/council.html
@@ -0,0 +1,263 @@
+[% extra_css = BLOCK %]
+    <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/fmsforcouncils.css') %]">
+[% END %]
+
+[% INCLUDE header.html
+    title = 'FixMyStreet for Councils', bodyclass = 'fms-for-councils fullwidthpage'
+%]
+
+<div class="councils-section hero">
+    <div class="fixed-container">
+        <h1 class="hero-title">FixMyStreet for Councils</h1>
+        <p class="hero-intro">The UK’s favourite fault-reporting technology, now available for council websites.</p>
+        <a href="mailto:enquiries@mysociety.org" class="button">Get in touch</a>
+    </div>
+</div>
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Loved by users. Welcomed by councils.</h2>
+            <p>In 2007, we built the national website, FixMyStreet.com. The aim? To make street fault-reporting as simple as it could be, both for residents and for councils.</p>
+            <p>And it worked. Residents loved the easy interface; councils welcomed the shift to digital. Now we’ve developed FixMyStreet for Councils, allowing you to bring the award-winning FixMyStreet experience directly to your own council website’s users.</p>
+            <p>FixMyStreet for Councils creates a council-branded, seamless fault-reporting interface for your site, integrating directly with your back-office systems, and available via web or mobile.</p>
+        </div>
+        <img class="flush-image flush-image--bottom" src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/responsive.png') %]" alt="" />
+    </div>
+</div>
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Channel shift</h2>
+            <p>Every council wants it. There are plenty of ideas on how to achieve it - but FixMyStreet for Councils will actually deliver the holy grail of channel shift.</p>
+            <p>It’s a tried and tested catalyst for shifting citizen contact online - our existing client councils have reported a shift of up to 300% from phone to online reporting. Why? Because when online reporting systems are this easy, phone contact plummets. </p>
+            <p>With installation costs from £4,500, FixMyStreet starts paying for itself within weeks - and, most importantly, frees up your staff for more important tasks.</p>
+        </div>
+    </div>
+</div>
+
+<div class="councils-section photo-break photo-break--street-scene">
+</div>
+
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Appy days</h2>
+            <p>Your residents want to report faults as they see them, so FixMyStreet for Councils is available as an app for Apple and Android phones.</p>
+            <p>Patchy coverage in some parts of your borough? That’s fine: the FixMyStreet for Councils apps will store any report as it’s made, then send it off once there is access to a connection.</p>
+            <p>We know that not everyone’s on an iPhone or Android device. No problem - your reporting interface can also be accessed via any smartphone browser, as a mobile-optimised website</p>
+        </div>
+        <img class="flush-image flush-image--bottom" src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/iphone.png') %]" alt="" />
+    </div>
+</div>
+
+<div class="councils-section call-to-action call-to-action--mini">
+    <div class="fixed-container">
+        <p><strong>Heard enough?</strong> <a href="mailto:enquiries@mysociety.org">Get in touch</a> now to talk about your project</p>
+    </div>
+</div>
+
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Stress-free hosting</h2>
+            <p>FixMyStreet for Councils is hosted in the cloud, but is templated to look and feel exactly like a part of your website.</p>
+            <p>That makes maintenance and upgrades our business &ndash; and leaves you to get on with the business of getting street faults fixed.</p>
+        </div>
+    </div>
+</div>
+
+<div class="councils-section photo-break photo-break--highway">
+</div>
+
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Just the way you like it</h2>
+            <p>FixMyStreet for Councils is flexible - and you can mould it to fit into your systems. So, you dictate the report categories, and where those reports should be routed.</p>
+            <p>You can also choose the statuses you display as the report goes through your system, from ‘in progress’ to ‘awaiting further information’ to ‘fixed’.</p>
+            <p>You can tell us which types of reports are not your responsibility, and where we should route them instead.</p>
+            <p>And you can tailor the text that we use at every step (or use ours - we’ve worked hard on it!).</p>
+        </div>
+        <img class="flush-image flush-image--bottom-right" src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/hart.png') %]" alt="" />
+    </div>
+</div>
+
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Residents love it</h2>
+            <p>We get a lot of love in the FixMyStreet mailbag &ndash; and now you can tap into some of that positive feeling too. </p>
+            <p>Why do people feel so strongly about FixMyStreet? Because it makes it so easy to address the problems they experience within their own neighbourhoods.</p>
+            <p>FixMyStreet puts reports online, as well as sending them directly into your systems. It gives you a great way to display all the hidden work you do - and it provides residents with a forum for discussion. </p>
+        </div>
+    </div>
+</div>
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Who's using FixMyStreet for councils?</h2>
+            <p>Our UK client councils include <a href="http://fixmystreet.stevenage.gov.uk/">Stevenage</a>, <a href="http://fix.bromley.gov.uk/">Bromley</a>, <a href="http://barnet.fixmystreet.com/">Barnet</a>, <a href="http://fixmystreet.oxfordshire.gov.uk/">Oxfordshire</a>, <a href="http://hart.fixmystreet.com/">Hart</a>, and (soon to launch) Liverpool City Council and Warwickshire County Council.</p>
+            <p>FixMyStreet for Councils is also in use outside the UK, in the city of Zurich, Switzerland.</p>
+            <h3>Case studies</h3>
+            <p>For the insider view, and to understand the integration process, read these councils’ stories.</p>
+            <a href="https://www.mysociety.org/files/2014/03/FixMyStreet-for-Councils-Zurich-case-study.pdf" class="case-study-button">
+                <span class="case-study-button-label">FixMyStreet for councils case study</span>
+                <span class="case-study-button-name">Zurich</span> <span class="case-study-button-format">.pdf</span>
+            </a>
+            <a href="https://www.mysociety.org/files/2014/03/FixMyStreet-for-Councils-Barnet-case-study.pdf" class="case-study-button">
+                <span class="case-study-button-label">FixMyStreet for councils case study</span>
+                <span class="case-study-button-name">Barnet</span> <span class="case-study-button-format">.pdf</span>
+            </a>
+        </div>
+
+        <div class="client-logos">
+            <a href="http://fix.bromley.gov.uk/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png') %]" alt="" /></a><!--
+            --><a href="http://warwickshire.gov.uk/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png') %]" alt="" /></a><!--
+            --><a href="http://fixmystreet.stevenage.gov.uk/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png') %]" alt="" /></a><!--
+            --><a href="http://hart.fixmystreet.com/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png') %]" alt="" /></a><!--
+            --><a href="http://barnet.fixmystreet.com/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png') %]" alt="" /></a><!--
+            --><a href="http://fixmystreet.oxfordshire.gov.uk/"><img src="[% start %][% version('/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png') %]" alt="" /></a>
+        </div>
+
+    </div>
+</div>
+<div class="councils-section photo-break photo-break--sunset">
+
+</div>
+<div class="councils-section">
+    <div class="fixed-container">
+        <div class="section-content">
+            <h2>Beyond councils</h2>
+            <p>FixMyStreet is flexible software: it can be adapted for any use that relies on people pinpointing a location on a map. That might include crime reporting, bird spotting, or any other type of crowdsourced, map-based project.</p>
+            <p>For example, <a href="http://reportemptyhomes.com/">Report Empty Homes</a> (an award-winning website and iPhone app for Channel 4 and the Empty Homes Agency); anti-social behaviour (<a href="http://www.safertravel.info/">See Something Say Something</a>, an iPhone and Android app for the West Midlands Safer Travel Partnership); vaccine stock shortage (a website, currently in development, for reporting when TB clinics in Delhi have run out of medicine).
+</p>
+            <p>Tell us a new use for FixMyStreet for Councils, and we bet we can make it happen.</p>
+        </div>
+    </div>
+</div>
+<div class="councils-section">
+    <div class="fixed-container">
+            <h2>Pricing</h2>
+            <div class="pricing-table product-pricing">
+                <div class="pricing-table-column web">
+                    <div class="pricing-table-column-wrapper">
+                        <div class="pricing-product-header">
+                            <h3>Web</h3>
+                        </div>
+                        <div class="pricing-header">
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">First year</span>
+                                <span class="pricing-price">£4,500</span>
+                            </div>
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">Subsequent years</span>
+                                <span class="pricing-price">£2,500<span class="pricing-note" >per annum</span></span>
+                            </div>
+                        </div>
+                        <div class="pricing-content">
+                            <ul>
+                                <li>FixMyStreet on your website</li>
+                                <li>Custom branding</li>
+                                <li>Reporting dashboard</li>
+                                <li>Training</li>
+                                <li>Upgrades, maintenance, and support</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><!--
+                --><div class="pricing-table-column mobile-web">
+                    <div class="pricing-table-column-wrapper">
+                        <div class="pricing-product-header">
+                            <h3>Mobile Web</h3>
+                        </div>
+                        <div class="pricing-header">
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">First year</span>
+                                <span class="pricing-price">£6,500</span>
+                            </div>
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">Subsequent years</span>
+                                <span class="pricing-price">£3,750<span class="pricing-note"> per annum</span></span>
+                            </div>
+                        </div>
+                        <div class="pricing-content">
+                            <ul>
+                                <li>Everything from <strong>FixMyStreet Web</strong></li>
+                                <li>Fully mobile responsive templates, allowing residents to report issues on smartphones</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><!--
+                --><div class="pricing-table-column mobile-web-apps">
+                    <div class="pricing-table-column-wrapper last">
+                        <div class="pricing-product-header">
+                            <h3>Mobile Web &amp; Apps</h3>
+                        </div>
+                        <div class="pricing-header">
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">First year</span>
+                                <span class="pricing-price">£15,500</span>
+                            </div>
+                            <div class="pricing-header-price">
+                                <span class="pricing-label">Subsequent years</span>
+                                <span class="pricing-price">£6,000<span class="pricing-note"> per annum</span></span>
+                            </div>
+                        </div>
+                        <div class="pricing-content">
+                            <ul>
+                                <li>Everything from <strong>FixMyStreet Web</strong></li>
+                                <li>Everything from <strong>FixMyStreet Mobile Web</strong></li>
+                                <li>Branded iPhone and Android apps for public issue reporting</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <h3>Extras</h3>
+            <div class="pricing-extras pricing-table">
+                <div class="pricing-extras-item">
+                    <div class="pricing-extras-column--primary">
+                        <div class="pricing-extras-description">
+                            <h4>Back-office integration: scoping with your technical team</h4>
+                            <p>Discovery work with your IT team to advise them on integration</p>
+                        </div>
+                    </div><!--
+                    -->
+                    <div class="pricing-extras-column--secondary">
+                        <div class="pricing-extras-price">
+                            <span class="pricing-label">One-off</span>
+                            <span class="pricing-price">£15,500<span class="asterisk">*</span></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="pricing-extras-item">
+                    <div class="pricing-extras-column--primary">
+                        <div class="pricing-extras-description">
+                            <h4>Full integration with CRMs and fault management systems</h4>
+                            <p>We manage the integration from our end, with minimal input from your IT teams required.</p>
+                        </div>
+                    </div><!--
+                    -->
+                    <div class="pricing-extras-column--secondary">
+                        <div class="pricing-extras-price">
+                            <span class="pricing-label">First year</span>
+                            <span class="pricing-price">£3,750&mdash;£15,000<span class="asterisk">*</span></span>
+                             <span class="pricing-label">Subsequent years</span>
+                            <span class="pricing-price">£2,500<span class="pricing-note"> per annum</span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="small-print"><small>* Price depends on complexity of integration requirements, and can be calculated on request.</small></p>
+            <p class="small-print"><small>Prices do not include VAT</small></p>
+    </div>
+</div>
+<div class="councils-section call-to-action">
+    <div class="fixed-container">
+            <h2>Book a demo</h2>
+            <p>Want to know more? <a href="mailto:enquiries@mysociety.org">Get in touch now</a> &ndash; we’re always up for a chat about council needs.</p>
+            <p>Or, to really understand how FixMyStreet for Councils could work for you, book a demo. We’ll show you exactly how it would look and behave on your own website. Just drop us a line.</p>
+            <a href="mailto:enquiries@mysociety.org" class="button">Get in touch</a>
+    </div>
+</div>
+[% INCLUDE footer.html %]
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index c33f927f8..eb86d3d3c 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -88,4 +88,3 @@
     }
   }
 }
-
diff --git a/web/cobrands/fixmystreet/fmsforcouncils.scss b/web/cobrands/fixmystreet/fmsforcouncils.scss
new file mode 100644
index 000000000..afc5aeacb
--- /dev/null
+++ b/web/cobrands/fixmystreet/fmsforcouncils.scss
@@ -0,0 +1,579 @@
+/*
+    FixMyStreet for Councils page.
+    Todo: This should be in a separate stylesheet
+*/
+$fms-orange: #f4a140;
+$fms-red: #e04b4b;
+$fms-blue: #4faded;
+$fms-green: #62b356;
+
+.fms-for-councils {
+  background-color: #1a1a1a;
+  a {
+    color: $fms-orange;
+    &:hover,
+    &:active,
+    &:focus {
+      color: darken($fms-orange, 5%);
+      text-decoration: underline;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .wrapper {
+    display: block;
+    @media only screen and (min-width: 48em) {
+      display: table;
+    }
+  }
+  .content {
+      background-color: transparent;
+      color: #c2c2c2;
+      padding: 0 !important;
+      margin: 0;
+      h1,h2,h3,h4,h5,h6 {
+        color: #fff;
+        font-family: MuseoSans,Helmet,Freesans,sans-serif;
+        font-weight: bold;
+      }
+  }
+  .container {
+    width: 100%;
+    padding: 0;
+  }
+  #site-header {
+    .container {
+      @media only screen and (min-width: 60em) {
+        max-width: 60em;
+      }
+    }
+  }
+
+  .fixed-container {
+    @media only screen and (min-width: 60em) {
+      width: 100%;
+    }
+    max-width: 58em; /*(60em - 1em + 1em padding)*/
+    padding: 0;
+    width: auto;
+    margin: 0 auto;
+    position: relative;
+    padding: 0 1em;
+  }
+
+  .button-base {
+    padding: 0.5em 1.25em;
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: bold;
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        color: #fff;
+    }
+  }
+
+  .button {
+      @extend .button-base;
+      color: #fff;
+      background-color: $fms-orange;
+      border: none;
+      width: 100%;
+      padding: 0.75em 0;
+       @media only screen and (min-width: 48em) {
+        width: auto;
+        padding: 0.5em 1.25em;
+      }
+      &:hover,
+      &:active,
+      &:focus {
+          background-color: darken($fms-orange, 5%);
+      }
+  }
+
+  .councils-section {
+    border-bottom: 1px solid #161616;
+    border-top: 1px solid #3a3a3a;
+    padding: 2.5em 0;
+    background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    @media only screen and (min-width: 48em) {
+      padding: 4em 0;
+    }
+
+    &.photo-break {
+      padding: 0;
+      height: 10em;
+      background-size: cover;
+      background-position: center center;
+      background-repeat: no-repeat;
+      @media only screen and (min-width: 48em) {
+        height: 25em;
+      }
+    }
+
+    h2 {
+      font-size: 1.6875em;
+      margin-top: 0;
+    }
+
+    p {
+      font-size: 1.0625em;
+    }
+  }
+
+  .photo-break--street-scene {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg);
+  }
+
+  .photo-break--highway {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/highway.jpg);
+  }
+
+  .photo-break--sunset {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg);
+  }
+
+  .section-content {
+    @media only screen and (min-width: 60em) {
+      max-width: 60%;
+    }
+  }
+
+  .hero {
+    text-align: center;
+    border-top: 0;
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    padding: 4em 0;
+    @media only screen and (min-width: 48em) {
+      padding: 9em 0;
+    }
+  }
+
+    .hero-title {
+      color: #fff;
+      text-shadow: 0px 1px 7px rgba(0,0,0, 0.7);
+      font-size: 2em;
+      font-weight: bold;
+      @media only screen and (min-width: 48em) {
+        font-size: 3.375em;
+      }
+    }
+
+    p.hero-intro {
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0,0,0, 0.7);
+      max-width: 37em;
+      margin-left: auto;
+      margin-right: auto;
+      font-size: 1.1em;
+      @media only screen and (min-width: 48em) {
+        font-size: 1.25em;
+      }
+    }
+
+  /* Pricing tables */
+  .product-pricing {
+    margin-bottom: 3em;
+  }
+
+    .pricing-table {
+      color: #fff;
+      border: 1px solid #444;
+    }
+
+    .pricing-table-column {
+      width: 100%;
+      display: inline-block;
+      vertical-align: top;
+      @media only screen and (min-width: 48em) {
+       width: 33.333%;
+      }
+    }
+
+    .pricing-table-column-wrapper {
+      border-right: 1px solid #555;
+      min-height: 472px;
+      &.last {
+        border-right: 0;
+      }
+    }
+
+    .pricing-product-header {
+      background-color: $fms-orange;
+      color: #fff;
+      padding: 0.2em 0;
+      width: 100%;
+      text-align: center;
+      font-size: 1.2em;
+      line-height: 1em;
+      position: relative;
+      &:after {
+        top: 100%;
+        left: 50%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: rgba(0,0,0,0);
+        border-top-color: $fms-orange;
+        border-width: 10px;
+        margin-left: -10px;
+      }
+      h3 {
+        font-weight: normal;
+      }
+    }
+
+    .pricing-header {
+      background-color: $fms-red;
+      padding: 1em;
+    }
+
+    .mobile-web {
+      .pricing-header {
+        background-color: $fms-blue;
+      }
+    }
+
+    .mobile-web-apps {
+      .pricing-header {
+        background-color: $fms-green;
+      }
+    }
+
+    .pricing-header-price {
+      margin-bottom: 0.5em;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    .pricing-price {
+      font-size: 2.25em;
+      line-height: 1.15em;
+      .asterisk {
+        color: rgba(255,255,255,0.5);
+      }
+    }
+
+    .pricing-note {
+      font-size: 0.388888889em;
+    }
+
+    .pricing-label {
+      color: rgba(255,255,255,0.7);
+      display: block;
+    }
+
+    .pricing-content {
+      padding: 1.5em 1em;
+      ul {
+        list-style: none outside none;
+        margin: 0;
+      }
+      li {
+        list-style: none outside none
+      }
+    }
+
+    .pricing-extras-item {
+      border-bottom: 1px solid #444;
+      overflow: hidden;
+      &:last-of-type {
+        border-bottom: 0;
+      }
+    }
+
+    .pricing-extras-column--primary {
+      @media only screen and (min-width: 32em) {
+       float: left;
+        width: 66.6%;
+      }
+
+    }
+    .pricing-extras-column--secondary {
+      @media only screen and (min-width: 32em) {
+        float: right;
+        width: 33.4%;
+      }
+    }
+
+    .pricing-extras-description {
+      padding: 1.5em 1em;
+      h4 {
+        font-weight: normal;
+        font-size: 1.125em;
+        margin: 0 0 0.25em;
+      }
+      p {
+        color: #bab8b3;
+        font-size: 0.875em;
+        margin-bottom: 0;
+      }
+    }
+
+    .pricing-extras-price {
+      background-color: #2b2b2b;
+      padding: 1.5em 1em;
+      .pricing-price {
+        font-size: 1.3125em;
+        margin-bottom: 0.5em;
+        display: inline-block;
+      }
+      .pricing-label {
+        font-size: 0.875em;
+      }
+    }
+
+    .small-print {
+      margin: 0.66em 0 0;
+      small {
+        font-style: normal;
+        color: #bab8b3;
+      }
+    }
+
+    .call-to-action {
+      background-color: $fms-orange;
+      text-align: center;
+      background-image: none;
+      a {
+        color: #fff;
+        text-decoration: underline;
+      }
+      h2 {
+        font-size: 2.25em;
+        margin-bottom: 0.25em;
+        margin-top: 0;
+      }
+      p {
+        max-width: 37em;
+        margin: 0 auto 2em;
+        color: #fff;
+      }
+      .button {
+        background-color: darken($fms-orange, 7.5%);
+        font-size: 1.125em;
+        text-decoration: none;
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: darken($fms-orange, 12.5%);
+        }
+      }
+    }
+
+    .call-to-action--mini {
+      text-align: left;
+      padding: 2em 0;
+      p {
+        margin: 0;
+        font-size: 1.3125em;
+      }
+    }
+
+    .flush-image {
+      position: relative;
+      width: 66%;
+      margin-left: 17%;
+      @media only screen and (min-width: 60em) {
+         position: absolute;
+         margin: 0;
+         width: auto;
+      }
+    }
+
+    .flush-image--bottom {
+      bottom: -41px;
+      @media only screen and (min-width: 48em) {
+        bottom: -65px;
+      }
+      @media only screen and (min-width: 60em) {
+        bottom: -82px;
+        right: 2em;
+      }
+    }
+
+    .flush-image--bottom-right {
+      bottom: -41px;
+      @media only screen and (min-width: 48em) {
+        bottom: -65px;
+      }
+      @media only screen and (min-width: 60em) {
+        bottom: -82px;
+        right: -1em;
+      }
+    }
+
+    .case-study-button {
+      background-color: #222;
+      padding: 1em 0;
+      border-radius: 5px;
+      display: inline-block;
+      color: #fff;
+      margin-right: 0.5em;
+      margin-bottom: 1em;
+      width: 100%;
+      @media only screen and (min-width: 48em) {
+        width: auto;
+        padding: 1em;
+      }
+      &:hover,
+      &:active,
+      &:focus {
+        color: #fff;
+        background-color: #1b1b1b;
+        text-decoration: none;
+      }
+    }
+
+    .case-study-button-label {
+      display: block;
+      font-size: 0.875em;
+      color: #bab8b3;
+      @media only screen and (max-width: 48em) {
+        margin-left: 30px;
+      }
+    }
+
+    .case-study-button-name {
+      font-size: 1.5em;
+      display: inline-block;
+      background-repeat: no-repeat;
+      background-image: url(/cobrands/fixmystreet/images/fms-for-councils/download-icon.png);
+      background-position: 0 7px;
+      padding-left: 30px;
+      @media only screen and (max-width: 48em) {
+        margin-left: 30px;
+      }
+    }
+
+    .case-study-button-format {
+      color: #6c6b68;
+      font-size: 0.875em;
+    }
+
+  .client-logos {
+    margin: 2em 0 0;
+    @media only screen and (min-width: 60em) {
+      position: absolute;
+      right: 0;
+      top: 3em;
+      width: 35%;
+      margin-top: 0;
+    }
+    a {
+      text-align: center;
+      display: inline-block;
+      width: 50%;
+      margin-bottom: 1em;
+      vertical-align: middle;
+      opacity: 0.5;
+      &:hover,
+      &:active,
+      &:focus {
+        opacity: 1;
+      }
+    }
+    img {
+      max-width: 100%;
+    }
+  }
+}
+
+ .ie8, .ie7 {
+    .fms-for-councils {
+      .wrapper {
+        display: table;
+      }
+
+      #site-header {
+        .container {
+          max-width: 60em;
+        }
+      }
+
+      .fixed-container {
+        width: 100%;
+      }
+
+      .button {
+        width: auto;
+        padding: 0.5em 1.25em;
+      }
+      .councils-section {
+        padding: 4em 0;
+      }
+
+      .photo-break {
+        height: 25em;
+        background-size: 100%;
+      }
+
+      .section-content {
+        max-width: 60%;
+      }
+
+      .pricing-table-column {
+        width: 33.333%;
+        display: block;
+        float: left;
+      }
+
+      .pricing-extras-column--primary {
+        float: left;
+        width: 66.6%;
+      }
+
+      .pricing-extras-column--secondary {
+        float: right;
+        width: 33.4%;
+      }
+
+      .flush-image {
+        position: absolute;
+        margin: 0;
+        width: auto;
+      }
+
+      .flush-image--bottom {
+        bottom: -82px;
+        right: 2em;
+      }
+
+      .flush-image--bottom-right {
+        bottom: -82px;
+        right: -1em;
+      }
+
+      .client-logos {
+        position: absolute;
+        right: 0;
+        top: 3em;
+        width: 35%;
+        margin-top: 0;
+      }
+
+      .case-study-button {
+        width: auto;
+        padding: 1em;
+      }
+
+      .case-study-button-name {
+        margin-left: 30px;
+      }
+    }
+
+  }
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png
new file mode 100644
index 000000000..ad90a663c
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png
new file mode 100644
index 000000000..96f6cbdc0
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png b/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png
new file mode 100644
index 000000000..2bd373f70
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png
new file mode 100644
index 000000000..8ec4dd68e
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/hart.png b/web/cobrands/fixmystreet/images/fms-for-councils/hart.png
new file mode 100644
index 000000000..362df3dc8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/hart.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg
new file mode 100644
index 000000000..98f53617b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png b/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png
new file mode 100644
index 000000000..68557a2a2
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png
new file mode 100644
index 000000000..85655c4b1
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png b/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png
new file mode 100644
index 000000000..dc7468397
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png
new file mode 100644
index 000000000..96c60299d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg
new file mode 100644
index 000000000..296db5f3b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg
new file mode 100644
index 000000000..9c13bbaa8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg
new file mode 100644
index 000000000..0f0bb1800
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png
new file mode 100644
index 000000000..62087ba52
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png