/* research activity layout */
	
	body, .lab {
		color: #fff;
		font-family: Arial, sans-serif;
	}
	
	.clear {
		clear: both;
	}
	
	.normal {
		text-transform: none;
		font-weight: normal;
	}
	
	.hidden {
		display: none;
	}
	
	hr {
		margin-bottom: 0;
		padding-top: 5px;
	}
	
	sub { 
		vertical-align:sub; 
		font-size:75%; 
		line-height: 0;
	}
	
	sup { 
		vertical-align:super; 
		font-size:75%; 
		line-height: 0;
	}		
	
	#temp-container {
		width: 1010px;
		position: relative;
	}
	
	#grid-wrapper {
		width: 100%;
		min-height: 660px;
		position: relative;
		background-color: #333;
		overflow: hidden;
	}

	.grid-full-section {
		width: 92.2277%; 
		padding: 0 3.886%;
		background-color: gray;
	}
	
	.grid-full {
		width: 100%;
	}
	
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
		width: 13.374485596707819%; float: left; margin: 0 1.6460905349794%; position: relative;
	}
	
	.grid-2 { width: 30.041152263374486%; }
	.grid-3 { width: 46.707818930041152%; }
	.grid-4 { width: 63.374485596707819%; }
	.grid-5 { width: 80.041152263374486%; }
	.grid-6 { width: 96.707818930041152%; }
	
/*******    START added stuff for prototype       **************/

/* --------------------------------------------------- Buttons -------------- */
/*these override the buttons in main.css for this research activity*/

