/* @override 
	http://127.0.0.1/static/css/application.css
*/

/*
   application.css
   Twine
   
   Created by Jay Contonio on 2012-03-03.
   Copyright 2012 Supermechanical. All rights reserved.
*/

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #faf9f7; margin: auto !important; }

h2 {
	padding-top: 26px;
	padding-bottom: 15px;
	font: normal 40px OstrichBlack;
}
h3 { font: normal 30px Ostrich; }

.no-csstransforms {}
.form-horizontal .help-inline { opacity: 0; }
.form-horizontal .error .help-inline {
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	opacity: 1;
}
.form-actions {
	background-color: inherit;
}

.control-group.checked {
	background-color: #a9edde;
}


.right { float:right; }
.left { float:left; }

.pop {
	font-size: 16px;
	background: white; 
	-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.3);
	box-shadow: 0 2px 7px rgba(0,0,0,0.3);
}
.pop h3 { margin-bottom: .3em; }
.pop h4 { font-size: 1em; margin-bottom: .3em; }

.fineprint { font-size: 12px; color: #999; }
.largeprint { font-size: 1.3em; line-height: 1.4em; }
.well { padding:10px; }
	.well .nav { margin-bottom:0; }

.alert { font-size: 1.2em; line-height: 20px; }
.alert-info { color: #3991A7; background-color: #C9EFF7; border-color: #B9E1F1; }
.label-info { background-color: #3991A7; }

.title-block { font: normal 33px Ostrich; }
div.title-block, span.title-block { display: block; float: left; margin: 10px 20px -2px 0; }
.logotype { color: #06bfb0; color: #d65343; font: normal 33px OstrichBlack; margin-right: 15px; }
a.logotype:hover {  color: #d65343;  text-decoration: none; }
.logotype .motif { color: #a0d3cf; color: #d65343;}
.logotype .subtitle { color: #a0d3cf; color: #d65343;}
.title-block .username, .title-block .username a, .title-block .subtitle { color: #999;  }
.username a:hover { color: #888; text-decoration: none; }

.navbar-fixed-top { position:static; background: #fff; border-bottom: 1px solid #ccc; }
	.navbar .nav { float:right; }
	.navbar .nav > li > a { color: #333; text-shadow: none;  border-radius: 2px; }
	.navbar .nav > li > a:hover { background-color: #ccc; color: #333; }
	.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { background-color:none; color:#333; }

#application { padding-bottom: 40px; }
#mainRow { margin-top:2em; }
header, #application, footer { padding-left: 10px; padding-right: 10px; }

#dashboard { z-index: -2; padding-bottom: 20px; }
	#dashboard .meta { font-size: 9px; color: #999; text-align: right; line-height: 1em; }
		.meta .name { margin-right: 2px; float: left; }
		.meta > span { margin-left: 7px; font-size: 11px; display: block; float: right; }
	#dashboard .notFresh .freshness { color: #e14c05; }
	#dashboard .notFresh, #dashboard .notFresh .io { color: #888; }
	#dashboard .io { color: #000; padding: 3px; height: 90px; position:relative; }
	#dashboard .io_name { font-family: Helvetica, sans-serif; font-size: 17px; margin-top: 30px;}
	#dashboard .io_value { font-size: 21px; }
	#dashboard .io-scale { font-size: 1em;
	top: 0em;
	vertical-align: baseline;
	line-height: 0;
	position: relative;
}
.meter div {
	border: 1px solid #999;
	width: 4px;
	height: 8px;
	margin-left: 1px;
	float: left;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.meter .full { background: #999; }
.meter.empty { color: #e14c05; }
.meter.empty div { border-color: #e14c05; }

	#dashboard sup.io-scale { top: -.4em; }
	#dashboard .icon { position:absolute; }
	#dashboard .well { width: 198px; -webkit-transform: translate3D(0, 0, 0); background: rgba(0, 0, 0, 0.03 ); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }


	.twineDashboard .sharing_panel {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #fff;
		overflow: hidden;
		z-index: -10;
		opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);
		
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);

		-webkit-transition: opacity 1.2s ease;
		-moz-transition: opacity 1.2s ease;
		transition: opacity 1.2s ease;
	}
	.twineDashboard.settings .sharing_panel {
		opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100);

		-webkit-transition: opacity .4s ease;
		-moz-transition: opacity .4s ease;
		transition: opacity .4s ease;
	}
	.twineDashboard .sharing_panel .inner {
		position: absolute;
		left: 220px;
		margin: 10px;
		width: 200px;

		-webkit-transition: left 0.5s ease;
		-moz-transition: left 0.5s ease;
		transition: left 0.5s ease;
	}
	.twineDashboard.settings .sharing_panel .inner { left: 0px; }
	.twineDashboard .sharing_panel textarea { width: 95%; }
		

	.shareable { opacity: 0.4; -moz-opacity: 0.4; filter:alpha(opacity=40); margin-top: 40px; }
	.sharing .shareable {
		opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100);
	    -webkit-transition: opacity 0.2s ease;
	    -moz-transition: opacity 0.2s ease;
	    transition: opacity 0.2s ease;
	}
	.shareable textarea { font-size: .9em; line-height: 1.2em; }


		.btn-info {
		  color: white;
		  background-color: #06bfb0;
		  background-image: -moz-linear-gradient(top, #06bfb0, #05998d);
		  background-image: -ms-linear-gradient(top, #06bfb0, #05998d);
		  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#06bfb0), to(#05998d));
		  background-image: -webkit-linear-gradient(top, #06bfb0, #05998d);
		  background-image: -o-linear-gradient(top, #06bfb0, #05998d);
		  background-image: linear-gradient(top, #06bfb0, #05998d);
		  background-repeat: repeat-x;
		  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#06bfb0', endColorstr='#05998d', GradientType=0);
		  border-color: #05998d #05998d #05998d;
		  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
		}
		.btn-info:hover,
		.btn-info:active,
		.btn-info.active,
		.btn-info.disabled,
		.btn-info[disabled] {
		  background-color: #05998d;
		}
		.btn-info:active,
		.btn-info.active {
		  background-color: #048075 \9;
		}
		.btn-info i {
			background-image: url("../img/glyphicons-halflings-white.png");
		}

		.btn-warning {
		  color: white;
		  background-color: #ed7714;
		  background-image: -moz-linear-gradient(top, #ed7714, #be5c09);
		  background-image: -ms-linear-gradient(top, #ed7714, #be5c09);
		  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ed7714), to(#be5c09));
		  background-image: -webkit-linear-gradient(top, #ed7714, #be5c09);
		  background-image: -o-linear-gradient(top, #ed7714, #be5c09);
		  background-image: linear-gradient(top, #ed7714, #be5c09);
		  background-repeat: repeat-x;
		  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed7714', endColorstr='#be5c09', GradientType=0);
		  border-color: #be5c09 #be5c09 #be5c09;
		  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
		}
		.btn-warning:hover,
		.btn-warning:active,
		.btn-warning.active,
		.btn-warning.disabled,
		.btn-warning[disabled] {
		  background-color: #be5c09;
		}
		.btn-warning:active,
		.btn-warning.active {
		  background-color: #a14e07 \9;
		}
		.btn-warning i {
			background-image: url("../img/glyphicons-halflings-white.png");
		}


/*
	styling for outside of the website
*/

body.widget { margin: 0px; }
body.widget.embedded { background-color: transparent; }
.widget #dashboard { margin: auto; margin-top: 20px; }
.widget.embedded #dashboard { margin: auto; margin-top:0px; }

.widget #dashboard .well { width: 198px; }
.widget.embedded #dashboard .well { background-color: rgba(247,247,247,0.7); }
.widget #dashboard .well > h3 { padding-bottom: 0; font-size: 30px; }
.widget #dashboard .well .mode { margin-top: 10px; }
.widget #dashboard .well .nav { margin-bottom: 15px; }

.widget #dashboard .meta { float: none; clear: none; margin-top: 20px; }
.widget #dashboard .meta .meter { margin-top: 0; clear: none; }

.widget #dashboard .io { margin-top: -5px; height: 90px;  float: none; width: auto; text-align: left; }
.widget #dashboard .io .icon { margin-top: 0; margin-right: 0; }



.textonly #dashboard .icon { display: none; }
.textonly #dashboard .io {	margin-top:  105px; text-align: center; height: auto; color: rgb(127,127,127) !important; }
.textonly #dashboard .io_name { position: absolute; top: -120px; }
.textonly #dashboard .io_value { font-family: "OstrichBlack"; font-size: 96px; }
.status-board.textonly #dashboard .io_value { font-family: "Roadgeek 2005 Series C"; }
.textonly #dashboard .io-scale { font-size: 40px; font-family: "OstrichBlack"; top: 0em; vertical-align: baseline; line-height: 0; position: relative; }
.textonly #dashboard sup.io-scale { font-size: 40px; top: -.95em; }

.icononly #dashboard .io_name { display: none; }


.widget.status-board #dashboard .well { width: 228px; }
.status-board .meta { position: absolute; bottom: 6px; right: 6px; }

body.status-board, .status-board .well { background: none !important; }
body.status-board #dashboard { margin: 0px; }
.status-board h3, .status-board #dashboard .io, .status-board #dashboard .io-scale {
	font-family: "Roadgeek 2005 Series C" !important;
	color: rgb(127,127,127) !important;
}
.status-board #dashboard .io_name { text-transform: uppercase; line-height: 3em; margin-top: 0px; font-family: "Roadgeek 2005 Series EM" !important; }
.single .twineDashboard { height: 220px !important; width: 230px !important; }

.status-board #dashboard .io_value {
	font-size: 4.5em;
	color: rgb(255,255,255) !important;
	letter-spacing: -.05em;
}
		
.status-board #dashboard .io-scale {
	font-size: 2em;
	color: rgb(255,255,255) !important;
	top: 0em;
	vertical-align: baseline;
	line-height: 0;
	position: relative;
}

.status-board #dashboard sup.io-scale {
	top: -.7em;
}




#devices { width: 400px; margin: 30px auto; text-align: left;}



#tutorial, .poppop {
	display: block;
	float: left;
	clear: both;
	padding: 10px;
	background: #06bfb0;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
	margin-bottom: 20px;
	border-radius: 3px;
}
#tutorial a, .poppop a {
	color: white;
}
#tutorial h3, .poppop h3 {
	font-size: 27px;
	color: white;
}

.callout {
	position: relative;
	width: 170px;
	padding-left: 10px;
	float: left;
}
.callout img { position: absolute; }
#callout-dashboard {
	width:  300px;
}
#callout-dashboard img {
	left: -50px;
	top: 5px;
}
#callout-support img {
	left: 60px;
	top: -59px;
	-moz-transform: scaleX(-1); 
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
}
#callout-account img {
	left: 23px;
	top: -58px;
}




/* Rule editor */

#metadata { height: 120px; width: 420px; border-bottom: none; padding: 5px; margin-top: 2px; margin-left: 1px; }
#metadata:hover { background-color: #f6f6f6; cursor: pointer; }
#metadata form { display: none; }
#metadata span { display: block; }
#metadata.editing form { display: block; margin-left: -6px;}
#metadata.editing span { display: none; }
#metadata.editing:hover { background-color: #fff; cursor: default; }
#metadata.editing .edit, #metadata .save { display: none; }
#metadata.editing .save { display: block; cursor: pointer; margin-top: -8px;
	padding-left: 6px;
}
#metadata.editing input { display: inline; height: 36px; width: 420px; background: #eee; font-size: 30px; font-weight: bold; line-height: 36px; margin: -6px 0  -1px 1px;}
#metadata textarea, #metadata p { width: 420px; height: 55px; margin-top:3px; }
#metadata p { margin-top: 17px; margin-left: -1px; }
#metadata * {  text-rendering: optimizeLegibility; }
#metadata a { margin-top: -3px; display: block; }
#metadata .description { white-space:pre-wrap; line-height: 14px; }

#help-panel { float: right; font-weight: bold; }
#help-panel p { font-size: 15px !important; }
.help {
	z-index: 100; position: absolute; background: white; padding: 1em; border: 1px solid #999; border-radius: 8px;
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.help h3 { margin-bottom: .3em; }
.help h4 { font-size: 1.2em; margin-bottom: .3em; }
#help-rules { display: none; width: 400px; top: 0; right: 20px; }
#help-sensors { display: none; width: 500px; top: 0; right: 20px; z-index: 500; }
#help-actions { display: none; width: 400px; top: 0; right: 20px; }

.ruleset { margin-bottom:3em; }

#first-rule { display:none; margin-top: 1em; z-index: 3; }

#savebar { margin-bottom:1em; background: none;	-webkit-transition: background 0.2s ease;
	-moz-transition: background 0.2s ease;
	transition: background 0.2s ease;
}
#savebar.to-top {
	position: fixed;
	top: 0px;
	width: 700px;
	background: #faf9f7;
	padding: 10px 0 10px;
	margin-top: 0;
	z-index: 1000;
	-moz-box-shadow: 0 5px 8px -6px #3e3728;
	-webkit-box-shadow: 0 5px 8px -6px #3e3728;
	box-shadow: 0 5px 8px -6px #3e3728;
}
#savebar .rule-name { display: block; float: left; margin-left: 1em; font-size: 2em; padding-bottom: 0;
	margin-bottom: -5px; margin-top: -3px; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);
	-webkit-transition: opacity 0.2s ease;
	-moz-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}
#savebar.to-top .rule-name { opacity: 0.8; -moz-opacity: 0.8; filter:alpha(opacity=80); }
#savebar.to-top + .ruleset { margin-top: 59px; }

#editor #dashboard { height: 100%; }
/*#editor #dashboard + .mainContent { margin-left: 240px; }*/
/*#editor #dashboard.to-top { position: fixed; top: 8px; }*/

.rule { border: solid 1px #ddd; padding: 10px; margin-bottom: 10px; border-radius: 3px;}
.page-header .collapse {
	color: black;
	cursor:pointer;
	float: right;
	font-size: 20px;
	font-weight: bold;
	line-height: 18px;
	margin-right:.5em;
	overflow:visible;
	opacity: 0.2;
	-moz-opacity: 0.2;
	filter:alpha(opacity=20);
	text-decoration:none;
	text-shadow: 0 1px 0 white;
}
	.page-header .collapse:hover { opacity: .4;
		-moz-opacity: .4;
		filter:alpha(opacity=4.4); }
.conditions { margin-bottom:1em; }
.summary { font-size: 18px; color: #888;}
.rule_body, .collapsed .summary { display: block; }
.rule.collapsed { background: #ddd; }
.summary, .collapsed .rule_body  { display: none; }
.rule .page-header {
	display: block;
	height: 9px;
	font-weight: normal; 
	background-color: #ddd;
	margin: -10px -10px 10px -10px;
	padding-right: 10px;
	border-bottom: none;
}
.rule.collapsed .page-header {
	-moz-box-shadow: 0 5px 8px -6px #3e3728;
	-webkit-box-shadow: 0 5px 8px -6px #3e3728;
	box-shadow: 0 5px 8px -6px #3e3728;
}
.rule .page-header .num {
	color: #666;
	font-size: 18px;
	padding: .2em;
	float: left;
 }
h1 input { display: none; }

.rule h2 { padding: 5px 5px 0px 5px; float: left; }
.rule h3 { color:#444; font-family: sans-serif; font-size: 24px; margin-bottom:.25em; width: auto; float:left; margin-right: 1em;}
.rule input { width: 50px; }

.modules { margin-left: 100px; }
	.modules h3 { width: 170px; font-size: 160%;}
	.modules .action h3 { width: 100%; }
	.modules .close { position:absolute; top:0em; right:.2em; }

.event ~ .event, .action ~ .action { border-top: dashed 1px #999; border-top-right-radius: 0; border-top-left-radius: 0; }
.event, .action { position: relative; z-index: 10; box-shadow: 0px 4px 5px #555; border-radius: 3px 3px 0 0; width: 578px;  }
	.event:last-child, .action:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }
.event, .event+.event:before { background-color: rgb(154, 230, 217); }
	.event form { margin:0; }
 .event .form-inline, .action .form-inline { padding: 10px; margin-bottom: 0; overflow: auto; }
.action, .action+.action:before { background: rgb(241, 204, 138); }

.event+.event:before, .action+.action:before {
	content: "AND";
	font-size: 12px;
	color: #666;
	position: absolute;
	top: -12px;
	padding: 3px;
}


.modules .btn-mini {
	margin-top:10px;width:50px;float:right;
}
.control-group p {
	margin-top:5px;margin-bottom:0;
}

select, input, .btn-translucent { background: rgba(255,255,255,0.5); width: auto; }
	select.act { font-size: 18px; vertical-align: top; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; }
	span.input-append { margin-top: 6px; }

input:disabled, input[disabled] { background: none; border: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: default;
	color: #333 !important;
	text-shadow: none;
}

.validation-error {
	color: #992424;
	border: 1px solid #992424;
	border-radius: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
}
input.validation-error {
	color: white;
	border: 1px solid #992424;
	border-radius: 3px;
	background: #992424;
}

::-webkit-input-placeholder{ color: rgba(0,0,0,.3); }
:-moz-placeholder{ color: rgba(0,0,0,.3); }
::-moz-placeholder{ color: rgba(0,0,0,.3); }
:-ms-input-placeholder { color: rgba(0,0,0,.3); }

/*
	Settings
*/

.sensitivity { text-align: center; background: none !important; }
.slider-widget { text-align: left; width: 200px; margin: auto; }
.slider-widget .inc, .slider-widget .dec { 
 	display: inline-block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.rec, .inc, .dec { display: block; cursor: pointer; height: 20px; min-width: 30px; font-size: .85em; margin-top: 2px; }
.slider-widget .dec { text-align: right; float: left;}
.slider-widget .inc {  text-align: left; display: inline-block; }
.rec { display: inline-block;  margin-left: 5px;  min-width: 20px;}
#slidey { display: block; float: left; margin: 3px 3px 0; }
#slidey .selector { cursor: pointer; }
#slidey .selector:hover { opacity: .8; }
.vertical-thread { height: 30px; width: 0px; border-left: 1px dashed #bbb; margin: auto; margin-top: -20px; }



/* 
 * -- Inputs --
 */

.options {
	width: 580px; margin-left: -12px; margin-top: 10px; overflow: hidden; max-height: 250px; 
/*	-webkit-transition: max-height .5s ease-out; 
	-moz-transition: max-height .5s ease-out; */
	}
	.options.collapsed { 
		max-height: 0px; 
/*		-webkit-transition: max-height .4s ease-out; 
		-moz-transition: max-height .4s ease-out; 
		-moz-transition: height .4s ease-out; */
	}
	.options legend { 
		position: absolute; bottom: 36px; right:10px; padding: 5px 0px 5px 15px; line-height: normal;  z-index: 2000;
		cursor: pointer; border-radius: 5px 5px 0 0; box-shadow: 0 -1px 1px #999;
		font-size: 11px; text-transform: uppercase;
		width: 60px; color: #888; background: rgba(255,255,255,.5);
		-webkit-transition: box-shadow 0.3s ease; 
		-webkit-transition: background 0.0s ease;
		-moz-transition: box-shadow 0.3s ease; 
		-moz-transition: background 0.0s ease;
	}
	.options.collapsed legend { bottom: -19px; background: none; border: none; box-shadow: none; border-radius: 5px; }
	.options legend:hover { 
		color: #689; background: rgba(255,255,255,.3); box-shadow: 0 -1px 1px #999;
		-webkit-transition: box-shadow 0.3s ease; 
		-webkit-transition: background 0.3s ease; 
		-moz-transition: box-shadow 0.3s ease; 
		-moz-transition: background 0.3s ease; 
	}
	.options .control-group { margin:0; padding: .5em .5em 0 100px; }
	.options .control-group:nth-child(odd) { background:rgba(255,255,255,.35); } 
	.options .control-group:nth-child(even) { background:rgba(255,255,255,.5); }
	.options .control-group:nth-child(2) { margin-top: 3px; box-shadow: 0px -1px 4px rgba(0,0,0,0.4); }
	.options .control-group:last-child { margin-bottom: 3px; box-shadow: 0px 1px 4px rgba(255,255,255,0.9); }
@-moz-document url-prefix() {

	.options.collapsed .control-group { 
		-moz-transition: opacity 0.1s ease;
		opacity: 0;
		display: none;
	}

}
	.options input[type="number"] { 
		background:none; border:none !important; font-size:14px; 
		height:auto; padding:0; text-align:center; width:3.5em; }
 	.options .checkbox { font-size:12px; margin-left:.5em;}
		.checkbox input { font-size:12px; width:auto; }
		.checkbox { margin-left:0em; margin-top: 4px;}


/* 
 * -- Actions --
 */
 .actions input { width: 200px; }
 	.actions input[type=checkbox] { width: auto; }
 .actions .form-inline { margin-bottom: 0; overflow: auto; }
	.actions .textbox { position: relative; width: 530px; }
	.actions .counter { position:absolute; bottom: -2px; width: 45px; right:6px; font-style: italic; }
	.actions .values { display: none; position: absolute; bottom: -2px; width: 515px; left: 3px; }
	.actions .values .var { background: #65c3cb; text-shadow: none; font-size: 12px; }
	.actions .values .var:hover { background: #59abb2; }
	.actions .values .var:active { background: #51c1cb; }
	.actions textarea { background:rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.2); border-bottom:none; display:block; resize:none; width:520px; font-size: 14px; }
		.actions textarea:focus { background:rgba(255,255,255,.9); }
	.actions .palette { padding-bottom: 0.5em; }
	.actions .toPebble { margin-bottom: 0; }
	.actions .control-group { margin-top: 8px; margin-right: 15px; float: left;}

	.action.http div.error { display: none; position:absolute; bottom:2px; width: 70px; right:6px; font-style: italic; color: #f96; }
	.action.http .invalid:inactive { }
	.action.http .invalid ~ div.error { display: block; }

.picker {
	background: rgba(100,100,100,0.95);
	border-radius: 3px;
	font-size: 12px;
	margin: 0 5px;
	margin-left: 105px;
	position:relative;
	z-index: 1;
/*	overflow: hidden; max-height: 250px; -webkit-transition: max-height 0.4s ease;*/
}
	.picker select { background:#444; border-color:rgba(255,255,255,.5); color:#fff; font-size:120%; height:auto; margin:.75em; width:auto; }
	.picker .instruct { color:#bbb; padding:.75em; }
	.picker .instruct a { color: #8cc; }
.palette .var { cursor: pointer; }

.rec { font-style: italic; font-size: 11px; color: #666; }


#upload_msg { display: none; }
#save { position: relative; z-index: 10;}
	#upload { font-weight: bold; }
	#save-status { max-width: 350px; background: rgba(240,240,240,0.6); border-radius: 4px; font-size: 14px; color: black; position: absolute; right: 0; height: 16px; padding: 6px 108px 6px 6px; z-index: -1; 
	-webkit-transition: max-width 0.4s ease;
	-moz-transition: max-width 0.4s ease;
}
	#save-status:hover { background: rgba(240,240,240,0.9); cursor: pointer; }
	#save-status.collapsed { max-width: 10px; padding-right: 10px; }
	#save-status.progress { width: 350px; }
	#save-status.progress .bar { height: 28px; margin: -6px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
	#save-status .msg { position: absolute; margin-left: 5px; }

.inactiveMessage { display: none; }
.inactive .inactiveMessage { display: block; }
.inactive .switchContainer, .inactive .meta { display: none; }


/* Fast Mode switch  */

#dashboard {
	
}
#dashboard .twineDashboard {
	-webkit-transition: background 0.2s ease;
	-moz-transition: background 0.2s ease;
	transition: background 0.2s ease;
	position: relative;
}
#dashboard .twineDashboard.rt { background: #fff; }
#dashboard .twineDashboard .cornerButton {
	z-index: 500;
	font-size: 14px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 16px 5px 0px;
	margin: -10px -10px 10px 10px;
	float: right;
}
#rule .cornerButton { display: none; }
.cornerButton i {
	margin-bottom: 4px;
	vertical-align: middle;
}

.switchContainer {
	height: 22px;
	width: 200px;
	margin: 6px 0 0 0;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	-webkit-box-shadow: inset 2px 1px 1px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 2px 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow: inset 2px 1px 1px rgba(0, 0, 0, 0.5);
	background-color: #e3e0dc;
	cursor: pointer;
	position: relative;
}
.switchAction {
	margin-left: 0px;
	background-color: #06bfb0;
	position: absolute;
	z-index: 100;
	width: 44px;
	height: 18px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	-webkit-box-shadow: -1px 1px 1px #000;
	-moz-box-shadow: -1px 1px 1px #000;
	box-shadow: -1px 1px 1px #000;

	-webkit-transition: margin-left 0.3s ease;
	-moz-transition: margin-left 0.3s ease;
	transition: margin-left 0.3s ease;
  
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
.switchAction:hover { background-color: #05998d; }
.onPosition .switchAction { background-color: #ed7714; margin-left: 156px; }
.onPosition .switchAction:hover { background-color: #be5c09; }

.modeLabel {
	color: #696969;
	font-size: 11px;
	font-weight: normal;
	position: absolute;
	top: 2px;
	-webkit-transition: opacity 0.1s ease;
	-moz-transition: opacity 0.1s ease;
	transition: opacity 0.1s ease;
	text-shadow: 1px 0 1px #ffffff;
}
.onPositionLabel { opacity: 0; right: 50px; }
.offPositionLabel { opacity: 1; left: 50px; }


.offPositionLabel .freshness { display: inline; }
.offPositionLabel .slow_soon { display: none; }

/* rt requested */
.onPosition .offPositionLabel { opacity: 0; }
.onPosition .onPositionLabel { opacity: 1; }
.onPosition .onPositionLabel .flip_me { display: inline; }
.onPositionLabel .going_fast { display: none; }

/* rt, no rt requested */
.rt .offPositionLabel .freshness { display: none; }
.rt .offPositionLabel .slow_soon { display: inline; }

/* rt, rt requested */
.rt .onPositionLabel .flip_me { display: none; }
.rt .onPositionLabel .going_fast { display: inline; }



@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin
{
	animation: spin 1.1s linear infinite; 
	-webkit-animation: spin 1.1s linear infinite; 
	-moz-animation: spin 1.1s linear infinite; 
	opacity: 0.7;
	cursor: default;
}


/* legacy */

		#dashboard .well .rt_msg {
			box-shadow: 0px 4px 5px #555;
			cursor: pointer;
			color: #bbb;
			font-size: 12px;
			background: rgba(100,100,100,0.95);
			border-radius: 5px;
			padding: 5px;
			margin-top: 10px;
			width: 188px;
			font-weight: normal;
			font-style: normal;
		}
		#dashboard .well .rt_msg a { color: #ffc; }




/* 
 * -- Footer --
 */
#pageFooter { padding: 5px; padding-bottom: 20px; background-color: #ddd; border-top: 3px solid #fff; position: fixed; z-index: 110; left: 0; right: 0; bottom: -15px; }


/* 
 * -- Media Queries --
 */
/* Once in full mode */
@media (max-device-width: 480px) { 
	body { margin: 0 10px; }
	#application, #dashboard, .navbar-fixed-top .container { width: auto; }
	.navbar .nav > li > a { padding: 3px; color: #666; }
	#main { padding: 0 !important; }
	h2 { font-size: 2.3em; padding-top: .3em; }
	#twines.dropdown, .navbar .nav .home { display: none; } /* hide to make room on small screens */

	#dashboard .well { padding: 5px; overflow: auto; padding-bottom: 0; width: auto; overflow: hidden;	}
	#dashboard .well > h3 { padding-bottom: 10px; font-size: 2.8em; }
	#dashboard .well .btn { font-size: 14px; font-weight: bold;	padding-top: 2px; padding-bottom: 2px; float: right; }
	#dashboard .sensorNavigation { width: 100%; }
	#dashboard .io { height: 120px; float: left; padding-top: 0; width: 46%; text-align: center; }
	#dashboard .io_name { font-size: 14px !important; margin-top: 0; }
	#dashboard .io .icon { margin-top: 25px; margin-right: 35px; }
	#dashboard .meta { color: #666; float: right; clear: both; }
	#dashboard .meta .meter { clear: right; margin-top: 4px; }
	#dashboard .twineDashboard .cornerButton { margin: -5px -5px 5px 5px; }
	
	#help-panel { display: none !important; }
	.help {	padding-bottom: 30px; }
	
	.mainContent { width: 100% !important; }
	.rule h2 { padding: 5px 5px 0px 5px; float: none; }
	.modules { margin-left: 0px; }
	#savebar { width: 100%; }
	#savebar .btn.new_rule, #savebar #save { float: right; clear: right; margin-top: 8px; }
	#editor #dashboard + .mainContent, footer.picker { margin-left: 8px; }
	
	.options { padding-top: 15px; }
	.options legend{ bottom: 50px; }
	.options .control-group { padding-left: .5em; }

	#login .control-label { width: 80px; }
	#login .controls { margin-left: 100px; }
	#tutorial { display: none; }
}