// exception from the scope rule to change global styles that won't have any influence to any other elements
body {
    background-color: @bodyBackgroundColor;
}
// use to change behavior when in administration; i.e. reposition background image
body.manage {}

// all styles and theme elements should go under '.theme' scope to safely separate from administration elements
.theme {
    // restoring specificity for global classes
    .caption { .caption; }
    .signature { .signature; }
    .note { .note; }
    .button { .button; }

    background-color: @ipBackgroundColor;
    color: @ipTextColor;
    font-family: @ipFontFamily;
    font-size: @ipFontSize;
    margin: 0 auto; // centering all content
    max-width: (1200px - @columnPadding*2);
    padding: 0 @columnPadding;
    position: relative; // all positioning should be relative to the '.theme' as it may appear in different environment

    // Links should look the same everywhere
    a {
        color: @ipLinkColor;
        text-decoration: none;
    }

    // Common styles
    .left {
        float: left;
    }
    .right {
        float: right;
    }

    // Structure
    & > header {
        border-bottom: 1px solid @ipBorderColorActive;
        margin-bottom: @ipSpaceGlobal;
        padding-bottom: @ipSpaceGlobal;
    }
    & > footer {
        border-top: 1px solid @ipBorderColorActive;
        margin-top: @ipSpaceGlobal;
        padding: (@ipSpaceGlobal / 2) 0;
    }
    .homerow {
        clear: both;
        border-top: 1px solid @ipBorderColor;
        padding-top: @ipSpaceGlobal;
    }
    .side {
        clear: left; // to keep columns in place

        // changing behavior on mobile and tablet devices
        @media screen and (max-width: (@screenLarge - 1px)) {
            .main + & {
                border-top: 1px solid @ipBorderColor;
                padding-top: @ipSpaceGlobal;
            }
        }
    }
    .sidenav {
        margin-bottom: 0;

        nav > ul {
            margin-bottom: (@ipSpaceGlobal * 2);
        }
    }

    // Header
    .logo {
        margin-top: @ipSpaceGlobal;
        display: block;
        float: left;

        a {
            color: @ipTextColor;
            font-family: @ipFontFamily;
            font-size: 24px;
            font-weight: bold;
        }
    }

    // Homepage
    .homeHeadline {
        font-family: @ipFontFamily;
        font-size: 60px;
        font-weight: bold;
        margin: @ipSpaceGlobal 0;
        text-align: center;

        // changing behavior on mobile devices
        @media screen and (max-width: (@screenMedium - 1px)) {
            font-size: 40px;
        }
    }
    .homeDescription {
        font-family: @ipFontFamilyAlternative;
        font-size: @ipFontSizeBig;
        margin-bottom: @ipSpaceGlobal;
    }
    .homeDescription p {
        margin-bottom: @ipSpaceGlobal;

        &:last-child {
            margin-bottom: 0;
        }
    }

    // Footer
    & > footer p {
        margin: 0;
    }
    & > footer a:hover {
        text-decoration: underline;
    }

}
