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

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

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:0 0 0 2.5em;
    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:#ccc;
      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 0;
  }
}

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%;
  max-width: 95%;
}
.ie7 {
    select, input, textarea {
        max-width: none;
    }
}

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

// links
a,
a:visited {
  text-decoration:none;
  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;
  }
}

// wrap anything inside the form in a fieldset to give
// us the right spacing
fieldset {
  margin: 1em;
}

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%;
    }
    // In order to work around the IE7 specific issue of inheriting left margins
    // http://techblog.willshouse.com/2009/07/12/ie6ie7-form-element-margin-inheritance-bug/
    fieldset > input[type=text],
    fieldset > input[type=password],
    fieldset > input[type=email],
    fieldset > textarea {
        margin-left: -1em;
    }
}

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: 0 2em 0 1em;
    font-weight: normal;
  }
}

// grey background, full width box
.form-box {
  margin: 0 -2em 0.25em -2em;
  background:#eeeeee;
  padding:1em 2em 1em 2em;
  >input[type=text] {
    margin-bottom:1em;
  }
  .title {
    font-size:1.25em;
    margin:0.5em 0;
  }
  h5 {
    margin:0 0 1em;
    font: {
      size:1.125em;
      weight:normal;
    }
    strong {
      font-size:2em;
      margin-right:0.25em;
    }
  }
}
// IE6 doesn't extend the grey box back with the above negative margins, and
// the password box falls off screen for some reason. Just have boring margins,
// it looks okay.
.ie6 .form-box {
    margin: 0 0 0.25em 0;
    padding: 1em;
}
// Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
.ie7 .form-box {
    width: 100%;
    > input[type=text] {
        margin-left: 2em;
    }
}

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

// 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 background(linear-gradient(#000, #222 10%, #222 90%, #000));
  .container {
    min-height:4em;
  }
}
#site-logo{
  display: block;
  width: 175px;
  height: 40px;
  top: 0.4em;
  background: url('data:image/png;base64,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') no-repeat;
  text-indent: -999999px;
  position: absolute;
  z-index:2;
}
.ie6 #site-logo {
  background: url('/cobrands/fixmystreet/images/ie_logo.gif') 0 -5px no-repeat;
}
.ie7 #site-logo {
  background: url($image-sprite) -3px -3px no-repeat;
}

// this is a skip to nav for mobile users only
#nav-link {
  width: 50px;
  height: 48px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwCAMAAABkKdmIAAAACW9GRnMAAAAFAAADlACdjNY6AAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAABEVBMVEUAAAAiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsJAAAAABPQAAAAAAlHgBnVAAAAACSdwAAAAAAAAAaFQAAAAAAAAAAAAAAAACRdgCqigAAAAAAAABHOgDCnwAAAACriwCAaAApIQDOqABIOwCgggBqVwB8ZQDVrgCwkADjuQCafgDftgDetQCqigDrwADHogDGoQDFoAD1yADzxgDyxQDwxAD/0AD///+ZbHkYAAAAWXRSTlMAAAECAwQFBgkLDA0OEBESExQVFxgeHyEkJSkqMTI2Oj0/Q0RHSEpOT1FSVVtmZmxsdX6Kj5ebnp+goaenqKmru7y9vsTY3uPk5OTl5+zs7e7x9PX3+Pr7/fI8qpUAAAABYktHRFoDu6WiAAABMklEQVRIx+3T2VLCMBSA4ZjU1hhpUKgWlaq0VSuutYg7IJuIogKKvv+LSM2AelNOuHCGGf77b7KcBKGwT2AzYej/CIYSPCBEhRKVCILVBJQkVCwIS0NJmglCYhkoycSIINyBEocPiAsl7ljkeypTMhHko9tpD+t0QavUSjcX+bDzy9vSPYj0zg523LDtvaNCD3aWh11ziXMeT64fP0OPX1xbmCVEXdyqwm/sNEWJMr96LXHJb4fLczR1IjWXx83kyv6r3CiLG05VdvpXd9IP5n36XyaStGCiNSS6XYaRsq0LgpnlNyGi6VsMC6IZXlAfLeqBZ2iCIELNbFBpvLQjempUgqxJxb76KdT0/Fw+spzvmVRB6McYlu24ETm2ZfwW/b1pTOeR6Uwj6E8YkxFhjMbuC8zPYpEN6mT7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwHHW0eAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wNS0wMlQxOTo0Njo1MSswMTowMG0oDMQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC') no-repeat;
  display: block;
  text-indent: -999999px;
  position: absolute;
  right:2em;
  top:-2px;
  &:hover {
    top:2px;
  }
}


