[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.

5 files changed, 197 insertions, 14 deletions

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;
+
     }
 }