@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;

    &.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;
    }
}