::selection {color:currentColor;background:transparent}

*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/*******************************/
/* COLORS */
/*******************************/

#gameContainer{
background:#CD4302;
}

#gameHeader{
background:#FFC0A1;
}

#gameHome{
background-color:#CD4302;
border:6px solid #FFC0A1;
}

#loadScreen{
display:table-cell;
width:850px;
height:570px;
text-align:center;
vertical-align:middle;
}

#startScreen{
border:0px solid #FF0000;
}

#startImage img{
border:6px solid #FFFFFF;
}


#startFooterTable{
background-color:#CD4302;
border:6px solid #FFC0A1;
}

#startFooterTable .left{
border-right:6px solid #FFC0A1;
}

#startFooterTable .right{
border-left:6px solid #FFC0A1;
}

#startFooterTable .center{
background-color:#FED4BE;
color:#000000;
}

#startSound{
background-color:#CD4302;
}

#startNext{
background-color:#CD4302;
}

#startText{
color:#000000;
}

#tutorialFooterTable{
background-color:#CD4302;
border:6px solid #FFC0A1;
}

#tutorialFooterTable .left{
border-right:6px solid #FFC0A1;
}

#tutorialFooterTable .right{
border-left:6px solid #FFC0A1;
}

#tutorialFooterTable .center{
background-color:#FFC0A1;
}

#tutorialPrev{
background-color:#CD4302;
}

#tutorialNext{
background-color:#CD4302;
}

#tutorialContainer{
color:#FFFFFF;
}

#gameFunctions{
background-color:#FED0B9;
border:6px solid #FFF3EB;
}

.funcButt{
background-color:#CD4302;
border:6px solid #FFC0A1;
}

#endTable{
color:#FFFFFF;
}

.funcButtBig{
background-color:#CD4302;
border:6px solid #FFC0A1;
}

#endText{
color:#000000;
}

.counterBoxBig{
border:0px solid #FF0000;
}

.counterBoxBig .counterNumbers{
border:3px solid #FFFFFF;
background:#FFFFFF;
color:#000000;
}

.counterBoxBig .counterLabel{
color:#000000;
}

.counterBox .counterNumbers{
border:3px solid #FF7F3E;
background:#FFFFFF;
color:#000000;
}

.counterBox .counterLabel{
color:#CB4402;
}

#endImage img{
border:6px solid #FFFFFF;
}


#gameMessage{
background: #FFC0A1;
}

#msgTd{
color:#FFFFFF;
text-shadow: 0px 0px 10px #000000;
}

#gameAlert{
background: #FFC0A1;
}

#alertTd{
color:#FFFFFF;
text-shadow: 0px 0px 10px #000000;
}

#alertTd a{
background-color:#CD4302;
}

#myData{
position:absolute;
right:0px;
bottom:0px;
height:30px;
background:#CCCCCC;
padding:10px;
display:block;
font-size:22px;
color:#000000;
text-align:center;
}

/*******************************/
/* GAME */
/*******************************/


#gameStage{
width:585px;
height:440px;
margin-top:90px;
margin-left:34px;
background-image: url("/jatekok/villanto/images/background.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center center;
position:absolute;
z-index:220;
}

#gameBlock{
position:absolute;
width:100px;
height:100px;
background:#666666;
}

#gameHead{
position:absolute;
display:none;
z-index:230;
width:585px;
margin-top:120px;
}

#gameKijelzo{
position:absolute;
z-index:240;
margin-left:170px;
}

#gameStart{
position:absolute;
z-index:250;
margin-left:290px;
margin-top:17px;
}

#gameOk{
position:absolute;
z-index:260;
margin-left:290px;
margin-top:17px;
}

.gameElement{
display:none;
position:absolute;
background-image: url("/jatekok/villanto/images/blokk_normal.png");
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center center;
}

.elementContainer{
position:absolute;
width:60%;
height:60%;
margin-left:20%;
margin-top:20%;
}

.elementContainer img{
position:absolute;
width:100%;
}

.elementFunctions{
position:absolute;
width:100%;
height:100%;
}

.areaTopLeft{
position:absolute;
width:50%;
height:50%;
margin-left:0%;
margin-top:0%;
cursor:pointer;
}

.areaTopLeft img{
position:absolute;
margin-left:10%;
margin-top:14%;
}

.areaTopRight{
position:absolute;
width:50%;
height:50%;
margin-left:50%;
margin-top:0%;
cursor:pointer;
}

.areaTopRight img{
position:absolute;
margin-left:39%;
margin-top:10%;
}

.areaBottomLeft{
position:absolute;
width:50%;
height:50%;
margin-left:0%;
margin-top:50%;
cursor:pointer;
}

.areaBottomLeft img{
position:absolute;
margin-left:8%;
margin-top:41%;
}

.areaBottomRight{
position:absolute;
width:50%;
height:50%;
margin-left:50%;
margin-top:50%;
cursor:pointer;
}

.areaBottomRight img{
position:absolute;
margin-left:54%;
margin-top:48%;
}

.elementBig{
width:200px; 
height:200px;
margin-top:170px;;
}

.big_0{margin-left:60px;}
.big_1{margin-left:330px;}

.elementMedium{
width:160px; 
height:160px;
margin-top:180px;
}

.medium_0{margin-left:20px;}
.medium_1{margin-left:210px;}
.medium_2{margin-left:400px;}

.elementSmall{
width:130px; 
height:133px;
margin-top:200px;
}

.small_0{margin-left:20px;}
.small_1{margin-left:160px;}
.small_2{margin-left:300px;}
.small_3{margin-left:440px;}


.wrong{
background:rgba(255,0,0,0.4);
}


