/** ************************************************************************* *
 ** CSS for HTML docs (e.g. Pursuit)
 **
 ** STRUCTURE
 **
 ** This CSS file is structured into several sections, from general to
 ** specific, and (mostly) alphabetically within the sections.
 **
 ** Several global element styles are used. This is not encouraged and should
 ** be kept to a minimum. If you want to add new styles you'll most likely
 ** want to add a new CSS component. See the Components section for examples.
 **
 ** CSS components use three simple naming ideas from the BEM system:
 **   - Block:    `.my-component`
 **   - Element:  `.my-component__item`
 **   - Modifier: `.my-component.my-component--highlighted`
 **
 **   Example:
 **   <div .my-component>
 **     <div .my-component__item>
 **     <div .my-component__item>
 **   ...
 **   <div .my-component.my-component--highlighted>
 **     <div .my-component__item>
 **     <div .my-component__item>
 **
 ** Components can be nested.
 **
 **
 ** TYPOGRAPHY
 **
 ** Typographic choices for sizes, line-heights and margins are based on a
 ** musical major third scale (4:5). This gives us a way to find numbers
 ** and relationships between them that are perceived as harmonic.
 **
 ** To make use of this modular scale, use a ratio of the form
 **   (5/4)^n
 ** where n ∈ ℤ, -6 ≤ n ≤ 8.
 **
 ** LESS
 **
 ** This CSS is generated by less. To compile it:
 **
 **   npm install [-g] less
 **   lessc app/static/pursuit.less > app/static/pursuit.css
 **
 ** ************************************************************************* */
/* Section: Variables
 * ========================================================================== */
/* Section: Document Styles
 * ========================================================================== */
html {
  box-sizing: border-box;
  /* This overflow rule prevents everything from shifting slightly to the side
     when moving from a page which isn't large enough to generate a scrollbar
     to one that is. */
  overflow-y: scroll;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  background-color: #ffffff;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 87.5%;
  line-height: 1.563;
}
@media (min-width: 38em) {
  body {
    font-size: 100%;
  }
}
/* Section: Utility Classes
 * ========================================================================== */
