// MESSAGE VIEW95px
$evenEmailColor: rgb(246, 246, 246);
$oddEmailColor: rgb(238, 238, 238);

//=== Thread view ==/

.thread-header {
    margin-bottom: 2em;
    padding: 0;
    h3 {
        text-align: center;
        font-size: 1.5em;
        margin-top: 8px;
        margin-bottom: 0;
    }
    .thread-older, .thread-newer {
        margin-top: 1em;
        color: $subheadingColor;
    }
    button {
        margin-top: 10px;
    }
    .thread-category {
        text-align: center;
    }
    .thread-titles a {
        color: $subheadingColor;
    }
}

.view-thread .nav-tabs {
    margin-bottom: 1.5em;
    .dropdown-header {
        padding-left: 0;
        padding-right: 0;
    }
}
.view-thread .anchor-link {
    position: relative;
    a {
        position: absolute;
        top: -95px;
    }
}

.view-thread {
    .unread {
        border-left: 2px solid #08c;
    }
}
//=== Main section with the whole thread ==/

// First email of the thread
.email-header {
    margin-bottom: 1em;
    display: table;
    width: 100%;
    //display: inline-block;

    .gravatar-wrapper {
        float: left;
    }
    .gravatar {
        margin-bottom: 2px;
        display: inline-block
    }

    .fa-envelope {
        font-size: 130%;
        margin-right: 10px;
    }

    .messagelink {
        font-style: italic;
        font-size: 90%;
        color: rgb(167, 169, 172);
        a {
            color: rgb(167, 169, 172);
        }
    }

    .fa {
        color: #08c;
    }

}

.email-author {
    margin-left: 0.5em;;
    display: inline-block;

    .name {
        font-weight: bold;
    }
    .rank{
        color: $subheadingColor;
        font-size: 80%;
        font-weight: bold;
    }
}

.email-date {
    .date {
        font-weight: bold;
        display: inline-block;
    }
    .time {
        text-align: right;
        display: inline-block;
        span {
            text-align: right;
            color: $subheadingColor;
            border-bottom: 1px dashed $rowBorderColor;
            cursor: help;
        }
    }
}

.email-body {
    white-space: pre-wrap;
    word-wrap: break-word;

    span.read-more a,
    span.read-less a {
        float: right;
        padding: 3px 10px 0 0;
    }
}
.email-body.fixed {
    font-family: 'Droid Sans Mono', monospace;
    white-space: pre;
}

.attachments {
    padding-top: 8px;
    p {
        margin-bottom: 0;
        font-weight: bold;
    }
}

.email-info {
    position: relative;
    .messagelink {
        display: inline;
        font-style: italic;
        font-size: 90%;
        color: rgb(167, 169, 172);
        a {
            color: rgb(167, 169, 172);
        }
    }
    .messagelink span, .messagelink a {
        padding: 5px;
        margin-left: 2px;
        border-radius: 2px;
    }
    .messagelink span:hover, .messagelink a:hover {
        background: grey;
    }

    .vote {
        padding: 5px;
        marging-left: 2px;
        border-radius: 2px;
    }

    .youlike:hover {
        background: #E1F4A2;
    }

    .youdislike:hover {
        background: #FFAAAA
    }
    .reply {
        padding: 10px;
        border-radius: 4px;
    }
    .reply:hover {
        background: #e8ecf2;
    }
    .likeform-wrapper {
        position: relative;
        top: 0;
        right: 0;
    }
    .likestatus + span {
        padding-right: 1em;
    }
    div.attachments {
        display: inline;
        margin-left: 1em;
        .attachments-list {
            margin-bottom: 0;
        }
    }

    .reply-form {
        display: none;
        .reply-tools {
            margin-top: 10px;
            margin-bottom: 0;
            label {
                font-size: 90%;
                font-weight: normal;
            }
        }
        p { margin: 0; }
        p.new-subject {
            display: none;
            margin-bottom: 0.5em;
        }
        p.message-text {
            margin-bottom: 0.25em;
        }
        p.buttons {
            margin-top: 1em;
        }
    }
    .reply-result {
        text-align: center;
        .alert {
            display: inline-block;
        }
        .alert-success {
            margin-bottom: 0;
        }
        .alert-error {
            white-space: pre;
            text-align: left;
        }
    }


}


.email-first .email-info {
    padding: 0 0 20px 0;
    // border-bottom: 1px solid $rowBorderColor;
}

.email-first {
    padding-left: 10px;
}

.email-first .email-body {
    padding-left: 25px;
}

.sort-mode {
    text-align: right;
    padding-top: 10px;
}


/* Set the indent of the replies based on the size of the screen.*/
.reply-level-1 {
    margin-left: 2em;
}
.reply-level-2 {
    margin-left: 4em;
}
.reply-level-3 {
    margin-left: 6em;
}
.reply-level-4 {
    margin-left: 8em;
}
.reply-level-5 {
    margin-left: 10em;
}


/* On smaller screens, do not indent replies as it gets harder to read emails
 *  at level 5.
 */
@media (max-width: 768px) {
    .reply-level-1, .reply-level-2, .reply-level-3, .reply-level-4, .reply-level-5 {
        margin-left: 0em;
    }
}


/* The email thread */
.view-thread .replies {
    margin-top: -15px;
}
.replies .email {
    border-top: 1px solid $rowBorderColor;
    padding: 0.5em;
    margin: 20px 0 20px 0;
    .unread {
        border-top: 1px solid rgb(100, 100, 100);
        background-color: rgb(214, 214, 214);
        i.unread {
            float: right;
            margin-right: 2em;
        }
    }
    .subject {
        text-align: center;
        // clear: both;
        font-style: italic;
    }
    .email-body {
        // padding: 5px;
        padding-left: 25px;
        background-color: rgb(255, 255, 255);
    }
}
// .even .email {
//     background-color: $evenEmailColor;
// }
// .odd .email {
//     background-color: $oddEmailColor;
// }
.temporary .email {
    background-color: rgb(215, 215, 229);
    display: none;
}


