/* HEADINGS and TYPOGRAPHY */

$body-font: MuseoSans, Helmet, Freesans, sans-serif !default;
$meta-font: Helmet, Freesans, sans-serif !default;
$heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !default;
$menu-image: 'menu-white' !default;

$link-color: #005ea5 !default;
$link-hover-color: #2b8cc4 !default;
$link-visited-color: $link-color !default;
$link-text-decoration: none !default;
$link-hover-text-decoration: underline !default;

$itemlist_item_background: #f6f6f6 !default;
$itemlist_item_background_hover: #e6e6e6 !default;
$col_big_numbers: #666 !default;
$col_fixed_label: #00BD08 !default;
$col_fixed_label_light: mix($col_fixed_label, #fff, 10%) !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";

body {
  font-family: $body-font;
  margin:0;
  font-size:1em;
  line-height:1.5;
  color: #222;
  background-color: #fff;
}


p {
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 1em;
}

small{
  font-family: $meta-font;
  font-style: italic;
  font-size: 0.8125em;
  line-height: 1.2307em;
}

h1 {
  font-family: $heading-font;
  font-size: 2em;
  line-height: 1em;
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.5em;

  // Useful for extra inline text after a heading
  small {
    display: inline-block; // break onto its own line if not enough horizontal space
    font-style: inherit;
    font-family: inherit;
    font-size: 0.5em; // back down to 1em from the 2em parent
    line-height: 1em;
  }
}

h1#reports_heading {
  margin-bottom: 0;
}

h2 {
  font-family: $heading-font;
  font-size: 1.5em; /*24px*/
  line-height: 1.3333em; /*32px*/
  font-weight: normal;
  margin-top: 1.333333333em; /*32px*/
  margin-bottom: 0.666666666em; /*16px*/
}

h3 {
  font-size: 1.25em;
  line-height: 1.20em;
  margin-top: 1.2em;
  margin-bottom: 0.8em;
  font-weight: normal;
}

h4 {
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 1em;
}

// default list styles
ul, ol {
  font-size: 1em;
  margin-bottom: 2em;
  margin-#{$left}: 2em;
  padding:0;
}

li{
  margin-bottom: 0.5em;
}

ul li{
  list-style: square;
}

ol li {
  list-style:decimal;
}

// lets you have a traditional ol but with nicely styled numbers
// for older browsers it just falls back to the normal ol
ol.big-numbers {
  padding: 0;
  margin: 0;
  counter-reset: li; // reset counter to be 'li' instead of a number
  > li {
    position: relative;
    list-style: none;
    padding: flip(0 0 0 2.5em, 0 2.5em 0 0);
    margin-bottom:2em;
    &:before {
      content: counter(li); // set the content to be whatever the 'li' var is
      counter-increment: li; // add to the counter var
      position: absolute;
      #{$left}: 0;
      top:-0.2em;
      color:$col_big_numbers;
      line-height:1;
      font-family: $meta-font;
      font-weight: bold;
      font-size: 2.5rem;
    }
  }
}

dl {
  margin: 0;
  padding: 0;
  dt {
    font-size: 1em;
    line-height: 1.5em;
    font-weight: bold;
  }
  dd {
    font-weight: 1em;
    line-height: 1.5em;
    margin: 0 0 1em;
  }
}

blockquote {
  p:before {
    content: '“';
  }
  p:after {
    content: '”';
  }
}

pre {
  font-family: monospace;
}

img {
  //do this otherwise IE will just not display
  //any img without a height defined
  height:auto;
  max-width: 100%;
}
// So that map popups display correctly
#popup img {
    max-width: none;
}

select, input, textarea {
  font-size: 99%;
}

// To deal with bug from drop-down being wider than holder
select {
  width: 100%;
}

a,
.fake-link {
  text-decoration: $link-text-decoration;
  color: $link-color;

  &:visited {
    color: $link-visited-color;
  }

  &:hover,
  &:active {
    text-decoration: $link-hover-text-decoration;
    color: $link-hover-color;
  }
}

.fake-link {
  display: inline-block;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 1em;
  padding: 0;
  margin: 0;
}

// custom type
.small-print {
  @extend small;
  margin-bottom: 1.2307em;
  color:#666666;
}
.meta{
  color:#555555;
  font-style: italic;
  margin-bottom: 0px;
}
.meta-2{
  font-family: $meta-font;
  color:#666666;
  font-style: italic;
  font-size: 0.75em;
}

h4.static{
  font-family: $meta-font;
  text-transform: uppercase;
  font-size: 0.875em;
  line-height: 1.71428em;
  color:#666;
  margin-top: 2em;
}
h4.static-with-rule{
  @extend.static;
  background: #f6f6f6;
  border-top: 0.25em solid $primary;
  margin-bottom:0.25em;
  padding: 0.5em 1em;
}

/* FORMS */

input[type=file] {
    width: 100%;
}

input[type=tel],
input[type=number],
input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=time],
input[type=datetime],
input[type=url],
textarea {
  @include box-sizing(border-box);
  display: block;
  width: 100%;
  padding: 0.5em;
  font-size: 1em;
  line-height: 1em;
}

textarea {
  line-height: 1.5em;
  min-height: 5em;
}

label,
legend,
.label {
  display: block;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: bold;

  &.inline {
    display: inline;
    padding: flip(0 1em 0 5px, 0 5px 0 1em);
    font-weight: normal;
  }

  &.inline-text {
    display: inline;
    font-weight: normal;
  }
}

.form-control {
    display: block;
    background-color: #fff;
    border: 1px solid $form-control-border-color;
    @include border-radius(4px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    font-family: inherit; // eg: stop Firefox and IE10-11 using Courier in textareas
    margin-bottom: 0.5em;

    &[readonly] {
        box-shadow: none;
        color: #888888;
    }
}

select.form-control {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    height: 2.2em; // roughly equal to default input height

    &[multiple] {
        height: auto;
    }

    // Prevent a flash of tall select elements
    // before $.multiSelect() has replaced them.
    .js &.js-multiple[multiple] {
        height: 2.2em;
    }
}

.form-group {
  position: relative;
  max-width: 27em;
}

// Handy for lining up "child" form groups below show/hide checkboxes.
.form-group--indented {
  padding-left: 2em;
}

.form-check {
  margin-top: 1.5em; // match margin-top on regular labels
  padding-left: 2em;
  position: relative;
  
  & > input {
    position: absolute;
    top: 0.3em;
    left: 0.5em;
  }

  label {
    margin-top: 0.5em;
  }
}

.form-check--inline {
  margin: 0.5em 0;

  label {
    margin: 0;
    display: inline;
  }

  .form-hint {
    display: inline;

    &:before {
      content: "\2013";
      margin: 0 0.3em 0 0.1em;
    }
  }
}

.required-text {
  position: absolute;
  #{$right}: 0;
  top: 0;
}

.required-text--optional {
  color: #666;
}

.form-section-heading {
    font-family: inherit;
    color: inherit;
    font-weight: bold;
    margin-bottom: 0.25em;
}

.form-section-heading--private {
    &:before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 18px;
        background-repeat: no-repeat;
        @include svg-background-image('/cobrands/fixmystreet/images/padlock');
        background-size: 16px 18px;
        margin-#{$right}: 0.5em;
    }
}

