@import "compass";
@import "_mixins";

$image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;

//hacks for desk/mob only stuff
.desk-only {
    display: block;
}
.mob-only {
    display: none;
}

body {
    color: $base_fg;
    background: $base_bg;
}

/* The OpenLayers popup sets a background image with a white background without setting the CSS colours correctly. */
#popup {
    color: #000;
}

h1 {
    margin-top: 0;
}

// Page wrapper and header bits follow

.container{
  margin: 0 auto;
  padding: 0em;
  width: 60em;
  position: relative;
}

//z-index stack order gets reset to 0 in ie6/7 if you position anything,
//so to fix things we give it a high value (don't ask me why)
//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
//this affects #site-logo
.ie6, .ie7 {
  .container {
    z-index:100;
  }
}

.wrapper{
  display: table;
  caption-side: top;
  width: 100%;
  .table-cell {
    display:table-cell;
  }
}

//pad the top of the wrapper to allow space for the menu to fit in
//when its positioned absolute below
.ie6, .ie7 {
  .wrapper {
    padding-top:4em;
  }
}

.nav-wrapper {
  display: table-caption;
  .nav-wrapper-2 {
    width: 100%;
    min-height: 4em;
    position: absolute;
    border-top: 4px solid $primary;
    border-width: 4px 0 0 0;
    z-index: 2;
  }
}

//position absolute the menu as ie doesn't like display:table
.ie6, .ie7 {
  .nav-wrapper {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    .nav-wrapper-2 {
      // position static as well so we fix lots of the z-index issues
      position:static;
    }
  }
}

// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop
#site-header {
  height: auto;
  background: none;
  border-top: 0px;
  // margin-top: 4px; <-- With this we compensate for 4px of content due to
  // .nav-wrapper-2's border-top, but misaligns e.g. FAQ page
  .container {
    position: static;//reset position so the nav links become clickable
  }
}
#site-logo {
  top: 0.9em;
  position: absolute;
  z-index: 3;
}
.ie6, .ie7 {
  #site-header {
    height:3em;
    .container {
      //ie broken z-index bug: the site-logo won't appear if we don't do this
      //doesn't seem to render the nav link unclickable like in other browsers
      position: relative;
    }
  }
  #site-logo {
    position: absolute;
    top:-3.25em;
  }
}
#nav-link {
  left:-999999px;
}
#main-nav{
  margin: 0 auto;
  padding: 0em;
  width: 60em;
  ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    float:right;
    li{
      list-style: none;
      display: inline;
      margin: 0px;
      padding: 0px;
      float:left;
      a,
      span {
        display: block;
        color: $nav_fg;
        background: none;
        border-bottom: none;
      }
      &#top-nav-privacy {
        display: none;
      }
    }
    &#main-menu{
      li{
        a, span{
          padding: 0.75em;
          font-size: 0.9em;
        }
        a:hover{
          background: $nav_fg_hover;
        }
        a.report-a-problem-btn {
          color: $primary_text;
          background: $primary;
          padding:0.25em;
          margin:0.5em;
          @include border-radius(0.25em);
          &:hover {
            background:$primary/1.1;
          }
        }
        span {
          color:$primary;
        }
      }
    }
    &#mysoc-menu{
      padding: 0em 0.5em;
      margin-left: 0.25em;
      background: $primary;
      @include border-radius(0 0 0.375em 0.375em);
      li{
        a{
          background:none;
          color: $primary_text;
          text-transform: uppercase;
          font-size: 0.6875em;
          padding: 1.3em 0.7em 1em 0.7em;
          &#mysoc-logo {
            width:84px;
            height:16px;
            background-size: 100px auto;
            background-position: 0px 10px;
            opacity: 0.8;
            &:hover {
              opacity: 1;
            }
          }
          &:hover{
            color:#fff;
          }
        }
      }
    }
  }
}
.ie8 #main-nav ul#mysoc-menu li a#mysoc-logo {
  width: 100px;
}
.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo {
    background-position: -260px -43px;
}

// .content Is the white box

