#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 */
  display: inline-block; width: 4em; white-space: nowrap;
}
.warning { color: #ff7f50; /* coral */ }
.call_to_action {
  font-weight: bold;
  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;*/
}

/* Horizontally center http://stackoverflow.com/a/10352525/239657 */
#status_container {
  position: fixed; top: 1ex; left: 0; right: 0;
  text-align: center;
  visibility: hidden;  /* allow clicking through */
}
#status {
  display: inline-block;
  padding: 0 0.5em; border-radius: 1ex;
  color: black; background-color: yellow;
  font-size: 150%; font-style: italic;
  /* Without a class, hide the status.
     Make sure stuff underneath is clickable (see http://stackoverflow.com/a/21335440/239657). */
  opacity: 0; visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;  /* fast fade out */
}
#status.info {
  /* Explanation for http://cubic-bezier.com/#0,.3,.85,0 curve:
     quickly appear a tiny bit (10% at 5% time), then fade in slowly (50% at 80% time). */
  opacity: 0.8; visibility: visible;
  -webkit-transition: all 2s cubic-bezier(0,.3,.85,0);
  transition: all 2s cubic-bezier(0,.3,.85,0);  /* slow appear */
}

@media print { #header { display: none; } }

#content { clear: both; }

@media screen { .CodeMirror { border: 1px solid silver; } }
@media print { .CodeMirror { border: 1px none; } }

/* Expand editor to fit most of the page. */
html, body, form, textarea, .firepad, .CodeMirror {
  height: 100%; width: 100%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* TODO: downsizing body is ugly but works better than downsizing form. */
body { height: 80%; width: 95%; }
/* These would make the editor exactly fill the available space,
   but also cause CM to auto-resize and never scroll
   (instead whole page scrolls), which makes CM slower.
  body { display: table; }
  form { display: table-row; } */

/* David is the best-matching serif Hebrew style.
   But its italic is problematic: slants to the left, which inherently
   does't mix well with right-slanted latin; the Culmus version also
   "takes over" punctuation to be left-slanted, and even English letters
   to remain upright :-(
   KLUDGE: hide the native italic from the browser, to force "faux oblique"
   that will slant to the right!  https://stackoverflow.com/a/25583439/239657
   Also, constrain to Hebrew block to avoid taking over other scripts.
*/
@font-face {
  font-family: 'DavidWithoutItalic';
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0590-05FF, U+FB1D-FB4F; /* Hebrew, Hebrew subset of Alphabetic Presentation Forms */
  src: local('David CLM Medium'), local('David'), local('David Regular');
}
@font-face {
  font-family: 'DavidWithoutItalic';
  font-style: normal;
  font-weight: bold;
  unicode-range: U+0590-05FF, U+FB1D-FB4F; /* Hebrew, Hebrew subset of Alphabetic Presentation Forms */
  src: local('David CLM Bold'), local('David Bold');
}

/* Font choices based on Math.SE: http://graphicdesign.stackexchange.com/a/12961 */
/* "lining_numerals_charter" replaces only the digits 0-9, comes from fonts/ subdir.
   See https://github.com/cben/mathdown/issues/95 */
.CodeMirror {
  font-family: "lining_numerals_charter", "Georgia", "Bitstream Charter", "DavidWithoutItalic", "Times New Roman", "Times", serif;
}
/* markdown mode styles `...` and indented code blocks as "comment". */
.cm-comment, .cm-leadingspace, .cm-formatting-list, .cm-formatting-quote, .cm-formatting-task {
  /* Prefer Courier and similar serif monospaced fonts.
     Prefer Nimbus Mono L to Courier New -> Liberation Mono substitution
     on linux (it's metrically compatible but sans-serif). */
  font-family: "Courier 10 Pitch", "Nimbus Mono L", "Courier New", "Courier", "FreeMono", monospace;
}

/* Match h1..h6 default sizes in WebKit, Mozilla & IE as of 2013. */
pre.cm-header-1 { font-size: 2.00em; }
pre.cm-header-2 { font-size: 1.50em; }
pre.cm-header-3 { font-size: 1.17em; }
pre.cm-header-4 { font-size: 1.00em; }
pre.cm-header-5 { font-size: 0.83em; }
pre.cm-header-6 { font-size: 0.67em; }
/* Arbitrary margins for headers (non-negligible but not too big). */
pre.cm-header { padding-top: 0.5em; padding-bottom: 0.5em; }
/* De-emphasize markup characters.  Whitewash colors by *0.4 factor. TODO: opacity? */
.cm-s-default .cm-formatting-header { color: #66F; }
.cm-s-default .cm-formatting-em { color: #666; }
.cm-s-default .cm-formatting-strong { color: #666; }
.cm-s-default .cm-formatting-code { color: #c96; }

.cm-s-default .cm-formatting-list { font-weight: bold; }
/* Want to disable/de-emphasize coloring of list lines, leaving only bullet colored.
   But can't, as long as color is important for lining up continuation lines.
.cm-s-default .cm-variable-2 { color: #003366; }
.cm-s-default .cm-variable-2.cm-formatting-list { color: #05a; }
.cm-s-default .cm-variable-3 { color: #005233; }
.cm-s-default .cm-variable-3.cm-formatting-list { color: #085; }
.cm-s-default .cm-keyword { color: #470052; }
.cm-s-default .cm-keyword.cm-formatting-list { color: #708; }
*/

/* Poor man's checkbox. */
.cm-formatting-task { border: 1px inset; }

/* exclude math from monospace style to avoid mathjax vertically
   squishing formulas, especially display. */
.cm-comment.inline_math, .cm-comment.display_math { font-family: serif; }
.display_math { width:100%; }

/* We set (in "renderLine" event) negative text-indent on indented lines,
   which if inherited by any nested inline-block breaks their positioning
   (math overlaps text, tabs become almost invisible).  Thanks to
   https://github.com/mathjax/MathJax/issues/473 for easy fix. */
.CodeMirror pre > * { text-indent: 0; }

/* Vertically center gutter markers - looks better on our variable-height
   padded headings. */
.CodeMirror-gutter-wrapper { height: 100%; }
.CodeMirror-gutter-elt { height: 100%; display: table; }
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
    height: 100%; display: table-cell; vertical-align: middle;
    /* Small triagles are not covered by default fonts on WinXP and Android. */
    font-family: "Lucida Sans Unicode", "Droid Sans Fallback", "Arial";
}