.form-section-description {
    color: #666;
    line-height: 1em * (22/16);
}

.form-section-preview {
    // If social_auth_enabled, but no javascript, we want the "Next" preview
    // to be visible but without any other styling. Once javascript is enabled,
    // the "next"/"back" buttons will work, so we want the styling back.
    html.js & {
        background-color: #eee;
        border-radius: 4px;
        padding: 1em;

        .form-section-heading {
          margin: 0 0 0.5em 0;
        }
    }

    small {
        margin: 0.5em auto;
        display: block;
        text-align: center;
        font-style: normal;
        width: 75%;
    }
}

// Purposefully *not* wrapped in `html.js` because the margin-top helps
// separate the social login buttons from the .description_tips list.
.form-section-preview--next {
    margin-top: 1.5em;
}

/* On a reporting page MyW/anon */
small#or {
    margin: 1em auto;
    width: 100%;
}
small#or:before, small#or:after {
    background-color: #fff;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
small#or:before {
    right: 1em;
    margin-left: -50%;
}
small#or:after {
    left: 1em;
    margin-right: -50%;
}

// grey background, full width box
.form-box {
  margin: 0 -1em 0.25em;
  background: #eee;
  padding: 1em;

  & > input[type=text],
  & > input[type=email] {
    margin-bottom: 1em;
  }

  & > label:first-child {
    margin-top: 0;
  }

  .title {
    font-size: 1.25em;
    margin: 0.5em 0;
  }

  h2 {
    margin: 0 0 0.5em;
  }

  h3 {
    margin: 0 0 1em;
    font-size: 1.125em;
    font-weight: normal;

    strong {
      font-size: 2em;
      margin-#{$right}: 0.25em;
    }
  }
}

.change_location {
    color: #666;
    margin: 0 0 1em;

    // No need for this element on mobile, where they can't click the map,
    // and there's already a "Report" button in the header that leads to
    // the homepage search form. But we'll want to unhide in layout.scss.
    display: none;

    li {
      list-style: none;
      padding-#{$left}: 24px;
      margin: 0.3em 0 0 0;
      background-size: 14px 14px;
      background-repeat: no-repeat;
      background-position: flip(0 50%, 100% 50%);
    }
}

.change_location__map {
  @include svg-background-image('/cobrands/fixmystreet/images/change-location-arrow');
}

.change_location__search {
  @include svg-background-image('/cobrands/fixmystreet/images/change-location-search');
}

// Space between the .change_location list and any
// top_message.html announcements inserted via ajax.
#js-top-message > :first-child {
  margin-top: 1.5em;
}

.form-txt-submit-box {
  @include clearfix();
  @include flex-container();
  @include flex-wrap(wrap);
  input[type=password],
  input[type=tel],
  input[type=number],
  input[type=text],
  input[type=email],
  select {
    width: auto;
    max-width: none;
    @include flex(72 0 auto);
  }
  input[type=submit] {
    @include flex(28 0 auto);
    margin: 0 0.25em 0.5em;
    padding-top: 0.6em;
    padding-bottom: 0.5em;
  }
}

.checkbox-group {
  margin:1em 0;
}

.label-containing-checkbox {
  padding-#{$left}: 24px;
  position: relative;
  margin-bottom: 0;

  input {
    position: absolute;
    #{$left}: 0;
    top: 0.2em;
  }
}


// form errors
div.form-error,
p.form-error {
  @include inline-block;
  background:#ff0000;
  color:#fff;
  padding:0 0.5em;
  @include border-radius(0.25em 0.25em 0 0);
  a {
    color: white;
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
  }
}

input.form-error,
textarea.form-error {
  border-color:#ff0000;
  @include border-radius(0 0.25em 0.25em 0.25em);
}

.form-error__box {
    border: solid 2px #ff0000;
    padding: 0.5em;
    margin-bottom: 0.5em;
}

ul.error {
  background:#ff0000;
  color:#fff;
  padding:0 0.5em;
  @include border-radius(0.25em);
}

.form-success {
  background: #009900;
  color: #fff;
  padding: 0 0.5em;
  @include border-radius(0.25em);
}

.duplicate-report-suggestions {
    position: relative;

    .item-list__item--expandable {
      border-top: 1px solid #ddd;
    }

    .item-list {
        margin: 0 -1em 1em -1em;
        border-bottom: 1px solid #ddd;
    }
}

.duplicate-report-suggestions__close {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 32px;
    height: 0;
    padding-top: 32px;
    overflow: hidden;
    border: none;
    background: transparent;
    opacity: 0.5;
    line-height: 2em; // Make sure line box is taller than text, so text is pushed below hidden overflow.

    &:hover,
    &:focus {
        opacity: 0.7;
    }

    // Doing some gymnastics so we can reuse the existing .btn--close icon.
    &:before {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 8px;
      left: 8px;
      background-repeat: no-repeat;
      background-size: 112px 16px;
      @include svg-background-image('/cobrands/fixmystreet/images/button-icons');
      background-position: -32px 0;
    }
}

/*** LAYOUT ***/

.dev-site-notice {
    font-size: 1.5em;
    color: #fff;
    background-color: #f00;
    position: absolute;
    padding: 1em 5em;
    top: 1em;
    left: -5em;
    transform: rotate(-45deg);
    z-index: 2;
    pointer-events: none;
}

// Padding creates page margins on mobile
.container {
  margin: 0 auto;
  padding: 0 1em;
  max-width: $container-max-width;
}

// Use full width to reverse .container margins
.full-width {
  margin: 0 -1em;
}

// #site-header creates grey bar in mobile
#site-header {
  @if ($header-top-border) {
    border-top: $header-top-border;
  }
  color: $nav_colour;
  background-color: $nav_background_colour;
  position: relative;
}

#site-logo {
  display: block;
  width: 175px;
  height: 60px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 175px 35px;
  @include svg-background-image("/cobrands/fixmystreet/images/site-logo");
  text-indent: -999999px;
}

// this is a skip to nav for mobile users only
#nav-link {
  width: 3em;
  height: 0;
  padding-top: 3em;
  overflow: hidden;
  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;
  #{$right}: 0;
}

