// Color Scheme:
// http://colorschemedesigner.com/#1j11TiW8EWTs.
//
$primary-1: #453C1C;
$primary-2: #252219;
$primary-3: #181301;
$primary-4: #988952;
$primary-5: #988D62;

$bg: $primary-2;
$fg: $primary-5;

$selected-menu-bg: $primary-4;
$selected-menu-fg: $primary-2;
$hover-menu-bg: $selected-menu-bg;
$hover-menu-fg: $selected-menu-fg;
$menu-bg: $primary-1;
$menu-fg: $primary-5;

$header-bg: black;
$body-bg: black;

$spacing: 10px;
$sidebar-width: 200px;


body {
    background-color: $body-bg;
    color: $fg;
    font: {
        family: Helvetica, "Sans Seriff";
        size: 10pt;
    }
}

h1, h2, h3 {
    color: $fg;
}

#header {
    #logo {
        background-color: $header-bg;
        border-bottom: 1px solid $fg;
    }

    #menu {
        position: relative;
        text-align: center;
        top: -2em;

        ul {
            padding: 0;

            li {
                list-style: none;
                display: inline-block;
                background-color: $menu-bg;

                padding: {
                    left: 1em;
                    right: 1em;
                    top: 0.3em;
                    bottom: 0.3em;
                }

                &.selected {
                    background-color: $selected-menu-bg;
                    font-weight: 600;

                    a {
                        color: $selected-menu-fg;
                    }
                }

                &:hover {
                    background-color: $hover-menu-bg;

                    a {
                        color: $hover-menu-fg;
                    }
                }

                a {
                    text-decoration: none;
                    color: $menu-fg;
                }
            }
        }
    }
}

#page_container {
    background: $bg;

    margin: {
        left: 5em;
        right: 5em;
    }

    #page {
        position: relative;

        #left_sidebar, #right_sidebar {
            position: absolute;
            width: 200px;
            top: 0;
            border: 1px groove $fg;
            padding: 5px;
            height: 100%;
        }

        #left_sidebar {
            left: $spacing;
        }

        #right_sidebar {
            right: $spacing;
        }

        #body_content {
            margin: {
                left: $sidebar-width + 3 * $spacing;
                right: $sidebar-width + 3 * $spacing;
            }
            padding: {
                left: 0.5em;
                right: 0.5em;
            }
        }
    }
}

#left_img {
    float: left;
}

#right_img {
    float: right;
}