/* colors from http://designmodo.github.io/Flat-UI/ */


/*

	TODO
	turn off selections


*/

body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



#wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}



/* display styles (overwritten for the controls layout!) */
#display {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	margin-bottom: 200px !important;
}



/* controls */

#controls {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	height: 170px;


}


.liveControls {
	position: absolute;
	right: 0;
	bottom:0;
	top: -10px;
	left: 360px;
	background-color: #ddd;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.control {
	position: absolute;
	display: -webkit-box;
	border-radius: 4px;
	height: 60px;
	width: 80px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	font-size: 14px;

	background-color: #95A5A6;
	background-position: center center;
	background-repeat: no-repeat;

	color: white;
	-webkit-box-pack: center;
	-webkit-box-orient: vertical;

	/* todo: css animations */
	-webkit-transition: background-color 0.3s, color 0.3s;
}


.control:hover {
	background-color: #7F8C8D;
}


.control.active { background-color: #2ECC71; color: white; }
#orangeNum.active { background-color: #D35400;  }
#orangeNum.active .figure { color: white; }
#greenNum.active .figure { color: white; }

#message:focus { background-color: #2ECC71; }
#message:focus::-webkit-input-placeholder { color: #2ECC71; }
#message::-webkit-input-placeholder { color: #ccc; }

/* personalised, specific control styles */

#openWindow { left: 0; height: 90px; }
#blackout { left: 0; bottom:10px; }


#greenNum { font-size: 20px; left: 90px; width: 260px; height: 90px; } /*color: #27AE60; }*/
#orangeNum { font-size: 20px; left: 90px; width: 260px; bottom: 10px; } /*color: #C0392B;}*/
.figure { font-weight: bold; font-size: 40px; line-height: 1;
	position: relative; top: 6px; margin-right: 4px; line-height: 0.5; }
#greenNum .figure { color: #16A085; }
#orangeNum .figure { color: #D35400; }
#orangeNum:hover .figure { color: white; }
#greenNum:hover .figure { color: white; }

#msgInput { right: 370px; left: 370px; width: auto; height: 90px; min-width: 50px;}
#message { position: absolute; left: 0; right: 0; bottom: 0; top: 0;
	border:0; background-color: transparent; color: white; margin:0; padding: 10px;
	border-radius: 5px; }
#msgSend { right: 370px; bottom: 10px; left: 370px; width:auto; min-width: 50px; }

#minPlus { right: 280px; height: 90px;
	-webkit-box-pack: end;
	background-image: url(imgs/plus.png);
	padding-bottom: 10px;
	border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#minMinus { right: 280px; bottom:10px;
	background-image: url(imgs/minus.png);
	border-top-left-radius: 0; border-top-right-radius: 0; }

#secPlus { right: 190px; height: 90px;
	-webkit-box-pack: end;
	padding-bottom: 10px;
	background-image: url(imgs/plus.png);
	border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#secMinus { right: 190px; bottom:10px;
	background-image: url(imgs/minus.png);
	border-top-left-radius: 0; border-top-right-radius: 0; }

#playPause { height: 90px; width: 170px; right: 10px;
	background-image: url(imgs/playpause.png); }
#reset { width: 170px; right: 10px; bottom: 10px; }






/* debug styles */

/*body.debug #controls { border: 1px solid red; }*/