body {
	background: #bdc6cd url(../img/bkg.png) repeat-x top left;
	padding: 2em;
}
a, a:hover {color: #7fb035}
p {margin:0}
strong {font-weight: bold}
.app {
	background: #9a5835 url(../img/wood.jpg) repeat top center;
	border: 1px solid #333333;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	width: 100%; 
	max-width: 980px; 
	margin: 0 auto; 
	padding: 0;
	-webkit-box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, .5);        
	box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, .5);              
	}

.header {padding: .5em 0;}

.appheader {
	background: #151515;
	background: -moz-linear-gradient(top,  #151515 0%, #2c2c2c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#151515), color-stop(100%,#2c2c2c));
	background: -webkit-linear-gradient(top,  #151515 0%,#2c2c2c 100%);
	background: -o-linear-gradient(top,  #151515 0%,#2c2c2c 100%);
	background: -ms-linear-gradient(top,  #151515 0%,#2c2c2c 100%);
	background: linear-gradient(top,  #151515 0%,#2c2c2c 100%);
	-webkit-box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, .5);        
	box-shadow:  0px 1px 1px 1px rgba(0, 0, 0, .5);   
	}
	.logo {margin-left: 1em}
	.total {font-size: 2em; color: #fff; margin:0; padding:0;float:right}
	
	.displayas{
		float: right;
		background-image: url(../img/displayas.png);
		margin:0 1em;
		height: 26px;
		width: 104px}
		.displayitem {float: left;}
		.displayitem a{
			display:block;
			background-image: url(../img/displayas.png);
			background-repeat: no-repeat;
			height: 26px;}
		.electricity a{background-position: 0 0; width: 34px;}
			.active.electricity a{background-position: 0 -26px}
		.money a{background-position: -34px 0; width: 36px;}
			.active.money a{background-position: -34px -26px}
		.carbon a{background-position: -70px 0; width: 34px;}
			.active.carbon a{background-position: -70px -26px}
			
	
.widget {
	-webkit-box-shadow:  0px 0px 0px 5px rgba(0, 0, 0, .2);        
	box-shadow:  0px 0px 0px 5px rgba(0, 0, 0, .2);  
	margin:2em;
	padding:0;
	overflow: hidden;
	}
	.box {background-color: #dcdcdc;}
	.boxheader {
		background: #7cae35;
		background: -moz-linear-gradient(top,  #99b82f 0%, #5da53c 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99b82f), color-stop(100%,#5da53c));
		background: -webkit-linear-gradient(top,  #99b82f 0%,#5da53c 100%);
		background: -o-linear-gradient(top,  #99b82f 0%,#5da53c 100%);
		background: -ms-linear-gradient(top,  #99b82f 0%,#5da53c 100%);
		background: linear-gradient(top,  #99b82f 0%,#5da53c 100%);	
		font-size: 27px;
		border: 1px solid #2b720c;	
        -webkit-box-shadow: inset 0px 0px 0px 1px #8cbe5c;        
        box-shadow: inset 0px 0px 0px 1px #8cbe5c;
		padding: 0;
		color:#fff;     
			line-height: 55px;
			height: 56px;   
		}
		.headline {    
			display: inline-block;
			font-weight: bold;
			padding: 0 .5em;
			text-shadow: 0 -1px 0 #000000;}
		.boxheader .button {line-height: .75em}
		.arrow {
			display:block;
			padding: .5em;
			width:29px;
			height:30px}
			.arrow.left {
				background: url(../img/arrow-left.png) no-repeat center center;
				background: url(../img/arrow-left.png) no-repeat center center, url(../img/divider-green.png) no-repeat top right}
			.arrow.right {
				background: url(../img/arrow-right.png) no-repeat center center;
				background: url(../img/arrow-right.png) no-repeat center center, url(../img/divider-green.png) no-repeat top left}
			
		.boxsubheader {
			font-weight: bold;
			padding: .5em 0;
			background: #c5c3c3;
			background: -moz-linear-gradient(top,  #dcdcdc 0%, #c5c3c3 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#c5c3c3));
			background: -webkit-linear-gradient(top,  #dcdcdc 0%,#c5c3c3 100%);
			background: -o-linear-gradient(top,  #dcdcdc 0%,#c5c3c3 100%);
			background: -ms-linear-gradient(top,  #dcdcdc 0%,#c5c3c3 100%);
			background: linear-gradient(top,  #dcdcdc 0%,#c5c3c3 100%);
			-webkit-box-shadow: inset 0px -1px 0px 0px #dcdcdc;        
			box-shadow: inset 0px -1px 0px 0px #dcdcdc;        
			border: 1px solid #333;
			border-bottom: 1px solid #8e8e8e;
			border-top: 0;
			text-shadow: 0px 1px 0px #ffffff;
		}
		.boxcontent {
			padding: 2em 2em 99999px;
			margin-bottom: -99999px;}		
		
		.gauge {
			display: block;
			text-align:center;
			margin: 0 auto}
			
.buttons {text-align: center; margin: 2em 0}
.button {
	background: url(../img/button.png) repeat-x bottom left;
	padding: .5em .75em;
	font-size: 16px;
	color: #7fb035;
	font-weight: bold;
	-webkit-box-shadow: 0px 1px 2px 1px #321006;
	box-shadow: 0px 1px 2px 1px #321006; 
    -webkit-border-radius: 3px;    
    border-radius: 3px;    
	text-shadow: 1px 1px 0px #333;
	border: 1px solid #000}
	.button:active {
		position: relative;
		top: 1px;		
		-webkit-box-shadow: 0px 1px 1px 0px #321006;
		box-shadow: 0px 1px 1px 0px #321006;}
	.boxheader .button {
		color:#000;
		text-shadow: 1px 1px 0px #a6ca76;
		margin: .65em}

/* TOP BOX */			
		.todayforecast {border-bottom: 1px solid #333;padding-bottom: 2em}
		
		
/* TODAY BOX */
		.today .boxheader {
			border-right: 0}
			
		.today .boxcontent {border-left:1px solid #333}
					
		.todaybox .five {
			margin-left:0;
			width: 43.5%}
				.pledgeitem {
					float: left;
					text-align: center}
				.pledge {width: 15%}
				.savings {width: 20%}
				.how {width: 65%; text-align: left}
				.pledgerow {    
					clear: both;
					float: left;
					margin-bottom: 0.5em;
					padding: 0.5em 0;
					width: 100%;}
					.pledgerow.active {background-color:#c8c8c8}
.box.today {position: relative}				
				
.energyinfo {font-size: 1.4em;}
.energyinfo .info {float: left; width: 33%; text-align: center}
.bad {color: #cc0000}		
.medium {color: #003399}		
.good {color: #339933}		
.average {font-size: 18px;text-align: center; margin: .25em 0}

.highlow .info {float: left; width: 50%; text-align: center; font-size: 18px;}
				
							
/* SAVINGS BOX */	
		.forecast .three {
			margin-left:0;
			width: 25%}	
		.savings .boxsubheader {border-left: solid 1px #8e8e8e}
		.savings .boxcontent {
			padding: 1em;
			border-right:1px solid #333;
			border-left: 1px solid #8e8e8e;
			height: 270px;
			overflow: auto;
			1margin-bottom: -99999px;
			1padding-bottom: 99999px;}		
		

/* BOTTOM BOX */	
.forecast .boxsubheader {
	text-align: center;
	font-size: 18px;
	border-left:0;
	border-right: 1px solid #8e8e8e;
	font-weight: bold}
	
	.day4 .boxsubheader {border-right: 1px solid #333}
	.day1 .boxsubheader {border-left: 1px solid #333}

.forecast .boxcontent {border-right: 1px solid #8e8e8e; margin-bottom:0; padding-bottom: 2em}
	.forecast .day1 .boxcontent {border-left: 1px solid #333}
	.forecast .day4 .boxcontent {border-right: 1px solid #333}
	
.forecast a {color:#555}
.forecast .boxcontent:after {
    clear: both;
}
.forecast .boxcontent:before, .forecast .boxcontent:after{
    content: "";
    display: table;
}
.forecast .highlow {font-size: 16px}
.dayforecast {font-size: 18px; text-align: center; margin-bottom: .5em}

.forecast .boxcontent.badbox {1border:5px solid #cc0000;background-color:#eabfbf}		
.forecast .boxcontent.mediumbox {1border:5px solid #ffd53f;background-color:#f0e7c5}		
.forecast .boxcontent.goodbox {1border:5px solid #;background-color:#c0ddc0}	


/* HISTORICAL */
.historical .boxcontent {
	border: 1px solid #333; 
	border-top: 0;
	margin-bottom:0;
	padding-bottom:2em}
.show {font-size: 1.4em; font-weight: bold}	
.zooms li {float: left; margin-left: 1em}
.zooms a {color: #0000ff}	
	

.hide-on-phones {display:inline}

	.forecast .boxcontent .hide-on-phones {display:block}
.hide-on-desktops {display:none}		

/* PREVIOUS */
.daygrade {
	background:#fff; 
	z-index:3000; 
	padding: 2em;
	margin: 3em 2em;
	color: #000;
	border: 1px solid #4a7125;
	-webkit-box-shadow: 0 0 20px 0 #000;
	box-shadow: 0 0 20px 0 #000; 
}
.grade {font-size: 4em; line-height: 1em}
.daygrade a {color: #0000ff;text-decoration: underline}
.smiley {
	height: 91px;
	width: 91px;
	float: left;
	margin-right: 1em;
	display: block}
	.smiley.bad {background: url(../img/bad.png) no-repeat top left}
	.smiley.good {background: url(../img/good.png) no-repeat top left}
	.smiley.med {background: url(../img/med.png) no-repeat top left}
	.smiley.good-med {background: url(../img/good-med.png) no-repeat top left}
	.smiley.med-bad {background: url(../img/med2.png) no-repeat top left}
		
@media only screen and (max-width: 1019px) {
	.today .boxcontent {font-size:.7em}
}

@media only screen and (max-width: 895px) {
	.arrow {padding: .5em 0}
	.headline {margin: .5em 0}
	strong {display: block}
	body {padding: 1em}
	.total {font-size: 1.4em}
	.hide-on-phones {display:none}
	.hide-on-desktops {display:block}
	/*PREVIOUS*/
	.daygrade {text-align: center}
	.smiley {float: none; display: block; margin: 0 auto}
}
@media only screen and (max-width: 801px) {
	.headline {font-size: .75em; margin:0}
	body {padding:0}	
	.widget {margin:0}
	.forecast .boxcontent {padding:.5em 1em}
	.buttons {margin: 1.2em 0}
	.savings .boxcontent {height:300px}
	

}	
@media only screen and (max-width: 368px) {
	.widget {
		margin: .5em; 
		-webkit-box-shadow: 0 0 0 0 transparent;
		box-shadow: 0 0 0 0 transparent}
	.total {font-size: 2em}
	strong {display: inline}
	.energyinfo .info {float:none;width: 100%}
	.appheader {text-align: center}
	.logo {display: block; margin: 0 auto}
	.arrow {padding: .5em}
	.headline {margin: 0}
	.boxcontent, .savings .boxcontent {margin-bottom:0; padding-bottom:2em; padding-top: 1em; border-left: 1px solid #333; border-right: 1px solid #333}
	.todayforecast {padding-bottom: 0}
	.boxheader {padding: .5em; height: auto}
		.boxheader img {display:block;margin: 0 auto}
	.forecast .boxsubheader, .boxsubheader {border-top: 1px solid #8e8e8e; border-left: 1px solid #333; border-right: 1px solid #333}
	.forecast .day1 .boxsubheader,
	.savings .boxsubheader {border-top: 0; border-left: 1px solid #333}
	.forecast .three.column {padding-bottom: 0}
	.forecast .boxcontent {border-right: 1px solid #333; border-left: 1px solid #333}
	.arrow {float:left;width: 50%; padding: 0 0 .5em 0;margin:0}
			.arrow.left {background: url(../img/arrow-left.png) no-repeat center center}
			.arrow.right {background: url(../img/arrow-right.png) no-repeat center center}
	.hide-on-phones {display:none}
	.hide-on-desktops {display:block}	
	.pledge {width: 20%}
	.savings {width: 25%}
	.how {width: 55%}
	.button {
		display:block;
		margin: 0 1em 1em 1em}
	.displayas {
		display:block;
		float: none;
		margin: 1em auto 0}
	.total {
		text-align: center;
		display: block;
		width: 100%}
	.day4 {border-bottom: 1px solid #333}
	/* one row */
	.forecast .three.column{width: 25% !important;float: left; padding-bottom: 0}
	.forecast[class*="column"] + [class*="column"]:last-child {float: left !important}
	.dayforecast strong {display:block}
	.highlow .info {
		width:100%;
		float: none;
		margin-bottom: .5em}
		.forecast .boxcontent {padding:0}
	.forecast .boxcontent {border-right: 0; padding: 1em .25em; font-size: 5px !important}
	.day1, .day2, .day3 {border-bottom: 1px solid #333333}
	.forecast .gauge {margin: 0 0 1em 0}
	.forecast .boxsubheader {border-top: 0;border-right: 0}
	.forecast .day4 .boxsubheader {border-right: 1px solid #333}
	
	/* HISTORICAL */
	.historical .button {display:block; margin: 1em; float: none;text-align: center}
	.historical .boxcontent {padding: .5em}
	.checks li {float: left; margin-right: 2em}
	
	/*PREVIOUS*/
	.daygrade {margin: 1em 0; padding: .5em; text-align: center}
	.smiley {float: none; display: block; margin: 0 auto}
	
	
		.forecast .boxcontent .dayforecast,
		.forecast .boxcontent .highlow .info {
			font-size: 10px !important;
			line-height: 10px !important}
			
	.energyinfo .info {margin-bottom:2px}
	
	.today .boxcontent {padding-bottom: 1em !important}	
	
	.forecast .boxcontent strong {display:block}
	.savings .boxcontent {height: 230px}
	.boxheader {height: auto; padding: 0}
}