/* Manual accessible menu - navigation menubar */
/* Desktop styles */
 @media screen and (min-width: 780px) {

    ul[role="menubar"] {
      margin: 10px;
      padding: 10px;
      font-size: 110%;
      list-style: none;
      background-color: #eee;
    }
    
    ul[role="menubar"] [role="menuitem"],
    ul[role="menubar"] [role="separator"] {
      padding: 0.25em;
      background-color: #eee;
      /* border: 2px solid #eee; */
    }
    
    ul[role="menubar"] [role="separator"] {
      padding-top: 0.15em;
      background-image: url('../images/separator.png');
      background-position: center;
      background-repeat: repeat-x;
    }
    

    ul[role="menubar"] [role="menuitem"]:hover,
    ul[role="menubar"] [role="separator"]:hover {
      background-color: black;
      color: white;
    }
    
    ul[role="menubar"] [role="menuitem"]:focus,
    ul[role="menubar"] [role="separator"]:focus   {
     /* background-color: black; */
      color: white;
    }
    ul[role="menubar"] a[role="menuitem"] {
      text-decoration: none;
      color: black;
    }
    
    ul[role="menubar"] li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    ul[role="menubar"] > li {
      display: inline;
      position: relative;
    }
    
    /*
    ul[role="menubar"] > li > a::after {
      content: url('../images/down-arrow-brown.png');
      padding-left: 0.25em;
    }
    */
    
    ul[role="menubar"] ul[role="menu"] {
      display: none;
      /* position: absolute; */
     /* top: -2px; */
      left: 0;
      margin: 0;
      padding: 0;
    }
    
    ul[role="menubar"] ul[role="menu"] li a {
      display: block;
      width: 10em;    
    }
    
   /* 
   ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]::after {
         
      content: url('../images/right-arrow-brown.png');
      padding-right: 2em;
     
    }
    */

}

/* Mobile styles */
 @media screen and (max-width: 779px) {
     
     ul[role="menu"] {  
         position: inherit;
     }
     
 }
 
 
/* Safari (from 6.1 to 10.0)*/
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}
 
/* Safari (10.1+) */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}