$lead: rgb(204, 17, 67); $code: rgb(240, 230, 140); $succ: rgb(152, 251, 152); $fail: rgb(255, 160, 160);

$toc-width: 200px;

title, host, copyright { display: none; }

html, body { background: eee; font-family: Helvetica, “Trebuchet MS”, Arial, sans-serif; padding: 0; margin: 0; font-size: 14px; } code { font-family: “Lucida Console”, Monaco, monospace; } @media screen {

html.js body { padding-left: $toc-width; }

}

html.hide-toc {

body { padding-left: 0; }
.toc { bottom: auto; opacity: 0; border-bottom: 1px solid #ccc; box-shadow: 0px 0px 20px #888;
  &:hover { opacity: 1; }
  ul { display: none; }
}

}

a { text-decoration: none; color: $lead; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5 { font-weight: 300; margin: 20px; color: $lead; } p { margin: 20px; } p, li, td { line-height: 1.4em; } pre { margin: 20px; padding: 5px; overflow-x: auto; background: #111 !important; color: $code; } li { margin: 5px 0; } ul ul { padding-left: 20px; }

table { text-align: left; width: 100%; border-spacing: 0; margin: 20px 0; margin-left: 10px;

p { margin: 0; }
span.param-level { display: none; }
td, th { padding: 8px 10px; vertical-align: top; }
th { font-size: 1em; font-weight: normal; color: #999; text-transform: uppercase; padding: 4px 10px;  }
td { border-top: 1px solid #bbb; }

}

table.parameters {

tr.param-level-2 {
  td { border-top-color: transparent; }
  td:first-child { padding-left: 20px; }
}
tr.param-level-3 {
  td { border-top-color: transparent; }
  td:first-child { padding-left: 30px; }
}
tr.param-level-4 {
  td { border-top-color: transparent; }
  td:first-child { padding-left: 40px; }
}
code.example { display: block; word-wrap: break-word; color: #999; max-width: 120px; font-size: 0.9em; }
td:first-child { font-weight: bold; }
strong.required { color: $lead; display: block; }

}

a.menu-autolink, a.example-autolink {

&:before { margin-right: 1px; background: rgba($lead, 0); border-radius: 100px; text-decoration: none !important; width: 1.25em; display: inline-block; text-align: center; font-weight: bold; transition: 0.15s; }
&:hover:before { background: $lead; color: white; }

}

a.menu-autolink {

&:before { content: '☍'; }

}

a.example-autolink {

&:before { content: '✎'; }

}

@media screen {

blockquote { margin: 20px; background: #fff; overflow: hidden; border: 1px solid #ccc; box-shadow: 4px 0px 0px $lead inset;
  p { margin: 10px 20px; }
}

.toc { position: fixed; left: 0; top: 0; bottom: 0; width: $toc-width; z-index: 10; overflow-y: auto; background: #f5f5f5; border-right: 1px solid #ccc; transition: opacity 0.3s; font-size: 0.9em;
  h1 { font-size: 1.1em; }
  ul li { margin: 0;
    a { padding: 4px 10px; transition: 0.15s; line-height: 1.2em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
      &:hover { text-decoration: none; box-shadow: -2px 0px 0px 0px #bbb inset; }
      &.active { color: #000; }
      &.active:not(.active-children) { box-shadow: -2px 0px 0px 0px $lead inset; }
    }
  }
  > ul { list-style-type: none; margin: 0; padding-left: 0;
    > li {
        > a { font-size: 1em; text-transform: uppercase; margin: 0; display: block; color: #999;
      }
      > ul { list-style-type: none; padding-left: 0; padding-bottom: 20px; padding-top: 0px; display: none;
        > li > a { font-size: 1.0em; display: block; padding-left: 20px; color: #888;
        }
      }
    }
  }
}

}

@media print {

html, body { height: 100%; }

#title, #copyright { display: block; }
#title { font-size: 2em; color: $lead; padding-top: 50%; margin-top: 60px; }
#copyright { page-break-after: always; }

p.footer.copyright { display: none; }

h1 { page-break-before: always; }
.toc h1 { page-break-before: auto; }
.examples {
  .example-description { display: none; }
  .example { display: none; }
  .example:nth-child(2) { display: block; }

  &:after { content: 'Refer to online documentation for more examples on this action\'s usage.'; display: block; margin: 20px; font-weight: 300; }
}
table { padding: 0 20px; }

}

@media screen {

.resource { clear: both; position: relative; z-index: 1;
  .action { clear: both; border-bottom: 1px solid #ccc; overflow: hidden;
    h3 { text-transform: uppercase; }

    .description { float: left; width: 50%; background: #fff; border-top: 1px solid #ccc; position: relative;
      blockquote { background: #eee; }
    }
    .examples { float: right; width: 50%; color: #fff; background: #333; border-top: 1px solid #ccc; position: relative;
      .example-description { color: #888; font-style: italic; margin-top: 15px; margin-bottom: 15px;
        em { color: #aaa; white-space: nowrap; font-style: normal; }
        em:before { content: ' '; display: inline-block; height: 10px; width: 10px; border-radius: 5px; margin-right: 3px; background: $succ; }
        em.red:before { background: $fail; }
      }
      h3 { color: #eee; margin-bottom: 13px; }
      h5 { color: #888; text-transform: uppercase; }
      .example.visible {
        > * { display: block; }
      }
      .example {
        > * { display: none; margin: 20px; }
        > h4 { display: block; cursor: pointer; color: #ddd; font-size: 1em; padding: 7px 20px 7px 40px; position: relative; margin: 0; transition: 0.15s; }
        > h4:before { position: absolute; top: 50%; margin-top: -5px; left: 20px; height: 10px; width: 10px; border-radius: 5px; background: $succ; display: block; content: ' '; }
        > h4:hover { color: #fff; background: #4c4c4c; }
        > .curl, > .raw { margin: 0; }
        > .curl { display: none; }
      }

      .example.failed > h4:before { background: $fail; }
    }

    .description:after, .examples:after { position: absolute; top: 100%; height: 10000px; left: 0; right: 0; background: #fff; content: ' '; }
    .examples:after { background: #333; }
  }
}

}

.format-toggle { float: right;

a { color: #888; margin-left: 5px; }
.as-raw { color: #bbb; }

}

html.example-curl .resource .action .examples .example.visible {

> .curl { display: block; }
> .raw { display: none; }
.format-toggle {
  .as-raw { color: #888; }
  .as-curl { color: #bbb; }
}

}

p.footer { text-align: center; color: #888; clear: both; }