* {
	border-color:  		white;
	border-style:		solid;
	border-width: 		0px;
}


body 	{
	background-color: 	white;
	position:			relative;
	text-align:			center;
	font-family:		arial, sans serif;
	padding:			0px;
	margin:				0px;
}

div.main {
	position:			relative;
	background-color: 	black;
	width: 				1400px;
	height:  			1000px;
	margin:				0px;
}

div.header {
	position:			absolute;
	top:				0px;
	left:				380px;
	width:				600px;	
	height:				150px;
	text-align:			center;
	background-color:	black;
	font-size:			64px;
	font-family:		arial, sans-serif;
	color:				orange;	
	font-weight	:		bold;
	background-image:	url('./_img/Sudoku Palace4.gif');
	background-repeat:	no-repeat;
	background-position: center center;
}

div.subheader-intro 	{
	position: 			absolute;
	top:				150px;
	left:				380px;
	width:				600px;	
	height:				60px;
	text-align:			left;
	background-color:	black;
	font-size:			18px;
	font-family:		arial, sans-serif;
	color:				white;	
	display:			block;
	padding:			20px 40px 0px 40px;
}
/* Box at the left side of screen */
div.leftbox	{
	position: 			absolute;
	left:				10px;
	width:				400px;
	background-color:	yellow;
	text-align:			left;
	padding:			10px;
	margin:				0px;
}
/* Box inside leftbox to contain the sudoku-shapes*/
div#examplesbox	{
	top:				50px;
	height:				470px;
}
/* Box inside leftbox to contain the symbolsets */
div#symbolsbox	{
	top:				530px;
	height:				200px;
}
div.rightbox	{
	position: 			absolute;
	left:				980px;
	width:				370px;
	background-color:	yellow;
	text-align:			left;
	padding:			10px;
	margin:				0px;
}
div#initbox	{
	top:				50px;
	height:				auto;
}
div#solvebox	{
	top:				270px;
	height:				10px;
}
div#finishbox	{
	top:				430px;
	height:				150px;
}

div.example, div.symbolset {
	position:			relative;
	display:			inline;
}

/* Box in the center of the screen to contain the puzzles and the value selector */
div.playground {
	position:			absolute;
	top:				220px; /*200px;*/
	left:				380px;
	width:				600px;
	height:				370px;
	text-align:			center;
}
div.puzzlearea 	{
	position:			relative;
	top:				auto;
	left:				auto;
}

div.selectionarea	{
	position:			relative;
	top:				auto;
	left:				auto;
}

div.toelichting	{
	position:			relative;
	top:				auto;
	left:				auto;
	background-color: 	yellow;
	width:				400px;
	margin:				20px;
	text-align:			left;
}

table 	{
	border-collapse:	collapse;
	empty-cells:		show;
	display: 			inline;
}
td {
	border-color:  		black;
	border-style:		solid;
	border-width: 		2px;
	width:   			40px;
	height: 			40px;
	padding:			0px;
	margin: 			0px;
	text-align:			center;
	background-color: 	white;
}
td img	 	{
	width:			24px;
	height:			24px;
	margin: 		0;
	padding:		0;
}

div.mini  table	{
	border-color:	red;
}
div.mini  table td	 	{
	width:			15px;
	height:			15px;
	padding:		0px;
	margin:			0px;
}
div.mini table td img	 	{
	width:			9px;
	height:			9px;
	margin: 		0px;
	padding:		0px;
}
table.csmini 	{
	border-color:	black; /*yellow;*/
	border-style:	solid;
	border-width:	1px;
}

table.csmini td	 	{
	width:			30px;
	height:			30px;
	font-size:  	4px;
	text-align:		center;
	/*margin:			3px;*/
}

table.csmini td img	 	{
	width:			24px;
	height:			24px;
	margin: 		0;
	padding:		0;
}

td.selected {
	background-color:	purple;
}

td.cell-lt {border-left-color: black;	border-top-color: black;	border-right-color:  lightgrey;	border-bottom-color:  lightgrey;}
td.cell-mt {border-left-color: lightgrey;	border-top-color: black;	border-right-color:  lightgrey;	border-bottom-color:  lightgrey;}
td.cell-rt {border-left-color: lightgrey;	border-top-color: black;	border-right-color:  black;	border-bottom-color:  lightgrey;}
td.cell-lm {border-left-color: black;	border-top-color: lightgrey;	border-right-color:  lightgrey;	border-bottom-color:  lightgrey;}
td.cell-mm {border-left-color: lightgrey;	border-top-color: lightgrey;	border-right-color:  lightgrey;	border-bottom-color:  lightgrey;}
td.cell-rm {border-left-color: lightgrey;	border-top-color: lightgrey;	border-right-color:  black;	border-bottom-color:  lightgrey;}
td.cell-lb {border-left-color: black;	border-top-color: lightgrey;	border-right-color:  lightgrey;	border-bottom-color:  black;}
td.cell-mb {border-left-color: lightgrey;	border-top-color: lightgrey;	border-right-color:  lightgrey;	border-bottom-color:  black;}
td.cell-rb {border-left-color: lightgrey;	border-top-color: lightgrey;	border-right-color:  black;	border-bottom-color:  black;}
td.cell-inv {border-left-width: 0px;	border-top-width: 0px;	border-right-width:  0px;	border-bottom-width:  0px;}
td.cell-ltrb {border-left-width: 2px;	border-top-width: 2px;	border-right-width:  2px;	border-bottom-width:  2px;}
td.cell-sh {background-color: gray;}
td.iter {width: 20px;}

td.showregion {
	background-color: red;
}