#main-nav{
  ul{
    @include list-reset-soft;
    li{
      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-color: #ccc;
      }
    }
    &#mysoc-menu{
      li {
        a {
          color: $primary_text;
          background: $primary;
          &#mysoc-logo {
            background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAACW9GRnMAAADwAAAAJgAMZizzAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAANlBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL///90WH2CAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAAAAFiS0dEEeK1PboAAAGqSURBVFjD7ZbNjtwgEAY/oIE2YKj3f9ocPDOZ3eN6FCUKdWsJQ+H+saXNZrPZbDabzf/GovwdIhH8LUzHn/PqI32Jcw1v0fjidQf30EZPqmMURXeT5F5kbYwqSQbeWpAU6xg961pT+mgm+WR4Ke6SzG9JwQRWB6iaTClCzQBLknT0AibZAnCBSx2ALACGQ5JOznsmq1TA82LKIalC6Jwh5seaMGdUWKxiJQpclWVqLNlJsxThUIB6z8Qft3FQgEODrs4qUuj9qoljpAr2euKkmxVIjzrpTBUI90xMGgzJQGrMAEUGrGKQn6c7/HbngT1MMqRO1wdNDA6WpNgW5Ld38s1kuLt7fPbO5Lg7Z76ZaLJoV3WAa6wsxbmiyrMMruyMVxc3SaqvAv+YSQWS1Fs9oAi8jQKmsGB4zwJXgdO9VWnAkaUAHJ81CTAkLYAm5ZbB/QhSmm9d7Ff7Splr5jaI90zMgpQsScHsGmRFUsheH6O1jecR5m5BZlFSzF5NkpJ7lMJ85etDlPWjHdMJ6aMiFdYPdgzw6Q90Yvwo2+fM+3dps9lsNpvNP8gvi7UYry9B6TcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDAcdbR4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwbSgMxAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
            background-repeat:no-repeat;
            text-indent:-999999px;
          }
        }
      }
    }
  }
}
.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo {
  background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat;
}
.ie7 #main-nav ul#mysoc-menu li a#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;
  caption-side:bottom;
}
// this is the user's logged in details or the login link etc
#user-meta {
  p {
    position: relative;
    color: $primary_text;
    background: $primary;
    padding:1em 6em 1em 1em;
    a {
      position: absolute;
      right:1em;
      @include inline-block;
      text-transform:uppercase;
      font-size:0.75em;
      background:#333;
      padding:0.25em 0.75em;
      color:#fff;
      @include border-radius(0.25em);
    }
  }
}


// #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 {
  @extend .full-width;
  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 2em;
        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:url($image-sprite);
          background-position:center -2716px;
        }
        &.hover {
          background-image:url($image-sprite);
          background-position:center -2064px;
        }
      }
    }
  }
}

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

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

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

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

#footer-mobileapps {
  @extend .full-width;
  padding:1em;
  h4 {
    margin:0;
  }
  ul {
    @include list-reset-soft;
    li {
      border-bottom:1px solid #AFAFAF;
      &:last-child {
        border-bottom:none;
      }
      a {
        display:block;
        padding:0.5em 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 0;
      }
      p {
        font-size:0.75em;
      }
    }
  }
}



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

