Apply consistent font to header links & button. Vertically center hea…

…der.

The header is using default browser fonts, which was OK but with [New document] now being a button it got different font from the other links.
Experimented with same serif fonts as the editor but felt sans-serif is better; looked at rhythmus's redesign #45 which uses sans and stole his fonts.
[Reminder to self: stop goofing around adding bugs and merge most of his design.]

Also improved vertical centering of header (the float: right half was really off in firefox).
Used simplest height = line-height technique (http://stackoverflow.com/a/8865463/239657) which is not fully robust.

index.html

@@ -69,7 +69,7 @@
       <span style="float: right">
         <a href="?doc=help" target="_blank">Help</a>
         |
-        <button onclick="newPad()" class="call_to_action">New document</button>
+        <button onclick="newPad()" class="call_to_action" id="new">New document</button>
       </span>
     </div>
     <div id="status_container">

mathdown.css

@@ -1,4 +1,11 @@
-#header { font-size: 200%; }
+#header {
+  font-size: 200%;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  /* Vertically center, if we're lucky to fit. */
+  line-height: 3ex;
+  height: 3ex;
+}
+
 #logo {
   font-size: 50%;  /* Fit 2-line math within single-line header */
   color: black; text-decoration: none;  /* Don't look like a link */
@@ -7,7 +14,7 @@
 .warning { color: orange; }
 .call_to_action {
   font-weight: bold;
-  font-size: inherit; /* avoid browser <button> small font */
+  font-size: inherit; font-family: inherit; /* avoid parts of browser <button> styling */
   text-decoration: none;
   /*color: black; background-color: springgreen;
   padding: 0 0.5em; border-radius: 0.5ex; border-style: outset;*/