// The narrow single column box
.content {
  width: 27em;
  margin: 3em 0.5em -1em;
  padding: 1em 1em 3em;
  background: #fff;
  color: #222;
  @include box-shadow(0 0 10px rgba(0,0,0,0.5));
}
.ie6, .ie7, .ie8  {
  .content {
    // If no box-shadow, just want a boring black border to stand it out from the map.
    border: 1px solid #666;
    //take off margins so we line up properly
    margin: 0 0.5em;
  }
}

// map page - has fixed header and different styling
body.mappage {
  .container {
    width: auto;
  }

  .content {
    float:left;
    padding: 1em 1em 10em;
    margin: 0;
  }

  #site-logo {
    left: 12px;
  }

  #main-nav {
    width: auto;
    margin-right: 1em;
  }

  #main-nav ul#main-menu li a,
  #main-nav ul#main-menu li span {
    padding: 1.4em 0.75em 1.35em 0.75em;
  }

  #main-nav ul#main-menu li a.report-a-problem-btn {
    padding: 0.5em;
    margin:0.9em 0.25em 0.85em 0.25em;
  }

  .nav-wrapper{
    .nav-wrapper-2{
      position: fixed;
      background: $map_nav_bg;
    }
  }

  #site-logo{
    position: fixed;
  }

  #user-meta {
    max-width: none;
    p {
      display: block;
      height: auto;
      width: 22.2em; // 27em (.content width) - 2em (.content padding) - 6em - 0.8em
      padding: 0.5em 6em 0.5em 0.8em;
      top: 0;
      left: 0;
      z-index: 1;
      box-shadow: none;
      background: #FCEA9A;
      border-bottom: 1px solid #ffd000;

      a {
        // move the "Sign out" link in and down a bit, because of extra padding on parent
        top: 0.8em;
        right: 0.8em;
      }
    }

    & + .container .content {
      padding-top: 3.5em; // make room for user menu!
    }
  }

  .banner {
    p {
      top: -2.1em; // a few pixels lower than default
    }
  }
}

.ie6, .ie7 {
  body.mappage {
    // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove.
    .container {
      float: left;
      width: 27em;
      margin-left: 0.7em;
    }
    .nav-wrapper{
      z-index:1;
      .nav-wrapper-2 {
        position:static;
      }
    }
    #site-logo {
      position: absolute;
    }
    #user-meta {
      margin-left: 2em;
    }
  }
}
//ie8 needs different stuff on .nav-wrapper so we
//have to define all the rest of it again as this resets
//the z-index base yet again :S
.ie8 {
  body.mappage {
    .nav-wrapper{
      position: relative;
      z-index:0;
      .nav-wrapper-2 {
        position:static;
      }
    }
    #site-logo {
      position: absolute;
    }
  }
}

#skip-this-step {
  display: block;
  color: inherit;
  //margin: 0 -15px;
  padding: 16px;
  font-size: 18px;
  line-height: 20px;
  border-bottom: 1px solid #E7E1C0;
  background: #FDF4C5;

  em {
    font-style: normal;
    text-decoration: underline;
    color: #0BA7D1;
  }

  &:hover {
    text-decoration: none;
  }

  html.js & {
    // If javascript is enabled, hide the skip link off-screen,
    // but keep it visible for screen readers.
    position: absolute;
    top: -999px;

    &:focus {
      // And show it again if it receives focus (eg: via tab key)
      position: static;
    }
  }
}


// full width page
body.fullwidthpage {
  .content {
    width: auto;
  }
}

body.twothirdswidthpage,
body.fullwidthpage {
    .container {
        .content {
            box-shadow: none;
            padding: 1em 1em 0em;
            margin-bottom: 0em;
            footer {
                margin-top: 0em;
                .tablewrapper {
                    padding-top: 2em;
                    padding-bottom: 3em;
                    background: $base_bg;
                    color: $base_fg;
                    a:link,
                    a:visited {
                        color: $primary;
                    }
                    #footer-mobileapps {
                        a {
                            padding-left: 0.5em;
                        }
                    }
                    h4 {
                        font-weight: normal;
                        padding-bottom: 0.5em;
                    }
                }

                a.platform-logo {
                    vertical-align: baseline;
                    display: inline-block;
                    background-position: top left;
                    background-repeat: no-repeat;
                    background-size: auto 1.5em;
                    background-image: url(/cobrands/fixmystreet/images/fms-platform-logo.svg);
                    text-indent: -1000%;
                    height: 1.7em;
                    width: 16em;
                    padding-right: 0.25em;
                }
            }
        }
    }

}
.ie6, .ie7, .ie8  {
  body.twothirdswidthpage,
  body.fullwidthpage {
    .content {
      border: 0px;
    }
  }
}
.ie8 {
  body.twothirdswidthpage,
  body.fullwidthpage {
    .container .content footer a.platform-logo {
      background: none;
      text-indent: 0px;
    }
  }
}

