/* menubar's container taking up a sides whole edge space
   contains #menubarOuter and #toggleOptionsContainer */
#menubarContainer {

}

/* the main .menubar */
#menubarOuter {

}

/* any menubar; when wanting to modify gaps, take 
   [data-menubarsplacement="X"] from internal.css into
   account. Currently only 1 .menubar exists. */
.menubar {

}

/* menubars' all buttons */
.menubar button:hover {
  filter: brightness(1.25);
}

/* main menubar's all buttons */
#menubarOuter button {

}

/* specific buttons */
#ui-2021-a #buttonMap {
  background: #d00;
}
#ui-2021-a #buttonFlightPlan {
  background: #e70;
}
#ui-2021-a #buttonProgress {
  background: #fd0;
}
#ui-2021-a #buttonAircraft {
  background: #070;
}
#ui-2021-a #buttonAirport {
  background: #03b;
}
#ui-2021-a #buttonHelp {
  background: #41c;
}


#ui-2021-a #buttonProgress:hover  {
  text-shadow: 1px 1px 0 rgba(0,0,0,.5), -1px -1px 0 rgba(0,0,0,.5), -1px 1px 0 rgba(0,0,0,.5), 1px -1px 0 rgba(0,0,0,.5) !important;
}

/* button active style, use !important for each property's value */
.active {
  filter: brightness(1.5) !important;
}
#ui-2021-a #buttonMap.active  {
  background: #d00 !important;
}
#ui-2021-a #buttonFlightPlan.active  {
  background: #e70 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000 !important;
}
#ui-2021-a #buttonProgress.active  {
  background: #fd0 !important;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000 !important;
}
#ui-2021-a #buttonAircraft.active  {
  background: #070 !important;
}
#ui-2021-a #buttonAirport.active  {
  background: #03b !important;
}
#ui-2021-a #buttonHelp.active  {
  background: #41c !important;
}

/* see internal.css for detailed cross-effects when changing :hover, ::before or .shown::before of below selector */
[data-menubarsplacement="top"] #toggleOptionsToggle::before {
  border-top-color: #81a;
}

[data-menubarsplacement="right"] #toggleOptionsToggle::before {
  border-right-color: #81a;
}

[data-menubarsplacement="bottom"] #toggleOptionsToggle::before {
  border-bottom-color: #81a;
}

[data-menubarsplacement="left"] #toggleOptionsToggle::before {
  border-left-color: #81a;
}

[data-menubarsplacement="top"] #toggleOptionsToggle.shown::before {
  border-top-color: #dad;
}

[data-menubarsplacement="right"] #toggleOptionsToggle.shown::before {
  border-right-color: #dad;
}

[data-menubarsplacement="bottom"] #toggleOptionsToggle.shown::before {
  border-bottom-color: #dad;
}

[data-menubarsplacement="left"] #toggleOptionsToggle.shown::before {
  border-left-color: #dad;
}

#toggleOptionsToggle:hover {
  outline-color: #a6b;
}

#toggleOptionsToggle:hover::before {
  filter: brightness(1.5);
}

#toggleOptionsToggle.shown:hover::before {
  filter: brightness(1);
}