// Basic layout styles
html {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
body {
    background: #fff; // fallback
    color: #444;
    font: 16px/21px 'DroidSans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased; // Fix for webkit renderin
    height: 100%;
    min-height: 100%;
    overflow-x: hidden; // open-projects-nav
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    .projects-nav {
        @include transform(translate3d(-300px, 0, 0));
        @include transition (transform 1s ease);
    }
    .master {
        @include transition (transform 1s ease);
        &.ng-animate {
            @include transition();
        }
    }
    .menu {
        @include transform(translate3d(0, 0, 0));
        @include transition (transform 1s ease);
    }
    &.open-projects-nav {
        .projects-nav {
            @include transform(translate3d(0, 0, 0));
            @include transition (transform 1s ease);
        }
        .master {
            @include transform(translate3d(300px, 0, 0));
            @include transition (transform 1s ease);
            &.ng-animate {
                @include transition();
            }
        }
        .menu {
            @include transform(translate3d(300px, 0, 0));
            @include transition (transform 1s ease);
        }
        .projects-nav-overlay {
            @include transform(translate3d(300px, 0, 0));
            @include transition (all 1s ease);
            opacity: .9;
        }
    }
    &.loading-project {
        overflow: hidden;
        .projects-nav-overlay {
            @include transition (opacity 1s ease);
            opacity: 1;
            overflow: hidden;
            div {
                @include transition (opacity 1s ease);
                opacity: 1;
            }
        }
    }
}

.master {
    height: 100%;
    min-height: 100%;
    position: relative;
}

.wrapper {
    @include table-flex();
    min-height: 100%;
    padding-left: 90px;
}

.menu-secondary {
    @include table-flex-child(1, 260px, 0, 260px);
    background: $whitish;
    padding: 2rem 1rem;
}

.menu-tertiary {
    @include table-flex-child(1, 210px, 0, 210px);
    background-color: $dark-grayish-lime-green;
    padding: 2em 1em;
}

.extrabar {
    background: $whitish;
}

.main {
    @include table-flex-child(8, 600px, 0, 600px);
    padding: 2rem;
}

.icon {
    @extend %taiga;
}

.hidden {
    display: none;
}