body {
	background-color: white;
	overflow: hidden;
	font-family: 'Open Sans', Arial, sans-serif;

}


body.display #display { margin: 0; }



#display {
	background-color: #2C3E50;
	margin: 20px;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;

	-webkit-transition: background-color 0.5s;

}







/*
			<section id="display" class="controlDisplay"> <!-- only controlDisplay on control page -->
				<div id="time">00:00</div>
				<div id="scroll"></div>
				<div id="openWindow"></div>
			</section>
*/

#time {
	text-align: center;
	color: #2ECC71;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 60px;
	line-height: 1;
	margin:0; padding: 0;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-orient: vertical;
	/*TODO more css things -webkit etc*/
	/*border: 1px dashed yellow;*/
	letter-spacing: -10px;

	-webkit-transition: bottom 1s, color 0.5s;
}



#scroll {
	/*border: 1px dashed blue;*/
	position: absolute;
	left: 0; right: 0;
	bottom: 50px;
	height: 80px;
	display: none;
}

#scroll h1 {
	color: white;
	font-weight: normal;
	font-size: 70px;
	line-height: 1;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	position: absolute;
}







#verticalIndicator {
	position: absolute;
	right: 0; left: 0; top:0;
	height: 0;
	-webkit-transition: height 0.5s;
}

#horizontalIndicator {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	height: 20px;
	border: 2px solid #2ECC71;
	border-radius: 10px;
	overflow: hidden;

	-webkit-transition: border-color 0.5s;
}

#highlight {
	position: absolute;
	left: 0; top: 0;
	height: 20px;
	width: 0;
	background-color: #2ECC71;
	border-radius: 3px;
	-webkit-transition: width 1s, background-color 0.5s;
	-webkit-transition-timing-function: linear;

}







/* colours */


/* change webkit to other browsers TODO */
@-webkit-keyframes flashOrange {
	0% { background-color: #2C3E50; }
	50% { background-color: white; }
	100% { background-color: #F39C12; }
}

@-webkit-keyframes flashRed {
	0% { background-color: #F39C12; }
	10% { background-color: white; }
	20% { background-color: #C0392B; }
	30% { background-color: white; }
	40% { background-color: #C0392B; }
	50% { background-color: white; }
	60% { background-color: #C0392B; }
}

#display.orange { -webkit-animation: flashOrange 1s; background-color: #F39C12; } /* todo use this orange througout */
#display.orange #time { color: white; }
#display.orange #horizontalIndicator { border-color: white; }
#display.orange #highlight { background-color: white; }

#display.red { -webkit-animation: flashRed 6s; background-color: #C0392B; }
#display.red #time { color: white; }
#display.red #horizontalIndicator { border-color: white; }
#display.red #highlight { background-color: white; }