@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: 48%;
	max-width: 400px;
	-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 */
}

.codeTagret{
	background-color: #f1f1f1;
	position:absolute;
	width: 65%;
	max-width: 500px;
	padding-left: 15px;
	box-shadow: 5px 10px 18px #888888;
}

.codeTagret:hover{
	background-color: #d1d1d1;
	position:absolute;
}

#problemWording{
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    background-color: #d1d1d1;
	color: black;
	text-shadow: none;
	font-size: 17px;
	position: absolute;
	width: 48%;
	max-width: 600px;
	background-image: url("../img/paperWording.jpg");
	
    background-position: left top;
    background-repeat: repeat;

    box-shadow: 5px 10px 18px #888888;
}

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

#algorithmStart, #algorithmEnd{
	background-color: PaleGoldenRod;
	color: black;
	text-shadow: none;
	font-size: 15px;
	position: absolute;
	width: 65%;
	max-width: 500px;
	box-shadow: 5px 10px 18px #888888;
	padding-left: 15px;
	/*padding-bottom: 12px;*/
	line-height: 125%;
}

#prompt{
	color: black;
	font-size: 115%
}
		
.movableDIV{
    display: none;
	/*background-color: #e5e5e5;*/
	background-color: PaleGoldenRod;
	color: black;
	text-shadow: none;
	font-size: 15px;
	transition:all 0.3s ease;
	position: absolute;
	width: 65%;
	max-width: 500px;
	-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 */
	box-shadow: 5px 10px 18px #888888;
	padding-left: 15px;
	line-height: 125%;
}

.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);
}
	
#part0{
	left: 0px;
	top: 0px;
}

#part1{
	left: 0px;
	top: 80px;
}

#part2{
	left: 0px;
	top: 160px;
}

#part3{
	left: 0px;
	top: 240px;
}

.statementCode,.algorithm{
	white-space:pre;
}

.caseSelectedOdd{
	color: blue;
}

.caseSelectedEven{
	color: SteelBlue; /*RoyalBlue; /*Indigo;*/
}

.simulatingCode{
	background-color: FloralWhite; 
	color: CornflowerBlue;
	font-weight: bold;
}

.reservedWord{
	color: blue;
	font-weight: bold;
}

.conditionTrue{
	color: green;
	font-weight: bold;
}

.conditionFalse{
	color: red;
	font-weight: bold;
}

.conditionInError{
	color: Maroon;
	font-weight: bold;
}

.toChange{
    background: white;
    margin-bottom: 10px;
    padding: 1px;
    outline: 2px solid #CCC;
}

.toChange:hover{
    background: LightSkyBlue;
    color: MediumBlue;
    outline: 2px solid #0090D2;
}