
/* use really large font size */
#gamepad {
	font-size: 10vmin;
}

/** indicate that a punishment is in progress */
.punishing {
	background-color: #F00;
}

.hidden {
	display: none;
}

/* display gamepad similar to the real world controller */
#b9 {
	color: #FF0;
	background-color: #000;
}
#b10 {
	color: #7AF;
	background-color: #000;
}
#b11 {
	color: #A00;
	background-color: #000;
}
#b12 {
	color: #0F0;
	background-color: #000;
}
#t14, #t16 {
	text-align: right;
}
#b13, #b14, #b15, #b16 {
	color: #AAA;
	background-color: #000;
	font-size: 7vmin;
}
#b13.desired, #b14.desired, #b15.desired, #b16.desired {
	color: #FFF;
}

/* show buttons pale and with an invisible border,
   but the desire button full bright
   and pressed buttons with a green border */
.b {
	opacity: 10%;
}
.t {
	border: 2px solid #FFF;
}
.punishing .t {
	border: 2px solid #F00;
}
.desired {
	opacity: 100%;
}
.pressed {
	border: 2px solid #0A0 !important;
}

/* settings */
input, label, select {
	width: 9em;
	display: inline-block;
}
button {
	padding: .5em 1em;
	margin-right: 1em;
}
button#mapping {
	float: right;
}

input:invalid+span:after {
	content: '!';
	padding-left: 5px;
	color: #A00;
}
