// Always show vertical scroll bar in browser. It fixes the issue with jumping buttons.
html { overflow-y: scroll; }

//sticky footer, see http://twitter.github.com/bootstrap/
html, body {
    height: 100%;
}

*, *:before, *:after {
    @include box-sizing(border-box);
}
input {
    @include box-sizing(content-box);
}

// Wrapper for page content to push down footer
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    // Negative indent footer by its height
    margin: 0 auto -102px;
    @include breakpoint(B) {
        margin-bottom: -82px;
    }
    @include breakpoint(C) {
        margin-bottom: -56px;
    }
}

// Set the fixed height of the footer here
#push, #footer {
    height: 102px;
    @include breakpoint(B) {
        height: 82px;
    }
    @include breakpoint(C) {
        height: 56px;
    }
}

#wrap > .app-view-container {
    max-width: 980px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 55px;

    @include breakpoint(B) {
        padding-left: 20px;
        padding-right: 20px;
    }
    @include clearfix;
}

#footer {
    // This is a cargo-cult.
    // Previous version of footer used .container from Bootstrap,
    // which included clearfix, and somehow vertically aligned <p> to the middle.
    @include clearfix;

    font-size: $small-font-size;
    background-color: $mat;
    padding-left: 10px;
    padding-right: 10px;

    .footer-separator {
        visibility: hidden;
        display: block;
        height: 0px;
    }

    @include breakpoint(B) {
        .footer-separator-first {
            display: inline;
            visibility: visible;
        }
    }
    @include breakpoint(C) {
        .footer-separator {
            display: inline;
            visibility: visible;
        }
    }

    .credit {
        margin: 10px 0;
        text-align: center;
    }
    .flattr-wrapper {
        position: relative;
        top: 10px;
        @include breakpoint(C) {
            top: 6px;
        }
    }
    .mixpanel-badge img {
        margin-left: 8px;
        margin-top: 6px;
        @include breakpoint(C) {
            margin-top: 0px;
        }
    }
}