#nav-link, #report-cta {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// A shortcut to the Reporting page, in the mobile header
#report-cta {
  #{$right}: 3.5em;

  font-size: 0.9em;
  line-height: 1em;
  border: 1px solid #666;
  color: $nav_colour;
  padding: 0.4em;
  border-radius: 0.3em;

  &:hover, &:focus {
    text-decoration: none;
    background-color: $nav_hover_background_colour;
  }
}

// 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;
  a, span {
    display: block;
    padding: 0.5em 1em;
    background-color: #f6f6f6;
    color: #333;
    font-size: 1.25em;
    border-bottom: 0.25em solid #333;
  }
  a:visited {
    color: #333;
  }
  a:hover {
    background-color: #333;
    color: #fff;
    text-decoration: none;
  }
  span {
    background-color: #ccc;
  }
  span.report-a-problem-btn {
    cursor: pointer;
  }
  span.report-a-problem-btn:hover {
    background-color: #333;
    color: #fff;
    text-decoration: none;
  }
}

.shadow-wrap {
  margin: 0 -1em;
}

#key-tools {
  @include list-reset-soft;
  margin-bottom: 1em;
  display: table;
  width: 100%;

  li {
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    border-#{$right}: 0.25em solid #fff;

    &:last-child {
      border-#{$right}: none;
    }
  }

  button {
    width: 100%;
    border: none;
  }

  a, button {
    display: block;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    color: #333 !important;
    padding: 1em;
    text-transform: uppercase;
    font-size: 0.6875em;
    font-family: $meta-font;
    font-weight: normal;
    line-height: 1.2em;
    white-space: normal;
    border-radius: 0;

    &:hover, &.hover {
      text-decoration:none;
      background-color:#333;
      color: #fff !important;
    }

    &:after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-#{$left}: 0.5em;
      vertical-align: -0.25em;
      background-size: 112px 16px;
      background-repeat: no-repeat;
      @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
    }

    &.abuse:after {
      background-position: -96px 0;
    }

    &.feed:after {
      background-position: -64px 0;
    }

    &.share:after {
      background-position: -80px 0;
    }

    &.chevron:after {
      background-position: flip(-16px 0, 0 0);
    }
  }
}

#report-updates-data {
  img {
    float: $right;
  }

  // Avoid double margin between opening paragraph and label.
  label {
    margin-top: 0;
  }
}

#report-share {
    .btn {
        padding-#{$left}: 1.5em;
        padding-#{$right}: 1.5em;
        display: inline-block;
    }

    .btn + .btn {
        margin-#{$left}: 1em;
    }
}

//footer blocks
footer {
    margin-top: 1em;
}

#footer-mobileapps {
  margin: 0 -1em;
  padding: 1em 1em 0;
  h4 {
    margin:0;
  }
  p {
	font-size: 0.75em;
	padding-bottom: 0;
  }
}

#footer-help {
  ul {
    @include list-reset-soft;
    li {
      border-bottom:1px solid #AFAFAF;
      &:last-child {
        border-bottom:none;
      }
      h4 {
        margin:0.75em 0 0.25em;
      }
      p {
        font-size:0.75em;
        margin-bottom: 0;
      }
    }
  }
}


/*BUTTONS*/

.btn {
  @include button-reset();
}

// Deprecated
// Try to use `btn btn--primary` etc instead of `btn-primary` where possible.
.btn-primary,
.green-btn,
.btn-danger,
.red-btn {
  @include button-size();
}

.btn + .btn {
  // Ensure extra space between inline buttons placed next to each other.
  margin-#{$left}: 0.5em;
}

