[Hart] CSS fixes

* remove box shadow
* header and footer CSS tweaks
    * white background colour on menu *wrapper*
        e.g. to have solid white menu bar for full width, not just the
        centered menu portion.
    * 10em top-margin on map-page
    * revert main nav font size
    * Show menu items on mobile map-page
    * Move the map-page menu item position:fixed into a media query
    * Swap hart & fms nav on mobile
* big green banner zindex reset
* header/footer spacing tweaks
* header centered, even on mappage
    by taking out of .container and into .header-container
* push .skipped-map downwards
    fixes mysociety/FixMyStreet-Commercial#486 on Safari and IE
* header/footer width tweaks
    width (instead of max-width) was making page overflow, causing
    artefacts in footer.  Also the mobile-nav was visible on desktop, to
    the far right.
* remove link hover from images
* fix inconsistent header height
* more spacing on .mappage .content

NB: Same fix for z-index for "fixed" .banner
as per mysociety/FixMyStreet-Commercial#483 and #673

5 files changed, 70 insertions, 27 deletions

diff --git a/templates/web/hart/footer.html b/templates/web/hart/footer.html
index 2eae42070..9fa1d0e40 100644
--- a/templates/web/hart/footer.html
+++ b/templates/web/hart/footer.html
@@ -5,6 +5,22 @@
     </div><!-- .table-cell -->
 
     <div class="nav-wrapper clearfix">
