Refactor work package index styling (flexible box based solution)

This PR has a broad scope and also includes:
* some refactoring of legacy styles (`main.css`)
* commit from #1605

https://www.openproject.org/work_packages/14811
https://www.openproject.org/work_packages/13498
https://www.openproject.org/work_packages/13597

as collateral:
https://www.openproject.org/work_packages/11935
@myabc this causes the problems with the detail pane being too narrow. If you change this to 
<pre>
flex-grow: 1;
</pre>
it works for me (Chrome). Works when the detail pane is displayed and also when it isn't. Media query is also working. Plus I believe that this is what you want to express. 
See: http://css-tricks.com/snippets/css/a-guide-to-flexbox/