#puzzle{
	top:0px;
	left:0px;
}

#puzzle td{
	color: #000066;
	font-family: Arial;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border: 1px solid #ffffff;
   line-height: 18px;
   text-align: center;
 }

.red {
text-align: center;
padding: 2px;
font-weight: bold;
font-size: 17px;
background-color: #CC3300;
border: 1px solid #ccc;
}

.black {
color: white;
text-align: center;
padding: 2px;
font-weight: bold;
font-size: 17px;
background-color: black;
border: 1px solid #ccc;
}

.green {
text-align: center;
padding: 2px;
font-weight: bold;
font-size: 17px;
background-color: #669900;
border: 1px solid #ccc;
}

.white {
text-align: center;
padding: 2px;
font-weight: bold;
font-size: 17px;
background-color: white;
border: 1px solid #ccc;
}

#puzzle td.bl{
	color: white;
	background-color: #666699;
	border-right: 1px solid #666699;	
}

#puzzle td.br{
	color: white;
  	background-color: #666699;
	border-left: 1px solid #666699;	
 }
#puzzle td.bt{
	color: white;
  	background-color: #666699;
	border-bottom: 1px solid #666699;
}

#puzzle td.bb{
	color: white;
   background-color: #666699;
	border-top: 1px solid #666699;
 }



#puzzle td.hl{
	color: #666699;
   background-color: #ccc;
	border-right: 1px solid #ccc;	
}


#puzzle td.hr{
	color: #666699;
   background-color: #ccc;
	border-left: 1px solid #ccc;

 }

#puzzle td.ht{
	color: #666699;
   background-color: #ccc;
	border-bottom: 1px solid #ccc;
	}

#puzzle td.hb{
	color: #666699;
	background-color: #ccc;
	border-top: 1px solid #ccc;
}