/* ==========================================================================
   09_GENERALS: ARTICLE
   --------------------------------------------------------------------------
   * README

   * ARTICLE
   * ARTICLE HEADER
   * ARTICLE CONTENT
   * ARTICLE FOOTER
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Article default styles.
 * That means they apply to the HTML component you most likely will use to
 * manage the actual content inside a .section__content element if needed, and
 * therefore, they apply only to the pages that displays this component.

 * If you need to deal with an exception to these Article default styles, you
 * should manage it by adding a .article--modifier class to the .article element
 * and develop the given exception nested to this .article--modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with styles for a new type of Article component or a new
 * sub-element for an existing one, you should develop them in this stylesheet,
 * under a new component subtitle or under the correspondent one accordingly,
 * separating them in Structure, Behaviour or Appearance styles as appropriate.
 */

/* ARTICLE
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To manage second-level information in any page, as many times as needed. The
   most complex part is the .article__header element, as it contemplates several
   possible sub-elements (explicited in the class names) - of course, only keep
   the ones that suit your needs in each case.
   --------------------------------------------------------------------------

    <article class="article">
        <div class="article__header">
            <div class="article__header__image">
                <img src="X">
            </div>

            <div class="article__header__text">
                <h3 class="article__header__text__title">
                    <span class="article__header__text__title__icon"></span> X
                </h3>

                <div class="article__header__text__subtitle">X</div>
            </div>

            <div class="article__header__actions">
                <div class="article__header__actions__links">
                    <a class="link" href="X">X</a>

                    <a class="link" href="X">X</a>
                </div>

                <a class="button button--default" href="X">X</a>
            </div>
        </div>

        <div class="article__content">X</div>

        <div class="article__footer">X</div>
    </article>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.article {
    margin: 0 auto;
    width: 100%;
}

* + .article {
    margin-top: 40px;
}

/* ARTICLE HEADER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__header {
    margin-bottom: 20px;
    width: 100%;
}

.article__header__image {
    width: 40px;
    padding-right: 20px;
}

.article__header__image img {
    display: block;
    margin: auto;
    width: 100%;
}

.article__header__text__title__icon {
    margin-right: 8px;
}

*+.article__header__text__subtitle {
    margin-top: 6px;
}

*+.article__header__text__paragraph {
    margin-top: 6px;
}

.article__header__actions>*+* {
    margin-left: 10px;
}

.article__header__actions__links {
    display: inline-block;
    padding: 12px 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */

/*
 * 1. To center vertically the content.
 */
.article__header {
    display: table; /* 1 */
}

.article__header>* {
    display: table-cell; /* 1 */
    vertical-align: middle; /* 1 */
}

.article__header__text__title__icon {
    vertical-align: text-top;
}

.article__header__actions {
    text-align: right;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.article__header__image img {
    border-radius: 100%;
}

.article__header__text__title {
    font-weight: 400;
}

.article__header__text__title--1 {
    font-size: 16px; /* Used in View More (in Aside) or Popup article titles */
}

.article__header__text__title--2 {
    font-size: 18px; /* Used in Dashlets (Dashboard) article titles */
    color: #004750;
}

.article__header__text__title--3 {
    font-size: 20px; /* Used in View More (in Content), Report/Stats (Dashboard) and Submit Job and Task article titles - the wizard Separator styles emules this */
}

.article__header__text__title--4 {
    font-size: 28px; /* Used everywhere else */
    color: #004750;
}

.article__header__text__subtitle {
    font-size: 13px;
    color: #999999;
}

/* ARTICLE CONTENT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__content+.article__content {
    margin-top: 10px;
}

/* ARTICLE FOOTER
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.article__footer {
    margin-top: 20px;
}