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

	$color-connected 	: #98c908;
	$color-disconnected	: #b20303;
	$color-connecting	: #fea00d;

	$padding				: 4%;
	$marginElement	: 10px;

	.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: $padding 0;
	}

	.section-banner{
		width: 100%;
		clear: both;
	}
	.section-col50{
		float: left;
		width: 50% - ($padding);
	}

	.section-col50+.section-col50{ padding-left: 2*$padding; }

	.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: $color-connected;
		border-color: $color-connected;

		.status-pin li{
			background: $color-connected;;
		}
	}
	#status.connected:after{ content: 'CONNECTED' }

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

	}
	#status.connecting:after{ content: 'CONNECTING' }

	#status.disconnected{
		color: $color-disconnected;
		border-color: $color-disconnected;
		.status-pin li{
			background: $color-disconnected;
		}
	}
	#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: $marginElement;
 			border-bottom: solid 1px #eee;
 			height: 50px;
 			line-height: 50px;
            cursor: pointer;
 		}
 		dt button{
 			float: right;
 			margin-top: 10px;
 		}

 		dd{
 			height: 0;
 			max-height: 100px;
 			overflow: hidden;
 		}

        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: $padding;
   }
   // #console p time{
   // 	display: block;
   // 	float: left;

   // }
   // #console p span{
   // 	display: block;
   // 	float: left;
   // }


