/*
  This style sheet takes care of the general layout and the top menu layout and styles.
  The submenus for level2 items (that should pop up to the right of the level 2 item) should be handled by the master.
  One way is to calculate using JS where exactly the menu needs to be positioned. Or is can be absolute (bad).
*/

body {
  /*
    Make this color the same as the MasterMiddle background color.
    The MasterMiddle has bottom: 0;, which makes it easier to size the canvas tags of an app,
    but makes any content that goes beyond the bottom of the visible page go beyond MasterMiddle's bottom.
  */
  background-color: #EEEEDD;
  color: #202020;
  font-family: Trebuchet MS, Sans Serif, Rockwell, Arial, Consolas, "Courier New", Courier, monospace;
  margin: 0; padding: 0; height: 100%;
  user-select: none;
}

html, form { margin: 0; padding: 0; height: 100%; }
h1, h2, h3 { margin: 0; }

textarea, input[type="text"], input[type="password"] {
  font-family: monospace;
  font-size: 1.0em;
}


/* main layout */

#MasterTop, #MasterMiddle {
  position:absolute;
  width:100%;
  margin: 0;
  padding: 0;
}

#MasterTop { background-color: lightgray; }
#MasterTopInner { position: relative; }

.WideLayout #MasterTop { height: 100px; }
.WideLayout #MasterTopInner { height: 90px; margin: 5px 5px 5px 5px; }

.MediumLayout #MasterTop { height: 95px; }
.MediumLayout #MasterTopInner { height: 85px; margin: 5px 5px 5px 5px; }

.ThinLayout #MasterTop { height: 90px; }
.ThinLayout #MasterTopInner { height: 80px; margin: 5px 5px 5px 5px; }


#MasterTopTitle {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}
.WideLayout #MasterTopTitle { font-size: 20px; }
.MediumLayout #MasterTopTitle { font-size: 16px; }
.ThinLayout #MasterTopTitle { font-size: 12px; }


/* messaging 
   below title, login, and top menu
   Put it at the bottom of the master top inner, and let it take up what space it does.
*/
#MasterTopMessage { position: absolute; bottom: 0; }
.WideLayout #MT_MessageLB { font-size: 20px; }
.MediumLayout #MT_MessageLB { font-size: 16px; }
.ThinLayout #MT_MessageLB { font-size: 12px; }
.MasterTopMessageError { color: red; }
.MasterTopMessageInfo { color: blue; }


/* login */

#MasterTopLogin {
  position: absolute;
  right: 0;
  min-width: 400px;
}
#MasterTopLoginInner {
  position: relative;
}
#MasterTopLoginInner > div {
  box-sizing: border-box;
  margin: 0;
  text-align: right;
}
.WideLayout #MasterTopLoginInner > div { font-size: 14px; }
.MediumLayout #MasterTopLoginInner > div { font-size: 14px; }
.ThinLayout #MasterTopLoginInner > div { font-size: 12px; }

#MasterTopLoginInner button {
  margin: 0;
  font-size: smaller;
  /*border: 0;*/
}
#MTL_unTB, #MTL_pwTB {
  width: 150px;
}
.loginMessageError {
  color: red;
}
.loginMessageInfo {
  color: blue;
}


/* the content of the page */

#MasterMiddle { bottom: 0; background-color: inherit; }
/* These tops must match the corresponding heights of MasterTop. */
.WideLayout #MasterMiddle { top: 100px; }
.MediumLayout #MasterMiddle { top: 95px; }
.ThinLayout #MasterMiddle { top: 90px; }


/*
  Top Menu

  The #MasterTopMenu is a div that contains the whole top menu.
  Each menu item, including any dropdown submenu, is contained in a div one level below #MasterTopMenu, with class .MTML1Item.
  Each .MTML1Item has at least one div child, the first containing the item name, with class .MTML1Heading.
  If the heading can be clicked, it contains an <a> tag and also has an onclick, else it contains just text and no onclick.
  If a top menu item has a dropdown menu, there is a second div one level below .MTML1Item, containing all the sub items, with class .MTML1Submenu.
  Each submenu item is in its own div, with either a heading, or a heading and a submenu.

  Item: <div>
    Heading: <div>
      either text or <a>
    Submenu: <div>
    (Submenu is an optional part of an Item)
      list of Items


  <div id="MasterTopMenu"> <!--*** The class for this would be "MTML0Submenu" *** ->

    <div class="MTML1Item">
      <div class="MTML1Heading" onclick="location.href = '$locDefault';">
        <a id="homeBT" href="$locDefault">Home</a>
      </div>
    </div>

    <div class="MTML1Item">
      <div class="MTML1Heading">
        Item With Submenu
      </div>
      <div class="MTML1Submenu">
        <div class="MTML2Item">
          <div class="MTML2Heading" onclick="location.href = '$locUsers';">
            <a href='$locUsers'>Users</a>
          </div>
        </div>
      </div>
    </div>

  </div>

*/