#testData{
/*display:block !important;*/
z-index:800;
position:fixed;
height:60px;
background:#FFFFFF;
color:#000000;
font-size:24px;
right:0px;
bottom:0px;
line-height: 120%;
text-align:right;
opacity:0.7;
}

#testData img{
height:90%;
margin:4px;
}

#audioPlayers{
/*display:block !important;*/
}

@media only screen and (min-width: 480px) and (max-width: 799px) {

	/*BASIC SETTINGS*/

	#gameContainer{
		width: 100%;
	}
	#gameContainer #gameHeader #gameHome{
		width: 26px;
		height: 24px;
		background-size: 80%;
		border-width: 3px;
	}

	/* startScreen */

	#startScreen #startImage{
		padding-top: 34px;
		width: 100%;
	}
	#startScreen #startImage img{
		width: 308px;
	}
	#startFooter{
		padding-top: 191px;
		width: 100%;
	}
	#startFooterTable{
		height: 74px;
	}
	#startFooterTable .left, #startFooterTable .right{
		width: 62px;
	}
	#startFooterTable .left a span, #startFooterTable .right a span{
		height: 59px;
		background-size: contain;
	}

	/* gameMessage */

	#gameMessage{
		width: 100%;
		/*height: 270px;*/
		height: 100%;
	}
	#gameMessage #msgTd{
		width: 100%;
		/*height: 260px;*/
		height: 100%;
		font-size: 40px;
		margin: 50px auto auto 0;
		display: block;
	}

	/* gameAlert */

	#gameAlert{
		width: 100%;
	}
	#gameAlert #alertTd{
		height: 260px;
	}
	#gameAlert #alertTd h1{
		font-size: 40px;
	}

	/* tutorialScreen */

	#tutorialScreen{
		width: 100%;
	}
	#tutorialScreen #tutorialContainer{
		width: 80%;
		height: auto;
		margin-left: 80px;
		padding-top: 44px;
	}
	#tutorialScreen #tutorialContainer img{
		height: 130px;
	}
	#tutorialScreen #tutorialContainer span{
		font-size: 10px;
	}
	#tutorialScreen #tutorialFooter{
		padding-top: 186px;
	}
	#tutorialScreen #tutorialFooter #tutorialFooterTable{
		height: 74px;
	}
	#tutorialScreen #tutorialFooter #tutorialFooterTable .left, #tutorialScreen #tutorialFooter #tutorialFooterTable .right{
		width: 62px;
	}
	#tutorialScreen #tutorialFooter #tutorialFooterTable .left a span, #tutorialScreen #tutorialFooter #tutorialFooterTable .right a span{
		height: 59px;
		background-size: contain;
	}

	/* gameScreen */

	#gameScreen #gameStage{
		margin-top: 40px;
		margin-left: 10px;
		height: 217px;
		width: 255px;
		background-size: contain;
	}
	#gameScreen #gameFunctions{
		margin-left: 0;
		height: 205px;
		right: 10px;
	}
	#gameScreen #gameFunctions #gameCounters {
		height: 150px;
		margin: 5px;
	}
	#gameScreen #gameFunctions #gameCounters .counterBox{
		margin-bottom: 5px;
	}
	#gameScreen #gameFunctions #gameCounters .counterBox .counterLabel{
		font-size: 12px;
		height: 12px;
	}
	#gameScreen #gameFunctions #gameCounters .counterBox .counterNumbers{
		font-size: 16px;
		height: 14px;
	}
	#gameScreen #gameFunctions #gameFuncCont {
		margin: 0 5px 5px 5px;
		text-align: left;
	}
	#gameScreen #gameFunctions #gameFuncCont .funcButt{
		width: 30px;
		height: 30px;
		background-size: 80%;
		margin: 0 6px 6px 6px;
	}

	/* endScreen */

	#endScreen #endTable{
		margin: auto;
		padding-top: 35px;
		width: 350px;
		position: relative;
		height: 270px;
	}

	#endScreen #endTable #endImage{
		width: 150px;
		text-align: center;
	}
	#endScreen #endTable #endImage img{
		height: 160px;
	}
	#endScreen #endTable #endDatas {
		height: 160px;
	}
	#endScreen #endTable #endDatas .counterLabel {
		height: 18px;
		font-size: 20px
	}
	#endScreen #endTable #endDatas .counterNumbers {
		font-size: 27px;
		height: 26px;
	}
	#endScreen #endTable #endDatas #endText{
		font-size: 11px;
	}
	#endScreen #endTable #endFinctions{
		height: 44px;
	}
	#endScreen #endTable #endFinctions .funcButtBig{
		width: 38px;
		height: 38px;
		background-size: contain;
	}

	/*BASIC SETTINGS END*/

	/* jatek */

	.elementBig{
		width: 80px;
		height: 80px;
		margin-top: 90px;

	}
	.big_0{
		margin-left: 33px;
	}
	.big_1{
		margin-left: 133px;
	}
	.elementMedium {
		width: 70px;
		height: 70px;
		margin-top: 100px;
	}
	.medium_0 {
		margin-left: 15px;
	}
	.medium_1 {
		margin-left: 92px;
	}
	.medium_2 {
		margin-left: 170px;
	}
	.elementSmall {
		width: 55px;
		height: 55px;
		margin-top: 110px;
	}
	.small_0 {
		margin-left: 10px;
	}
	.small_1 {
		margin-left: 70px;
	}
	.small_2 {
		margin-left: 130px;
	}
	.small_3 {
		margin-left: 190px;
	}
	#gameHead{
		margin-top: 70px;
	}
	#gameHead #gameKijelzo{
		width: 130px;
		margin-left: 68px;
	}
	#gameHead #gameStart{
		width: 32px;
		margin-left: 117px;
		margin-top: 8px;
	}
	#gameHead #gameOk{
		width: 32px;
		margin-left: 117px;
		margin-top: 8px;
	}
}