/* Help Pages */

:root {
  --color-help-sidebar: #f8f8f8;
  --color-help-sidebar-border: #eaeaea;
  --help-max-width: 600px;
}

.help {
  max-width: calc(var(--help-max-width) + 160px);
}

.help-text {
  font: 16px var(--font-family-alternative);
  max-width: var(--help-max-width);
}

.help-text h2,
.help-text h3,
.help-text h4,
.help-text h5 {
  font-family: var(--font-family);
}

.help-text > div {
  margin-bottom: 1em;
}

.help-text .CodeMirror {
  background-color: var(--color-code-background);
  border: 0;
  height: auto;
  margin: 0;
  padding: 0;
}

.help-text code {
  font-size: .9em;
}

.help-text ul {
  padding-left: 2em;
}

.help-text li {
  list-style-type: disc;
}

.help-sidebar {
  background-color: var(--color-help-sidebar);
  border: 1px solid var(--color-help-sidebar-border);
  float: right;
  font-size: 1.1em;
  margin: 0 0 10px 10px;
  padding: 10px 10px 0;
}

.help-sidebar a:hover,
.help-sidebar a.selected {
  font-weight: 500;
}
