cssOMS/section.scss

@import "_mixins", "_vars";

.box {
    @include box-sizing(border-box);
    display: inline-block;
    margin-top: 0.3rem;
    overflow-x: auto;
    
    .inner {
        @include box-sizing(border-box);
        @include box-shadow-out(#ffffff);
        padding: 10px;
    }
}

.box-container {
    display: inline-block;
}

section.box {
    @include box-shadow-bottom(#f1f1f1);
    border: 1px solid $content-border-color;
    background: #fff;
    
    section.box.orange {
        border-top: 3px solid #FBA026;

        &.red {
            border-top: 3px solid #B8312F;
        }

        &.green {
            border-top: 3px solid #41A85F;
        }

        &.blue {
            border-top: 3px solid #2C82C9;
        }

        &.purple {
            border-top: 3px solid #553982;
        }

        &.darkblue {
            border-top: 3px solid #2969B0;
        }
    }
}

section {
    header {
        > h1 {
            margin: 10px 10px 0 10px;
            padding-bottom: 5px;
            font-size: 1.1em;
            text-shadow: 1px 1px 1px #ffffff;
            border-bottom: 1px solid #e1e1e1;
        }
    }
    
    > h2 {
        @include box-sizing(border-box);
        font-size: 1.2em;
        margin-bottom: 5px;
        text-shadow: 1px 1px 1px #ffffff;
    }
}