// Hide the toggle icon for the mobile menu.
label#toggle-icon {
  display: none;
}

// Reset any translated elements to their original position.
.l-responsive-page-container, #menu, #menu .sub-nav {
  -webkit-transform: translate(0, 0)!important;
  -ms-transform: translate(0, 0)!important;
  transform: translate(0, 0)!important;
}

// Hide various elements from the mobile menu
// not used at the desktop size.
#menu label,
#menu .sub-nav,
#menu .sub-heading,
#header label {
  display: none;
}

// Structural elements for the desktop sized menu.
// Override these (copy to sass to your theme) to significantly
// change the layout of the menu.
#menu {
  left: auto;
  height: 0;
  width: 100%;
  z-index: 1;
  > ul {
    position: relative;
    margin-top: 0;
    display: inline-table;
  }
  ul {
    &:after {
      content: "";
      clear: both;
      display: block;
    }
    li {
      float: left;
      position: relative;
      a {
        &:only-child {
          &:after {
            content: "";
          }
        }
        // The triangles to indicate a flyout.
        &:after {
          content: "\25BA";
          position: absolute;
          right: 0.5em;
          margin-top: -1.5625em;
          display: block;
          font: 1.5em Arial;
        }
      }
    }
    li:hover > a {
    }
    li:hover > ul {
      display: block;
    }
    ul {
      position: absolute;
      left: 0;
      li {
        float: none;
        width: 13.75em;
        a {
          padding: 0 1.5em;
          &:after {
            right: 0.375em;
            margin-top: -1.6875em;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
          }
        }
      }
      .sub-nav {
        float: left;
        top: 0;
        left: 13.75em;
        margin-left: 0;
      }
    }
    .sub-nav {
      top: auto;
      bottom: auto;
      left: auto;
      width: auto;
      margin-top: 0;
    }
    .fly-left {
      ul {
        left: -13.75em;
      }
      a:after {
      }
    }
  }
}

// Stylistic elements. Override these (copy sass to your theme) to get
// the look you need for your site.
#menu {
  background-color: #222;
  height: 3.15em;
  > ul {
    font-size: 0.875em;
    border: 0;
    > li {
      border: 0;
    }
  }
  ul {
    border-top: 0;
    &:after {
      content: "";
      clear: both;
      display: block;
    }
    li {
      float: left;
      position: relative;
      text-align: left;
      a {
        padding: 0.5em 2.5em 0.5em 1.5em;
        &:only-child {
          padding-right: 1.5em;
          &:after {
            content: "";
          }
        }
        &:after {
          content: "\203A";
          position: absolute;
          right: 0.5em;
          margin-top: -1.5625em;
          display: block;
          font: 1.5em Arial;
          -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      }
    }
    li:hover > a {
      background-color: #333;
      -webkit-transition: background-color .25s ease;
      transition: background-color 0.25s ease;
    }
    li:hover > ul {
    }
    ul {
      li {
        width: 13.75em;
        border-left: 0;
        a {
          padding: 0 1.5em;
          &:after {
            right: 0.375em;
            margin-top: -1.6875em;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
          }
        }
      }
      .sub-nav {
      }
    }
    .sub-nav {
    }
    .fly-left {
      ul {
      }
      a:after {
        right: auto;
        left: 0.5em;
        left: 0.375em;
        margin-top: -1.5625em;
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
      }
    }
  }
}