/****************************************
  ==== LAYOUT
****************************************/

*
{
	padding: 0px;
	margin: 0px;
}

html, body
{

	background-color: #CFFFEC;
	width: 100%;
	min-width: 800px;
	height: 100%;
	min-height: 600px;
}

#gameContainer, canvas
{
	height: 100%;
	width: 100%;
	line-height: 0px;
}

/****************************************
  ==== LOADING
****************************************/

#loadingPage
{
	width: 100%;
	min-width: 800px;
	height: 100%;
	min-height: 600px;
	position: absolute;
	top: 0%;
	left: 0%;
}

#titlePicture
{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0px;

}

#loadingBox
{
	width: 100%;
	height: 20px;
	position: absolute;
	top: 250px;
	margin-top: -10px;
	text-align: center;
}

#backgroundProgressBar
{
	position: absolute;
	width: 300px;
	margin-left: -150px;
	left: 50%;
	height: 5px;
	display: none;
	background-color: white;
	border-radius: 2px;
}

#progressBar
{
	left: 50%;
	position: absolute;
	margin-left: -150px;
	width: 0px;
	height: 5px;
	background-color: grey;
	border-radius: 2px;
}

#loadingMessage
{
	color: grey;
	letter-spacing: 1px;
	position: absolute;
	width: 100%;
	font-family: "Monaco", sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-size: 8px;
	margin-top: 10px;
}

#tuto
{
	left: calc(50% - 525px);
	width: 1050px;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	top: 300px;
}
#tutoSeparator
{
	width: 340px;
	display: inline-block;
}

@media screen and (min-height: 600px)
{
	#titlePicture
	{
		top: calc(8% - 48px);
	}

	#loadingBox
	{
		top: 50%;
	}

	#tuto
	{
		top: calc(50% + 35px);
	}
}

/****************************************
  ==== GOOGLE ADS
****************************************/


#AdLoading
{
	position: absolute;
	left: 390px;
	margin-left: -168px;
	top: 270px;
}

#AdLobby
{
	position: absolute;
	left: 600px;
	margin-left: -168px;
	top: 263px;
}

#AdInGame
{
	position: absolute;
	left: 390px;
	margin-left: -168px;
	top: 312px;
}

@media screen and (min-width: 800px)
{
	#AdLoading
	{
		left: 50%;
	}

	#AdLobby
	{
		left: calc(50% + 200px);
	}

	#AdInGame
	{
		left: calc(50% - 7px);
	}
}

@media screen and (min-height: 600px)
{
	#AdLoading
	{
		top: calc(50% + 20px);
	}

	#AdLobby
	{
		top: calc(50% - 38px);
	}

	#AdInGame
	{
		top: calc(50% + 10px);
	}
}

#footer
{
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
}

#footer a
{
	font-family: helvetica;
	color: grey;
}