::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:#BE95DB;
}

#gameHeader{
background:#A75FDC;
}

#gameHome{
background-color:#360F4E;
border:6px solid #A75FDC;
}

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

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

#startImage img{
border:6px solid #8660A9;
}


#startFooterTable{
background-color:#360F4E;
border:6px solid #A75FDC;
}

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

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

#startFooterTable .center{
background-color:#FFFFFF;
}

#startSound{
background-color:#360F4E;
}

#startNext{
background-color:#360F4E;
}

#startText{
color:#34104E;
}

#tutorialFooterTable{
background-color:#34104E;
border:6px solid #A75FDC;
}

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

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

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

#tutorialPrev{
background-color:#34104E;
}

#tutorialNext{
background-color:#34104E;
}

#tutorialContainer{
color:#FFFFFF;
}

#gameFunctions{
background-color:#E3BCFF;
border:6px solid #9A3FD8;
}

.funcButt{
background-color:#34104E;
border:6px solid #9A3FD8;
}

#endTable{
color:#FFFFFF;
}

.funcButtBig{
background-color:#34104E;
border:6px solid #9A3FD8;
}

#endText{
color:#FFFFFF;
}

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

.counterBoxBig .counterNumbers{
border:3px solid #666666;
background:#CCCCCC;
}

.counterBox .counterLabel{
color:#000000;
}

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

#gameMessage{
background: #A75FDC;
}

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

#gameAlert{
background: #A75FDC;
}

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

#alertTd a{
background-color:#360F4E;
}

#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:576px;
height:432px;
margin-top:80px;
margin-left:30px;
position:absolute;
z-index:220;
}

#gameSzamsor{
width:100%;
height:100%;
background-color:#000000;
background-image:url('/jatekok/titkosugynok/images/jatek.jpg');
background-repeat:no-repeat;
background-position:center center;
border:4px solid #666666;
}

#gameSzamsor h1{
color:#FFFFFF;
text-align:center;
padding:20px 0px 0px 0px;
}

#etlonDigit{
display:block;
font-size:36px;
color:#000000;
text-align:center;
padding:100px 0px 0px 0px;
}

#gamePanel{
width:100%;
height:100%;
background-color:#E3D5EF;
border:4px solid #523466;
}

#userDigitsCont{
padding:10px;
}

#userDigits{
display:table-cell;
text-align:center;
vertical-align:middle;
width:450px;
height:45px;
font-size:22px;
color:#000000;
background-color:#00FF01;
border:4px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
}

#userBalckboard{
width:445px;
height:330px;
padding:5px;
margin:0px 10px 10px 10px;
background-color:#000000;
border-radius: 10px;
-moz-border-radius: 10px;
}

#boardTitleCont{
padding:5px;
}

#boardTitle{
display:table-cell;
text-align:center;
vertical-align:middle;
width:430px;
height:45px;
font-size:22px;
color:#000000;
background-color:#C6FFEE;
border:4px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
}

#userKeyboard{
text-align:center;
width:200px;
margin-left:60px;
}

#userKeyboard div{
display:inline-block;
text-align:center;
width:50px;
height:50px;
font-size:32px;
font-weight:bold;
color:#000000;
background-color:#B2B2B2;
border:4px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
cursor:pointer;
margin:2px;
}

#userKeyboard div span{
display:table-cell;
text-align:center;
vertical-align:middle;
width:50px;
height:50px;
}

#userDel{
position:absolute;
margin-left:310px;
margin-top:280px;
display:inline-block;
text-align:center;
width:140px;
height:36px;
padding:6px 0px;
font-size:32px;
font-weight:bold;
color:#FE0000;
background-color:#FFFFFF;
border:4px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
cursor:pointer;
}

#userGo{
position:absolute;
margin-left:310px;
margin-top:347px;
display:inline-block;
text-align:center;
width:140px;
height:36px;
padding:6px 0px;
font-size:32px;
font-weight:bold;
color:#000000;
background-color:#82CA9C;
border:4px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
cursor:pointer;
}

#userScope{
position:absolute;
margin-left:477px;
margin-top:312px;
width:91px;
height:92px;
cursor:pointer;
text-align:center;
font-size:15px;
color:#37104F;
}

.digitGreen{
color:#008200;
font-weight: bold;
}

.digitRed{
color:#FF0000;
}

#gameMode{
width:100%;
height:100%;
background-color:#E3D5EF;
border:4px solid #523466;
}

#gameMode .modeTitle{
background:#FFFFFF;
margin:2%;
padding:10px;
color:#000000;
font-size:36px;
}

#gameMode button{
display:inline;
margin:5% 2% 0% 2%;
background:transparent;
border:none;
color:#000000;
font-size:25px;
cursor:pointer;
margin-top:110px;
}

#gameMode button:first-child{
margin-left:68px;
}

@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 */

	#gameMode{
		width: 247px;
		height: 209px;
	}
	#gameMode img{
		width: 80px;
		height: 80px;
	}
	#gameMode #modeNormal{
		margin-left: 40px;
		margin-top: 60px;
	}
	#gameMode #modeReverse{
		/*margin-left: 30px;*/
		margin-top: 60px;
	}
	#gameStage #gameSzamsor{
		background-size: contain;
		width: 247px;
		height: 185px;
	}
	#gameStage #gameSzamsor #digitsLabel{
		font-size: 16px;
		padding-top: 7px;
	}
	#gameStage #gameSzamsor #etlonDigit{
		font-size: 26px;
		padding: 30px 0px 0px 0px;
	}
	#gameStage #gamePanel{
		width: 247px;
		height: 209px;
	}
	#gameStage #gamePanel #userDigitsCont{
		padding: 2px;
	}
	#gameStage #gamePanel #userDigitsCont #userDigits{
		height: 25px;
		font-size: 18px;
		border: 2px solid #FFFFFF;
	}
	#gameStage #gamePanel #userBalckboard{
		margin: 0 4px 5px 4px;
		width: 216px;
		height: 163px;
	}
	#gameStage #gamePanel #userBalckboard #boardTitleCont{
		padding: 0;
	}
	#gameStage #gamePanel #userBalckboard #boardTitleCont #boardTitle{
		height: 20px;
		font-size: 11px;
		border: 2px solid #FFFFFF;
	}
	#gameStage #gamePanel #userBalckboard #userKeyboard{
		margin-left: -2px;
		width: 132px;
		margin-top: 3px;
	}
	#gameStage #gamePanel #userBalckboard #userKeyboard div{
		width: 28px;
		height: 28px;
		border: 2px solid #FFFFFF;
		font-size: 22px;
		margin-bottom: 0;
		margin-top: 0;
	}
	#gameStage #gamePanel #userBalckboard #userKeyboard div span{
		width: 28px;
		height: 28px;
	}
	#gameStage #gamePanel #userDel{
		margin-left: 147px;
		margin-top: 66px;
		width: 70px;
		height: 18px;
		padding: 0;
		font-size: 16px;
	}
	#gameStage #gamePanel #userGo{
		margin-left: 147px;
		margin-top: 99px;
		width: 70px;
		height: 18px;
		padding: 0;
		font-size: 16px;
	}
	#gameStage #userScope{
		margin-left: 157px;
		margin-top: 112px;
		width: 65px;
		height: 40px;
		font-size: 12px;
		color: #ffffff;
	}
	#gameStage #userScope img{
		width: 40px;
	}


}