@media screen {

  #nav ul,
  #nav li,
  #nav span,
  #nav a {
    margin: 0;
    padding: 0;
    position:relative;
 }

  #nav:after,
  #nav ul:after {
    content: '';
    display: block;
    clear: both;
  }

  #nav a {

    display: inline-block;
    padding: 1em 1em;
    text-decoration: none;
  }
  
  #nav ul {
    list-style: none;
  }
  
  #nav li {
    list-style-type: none;
  }
  
  #nav > ul {
    /*float: left;*/
  }
  
  #nav > ul > li {
    float: left;
  }

  #nav > ul > li.right {
    float: right;
  }

  /* nice red triangle */
  #nav > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.5em solid #CF112D;
    margin-left: -0.5em;

  }
  
  #nav > ul > li:hover > a {

    background: #333333;
  }


  #nav .has-sub {
    z-index: 1;
  }
  
  #nav .has-sub:hover > ul {
    display: block;
  }
  
  #nav .has-sub ul {
    display: none;
    position: absolute;
    z-index:1000;
    width: 14em;
    top: 100%;
    left: 0;
    padding-top:0.25em;
  }

  #nav .has-sub ul li a {
    background: #EEEEEE;
    border-bottom: 1px dotted #777777;
    filter: none;
    display: block;
    padding: 1em;
    color: #000000 !important;
  }
  
  #nav .has-sub ul li:hover a {
    background: #bbbbbb;
  }


  #footernav ul,
  #footernav li,
  #footernav span,
  #footernav a {
    margin: 0;
    /*padding: 0;*/
    position:relative;
 }

  #footernav ul {
    list-style: none;
  }
  
  #footernav li {
    list-style-type: none;
    padding-left:1em;
  }
    
  #footernav > ul > li {
    float: left;
  }

}