.btn-primary,
.green-btn,
.btn--primary {
  @include button-variant(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
}

.btn-danger,
.red-btn,
.btn--danger {
  @include button-variant(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
}

.final-submit,
input.final-submit {
  margin: 1em 0.5em;
  float: $right;
}

.btn--facebook {
    @include button-variant(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);

    img {
        margin-#{$right}: 0.5em;
        vertical-align: -0.2em;
        height: 1.3em;
        width: auto;
    }
}

.btn--twitter {
    @include button-variant(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);

    img {
        margin-#{$right}: 0.5em;
        vertical-align: -0.2em;
        height: 1.3em;
        width: auto;
    }
}

.btn--back,
.btn--forward,
.btn--cancel,
.btn--navigate,
.btn--geolocate,
.btn--shortlist,
.btn--shortlisted {
    &:before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 112px 16px;
        @include svg-background-image('/cobrands/fixmystreet/images/button-icons');
        margin-#{$right}: 0.5em;
        vertical-align: -0.1em; // vertically centre icon in button
    }
}

.btn--back {
    &:before {
        background-position: flip(0 0, -16px 0);
    }
}

.btn--forward {
    &:before {
        background-position: flip(-16px 0, 0 0);
    }
}

.btn--cancel {
    &:before {
        background-position: -32px 0;
    }
}

.btn--navigate {
    &:before {
        background-position: -80px 0;
    }
}

.btn--geolocate {
    &:before {
        background-position: -96px 0;
    }
}

.btn--shortlist {
    &:before {
        background-position: -64px 0;
    }
}

.btn--shortlisted {
    &:before {
        background-position: -48px 0;
    }
}

.btn--provide-update {
    display: block;
    width: 100%;
    margin-bottom: 1em;
}

.btn--block {
    display: block;
    // Need to force 100% width if this is applied to <button> or <input> elements
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    @include box-sizing(border-box);
}

// Don't want space between block-level buttons,
// because they don't sit beside each other anyway.
.btn--block + .btn--block {
    margin-#{$left}: 0;
    margin-top: 1em;
}

.btn--small {
  font-size: 0.8em;
}

// Most of our forms get their vertical spacing from the margin-top on labels.
// This means the final submit button can end up uncomfortably close to the
// bottom of the final input. Add a class of `btn--final` to fix this.
.btn--final {
    margin-top: 1.25em; // matches margin-top on `label`
}

/*OTHER*/

.plain-list {
  @include list-reset-soft;
  li {
    margin-bottom:1em;
  }
}

.item-list {
  margin: 0 0 1em;
  padding: 0;
  border-bottom: 0.25em solid $primary;
}

.item-list__item {
  list-style: none;
  background-color: $itemlist_item_background;
  margin: 0.25em 0 0;
  padding: 0.5em 1em;
  display: block;

  @media print {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 1em 0 !important;
    border-top: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

.item-list__update-wrap {
  @include clearfix;
}

.item-list__update-text p {
  margin-bottom: 0.5em;
}

%item-list__item--link {
  padding: 0;
  a {
    color: #222222;
    display: block;
    padding: 0.5em 1em;
  }
  a:hover, a:focus, &.hovered a {
    background-color: $itemlist_item_background_hover;
    text-decoration: none;
  }
}

.item-list--wards__item {
  @extend %item-list__item--link;

  label {
    margin: 0;
    padding: 0.5em 1em;
  }
}

.item-list--reports__item {
  @extend %item-list__item--link;

  a {
    @include clearfix;
    padding: flip(0 0 0 1em, 0 1em 0 0);

    @media print {
      padding: 0;
    }
  }

  .img {
    width: 90px;
    float: $right;
    height: auto;
    margin-#{$left}: 1em;
  }

  small {
    color: #666;
    display: block;
    padding: 0.25em 0;
  }
}

.item-list__item__metadata {
  display: none;

  @media print {
    display: block;
    @include flex-container();
    @include flex-wrap(wrap);
  }

  & > * {
    margin-top: 0.5em;
    width: 33%;
    @include flex(0 0 auto);
  }

  h4 {
    margin: 0;
    font-size: 0.75em;
    font-weight: bold;
  }

  p {
    margin-bottom: 0;
    min-height: 1.4em;
  }
}

// A version where the normal padding of the list-item is tweaked to
// make room for an icon or a button next to the report details.
.item-list__item--indented {
  position: relative;
  margin: 0; // reset 0.25em margin-top on default item-list__item
  padding: 0;
  border-top: 1px solid #e5e5e5; // can't apply border to `a` because of border-left

  a {
    display: block;
    padding: 1em;
    padding-#{$left}: 2.5em; // make space for background image
    border-#{$left}: solid 1em transparent; // inset background image 1em from the left
    background: transparent;
  }

  // Trigger hover style even when hovering over sibling item-action-button
  &:hover a {
    background-color: $itemlist_item_background_hover;
  }

  h3 {
    color: inherit; // Some cobrands might want to override with $primary for a more colourful list
    margin: 0 0 0.2em 0;
    padding-top: 0; // override .item-list__heading
    line-height: 1.3em; // override .item-list__heading
  }

  p {
    margin: 0;
    font-size: 0.8em;
    color: #777;
  }
}

// Add this to your .item-list__item--indented element if you
// need to display both an action button *and* up/down arrows
.item-list__item--act-and-sort {
    a {
        padding-#{$left}: 4.5em; // make space for the extra buttons
    }

    .item-list__item__shortlist-up,
    .item-list__item__shortlist-down {
        width: 36px; // down from 48px
        #{$left}: 3.5em; // up from 1em
    }
}

%list-item-action-button {
  position: absolute;
  #{$left}: 1em; // match the padding on the `a` element
  top: 50%;
  margin-top: -24px; // vertically center
  margin-#{$left}: -12px; // horizontally center

  display: block;
  width: 48px;
  font-size: 1em;

  padding: 0;
  border: none;
  background: transparent;

  overflow: hidden; // hide button text
  height: 0;
  padding-top: 48px;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.item-list__item__shortlist-add {
  @extend %list-item-action-button;
  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive');

  &:hover,
  &:focus {
    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive-hover');
  }
}

.item-list__item__shortlist-remove {
  @extend %list-item-action-button;
  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-active');

  &:hover,
  &:focus {
    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-active-hover');
  }
}

.item-list__item__shortlist-take {
  @extend %list-item-action-button;
  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken');

  &:hover,
  &:focus {
    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken-hover');
  }
}

.item-list__item__shortlist-up {
  @extend %list-item-action-button;

  padding-top: 24px; // half the normal height, because shorter icon
  background-size: 24px 14px;

  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');

  &:hover,
  &:focus {
    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up-hover');
  }

  &[disabled] {
    opacity: 0.5;
    cursor: default;

    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
  }
}

.item-list__item__shortlist-down {
  @extend %list-item-action-button;

  margin-top: 0; // this is the "lower" arrow, so no need to offset vertical position
  padding-top: 24px; // half the normal height, because shorter icon
  background-size: 24px 14px;

  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');

  &:hover,
  &:focus {
    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down-hover');
  }

  &[disabled] {
    opacity: 0.5;
    cursor: default;

    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
  }
}

// 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;
    background-color: rgba(255, 255, 255, 0.5);

    .item-list__item--selected,
    .js & .item-list__item--selected.expanded:hover {
        border: 0.25em solid $primary;
        background-color: #fff;
    }
}

.item-list__heading {
  font-size: 1em;
  font-weight: normal;
  line-height: 1.5;
  padding-top: 0.25em;
  margin: 0;

  @media print {
    font-weight: bold;
  }
}

.item-list__description {
  display: none;

  @media print {
    display: block;
  }
}

.item-list__item__state {
  font-size: 0.9em;
  font-style: normal;
  font-weight: bold;
  padding: 0.2em 0.5em;
  vertical-align: -0.1em;
  background: #888;
  color: #fff;
  border-radius: 0.3em;
  margin-#{$right}: 0.1em;
}

.item-list__item--empty {
  background: none;
  color: #777;

  p {
    margin: 0;
    padding: 1em;
    text-align: center;
  }
}

.item-list--front-page {
  border-bottom: none;

  .item-list__item {
    background-color: transparent;
  }
}

.item-list__item--expandable {
  @include clearfix();
  margin: 0;
  padding: 1em;

  .js & {
      cursor: pointer;

      &:hover,
      &.hovered {
          background-color: $itemlist_item_background_hover;
      }

      &.item-list__item--selected,
      &.item-list__item--selected:hover,
      &.item-list__item--selected.hovered {
          cursor: default;
          background-color: #fff;
      }
  }

  h3 {
      margin: 0;
  }

  .img {
      float: $right;
      width: 90px;
      height: auto;
      margin: flip(0 0 0.5em 1em, 0 1em 0.5em 0);
  }

  small {
      color: #666;
      display: block;
      margin-top: 0.5em;
  }

  // A sort of hybrid between the .problem-header meta rows,
  // and the regular .list-item meta row.
  .report_meta_info,
  .council_sent_info {
      color: #666;
      font-family: $meta-font;
      font-style: italic;
      font-size: 0.8125em;
  }

  p {
      line-height: 1.4em;
      margin-top: 0.5em;
  }

  &.expanded {
      .js & {
          cursor: default;

          &:hover {
              background-color: $itemlist_item_background;
          }
      }
  }
}

.item-list__item--expandable__actions {
  clear: both; // clear floated .update-img images
  @include flex-container();

  & > * {
      @include flex(1); // Force equal width children
  }
}

.item-list__item--expandable__hide-until-expanded {
  display: none;

  .expanded & {
      display: block;
  }
}

.item-list__item--expandable__hide-when-expanded {
  .expanded & {
      display: none;
  }
}

.item-list__item .get-updates {
  margin: 0 -1em -1em -1em;
  padding: 1em;
  background-color: $itemlist_item_background_hover;

  p, label {
    margin: 0 0 0.5em 0;
  }
}

.problem-header .update-img,
.item-list .update-img {
    float: $right;
    margin: flip(0.3em 0 0.5em 1em, 0.3em 1em 0.5em 0); // gutter between text and floated image
    width: 33%;
}
.questionnaire-report-reminder .update-img {
    float: $left;
    margin: flip(0.1em 1em 1em 0, 0.1em 0 1em 1em);
    width: 120px;
}

// A wrapper that's put around .update-imgs if there are more than 1 in a row
.update-img-set {
    text-align: center;
    margin: 0 0 1em;

    .update-img {
        float: none;
        display: inline-block;
        margin: 0;
        width: 31%;
    }

    .update-img + .update-img {
        margin: flip(0 0 0 0.5em, 0 0.5em 0 0);
    }
}

// fancybox gallery images have a magnifying glass in the corner
.update-img {
  a {
    display: block;
    position: relative;

    span {
      position: absolute;
      top: 0;
      #{$right}: 0;
      display: block;
      width: 20px;
      height: 0;
      padding-top: 20px;
      opacity: 0.5;
      overflow: hidden;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 16px 16px;
      @include svg-background-image('/cobrands/fixmystreet/images/magnify');
    }

    &:hover span {
      opacity: 1;
    }
  }
}

.problem-back {
  display: block;
  font-size: 1em;
  line-height: 1.2em;
  margin: -1em -1em 1em -1em;
  padding: 0.9em 1em;
  border-bottom: 0.2em solid #eee;

  &:link, &:visited, &:hover {
    color: #666;
  }

  &:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-#{$right}: 0.5em;
    vertical-align: -0.15em;
    background-size: 112px 16px;
    background-repeat: no-repeat;
    @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
    background-position: flip(0 0, -16px 0);
  }
}

// Banner showing report status, above report title on individual report page.
.banner {
  line-height: 1.2; // down from 1.5 default on `body`
  margin: -1.2em -1em 1em -1em;
  padding: 0.9em 1em;
  background-color: #f6f6f6;
  border-top: 0.2em solid #999;

  p {
    font-weight: bold;
  }

  p:last-child {
    margin-bottom: 0;
  }

  .pin {
    width: 16px;
    height: 20px;
    margin: -10px 0;
    margin-#{$right}: 0.3em;
    vertical-align: 0.4em;
  }
}

.banner--fixed {
  border-top-color: $col_fixed_label;
  background-color: $col_fixed_label_light;
}

.problem-header {
  margin-bottom: 1em;

  // Clear the admin actions after the floated photo(s).
  .segmented-control {
    clear: both;
  }
}

.report_meta_info,
.council_sent_info {
  font-size: 0.9em;
}

.council_sent_info {
  color: #666;

  p + & {
    margin-top: -0.6em; // partly counteract margin-bottom on previous paragraph
  }
}

.moderate-edit {
  display: none; // gets shown by javascript

  :disabled {
    background: #ddd;
  }

  h1 input {
    border-width: (0.125em/2); // compensate for 2em font-size on h1s
  }
}

.show-moderation {
  .moderate-edit {
    display: block;
  }
  .moderate-display {
    display: none;
  }
}

.shortlisted-status {
  margin-top: 1em;
  padding: 1em 1em 1em 4em; // Icon is always displayed on left, even in RtL mode
  border-radius: 0.25em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.5);
  background-position: 1em 50%;
  background-repeat: no-repeat;
  background-size: 2em 2em;
  @include svg-background-image('/cobrands/fixmystreet/images/shortlist');

  h3 {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
  }

  p {
    margin: 0.5em 0 0 0;
    font-size: 0.875em;
  }
}

// map stuff
#map_box {
  margin: 0 -1em 1em;
  background: #333;
  height: 29em;
  overflow: hidden;
  position: relative;

  #map {
    width: 100%;
    height: 100%;
    // Needs to be position:absolute for the mobile banners to show on top
    position: absolute;
  }
}

