table {
	width: 400px;
	border-color:black;
	word-break:normal;
	font-family:Arial, sans-serif;
	font-size:12pt;
}

.tg  {
	border-collapse:collapse;border-spacing:0;
}
.tg td{
	width:20px;
	height:20px;
	padding:2px 2px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
}
.tg th{
	font-weight:normal;
	padding:2px 2px;
	border-style:none;
	border-width:0px;
	text-align:right;
}

.row-header {
	height:20px;
}

th.rotate {
  white-space: nowrap;
  text-align:left;
}

th.rotate > div {
  transform:
  	translate(0px,8px)
  	rotate(315deg);
  width:10px;
}
th.rotate > div > span {
  /*border-bottom: 1px solid #ccc;*/
  padding: 5px 10px;
}

@media only screen and (min-width:768px) {
	table {
		width: 600px;
		font-size:15pt;
	}
	.tg td {
		width:30px;
		height:30px;
		border-width: 2px;
	}
	.row-header {
		height:30px;
	}
}

.tg .w {
	background-color:#ffffff;
}
.tg .b {
	background-color:#505050;
} 
.tg .g {
	background-color:#D3D3D3;
}


.rawtext {
	width:100%;
	min-height:25%;
}