/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2013 Adobe System Incorporated
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:

 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
 #header {
    display: none;
    position: absolute;
    width: 100%;
    height: 55px;
    background-color: #312b34;

    z-index: 70;
    @include cache;

    .path {
        width: 2000px;
    }

    .home {
        position: relative;
        float: left;
        height: 55px;
        padding-left: 20px;
        background-color: #37303a;

        cursor: pointer;
        z-index: 5;

        &:before {
            float: left;
            content : '';
            width: 32px;
            height: 32px;
            margin-top: 11px;
            @include ui-asset(0, 70);
        }

        @media all and (max-width : 603px) {
            padding-left: 10px;
        }
    }

    .tab {
        position: relative;
        float: left;
        height: 55px;
        padding-left: 35px;
        background-color: #37303a;

        font-size: 20px;
        font-style: italic;
        line-height: 55px;
        color: #7e6f85;

        cursor: pointer;

        @include cache;
        @include transformTransition(.3s ease-in-out, opacity .3s linear, background-color .3s linear);

        @media all and (max-width : 603px) {
            font-size: 14px;
        }

        html.is-first-route & {
            @include transition(none);
        }

        &:after {
            position: absolute;
            top: 0;
            right: -23px;
            content : '';
            width: 23px;
            height: 55px;

            @include ui-asset(40, 70);
            @include transition(opacity .3s linear);
            @include cache;

            html.is-first-route & {
                @include transition(none);
            }
        }


        &.tab-0 {
            padding-left: 14px;
            z-index: 4;
        }

        &.tab-1 {
            z-index: 3;
        }

        &.tab-2 {
            z-index: 2;
        }

        &.tab-3 {
            z-index: 1;
        }

        &.selected:not(:nth-child(2)) {
            background-color: transparent;
            background-color: rgba(126,111,133,0);
            color: #fff;

            &:after {
                opacity: 0;
            }
        }
    }

    .about {
        position: absolute;
        right: 0;
        width: 62px;
        height: 55px;
        border-left: 1px solid #1c181f;
        background-color: #252026;
        box-shadow: -1px 0 0 0 #473c4e;
        z-index: 10;

        cursor: pointer;

        @include cache;
        @include ui-asset(188, 100);

        &.selected {
            background-position: -115px -190px;
            background-color: #d14443;
        }
    }
}
