@import '../variables.less';

.billboard-holder {
    position: relative;
    background: @common-bg-color;
    border: 1px solid @common-border-color;
    padding: 10px;
    color: @common-text-color;

    .clearfix {
        *zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }

    .credit {
        position: absolute;
        bottom: 8px;
        right: 12px;
    }

    .bd {
        h2 {
            width: 100%;
            color: @billboard-holder-h2-color;
            text-align: left;
            font-size: @billboard-holder-h2-font-size;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    .hd {
        color: @highlight-text-color;
        text-align: left;
        font-size: 14px;

        a {
            em {
                color: #2d8cf0;
            }
        }

        em {
            // float: left;
            font-style: normal;
            // color: @highlight-text-color;
        }

        span {
            margin: 4px 0 0 10px;
            height: 8px;
            width: 13px;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: url(../../img/Artboard.png);
        }

        a {
            color: @highlight-text-color;

            span {
                display: inline-block;
                margin: 4px 0 0 10px;
                height: 8px;
                width: 13px;
                background-repeat: no-repeat;
                background-position: 0 0;
                background-image: url(../../img/Artboard.png);
            }

            &:hover {
                span {
                    background-position: 0 -11px;
                }
            }
        }
    }

    .time {
        text-align: left;
        margin-top: 3px;
        font-size: 12px;
        color: @billboard-holder-time-color;
    }

    .time-false {
        display: none;
    }

    ul {
        text-align: left;
    }

    li {
        display: inline-block;
        padding: 0;
        padding: @billboard-holder-li-padding;
        width: 50%;
        height: @billboard-holder-li-height;

        h3 {
            width: 100%;
            padding: @billboard-holder-h3-padding;
            line-height: @billboard-holder-h3-line-height;
            font-size: @billboard-holder-h3-font-size;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            span {
                color: @strong-text-color;
            }
        }

        &.warning {

            h2,
            h3 {
                color: red;
            }

            h3 {
                span {
                    color: red;
                }
            }
        }
    }

    .billboard-error-holder {
        height: @billboard-holder-li-height;
        line-height: @billboard-holder-li-height;
        font-size: 15px;
        text-align: center;
        color: #9a9a9a;
    }

    .li-true {
        h3 {
            color: @billboard-active-text-color;
        }
    }
}
