#menu, #menu ul, #menu li, #menu a
{
    z-index: 9;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}


/* The bar is a wrapping row at every width: in a narrow pane (the
   prompt lab's viewer beside its prompt column, a phone) the menus
   flow onto a second line instead of stacking one per line. */
#menu >  ul
{
    padding: 0px 10px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#menu ul
{
    list-style: none;    
}

#menu > ul > li
{
    float: left;
    position: relative;
    padding-left: 3px; 
    padding-right: 3px;
    width: auto;
    margin-left: 0px; 
}

#menu ul ul li
{
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
}

#menu ul ul li a
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#menu  ul li
{
    outline: none;
}

#menu a
{
    display: block;
    text-decoration: none;
    padding: 5px 5px;
    color: rgb(68, 68, 68);
    cursor: default;
}

#menu a.inactive
{
    color: #999
}


#menu >  ul ul
{
    position: absolute;
    background: rgb(240, 240, 240);
    left: 0;
    top: 100%;
    visibility: hidden;
    opacity: 0.95;
    font-size: 15px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24); 
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: 0px;
}

#menu > ul ul ul
{
    left: 100%;
    top: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.popup-menu.mode-left #menu>ul ul ul {
   left: 0;
   transform: translateX( -100% );
 }
 .popup-menu.mode-top #menu>ul ul ul {
   top: 0;
   transform: translateY( -84px );
 }
    
 .popup-menu.mode-left.popup-menu.mode-top #menu>ul ul ul {
   left: 0;
   top: 0;
   transform: translateX( -100% ) translateY( -84px );
 }



#menu > ul  ul > li:last-child
{
    margin-bottom: 3px;
}

#menu > ul  ul > li:first-child
{
    margin-top: 3px;
}


#menu ul ul hr
{
    border: 1px solid rgb(201, 201, 201); 
    margin: 0px -15px;
}

#menu li > ul
{
    margin-left: 0px;
    padding-left: 0px;
}

#menu > ul ul li
{
    position: relative;
}

#menu > ul > li, #menu > ul > li > a
{
    background:  rgb(219, 230, 250); !important;
}


#menu ul li ul li > a,
#menu ul li ul li
{
    background: rgb(240, 240, 240);
    color: rgb(68, 68, 68);
}

#menu  ul li.visible > a,
#menu  ul li.visible, 
#menu.hoverable  ul li:hover > a,
#menu.hoverable  ul li:hover
{
    color: rgb(240, 240, 240)  !important;
    background: rgb(0, 144, 248)  !important;
}

#menu ul li ul .li-selected
{
    color: #407af2;
}


#menu.hoverable ul li.visible > ul,
#menu.hoverable ul li:hover > ul
{
    visibility: visible;
}

.li-heading, #menu.hoverable .li-heading:hover
{
    background: rgb(240, 240, 240);
    color: rgb(68, 68, 68);
    padding: 5px 5px;
    padding-right: 10px;
    font-weight: bold;
}

.sluice-icon-check
{
    padding-right: 5px;
}

.menu-right-icon
{
    margin-left: auto;
    padding-left: 12px;
    transform: scale(1.8,1.0);
}



/*  mobile stuff */



.dp-none {
    display: none;
}

@media only screen and (max-width: 600px){
    .dp-none {
        display: block;
    }
    /* the top-level items used to go float:none/display:block here,
       one menu per line, which ate the viewport in a narrow pane;
       they now wrap in the row above */
    .menuToggle
    {
      display: block;
      position: relative;
      
      z-index: 1;
      
      -webkit-user-select: none;
      user-select: none;
    }
    
    .menuToggle input
    {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      
      cursor: pointer;
      
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      
      -webkit-touch-callout: none;
    }
    
    /*
     * Just a quick hamburger
     */
    .menuToggle > span
    {
        left: 20px;
        top: 10px;
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      
      background: #cdcdcd;
      border-radius: 3px;
      
      z-index: 1;
      
      transform-origin: 4px 0px;
      
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    
    .menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }
    
    .menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }
    
    /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    .menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }
    
    /*
     * But let's hide the middle one.
     */
    .menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    /*
     * Ohyeah and the last one should go the other direction
     */
    .menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    .menuToggle input ~ #KDptZW51KQ
    {
      margin-top: 20px;
      max-height: 0px;
      transform: translate(-100%, 0);
      transition: all 0.5s;
    }
    
    .menuToggle input:checked ~ #KDptZW51KQ
    {
        max-height: 1000px;
      transform: none;
    }
}