body {
	margin:0;
	padding:0;
	background:#ffffff;
	color:#000000;
	cursor:default;
}

body,
td,
th {
	font-family:tahoma,verdana,arial;
	font-size:9pt;
	font-weight:normal;
	vertical-align:top;
}

td {
	padding:20px;
	padding-top:0px;
}



table.data {
	border:1px solid #404040;
	border-spacing: 1px;
}

table.data td, table.data th {
	padding:1px 4px 2px 4px;
	background-color:#e0e0e0;
	border: 0px;
	text-align:center;
}

table.data th, table.ranks th {
	padding:1px 4px 2px 4px;
	background:#404040;
	color: #e0e0e0;
	font-weight:bold;
}

table.ranks {
	border-collapse: collapse;
}

table.ranks > tbody > tr > th {
	width:32px;
	padding: 4px;
	vertical-align: top;
	padding: 2px;
}
table.ranks > tbody > tr > td {
	width:32px;
	padding: 4px;
	vertical-align:bottom;
	white-space:nowrap;
}

table.data td.left, table.data th.left {
	text-align:left;
}

table.data td.right, table.data th.right {
	text-align:right;
}

table.data td.phase-1 { background-color:#ffa0a0; }
table.data td.phase0 { background-color:#a0c0ff; }
table.data td.phase1 { background-color:#f0f080; }
table.data td.phase2 { background-color:#c0f080; }
table.data td.phase3 { background-color:#80f080; }


a,
a:link {
	color:#a02020;
	text-decoration:none;
}

a:visited {
	color:#951515;
	text-decoration:none;
}

a:active,
a:hover {
	color:#e00000;
	text-decoration:underline;
}

caption,
h1 {
	margin:0px;
	font-family:georgia;
	text-align:center;
	font-weight:bold;
}

caption {
	margin-top:16px;
	margin-bottom:4px;
	font-size:11pt;
	word-spacing:0px;
}

h1 {
	font-size:19pt;
}

td.centered {
	text-align: center;
}
td.centered > table {
    margin-left: auto;
    margin-right: auto;
}

#main {
	border:0px;
	padding:20px 0 10px 0;

}

span.small {
	font-weight:normal;
	font-size:7pt;
}

table.data td.current {
	background-color:#a0c0ff;
}


/*cell styles*/
table.board {
	border-collapse: collapse;
}
table.board td, table.board th {
	width:16px;
	height:16px;
	background-color:#ffffff;
	padding: 0px;
	margin: 0px;
	border:0px;
	text-align: center;
	vertical-align: middle; 
	background-position:center;
	font-size:8px;
	white-space:nowrap;
}
table.board th {
	background-color:#404040;
	
}

table.board td {
	border: 1px solid #404040;
}

table.board td div {
	width: 12px;
	height: 12px;
	font-size:12px;
	margin: 1px;
	border-radius: 50%;
	float:left;
	font-family: "sans";
	text-align: center;
	border: 1px solid black;
}
table.board div.bombed {
	opacity: 0.5;
}
table.board td.bombed {
	background: #808080;
}
table.board td div.c- {
	background:#404040;
	border-radius: 0%;
	width: 16px;
	height: 16px;
	margin: 0px;
	border: none;
}
table.board td div.c0 {
	border: none;
	margin: 2px;
}
table.board td div.ci {
	color:red;
	background: yellow;
	border: none;
	margin: 2px;
}
table.board td div.ci:after {
	content:"I";
}
table.board td div.cc {
	color:green;
	background: yellow;
	border: none;
	margin: 2px;
}
table.board td div.cc:after {
	content:"C";
}
table.board td div.cb {
	color:blue;
	background: yellow;
	border: none;
	margin: 2px;
}
table.board td div.cb:after {
	content:"B";
}
table.board td div.cx {
	width:8px;
	height:8px;
	margin: 3px;
}