And converted to using single-character class names and reducing the CSS needed, it can be down to about 3KB, sans-compression.
(I manually minified the whole source; the original is 53313 bytes, 12438 gzipped, while my minified source is 25628, 10124 gzipped. Most of the bloat in the tables compresses really well, as is common with such things.)
Out of curiosity, how did you do it? I did as well, and I used Sublimes multi-cursor functionality + some manual work to replace classes where it should be. Mainly because i saw an interesting problem and I like (love) using the psuedo automation tool that is Sublime 2.
Just curious how you went about it, if it was /all/ manual or some interesting technique.
My result was not too shabby, 7kb I think it was when I stopped due to the time cropping up.
Mostly fairly manual, with a bunch of regular expressions and things like sorting the CSS block by background-color (Vim: `:sort /{/`). It was tempting to slurp it in Python, gargle it about a bit and spit it out neatly refactored, but I didn’t do it that way. A small quantity of Vimscript would also have been fairly straightforward. But no, I did it the hard way out of the wrong type of laziness. (Why did I do it at all? Who knows.)
(I manually minified the whole source; the original is 53313 bytes, 12438 gzipped, while my minified source is 25628, 10124 gzipped. Most of the bloat in the tables compresses really well, as is common with such things.)