/* Alasdair King, 23 March 2020 */

html { 
	box-sizing: border-box; 
} 
*, *:before, *:after { 
	box-sizing: inherit; 
}

html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: sans-serif
}

body {
	padding:1em;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

table {
	border: solid black 1px;
	border-spacing:0;
	padding:0;
	margin:0;
	background-image:url("images/checker.png");
	background-repeat:both;
}
td {
	border: solid black 1px;
	padding:0;
	margin:0;
	width:20px;
	height:20px;
	user-select: none;
	-webkit-user-select: none;
	touch-action:none;
}
tr {
	padding:0;
	margin:0;
}
label {
	border-style:solid;
	border-color:black;
	border-width:1px;
	margin:3px;
	-webkit-user-select: none; /* Safari */
    
	user-select: none; /* Standard syntax */
	padding:5px;
}
input {
	white-space:nowrap;
}
input[type="button"] {
	border-style:solid;
	border-color:black;
	border-width:1px;
	margin:3px;
	-webkit-user-select: none; /* Safari */
    
	user-select: none; /* Standard syntax */
	padding:5px;
}
span#paintcolor {
	border-style:solid;
	border-color:black;
	border-width:1px;
	margin:3px;
	-webkit-user-select: none; /* Safari */
    
	user-select: none; /* Standard syntax */
	padding:5px;
	background-color:black;
}