/* if screen is less than or equal to 767px */
@media (max-width: 767px) {

    /* TODO: move this to article css */
    .article {
        width: 95%;
        margin: auto;
    }

    .comment-count {
        margin-left: 1%;
    }

    .comments {
        margin-left: 1%;
        width: 95%;
    }

    .comment-form {
        margin-left: 1%;
        width: 95%;
    }
}

/* if screen is greater than or equal to 768px */
@media (min-width: 768px) {

    /* TODO: move this to article css */
    .article {
        width: 750px;
        margin: auto;
    }

    .comment-count {
        margin-left: 1.5%;
    }

    .comments {
        margin-left: 1.5%;
        width: 90%;
    }

    .comment-form {
        margin-left: 1.5%;
        width: 90%;
    }
}

/* if screen is greater than or equal to 992px */
@media (min-width: 992px) {

    /* TODO: move this to article css */
    .article {
        width: 970px;
        margin: auto;
    }

    .comment-count {
        margin-left: 2%;
    }

    .comments {
        margin-left: 2%;
        width: 85%;
    }

    .comment-form {
        margin-left: 2%;
        width: 85%;
    }
}

/* if screen is greater than or equal to 769px */
@media (min-width: 1200px) {

    /* TODO: move this to article css */
    .article {
        width: 1170px;
        margin: auto;
    }

    .comment-count {
        margin-left: 2.5%;
    }

    .comments {
        margin-left: 2.5%;
        width: 75%;
    }

    .comment-form {
        margin-left: 2.5%;
        width: 75%;
    }
}

.comment-author, .comments a, .comments a:hover, .comment-form a, .comment-form a:hover, #sCommentMessage {
    color: #C02C2D;
    font-weight: bold;
    text-decoration: none;
}

#sCommentMessage {
    margin-bottom: 10px;
}

.comment-text {
    height: 150px;
}

.comment-termsofuse {
    font-size: 10pt;
}

.comment-form button.primaryAction {
    color: #ffffff;
    background-color: #1d1e1e;
    border-color: #1d1e1e;
}