CouchPotatoServer/couchpotato/static/style/main.scss

@import "fonts";
@import "mixins";

body, html {
	font-size: 14px;
	line-height: 1.5;
	font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	height:  100%;
	margin: 0;
	padding: 0;
	background: $menu_color;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

body {
    @include flexbox();
    flex-flow: row nowrap;
}

a {
    text-decoration: none;
}

.header {
    width: 130px;

	font-weight: 200;

    a {
        color: #FFF;
        letter-spacing: 1px;
    }

    .navigation {

        .logo {
            background: $couch_color;
            display: block;
            text-align: center;

            font-family: Lobster, serif;
            color: #FFF;
            font-size: 38px;
            line-height: $header-height;
            height: $header-height;

            span:nth-child(odd){
                display: block;
            }
            span:nth-child(even){
                display: none;

            }
        }

        ul {
            padding: 0;
            margin: 0;

            li a {
                padding: $padding/2 $padding;
                display: block;
            }
        }

    }
}

.content {
    @include flex(1 auto);

    background: $background_color;
    border-radius: 3px 0 0 3px;
    overflow: hidden;

    h1, h2, h3 {
        padding: 0;
        margin: 0;
    }

    .pages {
        height: 100%;
        width: 100%;
        overflow: auto;
        overflow-x: hidden;
    }

    .footer {
        position: fixed;
        bottom: 0;
        height: $padding;
        width: 100%;
    }
}

.page {
    position: relative;
    display: none;
    padding: $padding 0;

    .page {
        margin-top: $header-height - $padding;
        z-index: 10;
        padding: 0;
    }

    &.active {
        display: block;
    }

    .navigation {
        @include flexbox();
        position: fixed;
        top: 0;
        height: $header-height;
        left: 130px;
        right: 0;
        background: $background_color;
        z-index: 100;

        ul {
            @include flex(1 auto);
            list-style: none;

            li {
                display: inline-block;

                a {
                    font-size: 24px;
                    line-height: $header-height;
                    padding: $padding;
                    color: rgba(0,0,0,.5);
                    font-weight: 300;

                    &.active {
                        color: rgba(0,0,0,1);
                    }
                }
            }
        }

    }

    .alph_nav {
        display: none; // Hide for now
    }

}