/* CSS for metrics client */

body {
  font: 11px/14px Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#toolbar {
  background-color: #333;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
}

#toolbar #toolbar-wrapper {
  padding: 4px;
}

#toolbar #appinfo {
}

#toolbar a:link, #toolbar a:visited, #toolbar a:active {
  color: #ea0;
  text-decoration: none;
}

#toolbar a:hover {
  text-decoration: underline;
}

#infobar {
  clear: left;
}

#infobar #messages {
  padding: 2px 4px;
}

#grapharea {
  padding: 2px 4px;
}

#main {
}

.box {
  background-color: #fff;
  border: thin solid #000;
}

.ui-graph {
  position: relative;
}

.ui-graph-titlebar {
  position: absolute;
/*  height: 16px;
  line-height: 16px;
  overflow: hidden;
  z-index: 1;*/
}

.set-color-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  line-height: 10px;
  margin: 0 4px 0 2px;
}

.selectable {
  cursor: pointer;
}

.selectable:hover {
  text-decoration: underline;
}

.ui-graph-settab {
  float: left;
/*  width: 64px;*/
}

.ui-graph-tabtitle {
  background-color: #fff;
  padding: 0 4px;
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  overflow: hidden;
  cursor: pointer;
}

.ui-graph-tabbody {
  position: absolute;
  top: 21px;
  padding: 4px;
  width: 300px;
  background-color: #fff;
  border: 1px solid #333;
  z-index: 2;
}

.ui-graph-tabbody>div {
  padding-bottom: .5em;
}

.ui-graph canvas {
  position: absolute;
  top: 16px;
}

.ui-graph-sidebar {
  display: none;
}

.window {
  background-color: #fff;
  border: thin solid #000;
  position: fixed;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
}

#about, #changelog, #help {
  display: none;
  padding: .5em;
  overflow: auto;
}

#selector {
  height: auto;
}

#selector-wrapper {
  padding: .5em;
}

#selector label {
  font-weight: bold;
}

#selector #selector-search {
  margin: .5em 0;
}

#selector #selector-tags {
  float: left;
  width: 120px;
  margin-right: 8px;
}

#selector #selector-tags>div {
  background-color: #eee;
  color: #a00;
  cursor: pointer;
  margin: .7em 0;
  padding: .5em;
}

#selector #selector-tags>div.selected {
  background-color: #ccc;
}

#selector #selector-tags>div:hover {
  background-color: #ddd;
  text-decoration: underline;
}

#selector #selector-suggestions-wrapper {
}

#selector #selector-suggestions-wrapper label {
  display: block;
  padding: .5em 0;
}

#selector #selector-suggestions {
}

#selector #selector-suggestions .item {
  clear: left;
  color: #a00;
  cursor: pointer;
  padding: .3em .5em;
}

#selector #selector-suggestions .item:hover {
  text-decoration: underline;
}

#selector #selector-suggestions .item.even {
  background-color: #eee;
}

#selector #selector-suggestions .item.focus {
  background-color: #ccc;
}

#selector #selector-suggestions .item-title {
  margin-left: 4px;
  margin-right: 4px;
}