ul li {
    margin-top:0.5em;
    margin-bottom:0.5em;
}

ol li {
    margin-top:0.5em;
    margin-bottom:0.5em;
}

#nav-container ul > li > ul {
    display: none;
}

/* #nav-container ul > li:hover > ul { */
#nav-container ul > li.active > ul {
    display: block;
}

#nav-container li.active > a {
    color: #338;
    font-weight:bold;
}

#nav-container li.level-3 {
    display:none;
}

#nav-container li.level-2.pure-menu-selected ~ .level-3 {
    display:block;
}

/*
#nav-container .pure-menu-item:hover {
    background:none;
}
*/
#nav-container .pure-menu-link:hover {
    background:#ECECEC
}

/* @media (min-width: 60em) { */
@media (max-width: 63.999em) {

    /* For small screens, "hide" the menu */
    #nav {
      position:absolute;
      top: 4.5em;
      left: -20em;
      width: 20em;
      opacity: 0;
      background-color:#edf6f7;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
    }

    #nav.open {
        opacity: 1;
        left: 0;
    }

    /* since hovering isn't applicable in mobile,
    we let the API menu expand all the time here
    #nav-container ul > li > ul {
        display: block;
    }
    */
}

@media (min-width: 64em) {

    .ebebeb {
        border:1px solid #ebebeb;
    }

    .affix {
        position:fixed;
        top:20px;
    }
}

/*
.affix-top {
  position:static;

}*/

/*
#nav-container li.pure-menu-item.active > a.pure-menu-link::after {
  content: "\203A";
  color: #338;
  position: absolute;
  right: 1em;
  top: 0.3em;
}
*/

/*
#nav-container * {
  width:300px;
}
*/
#nav .pure-menu-link {
  padding-left: 0;
}