/*
 * Dropdown menus
 * by Raj Ramamurthy
 * http://mynameisraj.com/
 */
@media screen {
  .menu {
    width: 150px;
    height: 200px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: 'Lucida Grande', helvetica, arial, sans-serif;
  }

  div.menu {
    border: 0;
    outline: 0;
    margin-bottom: 20px;
  }

  div.menu div:first-child {
    position: relative;
    clear: both;
  }

  .return-button:active {
    -webkit-box-shadow:
      inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(140, 140, 140),
      0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:
      inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(140, 140, 140),
      0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow:
      inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(140, 140, 140),
      0 1px 1px rgba(0, 0, 0, 0.3);
  }

  a.opener, .return-button, a.return-button:visited {
    background-color: #d3d3d3;

    -webkit-box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 1px 0 rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(130, 130, 130),
      0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 1px 0 rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(130, 130, 130),
      0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 1px 0 rgba(0, 0, 0, 0.2),
      0 0 0 1px rgb(130, 130, 130),
      0 1px 2px rgba(0, 0, 0, 0.25);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    color: #333;
    font: 11px/20px 'Lucida Grande', helvetica, arial, sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

    -webkit-background-clip: padding-box;
    -webkit-transition: .5s color background text-shadow border;
    float: right;
    z-index: 4;
    right: 0;
    padding: 1px 10px 1px 10px;

    text-decoration: none;
  }

  a.opener-left, .return-button-left {
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-topright: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  a.opener-right, .return-button-right {
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  a.opener.open {
    background: #111;
    color: #fafafa;
    text-shadow: none;
    border-top: 1px solid #555;
    margin-top: -1px;

    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    -webkit-box-shadow: 0 1px 0 #111, 0 0 1px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 0 #111, 0 0 1px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 0 #111, 0 0 1px rgba(0, 0, 0, .4);
  }

  ul.popup.open {
    opacity: 1;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    margin: 0;
  }

  .left ul.popup.open {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
  }

  ul.popup {
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .4), 0 3px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .4), 0 3px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 0 1px rgba(0, 0, 0, .4), 0 3px 4px rgba(0, 0, 0, .2);

    -webkit-background-clip: padding-box;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #111;
    padding: 5px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 23px;
    opacity: 0;
    z-index: 3;
    display: none;
    -webkit-transition: .3s;
    clear: both;
    list-style: none;
  }

  ul.popup li:last-child {
    border: 0;
  }

  ul.popup li a:hover, li.submenu:hover a.title {
    background: #4E8DED;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .01);
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .01);
    -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .01);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    color: #fff;
  }

  ul.popup li a {
    color: #fafafa;
    text-decoration: none;
    display: block;
    padding: 8px 10px;
  }

  ul.popup li span {
    color: gray;
    display: block;
    padding: 8px 10px;
  }

  ul.popup li.separator {
    padding: 0;
    height: 1px;
    background: #eee;
    margin: 10px;
  }

  ul.popup li.separator:hover {
    -webkit-box-shadow: none;
    background: #fafafa;
  }
}