@import "_colours";
@import "../sass/layout";

h1 {
  letter-spacing: -1px;
  font-size: 2.333333333em; //42px
  line-height: 1.142857143em; //42px
}

/* Top */
#site-header {
  &:after {
    content: " ";
    height: $mappage-header-height + 1px;
    display: block;
    border-bottom: 1px solid $grey50;
    background-color: white;
  }
}

#main-nav {
  float: none;
  margin-top: $mappage-header-height;

  .ie9 & > * {
    #{$right}: auto;
    #{$left}: 0;
  }
}

.nav-menu {
  border: 0;
}

.nav-menu a, .nav-menu span {
  color: $beck-blue;
  font-family: $heading-font;
  font-size: 1.125em;
  border: 0;
  background-color: transparent;
  text-decoration: underline;
  &:hover,
  &:active,
  &:focus,
  &:visited {
      color: $blue-dark;
      background-color: transparent;
  }
}

.nav-menu--main a.report-a-problem-btn {
  background: transparent;
  &:hover,
  &:active,
  &:focus {
    background: transparent;
  }
}

/* Homepage */
#front-main {
  background-color: transparent;
  border-bottom: 1px solid $grey50;
  margin-top: 3em;
  padding-bottom: 2em;
  #postcodeForm div {
    margin: 0;
  }
  a#geolocate_link {
    color: $beck-blue;
    font-family: $heading-font;
    text-decoration: underline;
    font-size: 1.125em;
  }
}

.frontpage .content {
  padding: 2em 0;
}

#front_stats {
  border: 0;
}

/* Bottom */

#footer li {
  display: inline-block;
  width: auto;
  margin-right: 2em;
}

/* Navigation */

.top-row-extras { display: none; }

/* Map page */

body.mappage {
  #site-header {
    @include box-sizing(border-box);
    top: 0;
  }

  // Reinstate the floated nav bar on map pages
  #main-nav {
    float: #{$right};
    margin-top: 0;
    min-height: auto;
    height: auto;
    .nav-menu a, .nav-menu span {

    }
    // IE9 uses absolute positioning rather than floats.
    .ie9 & {
      float: none;

      & > * {
        #{$right}: 0;
        #{$left}: auto;
      }
    }
  }

  // A few changes to the nav items now they're on a black background
  .nav-menu {
    a, span {
      color: white;
      font-size: 1.1em;
    }

    a {
      &:hover,
      &:active,
      &:focus {
        background: transparent;
        text-decoration: underline;
      }
    }

    a.report-a-problem-btn {
      color: white;
      background: transparent;
    }
  }

  .big-green-banner {
    display: block;
    text-transform: none;
  }
}

body.mappage #footer { display: none; }

.big-green-banner {
  text-transform: none;

  // Prevent blue button from touching blue logo above.
  // The 3px border is stolen from the official TFL website header.
  border-top: 3px solid #121315;
}