/* Layout.css for Mocha UI
 *
 * Theme: Default
 *
 * Copyright:
 * Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
 *
 * License:
 * MIT-style license.
 *
 * Required by:
 * Layout.js
 *
 * Modified for Dark Mode by:
 * Raymond Lanser
 *
 * */
/* Layout 
 * ---------------------------------------------------------------- */
/* Sass Document */ 
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
/* Main mixin for generating theme variables from lists */
/* Four @each statements, instead of one earlier in the nesting creeates a more succinct final css. */
:root {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --row-select: #94BBD8;
    --hover-color: #d1c52a;
    --border-col: #6f6f6f;
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --row-select: #94BBD8;
  --hover-color: #d1c52a;
  --border-col: #6f6f6f;
}

/* Early version of the mixin for seperate dark and light lists. May still prove useful. */
/* Div Background Properties Mixin */
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
:root {
  --bg-color: #fff;
  --bg-color-tint: #f2f2f2;
  --bg-color-opp: #222;
  --bg-menu: #eee;
  --font-color: #000;
  --font-tint: #555;
  --font-dtint: #555;
  --invert-image: invert(0%);
  --row-alt: #eee;
  --selected-text: #fff;
  --divider-border: #ebebeb;
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --bg-color: #fff;
  --bg-color-tint: #f2f2f2;
  --bg-color-opp: #222;
  --bg-menu: #eee;
  --font-color: #000;
  --font-tint: #555;
  --font-dtint: #555;
  --invert-image: invert(0%);
  --row-alt: #eee;
  --selected-text: #fff;
  --divider-border: #ebebeb;
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --bg-color: #121212;
    --bg-color-tint: #202020;
    --bg-color-opp: #eee;
    --bg-menu: #444;
    --font-color: #fff;
    --font-tint: #ddd;
    --font-dtint: #bbb;
    --invert-image: invert(100%);
    --row-alt: #2a2a2a;
    --selected-text: #000;
    --divider-border: #363636;
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --bg-color: #121212;
  --bg-color-tint: #202020;
  --bg-color-opp: #eee;
  --bg-menu: #444;
  --font-color: #fff;
  --font-tint: #ddd;
  --font-dtint: #bbb;
  --invert-image: invert(100%);
  --row-alt: #2a2a2a;
  --selected-text: #000;
  --divider-border: #363636;
}

html, body {
  background: var(--bg-color);
}

body {
  margin: 0;
  /*color: var(--font-color)*/
}

#desktop {
  position: relative;
  min-width: 400px;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  cursor: default;
}

#desktopHeader {
  background: var(--bg-color-tint);
}

/* Hidden Index Title Element, Wrapper does not exist */
#desktopTitlebarWrapper {
  position: relative;
  height: 45px;
  overflow: hidden;
  background: #718BA6 url("../images/bg-header.gif") repeat-x;
}

#desktopTitlebar {
  padding: 7px 8px 6px;
  height: 32px;
  background: url("../images/logo.gif") no-repeat;
  background-position: left 0;
}
#desktopTitlebar h1.applicationTitle {
  display: none;
  margin: 0;
  padding: 0px 5px 0px 0px;
  font-size: 20px;
  line-height: 25px;
  font-weight: bold;
  color: var(--selected-text);
}
#desktopTitlebar h2.tagline {
  padding: 7px 0px 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #d4dce4;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
#desktopTitlebar h2.tagline .taglineEm {
  color: var(--selected-text);
  font-weight: bold;
}

#topNav {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  position: absolute;
  right: 0;
  top: 0;
  color: #d4dce4;
  text-align: right;
  padding: 13px 10px 0 0;
}
#topNav a {
  color: var(--selected-text);
  font-weight: normal;
}
#topNav a:hover {
  text-decoration: none;
}

/* Navbar */
#desktopNavbar {
  background: var(--bg-color);
  margin: 0;
  height: 20px;
  border-bottom: 1px solid #3f3f3f;
}
#desktopNavbar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 12px;
}
#desktopNavbar > ul > li {
  float: left;
}
#desktopNavbar a {
  display: block;
}

#desktopNavbar ul li a {
  /*padding: 6px 10px 6px*/
  color: var(--font-color);
  font-weight: normal;
  padding: 2px 10px 0px;
}
#desktopNavbar ul li a:hover {
  color: var(--font-color-tint);
  background-color: var(--bg-color-tint);
}

#desktopNavbar li ul {
  border: 1px solid #3f3f3f;
  background: var(--bg-color-tint);
  position: absolute;
  left: -999em;
  z-index: 8000;
}
#desktopNavbar li ul::before {
  content: "";
  background-color: var(--mocha-border-lte);
  opacity: 0.8;
  width: 20px;
  height: 100%;
  position: absolute;
  left: 0px;
}

#desktopNavbar li:hover ul ul, #desktopNavbar li:hover ul ul ul, #desktopNavbar li.ieHover ul ul, #desktopNavbar li.ieHover ul ul ul {
  left: -999em;
}

#desktopNavbar li ul ul {
  margin: -22px 0 0 163px;
}

