/* Originally made by magiczocker10 */

#top-screen  {
	background-color: #51c045;
	color: #fff;
	text-align: center;
}

#bottom-screen {
	background-color: #71ff61;
	text-align: center;
}

#top-screen h2 {
	background-color: #3d3d3d;
	border: #fff solid 1px;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 4%;
	width: 60%;
}

#stats {
	background-color: #006405;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
	text-align: left;
	width: 50%;
}

#bottom-screen > * {
	vertical-align: top;
	margin-top: 2%;
}

#field {
	display: inline-table;
	border-bottom: #fff 2px solid;
	border-left: #808080 2px solid;
	border-right: #fff 2px solid;
	border-top: #808080 2px solid;
	border-radius: 5px;
	border-spacing: 0;
	margin-left: auto;
	margin-right: auto;
}
td {
	-webkit-background-size: 100% 100%;
		-o-background-size: 100%;
			background-size: 100%;
	background-color: #C0C0C0;
	border-bottom: #808080 2px solid;
	border-left: #fff 2px solid;
	border-right: #808080 2px solid;
	border-top: #fff 2px solid;
	color: #C0C0C0;
	font-weight: bold;
	height: 16px;
	line-height: 1;
	-webkit-user-select: none;
	        user-select: none;
	width: 16px;
}
td.num1.open {
	color: #0000F5;
}
td.num2.open {
	color: #377E22;
}
td.num3.open {
	color: #EA3323;
}
td.num4.open {
	color: #00007B;
}
td.num5.open {
	color: #75140C;
}
td.num6.open {
	color: #377E7F;
}
td.num7.open {
	color: #000;
}
td.num8.open {
	color: #808080;
}
td:not(.open) {
	cursor: pointer;
}
td.open {
	border: #909090 1px solid;
	height: 18px;
	width: 18px;
}

td.mine.open {
	-webkit-background-size: 100% 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	background-image: url("img/bomb.png");
	font-size: 0;
}

td[flagged="1"] {
	font-size: 0;
	background-image: url("img/flag.png");
}

#restart-msg {
	color: #f00;
	visibility: hidden;
}

#buttons {
	display: inline-block;
	width: 12%;
}

#buttons button {
	margin-top: 5%;
	width: 100%;
}

#buttons img {
	width: 100%;
}