// The map's static image fallback is visible by default.
// Hide it if javascript has loaded. (We show it again when
// the page is printed.)
html.js #map .noscript {
  display: none;
}

// OpenLayers fix for navigation being top right
// Left and right so that zoom can be left, pan right.
#fms_pan_zoom {
  top: 0.5em; // This will be overridden in JS if there's a full screen map with banner
  #{$left}: 0.5em;
  #{$right}: 0.5em;
}

// Openlayers map controls (overrides)
#fms_pan_zoom_panup,
#fms_pan_zoom_pandown,
#fms_pan_zoom_panleft,
#fms_pan_zoom_panright,
#fms_pan_zoom_zoomin,
#fms_pan_zoom_zoomout {
  position: absolute;
  cursor: pointer;
  width: 36px;
  height: 0;
  padding-top: 36px;
  overflow: hidden;
  @include svg-background-image('/cobrands/fixmystreet/images/fms-pan-zoom');
  background-size: 156px 72px;
  background-repeat: no-repeat;
  filter: none !important; // Override OpenLayers PNG handling of the navigation
}

#fms_pan_zoom_panup {
  background-position: 0 0;
  #{$right}: 30px;
  #{$left}: auto;
  top: 0;
}
#fms_pan_zoom_pandown {
  background-position: 0 -36px;
  #{$right}: 30px;
  #{$left}: auto;
  top: 72px;
}
#fms_pan_zoom_panleft {
  background-position: -36px 0;
  width: 48px;
  #{$right}: flip(48px, 0);
  #{$left}: auto;
  top: 36px;
}
#fms_pan_zoom_panright {
  background-position: -36px -36px;
  width: 48px;
  #{$right}: flip(0, 48px);
  #{$left}: auto;
  top: 36px;
}
#fms_pan_zoom_zoomin {
  background-position: -84px 0;
  padding-top: 44px;
  #{$left}: 0;
  top: 0;
}
#fms_pan_zoom_zoomout {
  background-position: -120px 100%;
  padding-top: 44px;
  #{$left}: 0;
  top: 44px;
}

%sub-map-link-icon {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-#{$left}: 8px;
    vertical-align: -0.1em;
    background-size: 108px 12px;
    @include svg-background-image('/cobrands/fixmystreet/images/map-tools');
}