#MasterTopMenu {
  position: absolute;
  user-select: none;
}
.WideLayout #MasterTopMenu { top: 30px; min-width: 550px; }
.MediumLayout #MasterTopMenu { top: 26px; min-width: 550px; }
.ThinLayout #MasterTopMenu { top: 22px; min-width: 550px; }

/* L1 (top level) items */

.MTML1Item {
  margin-right: 5px;
  float: left;
  position: relative;
  height: 34px;
}

/* This is actually a .MTML1Heading. */
.MTML1Item .clickable:hover {
  text-decoration: underline;
}

/* Style the heading text or link, unhovered. */
.MTML1Heading {
  font-weight: bold;
  border: 1px solid black;
  padding: 5px;
  height: 22px;

  background-color: black;
  color: white;
}
/* Style the heading text or link, hovered. */
.MTML1Heading:hover {
  background-color: white;
  color: black;
}


/* L1 submenu - show directly below the L1 item */

/* The submenu is hidden by default. This positions it below the menu heading. */
.MTML1Submenu {
  display: none;
  position: absolute;
  top: 34px;
  z-index: 2; /* so menus will show up in front of #MasterMiddle */
}

/* Show the submenu when hovering over the menu item. */
/* This also fires when over the displayed submenu itself. */
/*
 * This has been taken over by JS to display on click.
.MTML1Item:hover > .MTML1Submenu {
  display: block;
}
*/

.MTML2Item { }

/* This is actually a .MTML2Heading. */
.MTML2Item .clickable:hover {
  text-decoration: underline;
}

/* Style the heading text or link, unhovered. */
.MTML2Heading {
  border: 1px solid darkgray;
  border-bottom-color: #0F0F55;

  padding: 5px;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;

  background-color: #0F0F55;
  color: white;
}
/* Highlight the submenu item, when hovering over it. */
.MTML2Heading:hover {
  border-color: black;

  background-color: white;
  color: black;
}


/* L2 submenu - show to the right and start at same height. */

/* The submenu is hidden by default. This positions it to the right of the lvl1 2 item. */
.MTML2Submenu {
  display: none;
  position: absolute;
  /* left is set by JS. */
  /* top is set inline on control. */
  top: unset;
  left: unset;
  z-index: unset;
}

/* Show the submenu when hovering over the menu item. */
/* This also fires when over the displayed submenu itself. */
.MTML2Item:hover > .MTML2Submenu {
  display: block;
}

.MTML3Item { }

/* This is actually a .MTML3Heading. */
.MTML3Item .clickable:hover {
  text-decoration: underline;
}

/* Style the heading text or link, unhovered. */
.MTML3Heading {
  border: 1px solid darkgray;
  border-bottom-color: #2121A0;

  padding: 5px;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;

  background-color: #2121A0;
  color: white;
}
/* Highlight the submenu item, when hovering over it. */
.MTML3Heading:hover {
  border-color: black;

  background-color: white;
  color: black;
}


/* L3 submenu - show to the right and start at same hieght */

/* The submenu is hidden by default. This positions it to the right of the lvl1 3 item. */
.MTML3Submenu {
  display: none;
  position: absolute;
  /* left is set by JS. */
  /* top is set inline on control. */
  top: unset;
  left: unset;
  z-index: unset;
}

/* Show the submenu when hovering over the menu item. */
/* This also fires when over the displayed submenu itself. */
.MTML3Item:hover > .MTML3Submenu {
  display: block;
}

.MTML4Item { }

/* This is actually a .MTML4Heading. */
.MTML4Item .clickable:hover {
  text-decoration: underline;
}

/* Style the heading text or link, unhovered. */
.MTML4Heading {
  border: 1px solid darkgray;
  border-bottom-color: #4242D0;

  padding: 5px;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;

  background-color: #4242D0;
  color: white;
}

/* Highlight the submenu item, when hovering over it. */
.MTML4Heading:hover {
  border-color: black;

  background-color: white;
  color: black;
}