//
// Contents styles
//
#content {
    padding-left: 0;
    padding-right: 0;
    font-size: 1.5rem;
}
#content .article {
    min-height: @article-min-height;
}
// Navbar
#content .navbar {
    background: darken(#F8F8F8, 1%);
    border-bottom: 1px solid darken(#FFF, 10%);
    min-height: @navbar-height+1;
    .btn {
        margin-left: 4px;
    }
}
// Main wrapper
#content .main {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
// Header
#content header {
    .page-header {
        margin-top: 8px;
    }
    // Favorite button
    .favorite {
        font-size: inherit;
        padding: 0;
        cursor: pointer;
        color: darken(#FFF, 60%);
    }
    .notebooktitle {
        float: right;
    }
}
// Article
#content .article {
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: #FFF;
    padding: 15px;
    img {
        .img-responsive();
    }
}

// Brand layer
#brand-layer {
    background-color: darken(@brand-success, 8%);
    background: -moz-linear-gradient(center top , darken(@brand-success, 8%) 0%, darken(@brand-success, 15%) 100%) repeat scroll 0% 0% transparent;
    color: #FFF;
    height: 100%;
    display: none;
}
#brand-layer h1 {
    text-align: center;
    text-shadow: 4px 3px 0px darken(@brand-success, 8%), 9px 8px 0px rgba(0, 0, 0, 0.15);
    font-size: 62px;
    margin-bottom: 25px;
}
.form-wrapper {
    max-width: 330px;
    padding: 10% 0;
    padding-top: 10%;
    margin: 0 auto;
    .form-control {
        margin-bottom: 10px;
    }
    .btn-success {
        border-color: darken(@brand-success, 20%);
    }
    .form-password {
        position: relative;
    }
    .icon {
        position: absolute;
        top: 10px;
        left: 6px;
        font-size: 20px;
        color: #CCC;
    }
    input {
        padding-left: 30px;
    }
}

//
// Show spining icon while user is waiting
//
.loading {
    &:extend(#brand-layer);
    z-index: @zindex-modal;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    text-align: center;
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
    &:after {
        margin-top: 20%;
        font-family: "fontello";
        &:extend(#brand-layer h1);
        &:extend(.icon-arrows:before);
        &:extend(.animate-spin);
    }
}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.9; }
    to { opacity: 1.0; }
}
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.9; }
    to { opacity: 1.0; }
}