/*
 * Breakpoint mixin. See: http://css-tricks.com/conditional-media-query-mixins/
 *
 * Use:
 * .row {
 *  @include bp(mobile, min) {
 *    //mobile styles
 *  };
 * }
 *
 * Breakpoints are set in _config.scss e.g. $bp1
 */
.mobile-only {
  display: none;
}
@media (max-width: 37.625em) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 37.625em) {
  .hidden-on-mobile {
    display: none !important;
  }
}

/**
 * Mixins for doing CSS3 cross-browser stuff:
 */
/**
 * Special grayscale mixin to support IE rather than using
 *	@include filter(grayscale(100%)) 
 * which IE does not support
*/
#top-nav ul ul {
  display: none;
}

@media (min-width: 30.125em) {
  #hd,
  #hd #top-nav ul {
    overflow: visible;
  }

  #top-nav li {
    position: relative;
  }

  #top-nav ul ul {
    z-index: 2;
  }

  #top-nav ul ul li {
    position: relative;
    padding: 4px 0 4px 0;
  }

  #top-nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: #dbdbdb;
    margin-left: 0;
    height: auto;
    border: none;
    box-shadow: 2px 2px 6px 0px #777;
  }
}
@media (min-width: 30.125em) and (min-width: 37.625em) {
  #top-nav li:hover > ul {
    display: block;
  }
}
@media (min-width: 30.125em) {
  #top-nav li li {
    width: 100%;
  }

  #top-nav > ul li ul a {
    color: #333333;
    border-bottom: 1px solid #b8b8b8;
    display: block;
    margin: 0 10px;
    padding: 0;
    line-height: 240%;
    font-weight: normal;
  }

  #top-nav > ul li ul li ul {
    /* cascading submenus */
    top: 0px;
    left: 200px;
  }

  #top-nav li li.last a {
    border-bottom: none;
  }

  #top-nav > ul > li ul > li a:hover,
  #top-nav li li a.current {
    text-decoration: underline;
    background: transparent;
  }

  /* z-index hacks for IE: */
  #top-nav {
    z-index: 998;
  }

  #hd-container {
    z-index: 999 !important;
  }
}