#desktopNavbar li ul li .check {
  position: absolute;
  top: 8px;
  left: 6px;
  width: 5px;
  height: 5px;
  background: var(--bg-color-tint);
  overflow: hidden;
  line-height: 1px;
  font-size: 1px;
}
#desktopNavbar li ul li a {
  position: relative;
  /*padding: 1px 9px 1px 25px*/
  min-width: 120px;
  color: var(--font-dtint);
  font-weight: normal;
  /* Fix By Chris */
  padding: 1px 10px 1px 20px;
  /* Reduce left padding */
}
#desktopNavbar li ul li a:hover {
  background: var(--row-select);
  color: #fff;
}
#desktopNavbar li ul li a:hover .check {
  background: var(--bg-color-tint);
}

#desktopNavbar li:hover ul, #desktopNavbar li.iehover ul, #desktopNavbar li li:hover ul, #desktopNavbar li li.iehover ul, #desktopNavbar li li li:hover ul, #desktopNavbar li li li.iehover ul {
  left: auto;
}

#desktopNavbar li:hover {
  position: static;
}

li.divider {
  margin-top: 2px;
  padding-top: 3px;
  border-top: 1px solid var(--divider-border);
}

#pageWrapper {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-col);
  border-bottom: 1px solid var(--border-col);
  /*height: 100%*/
}

/* Footer */
#desktopFooterWrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  overflow: hidden;
}

#desktopFooter {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  height: 24px;
  padding: 6px 8px 0;
  background: var(--bg-color-tint);
}

/* Panel Layout---------------------------------------------------------------- */
/* Columns */
.column {
  position: relative;
  float: left;
  overflow: hidden;
}

/* Panels */
.panel {
  position: relative;
  overflow: auto;
  background: var(--bg-color);
  /*border-bottom: 1px solid var(--border-col) */
  border-bottom: 1px solid var(--border-lte);
}

.panelWrapper.collapsed .panel-header {
  border-bottom: 0;
}

.panelAlt {
  background: var(--bg-color-tint);
}

.bottomPanel {
  border-bottom: 0;
}

.pad {
  padding: 8px;
}

#mainPanel {
  background: var(--bg-color);
}

.panel-header {
  position: relative;
  background: var(--bg-color-tint);
  /*background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x */
  height: 30px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-lte);
}
.panel-header h2 {
  display: inline-block;
  font-size: 12px;
  margin: 0;
  padding: 3px 8px 0px;
  height: 22px;
  overflow: hidden;
  color: #333;
}

.panel-headerContent {
  padding-top: 2px;
}

.panel-headerContent.tabs {
  background-position: left -68px;
}

.panel-collapse {
  background: var(--collapseIcon) center/16px no-repeat;
  margin-top: 2px !important;
}

.panel-expand {
  background: var(--collapseIcon) center/16px no-repeat;
  transform: rotate(180deg);
}

.icon16 {
  margin: 4px 0 0 2px;
  cursor: pointer;
}

/* Column and Panel Handles */
.horizontalHandle {
  filter: var(--invert-image);
  height: 4px;
  line-height: 1px;
  font-size: 1px;
  overflow: hidden;
  background: #eee url("../images/bg-handle-horizontal.gif") repeat-x;
}

.horizontalHandle.detached .handleIcon {
  background: transparent;
}

.horizontalHandle .handleIcon {
  margin: 0 auto;
  height: 4px;
  line-height: 1px;
  font-size: 1px;
  overflow: hidden;
  background: url("../images/handle-icon-horizontal.gif") center center no-repeat;
}

.columnHandle {
  filter: var(--invert-image);
  min-height: 10px;
  float: left;
  width: 4px;
  overflow: hidden;
  background: #c3c3c3 url("../images/handle-icon.gif") center center no-repeat;
  border: 1px solid var(--border-col);
  border-top: 0;
  border-bottom: 0;
}

/* Toolboxes */
.toolbox {
  float: right;
  margin-top: 3px;
  padding: 0 5px;
  height: 24px;
  overflow: hidden;
  text-align: right;
}

div.toolbox.divider {
  /* Have to specify div here for IE6's sake */
  background: url("../images/toolbox-divider.gif") repeat-y;
  padding-left: 8px;
}

.toolbox img.disabled {
  cursor: default;
}

* html .iconWrapper {
  padding: 1px;
  border: 0;
}

.iconWrapper {
  display: inline-block;
  height: 22px;
  min-width: 22px;
  overflow: hidden;
  border: 1px solid transparent;
}
.iconWrapper img {
  cursor: pointer;
  margin: 0;
  padding: 3px;
}
.iconWrapper:hover {
  border: 1px solid #a0a0a0;
}

#spinnerWrapper {
  width: 16px;
  height: 16px;
  background: url("../images/spinner-placeholder.gif") no-repeat;
  margin: 4px 5px 0px;
}

#spinner {
  display: none;
  background: url("../images/spinner.gif") no-repeat;
  width: 16px;
  height: 16px;
}

#desktopFooter td {
  vertical-align: top;
  text-align: left;
}

td.speedLabel {
  cursor: pointer;
  min-width: 18em;
}

#freeSpaceOnDisk {
  white-space: nowrap;
}

#DHTNodes {
  white-space: nowrap;
}