/*
StyleDocco default styles
=========================
This is the default stylesheet for StyleDocco. It also serves as an example of the documentation syntax. */

/*
General styles
--------------
We don't define any global styles except background color and resetting margins and paddings. */
body {
    margin: 0;
    padding: 0;
    background-color: #f6f7f9;
}
/* We use the generic `sans-serif` font family to get Arial on Windows and Helvetica on Mac, but elements in the example boxes will not get any of StyleDocco styles.

    <a href="#">Unstyled link example</a> */
.styledocco-sidebar,
.styledocco-docs > :not(.styledocco-example) {
    margin: 15px 20px;
    color: #334;
    line-height: 1.618;
    font-family: sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
}
.styledocco-sidebar,
.styledocco-docs > p, .styledocco-docs > ul, .styledocco-docs > ol, .styledocco-docs > a {
    font-size: 12px;
}
.styledocco-docs > h1, .styledocco-docs > h2, .styledocco-docs > h3,
.styledocco-docs > h4, .styledocco-docs > h5, .styledocco-docs > h6 {
     /* `!important` needed due to `*:not()` above. */
    margin: 25px 20px 0 !important;
    line-height: 1.2 !important;
    color: #555f6a !important;
}
.styledocco-docs > :not(.styledocco-example) a {
    color: #27a;
    text-decoration: none;
}
.styledocco-docs > :not(.styledocco-example) a:hover {
    color: #157;
    text-decoration: underline;
}
.styledocco-docs > :not(.styledocco-example) a:visited {
    color: #146;
}
/* Manually adding the documentation container makes examples possible in the StyleDocco documentation. You won't need that in your stylesheet documentation, of course.

    <div class="styledocco-docs">
      <p>A <a href="#">regular link</a> (now styled), a <a href="./docs.html">visited link</a> and some <code>inline code</code>.</p>
    </div>

To show pseudo selectors styles in examples, just add the pseudo selector (including the `:`) as a class name.

    <div class="styledocco-docs"><p>
      <a href="#">Link</a>
      <a href="#" class=":hover">Link</a>
      <a href="#" class=":visited">Link</a>
    </div> */
.styledocco-docs > :not(.styledocco-example):not(pre) var,
.styledocco-docs > :not(.styledocco-example):not(pre) code {
    padding: .1em 3px;
    background: rgba(0, 0, 0, .025);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 3px;
    font-style: normal;
    font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
}
/* For displaying code, we prefer [Ubuntu Mono](http://font.ubuntu.com.com), falling back on some fonts that should look better at smaller sizes than the default monospace fonts.

Code blocks also get a nice selection color to better highlight what you should select when copy/pasting.

```
<div class="styledocco-docs">
<pre>
<code>The font in &lt;pre&gt; code blocks is small but legible.</code>
</pre>
</div>
``` */
.styledocco-code pre code,
.styledocco-docs > pre samp,
.styledocco-docs > pre code {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
    font-size: 12px;
}
.styledocco-code code::selection,
.styledocco-docs > pre code::selection {
    background: #248;
    color: #fff;
}

/* ## Site Layout ##
A centered container with sections of documentation and code side by side, and a menu (not displayed here). The code pane is slightly faded out until hovered.

    <div class="styledocco-container">
      <div class="styledocco-section">
        <div class="styledocco-docs"><p>Documentation</p></div>
        <div class="styledocco-code"><pre>Code</pre></div>
      </div>
    </div> */
.styledocco-container {
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
}
.styledocco-main {
    float: right;
    width: 83%;
}
.styledocco-sidebar {
    position: fixed;
    width: 9%;
    padding: 1%;
}
.styledocco-section {
    position: relative;
    min-height: 200px;
}

/* ## Menu ##
Sidebar menu, fixed top/left. Slightly faded out when not hovered.

    <div class="styledocco-sidebar :hover" style="position:static;width:40%">
      <a href="#" class="styledocco-brand">Hovered sidebar</a>
      <strong class="styledocco-nav-heading">Folder</strong>
      <ul class="styledocco-nav">
        <li><a href="#">Item</a>
        <li class=":hover"><a href="#">Hovered item</a>
      </ul>
    </div>
    <div class="styledocco-sidebar" style="position:static;width:40%">
      <a href="#" class="styledocco-brand">Inactive menu</a>
      <ul class="styledocco-nav">
        <li><a href="#">Item</a>
      </ul>
    </div>

Sometimes you need to specify some inline styles in the HTML examples to override properties such as `position: fixed`. */
.styledocco-sidebar {
    max-height: 90%;
    overflow-y: auto;
    margin-top: 20px;
    word-wrap: break-word;
    background-color: #777f88;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    opacity: .75;
    -webkit-transition: opacity 2.5s;
    -moz-transition:    opacity 2.5s;
    -o-transition:      opacity 2.5s;
}
.styledocco-sidebar:hover {
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition:    opacity .5s;
    -o-transition:      opacity .5s;
}
.styledocco-sidebar a {
    text-decoration: none;
}
.styledocco-brand {
    display: block;
    margin: 0 0 10px;
    text-align: center;
    color: #eee;
    font-size: 16px;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, .5) 0 0 1px;
}
.styledocco-brand:hover {
    color: #fff;
    text-decoration: none;
}
.styledocco-nav {
    margin: 0;
    padding: 0;
}
.styledocco-nav-heading {
    display: block;
    padding: .3em 0;
    margin: .5em 0 0;
    color: #ddd;
    font-size: 13px;
    text-shadow: rgba(0, 0, 0, .25) 0 0 1px;
}
.styledocco-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.styledocco-nav li:active,
.styledocco-nav li:focus,
.styledocco-nav li:hover {
    background: rgba(255, 255, 255, .2);
    border-color: transparent;
    border-radius: 3px;
    text-decoration: none;
}
.styledocco-nav li:active + li,
.styledocco-nav li:focus + li,
.styledocco-nav li:hover + li {
    border-color: transparent;
}
.styledocco-nav a {
    display: block;
    padding: .2em 5%;
    color: #f7f7f7;
}

