@import "_config";
@import "_util";


article.display {
    display: flex;
    flex-flow: column nowrap;
    width: auto;
    padding: 4px;
    margin: 6px 2px;

    background-color: rgba(0, 0, 0, 0.33); // Transparent background.
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);

    header {
        padding-left: 4px;
        margin-bottom: 6px;

        border-bottom: 2px solid @rule;
    }

    section {
        width: 100%;
        padding: 3px 0;
    }

    .cell() {
        display: inline-block;
        margin: 0;
    }

    .label {
        .cell;
        width: 33%;

        color: @label;
    }

    .content {
        .cell;
        width: 66%;
    }

    .line {
        .cell;
        width: 100%;
    }

    .buttoninfo {
        margin-left: 5px;
    }

    table {
        width: auto;

        border-collapse: collapse;
    }

    table.grow {
        width: 100%;
    }

    th {
        vertical-align: top;
        padding: 4px 16px 4px 0;
        text-align: left;

        .fontReset;
        color: @label;
    }

    td {
        &:extend(th);
        padding: 2px 2px 0 0;
        vertical-align: top;
    }
}

article.notice {
    &:extend(article.display all);
    margin: 8px 2px;

    box-shadow: none;

    color: @textinverse;
    font-weight: bold;
    font-style: italic;

    .label {
      color: @textinverse;
    }

    .noticeStripes;
}