/* Shared content components for library articles and CKEditor output. */

.b-common-typography .lib-lead {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(126,76,24,.22);
    border-radius: 7px;
    background: #fff6df;
    color: #4c2d12;
    font-size: 13px;
    line-height: 1.55;
}

.b-common-typography .lib-section {
    margin: 16px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(126,76,24,.22);
    color: #3c1b08;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.2;
}

.b-common-typography .lib-subtitle {
    margin: 13px 0 7px;
    color: #6b3510;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.25;
}

.b-common-typography .lib-note,
.b-common-typography .lib-warning,
.b-common-typography .lib-tip,
.b-common-typography .lib-reward-box,
.b-common-typography .lib-quest-card,
.b-common-typography .lib-faq {
    margin: 10px 0;
    padding: 11px 13px;
    border: 1px solid rgba(126,76,24,.26);
    border-radius: 7px;
    background: linear-gradient(180deg,#fff8e5,#ead5aa);
    color: #3a210e;
    line-height: 1.5;
    box-shadow: 0 2px 7px rgba(0,0,0,.12);
}

.b-common-typography .lib-note {
    border-left: 4px solid #8a5a20;
}

.b-common-typography .lib-warning {
    border-left: 4px solid #b23a18;
    background: linear-gradient(180deg,#fff0df,#efd0ac);
}

.b-common-typography .lib-tip {
    border-left: 4px solid #2e7d43;
    background: linear-gradient(180deg,#f3ffe8,#dcecbc);
}

.b-common-typography .lib-reward-box {
    border-left: 4px solid #b88920;
    background: linear-gradient(180deg,#fff7d8,#ead08d);
}

.b-common-typography .lib-quest-card {
    border-color: rgba(126,76,24,.34);
    background: linear-gradient(180deg,#fff3d7,#e4c894);
}

.b-common-typography .lib-faq {
    background: #fff8e8;
}

.b-common-typography .lib-faq h3,
.b-common-typography .lib-quest-card h3,
.b-common-typography .lib-reward-box h3 {
    margin: 0 0 6px;
    color: #5a2208;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.25;
}

.b-common-typography .lib-steps {
    margin: 10px 0;
    padding: 0;
    counter-reset: lib-step;
    list-style: none;
}

.b-common-typography .lib-steps > li {
    position: relative;
    margin: 8px 0;
    padding: 9px 10px 9px 42px;
    border: 1px solid rgba(126,76,24,.22);
    border-radius: 6px;
    background: #fff7e5;
    line-height: 1.45;
}

.b-common-typography .lib-steps > li::before {
    counter-increment: lib-step;
    content: counter(lib-step);
    position: absolute;
    left: 10px;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #7b2d0b;
    color: #fff6df;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}

.b-common-typography .lib-item-list {
    margin: 10px 0;
    padding-left: 20px;
}

.b-common-typography .lib-item-list li {
    margin: 5px 0;
    line-height: 1.45;
}

.b-common-typography .lib-table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
    border: 1px solid #c99b61;
    background: #fff7e5;
}

.b-common-typography .lib-table caption {
    padding: 7px;
    color: #4c2209;
    font-weight: bold;
    text-align: left;
}

.b-common-typography .lib-table th,
.b-common-typography .lib-table td {
    padding: 8px;
    border: 1px solid #d7ad75;
    vertical-align: top;
}

.b-common-typography .lib-table th {
    background: #e6c38c;
    color: #3d1a06;
}

.b-common-typography .lib-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
    border: 1px solid rgba(126,76,24,.28);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.b-common-typography .lib-small {
    color: #76573a;
    font-size: 11px;
}

@media (max-width: 640px) {
    .b-common-typography .lib-section {
        font-size: 19px;
    }

    .b-common-typography .lib-table {
        display: block;
        overflow-x: auto;
    }
}