@CHARSET "UTF-8";
.tapped{
	background-color:#c0c0c0;
	box-shadow:
		1px 1px #ff0000,
		2px 2px #ff0000,
		3px 3px #ff0000;
	-ms-transform: matrix(1, 0, 0, 0.92, -3, 0);	
    -webkit-transform: matrix(1, 0, 0, 0.92, -3, 0);
    transform: matrix(1, 0, 0, 0.92, -3, 0);
	font-size: 15px;
	transition:all 0.3s ease;
	position: absolute;
	width: 50%;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.userList{
	font-size: 15px;
	background-color: #ffffff;
	color: black;
	overflow-y: auto;
	height: 120px;
	padding: 10px;
	border: 1px solid;
	box-shadow: 5px 10px lightgrey;
}

.userList:hover{
	background-color: #e0e0e0;
}

.listTitle{
	text-shadow: 1px 1px grey;
	display: inline-block;	
}

#integerValues, #characterValues{
	color: LightSlateGray;
	position: absolute;
	text-align: center;
	float: left;
}

#realValues, #booleanValues{
	color: DimGray;
	position: absolute;
	text-align: center;
	float: right;
}

#controlsArea{
	width: 100%;
	overflow: hidden;
}

#mainArea{
	width: 100%;
	overflow: hidden;
	height: 220px;
}

#exerceiseArea{
	text-align: center;
	height: 110px;
}

#promptArea{
	text-align: left;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
	color: black;
	text-shadow: none;
}

#prompt{
	color: black;
	font-size: 115%
}
	
.movableDIV{
	display: inline-block;
	position: absolute;
	background-color: #e5e5e5;
	color: black;
	text-shadow: none;
	font-size: 15px;
	/*transition:all 0.1s ease;*/
	width: 50%;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    -webkit-animation: shadow_effect 5s infinite; /* Safari 4.0 - 8.0 */
    animation: shadow_effect 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes shadow_effect {
    50% {box-shadow: 5px 5px 15px grey;}
}
@keyframes shadow_effect {
    50% {box-shadow: 5px 5px 15px grey;}
}

.movableDIV:hover{
	background-color:#c0c0c0;
	cursor: pointer;
	box-shadow:
		1px 1px #53a7ea,
        2px 2px #53a7ea,
        3px 3px #53a7ea;
    -ms-transform: matrix(1, 0, 0, 0.92, -3, 0);	
    -webkit-transform: matrix(1, 0, 0, 0.92, -3, 0);
    transform: matrix(1, 0, 0, 0.92, -3, 0);

    -webkit-animation: shadow_effectHover 5s infinite; /* Safari 4.0 - 8.0 */
    animation: shadow_effectHover 5s infinite;    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes shadow_effectHover {
    50% {box-shadow: 5px 5px 15px #53a7ea;}
}
@keyframes shadow_effectHover {
    50% {box-shadow: 5px 5px 15px #53a7ea;}
}

.valueToCategorise{
	white-space:pre;
	font-size: 125%;
}

.categorisationOk{
	font-size: 110%;
	color: darkGreen;
	font-weight: bold;
	cursor: pointer;
}

.categorisationError{
	font-size: 110%;
	color: darkRed;
	font-weight: bold;
	cursor: pointer;
}

#explainArea{
	color: blue;
}

.itemToExplain{
	background-color: NavajoWhite;
}