@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url(russo.woff) format('woff');
}

html, body {
	width: 100%;
	height: 100%;
	font-family: 'Russo One';
}

body {
	background-color: #4ab85a;
	
	margin: 0;
	font-family: 'Russo One';
}

 #canvasGame {
    background: #2ebd6a;
	display:none;
	opacity:0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0 auto;	
	z-index:0;

}

#gameContainer {

	width:1125px;
	height:720px;

	display:none;
	opacity:0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0 auto;	
z-index:1;


-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;

}


#gameContainer .score {
	font-size:0.85vw;
	position:absolute;
	bottom:7px;
	left:7px;
	color:white;
	
}

#gameContainer .leaderboard {
	font-size:1.8vh;
	position:absolute;
	top:4px;
	right:4px;
	color:white;
	width:13%;
	height:25%;
	background-image: url('../graphic/leaderboard.png');
	background-repeat: no-repeat;
	background-size: cover;
	padding-top:4px;
	opacity:0.9;
	text-align:center;
	
}

#gameContainer .endGame {
	font-size:3vw;
	position:absolute;
	display:none;
	left:0;
	right:0;
	margin:0 auto;	
	text-align:center;
	color:black;
	
}

#gameContainer .endGame .btnPlayAgain{
font-family: 'Russo One';
font-size:2vw;
background:#e57a45;
padding:2px 5px 2px;
border:none;
display:none;
opacity:0;
}


#uiContainer {
	width: 100%;
	height: 100%;
	margin: 0;

}

#uiContainer .centerUi {
	z-index:5;
	width: 30%;
	height: 20%;
	position: absolute;
    top: 10%;
	left: 35%;
}

#uiContainer .gameStartBox {
height:13%;
}

#uiContainer .gameStartBox .yourNameInput{
font-family: 'Russo One';
font-size:1vw;
background:white;
height:100%;
width: 75%;
text-indent: 10px;
padding:0px;
border:none;
float:left;
}

#uiContainer .gameStartBox .btnStartGame{
font-family: 'Russo One';
font-size:1vw;
background:#e57a45;
height:100%;
padding:0px;
width:25%;
border:none;
float:left;
}

#uiContainer .name{
font-family: 'Russo One';
font-size:4vw;
width:100%;
display: block;
text-align: center;
}

#uiContainer .info{
margin-top:5px;
font-family: 'Russo One';
font-size:0.9vw;
width:100%;
display: block;
text-align: center;
}

#uiContainer .allCharactersLink{
font-family: 'Russo One';
font-size:0.5vw;
width:100%;
display: block;
text-align: center;
cursor:pointer;
margin-bottom:2px;
}
#uiContainer .allCharactersLink a{
color:#cc0000;
}


#uiContainer .allCharacters{
font-family: 'Russo One';
font-size:0.5vw;
width:100%;
display: block;
text-align: center;
}

#uiContainer .allCharacters .character{
display: inline-block;
	font-size:11px;
	padding:16px;
	text-align:center;
}


#uiContainer .allCharacters .character img{
width:100px;
height:100px;
}


#uiContainer .top-right-login{
width:20%;
height:35%;
font-family: 'Russo One';
font-size:0.9vw;
position:fixed;
right:2px;
top:2px;

background-image:url('../graphic/logininfo.png');
background-repeat: no-repeat;
background-position: left bottom;
background-size:70% 89%;
}

#uiContainer .top-right-login .fblogin{
width:60%;
height:13%;
float:right;
cursor:pointer;
}



#uiContainer .top-right-panel{
font-family: 'Russo One';
font-size:0.75vw;
position:fixed;
right:0px;
top:0px;
text-align:right;
background:white;
padding:4px;
border-radius:4px;
}


#uiContainer .footer-right {
font-family: 'Russo One';
font-size:0.9vw;
position:fixed;
right:0px;
bottom:2px;
z-index:1;
}


#uiContainer .top-left-servers{
	display:inline;
font-family: 'Russo One';
font-size:0.8vw;
position:fixed;
left:5px;
top:1px;
text-align:left;
}

#uiContainer .footer-right span{
margin-right:8px;
}

#uiContainer .footer-left {
font-family: 'Russo One';
font-size:0.8vw;
position:fixed;
left:3px;
bottom:3px;
z-index:1;
}

#uiContainer .footer-left span{
margin-left:3px;
}

#shareContainer{
	margin:0 auto;
	text-align:center;
	position:fixed;
	bottom:2px;
	width:100%;
	
}


#shareBtn{
	font-family: 'Russo One';
	font-size:0.9vw;
	text-align:center;
background-color: #3b5998;
    border-radius: 3px;
    color: white;
    padding: 2px 5px 2px;
}


a{
	text-decoration:none;
	color:black;
}

a:visited{
	text-decoration:none;
	color:black;
}

@media (max-width: 1000px) {
   #gameZoo {
     display: none;
   }
 }