// === Thread general information column

.days-num {
    font-size: 200%;
}
.days-text {
    font-size: 70%;
}


#thread-overview-info, #message-overview-info {
    a {
        color: #999;
    }
    .fa {
        color: #BFBFBF;
    }
    .postorius .fa {
        color: black;
    }
}

#thread-overview-info {
    #thread-date-info {
        padding-bottom: 8px;
    }

    .list-name {
        word-wrap: break-word;
        a {
            color: black;
        }
    }
    form.favorite {
        margin-bottom: 0;
    }
    .favorite a {
        i {
            margin-right: 0.3em;
        }
    }
    a.saved,
    a.notsaved {
        /* Will be shown via Javascript */
        display: none;
    }
}

//=== Tags

#tag-title {
    color: rgb(77, 77, 77);
    text-transform: uppercase;
}

#tags {
    color: rgb(167, 169, 172);
    margin-top: 2em;
}
#tags ul {
    padding: 10px 0;
    margin: 0;
}
#tags ul li {
    padding-left: 0;
}
#tags ul li span {
    margin-left: 5px;
}
#tags .rmtag {
    margin: 0;
    display: inline;
}
#tags .rmtag a {
    visibility: hidden;
    font-size: 125%;
}
#tags:hover .rmtag a {
    visibility: visible;
}
#tags:hover .rmtag a:hover {
    text-decoration: none;
}

#add-tag {
    margin-top: 0.3em;
}

//=== Participants ==/

#participants {
    margin-top: 2em;
    color: $subheadingColor;
    span#participants_title {
        @extend .small-caps;
    }
    li {
        margin: 1em 0;
    }
    .participant-gravatar {
        padding-left: 0;
    }
}


/* Inline quotes */
.quoted-switch a {
    background-color: #fafafa;
    padding: 0 4px 2px 4px;
    border-left: 2px solid rgb(55, 113, 200);
    font-weight: bold;
    font-size: 115%;
    &:hover {
        text-decoration: none;
    }
}
.quoted-text {
    border-left: 2px solid  rgb(55, 113, 200);
    padding: 0.5em;
    background: #e8ecf2;
    border-radius: 10px;
}

.quoted-text-1 {
    border-left: 2px solid  #1d3e0f;
    padding: 0.5em;
    background: #e4f1df;
    border-radius: 10px;
}

.quoted-text-2 {
    border-left: 2px solid  #5c0a0a;
    padding: 0.5em;
    background: #f7d4d4;
    border-radius: 10px;
}

.quoted-text-3 {
    border-left: 2px solid  rgb(55, 113, 200);
    padding: 0.5em;
    background: #e8ecf2;
    border-radius: 10px;
}

//=== Navigation for unread messages ==/
#unreadnavbar {
    position: fixed;
    bottom: 0;
    right: 0;
    text-align: right;
    padding-right: 2em;
    display: none;
}
#unreadnavbar>div {
    width: auto;
    padding: 0.2em 1em;
    border: 1px solid #888;
    border-bottom: none;
    background-color: #eee;
}


//=== Re-attach threads ==/
.reattach-thread {
    h1 {
        text-align: center;
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 2em;
    }
    form {
        margin-bottom: 0;
        img.ajaxloader {
            margin-left: 1em;
        }
    }
    form.search {
        margin-top: 2em;
        p {
            line-height: 22px;
        }
        input {
            margin-left: 3em;
        }
        input,
        button {
            font-size: 12px;
            padding: 2px 8px;
        }
    }
    li.manual {
        label {
            display: inline;
        }
        input {
            margin-bottom: 0;
        }
        input[type='text'] {
            width: 22em;
        }
    }
    p.buttons {
        margin-top: 2em;
    }
}

//=== message_new.html: start a new thread ==/
.new-thread-form {
    //margin-left: 2em;

    #id_subject,
    textarea {
        width: 100%;
    }

    p.buttons {
        margin-top: 2em;
    }
}

/*
// tiny screen (<=320px):
// nav-tabs: less padding, smaller dropdowns, right-align last dropdown
@media (max-width: $screen-tn) {
    .view-thread .nav-tabs {
        >li a {
            padding-left: 7px;
            padding-right: 7px;
        }
        #navbarMonthsListDrop ~ .dropdown-menu {
            min-width: 90px;
            left: inherit;
            right: 0;
        }
    }
    #participants {
        .participant-name {
            margin-left: 0 !important;
        }
    }
}
*/

// xs screen (<=540px): more padding/spacing in nav-tabs
@media (max-width: 539px) {
    .view-thread .nav-tabs {
        .dropdown-menu {
            min-width: 120px;
        }
        #navbarMonthsListDrop ~ .dropdown-menu {
            text-align: left;
        }
    }
}
// small screens (<768px) have smaller gravatar images
@media (max-width: $screen-xs-max) {
    #participants {
        .participant-name {
            margin-left: -20px;
        }
    }
}
// mid screens (<992px): adjust spacing between gravatar images
@media (min-width: $screen-md-min) {
    #participants {
        img.gravatar {
            @include square(32px);
        }
    }
}


//=== Message view ==/

.message-header {
    margin: 1em 0 2em 0;
    .message-back {
        a {
            padding: 0.2em 0;
            .icon {
                font-size: 1.5em;
            }
        }
    }
}