// two thirds width page, also has option for a sidebar which can be sticky or not
body.twothirdswidthpage {
  .container {
    // This used to be on all containers, but there was a bug in Chrome, so now
    // it's just here so that the sidebar links are still clickable with their
    // negative z-index.
    z-index: 1;
  }
  .content {
    width:40em;
    position: relative;
    aside {
      background:#eee;
      position:absolute;
      left:42em;
      top:0;
      z-index: -1;
      width:13em;
      padding:1em;
      @include box-shadow(0px 0px 6px 1px #000);
      h2 {
        margin-top: 0;
      }
      img {
        margin-bottom: 0.25em;
      }
    }
    .sticky-sidebar {
      position: absolute;
      left:42em;
      z-index: -1;
      aside {
        position: fixed;
        top:7em;
        left:auto;
      }
    }
  }
}
//as ie6 doesn't like 'fixed' we will make it absolute again
.ie6 body.twothirdswidthpage .content .sticky-sidebar {
  position:static;
  aside {
    position:absolute;
    left:42em;
    top:0;
  }
}


// table wrapper - this enables anything to become a
// table with div children as table cells
.tablewrapper {
  display:table;
  width:100%;
  padding:0 0 1em 0;
  >div {
    display:table-cell;
    width:50%;
  }
  .full-width {
    width:auto;
    margin:0;
  }
}

//fix table to be a block for ie, float the children
.ie6, .ie7 {
  .tablewrapper {
    display:block;
    div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div'
      width:48%;
      display:block;
      float: left;
      border:none !important;
    }
  }
}

// adds border to the top and goes full width
.bordered {
  margin:0 -1em;
  padding:0 1em;
  width:auto;
  border-top:0.25em solid $primary;
}

//footer blocks
#footer-mobileapps {
  border-right:1em solid transparent;
  background:none;
  padding:0;
  @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
  h2 {
    color:#222;
    margin-top:0;
  }
  p {
	  border-bottom:none;
  }
}
.ie6, .ie7 {
  #footer-mobileapps {
      margin:0 0.5em;
      margin-right:2%;
  }
}

#footer-help {
  border-left:1em solid transparent;
  ul {
    display:table;
    li {
      display:table-cell;
      border-bottom:none;
      &:last-child {
        border-left:1.25em solid transparent;
      }
    }
  }
}
.ie6, .ie7 {
  #footer-help {
    margin-left:2%;
    ul {
      width:100%;
      li {
        float:left;
        width:45%
      }
    }
  }
}

// map box (fallback for non js really as most users
// will have fullscreen map)
#map_box{
  position: absolute;
  height: 29em;
  width: 29em;
  right: 1em;
  top: 3em;
  z-index:1;
}

// 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 {
  opacity: 0.85;
  &:hover {
    opacity: 1;
  }
}

// push zoom back over to right
#fms_pan_zoom_zoomin {
  left:auto !important;
  right:30px;
  top:130px !important;
}
#fms_pan_zoom_zoomout {
  left:auto !important;
  right:30px;
  top:174px !important;
}

.olControlAttribution {
  bottom:0.5em !important;
  left: auto !important;
}

#sub_map_links {
  left:auto;
  bottom:auto;
  bottom:2em;
  #map_links_toggle {
    display:block;
    cursor: pointer;
    position:absolute;
    left:-1em;
    width:1em;
    height:100%;
    background:#000 url($image-sprite) right -4119px no-repeat;
    @include border-radius(0.25em 0 0 0.25em);
    &:hover {
      left:-1.5em;
      //use border so we don't have to redefine the background-position
      border-right:0.5em solid #000;
    }
    &.closed {
      background-position: right -4159px;
    }
  }
}
.ie6 #sub_map_links #map_links_toggle {
  height:1.75em;
  background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
  &.closed {
    background-position: center -183px;
  }
}

