/* RESET STYLES */


*
{
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

html, body
{
    background-color: #fff;
    font-family:     OpenSans Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    height:          100%;
    margin:          0;
    padding:         0;
    width:           100%;
}

a, a:hover
{
    color:           #0645ad;
    text-decoration: underline dotted;
}

a:hover
{
    text-decoration: underline;
}

blockquote
{
    background-color: #f8f8f8;
    border-left:      5px solid #e9e9e9;
    font-size:        .85em;
    margin:           1em 0;
    padding:          .5em 1em;
}

blockquote cite
{
    color:      #999;
    display:    block;
    font-size:  .8em;
    margin-top: 1em;
}

blockquote cite:before
{
    content: "\2014 \2009";
}

img
{
    max-width: 100%;
}

pre
{
    font-family: Inconsolata, Hack, DejaVu Sans Mono, Courier New, monospace, sans-serif;
    white-space: pre-wrap;
    word-wrap:   break-word;
    text-align:  justify;
}

/* Inline code */
code
{
    background-color: #f5f5f5;
    border-radius:    3px;
    display:          inline-block;
    font-family:      Inconsolata, Hack, DejaVu Sans Mono, Courier New, monospace, sans-serif;
    font-size:        85%;
    line-height:      140%;
    margin:           0 .2em;
    padding:          .2em;
}

ul, ol
{
    margin: auto;
}

table
{
    border-collapse: collapse;
    margin:         2rem 0;
    max-width:      100%;
    text-align:     left;
}

    table > thead > th
    {
            color:       #039;
            font-weight: bold;
            padding:    1rem;
    }
    
    table > tr:nth-child(even)
    {
        background: #F7F9FF;
    }
    
    table > td
    {
        border-top:     1px solid #e8edff;
        padding:        .5rem 1rem;
        vertical-align: top;
    }


/* CUSTOM STYLES */

    
body
{
    display:               grid;
    grid-column-gap:       0;
    grid-template-columns: 25% auto;
}

    .navigation_sidebar
    {
        background-color: #f9f9f9;
        border-right: 1px solid #ccc;
        padding: 0 10%;
        position: relative;
    }
    
    .navigation_page
    {
        padding: 1rem;
        text-align: right;
    }
    
    .navigation_page > ul
    {
        margin: 0;
        padding: 0;
    }
        
        .navigation_page > ul > li
        {
            display: inline;
        }
        
        .navigation_page > ul > li + li:before {
            content: " » ";
        }
    
    .sidebar
    {
        background-color: #f9f9f9;
        border-right: 1px solid #ccc;
        padding: 1rem 10%;
        position: relative;
    }
        
        /* Highlight current page */
        .sidebar a.current
        {
            font-weight: bold;
            text-decoration: underline;
        }
        
        .sidebar a
        {
            color: #000;
            text-decoration: none;
        }
        
        .sidebar a:hover
        {
            text-decoration: underline dotted;
        }

        .sidebar > .toc ul
        {
            list-style-type: none;
            margin:          0;
            padding:         0;
        }
        
        .sidebar > .toc >  ul
        {
            border-bottom:  1px solid #ccc;
            margin-bottom:  2rem;
            padding-bottom: 2rem;
        }
            
            .sidebar > .toc >  ul ul
            {
                margin-bottom: .2rem;
            }
            
                .sidebar > .toc > ul ul > li
                {
                    margin-left: 1rem;
                }
                
                .sidebar > .toc >  ul ul > li:before
                {
                    content: "· ";
                    font-weight: bold;
                }
        
        .sidebar > .project_name
        {
            font-size: 1.5rem;
        }
        
        .sidebar > .toc
        {
            margin-top: 2rem;
        }
    
    .page
    {
        padding: 0 5% 10rem 5%;
    }
    
        .page *:hover > a.headerlink
        {
            display: inline-block;
        }
        
        .page a.headerlink
        {
            color:           #ddd;
            display:         none;
            padding:         0 4px;
            text-decoration: none;
        }
        
        .page a.headerlink:hover
        {
            color: #000;
        }
        
        .page h1
        {
            margin-top: 0;
        }
        
        .page .section > h2
        {
            border-bottom: 1px solid #ccc;
            margin-top: 3rem;
        }
        
/* Hide sidebar on small screens */
@media only screen and (max-width: 800px)
{
    body
    {
        grid-template-columns: auto;
    }
    
    .navigation_sidebar, .sidebar
    {
        display: none;
    }
}