/* CSS Document */

body,html {
	display:block;	
	padding:0;
	margin:0;
	font-family: arial;
	background-color: #008CBA;
	height:100%;
}
body{position:relative;}
.hidden{visibility:hidden;}
.hide{display:none;}
*{	box-sizing: border-box;}
p{margin:10px 0;}
p + p{ margin-top:0;margin-bottom:10px;}
.pull-right{float: right;}
.board {
	display:block;
	margin:0 auto;
	width:382px;
	height:100%;
	padding:5px;
}
#btn_rstats{margin-top:10px;}
#sudoku, #sudoku_container {
	display:block;
	padding:0;
	position:relative;
} 
.banner {
position:absolute;
width:100%;
height:100%;
background-color: rgba(255,255,255,0.9);
top:0;
left:0;
text-align:center;
color:#000;
padding:10px;
padding-top:25%;
	box-sizing: border-box;
	overflow:auto;
}
.banner h2 {margin:5px 0 10px 0;}
.banner.fill{padding-top:10px;}
.banner .center{ width:50%;text-align:left;margin:0 auto;}
.banner .center.table{ width:65%;text-align:left;margin:0 auto;}

table {
	position:relative;
	margin:0;
	border-collapse:collapse;
}
td {padding:0;}
td a {
	display:block;
	position:relative;
	margin:0;
	text-align:center;
	width:39px;
	height:39px;
	line-height:37px;
	vertical-align:middle;
	font-size:30px;
	font-weight:bold;
	color:#000;
	text-decoration:none;
	border:1px solid #008CBA;
	border-radius:5px;
	box-sizing: border-box;
	cursor: default;

}
td div {margin:0 2px 2px 0;background-color:#fff;border-radius:5px;box-sizing: border-box;}
tr td:last-child a{margin-right:0;}
table tr:last-child a{margin-bottom:0;}

td .pencil-board  {
	position:relative;
	margin: 0 !important;
	border-collapse:collapse;
	display: block;
	width: 100%;
}
td .pencil-board td {
	height: 33.3%;
	width: 33.3%;
	font-size: 9px !important;
	line-height: 10px;
}

a.Valid { color:#070; }
a.Invalid { border-color: #A00; background-color: #FCC;}
a.Fixed, a.Fixed.Invalid { color:#000;  background-color:#ccc}
a.Sel  {background-color: rgba(0, 140, 186, 0.6) !important; border: solid 2px #000;}
a.Hint{color:#000;  background-color:#ccc;}
a.Match{border: solid 2px #002b80; color:#002b80;}
a.Sel,a.AreaSel  {background-color: rgba(0, 140, 186, 0.3); }
a.Pencil  {background-color: rgba(0, 140, 186, 0.3); padding:1px;}

.controls{display:block; padding:0;margin-bottom:0;text-align:center;}
.controls.game{background-color: #008CBA;text-align: left;}
.controls.numbers {padding:10px 3px 5px 3px;}
.controls.levels {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	background-color: #008CBA;
	top:0;
	left:0;
	text-align:center;
	color:#000;
	padding: 10px;
	box-sizing: border-box;
	overflow:auto;
	z-index: 2;
	border-top:1px solid;
}
.controls.levels.in {display:block;}
.numbers a.disabled {background-color:#ccc;color:#fff;opacity:0.8}
.numbers a:hover,
.numbers a:link {background-color:#ccc;}
.numbers a:active,
.numbers a:visited{background-color:#fff;}
.hspace { margin-right: 4px; }
.vspace { margin-bottom: 4px; }
button,.display{
	display:inline-block;
	background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    padding: 12px 15px;
    text-align: center;
    text-decoration: none;
	box-sizing: border-box;
	font-size: 16px;
	line-height:16px;
}
button{padding:12px 13px;vertical-align:top;
	margin-right:10px;
	cursor:pointer;}
button:last-of-type{margin-right:0;}
button:not([disabled]):hover{color:#000;}
button[disabled] {
opacity:0.3;
}
button.active{color:#000;background-color: rgba(0, 140, 186, 0.6);}

.controls.levels button{padding:12px 10px;display:block;margin: 0 auto 10px auto;width:100%;border:1px solid;}
.controls.levels button.active{background-color: white;}
.pencil-board{
	cursor: default;
}
.display{padding: 0;display:block;position:relative;border-top:1px white solid;border-bottom:2px white solid;margin-bottom:5px;}
.timer,.moves,.slevel{
	width: calc(100% / 3.3);
	display:inline-block;
	cursor:context-menu;
	line-height:15px;
	padding: 6px 7px 6px 7px;
}
.slevel{cursor:pointer;border-left:1px white solid;border-right:1px white solid;}
.timer{text-align: left;}
.moves{text-align: right;}
.moves span,.timer span{display:inline;}
.close{cursor:pointer;}
@media(max-width:480px ){
body,html{}
.board{padding:0;margin:0;width:100%;}
#sudoku{padding: 0 5px;}
#sudoku table, .numbers table{margin:0 auto;}
.banner{width:100%;height:100%;}
.controls.game button{padding:12px 13px;vertical-align:top; margin-right:10px;text-align:center;font-size:20px;}
.controls.game button:last-of-type{padding-right:15px;margin-right:0;}
.controls.numbers {padding:9px 0 5px 0;}
td div{margin:0 1px 1px 0;}
div ~ .hspace { margin-right: 5px; }
div ~ .vspace { margin-bottom: 5px; }
.Match {line-height:35px;}
}
@media(max-width:360px ){
body,html{}
.board{padding:0;margin:0;width:100%;}
#sudoku{padding: 0 5px;}
.banner{width:100%;height:100%;}
.controls.game{text-align:center;}
.controls.game button{padding:12px 13px;vertical-align:top; margin-right:10px;text-align:center;font-size:20px;}
.controls.numbers {padding:9px 8px 5px 9px;}
td a {
	width:37px;
	height:37px;
	font-size:31px;
	line-height:37px;
}
td div{margin:0 1px 1px 0;}
div ~ .hspace { margin-right: 5px; }
div ~ .vspace { margin-bottom: 5px; }
.Match {line-height:35px;}
}
@media(max-width:320px ){
}