/**
 ******************************************************************************
 ** Globals
 ******************************************************************************
 **/
* {
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
    font-family: sans;
    font-size: .9em;
}

a {
    text-decoration: none;
    color: #449;
}

body {
    margin: 0;
    padding: 0;
}

.inactive {
    display: none;
}

/**
 ******************************************************************************
 ** Header
 ******************************************************************************
 **/
header {
    background: #CCC;
    border-bottom: .3em solid #AAA;

    > p {
        margin: 0;
        padding: .5em;
        background: #AAA;
        border-bottom: .2em solid #888;
    }

    > menu {
        margin: 0;
        padding: 3em 1em 0;
        text-align: right;

        > ol {
            margin: 0;
            padding: 0;

            > li {
                margin: 0;
                padding: 0;
                margin-left: .5em;
                display: inline-block;
            }
        }

        li {
            list-style: none;
        }

        a {
            display: block;
            padding: .25em;
        }

        a.active,
        a:hover {
            background: #BBB;
        }
    }
}

/**
 ******************************************************************************
 ** Main Content
 ******************************************************************************
 **/
article {
    display: flex;
}

article > menu {
    flex: 0 1 auto;
    background: #EEE;
    width: 15em;
    margin: 0;
    padding: 1.4em .5em .5em;
    border-right: .3em solid #AAA;

    ol {
        margin: 0;
        padding: 0;

        li {
            margin: 0;
            padding: 0;

            strong {
                display: block;
                padding-left: .2em;
                border-bottom: .2em solid #AAA;
                margin-bottom: .2em;
            }

            a {
                display: block;
                padding: .2em;
            }

            a.active,
            a:hover {
                background: #DDD;
            }
        }
    }

    li {
        list-style: none;
    }
}

article > main {
    flex: 1 0 auto;

    h1 {
        margin: 1em .3em  0;
        border-bottom: .2em solid #AAA;
    }

    > section {
        margin-bottom: 1em;
    }
}

/**
 ******************************************************************************
 ** Footer
 ******************************************************************************
 **/
footer {
    border-top: .3em #AAA solid;
    border-bottom: .2em #AAA solid;

    > p {
        margin: 0;
        padding: .5em;
        background: #CCC;
        text-align: right;
    }
}