/* Grid layout */
body {
    display: grid;
    grid-template-columns: 250px calc(100% - 250px);
    grid-template-rows: 100px 3em auto;
    grid-template-areas: 
        "head   head"
        "search crumbs"
        "nav    main";
}
@media screen and (max-width: 750px) {
    body {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100px 3em auto;
        grid-template-areas: 
            "head"
            "crumbs"
            "main"
            "search"
            "nav";
    }
}
header {
    grid-area: head;
}
nav {
    grid-area: nav;
}
main {
    grid-area: main
}
#search-bar {
    grid-area: search;
}
#breadcrumbs {
    grid-area: crumbs;
}
#breadcrumbs a {
    color: #47A4FF;
}

/* Page styling */
html {
    width:100%;
    height:100%;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #EEE;

    max-width:950px;
    height:100%;
    margin: auto;
    padding:0px;
    background-color: #222;
}
a, a code {
    color: #3794FF !important;
    text-decoration: none !important;
}
a:hover, a code:hover {
    text-decoration: underline !important;
}
header {
    background-color: #222;
}
#search-bar, #breadcrumbs {
    background-color: #353535;
    color: #111;
    padding:0.7em;
}
#breadcrumbs {
    text-align: right;
}
nav {
    background-color: #181818;
    padding:10px;
    z-index: 2;
}
main {
    padding:2em;
}
p {
    max-width: 30em;
    padding-left: 2em;
}
ul {
    max-width: 30em;
}
video {
    width: 100%;
    max-width: 30em;
    padding-left: 2em;
    padding-top: 2em;
}

blockquote {
    background: #151515;
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0px;
}

h1:after
{
    content:' ';
    display:block;
    padding-top: 0.3em;
    border-bottom:2px solid #888;
}
h2:after
{
    content:' ';
    display:block;
    padding-top: 0.3em;
    border-bottom:2px solid #888;
}
hr {
    border-style: inset;
    border:0px;
    border-bottom:2px solid #888;
}

table {
    border-collapse: collapse;
    border: 1px solid #555;
    width:100%;
}
td {
    padding: 0.5em;
}
thead tr th {
    display:none;
}
tr:nth-child(even) {
    background-color: #181818;
}
tr:nth-child(odd) {
    background-color: #282828;
}
td:nth-child(1) {
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    white-space: nowrap;
    width: 1%;
}

main img {
    max-width: 100%;
    max-height: 20em;
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Search styling */
#search {
    width:100%;
    border: 1px solid #FFF;
    border-radius: 4px;
    transition:.25s;
    padding:4px;
    margin: -2px -2px 0 0;
}
#search:focus {
    border: 1px solid #444;
}

#search-bar {
    position: relative;
}
#search-bar span::before {
    position: absolute;
    display: block;
    top: 16px;
    right: 8px;
    width: 16px;
    height: 16px;
    content: "\1F5D9";
    color: #444;
    line-height: 10px;
    cursor: pointer;
}

/* Tree customization styles */
.tree-view {
    line-height: 160%;
}
.tree-branch {
    font-weight: bold;
}
.tree-leaf {
    font-weight: normal;
}

