html { background: white; }  /* linear-gradient(170deg, #9c9490, #3c3430) fixed; }  */

body { font: normal 16px sans-serif; }

#frameTop     { background: #BCE4E0; color: black; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.7); }   /* #C0E4E0 */ 
#frameLeft    { background: #D0ECE8; color: black; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.7); width: 240px; left: -256px;}
#frameRight   { background: #D0ECE8; color: black; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.7); width: 240px; right: -256px;}
#frameHead    { background: #086C64; color: white; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.7); }    
#frameTools   { background: #E8F8F4; color: black; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.5); }
#frameBody    { background: white;   color: black; }

#frameBody.form  { background: #e4efec; }   e4ece8

button  { background: #eee; }
.button { background: #eee; }
button:hover  { background: white; }
.button:hover { background: white; }

.homeitem {max-width: 576px;}
.box { background: #e4efec; color: black; } 
.box i { color: #086c64; } 
  
#loginBox { background: #e4efec; border: none; width:100%; height:100%; border-radius: 0; }
 
.browseitem { xborder-bottom-color: #888888; }

#frameLeft button { background: inherit; border:none; }
#frameLeft button:hover { background: #98CCC4;  }
#frameLeft button.selected { background: #086c64; color:white; }


#popupMenu { background: #e4efec; box-shadow: 0 0 6px  1px rgba(0, 0, 0, 0.7); }
.menuitem:hover { background: #98CCC4; }
.menuitem.selected, .menuitem.selected:hover { background: #90c4bc; color: white; }
.menuitem.disabled { background: inherit; opacity:0.5; cursor:default; }

h1, h2, h3 {
  background: #e0ece4;
}

a { color: #1e3b1f; }
a:visited { color: #1e4b1f; }
a.box { color: inherit; }

input { accent-color: #086c64; }

.popupWindow { background: #D0ECE8; border-color: #E0FCF8 #C0DCD8 #C0DCD8 #E0FCF8; }    /* D0ECE8 E0FCF8 C0DCD8 */
.popupWindowBody  { background: #e4efec; border-color:#A0BCB8 #E0FCF8 #E0FCF8 #A0BCB8; }   /* e4efec e4ece8 dcd8d4   xborder-color: #d4dcd8 #d4dcd8 #d4dcd8 #d4dcd8; */

@media (min-width: 864px) {
  #frameLeft   { left: 0px !important; }
  #frameRight  { right: 0px !important; }
  #frameHead   { left: 240px; right: 240px; }
  #frameTools  { left: 240px; right: 240px; }
  #frameBody   { left: 240px; right: 240px; }
  #frameHead i { display: none !important; }
}