/**
 * Extensive article styling
 * This is a very large article, with a ton of configuration
 *
 * ------------------------------------------------------------------------------------- */

/** wrapper */

.extensive-articles {
    position: relative;
    margin: 0 -20px 2em;
}

/** articles */
.extensive-article {
    min-height: 10px; /** To make sure they end up in the correct spot */
    padding: 20px;
}

@media screen and (min-width: 540px) {
    .extensive-articles {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .extensive-article {
        flex-grow: 1;
        box-sizing: border-box;
    }

    .extensive-article-layout-default .extensive-article {
        flex-basis: 100%;
    }

    .extensive-article-layout-two-one .extensive-article-2,
    .extensive-article-layout-one-two .extensive-article-1 {
        width: 33%;
    }
}

.extensive-article-alignment-right {
    text-align: right;
}

/**
 * Article colours
 */

/** Light blue */
.extensive-article-colour-light-blue,
.column-colour-light-blue,
.oc-tib-colour-light-blue {
    background-color: #eef5f9;
}

/** Brown grunge */
.extensive-article-colour-brown-grunge,
.column-colour-brown-grunge,
.oc-tib-colour-brown-grunge {
    background: #48423a url(bg-article-brown.png) repeat 50% 0;
}

/** Light brown grunge */
.extensive-article-colour-light-brown-grunge,
.column-colour-light-brown-grunge,
.oc-tib-colour-light-brown-grunge {
    background: #d6d2c9 url(bg-article-light-brown.png) repeat 50% 0;
}

/** Brown */
.extensive-article-colour-brown,
.column-colour-brown,
.oc-tib-colour-brown {
    background-color: #555148;
}

/** Yellow */
.extensive-article-colour-yellow,
.column-colour-yellow {
    background-color: #f3bd46;
}

/** White text */
.extensive-article-colour-brown,
.extensive-article-colour-brown h2,
.extensive-article-colour-brown h3,
.extensive-article-colour-brown h4,
.extensive-article-colour-brown h5,
.extensive-article-colour-brown h6,
.extensive-article-colour-brown-grunge,
.extensive-article-colour-brown-grunge h2,
.extensive-article-colour-brown-grunge h3,
.extensive-article-colour-brown-grunge h4,
.extensive-article-colour-brown-grunge h5,
.extensive-article-colour-brown-grunge h6,
.extensive-article-colour-yellow,
.extensive-article-colour-yellow h2,
.extensive-article-colour-yellow h3,
.extensive-article-colour-yellow h4,
.extensive-article-colour-yellow h5,
.extensive-article-colour-yellow h6,
.oc-tib-colour-brown-grunge,
.oc-tib-colour-brown {
    color: #fff;
}

/** Brown headings */
.extensive-article-colour-light-brown-grunge h3,
.extensive-article-colour-light-brown-grunge h4,
.extensive-article-colour-light-brown-grunge h5,
.extensive-article-colour-light-brown-grunge h6 {
    color: #555148;
}

/** yellow link */

.extensive-article-colour-brown a,
.extensive-article-colour-brown-grunge a {
    color: #f3bd46;
}

.extensive-article-colour-brown a:hover,
.extensive-article-colour-brown-grunge a:hover {
    color: #c6285f;
}

/** yellow buttons */
.extensive-article-colour-brown a.button,
.extensive-article-colour-brown-grunge a.button {
    background: #f3bd46;
    background-image: linear-gradient(bottom, #f3bd46 50%, #f1b553 52%, #fdc364 19%);
    background-image: -o-linear-gradient(bottom, #f3bd46 50%, #f1b553 52%, #fdc364 19%);
    background-image: -moz-linear-gradient(bottom, #f3bd46 50%, #f1b553 52%, #fdc364 19%);
    background-image: -webkit-linear-gradient(bottom, #f3bd46 50%, #f1b553 52%, #fdc364 19%);
    background-image: -ms-linear-gradient(bottom, #f3bd46 50%, #f1b553 52%, #fdc364 19%);
}