Freddyshouse UserCSS Challenge

[Shovel]

One of the new features in Firefox 1.5 is 'Site Specific CSS', and I figure we can have some fun with it.

'User CSS' has been around for a while. This is where a CSS stylesheet sits on your computer (or elsewhere) and provides a set of CSS rules that get applied to every website your visit. It would be very useful to disabled users since you can forcably alter colour-schemes, font sizes and tweak images around to make the web easier to use. You can also disable the *blink* effect of <blink> elements, and the scrolling of <marquee> if you so wish.

N.B I say 'would be useful to disabled users' since obviously it requires coding a stylesheet, and I think it's fair to say that excludes a lot of people.

Firefox 1.5 adds a CSS extension that allows you to target UserCSS at a specific website only - thus you can mess around with the look+feel of Freddyshouse, without breaking every other vB forum on the intarweb (this is a good thing, especially seeing as vB is somewhat short of useful id and class attributes).

So, the challenge:

Create a hunk of UserCSS for Firefox 1.5 to customise the look of Freddyshouse to somehow make it 'better'. Obviously you can create UserCSS that works in other browsers as well, but the new Site-Specific syntax in Fx makes it preferable.

Rules: Err, none?

You need to submit your code (either in a [ code] block, or linking to a file) and you'll need to remotely host any extra images you use. I imagine I can loan you some if you need it.
You'll need to specify whether you have the Freddys view set to show poster info at the top of posts or at the side, since that changes the HTML structure.

Tips:
The Firefox UserCSS file to edit is commonly C:\Documents and Settings\Application Data\Mozilla\Firefox\Profiles\abcdef.123\chrome\userContent.css

Learn to use the DOM Inspector in Firefox.
The left-most toolbar icon in the DOMi allows you to click anywhere on the page you're viewing and it will expand the tree to show you where in the source code it appears. This is very useful for constructing CSS selectors. You can also check that your CSS rules have been applies. Not that you need to close and re-open the DOMi if you reload the page you're viewing.

Use the Web Developer Extension as it has an 'Edit CSS' feature. This allows you to Live-Edit the CSS of the page you're viewing, without having to restart Firefox. Be sure to often copy+paste the CSS you're writing to some other text file though, since it can be easy to lost the edits you've made (by reloading the page, for instance).

You can make <table>s <tr> and <td> elements easier to work with by forcing them to "display: block;", which should allow you to position them a little easier.

Starting points:
Site-Specific CSS for Freddyshouse:

@-moz-document domain(freddyshouse.com) {
  /* your CSS goes nested in here */
}

Some useful advanced CSS selectors that work well with vB:
Using attribute selectors to select elements which begin with "post" or "edit" (as vB incrementally numbers these, such as "post1245432" and "edit232542")

table[id^="post"] { }

And finally, as an example, here's the CSS I use to trim down the main horizontal menu to display only items which I use (if you paste this into the WebDev extensions 'Edit CSS' it should work).

@-moz-document domain(freddyshouse.com) {
  table.tborder td.vbmenu_control:first-child + td.vbmenu_control  + td.vbmenu_control, 
  table.tborder td.vbmenu_control:first-child + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control  + td.vbmenu_control,
  table.tborder td.vbmenu_control:first-child + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control,
  table.tborder td.vbmenu_control:first-child + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control + td.vbmenu_control,
  table.tborder td.vbmenu_control:first-child + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control  + td.vbmenu_control + td.vbmenu_control + td.vbmenu_control + td.vbmenu_control
 {
    display: none;
 }
}