/* Wrapper for controllers */
div.controllers-wrapper {
  display:table;
  margin-bottom:0.5em;
}

/* Wrapper for controller */
div.controller {
  width:15em;
  display:table-cell;
  font-size:70%;
  vertical-align:bottom;
  border-right:1.0em solid white;
}

/* Apply radius borders to the first and last div in the wrapper */
div.controller > div:first-child {
  border-radius:1.0em 1.0em 0 0;
}
div.controller > div:last-child {
  border-radius:0 0 1.0em 1.0em;
}

/* Active controller */
div.controller-active {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  background-color:#0000FF;
  background:-moz-linear-gradient(top, #0080FF 0%, #0000FF 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080FF), color-stop(100%,#0000FF)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #0080FF 0%,#0000FF 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #0080FF 0%,#0000FF 100%); /* W3C */
}

/* Fenced controller */
div.controller-fenced {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  background-color:#DF0101;
  background:-moz-linear-gradient(top, #FA5858 0%, #DF0101 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA5858), color-stop(100%,#DF0101)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #FA5858 0%,#DF0101 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #FA5858 0%,#DF0101 100%); /* W3C */
}

/* Idle controller */
div.controller-idle {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  margin-bottom:0.5em;
  background-color:#6E6E6E;
  background:-moz-linear-gradient(top, #BDBDBD 0%, #6E6E6E 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#BDBDBD), color-stop(100%,#6E6E6E)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #BDBDBD 0%,#6E6E6E 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #BDBDBD 0%,#6E6E6E 100%); /* W3C */
}

/* Online pool */
div.pool-online {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  margin-bottom:0.5em;
  background-color:#0B610B;
  background:-moz-linear-gradient(top, #04B404 0%, #0B610B 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#04B404), color-stop(100%,#0B610B)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #04B404 0%,#0B610B 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #04B404 0%,#0B610B 100%); /* W3C */
}

/* Offline pool */
div.pool-offline {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  margin-bottom:0.5em;
  background-color:#DF0101;
  background:-moz-linear-gradient(top, #FA5858 0%, #DF0101 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA5858), color-stop(100%,#DF0101)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #FA5858 0%,#DF0101 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #FA5858 0%,#DF0101 100%); /* W3C */
}

/* Pending pool */
div.pool-pending {
  width:100%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  margin-bottom:0.5em;
  background-color:#6E6E6E;
  background:-moz-linear-gradient(top, #BDBDBD 0%, #6E6E6E 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#BDBDBD), color-stop(100%,#6E6E6E)); /* Chrome, Safari4+ */
  background:-webkit-linear-gradient(top, #BDBDBD 0%,#6E6E6E 100%); /* Chrome10+, Safari5.1+ */
  background:linear-gradient(to bottom, #BDBDBD 0%,#6E6E6E 100%); /* W3C */
}

/* Online disk */
div.disk-online {
  width:100%;
  color:black;
  font-weight:normal;
  padding:0.25em 1.0em;
  margin-bottom:0.5em;
  background-color:#CCFF99;
}

/* Offline disk */
div.disk-offline {
  width:100%;
  color:black;
  font-weight:normal;
  padding:0.25em 1.0em;
  margin-bottom:0.5em;
  background-color:#FFC0CB;
}

/* Pending disk */
div.disk-pending {
  width:100%;
  color:black;
  font-weight:normal;
  padding:0.25em 1.0em;
  margin-bottom:0.5em;
  background-color:#EEEEEE;
}

/* Network */
div.network {
  width:15em;
  display:table-cell;
  font-size:70%;
  color:white;
  font-weight:bold;
  padding:0.75em 1.0em;
  background-color:black;
  border-right:1.0em solid white;
}

/* Wrapper for arrows */
div.arrows {
  display:table;
  margin:0;
}

/* Wrapper for arrow */
div.arrow {
  width:15em;
  display:table-cell;
  font-size:70%;
  vertical-align:bottom;
  border-right:1.0em solid white;
}

/* Arrow up */
div.arrow-up {
  color:black;
  text-align:center;
  font-size:200%;
  margin-bottom:-0.5em;
}

/* Arrow up */
div.arrow-down {
  color:black;
  text-align:center;
  font-size:200%;
  margin-top:-0.5em;
}