
html, body {
  padding: 0; margin: 0;
  width: 100%; height: 100%;
  position: absolute;
}

body {
  font-family: arial, helvetica, verdana, sans-serif;
  overflow-x: hidden;
  background: #000;
  color: #fff;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td {
  border: solid 1px #666;
  margin: 0;
  padding: 2px;
}

th {
 text-align: left;
}

#header {
  width: 100%;
  background: rgb(37,37,37);
  padding: 0; margin: 0;
}

#header div.header-bg {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVQIW2NkQAOMGAI2NjYzgYJnjxw5MgskyQgU+A+kZwEF0kECALGKCgWXotQhAAAAAElFTkSuQmCC) repeat;
  height: 56px;
  position: relative;
}

#header div.no-backend-users-warning {
  position: absolute;
  top: 4px;
  left: 300px;
  background: #ffdead;
  color: #000;
  padding: 2px 10px;
  border-radius: 4px;
}

#header img {
  float: left;
  margin: 9px 0 0 9px;
}

#header h1 {
  color: #fff;
  line-height: 56px;
  margin: 0 0 0 96px;
  padding: 0;
}

div.user-details {
  text-align: center;
  color: white;
}

div.user-details input {
  width: 100pt;
}

#navmenu-toggle {
  float: left;
  margin-left: 10px;
  font-size: 40px;
  line-height: 56px;
  color: #999;
  cursor: pointer;
}

#navmenu {
  position: absolute;
  width: 300px;
  top: 56px;
  bottom: 0;

  background: #333;
  border-right: solid 1px #666;
}

#navmenu div.navmenu-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
}

#navmenu ul {
  list-style: none;
  padding: 0; margin: 0;
}

#navmenu div.navmenu-bg > ul {
  -webkit-box-shadow: inset 0 0 5px 5px #222;
  -moz-box-shadow: inset 0 0 5px 5px #222;
  box-shadow: inset 0 0 5px 5px #222;
}

#navmenu li {
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px solid #1a1a1a;
}

#navmenu li.active {
  -webkit-box-shadow: inset 0 0 15px 3px #222;
  -moz-box-shadow: inset 0 0 15px 3px #222;
  box-shadow: inset 0 0 15px 3px #222;
}

#navmenu li a, #navmenu li span {
  display: block;
  height: 26pt;
  line-height: 26pt;
  color: #fff;
  padding-left: 1em;
}

#navmenu li span  span {
  padding-left: 0;
}

#navmenu li span {
  background: #333;
}

#navmenu li span span{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVQIW2NkQAOMGAI2NjYzgYJnjxw5MgskyQgU+A+kZwEF0kECALGKCgWXotQhAAAAAElFTkSuQmCC) repeat;
  color: #999;
}

#navmenu li a:after {
  content: "▸";
  float: right;
  margin-right: 1em;
}

#navmenu li li a, #navmenu li li span {
  padding-left: 2em;
}

#navmenu li li li a, #navmenu li li li span {
  padding-left: 3em;
}

#maincontent {
  position: absolute;
  top: 56px;
  left: 310px;
  right: 0; bottom: 0;
  overflow: auto;
}

#status {
  position: absolute;
  margin: 0 auto;
  height: 20px;
  top: 18px;
  left: 310px;
  padding: 0 12px;
  border-radius: 3px;
}

.success {
  background: #fff1a8;
  display: block;
}

.error {
  background: #990000;
  color: #fff;
  display: block;
}

.none {
  display: none;
}

a {
  color: #66f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

fieldset {
  border-radius: 5px;
  padding: 8px;
}

fieldset legend {
  font-weight: bold;
  color: #900;
  padding: 0 8px;
}

button, a.button, input[type=submit], input[type=button] {
  -moz-box-shadow: inset 0px 1px 0px 0px #cae3fc;
  -webkit-box-shadow: inset 0px 1px 0px 0px #cae3fc;
  box-shadow: inset 0px 1px 0px 0px #cae3fc;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
  background: -moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
  background-color: #79bbff;
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #469df5;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px 1px 0px #287ace;
  cursor: pointer;
}

.spinner {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.66);
  border: solid 2px rgba(255, 255, 255, 0.66);

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #aaa;
  height: 31pt;
}

.tabs li {
  float: left;
  border-top: solid 1px #aaa;
  border-right: solid 1px #aaa;
  border-bottom: solid 1px #efefef;
  border-radius: 4px 4px 0 0;
}

.tabs li:nth-child(1) {
  border-left: solid 1px #aaa;
}

.tabs a {
  display: block;
  padding: 0 1em;
  line-height: 30pt;
  height: 30pt;
}

.tabs a.selected {
  background: #aaa;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* popup-container is the same size as the main content area. */
#popup-scrim {
  display: none;
  position: absolute;
  top: 56px;
  left: 300px;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup {
  display: none;
  position: absolute;
  width: 500pt;
  left: 50%;
  top: 10%;
  margin-left: -250pt;
  background: white;
  border: solid 2px;
  border-radius: 5px;
  padding: 10pt;
}

.popup .popup-buttons {
  float: right;
}