1 files changed, 171 insertions, 87 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 54954023b..d02efe489 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -11,6 +11,10 @@ $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
 
 $form-control-border-color: #aaaaaa !default;
+$header-top-border-width: 0.25em !default;
+$header-top-border: $header-top-border-width solid $primary !default;
+
+$container-max-width: 60em !default;
 
 @import "_mixins";
 @import "_report_list";
@@ -46,12 +50,8 @@ h1 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
-h1#reports_heading span {
-  display: none;
-}
-h1#reports_heading a {
-  display: block;
-  font-size: 50%;
+h1#reports_heading {
+  margin-bottom: 0;
 }
 
 h2 {
@@ -294,6 +294,21 @@ select.form-control {
     }
 }
 
+.form-group {
+  position: relative;
+  max-width: 27em;
+}
+
+.required-text {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.required-text--optional {
+  color: #666;
+}
+
 .form-section-heading {
     font-family: inherit;
     color: inherit;
@@ -385,7 +400,7 @@ select.form-control {
 }
 
 .form-txt-submit-box {
-  min-height:3em;
+  @include clearfix();
   input[type=password],
   input[type=text],
   input[type=email] {
@@ -408,6 +423,7 @@ select.form-control {
 .label-containing-checkbox {
   padding-#{$left}: 24px;
   position: relative;
+  margin-bottom: 0;
 
   input {
     position: absolute;
@@ -458,8 +474,10 @@ ul.error {
 /*** LAYOUT ***/
 
 // Padding creates page margins on mobile
-.container{
-  padding: 0 1em 1em;
+.container {
+  margin: 0 auto;
+  padding: 0 1em;
+  max-width: $container-max-width;
 }
 
 // Use full width to reverse .container margins
@@ -468,62 +486,63 @@ ul.error {
 }
 
 // #site-header creates grey bar in mobile
-// .nav-wrapper-2 is used on desktop
-#site-header{
-  border-top: 0.25em solid $primary;
-  height: 3em;
-  @include linear-gradient(#000, #222 10%, #222 90%, #000);
-  .container {
-    min-height:4em;
+#site-header {
+  @if ($header-top-border) {
+    border-top: $header-top-border;
   }
+  color: $nav_fg;
+  background-color: $map_nav_bg;
+  position: relative;
 }
-#site-logo{
+
+#site-logo {
   display: block;
   width: 175px;
-  height: 40px;
-  top: 0.4em;
-  #{$left}: 0.5em;
-  background: url($image-sprite) -3px -3px no-repeat;
+  height: 60px;
+  background: url($image-sprite) -8px 5px no-repeat;
   text-indent: -999999px;
-  position: absolute;
-  z-index:2;
 }
 
 // this is a skip to nav for mobile users only
 #nav-link {
   width: 3em;
-  height: 3em; // same height as #site-header
+  height: 3em;
   background: transparent url(../fixmystreet/images/#{$menu-image}.png) center center no-repeat;
   background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none;
   background-size: 22px 18px;
-  display: block;
   text-indent: -999999px;
-  position: absolute;
   #{$right}: 0;
-  top: 0.25em; // same as border-top on #site-header
 }
 
-// A shortcut to the Reporting page, in the mobile header
-#report-cta {
+#nav-link, #report-cta {
   display: block;
   position: absolute;
-  top: (3em / 2); // half the height of #site-header
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// A shortcut to the Reporting page, in the mobile header
+#report-cta {
   #{$right}: 3.5em;
-  margin-top: -0.5em;
 
   font-size: 0.9em;
   line-height: 1em;
   border: 1px solid #666;
-  color: #fff;
+  color: $nav_fg;
   padding: 0.4em;
   border-radius: 0.3em;
 
   &:hover, &:focus {
     text-decoration: none;
-    background-color: #444;
+    background-color: $nav_fg_hover;
   }
 }
 
+// The nav list has this sort of "full width" look,
+// so we want to cancel out the margin from .container
+#main-nav {
+  margin: 0 -1em;
+}
 
 .nav-menu {
   @include list-reset-soft;
@@ -544,37 +563,6 @@ ul.error {
     background-color: #ccc;
   }
 }
-.nav-menu--mysoc {
-  a {
-    color: $primary_text;
-    background-color: $primary;
-  }
-}
-#mysoc-logo {
-  background-origin: content-box;
-  background-position: $left 3px;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAYCAYAAAArrNkGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABBtJREFUaN7tmT2u1DAQx/cIPgBCQUJCICH5BuQIPkIq6hzBB0AyiAP4ABQ5ghtEm54mEtVrICUNkpmsJjBvdvyR1S7hPa2lv1aJs5PEP894xjkc/tMWY+xADhRQA8iC9I7PtD6PP9xa9aC1oCnmm9lpgtHW3WiVB03HuqYeA9DlPZbJuXj8o5wgGM5os+ixLb74MeTt+Hz+kiGXva99jEDjJV7w+5Pn3aIHNoEvB/Tu7s6iejzuQAEUQRPIgxT2KTwesX+5rkvYs7yP2KDXLN7XXCKkAUgHiii3MaQuideI9x/x2GB/gxFjVZMIoY6AmtBGJ+QJluUKgdheI1LpfveuoQMciTw7XrUAbEFzot8Re4GcnwWghv23Ezx0PiejBYiBAA0/Pz7VoOV3AKnEup1LwhyBQFsr2Jkzdjy51hZyBIuwaOuFZ6fPPaaA5jQX+hvi4fS8YUC9BBzXqJOB4INXAGpAM8oAxBEUUbYSQiCD1ZWACnZGhDJIUacGaBbY34ghAxfAdHheCxBHAs6yvp7YpP/zDOgk9WHIGhMvOZ5TrjCgfUUSptigqQqg1M7A7kHhTVvWUAF8Q/r6ZObPQy4bfMf62wycoeSFOEmoPS2sQ74mdFUC1RhuHQ25QonkKurjE6CCpzTC+9CmNwBNeiHz/oGvabnweG+9E9ZDul6GDDiD53tybsoMYIMJhhQSjy/28YVzoAgKoGRt+uvHMwUaQRHkS7N/I1AjhGuuGs+2ifsOPOwKk6TLAeUe2J4DFPtG7vnsnK3MQPngTwg0ErUZoC3CPEqyWbmDJQG1cVvbCpRPmIadm6Wy5VpAeXKkpCRqQ1F/DwBAnAlQnQHaEKDzlYGGgvQWoEJy1LOx8P8SqOLJEU2uNhbhvQC0AVn76n3/9vWHpIe++/Km/fxVL17aL3ATSYU5E2h77rbkBqA2kYFHsbS7FlAhOTrJpIXwkirYRynMAEgDiignwHSgiGozCceUg5EBqs5N2hhQX8gnpDaldoquCVQn6lmV2foLbJdkSmWkANESoNPLT98UyKMUgbnIFsqWGRMxQ0JbW1G2eCHsdmQferWlMwlPxHuLnwiFa9NefU2gQiJ0UholBixm6lGV8lAEGVFDykMr6l5e5OeA1tg5ASB8wcmVMEa4rtkLqM3VnqQuDJnBmHnhT6A2oKPNBSIFuq6hoCbzCatY91Zs/ZXspED5Ws+rDu0IbZUSEps//YmQuvbrCg8NFd8I1zBl8bd66w8galBA6Q3rmWKb3YZlpIqE0Da13pLrVjtd6flxMtP7qorvse1hjyYkRfs8yMP/8E83WMIeII2wdrobnk0gG6HOnUu7WteAqRKf39QN0yagTlhf9/lwz9fNG8yzgBrmmWa3h8Ftv0HaQLi1TYlaSGX3UvsNzdBKw+waoEEAAAAASUVORK5CYII=');
-  background-repeat: no-repeat;
-  text-indent: -999999px;
-}
-.ie7 #mysoc-logo {
-  background: url($image-sprite) -240px -38px no-repeat;
-}
-
-//defines where the table caption is (login stuff on mob, nav menu on desktop)
-.wrapper {
-  width:100%;
-  display:table;
-  // The 'caption' at large widths will be top, moving the menu up magically
-  caption-side: bottom;
-  // This is so absolutely positioned header stuff doesn't overlap banner...
-  position: relative;
-}
-// ...however position: relative stops the map being clickable (?), so better
-// revert it there
-body.mappage .wrapper {
-  position: static;
-}
 
 // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
 .shadow-wrap {
@@ -600,17 +588,21 @@ body.mappage .wrapper {
         display: block;
         background-color: #f5f5f5;
         background-repeat: no-repeat;
-        color:#333;
+        color: #333 !important;
         padding:4em 2em 1em;
         text-transform:uppercase;
         font: {
           size:0.6875em;
           family: $meta-font;
+          weight: normal;
         }
+        line-height: 1.2em;
+        white-space: normal;
+        border-radius: 0;
         &:hover, &.hover {
           text-decoration:none;
           background-color:#333;
-          color:#fff;
+          color: #fff !important;
         }
         &.abuse {
           background-image: url($image-sprite);
@@ -694,7 +686,6 @@ footer {
   p {
 	font-size: 0.75em;
 	padding-bottom: 0;
-    border-bottom:1px solid #AFAFAF;
   }
 }
 
@@ -833,6 +824,12 @@ input.final-submit {
     }
 }
 
+.btn--provide-update {
+    display: block;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
 .btn--block {
     display: block;
     text-align: center;
@@ -844,6 +841,10 @@ input.final-submit {
     text-align: center;
 }
 
+.btn--small {
+  font-size: 0.8em;
+}
+
 .js #js-social-email-hide {
     display: none;
 }
@@ -1190,6 +1191,21 @@ input.final-submit {
   }
 }
 
+// List of potential duplicate reports (or a single confirmed duplicate)
+// that appears in Inspector form, when closing a report as a duplicate.
+.item-list--inspect-duplicates {
+    border-bottom: none;
+
+    .item-list__item {
+        background-color: rgba(255, 255, 255, 0.5);
+    }
+
+    .item-list--reports__item--selected {
+        border: 0.25em solid $primary;
+        background-color: #fff;
+    }
+}
+
 .item-list__heading {
   font-size: 1em;
   font-weight: normal;
@@ -1493,6 +1509,27 @@ html.js #map .noscript {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -4070px;
     }
+    &#fms_shortlist_all {
+      padding: 0.6em 1em 0.5em 1em;
+      &:after {
+         content: "";
+         display: inline-block;
+         width: 16px;
+         height: 16px;
+         background-image: url(/cobrands/fixmystreet/images/map-marker.png);
+
+         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+             background-image: url(/cobrands/fixmystreet/images/map-marker@2x.png);
+         }
+
+         @media all {
+             background-image: url(/cobrands/fixmystreet/images/map-marker.svg), none;
+         }
+         background-size: 16px 16px;
+         vertical-align: middle;
+         margin: flip(0 0 0 8px, 0 8px 0 0);
+       }
+    }
     &.feed {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -3936px;
@@ -1723,14 +1760,11 @@ a:hover.rap-notes-trigger {
     height: auto; // override `.mobile #map_box` height:10em
     margin: 0;
     z-index: 1; // stack above positioned elements later on the page (eg: .report-list-filters)
-  }
-
-  .container {
-    padding: 0; // map_box needs to be full width, so remove page gutter
-  }
 
-  #map_sidebar {
-    padding: 1em; // reinstate page gutter, but on sidebar, so map_box is unaffected
+    &.above-form {
+      position: relative;
+      margin: 0 -1em;
+    }
   }
 }
 
@@ -1823,6 +1857,18 @@ label .muted {
   }
 }
 
+// The coloured sidebar column on .with-actions pages.
+// On narrow screens, it becomes a full-width section.
+#side-inspect {
+  padding: 1em;
+  margin: 0 -1em;
+  background-color: #E9F2FF;
+}
+
+.inspect-form-heading {
+  margin-top: 0;
+}
+
 .inspect-section {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   padding-top: 1.5em;
@@ -1838,6 +1884,10 @@ label .muted {
   & > :first-child > :first-child {
     margin-top: 0;
   }
+  label {
+    display: inline-block;
+    margin-top: 0.25em;
+  }
 }
 
 .inspect-section--hidden {
@@ -2058,6 +2108,16 @@ table.nicetable {
   }
 }
 
+// Shown at bottom of homepage, among other places
+.footer-marketing {
+    text-align: center;
+    margin-top: 2em;
+
+    & > :last-child {
+        margin-bottom: 0;
+    }
+}
+
 #alerts {
     ul {
         margin-bottom: 1em;
@@ -2070,6 +2130,8 @@ table.nicetable {
         background: #f6f6f6;
     }
     img[width="16"] {
+        margin-top: 4px;
+        margin-left: 0.5em;
         float: $right;
     }
 }
@@ -2094,6 +2156,29 @@ table.nicetable {
     }
 }
 
+.alerts__cta-box {
+    @extend .form-box;
+    background-color: mix($primary, #fff, 10%);
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    & > :first-child {
+        margin-top: 0;
+    }
+
+    .form-txt-submit-box {
+        max-width: 32em;
+    }
+}
+
+#rss_local_alt {
+    // Match .label-containing-checkbox
+    padding-left: 24px;
+
+    // Close up space between this and #rss_local
+    margin-top: -1em;
+}
+
 .confirmation-header {
   padding: 140px 0 2em;
   text-align: center;
@@ -2224,7 +2309,7 @@ table.nicetable {
 .segmented-control--radio {
   input {
     position: absolute;
-    left: -999px;
+    opacity: 0;
   }
 
   input:checked + label {
@@ -2356,18 +2441,15 @@ table.nicetable {
         margin-bottom: 0.5em;
     }
 
-    a {
-        display: inline-block;
-        margin-top: 0.5em;
-        padding: 0.5em 1em;
-        background-color: #000;
-        color: #fff;
-        border-radius: 0.3em;
-
-        &:hover,
-        &:focus {
-            text-decoration: none;
-            background-color: mix(#000, $primary, 70%);
+    .btn, .btn-primary {
+        margin: 0.5em 0 1em 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
         }
     }
 }
@@ -2388,3 +2470,5 @@ table.nicetable {
 @import "_fixedthead";
 @import "_dropzone";
 @import "_multiselect";
+@import "_autocomplete";
+@import "_dashboard";