/* ==========================================================================
   10_INFO ORGANIZATION
   --------------------------------------------------------------------------
   * README

   * LISTS
   * LISTS MODIFIERS

   * TABLES: GENERAL
   * TABLES: DEFAULT
   * TABLES: ACCORDION
   ========================================================================== */

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

/*!
 * Styles on this stylesheet are the Info Organization default styles.
 * That means they apply to different HTML components you can use to organize
 * iterable sets of text information, and therefore, they apply only to the
 * pages that display one or more of these components.

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

 * If you need to deal with styles for a new type of Info Organization 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.
 */

/* LISTS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To manage sets of iterable information in any page, as many times as needed.
   This complex example contemplates several possible sub-elements (explicited
   in the class names) - of course, only keep the ones that suit your needs in
   each case.
   --------------------------------------------------------------------------

    <ul class="list">
        <li class="list__item">
            <div class="list__item__image">
                <img src="X">
            </div>

            <div class="list__item__count">
                <span class="list__item__count__value">X</span>
            </div>

            <div class="list__item__text">
                <div class="list__item__text__title">X</div>

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

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

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

        <li class="list__item">X</li>

        <li class="list__item">X</li>
    </ul>

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

/*
 * There are not any default styles for lists, as the basic reset is covered in
 * reset.css, and particular styles for each List component implementation are
 * covered using .list--modifier classes in stylesheet #16
 */

/* LISTS MODIFIERS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   .list--disc > To display list items with a disc marker
   --------------------------------------------------------------------------
   .X--rich-text ul > To display list items with a disc marker
   --------------------------------------------------------------------------
   .list--numeric > To display list items with a numeric marker
   --------------------------------------------------------------------------
   .X--rich-text ol > To display list items with a numeric marker
   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.list--disc,
.list--numeric,
[class$="--rich-text"] ul,
[class$="--rich-text"] ol {
    margin-bottom: 10px;
    padding-left: 20px;
}

/* Appearance
   -------------------------------------------------------------------------- */
.list--disc,
[class$="--rich-text"] ul {
    list-style-type: disc;
}

.list--numeric,
[class$="--rich-text"] ol {
    list-style: decimal;
}

/* TABLES: GENERAL
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.table,
.tableField {
    width: 100%;
    max-width: 100%;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.table,
.tableField {
    border-collapse: separate;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
}

.table thead th,
.tableField thead th,
.table tbody th,
.tableField tbody th {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Appearance
   -------------------------------------------------------------------------- */
.table,
.tableField {
    background-color: #FFFFFF;
}

.table tbody td,
.tableField tbody td,
.table tbody th,
.tableField tbody th {
    line-height: 150%;
}

