@import "_mixins";

$image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
$layout_front_stats_color: $primary !default;
$mappage-header-height: 4em !default;

.internal-link-fixed-header {
    display: block;
    /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the
     * border-top on .nav-wrapper-2 (4px), plus the padding-top on
     * .item-list__item (0.5em). */
    @if unit($mappage-header-height) == 'em' {
        padding-top: $mappage-header-height + 1em;
        margin-top: -($mappage-header-height + 1em);
    } @else {
        padding-top: $mappage-header-height + 16px;
        margin-top: -($mappage-header-height + 16px);
    }
}

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

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

  .ie7 & {
      height: 3em;
      // Without this, the #site-logo is unclickable.
      // Something to do with broken z-index nesting in IE6-7.
      z-index: 2;
  }
}

#site-logo {
  top: 0.9em;
  #{$left}: auto;
  position: absolute;
  z-index: 3;
}

#nav-link {
  #{$right}: auto;
  #{$left}: -999999px;
}

#report-cta {
    display: none;
}

#main-nav {
  margin: 0 auto;
  padding: 0;
  width: 60em;
}
.nav-menu {
  float: $right;
  li {
    display: inline;
    float: $left;
  }
  li.nav-menu__item--privacy {
    display: none;
  }
  a, span {
    display: block;
    color: $nav_fg;
    background: none;
    border-bottom: none;
  }
}
.nav-menu--main {
  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;
  }
}
.nav-menu--mysoc {
  padding: 0em 0.5em;
  margin-#{$left}: 0.25em;
  background: $primary;
  @include border-radius(0 0 0.375em 0.375em);
  a {
    background:none;
    color: $primary_text;
    text-transform: uppercase;
    font-size: 0.6875em;
    padding: 1.3em 0.7em 1em;
    &:hover {
      color: #fff;
      background: none;
    }
  }
}
#mysoc-logo {
  width:84px;
  height:16px;
  background-size: 100px auto;
  background-position: 50% 50%;
  opacity: 0.8;
  &:hover {
    opacity: 1;
  }
  // IE8 does not support background-size, so increase width to show whole image
  .ie8 & {
    width: 100px;
  }
}
.ie7 #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;
}
.iel8 {
  .content {
    //take off margins so we line up properly
    margin: 0 0.5em;
  }
}

// map page - has fixed header and different styling
body.mappage {

  .wrapper .table-cell,
  .nav-wrapper {
    // No need for the table-cell stuff now we're using absolute positioning
    display: block;
  }

  .container {
    width: auto;
    position: static;
  }

  .content {
    width: auto;
    padding: 0;
    margin: 0;
  }

  #site-header {
    // With the exception of the #site-logo child, the rest of
    // #site-header gets entirely hidden behind .nav-wrapper-2
    position: absolute;
    z-index: auto;
    top: 0;
    left: 0;
    right: 0;
    height: $mappage-header-height;
  }

  #site-logo {
    #{$left}: 12px;
    // Also inherits...
    //   `top: 0.9em`
    //   `position: absolute`
    //   `z-index: 3`
    // ...from the non-mappage version, above
  }

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

  .nav-wrapper {
    .nav-wrapper-2 {
      position: absolute;
      z-index: auto;
      top: 0;
      left: 0;
      right: 0;
      background: $map_nav_bg;

      // Watch out! If the nav links break onto two lines, the header will
      // get taller, and overlap the top of #map_sidebar and #map_box.
      // (But at least the nav links will be legible.)
      min-height: $mappage-header-height;

      // Count the 4px border-top as part of the height (mappage-header-height)
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }

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

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

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

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

// Want to cover over the blue sidebar
body.mappage.admin {
    .full-width--top {
        margin-top: -1em;
        padding-top: 1em;
    }
    .full-width--bottom {
        padding-bottom: 1em;
        margin-bottom: -4em;
    }
}

#map_box {
  position: absolute;
  z-index: auto;
  top: $mappage-header-height;
  bottom: 0;
  #{$right}: 0;
  #{$left}: 29em; // width of sidebar
  width: auto; // stretch from right edge of sidebar to left edge of window
  height: auto; // stretch from bottom of header to bottom of window
  margin: 0;

  .with-notes & {
    #{$left}: 44em;
  }
}

#map_sidebar {
  position: absolute;
  z-index: auto;
  top: $mappage-header-height;
  #{$left}: 0;
  bottom: 0;
  width: 27em; // width of sidebar, minus padding
  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
  overflow: auto; // vertical scrollbar when list is taller than window
  background-color: #fff; // since no longer in the flow inside .content
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  .with-notes & {
    width: 42em;
    // TODO: Should have a bitmap image fallback for old browsers!!
    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
  }
}

// Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed
// elements, one group clip outside padding, one clips inside. So using padding
// in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we
// add some extra height using ::after.
#map_sidebar::after {
    content: "";
    display: block;
    height: 4em;
}

// IE<=8 does not support ::after
.iel8 #map_sidebar {
    padding-bottom: 4em;
}

#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 {
            padding: 1em;
            margin-bottom: 0em;
            footer {
                margin-top: 0em;
                margin-bottom: -1em;
                .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;
                }
            }
        }
    }

}
.iel8 {
  body.twothirdswidthpage,
  body.fullwidthpage {
    .container .content footer a.platform-logo {
      color: #ffffff;
      background: none;
      text-indent: 0px;
      height: auto;
    }
  }
}

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

