.chart {
	table-layout: fixed;
	border-collapse: collapse;
	width: 34em;
}
.chart td, .chart th {
	border: solid 1px black;
	height: 2em;
}
.chart th {
	background-color: #ccc;
}
.chart th span {
	font-size: 80%;
}
.chart td {
	empty-cells: show;
	width: 2em;
	padding: 1px;
}
.chart td div, .chart td span {
	padding: 1px;
	border: solid 1px black;
	text-align: center;
	font-size: 120%;
	height: auto;
}
.chart td.refpos {
	background-color: #c00;
}
.chart td.refpos div {
	border-color: #c00;
}

/*
 * Each range of characters in Unicode has its own class :
 *
 * .u0000 : U+0000..U+007F Basic Latin
 * .u0080 : U+0080..U+00FF Latin-1 Supplement
 * .u0100 : U+0100..U+017F Latin Extended-A
 * .u0180 : U+0180..U+024F Latin Extended B
 * .u02b0 : U+02B0..U+02FF Spacing Modifier Letters
 * .u0370 : U+0370..U+03FF Greek and Coptic
 * .u2000 : U+2000..U+206F General Punctuation
 * .u2070 : U+2070..U+209F Superscripts and Subscripts
 * .u20a0 : U+20A0..U+20CF Currency Symbols
 * .u2100 : U+2100..U+214F Letterlike Symbols
 * .u2190 : U+2190..U+21FF Arrows
 * .u2200 : U+2200..U+22FF Mathematical Operators
 * .u2300 : U+2300..U+23FF Miscellaneous Technical
 * .u2500 : U+2500..U+257F Box Drawing
 * .u2580 : U+2580..U+259F Block Elements
 * .u25a0 : U+25A0..U+25FF Geometric Shapes
 * .u2600 : U+2600..U+26FF Miscellaneous Symbols
 * .ue000 : U+E000..U+F8FF Private Use Area
 * .ufb00 : U+FB00..U+FB4F Alphabetic Presentation Forms
 * .uxxxx : Other
 */

.empty {
	background-color: transparent;
	border-color: transparent;
}
.u0000 {
	background-color: #ddd;
}
.u0080 {
	background-color: #fff;
}
.u0100, .u0180, .u02b0 {
	background-color: #ff8;
}
.u0370 {
	background-color: #8f8;
}
.u2000, .u2070, .u20a0, .u2100 {
	background-color: #8ff;
}
.u2190, .u2200, .u2300, .u2500, .u2580, .u25a0, .u2600 {
	background-color: #f8f;
}
.ue000 {
	background-color: #f04;
}
.ufb00 {
	background-color: #ff4;
}
.uxxxx {
	background-color: #f00;
}