[Harrogate] wordings and styles

 - auth and intro pages
 - wording of around page
 - Styling work with Mike
 - FAQ and footer tweaks
   https://github.com/mysociety/FixMyStreet-Commercial/issues/654
   https://github.com/mysociety/FixMyStreet-Commercial/issues/655
 - Extra spacing
   https://github.com/mysociety/FixMyStreet-Commercial/issues/656
 - Width of footer (override auto -> 100%)
 - style and logo tweaks
 - Logo/header same height on all pages (inc mappage)
 - Content spacing tweaks
 - Correct "Harrogate district" wording
   https://github.com/mysociety/FixMyStreet-Commercial/issues/658
 - Add extra disclaimer about reports fwd'd to NYCC
 - push fms_pan_zoom down with css!important
    (alternative is to use JS as Hart does,
    or possibly to fix this so doesn't require !important)
 - add privacy section
    (Copies part of text on main page, this should perhaps be factored out.)
 - Set bodyclass for  change_password
    Sets a bodyclass that's unused outwith harrogate cobrand, so should
    be safe.

15 files changed, 487 insertions, 21 deletions

diff --git a/perllib/FixMyStreet/Cobrand/Harrogate.pm b/perllib/FixMyStreet/Cobrand/Harrogate.pm
index 8690557ef..7249bcece 100644
--- a/perllib/FixMyStreet/Cobrand/Harrogate.pm
+++ b/perllib/FixMyStreet/Cobrand/Harrogate.pm
@@ -35,7 +35,7 @@ sub example_places {
 
 sub enter_postcode_text {
     my ($self) = @_;
-    return 'Enter a Harrogate postcode, or street name and area';
+    return 'Enter a Harrogate district postcode, or street name and area';
 }
 
 # increase map zoom level so street names are visible
diff --git a/templates/web/base/auth/change_password.html b/templates/web/base/auth/change_password.html
index 5f2861aa3..b4170c23e 100644
--- a/templates/web/base/auth/change_password.html
+++ b/templates/web/base/auth/change_password.html
@@ -1,4 +1,4 @@
-[% INCLUDE 'header.html', title = loc('Change password') %]
+[% INCLUDE 'header.html', title = loc('Change password'), bodyclass = 'authpage' %]
 
 <h1>[% loc('Change password') %]</h1>
 
diff --git a/templates/web/fixmystreet/auth/general.html b/templates/web/fixmystreet/auth/general.html
index 3f3fe5b99..45239073d 100644
--- a/templates/web/fixmystreet/auth/general.html
+++ b/templates/web/fixmystreet/auth/general.html
@@ -1,4 +1,5 @@
-[% INCLUDE 'header.html', title = loc('Sign in or create an account') %]
+[% INCLUDE 'header.html', bodyclass='authpage', title = loc('Sign in or create an account') %]
+[%# should bodyclass='twothirdspage' instead? Need override for Harrogate %]
 
 <h1>[% loc('Sign in') %]</h1>
 
diff --git a/templates/web/harrogate/around/intro.html b/templates/web/harrogate/around/intro.html
new file mode 100644
index 000000000..53476965d
--- /dev/null
+++ b/templates/web/harrogate/around/intro.html
@@ -0,0 +1,4 @@
+            <div id="postcode-intro">
+                <h1> Report something in Harrogate district that needs to be fixed, cleaned, or cleared. </h1>
+                <h2> (like graffiti, fly tipping, broken playground equipment, or street lighting) </h2>
+            </div>
diff --git a/templates/web/harrogate/faq/faq-en-gb.html b/templates/web/harrogate/faq/faq-en-gb.html
new file mode 100755
index 000000000..e5c9e5480
--- /dev/null
+++ b/templates/web/harrogate/faq/faq-en-gb.html
@@ -0,0 +1,134 @@
+[% INCLUDE 'header.html', title = 'Help', bodyclass = 'twothirdswidthpage' %]
+
+<div class="sticky-sidebar">
+    <aside>
+        <ul class="plain-list">
+            <li><a href="#faq">Frequently Asked Questions</a></li>
+            <li><a href="/privacy">Privacy and cookies</a></li>
+            <li><a href="/contact">Contact FixMyStreet</a></li>
+        </ul>
+    </aside>
+</div>
+
+<h1> Frequently Asked Questions </h1>
+
+<p>These pages are for reporting things which are broken, dirty, damaged or
+dumped, and need fixing, cleaning or clearing: </p>
+<ul>
+    <li>graffiti
+    <li>flytipping
+    <li>broken playground equipment
+    <li>street lighting
+    <li>potholes
+    </ul>
+    <p>
+    Note that though most of these services are provided by Harrogate Borough Council, 
+    FixMyStreet will forward some categories of issue to North Yorkshire County Council.
+    </p>
+
+<dl>
+    <dt><a name="emergencies"></a>Reporting emergencies (Out of Hours)</dt>
+    <dd>
+    <p> Please do not report problems which present an immediate risk to life,
+    for example missing manhole covers or a fallen lamp column. </p>
+    <p> Issues reported via the website are only actioned during office hours.
+    If you require an Out of Hours service please ring our main number 
+    01423 500600 and a message will direct you to the relevant Council Out of Hours
+    service. </p>
+
+    </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>Harrogate Borough Council and FixMyStreet are not responsible for the content and accuracy
+of material submitted by its 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>
+    <p>The FixMyStreet website will already work on your mobile phone, adapting to
+    the size of your screen automatically. Using an app has some advantages, though
+	&mdash; for example, you can create a report even when you have no network 
+	connection.
+	<ul>
+	    <li>
+			<a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545">FixMyStreet app for iPhone</a>		
+	    <li>
+			<a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet">FixMyStreet app for Android</a>
+	    <li><em>Nokia:</em> A volunteer, Thomas Forth, has written an app available from the
+			<a href="http://store.ovi.com/content/107557">Ovi Store</a>.
+	</ul>
+    </dd>
+
+    <dt>Can I use these pages to report problems outside of the Harrogate district?</dd>
+    <dd>Yes, if you enter a postcode or address outside the borough you will be re-directed to the main FixMyStreet site that will enable you to report problems elsewhere. FixMyStreet will forward these on to the relevant council.</dd>
+
+    <dt>The site is powered by FixMyStreet, who are they?</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.
+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.</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>I&rsquo;d like a site like this for my own location/ where&rsquo;s the "source code" to this site?</dt>
+        <dd>
+The mySociety software behind this site is open source, and available
+under the GNU Affero GPL software license. You can <a
+href="http://github.com/mysociety/fixmystreet">download the
+source code</a> and help mySociety 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>
+
+    <h2><a name="privacy"></a>Privacy Questions</h2>
+
+    <dl>
+        <dt>Who gets to see my email address?</dt>
+        <dd>
+<p>If you submit a problem, your details, and details of the problem, will be
+submitted to Harrogate Borough Council, or North Yorkshire County Council, as
+appropriate. 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.</p>
+<p>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.</p>
+</dd>
+
+        <dt>What emails will you send to me?</dt>
+        <dd>We will email you when we have received your report, and when it has
+        been investigated and actioned. We will only send you emails that
+        relate to an issue you have reported.</dd>
+
+    </dl>
+
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/harrogate/footer.html b/templates/web/harrogate/footer.html
index bb1618b4b..116b318a3 100644
--- a/templates/web/harrogate/footer.html
+++ b/templates/web/harrogate/footer.html
@@ -13,9 +13,6 @@
         <div class="nav-wrapper">
             <div class="nav-wrapper-2">
                 <div id="main-nav" role="navigation">
-                    <ul id="mysoc-menu">
-                        <li><a id="mysoc-logo" href="https://www.mysociety.org/">mySociety</a></li>
-                    </ul>
 
                     <ul id="main-menu">
                         [% selected = c.req.uri.path == '/' %]
@@ -40,7 +37,6 @@
 
                         [% selected = c.req.uri.path == '/faq' %]
                         <li [% selected ? 'class="menu-item-selected"' : '' %]>
-                            <[% IF selected %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END %]>
                             <[% IF selected %]span[% ELSE %]a href="/faq"[% END %]>
                             [% loc("Help") %]</[% selected ? 'span' : 'a' %]></li>
 
diff --git a/templates/web/harrogate/front/footer-marketing.html b/templates/web/harrogate/front/footer-marketing.html
new file mode 100644
index 000000000..495a17fc5
--- /dev/null
+++ b/templates/web/harrogate/front/footer-marketing.html
@@ -0,0 +1,19 @@
+                        <div class="tablewrapper bordered">
+                            <div id="footer-mobileapps">
+                                <h4>The FixMyStreet App</h4>
+                                <p>
+                                      <a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545">
+                                      <img alt="FixMyStreet app on the App Store" src="/cobrands/fixmystreet/images/itunes_store_logo.png" />
+                                      </a>
+                                      <a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet">
+                                      <img alt="FixMyStreet Android app on Google Play" src="/cobrands/fixmystreet/images/google_play_logo.png" />
+                                      </a>
+                                    </p>
+                                </div>
+
+                            <div id="footer-help">
+                                <p>
+                                Powered by <a class="platform-logo" href="http://fixmystreet.org/">FixMyStreet Platform</a>
+                                </p>
+                            </div>
+                        </div>
diff --git a/templates/web/harrogate/header.html b/templates/web/harrogate/header.html
new file mode 100644
index 000000000..3d69fbac6
--- /dev/null
+++ b/templates/web/harrogate/header.html
@@ -0,0 +1,63 @@
+<!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">
+
+        [% 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 = c.cobrand.site_title %]
+        [% extra_js %]
+
+        [% IF c.req.uri.host == 'osm.fixmystreet.com' %]
+            <link rel="canonical" href="https://www.fixmystreet.com[% c.req.uri.path_query %]">
+        [% END %]
+
+        [% TRY %][% PROCESS 'header_extra.html' %][% CATCH file %][% END %]
+
+    </head>
+    [% 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 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 %]
+
+            [% pre_container_extra %]
+
+            <div class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
+
+        <!-- [% INCLUDE 'debug_header.html' %] -->
diff --git a/templates/web/harrogate/report/new/councils_extra_text.html b/templates/web/harrogate/report/new/councils_extra_text.html
new file mode 100644
index 000000000..92dc93452
--- /dev/null
+++ b/templates/web/harrogate/report/new/councils_extra_text.html
@@ -0,0 +1,10 @@
+<div id="council_responsibilities_note">
+<p>
+<b>NB:</b> though we will forward your request as appropriate, 
+reports for problems managed by North Yorkshire County Council are not shown on this map. 
+View all problems in that area on 
+<a href="https://www.fixmystreet.com/reports/North+Yorkshire">FixMyStreet.com</a>.
+</p>
+</div>
+
+Do not use this to <a href="/faq#emergencies">report emergencies outside of working hours</a>. 
diff --git a/templates/web/harrogate/static/privacy.html b/templates/web/harrogate/static/privacy.html
new file mode 100755
index 000000000..0107d0873
--- /dev/null
+++ b/templates/web/harrogate/static/privacy.html
@@ -0,0 +1,56 @@
+[% INCLUDE 'header.html',
+    title = loc('Frequently Asked Questions'),
+    bodyclass = 'twothirdswidthpage' %]
+
+<div class="sticky-sidebar">
+    <aside>
+        <ul class="plain-list">
+            <li><a href="/faq">Frequently Asked Questions</a></li>
+            <li><strong>Privacy and cookies</strong></li>
+            <li><a href="/contact">Contact [% c.cobrand.site_title %]</a></li>
+        </ul>
+    </aside>
+</div>
+
+<h1>Privacy, cookies, and third party services</h1>
+
+<p><strong>Our use of your data, cookies, and external services: what you
+should know, and how to opt out if you want to.</strong></p>
+
+<h2>Privacy</h2>
+
+    <dl>
+        <dt>Who gets to see my email address?</dt>
+        <dd>
+            <p>If you submit a problem, your details, and details of the problem, will be
+            submitted to Harrogate Borough Council, or North Yorkshire County Council, as
+            appropriate. 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.</p>
+            <p>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.</p>
+        </dd>
+
+        <dt>What emails will you send to me?</dt>
+        <dd>We will email you when we have received your report, and when it has
+        been investigated and actioned. We will only send you emails that
+        relate to an issue you have reported.</dd>
+
+    </dl>
+    <dl>
+
+<h2>Cookies</h2>
+
+<p>To make our service easier or more useful, we sometimes place small data
+files on your computer or mobile phone, known as cookies; many websites do
+this. We use this information to, for example, remember you have logged in so
+you don't need to do that on every page. Below, we list the cookies and
+services that this site can use.
+
+<table cellpadding=5>
+<tr align="left"><th scope="col">Name</th><th scope="col">Typical Content</th><th scope="col">Expires</th></tr>
+<tr><td>fixmystreet_app_session</td><td nowrap>A random unique identifier</td><td>When browser is closed, or four weeks if &ldquo;Keep me signed in&rdquo; is ticked</td></tr>
+</table>
+
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/web/cobrands/harrogate/HBCLogo-cropped.png b/web/cobrands/harrogate/HBCLogo-cropped.png
new file mode 100755
index 000000000..4421820d2
--- /dev/null
+++ b/web/cobrands/harrogate/HBCLogo-cropped.png
diff --git a/web/cobrands/harrogate/HBLogo.png b/web/cobrands/harrogate/HBLogo.png
new file mode 100755
index 000000000..03cf2b4f5
--- /dev/null
+++ b/web/cobrands/harrogate/HBLogo.png
diff --git a/web/cobrands/harrogate/_colours.scss b/web/cobrands/harrogate/_colours.scss
index 2b9714835..a79b7acfb 100644
--- a/web/cobrands/harrogate/_colours.scss
+++ b/web/cobrands/harrogate/_colours.scss
@@ -18,5 +18,5 @@ $base_fg: #1a1a1a;
 
 /* Following seem to be required in layout.scss */
 $map_nav_bg: #222;
-$nav_fg: #fff;
+$nav_fg: #000;
 $nav_fg_hover: #444;
diff --git a/web/cobrands/harrogate/base.scss b/web/cobrands/harrogate/base.scss
index 94dd39ee7..eccb1a84f 100644
--- a/web/cobrands/harrogate/base.scss
+++ b/web/cobrands/harrogate/base.scss
@@ -11,10 +11,11 @@ body.frontpage #site-logo,
 #site-logo
 {
     display: block;
-    background: url("/cobrands/harrogate/HBCLogo-mobile.png") 0 0 no-repeat;
     margin: 2px;
     padding-left: 10px;
     position: static;
+
+    background: url("/cobrands/harrogate/HBCLogo-mobile.png") 0 0 no-repeat;
     width: 106px;
     height: 37px;
 }
@@ -22,21 +23,43 @@ body.frontpage #site-logo,
 #main-nav ul#main-menu li {
 
     // blue button background, darker if selected
-    background: $primary;
-    &.menu-item-selected { background: $primary_dark; }
-
-    @include border-radius(1em);
-    padding: 0.25em;
-    margin: 0.25em;
-    border: solid 1px black;
+    background: #ededed;
+    &.menu-item-selected {
+        background: $primary;
+        span {
+            color: #fff;
+        }
+    }
 
     span {
         color: $nav_fg;
     }
 }
 
+#main-nav ul#main-menu li,
+body.mappage #main-nav ul#main-menu li,
+{
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    a { padding: 0 }
+}
+
 label[for=form_INFO_TEXT] {
     background: yellow;
     border: solid 1px black;
     padding: 1em;
 }
+
+#site-header {
+    background: none;
+}
+
+
+#council_responsibilities_note {
+    background-color: lighten($primary, 30%);
+    padding: 0.5em;
+    font-size: 0.8em;
+}
diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss
index 0e76bb111..480a07f5d 100644
--- a/web/cobrands/harrogate/layout.scss
+++ b/web/cobrands/harrogate/layout.scss
@@ -2,24 +2,184 @@
 @import "../sass/layout";
 
 @media only screen and (min-width: 48em) {
+    #site-logo,
+    .ie6 #site-logo,
+
     body.frontpage #site-logo,
     .ie6 body.frontpage #site-logo,
+    
+    body.authpage #site-logo,
+    .ie6 body.authpage #site-logo,
+
     body.twothirdswidthpage #site-logo,
     .ie6 body.twothirdswidthpage #site-logo
     {
             position: relative;
-            top: 5px;
+            top: 1.2em;
             margin: 0;
-            margin-left: 2.25em;
             padding: 0;
             background: url("/cobrands/harrogate/HBCLogo.png") 0 0 no-repeat;
             width: 227px;
             height: 122px;
     }
+
+    body.frontpage #site-header,
+    .ie6 body.frontpage #site-header,
+
+    body.twothirdswidthpage #site-header,
+    .ie6 body.twothirdswidthpage #site-header,
+
+    body.authpage #site-header,
+    .ie6 body.authpage #site-header,
+
+    body.mappage #site-header,
+    .ie6 body.mappage #site-header,
+    body.mappage .nav-wrapper-2,
+    .ie6 body.mappage .nav-wrapper-2
+    {
+        height: 10em;
+    }
+
+    #fms_pan_zoom {
+        top: 10.75em!important;
+    }
+}
+
+@media only screen and (min-width: 48em) {
+    body.twothirdswidthpage .container .content footer .tablewrapper a:link,
+    body.twothirdswidthpage .container .content footer .tablewrapper a:visited,
+    body.fullwidthpage .container .content footer .tablewrapper a:link,
+    body.fullwidthpage .container .content footer .tablewrapper a:visited {
+        color: white;
+    }
+
+    body.mappage #user-meta+.container .content {
+        padding-top: 1.5em;
+    }
+}
+
+body.fullwidthpage #main-nav,
+body.frontpage #main-nav,
+body.twothirdswidthpage #main-nav,
+body.authpage #main-nav
+{
+    margin-top: 3.2em;
+}
+
+body.mappage #main-nav,
+{
+    // TODO would be better to edit containers to figure out where missing em is defined
+    margin-top: 2.2em;
+}
+
+body.fullwidthpage .container .content,
+body.twothirdswidthpage .container .content {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+@media only screen and (min-width: 48em) {
+    body.fullwidthpage .container .content {
+        margin-top: 3em; // push far enough for the sign-out link to also be visible
+    }
+}
+
+body.twothirdswidthpage .content aside {
+    margin-top: 2em;
+    @include box-shadow(none);
+}
+
+
+body.twothirdswidthpage form.full-width {
+    margin: 0;
+}
+
+body.mappage #main-nav {
+    ul#main-menu {
+        padding: 1em 0;
+    }
+}
+
+body.mappage #main-nav ul#main-menu li a, body.mappage #main-nav ul#main-menu li span {
+    padding: 0.75em;
+}
+
+body.mappage #main-nav ul#main-menu li a.report-a-problem-btn,
+#main-nav ul#main-menu li a.report-a-problem-btn {
+    margin: 0;
+    padding: 0.75em;
+}
+#main-nav ul#main-menu li a.report-a-problem-btn {
+    &:hover {
+        background: #444;
+        color: #fff;
+        @include border-radius(0em);
+    }
+}
+
+#main-nav {
+    ul#main-menu {
+        li {
+            a.report-a-problem-btn {
+                color: #000;
+                background: #ededed;
+            }
+        }
+    }
+}
+
+body.mappage .nav-wrapper .nav-wrapper-2 {
+    background: #fff;
+    border-bottom: solid 4px $primary;
+}
+
+.nav-wrapper .nav-wrapper-2 {
+    border-top: 0px;
 }
 
-#main-nav ul#main-menu li {
-    span {
-        color: $nav_fg;
+#front-main {
+    background: none;
+    padding: 0;
+
+    #front-main-container {
+        background: $primary;
+        padding: 2em 0;
+        margin-bottom: 1.2em;
+        @include border-radius(12px);
+
+        #postcode-intro {
+            margin: 0 2em;
+        }
+    }
+
+}
+
+body.frontpage #user-meta p {
+    top: -2.4em;
+}
+
+body.mappage #user-meta {
+    top: 2em;
+    p {
+        background: $primary;
+        border-color: $primary_dark;
+    }
+}
+
+body.mappage .content {
+    margin-top: 4em;
+}
+
+
+body.twothirdswidthpage .container .content footer,
+body.fullwidthpage .container .content footer
+{
+    .tablewrapper {
+        width: 100%;
+        background: $primary;
+        @include border-radius(12px);
+        margin-bottom: 2em;
+
     }
 }