// Generic component for presenting a semi-transparent black toolbar
// at the bottom of the window on map pages. When the window is wide
// enough, the toolbar docks to the right edge of the screen.
// We use this for the "OK/Cancel" buttons after you tap a location
// in the mobile reporting view, and for the "Hide pins / Get updates"
// etc links on mobile and desktop map pages.
.sub-map-links {
    @include flex-container();

    position: absolute;
    #{$left}: 0;
    #{$right}: 0;
    bottom: 0;
    margin: 0;

    a {
        @include box-sizing(border-box);
        @include flex(1 1 auto);

        display: inline-block; // fallback for non-flexbox browsers
        color: inherit;
        padding: 0.5em;
        font-size: 1em;
        text-align: center;

        &:hover,
        &:focus {
            background-color: #000;
            text-decoration: none;
        }
    }

    #try_again,
    #mob_ok {
        width: 50%;
    }

    .feed:after {
        @extend %sub-map-link-icon;
        background-position: -12px 0;
    }

    #hide_pins_link:after {
        @extend %sub-map-link-icon;
        background-position: -24px 0;
    }

    #fms_shortlist_all:after {
        @extend %sub-map-link-icon;
        background-position: -60px 0;
    }

    #toggle-fullscreen:after {
        @extend %sub-map-link-icon;
        background-position: -72px 0;
    }

    #toggle-fullscreen.compress:after {
        @extend %sub-map-link-icon;
        background-position: -84px 0;
    }

    #map_filter:after {
        @extend %sub-map-link-icon;
        background-position: -96px 0;
    }
}

// Want some visual consistency between the top and bottom bars on mobile.
.mobile-map-banner,
.sub-map-links {
    background-color: #333;
    background-color: rgba(#000, 0.7);
    color: #fff;
}

// "Selected" styling for the report-list-filter toggle when selected.
.mobile-filters-active #map_filter {
    background: #000;
}

// On mobile, once #mob_ok has been pressed, the new report form is shown,
// and .sub-map-links transforms into a completely different-looking set
// of buttons for return back to the map.
.sub-map-links.map_complete {
    // Undo flex.
    display: block;

    // "Fade out" the map.
    top: 30px;
    background-color: rgba(#000, 0.3);

    #try_again,
    #mob_ok {
        position: absolute;
        display: block;
        bottom: 0;
    }

    // Turn #try_again into a black button, centred above the viewport.
    #try_again {
        #{$left}: 25%; // along with width of 50%, centres it
        margin-bottom: 6em;
        background: rgba(0, 0, 0, 0.8);
        @include border-radius(0.5em);
    }

    // Turn #mob_ok into a white "tab" overlapping the map.
    #mob_ok {
        #{$right}: 1em;
        width: 4em;
        background: #fff;
        color: #000;

        // "Down" arrow.
        &:before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            margin: 2px auto;
            background-size: 112px 16px;
            @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
            background-position: -32px 0;
        }
    }
}

.big-hide-pins-link {
    display: none; // will become `block` in layout.scss
}

.big-green-banner {
  position: relative;
  top: -1.75em;
  background: $col_click_map;
  color: #fff;
  padding: 1em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.875em;
  .map-fullscreen & {
    display: none;
  }
}

.mobile-map-banner {
  display: none;
  .map-fullscreen & {
    display: block;
  }
  text-transform: uppercase;
  text-align: center;
  font-family: $heading-font;
  line-height: 1em;
  margin:0;
  position: absolute;
  top:0;
  #{$left}: 0;
  #{$right}: 0;
  font-size:0.75em;
  padding:0.75em 30px;
  a {
    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
    font-weight: normal;
    font-size: 0.875em;
    line-height:1;
    padding:0.5em 0.75em;
    position:absolute;
    #{$left}: 0.3em;
    top:0.3em;
  }
}

.olControlAttribution {
    bottom: 3.25em !important;
    #{$right}: 0.25em !important;
    #{$left}: 0.25em !important;
    color: #222222;
    font-size:0.75em !important;
}
.olControlAttribution img {
    vertical-align: bottom;
}
.olControlDragFeatureFMSOver {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.olControlDragFeatureFMSActive.olControlDragFeatureFMSOver.olDragDown {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Drag is only present in noscript form. XXX Copy from core. */
#drag {
    input, img {
        position: absolute;
        border: none;
        max-width: none;
    }
    input {
        cursor: crosshair;
        background-color: #cccccc;
    }
    img {
        cursor: move;
    }
}

/* For non-JS situations, as the image file is 2x pixel size */
img.pin {
    width: 48px;
    height: 64px;
}

.rap-notes-trigger {
  margin-bottom: 1em;
}

#report-a-problem-sidebar {
  margin-bottom: 2em;
  padding: 1em;
  background-color: #E9F2FF;
}

.mobile #map_box {
  height: 10em; // eg: at the top of individual report pages
}

#map_sidebar {
  // Chrome/Safari count padding-bottom as part of the scrollable content in
  // an overflow:scroll element (technically in contravention of the spec),
  // whereas Firefox/IE render the padding outside the scrollable area.
  // In desktop mode, we need padding at the bottom of the sidebar, to stop
  // .shadow-wrap from obscuring content at the bottom of the sidebar. So we
  // use an :after pseudo-element instead of padding.
  // In mobile mode, the extra space here still helps differentiate the page
  // content on report/reporting pages, from the nav immediately below.
  // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
  &:after {
    content: "";
    display: block;
    height: 4em;
  }
}

// When you're in the reporting flow on mobile, we hide the site-header
// and make the map full screen to reduce distractions. JavaScript also
// tweaks the text content of some of the map-related elements, to make
// it more "app-like".
.map-fullscreen {
  #site-header {
    display: none;
  }

  #map_box {
    position: absolute;
    top: 0;
    #{$left}: 0;
    #{$right}: 0;
    bottom: 0;
    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)

    &.above-form {
      position: relative;
      margin: 0 -1em;
    }
  }
}

.map-reporting {
  #fms_pan_zoom {
    top: 2.75em; // make space for the semi-transparent "Place pin on map" bar
  }
}

.only-map {
  height: 100%;
  body {
    height: 100%;
    overflow: hidden;
  }
}

#loading-indicator {
  height: 32px;
  width: 32px;
  position: relative;
  background-color: #333;
  border-radius: 0.25em;
  padding: 0.25em;
  // Offset from top same as fms_pan_zoom, from left so as not
  // to appear on top of zoom buttons (0.5em, 36px, 0.5em)
  top: 0.5em;
  #{$left}: 3.25em;
  .map-reporting & {
    // Same as fms_pan_zoom above, leaving space for the top bar when reporting
    top: 2.75em;
  }
}

/* Reporting a problem bits */

label .muted {
  color: #888;
  font-weight: normal;
}