/* Tree view styling*/
.tree-view ul {
    padding-left: 0;
}
.tree-view>ul ul {
    margin-left: 1em;
}
.tree-view li {
    padding-left: 0;
    list-style: none;
}
.tree-view input {
    /* Keep expanders keyboard accessible, but not affect the page layout. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tree-view .expander-container {
    display: inline-block;
    width: 1em;
}
.tree-view .expander-container>label {
    cursor: pointer;
}
.tree-view .expander-container>label:before {
    content: "\25BD";
}
.tree-view input:checked ~ .expander-container>label:before {
    content: "\25B7";
}
.tree-view input:focus ~ .expander-container>label:before {
    color: #3794FF;
}
.tree-view input:checked ~ ul {
    display:none;
}

/* Code styling */

.signature { 
    background-color: #151515;
    border: 1px solid #555;
    padding:1em;
    margin-top: 2em;
}
.signature p { padding-left:1em; margin:0em;}
.signature .highlight pre { white-space: pre-wrap; padding:0em; padding-left:1em;}
.summary { 
    background-color: #151515;
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    padding:1em;
}
.summary p { margin:0px; padding-left:0em; max-width: 100%;}

.language-plaintext { 
    background: #151515; 
    color: #EEE; 
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; 
    line-height: .9em;

    font-size: 1em;
    -moz-tab-size: 3;
    tab-size: 3;
}

.highlight { background: #151515; color: #EEE; font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; line-height: .9em; }
.highlight pre { 
    padding:1em; 
    font-size: 1.2em; 
    overflow-x: auto;
    -moz-tab-size: 3;
    tab-size: 3;
}
.highlight .hll { background-color: #586e75 }
.highlight .c { color: #758b93 } /* Comment */
.highlight .err { color: #dc322f } /* Error */
.highlight .k { color: #b0b0ff } /* Keyword */
.highlight .l { color: #ff9057 } /* Literal */
.highlight .n { color: #EEE } /* Name */
.highlight .o { color: #2aa198 } /* Operator */
.highlight .p { color: #EEE } /* Punctuation */
.highlight .cm { color: #758b93 } /* Comment.Multiline */
.highlight .cp { color: #758b93 } /* Comment.Preproc */
.highlight .c1 { color: #758b93 } /* Comment.Single */
.highlight .cs { color: #758b93 } /* Comment.Special */
.highlight .gd { color: #dc322f } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gh { color: #EEE; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #b0c23b } /* Generic.Inserted */
.highlight .gp { color: #758b93; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #2aa198; font-weight: bold } /* Generic.Subheading */
.highlight .kc { color: #b0b0ff } /* Keyword.Constant */
.highlight .kd { color: #b0b0ff } /* Keyword.Declaration */
.highlight .kn { color: #2aa198 } /* Keyword.Namespace */
.highlight .kp { color: #b0b0ff } /* Keyword.Pseudo */
.highlight .kr { color: #b0b0ff } /* Keyword.Reserved */
.highlight .kt { color: #e3b139 } /* Keyword.Type */
.highlight .ld { color: #b0c23b } /* Literal.Date */
.highlight .m { color: #ff9057 } /* Literal.Number */
.highlight .s { color: #b0c23b } /* Literal.String */
.highlight .na { color: #6ebfff } /* Name.Attribute */
.highlight .nb { color: #EEE } /* Name.Builtin */
.highlight .nc { color: #e3b139 } /* Name.Class */
.highlight .no { color: #dc322f } /* Name.Constant */
.highlight .nd { color: #2aa198 } /* Name.Decorator */
.highlight .ni { color: #EEE } /* Name.Entity */
.highlight .ne { color: #dc322f } /* Name.Exception */
.highlight .nf { color: #6ebfff } /* Name.Function */
.highlight .nl { color: #EEE } /* Name.Label */
.highlight .nn { color: #e3b139 } /* Name.Namespace */
.highlight .nx { color: #6ebfff } /* Name.Other */
.highlight .py { color: #EEE } /* Name.Property */
.highlight .nt { color: #2aa198 } /* Name.Tag */
.highlight .nv { color: #dc322f } /* Name.Variable */
.highlight .ow { color: #2aa198 } /* Operator.Word */
.highlight .w { color: #EEE } /* Text.Whitespace */
.highlight .mf { color: #ff9057 } /* Literal.Number.Float */
.highlight .mh { color: #ff9057 } /* Literal.Number.Hex */
.highlight .mi { color: #ff9057 } /* Literal.Number.Integer */
.highlight .mo { color: #ff9057 } /* Literal.Number.Oct */
.highlight .sb { color: #b0c23b } /* Literal.String.Backtick */
.highlight .sc { color: #EEE } /* Literal.String.Char */
.highlight .sd { color: #758b93 } /* Literal.String.Doc */
.highlight .s2 { color: #b0c23b } /* Literal.String.Double */
.highlight .se { color: #ff9057 } /* Literal.String.Escape */
.highlight .sh { color: #b0c23b } /* Literal.String.Heredoc */
.highlight .si { color: #ff9057 } /* Literal.String.Interpol */
.highlight .sx { color: #b0c23b } /* Literal.String.Other */
.highlight .sr { color: #b0c23b } /* Literal.String.Regex */
.highlight .s1 { color: #b0c23b } /* Literal.String.Single */
.highlight .ss { color: #b0c23b } /* Literal.String.Symbol */
.highlight .bp { color: #EEE } /* Name.Builtin.Pseudo */
.highlight .vc { color: #dc322f } /* Name.Variable.Class */
.highlight .vg { color: #dc322f } /* Name.Variable.Global */
.highlight .vi { color: #dc322f } /* Name.Variable.Instance */
.highlight .il { color: #ff9057 } /* Literal.Number.Integer.Long */