styles

// ------------------------------ imports
@import "reset";
@import "media-screen";
@import "global-variables";

// ------------------------------ images paths
$path-to-root-dir: "../";
$main-bg-image: "images/main-bg-image.jpg"; // from root dir; src:http://www.teachthevote.org/blog-content/uploads/2015/11/ThinkstockPhotos-111939554.jpg
$main-bg-image-alt-color: #fefefe;

// ------------------------------ colors
$color-links: #0db7b7;
$color-links-hover: $main-bg-image-alt-color;

// ------------------------------ mixins
@mixin background-size($bg-size) {
    -webkit-background-size: $bg-size;
    -moz-background-size: $bg-size;
    -o-background-size: $bg-size;
    background-size: $bg-size;
}

// ------------------------------ page structure (#page-wrap)
header {
    @extend .page-wrapper;

    h1 {
        border: 2px solid #000;
        text-align: center;
        height: $main-elements-height;
        line-height: $main-elements-height;
        font-size: round($main-elements-height / 2);

        span {
            color: #f88;
        }
    }

    nav {
        border: 2px solid #000;
        border-top: 0;
        overflow: hidden;

        ul {
            $li-delimiter: 1px solid #000;
            list-style-type: none;
            overflow: hidden;

            li {
                //overflow: hidden;
                float: left;

                & > a {
                    border-right: $li-delimiter;
                }

                &:last-child > a {
                    float: right;
                    border-right: none;
                }

                a {
                    height: round($main-elements-height / 1.5);
                    line-height: round($main-elements-height / 1.5);
                    width: 90%;
                    padding: 0 5%;
                    display: block;
                    float: left;
                    text-align: center;
                    font-size: round($main-elements-height / 2.5);
                }
            }

            .dropdown {
                &:hover .dropdown-content {
                    display: block;
                    z-index: 1;
                    width: inherit;
                    margin-top: round($main-elements-height / 1.5);
                }

                .dropdown-content {
                    display: none;
                    position: absolute;
                    background-color: $color-links-hover;
                    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

                    a {
                        text-align: left;
                        font-size: round($main-elements-height / 3);
                    }
                }
            }
        }
    }
}

.content {
    padding: 5px;
}

.sidebar {

}

footer {
    @extend .page-wrapper;

    details {
        padding: 5px;

        summary {
            outline: none;
        }
    }
}

// ------------------------------ partial cases
body {
    background: $main-bg-image-alt-color url($path-to-root-dir + $main-bg-image) no-repeat center center fixed;
    @include background-size(cover); // !!! after background-property !!!
}

.page-wrapper {
    // sizes and position
    @extend .col-10;
    margin: 0 auto;
    // styles and color design
    background: rgba(100%, 100%, 100%, 0.95);
}

a {
    color: $color-links;
    text-decoration: none;

    &:hover {
        color: $color-links-hover;
        background: $color-links;
    }
}