table {
	border-spacing: 0;
	background-color: black;
	padding: 10px;
}

.Cell {
	background-image: url('images/cell.png');
	width: 54px;
	height: 54px;
	border-color: black;
	border-width: 1px;
	border-style: solid;
	position: relative;
	overflow: hidden;
}

.C3, .C2, .C1 {
	border-bottom: 4px solid black
}

.C1, .C4, .C7 {
	border-left: 4px solid black
}

.C7, .C8, .C9 {
	border-top: 4px solid black
}

.C9, .C6, .C3 {
	border-right: 4px solid black
}

.C0 {
	background-image: none;
	background-color: black;
	border-style: solid;
	transform: translate(30px,0);
}

.SymTri:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate(5px,-15px);
	background: url('images/YG.png') 0 0 no-repeat;
}

.SymCirc:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate(7px,-16px);
	background: url('images/YM.png') 0 0 no-repeat;
}

.SymHex:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate(7px,-16px);
	background: url('images/YC.png') 0 0 no-repeat;
}

.SymSq:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform:  translate(15px,-10px) scale(1.25,1.25);
	background: url('images/YS.png') 0 0 no-repeat;
}

.SymWhite:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform:  translate(7px,-20px);
	background: url('images/W.png') 0 0 no-repeat;
}

.SymGreen:before {
	-webkit-filter: hue-rotate(30deg);
 	filter: hue-rotate(30deg);
}

.SymBlue:before {
	-webkit-filter: hue-rotate(150deg);
 	filter: hue-rotate(150deg);
}

.SymRed:before {
	-webkit-filter: hue-rotate(300deg);
 	filter: hue-rotate(300deg);
}

.robot {
	width: 40px;
	height: 40px;
	position: absolute;
	border-width: 5px;
	border-style: solid;
	z-index: 1;
	border-radius: 20px;
	top: 2px;
	left: 2px;
}

.robRed {
	border-color: red;
}
.robGreen {
	border-color: green;
}
.robBlue {
	border-color: blue;
}
.robYellow {
	border-color: yellow;
}
.robWhite {
	border-color: black;
}

div#solution table tr td {
	background-color: white;
}

div#solution table tr td:nth-child(2) {
	font-weight: bold;
	font-size: 20pt;
}

div.cursor {
    position: absolute;
    padding: 5px;
    width: 40px;
    height: 40px;
    background-color: #aaa;
    top: 7px;
    left: 7px;
    text-align: center;
    vertical-align: middle;
    font-size: 20pt;
}