Re-design forum thread list and add labels

There are currently two significant differences from the mockup:
1. The contents of each item are vertically aligned to the top instead of the middle.
2. The comments icon is always blue for unread comments (whereas in the mockup it is blue for an unread post or white with a blue border for a read post with unread comments).

@jimabramson @talbs @marcotuts 

FYI @aboudreault @antoviaque
Gotcha - yeah getting extra specific is the other way I thought of. I feel pretty strongly about having all of the ```!important``` overrides in one place as:

* moving any rule that references ```!important``` doesn't affect cascade/specificity (it will always trump anything aside from another ```!important``` defined further in the compiled CSS)
* it will make it easier for others to find and note when we're actively doing something that's less than ideal - I can see this being helpful for others to cross-check when their desired rules aren't being applied properly (its a known list of felons vs. unknown/scattered list)
* it will make it easier for anyone actively working on cleaning up the root causes of the ```!important``` usage (assuming that there are general bad rules that cause the same override/extra effort in multiple places - e.g. bad basic span styling).

Here are viable options in my mind: 

* **Option A** - keep the style rules here, but ditch the ```!important``` for more specificity in selectors. This is a handy resource - http://specificity.keegan.st/ (based on this article http://css-tricks.com/specifics-on-css-specificity/).
* **Option B** - roll with ```!important``` but move them to the proposed _shame.scss file. You could even make a comment here that those rules exist and are moved to the shame file.

Thoughts?