/*
Crafting Guide - views.scss

Copyright (c) 2015 by Redwood Labs
All rights reserved.
*/

.view__footer {
    background: $color-footer;
    color: $color-footer-text;
    margin-top: 2em;

    a {
        color: $color-footer-text;
    }

    .divider {
        position: relative; height: 3.2em; width: 100%;
        clear: both;
    }

    .divider.top {
        background: $color-dirt url('/images/grass_side.png');
    }

    .left, .center, .right  {
        position: relative; width: 33%; height: 23em;
        float: left;
        padding: 2em;

        .action {
            position: absolute; bottom: 3em; left: 50%;
            @include transform(translateX(-50%));
        }
    }

    .divider.bottom {
        background: $color-bedrock url('/images/bedrock.png');
    }
}

.view__header {
    background: $color-gray-light;
    position: relative; height: 13em;
    margin-top: 3.2em;

    h1 {
        position: relative; top: -1.6em; left: -1.6em;

        p {
            position: relative; top: 0.2em;
        }
    }

    .divider {
        background: $color-brick-dark url('/images/stone_brick.png');
        position: absolute; bottom: 5em; height: 3.2em; width: 100%;
    }

    .navBar {
        position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;

        a {
            position: relative; height: 3em; width: 15em;
            background: $color-gray-faint;
            border: 0.1em solid $color-gray-medium;
            border-radius: 0 1.5em 1.5em 0;
            cursor: pointer;
            display: inline-block;
            margin-left: -1.5em;

            transition: background $animate-normal;

            &:first-child {
                border-radius: 1.5em;
                margin-left: 0;
            }

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

            &.selected {
                background: $color-active;

                p {
                    color: $color-background-panel;
                }
            }

            .dot {
                position: absolute; top: 50%; right: 1em; height: 1.5em; width: 1.5em;
                @include transform(translateY(-50%));

                background: $color-active;
                border-radius: 0.75em;
                opacity: 0;
            }

            p {
                position: absolute; top: 50%; left: 50%; width: 100%;
                @include transform(translateX(-50%) translateY(-50%));

                color: $color-active;
                font-family: $font-family-normal;
                font-size: $font-size-normal;
                font-weight: bold;
                text-align: center;
                vertical-align: middle;

                transition: color $animate-normal;
            }
        }
    }
}

.view__screen {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    display: none;
    z-index: $layer-screen;
}