#menu .menu_task {
	color: white;
}
.clickable {
	cursor: pointer;
}

.background {
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 1;
}
.background.top_plate {
	z-index: 100;
}
.background.top {
	z-index: 80;
}

.task_plate {
	position: absolute;
	top: 18%;
	bottom: 0%;
	left: 9%;
	width: 86%;
	z-index: 990;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../img/plate.png);
}

.task_plate_content {
	position: absolute;
	top: 12%;
	width: 87%;
	left: 7%;
	overflow: hidden;
	bottom: 0;
}
.task_plate_content p {
    width: 90%;
    margin-left: 0;
    margin-top: 3%;
    text-align: left;
}

#bravo {
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 1000;
}


.door {
	position: absolute;
	width: 71%;
	top: 14%;
	left: 15%;
	z-index: 41;
}
.door#door { z-index: 40; }
#door.closed { top: 14%; }
#door.open { top: -45%; }

.cage {
	position: absolute;
	width: 38%;
	z-index: 109;
	top: 38%;
	left: 52%;
}
#cage {
	background-image: url(../img/cage.png);
	background-size: 200%;
	background-repeat: no-repeat;
}
#cage.pos0 { background-position: 0%; }
#cage.pos1 { background-position: 100%; }

#cat { z-index: 48; }

#cage_ph {
	position: absolute;
	width: 18%;
	z-index: 111;
	top: 62%;
	left: 73%;
	bottom: 3%;
	cursor: pointer;
}

#plate2 ul {
	position: absolute;
	width: 56%;
	top: 0%;
	left: 20%;
	z-index: 300;
	list-style: none;
}
#plate2 ul li {
	width: 40%;
	margin: 2% 5%;
	cursor: pointer;
	float: left;
}
#plate2 ul li.centered {
	margin-left: 30%;
}

.bubble {
	position: absolute;
	width: 18%;
	z-index: 50;
}

#bubble3 {
top: 18%;
left: 60%;
}

#window {
	position: absolute;
	width: 31%;
	left: 36%;
	top: 15%;
	z-index: 300;
	cursor: pointer;
}

.door#door2 { z-index: 40; }
#door2.closed { top: 14%; }
#door2.open { top: -45%; }

#bubble4 {
	top: 32%;
	left: 55%;
}

#doorFinal {
	position: absolute;
	width: 53%;
	left: 23%;
	top: 15%;
	z-index: 300;
	cursor: pointer;	
}

.plates4 {
position: absolute;
width: 70%;
top: 0%;
left: 11%;
list-style: none;
z-index: 350;
}
.plates4 li {
	width: 48%;
	margin: 2% 1%;
	float: left;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	cursor: pointer;
}
.plates4 li span {
	color: white;
	text-align: center;
	line-height: 2em;
}
.plates4 li span.solved { color: green; }

.plates4 li.blue {
	background-image: url(../img/plate_blue.png);
}
.plates4 li.orange {
	background-image: url(../img/plate_orange.png);
}

.match {
	position: absolute !important;
	width: 20%;
}
.match.placeholder { opacity: 0.5; }
.hideDrag .match.placeholder { opacity: 0.0; }

.match.horizontal { 
	transform: rotate(0deg); 
	z-index: 105;
}
.match.vertical { 
	transform: rotate(90deg); 
	z-index: 101;
}
.match.diagleft {
	transform: rotate(45deg); 
	z-index: 102;
}
.match.diagrigth {
	transform: rotate(135deg); 
	z-index: 102;
}


#letter11 { top: 11%; left: 1%; }
#letter12 { top: 26%; left: 0%; }
#letter13 { top: 26%; left: 1%; }
#letter14 { top: 41%; left: 1%; }

#letter21 { top: 11%; left: 26%; }
#letter22 { top: 26%; left: 34%; }
#letter23 { top: 41%; left: 26%; }
#letter24 { top: 26%; left: 16%; }
#letter25 { top: 26%; left: 26%; }

#letter31 { top: 26%; left: 41%; }
#letter32 { top: 26%; left: 64%; }
#letter33 { top: 22%; left: 47%; }
#letter34 { top: 22%; left: 58%; }

#letter41 { top: 11%; left: 79%; }
#letter42 { top: 26%; left: 87%; }
#letter43 { top: 26%; left: 79%; }
#letter44 { top: 26%; left: 69%; }
#letter45 { top: 41%; left: 79%; }