I spent an hr hacking away at this no-class, no id, table within a table within a table layout.
I didn't make the fonts scale to mobile screen ratio because I know a lot of people like to have the ability to pinch in and out.
PG, if you're reading this, all you have to do is dump this at the bottom of your css file.
@media (max-width: 740px) {
body { padding: 0; margin: 0; width: 100%; }
body table{ width:100%; }
body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(even) .pagetop {
position: absolute; top: 4px; left:30px; z-index:100; width: 100%; text-align: left; }
body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(odd) .pagetop {
position: absolute; top: 45px; left:30px; z-index:100;text-align: left; color: #fff;}
body table tr td:nth-child(1) { height: 70px; vertical-align:top; padding: 1px;}
body table tr td:nth-child(1) td:nth-child(1) { height: auto; padding: 0;}
textarea { width: 100%; }
.pagetop { color: #ff6600; }
.pagetop b { display: block; float: left; clear: both; width: 100%; margin-bottom:4px }
.pagetop a { display: block; margin-right: 10px;float: left; }
body img {width: 20px; height: 20px; }
body img:after { display: block;color:#000; font-size: 20px;}
pre {max-width: 100%; width: 300px; word-wrap:break-word; overflow: auto; }
a {word-wrap:break-word; }
}