/* Control characters in ASCII and Unicode */
table.control td.catDC { background-color: #888888; }
table.control td.catFE { background-color: #E0E9FF; }
table.control td.catAD { background-color: #99cc99; }
table.control td.catTC { background-color: #bbbbbb; }
table.control td.catIS { background-color: #cc9966; }
table.control td.catDE { background-color: #A39EE9; }
table.control td.catPC { background-color: #FFDA91; }
table.control td.catIN { background-color: #DCDD9F; }
table.control td.catSH { background-color: #aabbff; }
table.control td.catMI { background-color: #eeeeee; }
table.control td.catGR { background-color: #eeffee; }
table.control td.catRE { background-color: white; color: #666; }
table.control td.catRE a:link, table.control TD.catRE a:visited { color: #666; }
table.control td { padding:2px 0; color: black }

/* Printer specials: Color information may be lost, add category abbr */
@media print {
   table.control td.catDC:after { content: " DC"; }
   table.control td.catFE:after { content: " FE"; }
   table.control td.catAD:after { content: " AD"; }
   table.control td.catTC:after { content: " TC"; }
   table.control td.catIS:after { content: " IS"; }
   table.control td.catDE:after { content: " DE"; }
   table.control td.catPC:after { content: " PC"; }
   table.control td.catIN:after { content: " IN"; }
   table.control td.catSH:after { content: " SH"; }
   table.control td.catMI:after { content: " MI"; }
   table.control td.catGR:after { content: " GR"; }
   table.control td.catRE:after { content: " "; }

   table.control td.catDC:after,
   table.control td.catFE:after,
   table.control td.catAD:after,
   table.control td.catTC:after,
   table.control td.catIS:after,
   table.control td.catDE:after,
   table.control td.catPC:after,
   table.control td.catIN:after,
   table.control td.catSH:after,
   table.control td.catMI:after,
   table.control td.catGR:after,
   table.control td.catRE:after { font-size: 6pt; font-style: italic; display: block; }
}

table.control_wrapper { width: 100%; margin-top: 1em; }
table.control_table td { vertical-align: top; }
table.control a:link, table.control a:visited { color: black; }
table.control td { text-align: center; }
table.control td.descr { text-align: left; vertical-align: top; }
table.control tr.cathdr td, table.control tr.cathdr th { border-top-width: 2px; }
table.control th.dotdivider { border-top: 1px #000 dotted; }
table.control th { text-align: center; padding:0; }
th.descr { width: 85%; }

table.legend, table.control { width: 100%; }
table.legend { border-top: none; margin-top: 0; }
table.legend td { width: 8% }

/* Main character list */
table.charlist { border-collapse: collapse;  }
table.charlist th { text-align: left; vertical-align: top; padding-right: 5px; }
table.charlist td { vertical-align: top; padding-top: 0ex; padding-bottom: 1ex; }
table.charlist td.symbol { text-align: center; padding-top: 0.5em }
table.charlist td kbd { margin-right: 0.5em }
/* Character header row */
table.charlist tr.hdr th, table.charlist tr.hdr td { border-top: 1px solid black; padding: 3px 2px; background-color: hsla(223, 100%, 80%, 0.25) /*#e0e9ff*/; border-bottom: 3px solid transparent; }
table.charlist tr.hdr td { text-align: center; }

table.control cite { font-size: 80%; }

td.std, td.note, span.note, p.note { font-style: italic; }
td.note span.symbol { font-style: normal; }
code, kbd { color: inherit; font-style: normal; }

/* Translations */
table.translations { border-collapse: collapse; }
table.translations td { padding: 1px; vertical-align: top; }
table.translations tr.alternate0, table.translations td.std, table.translations th { background-color: rgba(128,128,128,0.1); }
table.translations th { text-align: left; }
table.translations td { font-family: arial, sans-serif; font-size-adjust: 0.519; font-size: 90%; }
table.translations th, table.translations td.trans, table.translations td.std { border-right: 1px solid gray; }
table.translations { border: 1px solid gray; }

/* Sources */
ul.source li { margin-bottom: 1ex; }

table.condensed { border-collapse: collapse; }
table.condensed td { padding-right: 3px; vertical-align: top;}

H2 {
   border-top: 1px solid currentcolor;
   padding-top: 0.5em;
}

H3#c1, H3#iso8859, H3#unicode {
   border-top: 1px dashed gray;
   padding-top: 0.5em;
}
h2.contents { border-top: none; margin-top: 0.5em; }

kbd>kbd { 
   background: #ECE9D8;
   border: 2px outset #F1EFE2;
   padding: 0 0.3em; 
   font-family: "Segoe UI", "MS Sans Serif",arial,helvetica,sans-serif;
   font-size-adjust: 0.500; /* Segoe UI */
   color: black;
   margin: 0 1px;
}
kbd {
   white-space: nowrap;
}

img.cctitle { padding: 1em }
img.areas { float:right; width:60%; }
img.standards { width:100% }

@media only screen and (prefers-color-scheme: dark) {
   img.areas, img.standards { background: #f8f8f8; }
   img.areas { margin-left: 1em; margin-bottom: 1em; border: 2px solid currentcolor }

   table.control { background: #777; }
   table.control th { color: black; font-weight: bold }
   td.symbol { filter: invert(1); }
   table.charlist tr.hdr th, table.charlist tr.hdr td { border-top-color: transparent }
}



@media screen and (max-width:640px) {
    table.control tr > * { font-family: Arial, sans-serif; font-size-adjust: 0.519; font-size: 8pt; }
    table.charlist td kbd { margin-right: initial }
    
    table.translations { border: 0 }
    table.translations td { font-size: inherit; }
    table.translations, table.translations tr { display: block; }
    table.translations tr.alternate0, table.translations td.std, table.translations th { background: none; }
    table.translations tr { padding: 1ex 0; border-top: 1px solid black; }
    table.translations tr > * { display: inline; vertical-align: middle; }
    table.translations tr > td.trans, table.translations tr > td.std, table.translations th { padding-right: 1ex; }
    table.translations tr > * { padding-left: 1ex; }
    table.translations tr > *:first-child { padding-left: 0 }
    table.translations th+th, table.translations td.trans+td, table.translations td.std+td { border-left: 1px solid #999 }
    table.translations th, table.translations td.trans, table.translations td.std { border-right: none; }
    table.translations tr > td.trans[lang]:after { content: "(" attr(lang) ")"; margin-left: 1ex; color: gray }
    table.translations td.trans:empty { display: none }

    img.areas { float: none; width: 100%; margin-left: 0; margin-bottom: 0 }
}