.btn, 
.btn:visited {
	padding: 2px 14px;
	border: 1px solid #889095;
	background: #d3e4f6;
	min-width: 50px;
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	line-height: 16px;
	color: #336699 !important;
	font-size: 11px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid;
	border-color:#ebebeb #cfd1d3 #cfd1d3 #ebebeb;
	border-color:rgba(250,250,255,0.8) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(250,250,255,0.8);
	text-shadow: 0px 1px 0px #fff;
	filter: dropshadow(color=#ffffff,, offx=0, offy=1);

	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #e2e2e2 0%, #ced3d9 100%);

	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #e2e2e2 0%, #ced3d9 100%);

	/* Opera */ 
	background-image: -o-linear-gradient(top, #e2e2e2 0%, #ced3d9 100%);

	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e2e2e2), color-stop(1, #ced3d9));

	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #ced3d9 100%);

	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #e2e2e2 0%, #ced3d9 100%);

	}

.btn:hover {
	text-decoration: none;
	color: #000 !important;
	background: #fff;
	border-color:#cfd1d3 #ebebeb #ebebeb #cfd1d3;
	border-color:rgba(0,0,0,0.2) rgba(250,250,255,0.8) rgba(250,250,255,0.8) rgba(0,0,0,0.2) ;

	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #ced3d9 0%, #e2e2e2 100%);

	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #ced3d9 0%, #e2e2e2 100%);

	/* Opera */ 
	background-image: -o-linear-gradient(top, #ced3d9 0%, #e2e2e2 100%);

	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ced3d9), color-stop(1, #e2e2e2));

	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #ced3d9 0%, #e2e2e2 100%);

	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #ced3d9 0%, #e2e2e2 100%);
	}

.btn-arrow, 
.btn-arrow:visited {
	font-size: .8em;
	display: block;
	padding: 10px 13px 5px 13px;
	text-transform: uppercase;
	cursor: pointer;
	}


  	.tooltip {
		padding: 14px;
		line-height: 17px;
		font-size: 12.5px;
		color: #333333;
		background-color: white;
		width: 261px;
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);

	}

	.tooltip h2 {
		font-weight: bold;
		margin-top: 14px;
	}

	.tooltip .title {
		font-weight: bold;
		margin:	0 0 12px;
	}

	.tooltip p {
		margin-bottom: 12px;
	}

	.tooltip p:last-child {
		margin-bottom: 24px;
	}

	.btn-img {
		width: 81px;
		height: 22px;
	}

	.btn-img:hover {
		background-position: -81px 0;
		cursor: pointer;
	}

	.btn-go {
		background-image:url('../../images/cloud/go-button.png');
	}

	.btn-begin {
		background-image:url('../../images/cloud/begin-button.png');
	}

	.btn-submit {
		background-image:url('../../images/cloud/submit-button.png');
	}

	.dan-note {
		padding: 10px;
		border: 1px solid gray;
		background-color: white;
		color: red;
		width: 50%;
		margin-top: 25%;
		margin: 20% auto;
		text-align: center;
	}
	
	.dan-note #second-note {
	
		color: green;
	}
	
	.proto-note {
		color: gray;
		font-style:italic;
		font-size: 85%;
		margin-top: 10px;
	}
	
	
	.dan-note.debug {
		font-family: Courrier, Times, serif;
		margin: 0;
		text-align: left;
		display: none;
	
	}
	
	.branding {
		/*this is a temp class*/
		margin-top: 20px; 
		color: gray;
	}

	/*overall nav*/
	.main-nav-overlay {
		padding-top: 45px;
		padding-bottom: 45px;
		background-color: #2b455e;
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		color: #6085aa;
		font-size: 14px;
		position: absolute;
		left: 0;
		top: 71px; /*the height of the .main-header*/
		z-index: 30;
		display: none;
	}

	.main-nav-overlay.grid-full-section {
		width: 97.6%;
		padding: 0 1.25%; /*should be 1.2% but there is a rounding error?*/
	}

	.main-nav-overlay a:link, .main-nav-overlay a:visited {
		color: #99ccff;
	}
	.main-nav-overlay a:hover {
		color: #fff;
	}

	.main-nav-overlay li {float: left;}

	.main-nav-overlay a, .main-nav-overlay .title {
		float: left;
		/*width:186px;*/
		text-align: center;
		padding: 45px 30px;
	}

	.main-nav-overlay a:nth-child(1) {
		padding: 45px 30px 0 27px;
	}



	.main-nav-overlay img {
		width: 27px;
		height: 45px;
		float: left;
		padding: 33px 0;
	}

	.btn.inactive, .btn.inactive:hover {
		cursor: default;
		background: inherit;
	}

	/*inside mega*/
	
	.megastorm-container .intro {
		height: 588px;
		background: url('../../images/cloud/bg-sandy-intro.jpg') no-repeat left top;
	 	background-size: cover;
	 	top: 0;
	 	left: 0;
	 	width: 100%;
	}

	.challenge-container, .megastorm-container, .investigate-container {
		font-size: 13px;
	}
	
	.megastorm-container .map-interface {
		display: none;
	}
	
	.megastorm-container .intro {
		display: block;
	}

	.megastorm-container .intro-text, .challenge-container .intro-text, .investigate-container .intro-text {
		
		background-color:rgba(255,255,255,0.8);
		width: 390px;
		height: 225px;
		margin: 132px 0 0 290px;
		padding: 25px 20px 20px 20px;
		color: #333;
		font-size: 14px;
		line-height: 16px;
		position: absolute; /*necessary to get the backgound image to fill the parent*/
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		z-index: 18;
	}

	.megastorm-container .intro-text .title, .investigate-container .intro-text .title {
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 12px;
	}

	.megastorm-container #btn-start, .investigate-body #btn-start {
		position: absolute;
		bottom: 20px;
	}

	.challenge-container .intro-text {
		display: none;
	}

	.investigate-body .intro-text {
		background-color:rgba(255,255,255,1);
		display: none;
	}

	.challenge-container .initial-pos {
		margin-top: 81px;
	}

	.bg-gradient-wrapper {

		/* IE10 Consumer Preview */ 
		background-image: -ms-linear-gradient(top, #B5C2CB 0%, #5B7084 100%);

		/* Mozilla Firefox */ 
		background-image: -moz-linear-gradient(top, #B5C2CB 0%, #5B7084 100%);

		/* Opera */ 
		background-image: -o-linear-gradient(top, #B5C2CB 0%, #5B7084 100%);

		/* Webkit (Safari/Chrome 10) */ 
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B5C2CB), color-stop(1, #5B7084));

		/* Webkit (Chrome 11+) */ 
		background-image: -webkit-linear-gradient(top, #B5C2CB 0%, #5B7084 100%);

		/* W3C Markup, IE10 Release Preview */ 
		background-image: linear-gradient(to bottom, #B5C2CB 0%, #5B7084 100%);

	}

	#map-image-container {
		position: absolute;
		top: 71px;
		overflow: hidden;
		height: 588px;
		width: 1010px;
	}

	#map-image {
		position: relative;
	}
	
/*	.challenge-container .map-interface {
	 	background: url('../../images/cloud/full-size-map.svg') no-repeat left top;
		background-size: 112%;
		background-position: -110px 40px;
	}*/

	.megastorm-container .map-interface, .challenge-container .map-interface {
	 	background: url('') no-repeat left top;
		background-size: 282%;
		background-position: -595px -210px;
	}

	.no-svg .megastorm-container .map-interface {
		/*this uses Modernizer*/
	 	background: url('../../images/cloud/full-size-map.png');
	}

	.no-svg .challenge-container .map-interface {
		/*this uses Modernizer*/
	 	background: url('../../images/cloud/full-size-map.png');
	}
	
	#bloop-buttons {
		display: none;
	}

	/***** STORM TRACK ICONS *******/

/*	.triangle-black-new {
	   width: 48px;
	   height: 48px;
	   position: relative;
	   overflow: hidden;
	   box-shadow: 0 0px 10px -17px rgba(0,0,0,0.5);
	}
	.triangle-black-new:after {
	   content: "";
	   position: absolute;
	   width: 50px;
	   height: 50px;
	   background: #2a445e;
	   transform: rotate(45deg);
	   -webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	   right: -25px;
	   bottom: 25px;
	   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
	}*/

	#storm-label {
		visibility: hidden;
	}

	.triangle-black{
		width: 0;
		height: 0;
		border-top: 13px solid transparent;
		border-right: 13px solid #2a445e;
		border-bottom: 13px solid transparent;
		float: left;
		margin-top: 8px;
		margin-left: 6px;
	}

	.storm-label {
		text-transform: uppercase;
		font-size: 13px;
		color: white;
		background-color: #2a445e;
		float: left;
		margin-top: 8px;
		height: 23px;
		padding-top: 2px;
		padding-right: 18px;
		padding-bottom: 1px;
	}

	.storm-label .separator {
		color: #99ccff;
		font-size: 15px;
	}

	.storm {
		font-family: arial, sans-serif;
		background-image:url('../../images/cloud/storm.svg');
		/*background-image:url('../../images/cloud/storm.png');*/
		background-size: cover;
		background-position:center; 
		height: 40px;
		width: 24px;
		position: absolute;
		clear: both;
		color: #336699;
		opacity: 0.5;
		display: none;
	}

	.no-svg .storm {
		/*this uses Modernizer*/
	 	background: url('../../images/cloud/storm.png');
	}

	.storm .number {
		padding-top: 11px;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		width: 24px;
		margin-left: 16px;
		line-height: 19px;
	}
	.storm.enabled {
		opacity: 1;
		color: black;
	}
	.storm.visited {
		background-image:url('../../images/cloud/storm-gray.svg');
		/*background-image:url('../../images/cloud/storm-gray.png');*/
		color: #c1c1c1;
		float: none;
		opacity: 1;
	}
	.storm.filled, .storm.filled:hover {
		background-image:url('../../images/cloud/storm-bg-circle-black.svg');
		/*background-image:url('../../images/cloud/storm-bg-circle-black.png');*/
		color: black;
		float: left;
		opacity: 1;
	}
	.ui-droppable .storm.filled {
		background-image:url('../../images/cloud/storm-circle.svg');
		/*background-image:url('../../images/cloud/storm-circle.png');*/
		color: #336699;
		opacity: 0.7;
	}
	.ui-droppable .storm.filled:hover {
		opacity: 1;
	}
	.storm.correct {
		/*background-image:url('../../images/cloud/storm-correct.svg') !important;*/
		background-image:url('../../images/cloud/storm-correct.png') !important;
		opacity: 1 !important;
	}
	.storm.incorrect, .storm.incorrect:hover {
		/*background-image:url('../../images/cloud/storm-incorrect.svg') !important;*/
		background-image:url('../../images/cloud/storm-incorrect.png') !important;
		color: #e3b207 !important;
		opacity: 1 !important;
	}
	.storm.visited:hover, .storm.enabled:hover {
		/*background-image:url('../../images/cloud/storm-bg.svg');*/	
		color: black;
		cursor: pointer;
		opacity: 1;
	}
	.storm.noaction:hover {
		cursor: default;
	}
	.storm.challenge {
		/*background-image:url('../../images/cloud/storm.svg');*/
		background-image:url('../../images/cloud/storm.png');
		color: #336699;
		float: left;
		opacity: 0.6;
	}

	.no-svg .storm.visited { background: url('../../images/cloud/storm-gray.png'); }
	.no-svg .storm.filled { background: url('../../images/cloud/storm-bg.png'); }
	.no-svg .storm.visited:hover, .no-svg .storm.filled:hover, .no-svg .storm.enabled:hover { background: url('../../images/cloud/storm-bg.png') }
	.no-svg .ui-droppable .filled { background: url('../../images/cloud/storm-dropped.png'); }
	.no-svg .storm.correct { background: url('../../images/cloud/storm-correct.png'); }
	.no-svg .storm.challenge { background: url('../../images/cloud/storm-bg.png'); }

	.storm:hover {
		cursor: default;
	}

/*	.map-interface .storm, .map-interface .icon {
		cursor: default !important
	}
*/
	.storm-media-thumb {
		
		overflow-y: hidden;
		position: absolute;
		height: 112px;
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);	
	}

	.storm-media-thumb:hover {
		cursor: pointer;
	}

	.storm-media-thumb img {

		height: 98px;
		border: 7px solid #2a445e;
	}

	.btn-enlarge {
		background: url('../../images/cloud/plusminus-icon-sprite.png') no-repeat left top;
		width: 21px;
		height: 21px;
		position: absolute;
		top: 11px;
		right: 11px;
	}

	.btn-enlarge:hover {
		cursor: pointer;
		background-position: -21px 0;
	}


	.media-overlay {
		background-color: black;
		opacity: 0.75;
		color: white;
		margin-top: -78px;
		padding: 7px;
		padding-bottom: 80px;
        font-size: 14px;
		line-height: 15px;
	}

    .media-overlay p {
        font-size: 14px;
    }

	/***** END - STORM TRACK ICONS *******/
	
	
	/*analysis intro-page*/
	
	.intro-body {
		position: relative;
	}
	
	.intro-body .img-bg {
		position: absolute;
		height: 660px;
		background: url('../../images/cloud/cloudlab-intro-background.png') no-repeat left top;
	 	background-size: cover;
	 	top: 0;
	 	left: 0;
	 	width: 100%;
	}

	.intro-body .intro-text {
		margin-top: 97px;
	}
	
	.intro-body h1 {
		font-size: 2.0em;
		margin: 1em 0;
	}
	
	.intro-body p {
		font-size: 21px;
		line-height: 36px;
		font-family: "nimbus-sans-extended", sans-serif;
		font-weight: 300;
		text-shadow: 0px 1px 0px #000000;
		filter: dropshadow(color=#000000,, offx=0, offy=1);
	}

	.intro-body .description.grid-3 {
		width: 40%;
		margin-left: 0.3%;
	}		

	.intro-body .intro-nav.grid-3 {
		width: 54%;
		margin-right: 0;
		margin-left: 3.6%;
	}	

	.intro-body .intro-nav .grid-3 {
		margin: 0;
		width: 45%;
		margin-bottom: 40px;
	}

	.intro-body .intro-nav .grid-3:nth-child(2n) {
		margin-left: 40px;


	}

	.intro-body .grid-3 {
		/*width: 47.9%;*/
	}

	.intro-body .grid-6 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.intro-body .grid-3.right {
		float: right;
	}

/*	.intro-nav-inner li {
		background-color: rgba(255,255,255,0.5);
		padding: 53px 15px 0 15px;
		min-height: 174px;
		margin-bottom: 40px;
		text-align: center;
		font-size: 12px;
		color: red;

	}

	.intro-nav-inner li a, .intro-nav-inner li a:hover {
		color: #000;
		text-decoration: none;
	}

	.intro-body .btn-intro {
		font-size: 12px;
		font-weight: 400;
		
	}*/

	.intro-body .step-description {
		clear: both;
		width: 197px;
		font-weight: 100;
		margin-top: 18px;
		position: relative;
		line-height: 18px;
	}

	.intro-body .step-description.inactive {
		color: rgba(255,255,255,0.6);
	}
	
	.intro-btn-begin {
		position: absolute;
		bottom: 30px;
		display: none;
	}

	.begin-1 { left: 142px }
	.begin-2 { left: 464px }
	.begin-3 { left: 781px }

/*	.map-interface-final #btn-submit {
		position: absolute;
		bottom: 40px;
		right: 106px;
	}

	.map-interface-final #btn-submit {
		display: none;
	}*/

	.map-interface-final #btn-submit-container {
		padding: 25px;
		font-size: 13px;
		color: #fff;
		text-align: center;
		position: absolute;
		background-color: rgba(0,0,0,0.7);
		z-index: 22;
		left: 304px;
		top: 191px;
		width: 150px;
		display: none;
	}

	.map-interface-final #btn-submit-container p {
		margin-bottom: 18px;		
	}

	.button-tray {
		text-align: right;
		padding: 10px 10px 0 0;
		display: none;
	}

	.button-tray .btn {
		margin-left: 10px;
	}

	
	.intro-button-set {
		/*padding: 2em 0 2em 0;*/
	}

	.intro-body .intro-nav {
		/*position: absolute;
		top: 427px;*/
	}

	.intro-body .intro-nav li {
	    float: left;
		margin: 0 0 0 15px;
		height: 178px;
	}

	.intro-body .intro-nav a {
		float: left;
		/*width: 197px;*/
		/*background: rgba(225,236,241,.5);*/
		background: rgba(255,255,255,.5);
		border-radius: 8px;
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		text-align: center;
		padding: 48px 0 0 0;
		font-family: "nimbus-sans-extended", sans-serif;
		color: black;
		font-size: 12px;
		font-weight: 300;
	}

	.intro-body .intro-nav a .title {

		font-weight: 700;
	}

		.intro-body .intro-nav a.inactive, .intro-body .intro-nav a.inactive:hover{
		background: rgba(225,236,241,0.3);
		text-decoration: none; 
	}

	.intro-body .intro-nav a:hover{
		background: rgba(255,255,255,0.9);
		/*text-decoration: none; */
	}

	.intro-body .intro-nav img {
		float: left;
		margin: 0 26px 0 29px;
	}

	
	.intro-body .intro-btn-begin {
		position: absolute;
		top: 537px;
	}



	/*map selector page - for inside */

	.sub-page-directions {
		color: #2b455e;
		font-size: 14px;
		font-style: italic;
		background: rgb(204, 204, 204); /* approx color of 20% opacity */
		background: rgba(43, 69, 94, .2);
		position: absolute;
		/*float: left;*/
		top: 33px;
		left: 70px;
		padding: 0 5px;
		z-index: 1;
	}

	#ins-drag {
		position: absolute;
		right: 116px;
		top: 35px;
		z-index: 22;
	}

	#ins-click {
		position: absolute;
		right: 44px;
		top: 115px;
		z-index: 22;
	}
	
	.challenge-body .sub-page-title {
		font-size: 13px;
		line-height: 17px;
		color: #ccc;
		background-color: #51667a;
		position: absolute;
		float: left;
		top: 9px;
		left: 70px;
		padding: 0px 5px;
		/*z-index: 18;*/
	}

	.investigate-body .sub-page-title {
		line-height: 17px;
		position: absolute;
		width: 600px;
		float: right;
		padding: 15px 20px;
		background-color: transparent;
		min-height: 24px;
		padding: 0;
		right: 8px;
		top: 12px;
		font-size: 11px;
		color: #fff;
		text-shadow: 0px 1px 0px #000000;
		filter: dropshadow(color=#000000,, offx=0, offy=1);
		z-index: 18;
	}

	.date-floater {
		float: right;
		padding: 13px 20px;
		margin-right: 1px;
		background-color: #333;
		min-height: 24px;
	}

	.date-floater p {
		float: right;
	}

	.date-floater .explore {
		float: right;
		display: inline-block;
		width: 79px;
		height: 22px;
		margin-left: 10px;
		background: #333 url('../../images/cloud/btn-explore.png') no-repeat 0px 0;
	}

	.date-floater .explore:hover {
		background-position: -79px 0;
		cursor: pointer;
		
	}

	.date-floater .explore.disabled, .date-floater .explore.disabled:hover {
		background-position: -158px 0;
		cursor: inherit;
	}

	.challenge-body .sub-page-title a:hover {
		color: #fff;
	}

	.challenge-body .sub-page-title a:link, .challenge-body .sub-page-title a:visited {
		color: #ccc;
	}

	/*map selector page - for reconstruct */
	
	.instructions {
		font-size: 2em;
		background-color: #fff;
		opacity:0.8;
		filter:alpha(opacity=90);
		color: black;
		padding: 30px 0 35px 30px;
	}
	
/*	.map-interface {
	 	background: url('../../images/cloud/select_map.png') no-repeat left top;
	 	background-size: cover;
	}*/
	
	.challenge-body.map-interface, .challenge-body.storm-reconstruction {
		height: 588px;
	}
	
	.shadowed {
		-webkit-filter: drop-shadow(4px 4px 7px rgba(0,0,0,0.5));
		/*filter: url(shadow.svg#drop-shadow);*/
		-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4,
		Color='#444')";
		filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
	}

	.btn-storm {
		width: 24px;
		height: 40px;
		position: absolute;
		/*background: url('../../images/cloud/storm-icon.svg');*/
		background: url('../../images/cloud/storm-icon.png');
		background-size: cover;
		display: none;
	}

	.btn-storm.complete {
		/*background: url('../../images/cloud/storm-gray.svg');*/
		background: url('../../images/cloud/storm-gray.png');
		background-size: cover;
	}

	.no-svg .btn-storm {
		/*this uses Modernizer*/
	 	background: url('../../images/cloud/storm-icon.png');
	}

	.no-svg .btn-storm.complete {
		/*this uses Modernizer*/
	 	background: url('../../images/cloud/storm-gray.png');
	}

	.icon-fullworld {
		width: 18px;
		height: 30px;		
	}
	
	.btn-storm:hover {
		cursor: pointer;	
	}
	
	.btn-storm-1 {
		left: 145px;
		top: 250px;
	}
	
	.btn-storm-2 {
		left: 939px;
		top: 368px;
	}
	
	.btn-storm-3 {
		left: 185px;
		top: 235px;
	}
	
	#btn-inside-0 {
		left: 174px;
		top: 353px;
	}

	#btn-inside-1 {
		left: 190px;
		top: 329px;
	}

	#btn-inside-2 {
		left: 197px;
		top: 266px;
	}
	
	#btn-inside-3 {
		left: 188px;
		top: 231px;
	}
	
	#btn-inside-4 {
		left: 236px;
		top: 189px;
	}
	
	#btn-inside-5 {
		left: 271px;
		top: 153px;
	}
	
	#btn-inside-6 {
		left: 235px;
		top: 115px;
	}
	
	#btn-inside-7 {
		left: 208px;
		top: 98px;
	}
	
	.megastorm-container .btn-evidence {
		width: 85%;
		float: none;
		margin-top: 10px;
		min-height: 80px;
	}
	
	.megastorm-container .btn-evidence img {
		float: left;
		max-height: 80px;
		margin-right: 2%;
	}
	
	/*.megastorm-container .btn-evidence p {
	}*/
	
	.date-title {
		margin-top: 10px;
		font-weight: bold;
	}
	
	.info-modal {
	
		border: 1px solid gray;
		background-color: white;
		padding: 10px;
		color: black;
	
	}
	
	/*storm challenge screen - for reconstruct */

	.challenge-body.storm-reconstruction {
		background-color: #333;
		text-align: center;
	}

	.storm-title {
		position: absolute;
		bottom: 25px;
		left: 25px;
		height: 87px;
		display: none;
	}

	.storm-title-right {
		left: 507px;
	}

	.storm-reconstruction .directions {
		margin-top: 116px;
		margin-bottom: 66px;
		text-shadow: 0px 1px 0px #595959;
		filter: dropshadow(color=#595959, offx=0, offy=1);
		font-size: 36px;
		color: #000;
		text-transform: uppercase;
	}

	.final_instructions {
		margin-top: 10px;
		margin-bottom: 12px;
		font-size: 13px;
		color: #336699;
		font-weight: bold;
		font-style: italic;
	}

	.btn-storm.disabled {
		background-color: gray;
	}
	
	.btn-evidence {
		background-color: #e1ecf1;
		border-radius: 8px;
		color: #666;
		font-size: 12px;
		text-align: center;
		padding: 10px;
		margin-bottom: 19px;
		line-height: 16px;
		display: inline;
		float: left;
		/*height: 80px;*/
		width: 147px;
		position: relative;
		z-index: 11;	
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);

	}

	.btn-evidence:hover {
		cursor: pointer;
		background-color: #fff;
	}
	
	.btn-evidence.current {	
		
	}

	.btn-evidence.answered {
		
		background-color: #fff;
	}

	.btn-evidence.answered .analyze  {
		margin-bottom: 1px;
	}

	.btn-evidence.answered .short_description {
		margin-bottom: 13px;
	}

	.btn-evidence.answered	.storm.challenge {
		/*background-image:url('../../images/cloud/storm-circle.svg');*/
		background-image:url('../../images/cloud/storm-circle.png');
		opacity: 1;
	}


	.btn-evidence .short_description, #evidence-tray .btn-evidence .short_description  {
		margin-bottom: 6px;
	}

	.btn-evidence .correct_answer {
		font-size: 16px;
		font-weight: bold;
		color: #336699;
		margin-bottom: 6px;		
	}

	.btn-evidence .storm {
		height: 29px;
		width: 18px;
		position: relative;
		clear: both;
		opacity: 0.5;
		margin-left: 65px;
		margin-bottom: 3px;
		display: block;
		cursor: inherit;
	}

	.map-interface-final .btn-evidence {
		/*display: block;*/
		cursor: inherit;
	}

	.map-interface-final .btn-evidence img {
		
	}

	.map-interface-final .btn-evidence img:hover {
		cursor: pointer;
	}

	#svg_1:hover {
		stroke: #c1c1c1;
	}

	.btn-evidence .analyze, #evidence-tray .btn-evidence .analyze {
		font-size: 11px;
		font-weight: bold;
		text-transform: uppercase;
		color: #336699;
		margin-bottom: 10px;
		clear: both;
	}

	#evidence-nav .button-container {
		width: 590px;
		margin: auto;
	}

	.map-interface-final .grid-1.evidence.button-container {
		clear: none;
		height: 550px;
	}

	#evidence-nav .btn-2 {
		width: 395px;
		margin: auto;
	}

	#evidence-nav .btn-4 {
		width: 785px;
		margin: auto;
	}

	#evidence-nav .btn-evidence, .evidence .btn-evidence {
		display: none; /*don't want to show all 5 at first*/
	}

	.map-interface-final .btn-evidence {
		float: none;
		margin-top: 6px;
		z-index: 21;
	}
	.icon {
		position: absolute;
	}
	.icon-on {
		
	}
	.icon-off {
		width: 30px;
		height: 42px;

/*		width: 58px;
		height: 38px;
		border-radius: 18px;
		border: 1px solid black;
		position: absolute;
		color: black;
		line-height: 1.2em;
		padding: 10px 0 0 7px;	
		font-size: 75%;
*/	}
	.icon-right {
		border: 1px solid green;	
		stroke: "#339933";
	
	}
	.icon-wrong {
		border: 1px solid red;		
	}
	.icon:hover, .btn-icon-datacollected:hover {
		cursor: pointer
	}
	.ui-state-active {
		border: 1px solid green;
	}
	ui-state-hover {
		border: 1px solid yellow;
	}

	.data-icon-container img {
		width: 18.75px;
		height: 30px;
		position: relative;
	}

	.btn-icon-datacollected {
/*		width: 18.75px;
		height: 30px;
		display: block;
		position: relative;
*/	}

	.ghost-load {
		visibility: hidden;
		position: absolute;
		left: -9999em;
	}
	
	div.data-icon-container {
		width: 147px;
		height: 30px;
		text-align: center;
	}
	
	.btn-icon-datacollected.moving {
		opacity: 0.6;
		z-index: 21;
	}
	
	.btn-icon-datacollected.inplace {
		opacity: 0.4 !important;
		z-index: 21;
		cursor: inherit;
	}

	.btn-icon-datacollected.inplace:hover {
		cursor: default !important;
	}
	
	#evidence-container {
		position: absolute;
		right: 100px;
		top: -41px;
		background-color: #ccc;
		width: 76%;
		height: 464px;
		padding: 22px;
		z-index: 10;
		display: none;
		color: black;	
	}
	
	#evidence-media {
	
		background-color: black;
		height: 464px;
		width: 448px;
		float: left;
	}
	
	#evidence-media img {
		width: 100%;
	}
	
	#evidence-question, #evidence-response , #end-button {
		float: left;
		width: 266px;
		padding: 2px;
		margin-left: 22px;
		line-height: 18px;
		text-align: left;
	}
	
	#evidence-tray {
		position : absolute;
		right: 28px;
		top: 448px; 
		z-index: 11;
		display: none;
	}
	
	#evidence-tray .btn-evidence {
		float: right;
		margin-right: 0;
		margin-left: 10px;
		overflow: hidden;
	}
	
	#evidence-tray .btn-evidence .analyze {
		/*display: none;*/
		bottom: 13px;
		left: 5px;
	}

	#evidence-tray .btn-evidence:hover {
		margin-top: -28px;
	}
	
	#evidence-answers form {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	#modal-evidence-done, #modal-done, #modal-continue {
		display:none;
		width: 250px;
	}
	#modal-done {
		width: 300px;
	}
	
	#reconstruction-container {
		display:none;	
	}
	
	#end-button {
		display: none;
	}
	
	.grid-1.evidence {
	
		height: 100%;
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, .6);
		padding: 1.9%;
		width: 16.5%;
		right: 0px;
		margin: 0;
		float: right;
		color: white;
		height: 454px;
		clear: both;
	}

	#storm-info {
		position: absolute;
		top: 0;
		right: 0;
	}

	.grid-1.storm-headline {
		background-color: rgba(214,224,235,0.8);
		height: 70px;
		box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
		text-transform: uppercase;
		font-size: 30px;
		color: #5d7286;
		text-shadow: 0px 1px 0px #fff;
		filter: dropshadow(color=#ffffff,, offx=0, offy=1);
	}

	.grid-1.storm-headline .title {
		font-size: 10px;
		font-weight: bold;
	}

	.grid-1.storm-headline h2 {	
		line-height: 23px;
		margin-top: -12px;
	}

	.grid-1.storm-headline h3 {
		margin-top: 12px;
		font-size: 13px;
		color: #666;
		text-shadow: 0px 0px 0px #666;
		filter: dropshadow(color=#666666,, offx=0, offy=0);
	}

	.grid-1.stormcard {
		height: 442px;
		background-color: rgba(255,255,255,0.8);
		font-size: 13px;
		line-height: 18px;
		color: #333;
		box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.1);
	}

	.grid-1.stormcard li {
		margin-bottom: 12px;
		font-style:italic;
		font-weight: bold;
		color: #336699;
	}

	.grid-1.stormcard li:last-child {
		margin-bottom: 0px;
	}

	.grid-1.evidence.directions {
		text-transform: uppercase;
		font-size: 11px;
		color: #93c5f6;
		text-align: center;
		line-height: 15px;
		padding: 34px 19px;
		background-color: #000;
		clear: none;
		height: 29px;
	}

	.btn-info {
		text-indent: -9999em;
		height: 18px;	
		width: 18px;
		position: absolute;
		right: 5px;
		bottom: 5px;
		background: transparent url('../../images/cloud/btn-info.png') no-repeat left top;
	}
	
	.btn-info:hover {
		background-position: -18px 0;
		cursor: pointer;
	}

	#modal-media, #modal-media-small {
		border: 1px solid #4c4c4c;
		height: 513px;
		box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
		background-color: #333;
		font-size: 13px;
		color: #fff;
		line-height: 16px;
		z-index:10;
		width: 788px;
		padding: 0;
	}

	#modal-media-small {
		font-size: 12px;
		width: 314px;
		height: 342px;
	}

	#modal-media-small .title {
		padding: 6px 10px; 
		width: 294px;
	}

	#modal-media-small img {
		width: 314px;
		max-height: 314px;
	}

	#modal-media .data-container {
		background-color: #333d47;
		padding: 29px 40px 40px 56px;
		height: 402px;
	}

	#modal-media .title {
		font-weight: bold;
		margin-bottom: 10px;	
	}

	#modal-media .date {
		color: #d6e0eb;
	}
	
	#modal-media .description {
		width: 175px;
		margin-left: 10px;
		float: left;
	}
	
	#modal-media img {
		max-width: 480px;
		max-height: 380px;
	}

	#modal-media .media {
		float: left;
	}
	
	.nav-arrow-container {
		width: inherit;
		position: absolute;
		top: 206px;
		text-align: center;
		margin: auto;
	}
	
	.nav-arrow-left, .nav-arrow-right {
		padding: 14px 6px;
		background-color: #4d4f51;
		width: 18px;
		height: 22px;
		float: left;
	}
	.nav-arrow-right {
		float: right;
	}

	.nav-arrow:hover, .nav-next-event:hover , .nav-next-step:hover {	
		cursor:pointer;
	}
	
	.arrow-left {
		float: left;
		background: #4d4f51 url('../../images/cloud/media-arrow-sprite.png') no-repeat -26px 0;
		left: 6px;
		height: 22px;
		width: 13px;
	}

	.arrow-right {
		float: right;
		background: #4d4f51 url('../../images/cloud/media-arrow-sprite.png') no-repeat 0px 0;
		right: 6px;
		height: 22px;
		width: 13px;
	}

	.arrow-left:hover {
		background-position: -39px 0;
		cursor: pointer;
	}

	.arrow-right:hover {
		background-position: -13px 0;
		cursor: pointer;
	}

	.nav-next-event, .nav-next-step {
		text-transform: uppercase;
		clear: both;
		float: right;
		margin: 13px 11px 0 0;
		color: #999;
		font-size: 11px;
		font-weight: bold;
		text-shadow: 0px 1px 0px #000000;
		filter: dropshadow(color=#000000,, offx=0, offy=1);
	}

	.nav-next-event:hover, .nav-next-event .number:hover {
		color: #fff;
	}

	.nav-next-event .number {
		margin-left: -0.5px;
	}

	.nav-next-step {
		float: right;
		display: none;
	}

	.nav-next-step.main-stage {
		display: none;
		bottom: 75px;
		right: 100px;
		position: absolute;
	}

	.nav-next-event .storm {
		float: right;
		position: relative;
		opacity: 1;
		margin-top: -13px;
		margin-left: 10px;
		background-image:url('../../images/cloud/storm-overlay.svg');
		color: #6a829c;
	}

	.nav-next-event .storm:hover {
		cursor: pointer;
	}

	.nav-next-step .btn {
		margin-left: 4px;
	}

	/*investigate - part 3*/

	#map_element {
		width: 1010px; 
		height: 588px;
	  	background-color: black;
	  	z-index: 15;
	  	position: absolute;
	}

	#investigate {
		z-index: 20;
	}

	.investigate {
		z-index: 20;
	}

	.investigate-body {
		height: 362px;  
		background-color: #336699;
		color: #fff;
		position: relative;
	}
	.nav-dates {
		cursor: pointer;
	}

	#btnPrev.nav-dates {
		/*background-image:url('../../images/cloud/nextprev-arrows-48.png');
		width: 12px;
		height: 18px;*/
	}

	.nav-dates {
		font-size: 20px;
		color: #999;
	}

	#investigate .olControlLayerSwitcher {
		top: 9px;
		left: 44px;
		width: 234px ;
		font-family: sans-serif;
		font-weight: bold;
		margin-top: 3px;
		margin-left: 3px;
		margin-bottom: 3px;
		font-size: smaller;
		color: white;
		background-color: transparent;
		z-index: 19;
		}

	#investigate .olControlLayerSwitcher .layersDiv {
		background-color: #6082a5;
		margin-top: 50px;
	}

	#investigate .olControlLayerSwitcher .maximizeDiv, #investigate .olControlLayerSwitcher .minimizeDiv {
		width: 91px;
		height: 50px;
		top: 0px;
		left: 0;
		cursor: pointer;
		background-image:url('../../images/cloud/btn-overlays.png');
	}

	#investigate .olControlLayerSwitcher .minimizeDiv {
		background-position: -182px 0;
	}

	#investigate .olControlLayerSwitcher .maximizeDiv:hover {
		background-position: -91px 0;
	}

	#investigate .olControlLayerSwitcher .layersDiv .baseLayersDiv, #investigate .olControlLayerSwitcher .layersDiv .dataLayersDiv {
		padding-left: 0px;
	}

	#investigate div.olControlZoom {
		top: 10px;
	}

	#investigate .dataLayersDiv img {
		margin-bottom: 10px;
	}

	#investigate .dataLbl {
		display: none !important;
	}


	






	

	
	
	

	
	
	
	