// log in bit, pokes above the .content div
#user-meta{
  display:block;
  position: relative;
  max-width: 60em;
  margin: 0 auto;
  p {
    @include inline-block;
    position: absolute;
    top: 1em;
    left: 1em;
    height:2em;
    padding:0.25em 6em 0.5em 0.5em;
    @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
    a {
      top:0.5em;
      right:0.5em;
      font-size:0.6875em;
      padding:0.5em 0.75em;
      line-height:1em;
      &:hover {
        text-decoration:none;
        background:#444;
      }
    }
  }
}
.ie6, .ie7 {
  #user-meta {
    z-index:1;
    p {
      top:-2em;
    }
  }
}
.ie6 #user-meta {
  width: 60em; //ie6 doesn't like max-width
}


// Wraps around #key-tools box - sticks to the bottom of the screen on desktop
.shadow-wrap {
  position:fixed;
  z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it
  bottom: 0;
  width: 29em;
  overflow: hidden;
  padding-top: 3em;
  ul#key-tools {
    border-top: 0.25em solid $primary;
    margin: 0;
    @include box-shadow(-0em 0px 1em 1em #fff);
    li {
      border:none;
      a, input[type=submit] {
        font-size: 0.75em;
        color:#666;
        padding: 0.5em 1.5em 0.5em 0;
        text-transform:none;
        &.abuse {
          background-image:url($image-sprite);
          background-position:right -2935px;
        }
        &.feed {
          background-image:url($image-sprite);
          background-position:right -3074px;
        }
        &.share {
          min-width: 5em;
          background-image: url(/cobrands/fixmystreet/images/share.png);
          background-position: 90% 50%;
        }
        &.chevron {
          background-image:url($image-sprite);
          background-position:right -3225px;
        }
        &.hover {
          background-image:url($image-sprite);
          background-position:right -1876px;
        }
      }
    }
    &.singleton {
      li {
        text-align:right;
        a {
          padding-right:3em;
        }
      }
    }
  }
  &.static {
    padding:0 0 1em 0;
    position: static;
  }
}
// The padding is for the fading out when it's fixed positioned, which it isn't in IE6.
.ie6 .shadow-wrap {
  padding-top: 0;
}

// If JS is disabled, these are still CSS positioned, so don't want behind shining through.
#report-share, #report-updates-data {
    background-color: #fff;
}
// Prevent gap in non-JS, and looks better with JS, due to some padding/margin effect.
#report-updates-data fieldset {
    margin-bottom: 0;
}

// pokes over the RHS with a little triangle
.big-green-banner {
  top:auto;
  right:-1.25em;
  margin-left:-2em;
  font-size:1.375em;
  padding:1em 3em 1em 1em;
  background: $col_click_map url($image-sprite) right -2188px no-repeat;
  &:before {
    right:0;
    left:auto;
    top:-0.5em;
    position: absolute;
    border-top: 0.5em solid transparent;
    border-left: 0.5em solid $col_click_map_dark;
    border-bottom:none;
  }
  span {
    display: block;
    font-size: 80%;
    padding-top: 0.5em;
  }
}
.ie6 .big-green-banner {
  background: $col_click_map url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
}

.banner {
  // state banners
  p {
    top:-2.25em;
    padding:1em;
    &:before {
      left:-0.75em;
      border-left: 0.75em solid transparent;
      border-bottom: 0.75em solid #888;
    }
    &#fixed {
      padding-top:5em;
      background-image:url($image-sprite);
      background-position:-324px -326px;
      background-repeat:no-repeat;
      &:before {
        border-bottom: 0.75em solid $col_fixed_label_dark;
      }
    }
    &#closed {
      padding-top:5em;
      background-image:url(/cobrands/fixmystreet/images/sprite.png);
      background-position:-318px -326px;
      background-repeat:no-repeat;
      &:before {
        border-bottom: 0.75em solid #666;
      }
    }
  }
}
.ie6 .banner p {
  top:-1.5em;
  &#fixed {
    background-image:url(/cobrands/fixmystreet/images/ie_fixed.gif);
    background-position:center 0.75em;
  }
}


// for pulling elements fullwidth regardless
// of .contents' padding
.full-width{
  margin: 0 0 0em -1em;
  width: 29em;
}

