/* apie.org Navigation: links on the right of the header bar. Shared by every page.

   Desktop: links in a row; the current page is underlined in navy.
   Narrow screens (960px and below), with nav.js running: the links fold behind a
   Menu button on the brand's row and open as a list below it. Without nav.js, or
   without media query support, every link simply stays visible. */

.nav {
  float: right;
  margin-top: 7px; /* centres the links against the brand's two lines */
  font-family: Arial, Helvetica, sans-serif;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  display: inline;
}

.nav a,
.nav a:visited {
  display: inline-block;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: bold;
  color: #002B66;
  text-decoration: none;
  /* White, not transparent: IE6 draws transparent borders black */
  border-bottom: 3px solid #FFFFFF;
}

.nav a:hover,
.nav a:focus {
  border-bottom-color: #CCD5CC;
}

/* Current page: each page's <body id> picks out its own link,
   so the nav markup can stay identical on every page. */
#page-home .nav-home,
#page-services .nav-services,
#page-application .nav-application,
#page-contact .nav-contact {
  border-bottom-color: #002B66;
}

/* Menu button added by nav.js; only shown on narrow screens */
.nav-toggle {
  display: none;
}

@media (max-width: 960px) {
  /* Full width under the brand: cancel .header-inner's side padding */
  .nav {
    float: none;
    clear: both; /* below the brand and the floated Menu button */
    margin: 0 -18px;
    text-align: center;
  }

  /* Without nav.js: links wrap in centred rows */
  .nav ul {
    padding-bottom: 6px;
  }

  /* With nav.js: Menu button on the brand's row, links folded away until opened.
     The button comes first in .header-inner and floats right; the brand
     (overflow: hidden in header.css) fills the space beside it. */
  .nav-js .nav-toggle {
    display: block;
    float: right;
    margin: 10px 0 12px 12px;
    padding: 7px 10px;
    background: #FFFFFF;
    border: 2px solid #002B66;
    border-radius: 4px;
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #002B66;
    cursor: pointer;
  }

  .nav-toggle:focus {
    outline: 3px solid #E0A100;
    outline-offset: 2px;
  }

  /* Three-bar menu icon, drawn with plain blocks so it works without
     gradients or icon fonts */
  .nav-toggle-icon {
    display: inline-block;
    width: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .nav-toggle-icon span {
    display: block;
    height: 2px;
    margin: 3px 0;
    background: #002B66;
  }

  .nav-js .nav ul {
    display: none;
    padding-bottom: 0;
  }

  .nav-js .nav-open ul {
    display: block;
  }

  .nav-js .nav li {
    display: block;
  }

  .nav-js .nav a,
  .nav-js .nav a:visited {
    display: block;
    padding: 12px 18px;
    border-bottom: 0;
    border-top: 1px solid #E3E8E4;
    border-left: 4px solid #FFFFFF;
    text-align: left;
  }

  .nav-js .nav a:hover,
  .nav-js .nav a:focus {
    background: #EEF2EE;
  }

  .nav-js #page-home .nav-home,
  .nav-js #page-services .nav-services,
  .nav-js #page-application .nav-application,
  .nav-js #page-contact .nav-contact {
    border-left-color: #002B66;
    background: #EEF2EE;
  }
}