body {
   background-color:#000033;
   color:white;
}

#code {
   font-size:30px;  
}

#code .black{background-color:#000000;}
#code .gray{background-color:#94938E;}
#code .white{background-color:#FEFFFF;}
#code .red{background-color:#D32E12;}
#code .orange{background-color:#EC6E00;}
#code .yellow{background-color:#F6D017;}
#code .purple{background-color:#470A58;}
#code .green{background-color:#007437;}
#code .blue{background-color:#0033A9;}
#code .none{background-color:#000033;}

#code .character {
   float:left;
}

#code .character .column {
   float:left;
   width:1em;
   overflow:hidden;
}

#code .character .column .block {
   width:1em;
   height:1em;
}

#code .character .column .bottom {
   margin-bottom:0.33em;
}

#code .character .column .divider {
   width:0.5em;
   height:0.1em;
   margin:0.33em 0 0.33em 0.25em;
}
#code .character .column .left {
   width:0.8em;
}
#code .character .column .center {
   margin-left:0px;
   width:1em;
}
#code .character .column .right {
   margin-left:0px;
   width:0.75em;
}