+        <div class="main-menu-wrapper">
+            <div class="main-menu">
+            <ul class="clearfix">
+                <li class="home"><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
+                    >[% "Report" %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
+                %]<li><[% IF c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
+                    %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]></li>[%
+                %]<li><[% IF c.req.uri.path == '/reports/Hart' %]span[% ELSE %]a href="/reports/Hart"[% 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 class="last"><[% 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 class="nav-wrapper-2 clearfix">
             <div id="main-nav" class="clearfix" role="navigation">
                 <ul>
@@ -37,22 +53,6 @@
                 [% END %]
             </div>
         </div>
-        <div class="main-menu-wrapper">
-            <div class="main-menu">
-            <ul class="clearfix">
-                <li class="home"><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
-                    >[% "Report" %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
-                %]<li><[% IF c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
-                    %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]></li>[%
-                %]<li><[% IF c.req.uri.path == '/reports/Hart' %]span[% ELSE %]a href="/reports/Hart"[% 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 class="last"><[% 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 class="hart-footer-wrapper">
@@ -94,7 +94,8 @@
                 <div id="footer-row-3">
                     <div id="copyright-block-mobile" class="mob-only">
                         <strong>©</strong> &nbsp;
-                            <a href="/disclaimer" title="More information on the Disclaimer">Hart District Council</a>
+                        <a href="/disclaimer" title="More information on the Disclaimer">
+                            Hart District Council</a>
                     </div>
                 </div>
             </div>
diff --git a/templates/web/hart/header.html b/templates/web/hart/header.html
index 4668cd133..670ddede0 100644
--- a/templates/web/hart/header.html
+++ b/templates/web/hart/header.html
@@ -69,7 +69,7 @@
                         <li> <a href="#main-nav"><div class="menu-icon">&nbsp;</div></a>
                     </ul>
                 </div>
-                <div class="container">
+                <div class="header-container">
                     <a id="site-logo" href="http://www.hart.gov.uk">Hart District Council</a>
                 </div>
             </header>
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index edc692130..c163f3fcd 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -77,6 +77,7 @@ h1.main {
 
 .big-green-banner {
     text-transform: none;
+    z-index: 0;
 }
 
 #form_sign_in {
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 0368ced64..b2602a06e 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -50,6 +50,8 @@ body { color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica
 body.mappage .nav-wrapper .nav-wrapper-2,
 body.frontpage .nav-wrapper-2 {
     border: 0;
+    border-top: solid 4px $hart_primary;  /* otherwise overridden in base layout.scss 
+                                             for some templates only */
     min-height: auto;
     background-color: $hart_primary;
 
@@ -61,13 +63,22 @@ body.frontpage .nav-wrapper-2 {
 @media only screen and (min-width:48em) {
     body.frontpage #site-header {
         height: 13em;
+
+        .mobile-header-nav {
+            display: none;
+        }
+    }
+
+    #skipped-map {
+        clear: both;
+        margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */
     }
 
 	#main-nav {
 	  margin-top: 106px;
 	  
 	  ul {
-        margin-left: 132px;
+        margin-left: 157px;
 	    float: none;
 	  }
 	}
@@ -76,7 +87,7 @@ body.frontpage .nav-wrapper-2 {
 	  text-align: center;
 	  text-transform: uppercase;
 	  padding: 0 15px;
-	  font-size: 20px;
+	  font-size: 16px;
 	  border-right: solid 1px white;
 	  line-height: 1.5em;
 	}
@@ -125,7 +136,7 @@ body.frontpage #site-logo,
         position: relative;
         top: 1em;
         margin: 0;
-        margin-left: 1em;
+        margin-left: 2.25em;
         padding: 0;
         background: url("/cobrands/hart/hart-logo.png") 0 0 no-repeat;
         width: 123px;
@@ -149,18 +160,20 @@ body.frontpage #site-logo,
 
 .main-menu-wrapper {
     /* z-index:2; */
+    background-color: #FFF;
     width:100%;
     @media only screen and (min-width:48em) {
         position: absolute;
     }
 }
 
-body.mappage .main-menu-wrapper {
-    position: fixed
+@media only screen and (min-width:48em) {
+    body.mappage .main-menu-wrapper {
+        position: fixed
+    }
 }
 
 .main-menu {
-  background-color: #FFF;
 
   li {
       font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
@@ -253,6 +266,7 @@ body.frontpage .table-cell .content {
 
     @media only screen and (min-width:48em) {
         margin-left:-15px; 
+        padding: 35px 25px 40px 25px;
     }
 
     #footer_outside_wrapper {
@@ -277,11 +291,18 @@ body.frontpage .table-cell .content {
                 text-align: right;
                 padding-bottom: 10px;
                 margin-bottom: 0px;
+                @media only screen and (min-width:48em) {
+                    margin-top: 1.5em;
+                    padding-bottom: 1em;
+                }
                 float: right!important;
                 text-decoration: none!important;
                 img {
                     margin-bottom: 5px;
                 }
+                a, a:hover, a:active {
+                    text-decoration: none;
+                }
             }
         }
     }
@@ -320,14 +341,15 @@ body.frontpage .table-cell .content {
     }
 
     .footer-nav,  {
-        @media only screen and (min-width:48em) {
-            float: right; 
-        }
         height:35px; 
 
         margin-left: 0;
         margin-bottom: 0;
 
+        @media only screen and (min-width:48em) {
+            float: right; 
+        }
+
         li { 
             list-style-type: none;
             float: left; 
@@ -447,3 +469,7 @@ body.mappage .hart-footer-wrapper {
     padding: 0.5em;
     font-size: 0.8em;
 }
+
+.banner {
+    z-index: 1;
+}
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index f28c07963..838643ba2 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -5,6 +5,16 @@
   .content {
     margin-top: 8em;
   }
+  .header-container {
+      max-width: 60em;
+      margin: 0 auto;
+      padding: 0em;
+      position: relative;
+  }
+  body.mappage .content {
+    margin-top: 14em;
+  }
+  
   #front-main-container {
       background-color: $hart_primary;
   }
@@ -23,6 +33,7 @@ body.twothirdswidthpage .content {
         left: 672px;
         width: 208px;
         padding: 16px;
+        @include box-shadow(none);
     }
     .sticky-sidebar {
         left: 672px;
@@ -32,3 +43,7 @@ body.twothirdswidthpage .content {
         }
     }
 }
+
+.content {
+    @include box-shadow(none);
+}