style.css

.tippy-tooltip[data-animation=fade][data-state=hidden]{opacity:0}.tippy-iOS{cursor:pointer!important;-webkit-tap-highlight-color:transparent}.tippy-popper{pointer-events:none;max-width:calc(100vw - 10px);transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-property:transform}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;background-color:#333;transition-property:visibility,opacity,transform;outline:0}.tippy-tooltip[data-placement^=top]>.tippy-arrow{border-width:8px 8px 0;border-top-color:#333;margin:0 3px;transform-origin:50% 0;bottom:-7px}.tippy-tooltip[data-placement^=bottom]>.tippy-arrow{border-width:0 8px 8px;border-bottom-color:#333;margin:0 3px;transform-origin:50% 7px;top:-7px}.tippy-tooltip[data-placement^=left]>.tippy-arrow{border-width:8px 0 8px 8px;border-left-color:#333;margin:3px 0;transform-origin:0 50%;right:-7px}.tippy-tooltip[data-placement^=right]>.tippy-arrow{border-width:8px 8px 8px 0;border-right-color:#333;margin:3px 0;transform-origin:7px 50%;left:-7px}.tippy-tooltip[data-interactive][data-state=visible]{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{position:absolute;border-color:transparent;border-style:solid}.tippy-content{padding:5px 9px}* {
  box-sizing: border-box; }

html, body {
  background: #fff;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: arial; }

a {
  text-decoration: none; }

em {
  display: block;
  clear: both; }

#draw {
  position: fixed;
  z-index: -1;
  left: -9999px;
  top: -9999px; }

strong.r {
  color: red; }

strong.h {
  background: yellow; }

main {
  padding-left: 200px;
  padding-top: 92px;
  padding-bottom: 31px;
  height: 100%; }

main.ppreview {
  padding: 0;
  padding-top: 51px;
  background: #f8f8f8; }
  main.ppreview article {
    height: auto; }
  main.ppreview header {
    padding: 0; }

.publisher_preview {
  width: 880px;
  border-radius: 4px;
  border: solid 1px #d2d2d2;
  background: #fff;
  padding: 24px 77px;
  margin: 0px auto;
  margin-top: 24px;
  box-shadow: 1px 1px 0px #c2c2c2; }

.pane {
  height: 100%;
  padding: 24px;
  overflow: auto; }

article {
  height: 100%; }
  article.split .panes .pane {
    float: left;
    width: 50%; }
  article.split .panes textarea.editor {
    border-right: solid 1px #c8c8c8; }
  article.split section.sub div {
    float: left;
    width: 50%; }
    article.split section.sub div:first-child {
      border-right: solid 1px #c8c8c8; }

.container {
  height: 100%;
  width: 100%; }

.panes {
  height: 100%; }

textarea.editor {
  font-size: 14px;
  border: none;
  resize: none;
  outline: none;
  width: 100%;
  font-family: Menlo, Verdana; }
  textarea.editor.line_wrap {
    white-space: nowrap; }

header {
  width: 100%;
  padding-left: 200px;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0; }
  header section.main {
    background: whitesmoke;
    border-bottom: solid 1px gainsboro; }
    header section.main .title {
      float: left; }
    header section.main .btn {
      margin-top: 10px;
      margin-right: 8px; }
  header section.sub {
    background: whitesmoke;
    border-bottom: solid 1px #c8c8c8; }
    header section.sub div {
      padding: 8px 16px; }
  header section {
    top: 0;
    left: 0; }
    header section .lbl {
      font-size: 16px;
      font-weight: 600;
      padding-top: 4px;
      display: inline-block; }
    header section .title {
      padding: 16px;
      outline: none;
      font-weight: 600; }

.nav_heading {
  background: #131415;
  border-bottom: solid 1px rgba(255, 255, 255, 0.05);
  padding: 8px 16px;
  z-index: 201;
  position: fixed;
  width: 200px;
  top: 0;
  left: 0; }
  .nav_heading .btn {
    background: #17181f;
    color: rgba(255, 255, 255, 0.3);
    border: solid 1px rgba(255, 255, 255, 0.05); }
    .nav_heading .btn:hover {
      color: #fff;
      border: solid 1px rgba(255, 255, 255, 0.4); }
    .nav_heading .btn.new {
      float: left;
      margin-left: 0; }

nav {
  background: #17181f;
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  padding-top: 51px;
  z-index: 200; }
  nav a {
    color: darkgray;
    width: 100%;
    font-size: 14px;
    display: block; }
    nav a span.n {
      white-space: nowrap;
      overflow: hidden;
      padding: 8px 16px;
      display: inline-block;
      max-width: 200px; }
    nav a.active {
      background: #333746; }
    nav a:hover {
      color: #fff; }
  nav .title {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    padding: 8px 16px;
    padding-top: 24px; }
    nav .title .n {
      float: left; }
    nav .title .far {
      float: right;
      color: rgba(255, 255, 255, 0.3);
      cursor: pointer; }
      nav .title .far:hover {
        color: #fff; }
  nav .icon {
    margin-right: 4px; }
  nav a.asset {
    position: relative; }
    nav a.asset span.n {
      padding: 6px 16px; }
    nav a.asset:hover .img {
      display: block; }
    nav a.asset .img {
      display: none;
      background-size: contain;
      position: absolute;
      top: 0;
      z-index: 500;
      border: solid 1px rgba(51, 55, 70, 0.5);
      border-left: none;
      background: #fff;
      background-repeat: no-repeat; }
    nav a.asset .size {
      background: rgba(51, 55, 70, 0.7);
      font-size: 12px;
      padding: 4px;
      position: absolute;
      top: 0;
      left: 0; }
    nav a.asset img {
      max-width: 200px; }

.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  margin: 0px;
  margin-bottom: 12px; }

.markdown h1 {
  font-size: 32px; }

.markdown h2 {
  font-size: 24px; }

.markdown h3 {
  font-size: 20px; }

.markdown h4 {
  font-size: 16px; }

.markdown p {
  margin-top: 0px; }

.markdown img {
  margin: 0;
  display: block;
  border: solid 1px white; }

.markdown code {
  background: #d6dbe6;
  border-radius: 4px;
  font-family: Menlo, Verdana;
  padding: 1px 4px;
  font-size: 14px; }

.markdown pre code {
  padding: 16px;
  overflow: auto;
  display: block; }

.markdown blockquote {
  margin-left: 0;
  border-left: solid 8px #ffb885; }
  .markdown blockquote p {
    margin-left: 24px; }

.markdown table {
  border-collapse: collapse;
  margin-bottom: 16px; }
  .markdown table th, .markdown table td {
    border: solid 1px #c8c8c8;
    padding: 8px; }

.b {
  font-weight: 600; }

.infobar {
  text-align: right;
  background: whitesmoke;
  border-top: solid 1px gainsboro;
  width: 100%;
  padding: 8px;
  padding-left: 216px;
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  font-size: 12px;
  font-weight: 500;
  color: #646464; }

.btn {
  margin-left: 4px;
  float: right;
  border-radius: 4px;
  background: #fafafa;
  border: solid 1px gainsboro;
  border-bottom: solid 1px #b4b4b4;
  padding: 3px 12px;
  cursor: pointer; }
  .btn.bold {
    font-weight: 600; }
  .btn.red {
    color: red; }
  .btn.underline {
    text-decoration: underline; }
  .btn.highlight {
    background: yellow; }
  .btn:hover {
    border: solid 1px #787878; }

.preview img:hover {
  border: dashed 1px #b4b4b4; }

.preview img.selected {
  border: dashed 1px rgba(0, 0, 255, 0.8); }