.cell {
	color: black;

				width: 43px;
				height: 43px;
			/* height: 23px;*/
				position: absolute;
				z-index: 1;
				/* font-size: 10px;
				line-height: 10px;*/
				background-color: #FFFFFF;
				border-right: 1px solid #000000;
				border-bottom: 1px solid #000000;
				font-size: 10px;
				line-height: 10px;
				/*
				background-color: red!important;
				margin: 0!important;*/
				/*these are the numbers in the cells */ padding-top: 20px!important;
				
				
}

/*
@media screen and (min-width: 20px) and (max-width: 759px) {
.cell {
	display: none;
}
#yinyang_img {
width: 90%!important;
min-width: 90%!important;
display: block;	
height: auto;
}
#yinyang {
width: 92%!important;
min-width: 92%!important;
margin: 0!important;
padding: 5px!important;
}
}

*/
.dragger {
z-index: 4;
	width: 44px;
	height: 44px;
float: left;

}
/* These are the hangeul characters on top of the cell container */
.syllable {
color: black;
font-size:36px;
margin-top: 2px;
text-align: center;

cursor: move;
z-index: 4;
}

.testable {

/*
padding: 20px!important;*/
}
.cell-corner {
font-size:10px;
padding-top: 0px!important;
/*this positions the numbers in the cells */margin: -20px auto auto 0px!important;
text-align:left!important;
display: block!important;
z-index: 5!important;
}

#cell01 { margin-left: 44px; margin-top: 0px;}
#cell02 {  margin-left: 88px; margin-top: 0px;}
#cell03 { margin-left: 132px; margin-top: 0px;}
#cell04 { margin-left: 220px; margin-top: 0px; }
#cell05 { margin-left: 264px; margin-top: 0px; }
#cell06 { margin-left: 308px; margin-top: 0px; }
/* #cell07 { margin-left: 44px; margin-top: 44px; } */
#cell07 { margin-left: 44px; margin-top: 44px; }
#cell08 { margin-left: 220px; margin-top: 44px; }


#cell09 { margin-left: 88px; margin-top: 88px; }
#cell10 { margin-left: 132px; margin-top: 88px; }
#cell11 { margin-left: 176px; margin-top: 88px; }

#cell12 { margin-left: 44px; margin-top: 132px; }
#cell13 { margin-left: 132px; margin-top: 132px; }
#cell14 { margin-left: 220px; margin-top: 132px; }
#cell15 { margin-left: 264px; margin-top: 132px; }

#cell16 { margin-left: 0px; margin-top: 176px; }
#cell17 { margin-left: 44px; margin-top: 176px; }
#cell18 { margin-left: 220px; margin-top: 176px; }



/* -moz-user-select: none;*/


#instructions {
color: black;
float: left;
width: 50%;
height: auto;
margin: 20px auto;
/*
width: 352px; 
height: 180px;*/
}

#syllablecontainer {
color: black;
float: left;
width: 40%; 
height: auto;
margin: 20px;

/*
width: 352px; 
height: 180px;*/
}

#cluecontainer {
	color: black;
float: left;
/*
	width: 352px; 
	height: 300px;*/
	width: 50%; 
height: auto;
margin: 20px auto;
	}
	

#cellcontainer {
float: left;
/*
background-color: red!important;

overflow: auto;
	width: 352px; 
	height: 300px;
It doesn't really matter what you do to this div. The width of the cells is set in the template. I don't understand how this works any more! I can't find where the layout of the cells is created.	
	
	
	width: 50%; 
height: 200px;
margin: 20px auto;
z-index: 7;*/
	}
	
#puzzlecontainer{
font-family: "Courier New", Courier, mono;
color: black;
overflow: auto;
/*
width: 800px;		height: 444px;*/

max-width: 80%;
				height: 444px;
				margin: 0px auto;
				padding: 12px;
				background-color: #99CCFF;
			}
		/*	
		p {color: red;}*/
		/*
		.top-fit {margin-top: 9px;
		color: red;
		}*/
		/*
		#draggable01 {color: red!important;
		margin-top: 9px!important;
		}*/
#across{
	width: 30%;
	height: auto;
	float: left;
	margin: 20px;
}

#down{
	width: 30%;
	height: auto;
	float: left;
	margin: 20px;
}
/* don't know what this does
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

*/