Gravatar - Use Twitter-like structure

Fix for issue #701 - work in progress: the mobile view needs to be fixed and we must define a solution for empty profiles.

Please, let me know if you have any suggestions! :)

Desktop view: 
![screen shot 2014-08-01 at 20 19 12](https://cloud.githubusercontent.com/assets/3652195/4024237/e4f6473a-2bbe-11e4-9351-8ad8b54b7eac.png)

Desktop view with social links expanded:
![screen shot 2014-08-01 at 23 10 21](https://cloud.githubusercontent.com/assets/3652195/4024653/a7a0c72e-2bd3-11e4-8c35-6c15bf54754d.png)

Desktop view with empty profile: 
![screen shot 2014-08-01 at 20 19 27](https://cloud.githubusercontent.com/assets/3652195/4024238/f92a3e64-2bbe-11e4-827f-e3a6eb6c34e1.png)

Mobile view:
![screen shot 2014-08-01 at 20 45 16](https://cloud.githubusercontent.com/assets/3652195/4024239/114c8272-2bbf-11e4-9572-598383f686c7.png)

Mobile view with social links expanded (this in particular needs to be fixed):
![screen shot 2014-08-01 at 23 10 54](https://cloud.githubusercontent.com/assets/3652195/4024658/dacd9816-2bd3-11e4-908a-baccad8454d3.png)

Mobile view with empty profile:
![screen shot 2014-08-01 at 20 45 51](https://cloud.githubusercontent.com/assets/3652195/4024242/24100ba4-2bbf-11e4-8a0d-35273dbc6e70.png)

@MariagraziaAlastra Is there any reason not to combine the 3 margin declarations into a single line?

```
margin: 0.25em 0 0.3em -0.2em
```