@import "_mixins", "_vars";

.box.orange {
    border-top: 3px solid #FBA026;
}

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

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

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

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

.box {
    @include box-sizing(border-box);
    display: inline-block;
    margin-top: 0.3rem;
}

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

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

.box .inner {
    @include box-sizing(border-box);
    @include box-shadow-out(#ffffff);
    padding: 10px;
}

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

section > h2 {
    @include box-sizing(border-box);
    font-size: 1.2em;
    margin-bottom: 5px;
    text-shadow: 1px 1px 1px #ffffff;
}