div#menubar {
    width: var(--EJA-width);
	margin: auto;
    height: var(--EJA-menu-height);
    padding-top: var(--EJA-menu-padding-top);
    display: var(--EJA-menubar-display);
/*    justify-content: space-between;*/
}

div#menugrid {
    display: grid;
    grid-gap: var(--EJA-menu-gap);
    grid-template-columns: var(--EJA-menu-columns);
    grid-template-rows: var(--EJA-menu-rows);
    grid-template-areas: var(--EJA-menu-grid-template-areas);
}

div#asmenugrid {
    display: grid;
    grid-gap: var(--EJA-menu-gap);
    grid-template-columns: var(--EJA-as-menu-columns);
    grid-template-rows: var(--EJA-menu-rows);
    grid-template-areas: var(--EJA-as-menu-grid-template-areas);
}

div.menuelement {
    display: flex;
    align-items: center;
    padding-left: 10px;
    /*width: var(--EJA-menu-width);*/
	font-family: 'PT Sans Narrow', sans-serif;
    font-size: var(--EJA-menu-fontsize);
    line-height: var(--EJA-menu-line-height);
    text-align: left;
    color: white;
    border-bottom: var(--EJA-menuelement-bottom-height) var(--EJA-color-main-dark) solid;
    position: relative;
}

div.menuelement a {
    text-decoration: none;
    color: white;
}

div.menucontent {
    display: none;
    position: absolute;
    width: var(--EJA-submenu-width);
    left:0px;
    top: var(--EJA-menu-element-height);
    z-index: 1;
    background-color: white;
    color: var(--EJA-color-submenu-text);
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: var(--EJA-menucontent-fontsize);
    padding:10px;
    text-decoration: none;
}
  
div.menucontent2 {
    display: none;
    position: absolute;
    width: var(--EJA-submenu-width);
    left: var(--EJA-submenu-left);
    top: var(--EJA-menu-element-height);
    z-index: 1;
    background-color: white;
    color: var(--EJA-color-submenu-text);
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: var(--EJA-menucontent-fontsize);
    padding:10px;
    text-decoration: none;
}

div.menucontent3 {
    display: none;
    position: absolute;
    width: var(--EJA-submenu-width);
    left: var(--EJA-submenu-left2);
    top: var(--EJA-menu-element-height);
    z-index: 1;
    background-color: white;
    color: var(--EJA-color-submenu-text);
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: var(--EJA-menucontent-fontsize);
    padding:10px;
    text-decoration: none;
}

div.menucontent a {
    text-decoration: none;
    color: var(--EJA-color-submenu-text);
}

div.menuelement:hover {
    border-bottom: var(--EJA-menuelement-bottom-height) transparent solid;
}

div.menuelement:hover div.menucontent{
    display: block;
}

div.menuelement:hover div.menucontent2{
    display: block;
}

div.menuelement:hover div.menucontent3{
    display: block;
}

/* div.borderm1 {
    border: 5px var(--EJA-color-menu1) solid;
}

div.borderm2 {
    border: 5px var(--EJA-color-menu2) solid;
}

div.borderm3 {
    border: 5px var(--EJA-color-menu3) solid;
}

div.borderm4 {
    border: 5px var(--EJA-color-menu4) solid;
}

div.borderm7 {
    border: 5px var(--EJA-color-menu7) solid;
}*/

div.m1 {
    background-color: var(--EJA-color-menu1);
    grid-area: m1;
}

div.m2 {
    background-color: var(--EJA-color-menu2);
    grid-area: m2;
}

div.m3 {
    background-color: var(--EJA-color-menu3);
    grid-area: m3;
}

div.m4 {
    background-color: var(--EJA-color-menu4);
    grid-area: m4;
}

div.m5 {
    background-color: var(--EJA-color-menu5);
    grid-area: m5;
}

div.m6 {
    background-color: var(--EJA-color-menu6);
    grid-area: m6;
}

div.m7 {
    background-color: var(--EJA-color-menu7);
    grid-area: m7;
}

div.m8 {
    background-color: var(--EJA-color-menu8);
    grid-area: m8;
}

div.m9 {
    background-color: var(--EJA-color-menu9);
    grid-area: m9;
}