html   { display: block; position: relative; width: 100%;  height: 100%; margin:0; padding:0; }  
body   { display: block; position: relative; width: 100%;  height: 100%; margin:0; padding:0; overflow-y:scroll; }  

#layerScroll { display: block; position: relative; width: 100%;  height: auto;  z-index:  0; overflow: hidden; pointer-events: auto; min-height: 100%; }
#layerFixed  { display: block; position: fixed;    width: 100%;  height: 100%;  z-index: 10; overflow: hidden; pointer-events: none; }

#frameCover  { display: none;  position: absolute; width: 100%;  height: 100%;  z-index: 10; overflow: hidden; pointer-events: auto; background:black; opacity:0.5;}

#frameHead   { display: none;  position: absolute; width: 100%;  height: 3.5em; z-index: 20; overflow: hidden;  padding:0.3333em; pointer-events: auto; }
#frameTools  { display: none;  position: absolute; width: 100%;  height: auto;  z-index: 10; overflow: visible; pointer-events: auto; }
#frameMenu   { display: none;  position: absolute; width: 216px; height: 100%;  z-index: 30; overflow: auto;    pointer-events: auto; }

#blockBody   { display: block; position: static;   margin:0.25em; overflow: visible; background: inherit; }

#blockHead   { display: block; position: relative; margin:0.50em; overflow: hidden;  height:2em;  line-height: 2em; font-weight: bold; margin-left: 1em; }
#blockTools  { display: block; position: relative; margin:0.25em; overflow: visible; height:auto; line-height: 2em; }
#blockMenu   { display: block; position: relative; margin:0.75em; overflow: auto; }


#loginBox {
  position: fixed; 
  left:0; top:0; right:0; bottom:0;
  width: 18em; height:30em; min-height:18em;
  margin:auto; padding:1em;  
  background: #444; 
  border: 1px solid #048; 
  border-radius: 1em;
  text-align: center;
}

#frameHead > i {
  display: inline-block;
  position: relative;
  margin: 0.25em;
  border: none;
  border-radius: 5px;
  padding: 0;
  width: 1.3333333em;
  height: 1.3333333em;
  line-height: 1.3333333em;
  font-size: 1.5em;;
  text-align: center;
  box-shadow: none;
  user-select: none;
  cursor: pointer;
}


#frameMenu button {
  display: block;
  margin: 0.25em 0 0.5em;
  width: 100%;
  text-align: left;
}

#popupMenu {
  display: none;
  position: fixed;
  width: auto;
  height: auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: auto;
}

.menuitem {
  display: block;
  padding:8px;
  margin:8px;
  color: inherit;
  cursor:pointer;
  text-decoration: none;
  border-radius: 4px;  
}

.menuitem:hover {
  background: #E0D4C8;
  text-decoration: none;
}

.menuitem.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.menuoption {
  background: #E8E8E8;
  color: black;
  border: 1px solid #909090;
  line-height: 125%;
}

.menuoption>img {
  margin: 0px;
}

.signaled {
  color: #004090;
}


@media (min-width: 1024px) {
  #layerScroll { width: 1024px; left: 50%; margin-left: -512px; }
  #layerFixed  { width: 1024px; left: 50%; margin-left: -512px; }
}

@media (min-width: 864px) {
  #frameMenu   { left:0px !important; z-index:101; }
  #frameHead   { padding-left: 216px !important; }
  #frameTools  { padding-left: 216px !important; }
  #layerScroll { padding-left: 216px !important; }
  #btnMenu     { display:none !important; }
}

@media (max-width: 863px) {
  #frameMenu   { left: -240px; z-index:10001; }
  #btnMenu     { display: inline-block; }
}