// Centre the login and password change pages,
// but keep them narrow to match the report sidebar
body.authpage {
  .content {
    margin-#{$left}: auto;
    margin-#{$right}: auto;
    margin-bottom: 0;
    padding: 1em; // same as .twothirdswidthpage .content
  }
}


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

//fix table to be a block for ie, float the children
.ie7 {
  .tablewrapper {
    *zoom: 1;
    display:block;
    >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;
  h2 {
    color:#222;
    margin-top:0;
  }
  p {
	  border-bottom:none;
  }
}
.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;
      }
    }
  }
}
.ie7 {
  #footer-help {
    margin-#{$left}: 2%;
    ul {
      width:100%;
      li {
        float: $left;
        width: 45%;
      }
    }
  }
}

// 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;
  #{$right}: 30px;
  top: 130px;
}
#fms_pan_zoom_zoomout {
  #{$left}: auto;
  #{$right}: 30px;
  top: 174px;
}

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

#sub_map_links {
  #{$left}: auto;
  bottom: 2em;
  #map_links_toggle {
    display:block;
    cursor: pointer;
    position:absolute;
    #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */
    width: 1em;
    height:100%;
    background:#000 inline-image("../fixmystreet/images/triangle-grey-#{$right}.svg") 50% 50% no-repeat;
    @include border-radius(flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0));
    &:hover {
      #{$left}: -1.5em;
      //use border so we don't have to redefine the background-position
      border-#{$right}: 0.5em solid #000;
    }
    &.closed {
      background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg");
    }
  }
}
.iel8 #sub_map_links #map_links_toggle {
    height: 1.75em;
    background: #000 url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
    &.closed {
      background-position: center -183px;
    }
}


// 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: 2em;
  ul#key-tools {
    border-top: 0.25em solid $primary;
    margin: 0;
    @include box-shadow(0 0 1em 1em #fff);
    li {
      border:none;
      a, input[type=submit] {
        font-size: 0.75em;
        color:#666;
        padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em);
        text-transform:none;
        &.abuse {
          background-image:url($image-sprite);
          background-position: flip(right, -337px) -2935px;
        }
        &.feed {
          background-image:url($image-sprite);
          background-position: flip(right, -337px) -3074px;
        }
        &.share {
          min-width: 5em;
          background-image: url(/cobrands/fixmystreet/images/share.png);
          background-position: flip(80%, 20%) 50%;
        }
        &.chevron {
          border-#{$right}: solid 1em transparent;
          padding-#{$right}: 0.5em;
          background-position: $right 50%;
          background-size: 12px 15px;
        }
        &.chevron.hover {
          // Reset things that changed
          border-#{$right}: none;
          padding-#{$right}: 1.5em;
          background-size: auto auto;
        }
        &.hover {
          background-image: url($image-sprite);
          background-position: flip(right, -337px) -1876px;
        }
      }
    }
    &.singleton {
      li {
        text-align: $right;
        a {
          padding-#{$right}: 3em;
        }
      }
    }
  }
  &.static {
    padding: 0 0 1em;
    position: static;
    width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars)
  }
}

// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap.
// We can set a fixed width instead, which might result in a horizontal scrollbar
// while the drawer is opening. Quel dommage.
.iel8 .shadow-wrap.static {
    width: 29em;
}

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

.big-green-banner {
  top: auto;
  margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375);
  font-size: 1.375em;
  padding: flip(1em 2em 1em 1em, 1em 1em 1em 2em);
  background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat;
  background-size: 43px 33px;

  span {
    display: block;
    font-size: 80%;
    padding-top: 0.5em;
  }
}
.iel8 {
  .big-green-banner {
    background-image: url(/cobrands/fixmystreet/images/chevron-white-#{$right}-on-green.gif);
  }
}

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

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

// If the form is .with-notes, limit the width of the inputs
// to make space for the #report-a-problem-sidebar.
#side-form, #side {
  .with-notes & {
    width: 27em;
  }
}

// Notes presented alongside the reporting form
.sidebar, #report-a-problem-sidebar {
  margin-bottom: 2em;

  // If the parent is .with-notes we know we have space to
  // float the sidebar content to the side of the form.
  .with-notes & {
    float: #{$right};
    width: 13em;
    margin-#{$right}: -15em;
  }

  div {
    font-size: 0.75em;
  }

  ul {
      @include list-reset-soft;
      li {
          margin-bottom: 0.5em;
      }
  }

  .sidebar-notes {
    color: #666;
  }
}

// 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;
  }
}
//logo fix
.iel8 {
  body.frontpage {
    #site-logo {
      position:relative;
      width:60em;
      margin:0 auto;
    }
  }
}
.ie7 {
  body.frontpage {
    #site-header {
      height:4em;
    }
    #site-logo {
      top:-1em;
    }
  }
}

// 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: $layout_front_stats_color;
        font-size: 3.2308em;
      }
    }
  }
}
.ie7 {
  #front_stats {
    div {
      width:8em;
      float: $left;
    }
  }
}

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

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

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

.confirmation-header {
    width: 25em;
    margin: 0 auto 1em;
    text-align: $left;
    padding: flip(3em 0 3em 132px, 3em 132px 3em 0); // for tick icon
    background-position: $left 2em;
}

/* Admin interface */

.fms-admin-floated {
    float: $right;
    width: 25%;
}

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

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

  //Revert to mobile use of the .full-width class
  .full-width{
    width: auto;
    margin: 0em -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;
      }
    }
  }
}