/* ==========================================================================
   GENERAL
   ========================================================================== */
body {
  font: 1em/1.5em Helvetica Neue,Helvetica,sans-serif;
  color: #333;
  font-weight: 200; }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  *zoom: 1; }

main {
  display: block;
  width: 80%;
  margin: 0 auto; }

h1 {
  text-align: center;
  font-weight: 300; }

h3 {
  font-weight: 300;
  border-bottom: solid 1px #ccc;
  padding-bottom: 10px; }

section {
  padding: 4% 0; }

.section-banner {
  width: 100%;
  clear: both; }

.section-col50 {
  float: left;
  width: 46%; }

.section-col50 + .section-col50 {
  padding-left: 8%; }

.btn {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
  font-size: 14px;
  font-family: Helvetica Neue,Helvetica,sans-serif;
  font-weight: 200;
  cursor: pointer; }

.btn-gray {
  background: #2597d8;
  color: #fff;
  border: solid 1px #0089d8; }

.btn-green {
  background: #98c908;
  color: #fff;
  border: solid 1px #3f5304; }

/* ==========================================================================
   CONF
   ========================================================================== */
#conf dl dt {
  font-weight: bold;
  float: left;
  min-width: 100px; }

#conf button,
#conf dl {
  float: left; }

#conf dl {
  width: 40%; }

#conf button {
  margin-top: 20px; }

/* ==========================================================================
   STATUS
   ========================================================================== */
#status {
  margin: 0 auto;
  width: 150px;
  height: 140px;
  text-align: center;
  padding-bottom: 0; }

#status.connected {
  color: #98c908;
  border-color: #98c908; }
  #status.connected .status-pin li {
    background: #98c908; }

#status.connected:after {
  content: "CONNECTED"; }

#status.connecting {
  color: #fea00d;
  border-color: #fea00d; }
  #status.connecting .status-pin li {
    background: #fea00d; }

#status.connecting:after {
  content: "CONNECTING"; }

#status.disconnected {
  color: #b20303;
  border-color: #b20303; }
  #status.disconnected .status-pin li {
    background: #b20303; }

#status.disconnected:after {
  content: "DISCONNECTED"; }

.status-badge {
  position: relative;
  width: 100px;
  height: 100px;
  border: solid 3px;
  border-radius: 55px;
  margin: 0 auto 10px auto; }

.status-pin {
  display: table;
  margin: 45px auto;
  padding: 0; }

.status-pin li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 5px; }

.status-pin li:last-child {
  margin-right: 0; }

/* ==========================================================================
   CONSOLE
   ========================================================================== */
.event-emit-list dt {
  clear: both;
  margin-bottom: 10px;
  border-bottom: solid 1px #eee;
  height: 50px;
  line-height: 50px;
  cursor: pointer; }
.event-emit-list dt button {
  float: right;
  margin-top: 10px; }
.event-emit-list dd {
  height: 0;
  max-height: 100px;
  overflow: hidden; }
.event-emit-list dt.event-emit_open + dd {
  height: auto;
  overflow: scroll; }

/* ==========================================================================
   CONSOLE
   ========================================================================== */
#console {
  background: #333;
  font: 12px/14px Monaco;
  color: #ddd;
  height: 100px;
  overflow: scroll;
  padding-top: 1%;
  padding-bottom: 1%; }

#console p {
  padding-left: 4%; }
