@font-face {
	font-family: exo;
	src:         url("exo.light.otf") format("opentype");
}

* {
	font-family: exo, sans-serif, Helvetica;
}

#header {
	text-align: center;
	font-size:  60px;
	margin-top: 40px;
}

/*
Submit button:
*/
#randomize, #validate {
	-webkit-border-radius: 0;
	-moz-border-radius:    0;
	border-radius:         0px;
	font-family:           Arial;
	color:                 #000;
	font-size:             20px;
	background:            #fff;
	padding:               10px 20px 10px 20px;
	border:                solid #000 2px;
	text-decoration:       none;

	display:               table;
	margin:                0 auto;
	margin-top:            10px;
	cursor:                pointer;

	transition:            all ease .25s;
}

#randomize:hover, #validate:hover {
	background:      #ebebeb;
	text-decoration: none;
}

/*
Validate Button
*/
#randomize {
	float: left;
	height: 51px;
}

/*
Validate Button
*/
#validate {
	width:  145px;
	height: 51px;
}

#validate-container {
	float:  right;
}

.valid {
	background-color: #0f0 !important;
}

.invalid {
	background-color: #f00 !important;
}

/*
"fields left"-label
*/
#fields-left {
	text-align: center;
	margin-top: 8px;
}

/*
Center the table
*/
.sudoku {
	display: table;
	margin:  0 auto;
}

/*
Sudoku inputs:
*/
#sudoku-table input {
	border:     none;
	padding:    0px;
	margin:     0px;
	text-align: center;
	font-size:  30px;
	width:      45px;
	height:     45px;
}

input:focus {
	outline: none;
}

/*
Sudoku borders:
*/
#row1, #row4, #row7 {
	border-top: 3px solid black;
}

#row9 {
	border-bottom: 3px solid black;
}

#col1, #col4, #col7 {
	border-left: 3px solid black;
}

#col9 {
	border-right: 3px solid black;
}

/*
Overall table:
*/
table, td {
	border:          1px solid black;
	border-collapse: collapse;
}

td {
	text-align: center;
}


/*
Special
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin:             0; /* <-- Apparently some margin are still there even though it's hidden */
}