UI refactoring

[drdla]

Tried to avoid cleaning up too much of the messy whitespace stuff;
The refactoring of the editbar and the timeslider still required quite a few changes

[drdla]

This is a commit targeted at maintainability.
https://github.com/Pita/etherpad-lite#readme states:

"A smaller, manageable and well documented codebase makes it easier for developers to >improve the code and contribute towards the project."
and goes on to compare, how etherpad-lite was able to significantly reduce complexity for developers with the side-effect of (at least temporarily) sacrificing functionality of etherpad that is important for end users.
A lot of effort has been put into structuring the node.js code.
If you look at the frontend, you find JS inside of HTML, CSS inside of HTML, CSS inside of JS, and HTML inside of JS. Spaghetti code.
Which in itself is not a problem for a state of transition.

I was attempting to help with this transition by putting a lot of qualified work into this pull request.
It provides significant benefit for end users, because

• the UI is better structured and increases usability
  ** there is less focus on "structure" (e.g. borders) and more focus on "content" (e.g. buttons and text)
  ** there are clearly discernible hover states for all elements the user can interact with
  ** there are proper active states for buttons that trigger menus (should also be applied to other buttons though)
  ** there is less variation (aka more consistency) in how the UI behaves
  ** it improves page loading speed, e.g. by using sprites thus massively reducing the number of requests, which is the Added Makefile #1 performance rule by Steve Souders (see yslow and pagespeed)
  ** it provides a better page rendering experience (although additional steps need to be taken to arrive at a truly good experience)
  ** as a side-effect, it also looks more attractive, which makes adoption by the user more likely

It provides significant benefit for developers adopting etherpad-lite, because

• it makes it easier to understand the code
• it makes it easier to customize the UI
  ** by removing over-specification of selectors (such as using !important and multiple IDs in selectors)
  ** by providing PSD source files for all images
  If you don´t like the "aesthetic attributes" (icons, border colors, ...), it is very easy to update the images or the values in the CSS.

But most of all, it provides huge, huge benefit for developers of etherpad-lite, because

• it makes the code more DRY in general and removes several duplications
• it removes multiple JSLint warnings
• it fixes several bugs
• it incorporates good web development practices (such as separation of concerns: HTML = structure, CSS = appearance, JS = interaction)
• it adds several comments to the code and provides a easier to follow structure (which in itself is superior to a comment)
• it reduces the number of lines of code in some places by some 50%
• it removes (HTML) structure that has no function
• it provides a clean basis to build upon

Although I personally think, my contribution also brings the project closer to current aesthetics on the web, it is meant as a suggestion. In no way do I intend to try to impose my personal visual taste to this project.
Moreover, I think it can clearly be outlined, in which way this pull request brings substantial benefit to the project, which is 100% in line with the reason, why the project was started in the first place: "...make[s] it easier for developers to improve the code and contribute towards the project."

[JohnMcLear]

Please issue a new pull request with separate commits so we can decide on a per UI change basis.

I will be happy to commit a lot of your changes but they really need to be separate commits as I have issues with others.