#box {
	border-collapse:	collapse;
	text-align:			center;
}

#box td {
	padding:		0px;
	border:			2px solid Gray;
/*	box-shadow:		1px 1px 0px Gray inset;
	box-shadow:		-1px -1px 0px Gray inset;*/
}

#grid {
	border-width:	0px;
	border-spacing:	0px;
	font-family:	monospace;
	font-weight:	bold;
	box-shadow:		initial;

/* this prevents text and image in the grid from being selectable,
	following http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting
*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#grid td {
	border-width:	0px;
}

.tiles-s td {
	width:			16px;
	height:			16px;
	font-size:		14px;
}

.tiles-m td {
	width:			24px;
	height:			24px;
	font-size:		20px;
}

.tiles-l td {
	width:			32px;
	height:			32px;
	font-size:		28px;
}

.bomb-s, .bombx-s {
	width:		13px;
	height:		13px;
	position:	relative;
	top:		1px;
	left:		2px;
}

.bomb-m, .bombx-m {
	width:		20px;
	height:		20px;
	position:	relative;
	top:		0px;
	left:		2px;
}

.bomb-l, .bombx-l {
	width:		26px;
	height:		26px;
	position:	relative;
	top:		1px;
	left:		4px;
}

.flag-s {
	width:		13px;
	height:		13px;
	position:	relative;
	top:		-1px;
	left:		1px;
}

.flag-m {
	width:		20px;
	height:		20px;
	position:	relative;
	top:		-1px;
	left:		1px;
}

.flag-l {
	width:		26px;
	height:		26px;
	position:	relative;
	top:		-2px;
	left:		2px;
}

.covered-s {
	background-color:	LightGray;
	box-shadow:			2px 2px 3px  White inset, 
						-2px -2px 3px  Gray inset;
}

.covered-m {
	background-color:	LightGray;
	box-shadow:			2px 2px 5px  White inset, 
						-2px -2px 5px  Gray inset;
}

.covered-l {
	background-color:	LightGray;
	box-shadow:			2px 2px 6px  White inset, 
						-2px -2px 6px  Gray inset;
}

.uncovered-s {
	background-color:	LightGray;
	box-shadow:			1px 1px 0px  Gray inset;
}

.uncovered-m {
	background-color:	LightGray;
	box-shadow:			1px 1px 0px  Gray inset;
}

.uncovered-l {
	background-color:	LightGray;
	box-shadow:			2px 2px 0px  Gray inset;
}

.redsquare-s {
	background-color:	Red;
	box-shadow:			1px 1px 0px  Gray inset;
}

.redsquare-m {
	background-color:	Red;
	box-shadow:			1px 1px 0px  Gray inset;
}

.redsquare-l {
	background-color:	Red;
	box-shadow:			2px 2px 0px  Gray inset;
}

.n1 {
	color:	Blue
}

.n2 {
	color:	Green
}

.n3 {
	color:	Red
}

.n4 {
	color:	DarkBlue
}

.n5 {
	color:	Maroon
}

.n6 {
	color:	Teal
}

.n7 {
	color:	Black
}

.n8 {
	color:	Gray
}


.readout {
	margin: 			3px auto;
	width:				44px;
	font-family:		'digital_dream_fat_narrowRg', monospace;
	font-size:			18px;
	padding:			5px 0px 2px;
	color:				#ff0000;
	background-color:	black;
}

@font-face {
	font-family: 'digital_dream_fat_narrowRg';
	src: url('graphics/DIGITALDREAMFATNARROW-webfont.eot');
	src: url('graphics/DIGITALDREAMFATNARROW-webfont.eot?#iefix') format('embedded-opentype'),
		 url('graphics/DIGITALDREAMFATNARROW-webfont.woff') format('woff'),
		 url('graphics/DIGITALDREAMFATNARROW-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

#face {
	width:		26px;
	height:		26px;
}

.neutral {
	background:	url("graphics/neutral.gif") no-repeat center center;
}

.happy {
	background:	url("graphics/happy.gif") no-repeat center center;
}

.sad {
	background:	url("graphics/sad.gif") no-repeat center center;
}

/* a weird bug, at least in Chrome, causes this to display one row of pixels on the right and
bottom in "border-collapse: collapse" mode...  
*/