<html>
<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <style type="text/css">
    body { background: #F0F0F0; }
    #editor {
      width: 590px;
      margin: auto;
      margin-top: 60px;
      color: #333;
      background-color: #fff;
      font-size: 13px;
      line-height: 17px;
      font-family: 'Helvetica Neue';
      border: 1px solid #CCC;

      padding-top: 1px; /* important for some reason? */
      padding-right: 10px;
      padding-bottom: 8px;
      padding-left: 0px /* prevents characters from looking chopped off in FF3 */;
      overflow: hidden;
      /* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
      background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    }

    #editor > div:first-child span {
      font-size: 140%;
      font-weight: bold;
    }
    #editor > div:first-child {
      margin-top:10px;
      margin-bottom:10px;
    }

    .gutter-noauthor {
      padding-left: 15px;
    }

    .inline-img {
      max-width:400px;
      max-height:300px;
      width: expression(this.width > 400 ? 400: true);
      height: expression(this.height > 300 ? 300: true);
    }

    .inline-tex{
      border: 1px solid transparent;
    }

    .inline-tex:hover {
      border: 1px dashed red;
    }

    a.attrlink {
      /*  font-weight: bold;
     text-decoration: none;*/
    }

    .code {
      font-family: monospace;
      color: #777;
      white-space: pre-wrap;
    }

    .code span {
      padding-left: 32px;
      text-indent: -32px;
      display: inline-block;
    }

    a.attrlink:hover {
      text-decoration: underline;
    }

    <%= authorCss %>
  </style>

</head>

<!-- todo: author colors, sidebar, embedly -->

<body>
<div id="editor">
  <%- padHTML %>
</div>

<script type='text/javascript'>
  function goLive() {
    if (navigator.onLine) {
      document.location = '<%= url %>';
    } else {
      setTimeout(goLive, 250);
    }
  }
  goLive();
</script>

</body>
</html>
