/* General Styles*/

body
{
    margin: 0;
    padding: 0;
}

canvas
{
    vertical-align: top;
}

input
{
	cursor: pointer;
}


/* Infolable Styles*/

#info
{
	display: block;
	position: absolute;
	height: 80%;
	width: 450px;
	top: 5%;
	background-color: rgba(50, 50, 50, 0.6);
	border-radius: 0 0 40px 0;
	box-shadow: 10px 20px 20px #000;
	color: #FFF;
}

#info *
{
	position: absolute;
}

#levelSelector, #rekordInfo, #controlsInfo
{
	left: 12.5%;
	width: 75%;
	background-color: rgba(50, 50, 50, 0.6);
	border-radius: 10px;
	border: 4px solid #000;
}

#closeButton
{
	right: 0;
	height: 5%;
	background-color: #000;
	border-color: #000;
    color: #FFF;
    border-radius: 0 0 0 10px;
}

#openButton
{
	display: block;
	position: absolute;
	width: 0px;
	height: 50px;
	top: 5%;
	border-radius: 0 5px 5px 0;
	background-color: rgba(50, 50, 50, 0.5);
	box-shadow: 5px 5px 5px #000;
}

#openButton input
{
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
	border-color: rgba(50, 50, 50, 0.6);
	border-left: none;
	font-size: 20px;
}

#levelSelector
{
	top: 5%;
	height: 17.5%;
}

#levelLabel, #currentLevel, #levelUp, #levelDown
{
	width: 50%;
	height: 33%;
	text-align: center;
}

#levelLabel
{
	top: 33%;
	left: 0;
}

#currentLevel
{
	top: 33%;
	left: 50%;
}

#levelUp
{
	top: 0;
	left: 50%;
	background-color: lightgreen;
	border-color: lightgreen;
	border-radius: 0 10px 0 0;
}

#levelDown
{
	top: 66%;
	left: 50%;
	background-color: lightcoral;
	border-color: lightcoral;
	border-radius: 0 0 10px 0;
}

#rekordInfo
{
	top: 25%;
	height: 30%;
	overflow-y: scroll;
}

#rekordInfo *
{
	position: relative;
}

#rekordInfo table
{
	width: 95%;
	margin-top: 5%;
}

#rekordInfo table:nth-child(1) tr td
{
	padding: 5%;
	color: #FFF;
}

#rekordInfo table:nth-child(2)
{
	text-align: center;
	border-collapse: collapse;
	border: 5px solid #000;
}

#rekordInfo table:nth-child(2) tr td
{
	width: 33%;
	padding: 0;
}

#rekordInfo table:nth-child(2) tr:nth-child(1) td
{
	height: 50px;
	background-color: rgba(100, 100, 255, 0.5);
	font-weight: bold;
}

#controlsInfo
{
	top: 57.5%;
	height: 37.5%;
}

#controlsInfo *
{
	position: relative;
}

#controlsInfo table
{
	color: #FFF;
	left: 5%;
	height: 100%;
	width: 90%;
}

#infoButton
{
	width: 100%;
	height: 75%;
	font-size: inherit;
	background-color: #FFFF99;
}


/* Instructions */

#instructions
{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

#instructions p
{
	font-size: 23px;
}

#instructionsWrapper
{
	position: absolute;
	width: 30%;
	height: 80%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #888;
	padding: 5%;
	border-radius: 50px;
}

#instructionsHeader
{
	position: absolute;
	text-align: center;
	margin: 0;
	top: 5%;
	left: 0;
	width: 100%;
}

#instructionsContent
{
	position: relative;
	height: 100%;
	width: 100%;
	padding-right: 2.5%;
	overflow-y: auto;
}

#colors, #items
{
	width: 100%;
	font-size: 25px;
}

#colors td, #items td
{
	width: 33%;
}

#colors td:first-child
{
	text-align: center;
}



/* Other Stuff */

#timeDiv
{
	display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 30px;
	font-size: 24px;
	text-align: center;
	color: #BBB;
    background-color: rgb(50, 50, 50);
	border-radius: 10px 0 0 0;
	border-top: 5px solid #000;
	border-left: 5px solid #000;
}

#testMode
{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	height: 50px;
}