/*****************************************************************************************
 * $Rev::                                                       $: Revision of last commit
 * $Date::                                                      $: Date of last commit   
 * $Author::                                                    $: Author of last commit 
 ****************************************************************************************/

ul[role="menubar"] {
  padding: 10px;
  font-size: 85%;
  list-style: none;
  background-color: #EEEEEE;
  margin-bottom: 0px;
}

ul[role="menubar"] [role="menuitem"],
ul[role="menubar"] [role="separator"] {
}

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"] 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');*/
}

ul[role="menubar"] > li > a > span {
  /*content: url('../images/down-arrow-brown.png');*/
  padding-left: 5px;
}

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;*/
}

ul[role="menubar"] > li > ul li[role="none"] > a > span {
  /*content: url('../images/down-arrow-brown.png');*/
  padding-left: 5px;
}

ul[role="menubar"] [role="menuitem"]{
  white-space:nowrap;
}

ul[role="menubar"] ul.sub-menu{
  padding: 5px;
  background-color: #EEEEEE;
  /*border: 2px solid #EEEEEE;*/
  font-size: 108% ;
}

ul[role="menubar"] .sub-menu-item:focus,
ul[role="menubar"] .sub-menu-item:hover
{
  background-color: black;
  color: white;
}
ul[role="menubar"] .menu-item:focus,
ul[role="menubar"] .menu-item:hover{
  background-color: black;
  color: white;
  padding-top:10px;
  padding-bottom:10px;
}