/*******    END prototype       **************/
	
	
	.nav-map-info {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.intro-header {
		height: 214px;   /*214px*/		
		background-color: #122538;	
		background: #122538 url('../../images/cloud/ra-intro-header-bg.png') repeat-x right top;
	}
	
	.intro-title {
		/*background: url('../../images/energy/ra-intro-title.png') no-repeat 0 25px;*/
		height: 200px;
		width: 100%
	}
	
	.main-header {
		height: 71px;   	
		background-color: #000;
	}
	
	.main-header h1 {

		height: 36px;
		width: 415px;
		text-indent: -999999em;
		background: transparent url('../../images/cloud/intro-title.png') no-repeat; 
		margin-top: 26px;
		margin-left: -15px;
		font-size: 1.5em;
		color: #fff;
		line-height: 1em;
	}	
	.main-header h1:hover {
		cursor: pointer;
	}
	.intro .main-header h1 {
		height: 36px;
		width: 415px;
		background: transparent url('../../images/cloud/intro-title.png') no-repeat; 
	}
	.intro .main-header {
		position: absolute;
		z-index: 1;
		background: none;
	}
	.intro .main-header h1 {
		cursor: default;
	}

	
	

	
	
	
	
	.design-header  {
		height: 58px;   	
		background-color: #333;	/*this is going to be a gradient*/
	}
	
	.test-header {
	
		height: 136px;   	
		background-color: #333;	/*this is going to be a gradient*/
		position: relative;
	}
	
	
	.map-body {	
		height: 589px;  
		background-color: #336699;
		background: #336699 url('../../images/energy/map-bg-gradient.png') repeat-x left top;
		color: #fff;
		position: relative;
	}
	
	.design-body {
		height: 532px;   
		background-color: #fff;	
		padding-top: 18px;
		color: black;
	}
	
	.test-body {
		height: 436px;   	
		background-color: #fff;	
		padding-top: 18px;
		color: black;
	}
	
	/* some specific stuff to the header nav */
	
	.head-menu {
		height: 71px;	
		width: 58px;
		float: left;
		background: transparent url('../../images/cloud/btn-head-menu-71.png') no-repeat left top;
	}
	
	.head-rank {
		height: 71px;	
		width: 210px;
		float: left;
		background: transparent url('../../images/energy/head-rank-bg.png') no-repeat left top;
	}
	
	.head-info {
		height: 71px;	
		width: 58px;
		float: left;
		background: transparent url('../../images/cloud/btn-head-info-71.png') no-repeat left top;
	}
	
	.head-menu:hover, .head-info:hover {
		background-position: 0 -71px;
		cursor: pointer;
	}

	.head-menu.active  {
		background-position: 0 -142px;
		cursor: pointer;
	}
	
	.head-map {
		height: 71px;	
		width: 59px;
		float: left;
		background: transparent url('../../images/energy/btn-head-map.png') no-repeat left top;
	}
	
	.head-map:hover {
		background-position: -58px 0;
		cursor: pointer;
	}
	
	.head-rank .user-icon {
		background-color: black;
		height: 48px;
		width: 48px;
		margin: 10px 10px 0 10px;
		border: 1px solid white;
		float: left;
	}
	
	.head-rank .user-info {
		float: left;
		color: #99ccff;
		line-height: 14px;
		margin-top: 22px;
		font-size: 11px;
	}
	
	.head-rank .user-name {
		font-weight: bold;
	}
	
	
	/*some specific stuff to the map page*/
	
	.map-nav {	
		height: 486px;  
		background: url('../../images/energy/map-nav-bg.png') no-repeat left top;
		position: relative;
	}
	
	.map-tech-solar {	
		height: 75px;  
		background: #183049 url('../../images/energy/map-tech-solar-bg.png') no-repeat center 3px;
	}
	.map-tech-wind {	
		height: 75px;  
		background: #183049 url('../../images/energy/map-tech-wind-bg.png') no-repeat center 3px;
	}
	.map-tech-geo {	
		height: 75px;  
		background: #183049 url('../../images/energy/map-tech-geo-bg.png') no-repeat center 3px;
	}
	.map-tech-bio {	
		height: 75px;  
		background: #183049 url('../../images/energy/map-tech-bio-bg.png') no-repeat center 3px;
	}
	
	.map-tech {	
		margin-top: 55px;
	}
	
	.map-tech .btn {	
		padding-left: 33px;
		padding-right: 33px;
		/*background: #5e87b1;*/
	}
	
	.map-nav {
		text-transform: uppercase;
		color: #666;
		font-size: 11px;
		font-weight: bold;
	}
	
	.pin-title {
		margin-left: -10px
	}
	
	.pin-CO {
		position: absolute;
		left: 180px;
		top: 180px;
		margin-right: 5px;
	}
	
	.pin-LA {
		position: absolute;
		left: 30px;
		top: 236px;
		margin-right: 5px;
	}
	
	.pin-LV {
		position: absolute;
		left: 75px;
		top: 212px;
	}
	
	.pin-AZ {
		position: absolute;
		left: 113px;
		top: 280px;
	}
	
	.pin-TN {
		position: absolute;
		left: 415px;
		top: 233px;
	}
	
	.map-nav .pin {
		display: inline-block;
		width: 33px;
		height: 48px;
		background: transparent url('../../images/energy/map-nav-pin.png') no-repeat;
		background-position: 0 0;
		margin-top: 0;
	}

	.map-nav .pin:hover { background-position: -33px 0; }
	
	.map-nav .pin.powered, .map-nav .pin.powered:hover { background-position: -66px 0; }

	
	
	/*some specific stuff to the challenge page*/
	
	.challenge-upper-body {
		height: 228px;  
		background-color: #fff;
		color: #000;
	}
	
	.challenge-upper-body .title {
		margin-top: 14px;
	}
	
	.challenge-upper-body .videos {
		margin-top: 72px;
		float: left;
	}
	
	.challenge-upper-body .videos li {
		margin-top: 2px;
	}
	
	.challenge-body {
		height: 362px;  
		background-color: #336699;
		color: #fff;
		position: relative;
	}
	
	.your-challenge-title, .current-status-title {
		margin-top: 30px;
	}
	
	.challenge-body h4 {
		color: #c4d0de;
		text-transform: uppercase;
		font-weight: normal;
		font-size: 11px;
		margin-top: 14px;
	}
	
	.challenge-body h4.first {
		margin-top: 24px;
	}
	
	.challenge-data {
		font-size: 24px;
	}
	
	.challenge-units {
		font-size: 16px;
	}
	
	.challenge-copy {
		margin-top: 16px;
	}
	
	.challenge-btn-next {
		position: absolute;
		top: 228px;
		right: 0;	
	}
	
	/*some specific stuff to the design page*/
	
	.design-header-city {
		text-align: right;
	}
	
	.system-step2 {
		
	}
	
	.non-active {
		display: none;
	}
	
	.btn-test-next, .btn-power-prev, .btn-power-next {
		display: none;
	}
	
	.design-tech-header {
		
		background-color: #285079;
		height: 122px;
		color: #99ccff;
		font-size: 10px;
		text-transform: uppercase;
		line-height: 12px;
		text-align: center;
	}
	
	.design-tech-body {
		
		background-color: #ebebeb;
		height: 304px;
		text-align: center;
		font-size: 11px;
		text-transform: uppercase;
		color: #666666;
	}
	
	.design-bugdet {
		
		background-color: lightblue;
		height: 66px;
	}
	
	.design-area {		
		background-color: white;
		border: 1px solid gray;
		height: 164px;	
	}
	
	.design-area-actual {		
		background-color: lightblue;
		border-right: 1px solid gray;
		border-bottom: 1px solid gray;
		height: 30px;	
		width: 50px;
		position: relative;
		
	}
	
	.design-area-text {
		text-align: right;
	}
	
	.bank-green {
		color: green;
	}
	
	.bank-red {
		color: red;
	}
	
	.area-toomuch {
		border: 1px solid red;
	}
	
	.area-actual-toomuch {
		border-bottom: 1px solid red;
		border-right: 1px solid red;
	}
	

	
	.test-title {
		background-color: #767676;
		height: 64px;

	}
	
	.test-title.production-target {
		background-color: #cc6600;
		
	}
	

	/* energy activity styling */
	
	.button-right {
		float: right;
	}
	
	.intro-leaderboard {
		
		background-color: white;
		margin-top: 24px;
		padding-bottom: 25px;
	}
	
	.intro-leaderboard-title {
		height: 48px;
		background: url('../../images/energy/ra-leaderboard-header.jpg') no-repeat left top;
		
	}
	
	.main-leaderboard {
		background-color: white;
		margin-top: -534px;
		padding-bottom: 25px;
	}
	
	.intro-leaderboard-info {
		float: right;
		height: 21px;
		width: 21px;
		background: url('../../images/energy/ra-info-i.png') no-repeat;
		margin-top: 13px;
		margin-right: 13px;
		cursor:pointer;	
	}
	
	.ldr-grid.blank > div {
		line-height: 12px;
		background-color: #fff;
		height: 25px;
		text-align: center;
		font-size: 9px;
		margin-top: 0px;
		margin-bottom: -4px;
		padding: 4px 0;
	}

	.ldr-grid.blank.divider > div {
		margin-top: 0px;
		height: 0px;	
		border-top: 0;
		border-bottom: 0;
	}

	.ldr-grid.blank > .ldr-rank {
		border: 1px solid white;
	}

	.ldr-grid.blank > .ldr-name, .ldr-grid.blank > .ldr-co2, .ldr-grid.blank > .ldr-cost  {
		border-top: 1px solid white;
		border-bottom: 1px solid white;
		border-right: 1px solid #7d98b5;		
	}

	.ldr-grid > div {
		float: left;
		font-size: 11px;
		background-color: #f4f4f4;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		border-right: 1px solid #7d98b5;
		color: #7d98b5;
		height: 40px;
	}
	
	.ldr-grid .ldr-rank {
		background-color: #c4d0de;
		color: #7d98b5;
		border: 1px solid gray;
		width: 21px;
		margin-left: 10px;
	}
	
	.ldr-grid .ldr-name {
		width: 115px;
		overflow: hidden;
		color: #000;
	}

	.ldr-grid .ldr-co2, .ldr-grid .ldr-cost {
		width: 60px;
	}
	
	.ldr-rank .inner {
		margin: 10px 0 0 0;
		text-align: center;
	}
	
	.ldr-icon {
		width: 30px;
		height: 30px;
		background-color: gray;
		margin: 4px 0 0 6px;
		float: left;
	}
	
	.ldr-name .inner {
		float: left;
		margin: 10px 0 0 4px;
	}
	
	.ldr-co2 .inner, .ldr-cost .inner {
		margin: 10px 0 0 0;
		text-align: center;
	}
	
	
	
	/*test graph styling*/
	
	.demand-block {
		border-top: 1px solid #cc6600;
		z-index: 2;
		position: relative;
		height: 1px;
	}
	.solar-color {
		background-color: #e0e0a3;	
	}
	.wind-color {
		background-color: #a3c2a3;	
	}
	.geo-color {
		background-color: #c2a3c2;	
	}
	.bio-color {
		background-color: #85a3c2;	
	}
	
	.graph-container {
		float: left;
	}
	
	.graph-month {
		width: 24px;
		margin: 0 3px 0 2px;
		float: left;
		overflow: hidden;
	}
	
	.graph-hour {
		width: 2px;
		margin: 0 0px 0 0;
		float: left;
		overflow: hidden;
	}
	
	.graph-hour.last {
		margin-right: 1px;
	}
	
	.test-graph, .power-graph {
		border-left: 1px solid #336699;
		border-bottom: 1px solid #336699;
		height: 300px;
		width: 696px;
		float: left;
	}
	
	.power-graph {
		width: 686px;
	}
	
	.demand-legend {
		margin-top: 20px;
		clear: both;
	
	}
	.power-legend {
		float: left;
		width: 30px;
		height: 300px;
		clear: both;
		position: relative;
	}
	
	.power-tic {
		float: right;
		border-top: 1px solid #336699;
		border-bottom: 1px solid #336699;
		width: 6px;
		height: 299px;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.power-lbl-min, .power-lbl-max {
		color: #336699;
		position: absolute;
		bottom: -11px;
		right: 8px;
		font-size: 10px
	}

	.power-lbl-max {
		top: -11px;
	}
	
	.power-legend-label {	
		background: white url('../../images/energy/axis-label.png') no-repeat right top;
		height: 178px;
		width: 13px;
		position: absolute;
		top: 60px;
		right: 10px;
	}

	.demand-line {
		float: left;
		border-top: 1px solid #cc6600;
		width: 24px; 
		margin-top: 9px;
		margin-right: 7px;
	}
	
	.demand-key {
		float: left;
	
	}
	
	.graph-month.tics {
		margin:0;
		height: 6px;
		width: 28px; 
		border-left: 1px solid #336699;
		z-index: 2;
	}
	
	.graph-month.tics.last {
		border-right: 1px solid #336699;
	}
	
	.graph-month.label {
		width: 29px;
		margin-top: -10px;
		text-align: center;
		margin: -10px 0 0 0;		
	}
	
	.graph-month.label.first {
		margin-left: 1px;
		
	}
	
	.graph-day {
		margin-right: 1px;
	}
	
	.graph-hour.tics {
		margin:0;
		height: 6px;
		width: 48px; 
		border-left: 1px solid #336699;
	}
	
	.graph-hour.tics.week-divider {
		margin: -300px 0 0 0;
		height: 306px;	
	}
	
	.graph-hour.tics.last {
		border-right: 1px solid #336699;
	}
	
	.graph-hour.label {
		width: 49px;
		text-align: center;
		margin: -8px 0 0 0;		
	}
	
	.graph-hour.label.first {
		margin-left: 1px;
		
	}
	
	.week-legend {
		clear: both;
		background: white url('../../images/energy/week-marker.png') no-repeat 0 10px;
		width: 191px;
		height: 31px;
		margin-left: 248px;

	}
	
	.week-container {
		float: left;
	}
	
	.label {
		color: #999;
		font-size: 10px;
		text-transform: uppercase;		
	}
	
	/*your system styling*/
	
	.system-technology.first {
		border-top: 1px solid #d1d1d1;
	}
	
	.system-technology {
		border-bottom: 1px solid #d1d1d1;
		padding-top: 10px;
		padding-bottom: 2px;
	}
	
	.key-block {
		width: 8px;
		height: 8px;
		margin-right: 4px;
		float: left;
	}
	
	.system-technology p {
		font-size: 11px;
		
	}
	
	.system-technology p.title {
		font-weight: bold;
		line-height: 9px;
		
	}
	
	/*triangle styling*/
	
/*
	.arrow-up {
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		
		border-bottom: 5px solid red;
	}
*/

	.arrow-up {
		border-top: 2px dotted black;
		margin-top: -2px;
	}

	
	
	/*test graph styling*/
	
	.powerup-datetime {
	
		background-color: #fff;
		padding: 4px 0;
		width: 75px;
		color: #369;
		font-weight: bold;
		font-size: 12px;
		float: left;
		text-align: center;
		margin-right: 1px;
		margin-bottom: 1px;
		line-height: 14px;
	}
	
	/* info and modal styling*/
	
	/* modal_overlay is the modal used for the challenges */
	/* modal-info is the popup used for the info button content */
	
	#modal_overlay, #modal-info, #modal-info-end, #modal-media, #modal-media-small, #modal-haiku {
		display: none;
		z-index: 22;
	}

	#modal-info, #modal-haiku, #modal-media-small {
		z-index: 22 !important;
	}

	#modal-haiku, #modal-media-small {
		position: absolute;
	}
	  	
	.modal-popup {
    	width:280px;
    	border:4px solid #000;
    	color: #333;
		font-size: 14px;
		padding: 10px;
    	background-color: #fff;
    	/*z-index: 20;*/
	}

	#modal-info.modal-popup {
    	width:1010px;
    	border:none;
    	color: #333;
		font-size: 14px;
		padding: 0px;
    	background-color: #fff;
    	position: absolute;
    	top: 71px;
    	height: 589px;
    	/*z-index: 20;*/

	}

	#modal-info #btn-start {
		left: 464px;
		bottom: 131px;
		position: absolute;
	}
	  	
	.modal-popup.leaderboardinfo {
    	width:500px;		
		padding: 30px 36px 36px 36px;
	}

	.modal-popup.datainfo {
    	width:528px;		
		padding: 20px 25px 20px 20px
	}

	.modal-popup h2 {
		font-size: 120%;
		text-indent: -99999em;
		line-height: 1em;
	}

	.modal-popup li {
		margin-bottom: 14px;
	}
	
	.modal-popup.leaderboardinfo .close, .modal-popup.datainfo .close {
		text-indent: -99999em;
		position: absolute;
		top: 8px;
		right: 8px;
		background: transparent url('../../images/energy/btn-close-x.png') no-repeat; 
		width: 28px;
		height: 28px;
		cursor: pointer;
	}
	
	.modal-popup.mediainfo .close {
		text-indent: -99999em;
		position: absolute;
		top: 11px;
		right: 11px;
		background: transparent url('../../images/cloud/plusminus-icon-sprite.png') no-repeat -42px 0; 
		width: 21px;
		height: 21px;
		cursor: pointer;
	}

	#modal-media-small.modal-popup.mediainfo .close {
		top: 5px;
		right: 5px;
		background: transparent url('../../images/cloud/btn-close.png') no-repeat 0 0; 
		width: 17px;
		height: 17px;
	}

	#modal-media-small.modal-popup.mediainfo .close:hover {
		background-position: -17px 0; 
	}

	.modal-popup.mediainfo .close:hover {
		background-position: -63px 0; 
	}
	
	.modal-popup .close:hover { 
		background-position: -28px 0; 
	}
	
	.modal-popup.leaderboardinfo h2 {
		background: transparent url('../../images/energy/modal-title-leaderboardinfo.png') no-repeat; 	
		margin-bottom: 32px;

	}
	
	.modal-popup.datainfo h2 {
		background: transparent url('../../images/energy/modal-title-datainfo.png') no-repeat; 				
	}
	
	.panes ul {
		margin-top: 30px;
	}
	
	ul.tabs a {
		min-width: 94px;
	}
	
	
		
	
	.bullet {
		color: #336699;
	}
	

	/*"temp" graph styling*/
	
	
	
	
	#m1-de { margin-top:75px}
	#m1-t1 { height: 60px }
	#m1-t2 { height: 40px } /*300 - mar_demand - 1 - production*/
	#m1-t3 { height: 60px }	/*300 - 75 - 1 - 60 -40 - 60 - 10 - 1 = 54*/
	#m1-t4 { height: 10px; margin-top: 53px;}  
		
	#m2-de { margin-top:75px }
	#m2-t1 { height: 80px }
	#m2-t2 { height: 70px }
	#m2-t3 { height: 60px }
	#m2-t4 { height: 10px; margin-top: 3px;}
		
	#m3-de { margin-top:75px }
	#m3-t1 { height: 60px }
	#m3-t2 { height: 80px }
	#m3-t3 { height: 80px }
	#m3-t4 { height: 10px; margin-top: -7px;}
		
	#m4-de { margin-top:75px }
	#m4-t1 { height: 40px }
	#m4-t2 { height: 50px }
	#m4-t3 { height: 70px }
	#m4-t4 { height: 30px; margin-top: 33px;}
		
	#h1-t4 { height: 10px; margin-top: 130px;}  /*300 - production */
	#h2-t4 { height: 10px; margin-top: 80px;}
	#h3-t4 { height: 10px; margin-top: 70px;}
	#h4-t4 { height: 30px; margin-top: 110px;}