.button-right,
.button-left,
a.button-right,
a.button-left {
  @include inline-block;
  cursor:pointer;
  font-size: 1em;
  line-height: 1;
  margin:0;
  border:1px solid #999;  
  color:#333;
  background: #eee;
  @include border-radius(4px);
  &:hover{
    color:#fff;
    background:#777;
    text-decoration: none;
    border:1px solid #666;  
  }
}
.button-right,
a.button-right,
:hover.button-right,
a:hover.button-right {
  padding:1em 3em 1em 1em;
  background-image: url($image-sprite);
  background-repeat:no-repeat;
  background-position:right -686px;
}

.button-left,
a.button-left,
:hover.button-left,
a:hover.button-left {
  padding:1em 1em 1em 3em;
  background-image: url($image-sprite);
  background-repeat:no-repeat;
  background-position:-18px -802px;
}

.big-green-banner {
  position: relative;
  z-index:1000;
  top:-1.75em;
  background: $col_click_map;
  color: #fff;
  padding:1em;
  text: {
    transform:uppercase;
    align:center;
  }
  font-size:0.875em;
  &:before {
    content: "";
    left:-0.5em;
    top:0;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-bottom: 0.5em solid $col_click_map_dark;
  }
}

.banner {
  position: relative;
  z-index:1100;
  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;
  }
}

.issue-list{
  margin: 0 0 1em 0;
  padding: 0;
  border-bottom: 0.25em solid $primary;
  li{
    list-style: none;
    background: #f6f6f6;
    margin: 0.25em 0 0 0;
    padding: 0.5em 1em;
    display:block;
    .update-wrap {
      display:table;
      width:100%;
      .update-text,
      .update-img {
        display:table-cell;
        vertical-align:top;
        p {
          margin-bottom: 0.5em;
        }
      }
      .update-img {
        text-align:right;
        img {
          margin:-0.5em -1em 0 0.5em;
          height:auto;
        }
      }
    }
  }
}
//display:table fixes
.ie7, .ie7 {
  .issue-list li .update-wrap {
    .update-text {
      float:left;
      width:19em;
    }
    .update-img {
      float:right;
    }
  }
}

.issue-list-a {
  margin: 0 0 1em 0;
  padding: 0;
  border-bottom: 0.25em solid $primary;
  li {
    list-style: none;
    margin:0;
    padding:0;
      margin: 0.25em 0 0 0;
      /* see note below about this */
      display:table;
      background: #f6f6f6;
      color:#222222;
      width:100%;
      &:hover {
        text-decoration:none;
        color:#222222;
        background:#e6e6e6;
      }
      a {
          color:#222222;
      }
      a:hover {
          color:#222222;
          background:#e6e6e6;
          text-decoration: none;
      }
      .text {
        /* this is and the display:table above are required otherwise
           on iphone the rows end up being slightly wider than the screen */
        display: table-cell;
        width: 100%;
        vertical-align:top;
        padding: 0px 0px 0px 1em;
        .img {
          width: 90px;
          float: right;
          height:auto;
        }
        h4 {
          padding-right: 1em;
          padding-top: 0.25em;
          margin:0;
        }
        small {
          color:#666;
          display: block;
          padding-right: 1em;
          padding-top: 0.25em;
          padding-bottom: 0.25em;
        }
      }
    >p {
      margin: 0.25em 0 0 0;
      padding: 0.5em 1em;
      background: #f6f6f6;
    }
  }
}
.list-a {
  @extend .issue-list-a;
  a {
    padding:0.5em 1em;
    font-weight:bold;
  }
}
//display:table fixes
.ie6, .ie7 {
  .issue-list-a {
    overflow:hidden;
    li {
      clear:both;
      width:100%;
      display:block;
      overflow:hidden;
      .text {
        float:left;
      }
    }
  }
}
.ie6 .issue-list-a li a {
  height:5.5em;
  .img {
    height:60px;
  }
}

