html {
  height: 100%;
}
body {
  margin: 0;
  padding-top: 41px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
  background-color: #222;
  height: calc(100% - 50px);
  font-family: 'Open Sans', sans-serif;
}
a {
  color: #ACE;
  text-decoration: none;
}
a:hover {
  color: #79B;
}

/* Navigation bar */
nav {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  padding: 10px;
  width: calc(100% - 20px);
  color: #FFF;
}
.navbar-sep {
  margin-left: 4px;
  border-left: 1px solid #888;
  padding-right: 8px;
  width: 1px;
}
.navbar-demo {
  font-weight: 100;
  font-size: 9pt;
}
nav > a:link    { color: #EEE; text-decoration: none; border: 0px; -moz-outline-style: none; }
nav > a:active  { color: #EEE; text-decoration: none; border: 0px; -moz-outline-style: none; }
nav > a:visited { color: #EEE; text-decoration: none; border: 0px; -moz-outline-style: none; }
nav > a:hover   { color: #EEE; text-decoration: none; border: 0px; -moz-outline-style: none; }
nav > a:focus   { outline: none; -moz-outline-style: none; }

/* Separation */
.split {
  box-sizing: border-box;
}
.gutter {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50%;
  background-color: #444;
}
.gutter.gutter-horizontal {
  cursor: col-resize;
  background-image: url('resources/grips_vertical.png');
  filter: brightness(0.5);
}
.gutter.gutter-vertical {
  cursor: row-resize;
  background-image: url('resources/grips_horizontal.png');
  filter: brightness(0.5);
}
.split.split-horizontal,
.gutter.gutter-horizontal {
  height: 100%;
  float: left;
}

/* Panes */
.pane {
  height: 100%;
  background-color: #666;
  color: #EEE;
  font-size: 14px;
}
.content {
  position: relative;
  overflow-y: scroll;
  width:100%;
  height:calc(100% - 28px);
}
.content::-webkit-scrollbar {
  width: 10px;
}
.content::-webkit-scrollbar-track {
  background: #666;
  border-radius: 20px;
}
.content::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 20px;
}
.content input[type="text"]{
  font-family: 'Inconsolata';
  font-size: 14px;
  color: #EEE;
  background-color: rgba(255,255,255, 0.1);
  border: none;
}
.content > table {
  margin: 0px 10px;
  width: calc(100% - 20px);
  text-align: left;
  border-collapse: collapse;
}

.row-instruction {
  font-family: 'Inconsolata';
  font-size: 14px;
}
.row-instruction:hover {
  background-color: rgba(255,255,255, 0.1);
}

.row-register {
  font-family: 'Inconsolata';
  font-size: 14px;
}
.row-register:hover {
  background-color: rgba(255,255,255, 0.1);
}

.row-memory {
  font-family: 'Inconsolata';
  font-size: 14px;
}

/* Toolbar */
.toolbar {
  background-color: #444;
  padding: 4px;
  height: 20px;
  color: #EEE;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE/Edge */
          user-select: none; /* Chrome/Opera */
}
.toolbar-sep {
  margin-left: 2px;
  border-left: 1px solid #555;
  margin-right: 5px;
  width: 0px;
}
.toolbar-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #EEE;
  background-color: #555;
  text-align: center;
  cursor: pointer;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.toolbar-button:hover  { background-color: #666; }
.toolbar-button:active { color: #DDD; }
.toolbar-button.disabled {
  background-color: #555;
  color: #999;
  box-shadow: none;
  cursor: default;
}