Branded components design tweaks

The 'soulmate' component should look like this now:
![screen shot 2014-11-19 at 17 40 49](https://cloud.githubusercontent.com/assets/489567/5110789/557d7d46-7013-11e4-94ae-75aab724ee60.png)

The 'jobs' component should look like this now:
![screen shot 2014-11-19 at 17 42 21](https://cloud.githubusercontent.com/assets/489567/5110808/7899b2ae-7013-11e4-92fd-196cd81d0217.png)

The 'membership' component should look like this now:
![screen shot 2014-11-19 at 17 43 17](https://cloud.githubusercontent.com/assets/489567/5110885/0d53ef5e-7014-11e4-8787-80818c6f4f41.png)

All of those ads should be anchored to the bottom of right-hand column (desktop only).

Also FYI: this will create selector like this `.creative--branded-component.membership .creative__inner'. When browser is applying styles it's going from right to left. So first it finds all elements with .creative__inner class then all of them which have membership etc. That's why we should try to use short selectors, one class in the ideal state so the browsers needs to do less work.

That's why we are using BEM syntax which is very helpful with this. It's not always possible (and probably not in this case), it's just good to keep this in mind every time we are nesting classes.