body{background:#000; font-family:Arial, Helvetica, sans-serif; margin:40px;}
h1, small{color:#fff;  margin:0; line-height:1em;}
small{display:block; font-size:0.8em;}
form{clear:left; margin:1em 0 1em;}
p{margin:0;}
hr{display:none;}

#fontwrap{ margin:2em 0 0.5em; border:1px solid #0f0; width:235px; background:black;float:left; padding:10px;}
#string{width:140px; padding:2px 5px;}
#submit{width:100px;}

#available{overflow:hidden; letter-spacing:-999em; text-indent:-999em; font-size:1px; margin-top:5px;}
#available span.char {margin-right:4px;}
#available span.char span{background:#fff;}
#available .char .cl{background:transparent;}

span.char{width:6px; font-size:1px; color:#000; height:10px; padding:0 2px 2px 0; float:left; display:block; overflow:hidden; letter-spacing:-500em; text-indent:-999em;}
span.char span{background:#0f0; height:2px; display:block; clear:both;}

span.char .m{width:2px;  margin:0 2px 0 2px;}
span.char .lr_l{width:2px; float:left; margin-right:2px; clear:none;}
span.char .lr_r{width:2px; float:right; clear:none;}
span.char .l{width:2px; margin-right:4px; }
span.char .r{width:2px; margin-left:4px; float:right;}
span.char .l2{width:4px; margin-right:2px;}
span.char .r2{width:4px; margin-left:2px;}
span.char .tri{width:6px;}
span.char .cl{background:transparent; width:6px;}

.back{margin-top:3em; font-size:0.6em; }