﻿body
{
	background-color: gray;
	font-family: 'Roboto Mono', monospace;
	font-size:12px;
}
input[type='button']
{
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius:0;
	font-family: 'Roboto Mono', monospace;
	outline: 1px solid #000000;
	background-color: #C0C0C0;
	border-width: 1px;
	border-style: solid;
	border-color: #FFFFFF #808080 #808080 #FFFFFF;
	padding: 0;
}
input[type='button']:active, .Active
{
	background-color:white !important;
}

/*Home*/
#HomeDiv
{
	text-align: center;
}
#HomeDiv h1
{
	margin: 0;
}
#HomeLogo
{
	max-width:245px;
}
#HomeDev
{
	position:absolute;
	right:10px;
	text-align:right;
}
#DifficultyDiv
{
	background-color: gray;
	position: absolute;
	margin: 0 auto;
	top:150px;
	left: 0;
	right: 0;
	text-align: center;
	border: 1px solid black;
}

/*Game*/
.FloatThird
{
	float:left;
	width:33.33%;
}
#Score, #Difficulty, #HiScore, #GameOverScore, #GameOverTime, #Coins, #GameOverCoins
{
	font-weight: bold;
}
#SnakeCanvas
{
	background-color: black;
	touch-action: none;
}
#GameOverDiv
{
	background-color: gray;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	text-align: center;
	border:1px solid black;
}
#GameOverDiv h1
{
	margin:10px 0;
}
#GameOverHiScoreDiv
{
	background-color:white;
	color:red;
	font-weight:bold;
	width:70%;
	margin:0 auto;
}

/*Leaderboard*/
#LeaderboardButtonsDiv
{
	text-align:center;
}
#LeaderboardTable
{
	border: 1px solid white;
	border-collapse: collapse;
}
#LeaderboardTable th
{
	background-color:gray;
	color:white;
	border:1px solid white;
	width:33.33%;
}
#LeaderboardTable tr
{
	background-color:white;
}
#LeaderboardTable tr:nth-child(odd)
{
	background-color: lightgray;
}
#LeaderboardTable td:not(:first-child)
{
	text-align: right;
}

/*Customize*/
#CustomizeDiv h1
{
	margin:10px 0;
}
#CustomizeCoins
{
	font-size: 1.2em;
	font-weight: bold;
}
#ItemsDiv
{
	overflow-y:auto;
}
.CustomizeItem
{
	background-color:#e2e2e2;
	padding: 15px 10px;
	margin-bottom: 10px;
}
.Selected
{
	background-color:darkgray;
}
.ColorSnake
{
	width:60%;
	height:20px;
}
.Cost
{
	float: right;
	font-size: 1.2em;
	font-weight: bold;
}
.CoinMedium
{
	vertical-align: middle;
	width: 22px;
	margin-right: 2px;
}