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

styling for comments page. it was a pain in the ass.

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



/*                                                             */
/* _________________________ DEFAULT _________________________ */
/*                                                             */
form, #hide-form-button { display: none; }
input { width: 100%; }
textarea {
    resize: vertical;
    width: 100%;
    height: 10em;
}
form fieldset {
    position: relative;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
}
fieldset fieldset {
    width: 100%;
    margin: 0;
}
tbody {
    display: block;
    padding: 15px;
}
td { vertical-align: top; }




/*                                                          */
/* _________________________ FORM _________________________ */
/*                                                          */



        /* while form hidden */
#new-comment-button, #hide-form-button {
    background: rgb(79, 146, 221);
}
#new-comment-button:hover, #hide-form-button:hover {
    border-color:  rgb(66, 126, 194);
}

        /* general */
.comment-form-wrapper {
    background-color: whitesmoke;
}

.comment-disclaimer {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: x-small;
    text-align: center;
    display: inline-block;
}

.comment-tab {
    border-top: 3px solid #d1d1d1;border-left: 3px solid #d1d1d1;border-right: 3px solid #d1d1d1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: .6rem;
    width: 49%;
    text-align: center;
    overflow: hidden;
}

        /* selection */
#contributor-option { float: left; }
#guest-option { float: right; }

            /* if option is selected */
.selected {
    border-bottom: none;
    transform: translateY(3px);
}
            /* selection combinations */
.as-contributor, .as-guest{ background-color: #d1d1d1;} 

.as-contributor.selected { background-color: cornflowerblue; 
border-color: #39578b;}

.as-guest.selected { background-color: #efe867; 
border-color: #a5a147;}

            /* the field shown upon selection */
    .comment-field {
        border-radius: 5px;
        border-top: 3px solid #bdbdbd;
        border-top-left-radius: 0px; border-top-right-radius: 0px;
    }

            /* spam protection at bottom of form */
#antispam { height: 64px; }




/*                                                              */
/* _________________________ COMMENTS _________________________ */
/*                                                              */


        /* main containers */
#comments { border: none; }                     /* for all comments */

.comment-box {
    width: 100%;
    border: 1px solid thistle;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgb(1, 1, 1);
}

.user-profile-picture {
    vertical-align: top;
}

.user-username {
    position: absolute;
    left: 20%;
    font-weight: bolder;
}

.comment-content-separator {
    border-top: 1px solid rgb(52, 52, 52);
    margin: 10px 0;
    width: 100%;
    top: 7px;
    position: relative;
}

.comment-main-content {
    padding-top: 10px;
}

                /* deletion button */
.comment-deletion {                             /* positioning */
    position: relative;
    z-index: 2;
}

.delete-comment-button {
    display: block;
    float: right;
    margin: 10px;
    background: rgb(255, 35, 35);
    margin-right: -10px;
}
    .delete-comment-button:hover {
        display: block;
        float: right;
        margin: 10px;
        border-color: rgb(255, 57, 57);
        margin-right: -10px;
    }

                /* badges */
.contributor-badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 5px;
    border-radius: 1rem;
    border: 2px solid #39578b;
    background-color: cornflowerblue;

    padding-right: 10px; padding-left: 10px;
}
.author-badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 5px;
    border-radius: 1rem;
    border: 2px solid #8a339b;
    background-color: #e256ff;

    padding-right: 10px; padding-left: 10px;
}




/*                                                                */
/* _________________________ RESPONSIVE _________________________ */
/*                                                                */



@media (max-width: 1000px) {
    .comment-container {
        display: block;
        min-width: 230%;
    }
    .contributor-badge, .author-badge{
        display: inline-block;
        font-size: small;
        color: white;
        padding: 2px;
        border-radius: 1rem;

        padding-right: 4px;
    }
    .contributor-badge {
        border: 1px solid #1f63a7;
        background-color: #4a75a7d5;
    }
    .author-badge {
        border: 1px solid #7f179e;
        background-color: #793d8dd7;
    }

    .comment-form-wrapper {
        width: 100%;
    }
    .comment-writing-form {
        display: block;
        width: 100%;
        float: left;
        margin-left: 0px;
        position: relative;
    }
    .user-username {
        position: absolute;
        left: 40% !important;
        font-weight: bolder;
    }
}