/* ## Documentation & code ## */
.styledocco-docs {
    position: relative;
    width: 58%;
    min-height: 200px;
    margin: 20px 0 40px;
    background: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.styledocco-code {
    position: absolute;
    top: 5px; bottom: 5px;
    right: 0;
    width: 42%;
    overflow: auto;
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    border: 1px solid rgba(0, 0, 0, .1);
    background: rgba(255, 255, 255, .75);
    opacity: .75;
    -webkit-transition: opacity .25s;
    -moz-transition:    opacity .25s;
    -o-transition:      opacity .25s;
}
.styledocco-code:hover {
    opacity: 1;
}
/* Showing examples of documentation examples would be a bit recursive, but it's a checkerboard background to be able to see edges of elements regardless of their color. */
.styledocco-example {
    margin-top: 10px;
    padding: 15px;
    overflow: auto;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAAZQTFRF+vr6////+o8bnQAAABBJREFUCB1jYPjPgBXhEAYAfr8P8bm+jEoAAAAASUVORK5CYII=);
    border-top: 1px dotted rgb(220, 220, 225);
}
pre + .styledocco-example {
    margin-top: 0;
    border-top: 0;
}
.styledocco-example:before, .styledocco-example:after { display: table; content: ""; }
.styledocco-example:after { clear: both; }

.styledocco-docs > pre,
.styledocco-code pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #445;
    margin: 0 !important;
    line-height: 1.1 !important;
}
.styledocco-docs > .pilcrow {
    position: absolute;
    right: 0; top: 0;
    text-decoration: none;
    font-weight: bold;
    opacity: .5;
}
.styledocco-docs > .pilcrow:hover {
    opacity: 1;
}
.styledocco-docs > pre {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 20px;
    background: rgb(248, 249, 251);
    border: 1px solid rgba(220, 220, 225, .8);
    border-left: 0; border-right: 0;
}
.styledocco-example + pre {
    border-top: 1px dotted rgb(220, 220, 225);
}
.styledocco-docs > pre:first-child {
    border-top: 0;
}
.styledocco-docs > pre:last-child {
    border-bottom: 0;
}
.styledocco-code pre {
    padding: 0;
    background: transparent;
    border: 0;
}

/* ### Code highlighting
The code highlighting color scheme is based on GitHub's code colors, but slightly muted and modified to support more CSS features. */
/* ```
<div class="styledocco-docs"><pre><code><span class="comment">// A comment</span>
<span class="tag">body</span>, <span class="id">#foo</span>, <span class="class">.bar</span> <span class="rules">{
  <span class="rule"><span class="attribute">property</span>:<span class="value"> <span class="function">foo(<span class="number">99</span>px</span>)</span> <span class="important">!important</span>;</span>
  <span class="rule"><span class="attribute">content</span>:<span class="value"> <span class="string">'hi'</span></span>;</span>
}</span>
<span class="tag">&lt;tag <span class="attribute">attribute</span>=<span class="value">"value"</span>></span>string<span class="tag">&lt;/tag></span>
</code></pre></div>
``` */
.styledocco-code .comment, .styledocco-docs > pre .comment {
    color: #887;
}
.styledocco-code .number, .styledocco-docs > pre .number,
.styledocco-code .hexcolor, .styledocco-docs > pre .hexcolor {
    color: #497;
}
.styledocco-code .important, .styledocco-docs > pre .important,
.styledocco-code .string, .styledocco-docs > pre .string,
.styledocco-code .tag .value, .styledocco-docs > pre .tag .value {
    color: #b35;
}
.styledocco-code .tag, .styledocco-docs > pre .tag,
.styledocco-code .tag .title, .styledocco-docs > pre .tag .title {
    color: #348;
}
.styledocco-code .attribute, .styledocco-docs > pre .attribute,
.styledocco-code .variable, .styledocco-docs > pre .variable,
.styledocco-docs > :not(.styledocco-example):not(pre) var {
     color: #188;
}
.styledocco-code .pseudo, .styledocco-docs > pre .pseudo,
.styledocco-code .keyword, .styledocco-docs > pre .keyword,
.styledocco-code .rule .attribute, .styledocco-docs > pre .rule .attribute {
    color: #001;
}
.styledocco-code .at_rule, .styledocco-docs > pre .at_rule,
.styledocco-code .at_rule .keyword, .styledocco-docs > pre .at_rule .keyword,
.styledocco-code .id, .styledocco-docs > pre .id {
    color: #724;
}
.styledocco-code .function, .styledocco-docs > pre .function,
.styledocco-code .class, .styledocco-docs > pre .class {
    color: #328;
}