/* ================== interactive energy page ===================== */
.entry-meta,
#interactive-footnote+p
{
	display:none;
}


article.post, 
article.page,
article
{
	margin:24px 0 0;
}

.entry-content >p:first-child
{
	padding:20px 80px;
}

#instructions
{
	background:url(../images/interactive-energy-bg.png);
	clear:both;
	padding:40px 80px;
	margin: 0 0 40px
}

#instructions h4
{
	color:#4377be;
	font-size:36px;
	text-transform: uppercase;
}


.interactive-wrapper
{
	clear:both;
	padding:0 80px;
}

#interactive-footnote
{
	clear:both;
	margin-bottom:-30px;
}

#interactive-footnote p{
	clear:both;
	font-size:14px;
	padding:10px 80px;
	margin:0;
}
#interactive-footnote > #bottom:before
{
	border-top:1px solid red;
	content:'';
	height:0;
	width:0;

}

#interactive-footnote > #bottom
{
	background:#858d99;
	background: -moz-linear-gradient(top, #858d99 0%, #747b86 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#858d99), color-stop(100%,#747b86)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #858d99 0%,#747b86 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #858d99 0%,#747b86 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #858d99 0%,#747b86 100%); /* IE10+ */
	background: linear-gradient(to bottom, #858d99 0%,#747b86 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#858d99', endColorstr='#747b86',GradientType=0 ); /* IE6-9 */
	border:1px solid #585d65;
	border-radius: 0 0 4px 4px;
	color:#dbdfe4;
}



/*  switches and the city */
#controls
{
	float:left;
}

.switch-wrapper{
	border:1px solid #d0d3d8;
	border-radius: 4px;
	clear:both;
	float:left;
	margin:0 0 20px;
}
.switch-header{
	background: #4377be; /* Old browsers */
	background: -moz-linear-gradient(top, #4377be 0%, #5598f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4377be), color-stop(100%,#5598f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #4377be 0%,#5598f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #4377be 0%,#5598f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #4377be 0%,#5598f2 100%); /* IE10+ */
	background: linear-gradient(to bottom, #4377be 0%,#5598f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4377be', endColorstr='#5598f2',GradientType=0 ); /* IE6-9 */
	border-radius:4px 4px 0 0;
	clear:both;
	color:white;
	display:block;
	padding:8px 12px;
	text-align: center;

}

.switch *{
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
	.switch
	{
		background:#f3f3f3;
		border-radius: 0 0 4px 4px;
		float: left;
		padding:12px;
		position:relative;
		width:82px;
	}
	.switch a{
		color:white; 
		background:#f6f9fa;
		border:#909090 solid 1px;
		border-radius:50%;
		display:block;
		float:left;
		height:25px;
		position:absolute;
		top:30px;
		left:15px;
		text-indent:-99999px;
		width:25px;
	}
	.switch a:hover
	{

		cursor: pointer;
	}
	.switch a span
	{
		background:#cccecf;
		border: 1px solid #b9bbb9;
		border-radius:50%;
		display:block;
		height:10px;
		margin:6px 0 0 6px;
		width:10px;
	}

	.switch a.on span,
	.switch a:hover span
	{
		background:#e7d400;
	}

	ul.on-off
	{
		background:url(../images/switch-track.png) no-repeat;
		float:left;
		list-style-type: none;
		margin:0 0 0 9px;
		padding:0 0 0 35px;
	}

	ul.on-off li
	{
		line-height:15px;
		height:15px;
	}


#canvas
{
	background:#f3f4f4;
	border:1px solid #d0d3d8;
	border-radius:8px;
	float:right;
	width:628px;
	padding:20px 20px 40px;
}

#canvas:after
{
	 visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

.city{
	background:url(../images/city-bg.png) no-repeat #0c1827; 
	border:3px solid #e3e2e2;
	clear:both;
	height:323px; 
	/*overflow:hidden; */
	position:relative; 
	width:628px;
}
	
.city+h4
{
	color:#5a5f66;
	font-weight: 600px;
	font-size:21px;
	margin:25px 0;
	text-align: center;
}

.city #buildings
{
	position:absolute;
	bottom: 0;
	z-index: 3;
}

.city #lights{
	background-color:#fff9a4;
	height:226px;
	position:absolute;
	bottom: 0;	
	width:0;
	z-index: 2;
}

#text-bubble
{

	background: #bfb237; /* Old browsers */
	background: -moz-linear-gradient(top, #ebde63 0%, #bfb237 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebde63), color-stop(100%,#bfb237)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ebde63 0%,#bfb237 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ebde63 0%,#bfb237 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ebde63 0%,#bfb237 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ebde63 0%,#bfb237 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebde63', endColorstr='#bfb237',GradientType=0 ); /* IE6-9 */
	border: #ebde63;
	border-radius:2px;
	color:#5a5f66;
	display: none;
	font-size:14px;
	line-height: 16px;
	position: absolute;
	left:10px;
	top:10px;
	text-align: center;
	width:200px;
	z-index: 20;
}

#text-bubble p+span{
	content:"";
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #bfb237;
	height:0;
	position:absolute;
	bottom:-6px;
	left:20px;
	width:0;
}

#price-progressbar
{
	border-radius:32px;
	box-shadow:inset 1px 2px 4px 1px rgba(0,0,0,.58);
	height:46px;
	margin: 0 auto;
	padding:8px;
	position: relative;
	width:580px;
}

#price-progressbar #progressbar
{
	background-color:#1ab5b1;
	background-image:url(../images/stripe.png);
	border-radius: 22px;
	float:left;
	height:46px;
	width:0px;
}

#price-progressbar #price
{
	color:#1ab5b1;

	float:right;
	font-family: Helvetica;
	font-size:40px;
	line-height: 46px;
	padding-right:10px;
	position:absolute;
	text-shadow:1px 1px 1px rgba(0,0,0,.58);
	z-index: 9;
	right:0;
}


#price-progressbar #price.make-visible
{
	color:white;
}