.form-hint {
  display: block;
  color: #666;
  margin-bottom: 0.5em;

  // Reduce space between labels and their form-hints
  label + & {
    margin-top: -0.5em;
  }
}

.description_tips {
  display: flex;

  ul {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }

  li {
    margin-bottom: 0;
    padding-#{$left}: 16px;
    list-style: none;
    background: transparent url(/cobrands/fixmystreet/images/tick-10px-8px.png) $left 5px no-repeat;
    border-#{$left}: solid 4px transparent;
  }

  .do {
    color: #1c8012;
  }

  .dont {
    color: #881111;

    li {
      background-image: url(/cobrands/fixmystreet/images/cross-7px-7px.png);
      background-position: $left 6px;
      padding-#{$left}: 14px;
      border-#{$left}: solid 6px transparent;
    }
  }
}
.description_tips__heading--inline {
  display: inline-block;
}

#form_category_row > label:first-child {
    margin-top: 0;
}

.box-warning,
.extra-category-questions {
  margin: 1em -1em;
}

.extra-category-questions {
  background-color: #eee;
  padding: 1em;

  & > :first-child {
    margin-top: 0;
  }
}

.box-warning {
    padding: 2em 2em;
    background-color: mix(#fff, $primary, 70%);

    h1 {
        font-size: 1.4em;
    }

    p {
        margin-bottom: 0.5em;
    }

    .btn, .btn-primary {
        margin: 0.5em 0 1em 0;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .segmented-control {
        .btn {
            &:last-child {
                margin-bottom: 1em;
            }
        }
    }
}

.category_meta_message.btn {
  display: block;
}

.js-hide-if-public-category {
  display: none;
}

.asset-spot:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    background-color: #ffff00;
    margin: 0 0.3em 0 0.2em;
    border-radius: 100%;
    vertical-align: -2px;
}

// 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;

  #detailed_information_length {
    float: #{$right};
    margin-top: 0.25em; // match the label next to it
    &.error {
      color: red;
    }
  }
}

.inspect-form-heading {
  margin-top: 0;
}

.inspect-section {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 1.5em;
  margin-top: 1.5em;

  &:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  & > :first-child,
  & > :first-child > :first-child {
    margin-top: 0;
  }
  label {
    display: inline-block;
    margin-top: 0.25em;
  }
}

.inspect-section--hidden {
  display: none;
}


.alert {
  margin: 0 -1em 1em;
  background:#ff0000;
  padding:1em;
  color:#fff;
  a, a:hover {
    color:$primary;
  }
}

.pagination {
  text-align:center;
  padding:0.5em 1em;
  background:#eee;
  position:relative;
  .prev {
    position:absolute;
    #{$left}: 0.5em;
  }
  .next {
    position:absolute;
    #{$right}: 0.5em;
  }
  a {
    @include inline-block;
    color: $primary_text;
    background: $primary;
    padding-#{$left}: 0.5em;
    padding-#{$right}: 0.5em;
    &:hover {
      text-decoration:none;
      background:$primary/1.1;
    }
  }
}

// this is a bit of a hack to get some differentation between desk and mobile
.desk-only {
  display:none;
}

// hide anything with this class if js is working
.js .hidden-js {
  display: none;
  visibility: hidden;
}

// hide anything with this class if js is NOT working
.no-js .hidden-nojs {
  display: none !important;
  visibility: hidden;
}


/* Front page */
#front-main {
  text-align:center;
  margin: 1em;
  h2 {
    font-style: italic;
    font-family: $meta-font;
    font-size: 1.1875em;
    color:#4d4d4d;
  }
  p {
    margin: 0.5em 0 0;
  }
  #postcodeForm {
    margin: 0 -1em;
    padding:1em;
    color: $primary_text;
    background: $primary;
    font-family: $meta-font;
    label {
      margin:0;
    }
    .form-hint {
      margin-bottom: 0.5em;
    }
    div {
      @include flex-container;
      @include flex-wrap(wrap);
      width: 100%;
      background:#fff;
      border:1px solid $primary_b;
      input#pc {
        @include flex(86 0 auto);
        width: 50%;
        border:none;
        background:none;
        line-height:1.5em;
      }
      input#sub {
        border:none;
        padding: 0.5em;
        @include flex(14 0 auto);
        background:#000;
        color:#fff;
        @include border-radius(0);
        &:hover, &:focus {
          background:#333;
        }
      }
    }
  }
  a#geolocate_link {
    @include inline-block;
    vertical-align:top;
    background:#1a1a1a;
    color:#C8C8C8;
    padding:0.5em;
    font-family: $meta-font;
    font-size: 0.8125em;
    @include border-radius(0 0 0.25em 0.25em);
    &:hover {
      text-decoration:none;
      background:#2a2a2a;
    }
  }
  a#geolocate_link.loading {
      background: #1a1a1a url("/cobrands/fixmystreet/images/spinner-black.gif") flip(100%,0) 50% no-repeat;
      border-#{$right}: solid 0.5em #1a1a1a;
      padding-#{$right}: 1.5em;
  }
}
.no-js #geolocate_link {
    display: none !important;
}

a#geolocate_link.loading, .btn--geolocate.loading {
    background: url("/cobrands/fixmystreet/images/spinner-white.gif") flip(100%,0) 50% no-repeat;
    padding-#{$right}: 1.5em;
}

#front_stats {
  display:table;
  width:100%;
  color: $primary_text;
  background: $primary;
  font-family: $meta-font;
  div {
    display:table-cell;
    text-align:center;
    padding:1em;
    line-height:1.25em;
    font-size: 0.8125em;
    font-weight: bold;
  }
  big {
    display:block;
    margin-bottom:0.5em;
    font-size:1.5385em;
  }
}

// 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;
    }
    li {
        padding: 0em;
        margin-bottom: 0.5em;
    }
    .a {
        background: #f6f6f6;
    }
}

.alerts-rss-link {
  position: relative;
  z-index: 1; // stack in front of the position:relative .label-containing-checkbox

  img {
    margin-top: 4px;
    margin-#{$left}: 0.5em;
    float: $right;
  }
}

.alerts__nearby-activity {
    background-color: #f6f6f6;
    margin: 1em -1em;
    padding: 1em;

    & > :first-child {
        margin-top: 0;
    }
}

.alerts__nearby-activity__photos {
    white-space: nowrap;
    overflow: hidden;

    a {
        margin-#{$right}: 0.5em;
        text-decoration: none; // avoid underline showing between images
    }
}

.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: -0.5em;
}

