header.navigation {

$navigation-background: $dark-gray;
$navigation-color: transparentize(white, 0.3);
$navigation-color-hover: white;
$navigation-height: 60px;
$navigation-nav-button-background: $base-accent-color;
$navigation-nav-button-background-hover: lighten($navigation-background, 10);
$navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
$navigation-search-background: lighten($navigation-background, 5);
$navigation-search-border: 1px solid darken($navigation-background, 5);

background-color: $navigation-background;
border-bottom: 1px solid darken($navigation-background, 10);
font-family: $sans-serif;
height: $navigation-height;
width: 100%;
z-index: 999;

.menu-wrapper {
  @include outer-container;
  position: relative;
  z-index: 9999;
}

.logo {
  float: left;
  max-height: $navigation-height;
  padding-right: 2em;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  line-height: $navigation-height;

  img {
    max-height: $navigation-height;
    padding: .8em 0;
  }
}

.navigation-menu-button {
  color: $navigation-color;
  cursor: pointer;
  display: block;
  float: right;
  font-family: $sans-serif;
  font-weight: 700;
  line-height: $navigation-height;
  margin: 0;
  padding-right: 1em;
  text-transform: uppercase;

  @include media ($large-screen) {
    display: none;
  }

  &:hover {
    color: $navigation-color-hover;
  }
}

.nav {
  @include media ($large-screen) {
    float: left;
  }
}

ul#navigation-menu {
  clear: both;
  -webkit-transform-style: preserve-3d;

// stop webkit flicker

  display: none;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  width: 100%;
  z-index: 9999;

  @include media ($large-screen) {
    display: inline;
    margin: 0;
    padding: 0;
  }
}

ul li {
  background: $navigation-background;
  display: block;
  line-height: $navigation-height;
  overflow: hidden;
  padding-right: .8em;
  text-align: right;
  width: 100%;
  z-index: 9999;

  @include media ($large-screen) {
    background: transparent;
    display: inline;
    line-height: $navigation-height;
    padding-right: 2em;
    text-decoration: none;
    width: auto;
  }

  a {
    font-weight: 400;
    color: $navigation-color;

    &:hover {
      color: $navigation-color-hover;
    }
  }
}

.sign-up, .take-reading {
  @include media ($large-screen) {
    @include position(absolute, 0px 0px 0 0);
    padding-right: 1em;

    a {
      @include transition (all 0.2s ease-in-out);
      background: $navigation-nav-button-background;
      border-radius: $base-border-radius;
      color: white;
      font-size: .8em;
      font-weight: 800;
      padding: .6em 1em;
      text-transform: uppercase;

      &:hover {
        background: lighten($navigation-nav-button-background, 10);
      }
    }
  }
}

li.navigation-search-bar {
  display: none;

  @include media($large-screen) {
    @include position(absolute, 0px 76px 0 0);
    display: inline-block;
    line-height: 0 !important;
    padding: 13px 30px;

// this to get around Firefox/Opera line-height “bug”

  }
}

.search-bar {
  $search-bar-border-color: $base-border-color;
  $search-bar-border: 1px solid $search-bar-border-color;
  $search-bar-background: lighten($search-bar-border-color, 10);

  width: 19em;
  position: relative;
  display: inline-block;

  input {
    @include box-sizing(border-box);
    display: block;
  }

  .search-and-submit {
    position: relative;

    input[type=search] {
      background: $navigation-search-background;
      border: $navigation-search-border;
      padding: .6em .8em;
      font-size: .9em;
      font-style: italic;
      color: $navigation-color;
      border-radius: $base-border-radius * 2;
      margin: 0;
    }

    button[type=submit] {
      @include button(simple, lighten($navigation-search-background, 10));
      @include position(absolute, 0.3em 0.3em 0.3em 0);
      outline: none;
      padding: 5px 15px;

      img {
        height: 12px;
        opacity: .7;
      }
    }
  }
}

}