body,html {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#outer-container {
	display: table;
	width: 100%;
	height: 100%;
}

#middle-container {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	background-color: #999;
}

#inner-container {
	margin: 0 auto;
	position: relative;
	background-color: #fff;
	overflow: hidden;
}



.task-content {
	position: absolute;
	left: 5%;
	width: 90%;
	height: 33%;
	padding: 8% 6% 1% 3%;
	line-height: 150%;
	bottom: 0;
	text-align: justify;
	background-image: url("../../res/drawable/interface/task-pane.png");
	background-size: 100% auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing:border-box;
	bottom: 0;
}

.task-content.small {
	height: 10%;	
}

.task-content.animate {
	transition: transform 1000ms ease-in-out 0.3s;
	-moz-transition: -moz-transform 1000ms ease-out 0.2s;
	-webkit-transition: -webkit-transform 1000ms ease-in-out 0.3s;
	-o-transition: -o-transform 1000ms ease-in 0.3s;
}

.task-content.hide {
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}

.task-content.small header, .task-content header {
	font-family: Andada;
	position: absolute;

	width: 80%;
	margin: auto 0;	
	position: absolute;
	font-size: 1.3em;
}

.task-content header {
	top: 17%;
}

.small .button {
	height: 57% !important;
}

.button {
	background-image: url("../../res/drawable/interface/interface.png");
	height: 27% !important;
	width: 6% !important;
	background-size: 200% 1300%;
	position: absolute;
	background-scale: 50% 50%;
	cursor: pointer;
	z-index: 2000;
}

/** POSITIONS **/
.button.left {
	left: 5%;
	top: 11%;
}

.button.refresh {
	left: 11%;
	top: 11%;
}

.button.play {
	left: 17%;
	top: 11%;
}

.button.ok {
	left: 77%;
	top: 11%;
}

.button.sound.off,.button.sound.on {
	left: 82.5%;
	top: 11%;
}

.button.question {
	left: 88%;
	top: 11%;
}

.button.right {
	left: 87%;
	top: 69%;
}


.small .button.sound.off, .small .button.sound.on {
	left: 82.5%;
	top: 21%;
}

.small .button.question {
	left: 89.6%;
	top: 21%;
}


/** BACKGROUNDS **/
.button.left {
	background-position: 0 16.8%;
}

.button.left.hover {
	background-position: 0 8.4%;
}

.button.left.active, .button.left:active {
	background-position: 0 0;
}

.button.ok {
	background-position: 0 42%;
}

.button.ok.hover {
	background-position: 0 33.6%;
}

.button.ok.active, .button.ok:active {
	background-position: 0 25.2%;
}

.button.play {
	background-position: 0 67.2%;
}

.button.play.hover {
	background-position: 0 58.8%;
}

.button.play.active, .button.play:active {
	background-position: 0 50.4%;
}

.button.question {
	background-position: 0 92.2%;
}

.button.question.hover {
	background-position: 0 84%;
}

.button.question.active, .button.question:active {
	background-position: 0 75.6%;
}

.button.refresh {
	background-position: 100% 8.4%;
}

.button.refresh.hover {
	background-position: 100% 0;
}

.button.refresh.active, .button.refresh:active {
	background-position: 0 100.6%;
}

.button.right {
	background-position: 100% 33.6%;
}

.button.right.hover {
	background-position: 100% 25.2%;
}

.button.right.active, .button.right:active {
	background-position: 100% 16.8%;
}

.button.sound.off {
	background-position: 100% 58.8%;
}

.button.sound.off.hover {
	background-position: 100% 50.4%;
}

.button.sound.off.active, .button.sound.off:active {
	background-position: 100% 42%;
}

.button.sound.on {
	background-position: 100% 84%;
}

.button.sound.on.hover {
	background-position: 100% 75.6%;
}

.button.sound.on.active, .button.sound.on:active {
	background-position: 100% 67.2%;
}


.remove {
	background-image: url("../../res/drawable/interface/remove.png");
    background-size: 100% 300%;
    cursor: pointer;
    height: 57% !important;
    position: absolute;
    width: 6% !important;
	left: 75%;
    top: 21%;
}

.remove:hover {
	background-position: 0% -200%;
}

.remove.on {
	background-position: 0% -100%;
}



#start-page {
	background-image: url("../../res/drawable/interface/start-page.jpg");
	z-index: 1000;
	
	width: 6%;
	height: 57%;
	margin: 0;
	padding:0;
	overflow:hidden;
	position: absolute;	
	background-position: center center;
	background-size: cover;
	
	top: 0;
	left:0;
}

#start-page-start-button
{
	display:none;
	background-image: url("../../res/drawable/interface/start-page-start-button.png");

	background-size: 300% 100%;
	position: relative;

	left:52.880859375%;
	top:58.2465277778%;

	width:12.79296875%;
	height:9.0277777778%;
	
	cursor: pointer;	
	position: absolute;
	
	background-position: 0%  0;
	
	-webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.5);
}

#start-page-start-button:HOVER
{	
	background-position: 200% 0;
}

#start-page-start-button:ACTIVE
{	
	background-position: 100% 0;
}

#start-page .title-start-page{
	
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 25.1%;
	left:-3%;
	width: 50%;
	font-size: 3em;
	
	text-align: center;
	font-family: Andada;
	font-weight: normal;
	line-height:1.04em;
	
	color: #392489;		
	     
}

#help-panel
{
	z-index: 10000;
	display:none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position:absolute;
	top :10%;
	left:20%;
	width:50%;
	height:20%;
	background:#fff;
	border:5px solid #aaa;
	padding:10px;
	
	-webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.5);	
}

#mask-panel
{
	width:100%;
	height:100%;
	z-index: 19999;
	background-color:#000;
	opacity: .6;	
	display: none;
}

#congratulation-panel
{
	display:none;
	background-image: url("../../res/drawable/interface/congratulation.png");
	z-index: 20000;	
	width: 66.2109375%;
	height: 41.4930555556%;
	margin: 0;
	padding:0;
	overflow:hidden;
	position: absolute;	
	background-position: center center;
	background-size: cover;
	
	top: 25%;
	left:16%;	
}


#repeat_game
{
	background-image: url("../../res/drawable/interface/repeat-button.png");

	background-size: 300% 100%;
	position: relative;

	left:60%;
	top:73%;

	width:21.2389380531%;
	height:15.4811715481%;
	
	cursor: pointer;	
	position: absolute;
	
	background-position: 0%  0;
	
	-webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.5);
}

#repeat_game:HOVER
{	
	background-position: 200% 0;
}

#repeat_game:ACTIVE
{	
	background-position: 100% 0;
}