/* Copyright 2016 by Ronald Bourret */

/********************/
/*    Appearance    */
/********************/

/* Set the background color and text color for menus (ul elements). */

.perm-horiz,
.perm-vert
{
/*   background: teal;*/
/*   color: white;*/
}

/* Propagate the background and text color to menu items (li children). */

.perm-horiz > li,
.perm-vert > li
{
   background: inherit;
   color: inherit;
   list-style-type: none;
}

/* Propagate the background color to inline submenus (ul elements). */

.perm-head > .perm-horiz.inline,
.perm-head > .perm-vert.inline
{
   background: inherit;
}

/* Set the hover color when Javascript is disabled. */

.no-js .perm-horiz > li:hover,
.no-js .perm-vert > li:hover
{
   background: rgb(218, 218, 218) !important;
}

/* Set the hover color when Javascript is working. */

.perm-hovercolor
{
   background: rgb(218, 218, 218) !important;
}

/* Set the colors and decoration on links. */

.perm-horiz > li > a,
.perm-vert > li > a
{
   color: inherit;
   text-decoration: none;
}

.perm-horiz > li > a:hover,
.perm-vert > li > a:hover
{
   text-decoration: underline;
}

/* Suppress bullets on menu items. */

.perm-horiz > li,
.perm-vert > li
{
   list-style-type: none;
}

/* Set the menu padding */

.perm-horiz,
.perm-vert
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;

   padding: 0;
}

/* Vertical padding */

/* Set the padding between menu items (li elements). */

.perm-vert > li
{
   padding: 5px 5px 0px 15px;
   text-indent: -10px ;
   margin: 0 !important;
   cursor: default;
}

/* Add padding after the last menu item ... */

.perm-vert > li:last-of-type
{
   padding-bottom: 5px;
}

/* ... except when that menu item is at the end of an inlined submenu. */

.perm-vert > .perm-head > .perm-vert.inline > li:last-of-type
{
   padding-bottom: 0;
}

/* Horizontal padding */

/* Set the padding between horizontal menu items (li elements). */

.perm-horiz > li
{
   padding: 5px;
}

/* Set the top and bottom padding on horizontal, inlined submenu items to 0. */

.perm-horiz > .perm-head > .perm-horiz.inline > li
{
   padding: 0px 5px;
}

/********************/
/*      Layout      */
/********************/

/* Display horizontal submenus (ul elements) in a line */

.perm-head > .perm-horiz
{
   display: inline-block;
}

/* Display horizontal items (li elements) in a line and vertical items in a column (vertically) */

.perm-horiz > li
{
   display: inline-block;
}

.perm-vert > li
{
   display: block;
}

/* For submenus to expand horizontally (except inlined vertical submenus). */

.perm-horiz,
.perm-vert
{
/*   white-space: nowrap;*/
   white-space: normal;
}

.perm-vert > .perm-head > .perm-vert.inline
{
   white-space: normal;
}

/* Menu items that contain submenus must be positioned elements */

.perm-head
{
   position: relative;
}

/* Display non-inlined submenus of horizontal menus below the menu item at their head. */

.perm-horiz > .perm-head > .perm-horiz,
.perm-horiz > .perm-head > .perm-vert
{
   position: absolute;
   top: 100%;
   left: 0;
}

/* Display inlined horizontal submenus of horizontal menus in their normal inline-block position. */

.perm-horiz > .perm-head > .perm-horiz.inline
{
   position: relative;
   top: 0;
   left: 0;
}

/* Display non-inlined submenus of vertical menus to the right of the menu item at their head. */

.perm-vert > .perm-head > .perm-horiz,
.perm-vert > .perm-head > .perm-vert
{
   position: absolute;
   top: 0;
   left: 100%;
}

/* Display/indent inlined vertical submenus of vertical menus beneath the menu item at their head. */

.perm-vert > .perm-head > .perm-vert.inline
{
   position: relative;
   top: 100%;
   left: 5%;
   left: calc(10px);
   width: 95%;
   width: calc(100% - 10px);
}

/********************/
/*   Display/Hide   */
/********************/

/* Initially hide submenus. */

.perm-head > .perm-horiz > li,
.perm-head > .perm-vert > li
{
   display: none;
}