/* 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;
$image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
$menu-image: 'menu-white' !default;

$itemlist_item_background: #f6f6f6 !default;
$itemlist_item_background_hover: #e6e6e6 !default;
$col_big_numbers: #ccc !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;
}
h1#reports_heading span {
  display: none;
}
h1#reports_heading a {
  display: block;
  font-size: 50%;
}

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;
        weight:bold;
        size:2.5em;
      }
    }
  }
}

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 {
  text-decoration: none;
  color: #0BA7D1;

  &:visited {
    color: #0BA7D1;
  }

  &:hover,
  &:active {
    text-decoration: underline;
    color: #0D7CCE;
  }
}

// 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 placeholders, these need to be on separate lines as if the browser
// can't understand a selector it will invalidate the whole line.
::-webkit-input-placeholder {
  color: #666666;
  font: {
    style:italic;
    size:0.9375em;
  }
}
:-moz-placeholder {
  color:#666666;
  font: {
    style:italic;
    size:0.9375em;
  }
}
:-ms-placeholder {
  color:#666666;
  font: {
    style:italic;
    size:0.9375em;
  }
}
//this only gets used when the browser doesn't support @placeholder
.placeholder {
  color:#666666;
  font: {
    style:italic;
    size:0.9375em;
  }
}

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

input[type=text],
input[type=password],
input[type=email],
textarea {
  @include box-sizing(border-box);
  width: 100%;
  // adjust so the sides line up
  padding: 0.5em;
}
.ie7 {
    input[type=text],
    input[type=password],
    input[type=email],
    textarea {
        max-width: 95%;
    }
}

textarea {
  border: 0.125em solid #888888;
  @include border-radius(0.25em);
  display: block;
  font-size: 1em;
  line-height: 1.5em;
  font-family: $meta-font;
  min-height:8em;
}

input[type=text],
input[type=password],
input[type=email] {
  border: 0.125em solid #888888;
  @include border-radius(0.25em);
  display: block;
  font-size: 1em;
  line-height: 1em;
}

label{
  display: block;
  margin-top: 1.25em;
  margin-bottom: 0.25em;
  font-weight: bold;
  &.inline {
    display: inline;
    padding: flip(0 2em 0 1em, 0 1em 0 2em);
    font-weight: normal;
  }
  &.inline-text {
    display: inline;
    font-weight: normal;
  }
}

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

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

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

// When the user is logged in, we show a shorter form-box,
// without a heading before it. So add some space before.
#form-box--logged-in-name {
  margin-top: 1.25em;
}

// Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
.ie7 .form-box {
    width: 100%;
    > input[type=text], input[type=email] {
        margin-#{$left}: 2em;
    }
}

.change_location {
    color: #666;
    padding-#{$left}: 20px;
    background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) $left 50% no-repeat;
    border-#{$left}: solid 4px transparent;
    margin-top: -0.5em;
}

.form-txt-submit-box {
  min-height:3em;
  input[type=password],
  input[type=text],
  input[type=email] {
    width: 65%;
    float: $left;
  }
  input[type=submit] {
    float: $right;
    width:28%;
    margin-#{$right}: 0.25em;
    padding-top:0.7em;
    padding-bottom:0.6em;
  }
}

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


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

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

// don't display valid error boxes as now the page jump
// won't be until the user submits, which is fine
div.label-valid,
p.label-valid {
  display:none !important;
  visibility: hidden;
}



/*** LAYOUT ***/

// Padding creates page margins on mobile
.container{
  padding: 0 1em 1em;
}

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

