body {
	cursor: default;
	background-color: silver;
	vertical-align: top;
	display: inline-block;
	font-size: 1em;
	color: black;
	font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	-WEBKIT-USER-SELECT: NONE; /* SAFARI, CHROME */
    -KHTML-USER-SELECT: NONE; /* KONQUEROR */
    -MOZ-USER-SELECT: NONE; /* FIREFOX */
    -MS-USER-SELECT: NONE; /* IE */
    USER-SELECT: NONE; /* CSS3 */
	border: 8px;
	border: 8px double grey;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
.body {
	position: absolute;
	left: -8px;
	right: -8px;
	top: -8px;
	bottom: -8px;
	text-align: center;
	border: 8px dashed grey;
}
#info {
	text-align: left;
}
#money {
	color: #008800;
	display: inline-block;
	font-size: 3em;
	background-color: #88f088;
	
	border: 6px;
	border-style: double;
	border-color: #008800;
	border-radius: 3px;
	
	padding: 4px;
	width: auto;
}
#rate {
	color: #008800;
	margin: 8px;
}
td {
	padding: 0px;
}
#grid {
	margin: 4px;
	display: inline-block;
	vertical-align: top;
	border-collapse: collapse;
	border: 8px solid silver;
	border-radius: 8px;
}
#selection {
	background-color: #cccccc;
	border-radius: 8px;
	margin: 4px;
	font-size: 0.6em;
	display: inline-block;
	vertical-align: top;
	float: left;
}
#achievements {
	display: inline-block;
	overflow-y: scroll;
	margin: 4px;
	border: 8px solid silver;
	border-radius: 8px;
	right: 0px;
	align-self: stretch;
	height: 50%;
	background: silver;
}
#size {
	font-size: 3em;
	float: bottom;
}
#clear {
}
.sprite {
	display: inline-block;
	text-align: center;
	position: relative;
	width: 70px;
	height: 70px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.sprite--select {
	border: 4px solid transparent;
}
.sprite:hover {
	-webkit-filter: brightness(3);
}
.sprite:hover .tip {
	visibility: visible;
}
.tip {
	cursor: default;
	font-size: 1.5em;
	color: black;
	visibility: hidden;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	z-index: 0;
}
.progress {
	height: 4px;
	position: absolute;
	bottom: 0px;
}
.select {
	color: #008800;
	font-size: 2em;
	text-align: center;
}
.selected {
	border: 4px solid blue;
	border-radius: 8px;
	background-color: #ffffff;
	background-repeat: no-repeat;
}
.achievement {
	font-size: 2em;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 16px;
	padding: 0px;
	border: 8px;
	border-style: double;
	border-radius: 8px;
	
	list-style-image: url('sprites/locked.png');
}
.achieved {
	color: #006600;
	background-color: #80ff80;
	border-color: #006600;
	
	list-style-image: url('sprites/check.png');
	
	display: list-item;
	visibility: visible;
}
.locked {
	color: #404040;
	background-color: #808080;
	border-color: #404040;
}
.smallMargin {
	margin: 4px;
}
.hidden {
	visibility: hidden;
	display: none;
}
.description {
	font-size: 0.5em;
}
.thinColumn {
	width: 100px;
}
.gameInfo {
	background-color: #cccccc;
	border-radius: 8px;
	margin: 4px;
	padding: 4px;
}
.main {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.flex {
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.column {
	background-color: #cccccc;
	border-radius: 8px;
	margin: 4px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ui__button {
	color: grey;
	text-shadow: 1px 1px 0px white, -1px -1px 0px black;
	background: linear-gradient(to right bottom, white, silver, white, grey, grey);
	
	font-size: 1em;
	transition-duration: 0.5s;
	cursor: grab;
	
	display: inline-block;
	
	border: 4px outset white;
	border-radius: 6px;
	
	padding: 4px;
	margin: 4px;
}
.ui__button--disabled {
	background: #bbbbbb;
	color: #aaaaaa;
	display: inline-block;
	border-radius: 6px;
	
	padding: 4px;
	margin: 4px;
}
.ui__button:hover{
	color: black;
	text-shadow: 1px 1px 0px white, -1px -1px 0px grey;
	background: linear-gradient(to right bottom, white, grey);;
}
.ui__button:active{
	color: white;
}