/*
Naming convention:
Block
element
-modifier
*/

.Menu {
    display: none;
    position: relative;
    z-index: 5000;
}

/* Three basic menu layouts */
/* This also enforces that menu is a ul, and that
  * layout modifier is specified
  */
ul.Menu.-horizontal,
ul.Menu.-vertical {
    display: inline-block;
}
ul.Menu.-floating {
    display: block;
    position: absolute;
}

/* Menu and menu-item layout */
.Menu,
.Menu li,
.Menu li > ul {
    list-style: none;
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.Menu li {
    display: block;
    position: relative;
    white-space: nowrap;
    word-break: keep-all;
}
.Menu.-horizontal > li {
    display: inline-block;
    float: left;
    margin-top: 0px;
}
.Menu li > * {
    display: block;
    position: relative;
}
.Menu li > ul {
    position: absolute;
    min-width: 100%;
    top: 0px;
    left: 100%;
}
.Menu.-horizontal.-alignRight li > ul {
    left: auto;
    right: 100%;
}
.Menu.-horizontal.-alignRight > li > ul {
    right: 0px;
}
.Menu.-horizontal > li > ul {
    top: auto;
    left: auto;
}

/* Menu behaviour */
.Menu li > ul,
.Menu.-floating {
  display: none;
}
.Menu li > ul.-visible,
ul.Menu.-floating.-visible {
  display: block;
  z-index: 5001;
}

/* Menu animation */
.Menu li > ul,
.Menu.-horizontal.-alignRight li > ul,
.Menu.-floating {
    opacity: 1;
    transform: scale(1) translateY(0px);
    transform-origin: left top;
}
.Menu.-alignRight li > ul,
.Menu.-floating.-alignRight {
    transform-origin: right top;
}
.Menu li > ul.-animating,
.Menu.-floating.-animating {
    opacity: 0 !important;
    transform: scale(0.96) translateX(-16px);
}
.Menu li > ul.-animating {
    z-index: -1 !important;
}
.Menu.-horizontal > li > ul.-animating {
    transform: scale(0.96) translateY(-16px);
}
.Menu.-alignRight li > ul.-animating,
.Menu.-floating.-alignRight.-animating {
    transform: scale(0.96) translateX(16px);
}
.Menu.-horizontal.-alignRight > li > ul.-animating {
    transform: scale(0.96) translateY(-16px);
}

/* Menu item icons */
.Menu *[data-icon]:before {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
}
.Menu .Icon,
.Menu *[data-icon]:before {
    line-height: inherit;
}
.Menu .Icon {
    padding: 0px;
}
.Menu *:empty[data-icon] {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Submenu chevrons */
.Menu li.-hasSubmenu > a:after {
    display: block;
    position: absolute;

    width: 8px;
    height: 8px;
    right: 8px;
    bottom: 0px;
    top: 0px;
    margin: auto 0px;

    transform: rotate(45deg);
    border-width: 1px;
    border-color: black;
    border-style: solid solid none none;

    content: "";
}
.Menu.-horizontal > li.-hasSubmenu > a:after {
    width: 4px;
    height: 4px;
    bottom: 4px;
    top: auto;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    opacity: 0;
    border-style: none solid solid none;
}
.Menu.-horizontal > li.-hasSubmenu:hover > a:after {
    opacity: 1;
}
.Menu li.-hasSubmenu.-noChevron > a:after {
    display: none;
}

/*
** Configurable values
*/
    /* Height of navbar, and menu items */
    /* All of these must be of equal value */
    .Menu {
        line-height: 59px;
    }
    .Menu.-horizontal,
    .Menu li,
    .Menu li > :first-child {
        height: 59px;
    }
    .Menu *[data-icon]:before,
    .Menu .Icon {
        width: 59px;
        height: 59px;
    }
    .Menu .Icon {
        width: 59px;
        height: 59px;
    }
    .Menu *[data-icon] {
        min-width: 59px;
        min-height: 59px;
    }

    /* Default font settings for menu */
    .Menu {
        font-family: Arial, Helvetica, Sans;
        font-size: 16px;
    }

    /* Icon font sizes */
    .Menu *[data-icon]:before,
    .Menu .Icon {
        font-size: 24px;
    }
    /* For submenus */
    .Menu > li ul .Icon,
    .Menu.-floating .Icon,
    .Menu > li ul *[data-icon]:before,
    .Menu.-floating *[data-icon]:before,
    {
        font-size: 18px;
    }

    /* Colouring of menus */
    /* Foreground */
    .Menu,
    .Menu li.-hasSubmenu > a:after {
        color: black;
        border-color: black; /* chevron colour */
    }
    /* Background */
    .Menu ul,
    .Menu.-floating {
        background: white;
    }

    
    /* Padding for each menu item */
    .top-li > a {
        padding: 0px 9px !important;
    }
    .Menu li li a {
        padding: 0px 24px;
    }
    /* Indent of chevron */
    .Menu li li.-hasSubmenu > a:after,
    .Menu:not(.-horizontal) > li.-hasSubmenu > a:after {
        right: 12px;
    }
    .Menu li li.-hasSubmenu > a,
    .Menu:not(.-horizontal) > li.-hasSubmenu > a {
        padding-right: 28px;
    }

    /* Minimum width of dropdown menus */
    .Menu.-horizontal li > ul,
    .Menu.-floating {
    }

    /* Animation speed of dropdown menus */
    .Menu li > ul,
    .Menu.-floating {
        transition: width 0.1s, height 0.1s, transform 0.1s, opacity 0.1s;
    }

    /* Styling of hyperlink text */
    .Menu li > a {
        text-decoration: none;
        color: inherit;
    }

    /* Animation speed of :hover shading */
    .Menu li > a:first-child {
        transition: background-color 0.2s;
    }

    /* Colour of :hover shading */
    .Menu li:hover > a:first-child,
    .Menu li.-active > a:first-child {
        background-color: rgba(0,0,0,0.1);
    }

/*
** End configurable values
*/