// #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-logo{
  display: block;
  width: 175px;
  height: 40px;
  top: 0.4em;
  #{$left}: 0.5em;
  background: url($image-sprite) -3px -3px 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
  background: transparent url(/cobrands/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 {
  display: block;
  position: absolute;
  top: (3em / 2); // half the height of #site-header
  #{$right}: 3.5em;
  margin-top: -0.5em;

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

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


.nav-menu {
  @include list-reset-soft;
  a, span {
    display: block;
    padding: 0.5em 1em;
    background: #f6f6f6;
    color: #333;
    font-size: 1.25em;
    border-bottom: 0.25em solid #333;
  }
  a:hover, span.hover {
    background: #333;
    color: #fff;
    text-decoration: none;
  }
  span {
    background: #ccc;
  }
}
.nav-menu--mysoc {
  a {
    color: $primary_text;
    background: $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 {
  margin: 0 -1em;
  ul#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;
      }
      input[type=submit] {
          width: 100%;
          border: none;
      }
      a, input[type=submit] {
        display: block;
        background-color: #f5f5f5;
        background-repeat: no-repeat;
        color:#333;
        padding:4em 2em 1em;
        text-transform:uppercase;
        font: {
          size:0.6875em;
          family: $meta-font;
        }
        &:hover, &.hover {
          text-decoration:none;
          background-color:#333;
          color:#fff;
        }
        &.abuse {
          background-image: url($image-sprite);
          background-position: center -2424px;
        }
        &.feed {
          background-image: url($image-sprite);
          background-position: center -2563px;
        }
        &.share {
          background-image: url('/cobrands/fixmystreet/images/share.png');
          background-position: center 25%;
        }
        &.chevron {
          background-image: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg");
          background-position: center 25%;
          background-size: 20px 25px;
        }
        &.chevron.hover {
          background-size: auto auto;
        }
        &.hover {
          background-image: url($image-sprite);
          background-position: center -2064px;
        }
      }
    }
  }
}

//because display:table doesn't work we float
.ie7 {
  .shadow-wrap {
    ul#key-tools{
      background:#f5f5f5;
      li{
        float: $left;
        a {
          padding-#{$left}: 1.5em;
          padding-#{$right}: 3em;
        }
      }
    }
  }
}
.iel8 {
  .shadow-wrap ul#key-tools li a.chevron {
    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
    background-position: $right -116px;
  }
}

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

#report-share iframe {
    vertical-align: top;
}

//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;
    border-bottom:1px solid #AFAFAF;
  }
}

#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*/

// Default style set for buttons, inputs and .btn class. Red and green class available.

button, input[type=submit],.btn{
  @include button-reset;
}

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

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

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

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

    &:visited {
        color: #fff;
    }

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

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

    &:visited {
        color: #fff;
    }

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

// Under the button to override its text transform and width
.btn--social {
    display: block;
    width: 100%;
    text-transform: none;
    text-align: center;
}

.js #js-social-email-hide {
    display: none;
}

.button-fwd {
  padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
  background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat;
}
.button-back {
  padding: flip(1em 1em 1em 3em, 1em 3em 1em 1em);
  background: inline-image("../fixmystreet/images/chevron-grey-#{$left}.svg") $left 50% no-repeat;
}
.button-fwd,
.button-back {
  @include inline-block;
  cursor:pointer;
  font-size: 1em;
  line-height: 1;
  margin:0;
  border:1px solid #999;
  color:#333;
  background-color: #eee;
  background-size: 20px+16px 25px;
  @include border-radius(4px);
  &:hover{
    color:#fff;
    background-color: #777;
    text-decoration: none;
    border:1px solid #666;
  }
}
.iel8 {
  .button-fwd, .button-back {
    background-image: url($image-sprite);
    background-repeat: no-repeat;
  }
  .button-fwd {
    background-position: right -686px;
  }
  .button-back {
    background-position: -18px -802px;
  }
}

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

.banner {
  position: relative;
  p {
    position: absolute;
    top:-1.95em;
    #{$right}: 0;
    @include inline-block;
    font-size:0.6875em;//11px
    line-height:1em;
    padding:0.5em 1em;
    margin:0;
    color:#1a1a1a;
    background: #ccc;
    text: {
      transform:uppercase;
      align:center;
    }
    &:before {
      content: "";
      #{$left}: -0.5em;
      top:0;
      position: absolute;
      width: 0;
      height: 0;
      border-#{$left}: 0.5em solid transparent;
      border-bottom: 0.5em solid #888;
    }
    &#fixed {
      color:#fff;
      background: $col_fixed_label;
      &:before {
        border-bottom: 0.5em solid $col_fixed_label_dark;
      }
    }
  }
}

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

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

.item-list--reports__item {
  @extend %item-list__item--link;
  a {
    @include clearfix;
    padding: flip(0 0 0 1em, 0 1em 0 0);
  }
  .img {
    width: 90px;
    float: $right;
    height: auto;
    margin-#{$left}: 1em;
  }
  small {
    color: #666;
    display: block;
    padding: 0.25em 0;
  }
}
.item-list__heading {
  font-size: 1em;
  font-weight: normal;
  line-height: 1.5;
  padding-top: 0.25em;
  margin: 0;
}

.item-list__item--empty p {
  margin: 0;
}

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