/*FORMS*/
input[type=text],
input[type=password],
input[type=email],
textarea{
    max-width: 27em;
}

/* form errors */
div.form-error,
p.form-error {
  display:block;
}

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

#report-a-problem-sidebar {
    position: absolute;
    left: 29em;
    width: 15em;
    @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
}

// Report a problem sidebar notes
#report-a-problem-sidebar {
  top:5em;
  div {
    padding:1em;
    font-size:0.75em;
    background:#eeeeee;
  }
  .sidebar-notes {
    background:#333333;
    color:#ffffff;
  }
}
.ie6, .ie7 {
  #report-a-problem-sidebar {
    left: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
    z-index: 1;
  }
}

.no-js #report-a-problem-sidebar {
  position: static;
  width: auto;
  @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
  .sidebar-tips,
  .sidebar-notes {
    font-size:1em;
  }
}

// More general notes
.general-notes {
    font-size: 0.75em;
}

// Frontpage

body.frontpage {
  .table-cell {
    .content {
      margin: 1em 0.5em 0;
    }
  }
  .nav-wrapper-2{
    height:6em;
  }
  #site-header{
    height:8em;
  }
  #site-logo{
    top:3em;
    width: 300px;
    height: 60px;
    background: url($image-sprite) -2px -108px no-repeat;
  }
  #user-meta {
    z-index:10;
    p {
      top: -4em;
      left: auto;
      right: 0;
      color:$primary;
      background:none;
      @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
      a {
        background:#fff;
        color:#1a1a1a;
        &:hover {
          background:#ddd;
        }
      }
    }
  }
}
//logo fix
.ie6, .ie7, .ie8 {
  body.frontpage {
    #site-logo {
      position:relative;
      width:60em;
      margin:0 auto;
    }
  }
}
.ie6, .ie7 {
  body.frontpage {
    #site-header {
      height:4em;
    }
    #site-logo {
      top:-1em;
    }
  }
}
.ie6 body.frontpage #site-logo {
  background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat;
}

// big yellow bit full screen width
#front-main {
  color: $primary_text;
  background: $primary;
  margin: 0;
  padding: 1em;
  #front-main-container {
    max-width: 60em;
    margin: 0 auto;
  }
  h2 {
    font-style:normal;
    margin:0;
    color: inherit;
  }
  #postcodeForm {
    color: inherit;
    background:none;
    overflow:hidden;
    padding-bottom: 0;
    margin-right:0.5em;
    label {
      margin:0.5em 0;
    }
    div {
      display:block;
      margin:0 auto;
      width:20em;
      overflow:hidden;
      input#pc {
        display:block;
        float:left;
        padding:0.25em 0.5em;
        height:2em;
        width:17em;
      }
      input#sub {
        display:block;
        float:right;
        width:3em;
        height:2.3em;
        padding-top:0.2em;
      }
    }
  }
  a {
    color: inherit;
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
  a#geolocate_link {
    color: inherit;
    background:none;
    text-decoration: none;
    padding-bottom: 0;
    &:hover {
      text-decoration:underline;
      background:none;
    }
  }
}
.ie7 #front-main {
  #postcodeForm {
    div {
      input#pc {
        height:1.5em;
        width:16em;
      }
    }
  }
}

#front-howto {
  border-right:1em solid transparent;
  #front_stats {
    background:none;
    color: #222;
    border-top:0.25em solid $primary;
    padding-top:1em;
    div {
      big {
        color:$primary;
        font-size:3.2308em;
      }
    }
  }
}
.ie6, .ie7 {
  #front_stats {
    div {
      width:8em;
      float:left;
    }
  }
}

#front-recently {
  border-left:1em solid transparent;
}

#front-howto h2,
#front-recently h2 {
   margin-top:0;
}


.ie6, .ie7 {
  .tablewrapper {
    #front-howto {
      margin-right:2%;
    }
    #front-recently {
      margin-left:2%;
    }
  }
}

// Admin tables

$table_border_color:   #ccc;
$table_heading_bg_col: #595959;
$table_heading_border_col:   #7a7a7a;
$table_heading_col:    #fff;
$table_heading_underline_col: #393939;
$button_col:    #fff;
$button_bg_col: #a1a1a1;  // also search bar (tables)

