body, td {
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
}

a:link, a:visited {
	color: blue;
	text-decoration: none;
	border-bottom: 1px dotted #8DAED2;
}
a:hover, a:focus {
	color: blue;
	border-bottom: 1px solid blue;
}

img {
	vertical-align: text-bottom;
}

#again {
	width: 935px;
	margin: 0 auto;
	margin-top: 100px;
	position: relative;
}

#again div div {
	padding: 30px;
}

#wrapper {
	margin: 0 auto;
	width: 935px;
	height: 320px;
	position: relative;
}

#suggestions {
	width: 300px;
	top: 250px;
}

#suggestions .bluefade {
	height: 60px;
}

#controls {
	width: 300px;
}

#controls .bluefade {
	height: 150px;
}

#completedrag {
	width: 300px;
	top: 180px;
}

#completedrag .bluefade {
	height: 40px;
}

#sudoku {
	width: 315px;
	left: 305px;
}

#sudoku .bluefade {
	/*width: 300px;*/
	height: 310px;
}

#rules {
	width: 300px;
	left: 625px;
}

#rules p {
	font-size: x-small;
	margin-top: 0;
	padding-top: 0;
}

#rules .bluefade {
	height: 190px;
}

#legend {
	width: 300px;
	top: 220px;
	left: 625px;	
}

#legend .bluefade {
	height: 90px;
}


.draggable {
	position: absolute;
	cursor: move;
}

.draggable a {
	cursor: pointer;
}

.draggable input {
	cursor: pointer;
}
#sudoku input {
	cursor: text;
}

.draggable h4 {
	padding: 0;
	margin: 0;
}

table, td, tr {
	border: 0;	
	padding: 0;
	margin: 0;
}
#sudoku input {
	width: 30px;
	height: 30px;
	text-align: center;
	border: 1px dotted #ccc;
	font-size: 23px;
}

#sudoku .inputfocus {
	border: 1px solid black;
}

#sudoku .inputerror {
	background-color: #FFBBBB;
	border:1px solid #FF0000;
}

#sudoku .inputsuggest {
	background: #FFFDEB url("../images/panel-bottom-yellow.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #CDC287;
	color: #242424;
	/* background-color: yellow; */
}

#sudoku input:focus {
	border: 1px solid black;
}

#sudoku input:disabled {
	background-color: #AAAAAA;
	color: #000000;
}

#completedrag #completebar {
  display:block;
  height:20px;
  width: 0px;
}

#td00, #td01, #td02, #td03, #td04, #td05, #td06, #td07, #td08, #td10, #td11, #td12, #td13, #td14, #td15, #td16, #td17, #td18, #td20, #td21, #td22, #td23, #td24, #td25, #td26, #td27, #td28, #td30, #td31, #td32, #td33, #td34, #td35, #td36, #td37, #td38, #td40, #td41, #td42, #td43, #td44, #td45, #td46, #td47, #td48, #td50, #td51, #td52, #td53, #td54, #td55, #td56, #td57, #td58, #td60, #td61, #td62, #td63, #td64, #td65, #td66, #td67, #td68, #td70, #td71, #td72, #td73, #td74, #td75, #td76, #td77, #td78, #td80, #td81, #td82, #td83, #td84, #td85, #td86, #td87, #td88 {
	padding: 0;
	margin: 0;
	border: 0;
}

#td02, #td05, #td12, #td15, #td22, #td25, #td32, #td35, #td42, #td45, #td52, #td55, #td62, #td65, #td72, #td75, #td82, #td85 {
	border-bottom: 2px solid black;
}

#td20, #td50, #td21, #td51, #td22, #td52, #td23, #td53, #td24, #td54, #td25, #td55, #td26, #td56, #td27, #td57, #td28, #td58 {
	border-right: 2px solid black;
}

#s30, #s31, #s32, #s40, #s41, #s42, #s50, #s51, #s52,
#s03, #s04, #s05, #s13, #s14, #s15, #s23, #s24, #s25,
#s63, #s64, #s65, #s73, #s74, #s75, #s83, #s84, #s85,
#s36, #s37, #s38, #s46, #s47, #s48, #s56, #s57, #s58 {
	background-color: #eee;
}

#controls #reset, #controls #suggestbutton, #controls #fix, #controls #opdracht {
	width: 88px;
	font-weight: bold;
	font-size: 12px;
	margin: 0 auto;
	height: 20px;
}

#controls #load1, #controls #load2, #controls #load3 {
	width: 70px;
  	font-weight: bold;
	font-size: 12px;
	margin: 0 auto;
	height: 20px;
}

#sudoku .inputcomplete, #sudoku .inputcomplete:disabled {
	background: #F4FFEB url("../images/panel-bottom-green.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #A9C180;
	color: #242424;


	/* border: 1px solid green;
	color: black;
	background-color: green; */
}

.shadowbox
{
	margin-top: 5px;
	margin-bottom:4px;
	background: #dfdfdf;
	border: 1px solid #f5f5f5;  
	position: relative;
	top: 2px;
	left: 2px;
}

.bluefade
{
	position: relative;top: -2px;left: -2px;
	padding:10px;
	background: #E7F0FA url("../images/panel-bottom-blue.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #8DAED2;
	color: #242424;
}

.greenfade
{
	background: #F4FFEB url("../images/panel-bottom-green.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #A9C180;
	color: #242424;
}

.yellowfade
{
		background: #FFFDEB url("../images/panel-bottom-yellow.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #CDC287;
	color: #242424;
}

.redfade
{
	background: #FFBBBB;
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #FF0000;
}