@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: $content-box-border solid $content-box-border-color;
    background: $content-box-background-color;

    @each $tuple in
        'orange' #FBA026, 'red' #B8312F, 'green' #41A85F,
        'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
        &.#{nth($tuple, 1)} {
            background: #{nth($tuple, 2)};
            border-top: 3px solid #{nth($tuple, 2)};
        }
    }
}

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