.table thead th,
.tableField thead th,
.table tbody th,
.tableField tbody th {
    text-align: inherit;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .table,
    .tableField,
    .table tbody,
    .tableField tbody,
    .table tbody tr,
    .tableField tbody tr,
    .table tbody td,
    .tableField tbody td,
    .table tbody th,
    .tableField tbody th {
        width: 100%;
        max-width: 100%;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .table thead,
    .tableField thead,
    .table thead tr,
    .tableField thead tr,
    .table thead th,
    .tableField thead th,
    .table tbody td:empty,
    .tableField tbody td:empty {
        display: none;
    }

    .table,
    .tableField,
    .table tbody,
    .tableField tbody,
    .table tbody tr,
    .tableField tbody tr,
    .table tbody td,
    .tableField tbody td,
    .table tbody th,
    .tableField tbody th {
        display: block;
    }

}

/* TABLES: DEFAULT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.table--default thead th,
.tableField thead th,
.table--default tbody th,
.tableField tbody th {
    height: 50px;
    padding: 8px 8px;
}

.table--default tbody td,
.tableField tbody td,
.table--default tbody th,
.tableField tbody th {
    height: 60px;
    padding: 8px 8px;
}

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

/*
 * 1. To make the table columns with no declared width all equal and
 * proportional to the available space regardless of its content, and to enable
 * the text ellipsis set for the header cells by default.
 */
.table--default,
.tableField {
    table-layout: fixed; /* 1 */
}

/* Appearance
   -------------------------------------------------------------------------- */
.table--default,
.tableField {
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
}

.table--default thead th,
.tableField thead th {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    background-color: #FAFAFA;
}

.table--default thead th,
.tableField thead th,
.table--default tbody th,
.tableField tbody th {
    font-size: 14px;
    font-weight: bold;
}

.table--default tbody tr+tr td,
.tableField tbody tr+tr td {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
}

.table--default tbody td,
.tableField tbody td,
.table--default tbody th,
.tableField tbody th {
    font-size: 14px;
    word-break: break-word;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .table--default tbody tr+tr,
    .tableField tbody tr+tr {
        margin-top: 20px;
    }

    .table--default tbody td,
    .tableField tbody td,
    .table--default tbody th,
    .tableField tbody th {
        min-height: 0;
        height: auto;
        padding: 10px 20px;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .table--default tbody tr,
    .tableField tbody tr {
        overflow: hidden;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .table--default,
    .tableField {
        border: none;
    }

    .table--default tbody tr,
    .tableField tbody tr {
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    }

    .table--default tbody td,
    .tableField tbody td,
    .table--default tbody th,
    .tableField tbody th {
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

    .table--default td[data-th]:before,
    .tableField td[data-th]:before {
        content: attr(data-th)":\00a0 ";
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        vertical-align: top;
    }

    .table--default tbody tr+tr td,
    .tableField tbody tr+tr td {
        border-top: none;
    }

}

/* TABLES: ACCORDION
   ========================================================================== */

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .table--accordion tbody tr {
        height: 80px; /* This is the height of .table--accordion__heading-1 + .table--accordion__heading-2 + top and bottom borders */
    }

    .table--accordion tbody tr.table--accordion__open {
        height: auto;
    }

    .table--accordion tbody tr .table--accordion__toggle {
        width: 60px;
        height: 78px; /* This is the height of .table--accordion__heading-1 + .table--accordion__heading-2 */
    }

    .table--accordion tbody td.table--accordion__heading-1 {
        padding: 14px 80px 7px 20px;
        height: 45px; /* This is the height of the .link inside + top and bottom paddings */
    }

    .table--accordion tbody td.table--accordion__heading-1 .link {
        width: 100%;
    }

    .table--accordion tbody td.table--accordion__heading-1 .rating {
        width: 90px;
    }

    .table--accordion tbody td.table--accordion__heading-2 {
        padding: 0 80px 12px 20px;
        height: 33px; /* This is the height of the <span> inside + the top and bottom paddings */
    }

    .table--accordion tbody td.table--accordion__separator {
        padding-top: 20px;
    }

    .table--accordion tbody td:last-child {
        padding-bottom: 18px;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .table--accordion tbody tr {
        position: relative;
        -webkit-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
    }

    .table--accordion tbody tr.table--accordion__open {
        -webkit-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
    }

    .table--accordion tbody tr .table--accordion__toggle {
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        vertical-align: middle;
    }

    .table--accordion tbody td:empty {
        display: block;
    }

    .table--accordion tbody td.table--accordion__heading-1 {
        display: table;
        table-layout: fixed;
    }

    .table--accordion tbody td.table--accordion__heading-1 .link {
        display: table-cell;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .table--accordion tbody td.table--accordion__heading-1 .rating {
        display: table-cell;
        text-align: right;
    }

    .table--accordion tbody td.table--accordion__heading-2 {
        display: table;
        table-layout: fixed;
    }

    .table--accordion tbody td.table--accordion__heading-2 span {
        display: table-cell;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .table--accordion tbody tr .table--accordion__toggle {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
        background-color: #FFFFFF;
        line-height: 76px;
    }

    .table--accordion tbody tr .table--accordion__toggle:before {
        font: normal normal normal 16px/1 FontAwesome;
        content: "\f176";
        color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
    }

    .table--accordion tbody tr.table--accordion__open .table--accordion__toggle:before {
        content: "\f175";
    }

    .table--accordion tbody td {
        background-color: #FFFFFF;
    }

    .table--accordion tbody td.table--accordion__heading-1 {
        background-color: #FAFAFA;
        line-height: normal;
    }

    .table--accordion tbody td.table--accordion__heading-1 .link {
        border-bottom: 0;
        font-size: 20px;
    }

    .table--accordion tbody td.table--accordion__heading-2 {
        background-color: #FAFAFA;
    }

    .table--accordion tbody td.table--accordion__heading-2 span {
        font-size: 13px;
    }

    .table--accordion tbody tr.table--accordion__open td.table--accordion__separator {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    }

}