.admin {
    table {
        width: 100%;
        font-size: 0.9em;
        border: 1px solid $table_border_color;
        border-collapse: collapse;
        margin-bottom: 1em;
        th, td {
            padding: 0.666em 0.5em;
            border: 1px solid $table_border_color;
        }
        th {
            color: white;
            background-color: $table_heading_bg_col;
            border-bottom: 2px solid $table_heading_underline_col;
            border-left: 1px solid $table_heading_border_col;
            border-right: 1px solid $table_heading_border_col;
            a:link, a:visited {
                color: white;
            }
        }
        td.record-id {
            text-align: center;
            font-weight: bold;
        }
        tr.filter-row td {
            display: none; /* TODO: reveal when filtering is implemented */
            padding: 4px 4px 4px 40px;
            background-color: $button_bg_col;
            background-image: url('search-icon-white.png');
            background-position: 14px center;
            background-repeat: no-repeat;
            border-bottom: 2px solid $table_border_color;
        }
        tr.filter-row td input[type=text] {
            background-color: #e1e1e1;
            width: 16em;
            @include border-radius(4px);
            border: none;
            padding: 3px 0.5em;
        }
        tr.is-deleted {
          background-color: #ffdddd;
          td.contact-category {
            text-decoration: line-through;
          }
        }
    }
    .no-bullets {
      margin-left: 0;
      > li {
        list-style: none;
      }
    }
    .admin-box { // for delimiting forms, etc
      border:1px solid #999;
      padding:0.5em 1em;
      margin:1.5em 0;
      h2 { // only really want on first-child
        margin-top: 0;
      }
    }
  .fms-admin-warning, .fms-admin-info, .admin-hint, .admin-offsite-link {
    display: none; // don't display admin-notes unless .show-admin-notes class is present
  }
  &.show-admin-notes {
    .fms-admin-warning, .fms-admin-info, .admin-hint {
      display: block;
    }
    .admin-offsite-link {
      display: inline;
    }
    .fms-admin-warning, .fms-admin-info {
      padding: 1em;
      font-size: 90%;
      border-style: solid;
      border-width: 1px;
      border-left-width: 1em;
      margin-bottom: 1em;
    }
    .fms-admin-warning {
        border-color: #f99;
        background-color: #ffe1e1;
    }
    .fms-admin-info {
        border-color: #9f9;
        background-color: #e1ffe1;
    }
    .admin-open311-only {
      border:1px solid #666;
      padding:1em;
      margin: 1em 0;
    }
    .admin-hint {
      font-size: 80%; // little question marks are small
      cursor: pointer;
      display: block;
      float:left;
      overflow: hidden;
      padding: 0.2em;
      margin-right: 0.666em;
      text-align: center;
      color: #fff;
      font-weight: bold;
      background-color: #f93;
      -moz-border-radius: 0.333em;
      -webkit-border-radius: 0.333em;
      border-radius: 0.333em;
      p {
        display:none;
      }
      &:before { content: "?" }
      &.admin-hint-show {
        font-size: 90%;
        text-align: left;
        display: block;
        float:none;
        margin:1em 0;
        &:before { content: "" }
        background-color: inherit !important;
        p {
          font-weight: normal;
          display: block;
          background-color: #ff9;
          color: #000;
          border-style: solid;
          border-width: 1px;
          border-left-width: 1em;
          border-color: #f93;
          padding:1em;
          margin: 0;
        }
      }
    }
    .admin-offsite-link {
      padding-right: 12px;
      background-image: url(../../i/external-link.png);
      background-position: right top;
      background-repeat: no-repeat;
    }
  }
}