.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:20px;
      opacity: 0.5;
      background:#fff url($image-sprite) -16px -1098px no-repeat;
      //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
      font: 0/0 a;
      color: transparent;
    }
    &:hover span {
      opacity: 1;
    }
  }
}

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

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

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

  #map {
    width: 100%;
    height: 100%;

    // IE7 doesn't understand 100% height when the parent height is "auto",
    // so we have to explicitly tell it to pin the element to the top and
    // bottom of the parent. No need for an ie7-specific condition, because
    // this makes no difference in other browsers.
    // We keep the "height: 100%" in there to give IE7 context for the 100%
    // height on #map's child, div.olMapViewport.
    position: absolute;
    top: 0;
    bottom: 0;
  }
}

// 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 {
  width: 36px;
  height: 36px;
  text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary
  background: url($image-sprite) no-repeat;
  filter: none !important; // Override OpenLayers PNG handling of the navigation
}

#fms_pan_zoom_zoomworld {
  display: none !important;
  visibility: none !important;
}

#fms_pan_zoom_panup {
  background-position: -42px -222px;
  #{$right}: 30px;
  #{$left}: auto;
  top: 0;
}
#fms_pan_zoom_pandown {
  background-position: -42px -282px;
  #{$right}: 30px;
  #{$left}: auto;
  top: 72px;
}
#fms_pan_zoom_panleft {
  background-position: -12px -252px;
  width: 48px;
  #{$right}: flip(48px, 0);
  #{$left}: auto;
  top: 36px;
}
#fms_pan_zoom_panright {
  background-position: -60px -252px;
  width: 48px;
  #{$right}: flip(0, 48px);
  #{$left}: auto;
  top: 36px;
}
#fms_pan_zoom_zoomin {
  background-position: -152px -223px;
  height: 44px;
  #{$left}: 0;
  top: 0;
}
#fms_pan_zoom_zoomout {
  background-position: -152px -259px;
  height: 44px;
  #{$left}: 0;
  top: 44px;
}

//hide pins, show old reports etc
#sub_map_links {
  position: absolute;
  #{$left}: 0;
  #{$right}: 0;
  bottom: 0;
  background:#333;
  background:rgba(0, 0, 0, 0.7);
  margin:0;
  a {
    @include inline-block;
    font-size:0.6875em;
    color:#fff;
    padding: flip(0.6em 3em 0.5em 1em, 0.6em 1em 0.5em 3em);
    background-repeat:no-repeat;
    &#hide_pins_link {
      background-image:url($image-sprite);
      background-position: flip(right, -341px) -3976px;
    }
    &#all_pins_link {
      background-image:url($image-sprite);
      background-position: flip(right, -337px) -4022px;
    }
    &#map_permalink {
      background-image:url($image-sprite);
      background-position: flip(right, -341px) -4070px;
    }
    &.feed {
      background-image:url($image-sprite);
      background-position: flip(right, -341px) -3936px;
    }
    &:hover {
      background-color:#000;
      text-decoration:none;
    }
  }
}

#mob_sub_map_links {
  position: absolute;
  bottom:0;
  display:table;
  margin:0;
  width:100%;
  background:rgba(0, 0, 0, 0.7);
  a {
    color:#fff;
    width:50%;
    padding:0.5em 0;
    font-size:1em;
    display:table-cell;
    text-align:center;
    &:hover {
      background:#000;
      text-decoration:none;
    }
  }
  &.map_complete {
    height: 100%;
    background: none;
    display: block;
    border-bottom: 4px solid #fff;
    a#try_again {
      position: absolute;
      display: block;
      left: 25%; // along with width of 50%, centres it
      bottom: 0;
      margin-bottom: 6em;
      background: rgba(0, 0, 0, 0.8);
      @include border-radius(0.5em);
    }
    a#mob_ok {
      position: absolute;
      display: block;
      #{$right}: 1em;
      bottom: 0;
      height: 20px;
      padding-top: 30px;
      width: 4em;
      background: #fff url($image-sprite) 12px -4140px no-repeat;
      color: #000;
    }
  }
}

