body { margin:0; padding:0; font-size:1em; background:#4a6; color:white; }
#outsidetable { }
#insidetable { border-spacing:0; border:0; border:1px solid red; border-left:0; background:white; }
#insidetable tr:nth-child(1) td, #insidetable tr:nth-child(33) td     { border-bottom:1px solid red; }
#insidetable td { text-align:center; }
#insidetable td[hex] { cursor:pointer; }

.sprot1 { height:15em; width: 1em; text-align:left; word-wrap:normal; overflow:hidden; }
.sprot2 { height:15em; width: 1em; -webkit-transform: translate(0, 14em); }
.sprot3 { height: 1em; width:15em; -webkit-transform: rotate(270deg);  -webkit-transform-origin: 0 0;  }

.code0,  #insidetable td:nth-child(13n+1)  { color:#F00; padding-left:0.5em; border-left:1px solid red; }
.code1,  #insidetable td:nth-child(13n+2)  { color:#0C0; }
.code2,  #insidetable td:nth-child(13n+3)  { color:#0C0; }
.code3,  #insidetable td:nth-child(13n+4)  { color:#00A; }
.code4,  #insidetable td:nth-child(13n+5)  { color:#00A; }
.code5,  #insidetable td:nth-child(13n+6)  { color:#00A; }
.code6,  #insidetable td:nth-child(13n+7)  { color:#00A; }
.code7,  #insidetable td:nth-child(13n+8)  { color:#0C0; }
.code8,  #insidetable td:nth-child(13n+9)  { color:#0C0; }
.code9,  #insidetable td:nth-child(13n+10) { color:#0C0; }
.code10, #insidetable td:nth-child(13n+11) { color:#00A; }
.code11, #insidetable td:nth-child(13n+12) { color:#00A; }
.code12, #insidetable td:nth-child(13n+13) { color:#00A; }

#noteslist, #noteslist ul { list-style-type:none; text-align:left; padding:0; }
#noteslist li { float:left; color:blue; padding-left:4em; }
#noteslist ul li { clear:left; color:red; padding-left:0; }

#currentchardiv { position:fixed; right:1em; top:5em; text-align:center; 
                 border:2px solid white; background:red; padding:3px; box-shadow:0 0 10px black; }
.curletter { font-size:2em; }