/* MEDIA QUERIES */
@media only screen and (min-width: 48em) and (max-width: 61em) {
  .container {
      width: 100%;
  }

  // Remove central positioning of mainmenu and float right.
  // Left padding is to ensure no overlap of the site-logo
  // Background styling replicates header styling

  #main-nav{
    width: auto;
    float:right;
    padding-left: 180px;
  }

  html #main-nav ul#mysoc-menu li a#mysoc-logo {
    width: 16px;
    // Just the mySociety circle logo
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJ9JREFUeNqsVXlMHFUYf/Pe7O7M7E2Xw6UFWg5LQ1GTosa0IT00wYbGaKoltWnaRGNrjIptiUalXqlJU9RU0fSPHtqCR20pliBpQpAmxQgoLDeLQIEuh2WBndmDnZn3fMvRsqEGVv0mv3lzvPd97/u97wBgmXLUbHvOFZ/cJK1KbTtmiX4F/J+ySzBuDiakeSdWphA3RSAhTX3NaN2znLVwyQkMA/YbzAcwAAIFIBSYELjPYH6Zpf9CwrEMeGS1zhalh2zEBkIq2NCdkDvfyOxCRqHfnnpIWN9caK+5URDX2VJob8zfZsqJyIBKlVzweU7pIMIC3TFHIUAISkSx2GKE2uK8qNK0ODZbVsgKuwllnthp/S4rUZs0vx4th0dHcLp3FCv1VogEL8G9Jz2THx4Tx79+Yh23/oVs4zuBwKx3CuWQ5aHO5VYba7oDDjDj/TJEpSgWJytD0FAP5Dm6PD4ySZmSIUM0+C6DoGdUdkXkwULBC56HJtRJuxFpsu7nsll60CwHQY3D/8PRq1NFQZXg+TP8TwKphhc3GXPS4zWP9tySm07XSZe9MgkLEpCuX5uZZdqQBwEM1nsaStq87V3/xtjGTVzKB29bj0RZkK2s3PvTJ59PnWG2Rm3esTP2mW80gDUByq+CFffJoS+2tkrtTZEoz80R1pVfjrsBEGMGCvWAQ+DsV5MFcLstp0jFqsmH/cCn+qjLMGqLdcvrcOkIDpO9eYY9QMuYVRED1U8A8Sjg6Vz9AahH+mi84OhCzwISbAwT8fFoFr6EjlgvMAh2eDtP85AP7XwGHORAi9R6USVqRNrPlUqlIEgCSM8ApGMAtCBw/nvpLGqR2qoFxIMYbUwCJvh2tbv6oyt/lX8Z6fa7e+Thdsd0bdpa7QqvF49UlPmKXz0y/vEdHqyshaeDH2lNNoPGmhlUfQMuydmzHOX2VENMTKKQ0OMQu6Qxv8hqaLDMhWoY0VlxuXkPx24vZhhooa/elts1hddvfXsCE/yPyrftTdj15ME1n3J6FOsTlbFrZwbeqDrVdz4sD0Ji41fan019q1MF2Ego/wy9NIjDl5zHM1xeZ8e9lMenGuIPl2zoIIAxqjIGiO4cIeg/vrs+fbBDvBlWi3RISKF5YCQYz5XkGRchx+rT6djBpzyYaM3Zl0ftaqd++fGSt7m2NTqBT9dwyOgXldmaRWnRcgyflGnKWGTAr0hOTFQPjSQTHWciihCCJd9IM/fAxuTV712shTreHppreXz3of739+dMDFW1E0wUBjIsHQGt4gDT8BtsF52L+oE74BquH7l6kFIzoYE6agBJv49V5o/JI39G5750mNFydlWaAiHQOca45/Pfvdk17bp2ur+AM6CAYGKBlkdyQ+Xom4OdYve83rBy3Tj284U+T/N1njUmBVTf0Lh/qBdABDQ2+31Elu8mkaoAyAsxgHbIK5/1FnX9NlmVmGFa0/vHVL+zYaJloc5F/cAdGB4AIIT51FaBWFdRps94bIciB2ZaJ+T1wNf2azmYS8bOOndbCPcKhGX1g0BfqwPpzUS3Ki0ZanVeT13FuZHiQ4UkOK0stfZvAQYA/wr53nPx8cUAAAAASUVORK5CYII=);
    background-size: auto;
    background-position: 50% 50%;
  }

  //Map becomes percentage width
  #map_box{
    left: 32em;
    width:auto;
  }

  //Revert to mobile use of the .full-width class
  .full-width{
    width: auto;
    margin: 0em -1em 0 -1em;
  }

  //make twothirdswidthpage nearly as small as main
  //.content: just enough to still fit the sidebar in
  body.twothirdswidthpage {
    .content {
      width:30em;
      .sticky-sidebar {
        left:32em;
      }
    }
  }
}