.mobile-map-banner {
  margin:0;
  position: absolute;
  top:0;
  #{$left}: 0;
  #{$right}: 0;
  font-size:0.75em;
  background:rgba(0, 0, 0, 0.7);
  padding:0.75em 30px;
  a {
    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
    font: {
      weight:normal;
      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;
}
.olControlPermalink {
    bottom: 3px !important;
    #{$right}: 3px;
}

/* 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;
    }
    img.pin {
        z-index: 100;
        background-color: inherit;
    }
    a img.pin {
        cursor: pointer;
        cursor: hand;
    }
}

// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar)
a.rap-notes-trigger,
a:hover.rap-notes-trigger {
  display:block;
  width:90%;
  padding-#{$left}: 5%;
  padding-#{$right}: 5%;
}
.rap-notes {
  margin:1em 0;
}


/* Reporting a problem bits */

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

.description_tips {
  @include clearfix;

  h4 {
    margin: 0.5em 0;
  }

  ul {
    width: 49%;
    margin: 0;
    float: $left;
    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 {
    float: $right;
    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;
}

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


table.nicetable {
  width:100%;
  margin-bottom:2em;
  thead {
    border-bottom:0.25em solid #ccc;
    th {
      font-size:0.75em;
    }
  }
  tr {
    &.a {
      background:#f6f6f6;
    }
    &.gone {
        color: #666666;
        background-color: #cccccc;
    }
    &:hover {
      background:#FFF5CC;
      cursor:pointer;
    }
    td {
      padding:0.25em;
      a {
        &:hover {
          text-decoration:none;
        }
      }
    }
  }
  .title {
    text-align: $left;
  }
  .data {
    width:12%;
  }
}

.promo {
  margin: 0 -1em 1em;
  color: $primary_text;
  background: $primary;
  padding:1em;
  overflow:hidden;
  position: relative;
  .close-promo {
    position:absolute;
    top:0.5em;
    #{$right}: 0.5em;
    display:block;
    width:16px;
    height:16px;
    text-indent:-999999px;
    background:url($image-sprite) -341px -263px no-repeat;
    @include border-radius(4px);
    &:hover {
      background:#222 url($image-sprite) -341px -223px no-repeat;
    }
  }
}

.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;
      family: $meta-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;
    }
    div {
      display:table;
      width:100%;
      background:#fff;
      border:1px solid $primary_b;
      input#pc {
        display:table-cell;
        margin:0;
        padding:0.25em 2%;
        width:86%;
        border:none;
        background:none;
        line-height:1.5em;
      }
      input#sub {
        display:table-cell;
        border:none;
        padding:0;
        margin:0;
        width:14%;
        height:35px;
        background:#000;
        color:#fff;
        text-transform:uppercase;
        @include border-radius(0);
        &:hover {
          background:#333;
        }
      }
    }
  }
  a#geolocate_link {
    @include inline-block;
    vertical-align:top;
    background:#1a1a1a;
    color:#C8C8C8;
    padding:0.5em;
    font: {
      family: $meta-font;
      size:0.8125em;
    }
    @include border-radius(0 0 0.25em 0.25em);
    &:hover {
      text-decoration:none;
      background:#2a2a2a;
    }
  }
}

#front-howto {
  #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;
        weight:bold;
      }
      big {
        display:block;
        margin-bottom:0.5em;
        font-size:1.5385em;
      }
    }
  }
}

#alerts {
    ul {
        margin-bottom: 1em;
    }
    li {
        padding: 0em;
        margin-bottom: 0.5em;
    }
    .a {
        background: #f6f6f6;
    }
    img[width="16"] {
        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
    }
}

.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);
  }

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

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

.radio-segmented-control {
  overflow: auto; // clear floats (if browser doesn't support flexbox)
  display: flex; // fancy full-width buttons for browsers that support flexbox

  input {
    position: absolute;
    left: -999px;
  }

  label {
    display: block;
    margin: 0;
    padding: 0.75em 1.5em;
    text-align: center;
    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
    border: 1px solid #ddd;
    border-right-width: 0; // avoid double border between items
    font-weight: bold;
    float: left; // float fallback for browsers that don't support flexbox
    flex: 1 0 auto;

    &:hover, &:focus {
      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
    }
  }

  input:checked + label {
    color: $primary_text;
    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: none; // in favour of the realistic coloured border on the selected item
  }

  input:first-child + label {
    border-radius: 0.25em 0 0 0.25em;
  }

  label:last-child {
    border-radius: 0 0.25em 0.25em 0;
    border-right-width: 1px; // reinstate border on last item
  }
}

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


@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 {
    display: none !important;
  }

  #map_box {
    position: static !important;
    height: 256px !important;
    width: auto !important;
    background: #f1eee9 !important; // cream colour to match OSM image
  }

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

@import "_admin";
@import "_fixedthead";
@import "_dropzone";