html,
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
}

#page {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background: #0769ad;
  width: 100%;
  height: 100%;
}

#header {
  background: #033E68;
  color: #FFF;
  text-align: center;
  margin: 3px auto;
  margin-top: -1px;
  padding: .5em;
  border-bottom: 1px solid #4290C7;
  width: 100%;
}

#header h2 {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
}

#header a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}

#header .left {
  float: left;
}

#header .ui-button {
  background: #055186;
  border: 0;
}

#content {
  background: #222;
  border-radius: 6px;
  height: 90%;
  margin: 0 auto;
  width: 85%;
  overflow: hidden;
  padding: .5em;
}

#input-wrap {
  border: 0;
  border-bottom: 1px solid #FFC316;
  padding: .25em;
  width: 99%;
}

#input-wrap form {
  color: #A37900;
  margin: 0;
}

#input-wrap form .tool {
  background: #FFBE00;
  border-radius: 3px;
  display: inline-block;
  padding: .25em;
}

#input-wrap form .tool input {
  width: 240px;
}

#input-wrap form .tool button {
  background: #A37900;
  color: #FFD14A;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid #FF7B4A;
  border-radius: 3px;
  padding: .25em .75em;
}

#input-wrap form .tool .ui-button {
  background: #A37900;
  color: #FFD14A;
  border-color: #FF7B4A;
  padding: .125em;
  margin-top: -.125em;
}

#input-wrap form .tool button:hover,
#input-wrap form .tool .ui-button:hover {
  background: #FFD14a;
  color: #A37900;
}

.ui-menu {
  background: #A37900;
  color: #FFD14A;
  border-color: #FF7B4A;
  width: 245px;
}

.ui-menu .ui-state-active,
.ui-menu .ui-state-active:hover {
  background: #FFD14a;
  color: #A37900;
  border-color: #FF7B4A;
}

#log {
  height: 2em;
  overflow: auto;
  border-bottom: 1px solid #1C7DC3;
  color: #4290C7;
  padding: .5em;
  font-size: .85em;
  margin-top: 3px;
}

#log label {
  display: block;
  font-family: monospace;
}

#result {
  color: #fff;
  overflow: auto;
  clear: both;
  width: 99%;
  height: 80%;
}

.info {
  color: #FF4500;
  font-size: 8pt;
  padding: 3px;
}

#result table {
  color: #000000;
  margin: 10px;
  border-collapse: collapse;
  box-sizing: border-box;
  display: table;
  text-indent: 0;
}

#result table tr {
  background-color: #ffffff;
  color: #000000;
  font-size: 8pt;
  vertical-align: top;
}

#result table tr.head {
  background-color: #e1e1e1;
}

#result table tr.open {
  background-color: #ccffcc;
}

#result table tr.closed {
  background-color: #ffcccc;
}

#result table tr.head th,
#result table tr.head td {
  color: #000000;
  font-weight: bold;
  border-bottom: 1px solid #000;
  padding: 1px 3px;
}

#result table tr {
  display: table-row-group;
  vertical-align: middle;
}

#result table td {
  padding: 2px;
  border-bottom: 1px solid #9f9f9f;
}

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */

.ui-icon[class*=" fa-"] {
  /* Remove the jQuery UI Icon */
  background: none repeat scroll 0 0 transparent;
  /* Remove the jQuery UI Text Indent */
  text-indent: 0;
}

/* Allow use of icon-large to be properly aligned */

.ui-icon.icon-large {
  margin-top: -0.75em;
}

.hidden {
  display: none;
}

#seeking {
  color: rgba(255,255,255,.75);
  top: 50%;
  left: 50%;
}