Template:Unicode chart/styles.css

table.unicode-chart { width: 100%; }
th.row, th.empty { width: 8.0%; }
td.char, td.reserved, td.nonchar, td.excluded { width: 5.75%; }

p { margin: 0px; display: inline; white-space: normal; }

th.title-bar div.title { text-align: center; font-weight: bold; }
th.title-bar div.pdf-link { text-align: center; font-weight: normal; }
th { font-weight: normal; }
td div {  }
td div span { white-space: pre; line-height: 100%; display: inline-block; vertical-align: middle; }
th.empty { }
tr.skip { border-top: 2px solid black; }
th.row { text-align: right;  }
th.column { text-align: center; }
td.char { text-align: center; padding: 5px 1px 5px 1px; }
td.whitespace { background-color: lightgreen; }
td.whitespace div span { background-color: white; }
td.box div span { border: 1px dashed black; padding: 2px 5px 2px 5px; }
td.excluded { background-color: #aaa; }
td.control { background-color: lightblue; }
td.format { background-color: lightpink; }
td.reserved { background-color: #ccc; }
td.nonchar  { background-color: black; }
td.combining { background-color: #ff8; }
td.notes {  }

td div span.small-1 { font-size: 80%; }
td div span.small-2 { font-size: 59%; }

tr.info-row { display: none !important; }
tr.info-row:target { display: table-row !important; }
th.thumb { } 
td.info { vertical-align: top; } 

th.thumb { font-size: 400%;  }
th.thumb.box span { line-height: 100%; display: inline-block; border: 2px dashed black; white-space: pre; margin:3px; padding:3px;}
th.thumb.box span { font-size:50%; }
th.thumb.box span.small-1 { font-size:40%; }
th.thumb.box span.small-2 { font-size:30%; }
td.info div.title { font-weight: bold; display:inline-block; }
td.info div.category { display: inline-block; margin-left: 0.75em; }
td.info div.category:before { content: '('; }
td.info div.category:after { content: ')'; }


td.info ul { list-style: none inside none; margin: 0px; }
td.info ul li { margin: 0px; }

div.alias { display: inline-block; vertical-align: top; margin-right: 10px; min-width: 50%; }
div.alias ul { display: block; }
div.alias li { display: block; }
div.alias li.control:before { content: 'Control: '; }
div.alias li.abbreviation:before { content: 'Abbreviation: '; }
div.alias li.correction:before { content: 'Correction: '; }
div.alias li.figment:before { content: 'Figment: '; }
div.alias li.alternate:before { content: 'Alternate: '; }

div.char { display: inline-block; vertical-align: top; }
div.utf8 ul, div.utf16 ul, div.html ul { display: inline; }
div.utf8 li, div.utf16 li, div.html li { display: inline; font-family: monospace; }
div.utf8 ul:before { content: 'UTF-8: ' }
div.utf16 ul:before { content: 'UTF-16: ' }
div.html ul:before { content: 'HTML: ' }
div.utf8 li:before,
div.utf16 li:before { content:  ' '; margin: 0px; }
div.html li:before { content: ' / '; margin: 0px; }
div.utf8 li:first-child:before,
div.utf16 li:first-child:before,
div.html li:first-child:before { content: ''; }