// fancybox gallery images have a magnifying glass in the corner
.update-img {
  a {
    @include inline-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;
    }
  }
}
//bit of a hack - as we can't use em's, push the span out to the right
//by how much it would be if the user did not resize the text
.issue-list li .update-wrap .update-img a span {
  right:-16px;
  top:-8px;
}

.problem-header {
  margin-bottom:1em;
}
.problem-header .update-img {
    float: right;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
}

// map stuff
#map_box{
  @extend .full-width;
  background: #333;
  height: 29em;
  margin-bottom: 1em;
  overflow: hidden;
  position: relative;
  #map {
    width:100%;
    height:100%;
  }
}

// OpenLayers fix for navigation being top right
// Left and right so that zoom can be left, pan right.
#fms_pan_zoom {
  right: 0.5em !important;
  top: 2.75em !important;
  left: 0.5em !important;
}
// The left and right of the above causes the navigation to move off-screen left in IE6.
// XXX Need to check IE7
.ie6 #fms_pan_zoom {
  left: auto !important;
}

// 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 !important;
  height:36px !important;
  text-indent:-999999px;
  opacity:0.85;
  background:url($image-sprite) no-repeat;
  &:hover {
    opacity:1;
  }
  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 !important;
  left: auto !important;
  top:0 !important;
}
#fms_pan_zoom_pandown {
  background-position:-42px -282px;
  right:30px !important;
  left: auto !important;
  top:72px !important;
}
#fms_pan_zoom_panleft {
  background-position:-12px -252px;
  width:48px !important;
  right:48px !important;
  left: auto !important;
  top:36px !important;
}
#fms_pan_zoom_panright {
  background-position:-60px -252px;
  width:48px !important;
  right:0 !important;
  left: auto !important;
  top:36px !important;
}
#fms_pan_zoom_zoomin {
  background-position:-152px -223px;
  height:44px !important;
  left:0 !important;
  top:0 !important;
}
#fms_pan_zoom_zoomout {
  background-position:-152px -259px;
  height:44px !important;
  left:0 !important;
  top:44px !important;
}

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

.ie6 #sub_map_links a {
  &#hide_pins_link {
    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
    background-position: right 1px;
  }
  &#all_pins_link {
    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
    background-position: right -45px;
  }
  &#map_permalink {
    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
    background-position: right -93px;
  }
}

#mob_sub_map_links {
  position: absolute;
  z-index:1100;
  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%;
      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;
}

//report a problem tabs
#problems-nav {
  padding:0 1em;
  overflow:hidden;
  border-bottom:0.25em solid #333;
  ul {
    @include list-reset-soft;
    display:table;
    width:100%;
    li {
      display:table-cell;
      border-right:0.25em solid #fff;
      &:last-child {
        border-right:none;
      }
      a {
        display:block;
        background:#e2e2e2;
        color:#333;
        padding:1em;
        text: {
          transform:uppercase;
          align:center;
        }
        &:hover {
          text-decoration:none;
          background:#e6e6e6;
        }
        &.active {
          background:#333;
          color:#fff;
        }
      }
    }
  }
}

//display:table fixes
.ie6, .ie7 {
  #problems-nav {
    clear:both;
    margin:0;
    padding:0;
    ul li {
      float:left;
    }
  }
}


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 {
  @extend .full-width;
  color: $primary_text;
  background: $primary;
  padding:1em;
  margin-bottom: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 {
  @extend .full-width;
  background:#ff0000;
  padding:1em;
  margin-bottom: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 {
    @extend .full-width;
    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;
      }
    }
  }
}

#front-recently {
  .issue-list-a {
    border-bottom:none;
  }
}

#alerts {
    ul {
        margin-bottom: 1em;
    }
    li {
        padding: 0em;
        margin-bottom: 0.5em;
    }
    .a {
        background: #f6f6f6;
    }
    img[width="16"] {
        float: right;
    }
}