/* Fable: Herbarium — a botanist's specimen book: cream paper, moss and fern
   inks, taxonomy italics, and tape holding each pressed entry in place. */

body, input, button, textarea, select {
    font-family: 'Georgia', 'Palatino', serif;
    font-size: 11pt;
    color: #35402a;
}

body {
    background-color: #f2eddc;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(120, 130, 80, .08), transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 120, 70, .08), transparent 55%);
}

.wrapper { max-width: 780px; }

header {
    background: #3d5232;
    color: #ece4c8;
    border-radius: 0;
    text-shadow: none;
    letter-spacing: 2px;
    font-style: italic;
    padding: 6px 10px;

    a { color: #ece4c8; }
    &::before { content: '❦ '; color: #b0bc7c; font-style: normal; }
}

.subheader {
    background: transparent;
    border-bottom: 1px solid #a5a077;

    .title {
        color: #3d5232;
        font-style: italic;
        letter-spacing: .5px;

        a { color: #3d5232; }
    }
    .title .thread-views { color: #8a8768; font-style: normal; }
}

.boards h2, .recent-attachments h2, .recent-posts-header h2 {
    color: #3d5232;
    font-style: italic;
    letter-spacing: 1px;
    border-bottom: 1px solid #a5a077;

    a { color: #3d5232; }
    &::before { content: '❧ '; color: #7c8a4c; }
}

/* pressed specimens, taped at the top corners */
.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #f9f5e6;
    border: 1px solid #c5bd94;
    color: #35402a;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(80, 80, 40, .18);
    position: relative;

    &::before, &::after {
        content: '';
        position: absolute;
        top: -6px;
        width: 38px;
        height: 13px;
        background: rgba(220, 210, 170, .65);
        border-left: 1px dashed rgba(140, 130, 90, .4);
        border-right: 1px dashed rgba(140, 130, 90, .4);
        transform: rotate(-4deg);
    }
    &::before { left: 12px; }
    &::after { right: 12px; transform: rotate(3deg); }
}

.board .name, .thread .name, .recent-post .name {
    color: #3d5232;
    font-style: italic;
    font-size: 12pt;
}
.board .description { color: #6a704e; }
.thread {
    /* collected by / collected on */
    .author { color: #7a4a28; }
    .time, .view-count { color: #8a8768; a { color: #8a8768; } }
    .reply-count { color: #7c8a4c; font-weight: bold; }
    &:visited .name { color: #6a704e; }
    &.deleted .name { color: #a5a077; }
}

a { color: #7a4a28; text-decoration: none; border-bottom: 1px solid #c5bd94; }
a:visited { color: #6a5a48; }
a:hover { color: #3d5232; border-bottom-color: #3d5232; }

.post {
    .author { color: #7a4a28; font-style: italic; }
    .time a { color: #8a8768; }
    .ip_hash { background: #e8e0c4; color: #5a5a3a; }
    .text {
        line-height: 1.7;

        .greentext { color: #7c8a4c; font-style: italic; }
        .title { color: #3d5232; font-style: italic; }
    }
    .post-buttons .post-button {
        background: #f9f5e6;
        border: 1px solid #c5bd94;
        color: #3d5232;
    }
}

.posts .post-meta {
    background: #eee8d2;
    border-top: 1px dotted #a5a077;

    a { color: #7a4a28; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: #3d5232;
    color: #ece4c8;
    border: 0;
    border-radius: 2px;
    text-shadow: none;
    text-transform: none;
    font-style: italic;
    letter-spacing: 1px;
    font-family: inherit;
    font-size: 10.5pt;

    &:hover { background: #55703f; }
}

.form, form { background: #f4efdd; border: 1px solid #c5bd94; }

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #fcf9ec;
    border: 1px solid #b5ad84;
    color: #35402a;
    font-family: inherit;

    &:focus { outline: none; border-color: #3d5232; }
}

.pager {
    /* folio numbers */
    a, span, span.current {
        background: transparent;
        border: 0;
        border-bottom: 1px solid #c5bd94;
        color: #7a4a28;
        border-radius: 0;
        font-style: italic;
    }
    span.current { background: transparent; color: #3d5232; border-bottom: 2px solid #3d5232; font-weight: bold; }
    a:hover { color: #3d5232; border-bottom-color: #3d5232; }
}

.recent-attachments-gallery .recent-attachment {
    background: #f9f5e6;
    border: 1px solid #c5bd94;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(80, 80, 40, .18);
}

mark { background: #d8cc72; color: #35402a; }

.sort-bar {
    color: #8a8768;
    font-style: italic;
    a { color: #6a704e; &.sort-active { color: #3d5232; } }
}

.thread-warning {
    background: #efe6c8;
    font-style: italic;
    &.thread-deleted-notice { color: #8a3a2a; }
}
.flashed-message { border-color: #7c8a4c; }
.no-threads { color: #8a8768; font-style: italic; }

footer {
    color: #8a8768;
    a { color: #6a704e; }
    font-style: italic;
}