.clear-floats {
  clear: both;
}
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}
/* Content hidden like this will still be read by a screen reader */
.hide-visually {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Section: Layout
 * ========================================================================== */
.container {
  display: block;
  max-width: 66em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.col {
  display: block;
  position: relative;
  width: 100%;
}
.col.col--main {
  margin-bottom: 3.08em;
}
.col.col--aside {
  margin-bottom: 2.44em;
}
@media (min-width: 52em) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
  .col.col--main {
    float: left;
    width: 63.655%;
    /* 66.6…% - 30px */
  }
  .col.col--aside {
    float: right;
    font-size: 87.5%;
    width: 33.333333%;
  }
}
@media (min-width: 66em) {
  .col.col--aside {
    font-size: inherit;
  }
}
/* Footer
 * Based on http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
 * Except we don't support IE6
 * -------------------------------------------------------------------------- */
html,
body {
  height: 100%;
}
.everything-except-footer {
  min-height: 100%;
  padding-bottom: 3em;
}
.footer {
  position: relative;
  height: 3em;
  margin-top: -3em;
  width: 100%;
  text-align: center;
  background-color: #1d222d;
  color: #f0f0f0;
}
.footer * {
  margin-bottom: 0;
}
/* Section: Element Styles
 *
 * Have as few of these as possible and keep them general, because they will
 * influence every component hereafter.
 * ========================================================================== */
:target {
  background-color: #f1f5f9;
}
a,
a:visited {
  color: #c4953a;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #7b5904;
  text-decoration: none;
}
code,
pre {
  background-color: #f1f5f9;
  border-radius: 3px;
  color: #194a5b;
  font-family: "Roboto Mono", monospace;
  font-size: 87.5%;
}
:target code,
:target pre {
  background-color: #dfe8f1;
}
code {
  padding: 0.2em 0;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
code::before,
code::after {
  letter-spacing: -0.2em;
  content: "\00a0";
}
a > code {
  font-weight: normal;
}
a > code::before {
  content: "🡒";
  letter-spacing: 0.33em;
}
a:hover > code {
  color: #c4953a;
}
pre {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1em 1.25rem;
  /* Using rem here to align with lists etc. */
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
}
pre code {
  background-color: transparent;
  border: 0;
  font-size: 100%;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}
pre code::before,
pre code::after {
  content: normal;
}
h1 {
  font-size: 3.052em;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1.125;
  margin-top: 1.563rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 52em) {
  h1 {
    font-size: 3.814em;
    margin-top: 5.96rem;
  }
}
h2 {
  font-size: 1.953em;
  font-weight: normal;
  line-height: 1.250;
  margin-top: 3.052rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.563em;
  font-weight: normal;
  line-height: 1.250;
  margin-top: 2.441rem;
  margin-bottom: 1rem;
}
h4 {
  font-size: 1.25em;
  font-weight: normal;
  margin-top: 2.441rem;
  margin-bottom: 1rem;
}
h1 + h2,
h1 + h3,
h1 + h4,
h2 + h3,
h2 + h4,
h3 + h4 {
  margin-top: 1rem;
}
hr {
  border: none;
  height: 1px;
  background-color: #cccccc;
}
img {
  border-style: none;
  max-width: 100%;
}
p {
  font-size: 1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
table {
  border-bottom: 1px solid #cccccc;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}
td,
th {
  text-align: left;
  padding: 0.41em 0.51em;
}
td {
  border-top: 1px solid #cccccc;
}
td:first-child,
th:first-child {
  padding-left: 0;
}
td:last-child,
th:last-child {
  padding-right: 0;
}
ul {
  list-style-type: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
}
ul li {
  position: relative;
  padding-left: 1.250em;
}
ul li::before {
  position: absolute;
  color: #a0a0a0;
  content: "–";
  display: inline-block;
  margin-left: -1.25em;
  width: 1.250em;
}
/* Tying this tightly to ul at the moment because it's a slight variation thereof */
ul.ul--search li::before {
  content: "⚲";
  top: -0.2em;
  transform: rotate(-45deg);
}
ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.250em;
}
ol li {
  position: relative;
  padding-left: 0;
}
/* Section: Components
 * ========================================================================== */
/* Component: Badge
 * -------------------------------------------------------------------------- */
.badge {
  position: relative;
  top: -0.1em;
  display: inline-block;
  background-color: #000;
  border-radius: 1.3em;
  color: #fff;
  font-size: 77%;
  font-weight: bold;
  line-height: 1.563;
  text-align: center;
  height: 1.5em;
  width: 1.5em;
}
.badge.badge--package {
  background-color: #c4953a;
  letter-spacing: -0.1em;
}
.badge.badge--module {
  background-color: #75B134;
}
/* Component: Declarations
 * -------------------------------------------------------------------------- */
.decl__title {
  position: relative;
  padding-bottom: 0.328em;
  margin-bottom: 0.262em;
}
.decl__source {
  display: block;
  float: right;
  font-size: 64%;
  position: relative;
  top: 0.57em;
}
.decl__anchor,
.decl__anchor:visited {
  position: absolute;
  left: -0.8em;
  color: #bababa;
}
.decl__anchor:hover {
  color: #c4953a;
}
.decl__signature {
  background-color: transparent;
  border-radius: 0;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 0.328em 0;
}
.decl__signature code {
  display: block;
  padding-left: 2.441em;
  text-indent: -2.441em;
  white-space: normal;
}
:target .decl__signature,
:target .decl__signature code {
  /* We want the background to be transparent, even when the parent is a target */
  background-color: transparent;
}
.decl__body .keyword,
.decl__body .syntax {
  color: #0B71B4;
}
.decl__child_comments {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* Component: Dependency Link
 * -------------------------------------------------------------------------- */
.deplink {
  /* Currently no root styles, but keep the class as a namespace */
}
.deplink__link {
  display: inline-block;
  margin-right: 0.41em;
}
.deplink__version {
  color: #666666;
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
}
/* Component: Grouped List
 * -------------------------------------------------------------------------- */
.grouped-list {
  border-top: 1px solid #cccccc;
  margin: 0 0 2.44em 0;
}
.grouped-list__title {
  color: #666666;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0.8em 0 -0.1em 0;
  text-transform: uppercase;
}
.grouped-list__item {
  margin: 0;
}
/* Component: Message
 * -------------------------------------------------------------------------- */
.message {
  border: 5px solid;
  border-radius: 5px;
  padding: 1em !important;
}
.message.message--error {
  background-color: #fff0f0;
  border-color: #c85050;
}
.message.message--not-available {
  background-color: #f0f096;
  border-color: #e3e33d;
}
/* Component: Multi Col
 * Multiple columns side by side
 * -------------------------------------------------------------------------- */
.multi-col {
  margin-bottom: 2.44em;
}
.multi-col__col {
  display: block;
  padding-right: 1em;
  position: relative;
  width: 100%;
}
@media (min-width: 38em) and (max-width: 51.999999em) {
  .multi-col__col {
    float: left;
    width: 50%;
  }
  .multi-col__col:nth-child(2n+3) {
    clear: both;
  }
}
@media (min-width: 52em) {
  .multi-col__col {
    float: left;
    width: 33.333333%;
  }
  .multi-col__col:nth-child(3n+4) {
    clear: both;
  }
}
/* Component: Page Title
 * -------------------------------------------------------------------------- */
.page-title {
  margin: 4.77em 0 1.56em;
  padding-bottom: 1.25em;
  position: relative;
}
.page-title__title {
  margin: 0 0 0 -0.05em;
  /* Visually align on left edge */
}
.page-title__label {
  position: relative;
  color: #666666;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: -0.8em;
  text-transform: uppercase;
  z-index: 1;
}
/* Component: Top Banner
 * -------------------------------------------------------------------------- */
.top-banner {
  background-color: #1d222d;
  color: #f0f0f0;
  font-weight: normal;
}
.top-banner__logo,
.top-banner__logo:visited {
  float: left;
  color: #f0f0f0;
  font-size: 2.44em;
  font-weight: 300;
  line-height: 90px;
  margin: 0;
}
.top-banner__logo:hover {
  color: #c4953a;
  text-decoration: none;
}
.top-banner__form {
  margin-bottom: 1.25em;
}
.top-banner__form input {
  border: 1px solid #1d222d;
  border-radius: 3px;
  color: #1d222d;
  font-weight: 300;
  line-height: 2;
  padding: 0.21em 0.512em;
  width: 100%;
}
.top-banner__actions {
  float: right;
  text-align: right;
}
.top-banner__actions__item {
  display: inline-block;
  line-height: 90px;
  margin: 0;
  padding-left: 1.25em;
}
.top-banner__actions__item:first-child {
  padding-left: 0;
}
.top-banner__actions__item a,
.top-banner__actions__item a:visited {
  color: #f0f0f0;
}
.top-banner__actions__item a:hover {
  color: #c4953a;
}
@media (min-width: 38em) {
  .top-banner__logo {
    float: left;
    width: 25%;
  }
  .top-banner__form {
    float: left;
    line-height: 90px;
    margin-bottom: 0;
    width: 50%;
  }
  .top-banner__actions {
    float: right;
    width: 25%;
  }
}
/* Component: Search Results
 * -------------------------------------------------------------------------- */
.result.result--empty {
  font-size: 1.25em;
}
.result__title {
  font-size: 1.25em;
  margin-bottom: 0.2rem;
}
.result__badge {
  margin-left: -0.1em;
}
.result__body > *:first-child {
  margin-top: 0!important;
}
.result__body > *:last-child {
  margin-bottom: 0!important;
}
.result__signature {
  background-color: transparent;
  border-radius: 0;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 0.328em 0;
}
.result__signature code {
  display: block;
  padding-left: 2.441em;
  text-indent: -2.441em;
  white-space: normal;
}
.result__actions {
  margin-top: 0.2rem;
}
.result__actions__item {
  font-size: 80%;
}
.result__actions__item + .result__actions__item {
  margin-left: 0.65em;
}
/* Component: Version Selector
 * -------------------------------------------------------------------------- */
.version-selector {
  margin-bottom: 0.8em;
}
@media (min-width: 38em) {
  .version-selector {
    position: absolute;
    top: 0.8em;
    right: 0;
    margin-bottom: 0;
  }
}
/* Section: FIXME
 * These styles should be cleaned up
 * ========================================================================== */
/* Help paragraphs */
.help {
  padding: 5px 0;
}
.help h3 {
  /* FIXME: target with class */
  margin-top: 16px;
}
/* Section: Markdown
 * Github rendered README
 * ========================================================================== */
.markdown-body {
  /*
  Useful for narrow screens, such as mobiles. Documentation often contains URLs
  which would otherwise force the page to become wider, and force creation of
  horizontal scrollbars. Yuck.
  */
  word-wrap: break-word;
}
.markdown-body > *:first-child {
  margin-top: 0 !important;
}
.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}
.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
  color: #777;
  border-left: 0.25em solid #ddd;
}
.markdown-body blockquote > :first-child {
  margin-top: 0;
}
.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}
.markdown-body .anchor {
  /* We hide the anchor because the link doesn't point to a valid location */
  display: none;
}
.markdown-body .pl-k {
  /* Keyword */
  color: #a0a0a0;
}
.markdown-body .pl-c1,
.markdown-body .pl-en {
  /* Not really sure what this is */
  color: #39d;
}
.markdown-body .pl-s {
  /* String literals */
  color: #1a1;
}
.markdown-body .pl-cce {
  /* String literal escape sequences */
  color: #921;
}
.markdown-body .pl-smi {
  /* type variables? */
  color: #62b;
}