.confirmation-header {
  padding: 140px 0 2em;
  text-align: center;

  background: transparent url(/cobrands/fixmystreet/images/tick-in-circle-100px.png) center 1em no-repeat;

  &.confirmation-header--failure {
    background-image: url(/cobrands/fixmystreet/images/sad-face-in-circle-100px.png);
  }

  &.confirmation-header--inbox {
    background-image: url(/cobrands/fixmystreet/images/inbox-in-circle-100px.png);
  }

  &.confirmation-header--phone {
    background-image: url(/cobrands/fixmystreet/images/phone-in-circle-100px.png);
  }

  h1, h2 {
    margin: 0;
    line-height: 1.2em;
  }

  h1 {
    a {
      text-decoration: underline;
      color: inherit;

      &:hover,
      &:focus {
        text-decoration: none;
        color: #0BA7D1; // default link colour
      }
    }
  }

  h1 + h2,
  h1 ~ p {
    margin-top: 12px;
  }

  p {
    color: #666666;
    font-size: 1.2em;
    margin-bottom: 0.5em;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

.confirmation-again {
  margin-top: 2em;
  color: inherit;
  font-size: 1em;
}

/* Questionnaire page */

.questionnaire-report-header {
  font-family: inherit;
  font-size: 1.2em;
  font-weight: 600;
}

.questionnaire-report-reminder {
  @include clearfix(); // clear the floated image, in case there is no update-header to do it
  background: #f3f3f3;
  border-radius: 3px;
  padding: 1em 1em 1px 1em; // basically no padding-bottom, as children have their own margin-bottom instead
  margin-bottom: 2em;
}

.questionnaire-report-reminder__report-title {
  margin: 0 0 0.3em 0;
}

.questionnaire-report-reminder__report-meta {
  color: #666;
  line-height: 1.4em;
}

.questionnaire-report-reminder__last-update-header {
  border-top: 1px solid #ddd;
  margin: 0;
  padding: 0.8em 0 0.5em 0;
  clear: #{$left}; // clear the floated image above

  a {
    float: #{$right};
  }
}

.questionnaire-errors {
  margin-#{$left}: 0;
}

.segmented-control {
  @include clearfix();
  @include flex-container(); // fancy full-width buttons for browsers that support flexbox

  & > * {
    display: block;
    text-align: center;
    border-#{$right}-width: 0; // avoid double border between items
    float: #{$left}; // float fallback for browsers that don't support flexbox
    position: relative; // Make sure this is shown on legacy flexbox webkit
    @include flex(1 0 auto, 1);
  }

  .btn {
    padding: 0.75em 0.5em;
    border-radius: 0;
  }

  .btn + .btn {
    margin-#{$left}: 0;
  }

  & > :first-child {
    border-radius: flip(4px 0 0 4px, 0 4px 4px 0);
  }

  & > :last-child {
    border-radius: flip(0 4px 4px 0, 4px 0 0 4px);
    border-#{$right}-width: 1px; // reinstate border on last item
  }

  & > :first-child:last-child {
    border-radius: 4px;
  }
}

// A special case of segmented control, where each "button" (or label) is
// preceded by a radio button, which needs to be hidden but interactive.
// Checked checkboxes give their following label a "pressed" appearance.
.segmented-control--radio {
  input {
    position: absolute;
    opacity: 0;
  }

  input:checked + label {
    color: $primary_text !important;
    background: $primary;
    border-color: darken($primary, 5%);
    background-image: none; // remove gradient
    box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,0.2);
    border-#{$right}-width: 1px; // add a realistic coloured border to all sides
  }

  input:checked + label + input + label {
    border-#{$left}-width: 0; // in favour of the realistic coloured border on the selected label
  }

  // The first label is no longer the first child, so we need to
  // fish it out specially with a next sibling selector.
  input:first-child + label {
    border-radius: flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0);
  }
}

.my-account-buttons a {
  display: inline-block;
  background: #f6f6f6;
  padding: 0.5em 1em;
  border-radius: 0.2em;
}

// Useful for inserting hidden forms on the page, but still allowing
// inputs inside the form to be toggled by labels outside the form.
// Try using this in combination with .segmented-control for funtimes.
.hidden-label-target {
  position: absolute;
  top: -100px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;

  // Tell assistive devices to ignore this element.
  visibility: hidden;

  // Hack for IE8 which doesn't allow interaction with
  // `visibility:hidden` elements.
  visibility: visible\9;
}


@media screen {
  .print-only {
    display: none !important;
  }
}

@media print {
  @page {
    margin: 3em;
  }

  // Firefox leaves a big blanking gap if the content is floated...
  .content { float: none !important; }

  .shadow-wrap,
  .nav-wrapper,
  #nav-link,
  .admin-nav,
  .olControlAttribution,
  .olControlPanZoom,
  .sub-map-links,
  #fms_pan_zoom,
  .screen-only,
  .olMapViewport,
  .big-green-banner,
  .click-the-map,
  #skip-this-step,
  .my-account-buttons {
    display: none !important;
  }

  #site-header {
    display: block !important;
    position: static !important;
  }

  #map_box,
  #map_sidebar {
    position: static !important;
    width: auto !important;
    background: transparent !important;
  }

  #map_box {
    float: right !important;
    width: 256px !important;
    height: 256px !important;
    margin: 0 0 1em 1em !important;
  }

  #map_sidebar {
      // Prevent sidebar from clearing below floated map
      overflow: visible !important;
  }

  #map {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  html.js #map .noscript {
    display: block;
  }
}

$nicetable-cell-padding: 0.6em 1.5em !default;
$nicetable-border-color: #ccc !default;
$nicetable-stripe-background: rgba($primary, 0.05) !default;
$nicetable-hover-background: rgba($primary, 0.15) !default;

.nicetable {
    width: 100%;
    margin-bottom: 1.5em;

    td, th {
        padding: $nicetable-cell-padding;
        padding-#{$left}: 0;
        border-bottom: 1px solid $nicetable-border-color;
        text-align: $left;

        &:last-child {
            padding-#{$right}: 0;
        }
    }

    // Give your .nicetable an extra .stripe class to stripe alternate rows.
    &.stripe {
        td, th {
            padding: $nicetable-cell-padding;
        }

        tr:nth-child(even) {
            background: $nicetable-stripe-background;
        }
    }

    // Give your .nicetable an extra .hover class to enable row hover effect.
    &.hover {
        td, th {
            padding: $nicetable-cell-padding;
        }

        tr:hover {
            background: $nicetable-hover-background;
        }

        thead tr:hover {
            background: transparent;
        }
    }

    // For table cells containing numbers (and their associated header cells).
    .data {
        text-align: $right;
    }
}

@import "_admin";
@import "_dropzone";
@import "_multiselect";
@import "_autocomplete";
@import "_dashboard";
@import "_top-banner";