/*
 * 
 * Based on Hyde:
 * Designed, built, and released under MIT license by @mdo. (Learn more at
 * https://github.com/poole/hyde.)
 *
 * Modified by @keyofnight. Use my modifications as you'd like, but
 * they're not extensive.
 *
 */


/*
 * Contents
 *
 * Global resets
 * Sidebar
 * Container
 * Reverse layout
 * Themes
 *
 */


/*
 * Global resets:
 * Update the foundational and global aspects of the page.
 */

@media (min-width: 48em) {
    html {
        font-size: 16px;
    }
}
@media (min-width: 58em) {
    html {
        font-size: 18px;
    }
}


/*
 * Sidebar
 *
 * Flexible banner for housing site name, intro, and "footer" content. 
 * Starts out above content in mobile and later moves to the side with 
 * wider viewports.
 *
 */

.sidebar {
    text-align: center;
    padding-top: 1.5rem;
    color: #000;
    background-color: #fff;
}

@media (min-width: 48em) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 14rem;
        text-align: left;
    }
}

/* Sidebar links */
.sidebar a {
    color: #7187B9;
}

/* Sidebar images*/

.sidebar img.badge {
    width: 16%;
    height: auto;
    display: inline;
}

@media (max-width: 48em) {
    .sidebar img.badge {
        width: 5%;
        height: auto;
        display: inline;
    }
}

div.rollover { 
    display:inline; 
    margin: 0;
    padding: 0;
}

div.rollover:after { content: "\00A0"; }

div.rollover img.rollover { display: none; }

div.rollover a:hover { text-decoration: none; border: none; }

div.rollover:hover img:not(.rollover) { display: none; }

div.rollover:hover img.rollover { display: inline; }

/* About section (now defunct) */

.sidebar-about h1 {
    color: #000;
    margin-top: 0;
    font-family: "LatoWebHeavy", sans-serif;
    font-weight: 100;
    font-size: 2rem;
}

.sidebar-about h1 > a {
    color: #000;
}

.sidebar-about h1 > a:hover {
    border: none;
    text-decoration: none;
}

.sidebar-about p {
    color: #000;
    font-family: "LatoWeb", sans-serif;
    font-size: .9rem;
}

/*  Sidebar navigation */

.sidebar-nav {
    margin-bottom: 1rem;
}
.sidebar-nav-item {
    display: block;
    line-height: 1.5;
    font-family: "LatoWeb", sans-serif;
    font-size: 1rem;
}
.sidebar-nav-item a {
    color: #7187B9;
}

.sidebar-nav-item a.active {
    border-bottom: 1px dotted;
}

.sidebar-nav-item a:hover,
.sidebar-nav-item a:focus {
    text-decoration: none;
    border-bottom: 1px solid;
}

div.footer {
    font-size: .8rem
}

/* Sticky sidebar
 *
 * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 * contents to the bottom of the sidebar in tablets and up.
 *
 */

@media (min-width: 48em) {
    .sidebar-sticky {
        position: absolute;
        right:  1rem;
        top: 2rem;
        left: 1rem;
    }
}

/* Container
 *
 * Align the contents of the site above the proper threshold with some 
 * margin-fu with a 25%-wide `.sidebar`.
 *
 */

.content {
    padding-top:    2rem;
    padding-bottom: 2rem;
}

@media (min-width: 48em) {
    .content {
        max-width: 38rem;
        margin-left: 14rem;
        margin-right: 2rem;
    }
}

@media (min-width: 64em) {
    .content {
        margin-left: 14rem;
        margin-right: 3rem;
    }
}

/*
 * Reverse layout
 *
 * Flip the orientation of the page by placing the `.sidebar` on the right.
 */

@media (min-width: 48em) {
    .layout-reverse .sidebar {
        left: auto;
        right: 0;
    }
    .layout-reverse .content {
        margin-left: 2rem;
        margin-right: 20rem;
    }
}

@media (min-width: 64em) {
    .layout-reverse .content {
        margin-left: 4rem;
        margin-right: 22rem;
    }
}
