*{
	font-family: 'Open Sans', sans-serif;
}

body{
	text-align: center;
}

div.selector, div.game{
	display: inline-block;
}

div.selector{
	text-align: right;
}

div.game{
	min-width: 50%;
	margin: 50px;
}

input, select, label[for], button{
	padding: 5px;
	margin: 5px;
	background-color: #ddd;
	border: none;
	border-radius: 5px;
	transition-duration: 0.2s;
	box-sizing: border-box;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	font-size: medium;
}

input:hover, select:hover, label[for]:hover, button:hover{
	background-color: #bbb;
}

input:focus, select:focus, label[for]:focus, button:focus{
	background-color: #bdf;
	border: none;
}

input:active, select:active, label[for]:active, button:active{
	background-color: #bdf;
	border: none;
}

input[type="file"]{
	width: 0;
	height: 0;
	
	padding: 0;
	margin: 0;
	
	border-radius: 0;
	opacity: 0;
}

h1{
	width: calc(50% - 70px);
	
	display: inline;
	
	background-color: #ddd;
	
	border-radius: 50px;
}

h1#mines{
	float: left;
}

h1#time{
	float: right;
}

/* Table */

table{
	display: inline-table;
	background-color: #ddd;
	border-radius: 10px;
	padding: 5px;
}

td{
	width: 45px;
	height: 45px;
	
	margin: 5px;
	padding: 2px;
	
	background-color: #aaa;
	
	box-sizing: border-box;
	
	border-radius: 25%;
	
	transition-duration: 0.2s;
	
	cursor: pointer;
}

td.wt:hover{
	background-color: #ccc;
}

td.wt:active{
	background-color: #999;
}

td.chkd{
	background-color: #777;
	cursor: default;
}

/* Main button */

button#circle{
	padding: 35px;
	border: none;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
}

button#circle:active{
	border: none;
}

button#circle.win{
	background-color: #0f4;
}

button#circle.win:hover{
	background-color: #0d2;
}

button#circle.lose{
	background-color: #f33;
}

button#circle.lose:hover{
	background-color: #d11;
}

button#circle.ingame{
	background-color: #fa0;
	animation: 1s infinite alternate shrink;
}

button#circle.ingame:hover{
	background-color: #d80;
}

button#circle.loading{
	background-color: #0af;
	animation: 1s infinite alternate shrink;
}

button#circle.loading:hover{
	background-color: #08d;
}

@keyframes shrink{
	from{
		padding: 35px;
		margin-top: 0px;
	}
	to{
		padding: 15px;
		margin-top: 20px
	}
}