Tweak the HTML and CSS of the new search

There was a basic problem that FF on my system was enforcing user agent
styles on the button tag, which made it difficult to properly size the
clear button with simpler styles. These styles used the system font, which
I had set to something other than a typical 16px

The result is that FF was showing a different result than Chrome for me due to the trick we were doing with the html tag. I forget where I picked it up, but the idea was to use the variables (`$base-font-size`) in a calculation against a typically default font size of 16px to set the font size at the root in ems. That is the best way to consistently honor user preferences, but it makes it really hard to size things correctly when the user agent styles reset things aggressively to the system default font.

FF also didn't expand the input to take available vertical space, which
was the cause for the 2em height setting. Using some consistent line heights for the toolbar and different descendants (accounting for borders) helps a lot.

Aside from the px line heights, everything else is now in ems here.

Finally, if you notice the extra tall cursor beam before you start typing in the text input in Chrome, I think it's this old WebKit bug that's gotten closed and ignored [1] but I'm inclined to ignore it. I thought it was a worse problem at first when I was playing with different paddings because it would move vertically but now it just changes height and I don't really notice it.

[1] https://code.google.com/p/chromium/issues/detail?id=47284