aside.db {
    text-transform:uppercase;
}
.toc {
    *{
        margin:0;
        padding:0;
    }
    background:var(--accent-background);
    padding:5px 15px;
    margin-bottom: 40px;
    width:40ch;
}
.toc ul::before {
    content: "Table of Contents";
    font-weight: bold;
    font-size: var(--large);
    font-family: var(--font-heading);
    color: var(--bold);
    text-shadow: 1px 1px 1px var(--accent);
	text-transform: uppercase;
	font-size: var(--larger);
	border-bottom: 2px dashed var(--accent);
	letter-spacing: 2px;
    display:block;
    margin-left:-10px;
    margin-bottom:10px;
    text-align: center;
    cursor:text;
}
.toc ul {
    margin-left:10px;
    li {
        margin:5px 0;
        text-indent:1em hanging;
    }
}
.gw2whisper {
    color:#B679D5;
}
dl.dialogue dt {
    font-weight: bold;
    color: var(--bold);
}
dl.dialogue dt ~ dd {
    margin-left:15px;
}
dl.dialogue dd {
    margin:5px 0;
    text-indent: 1em hanging;
}
dl.dialogue b {
    display:inline-block;
    margin-right:5px;
}
aside.callout {
    font-size: var(--small);
    width:70ch;
    background:var(--accent-background);
    display:block;
    padding: 15px;
    margin:0 auto 30px;
}
aside.callout-info {
    background-color: #D1F0B1;
    color:#122620;
    p {
        color:#122620;
    }
}
aside.callout-info::before {
    content:"🛈";
    display:block;
    position: absolute;
    top:10px;
    left:15px;
    font-size:var(--xx-large);
}
aside.callout-alert {
    background-color: #ffb2b2;
    color:#4B0000;
    p {
        color:#4B0000;
    }
}
aside.callout-alert::before {
    content:"⚠";
    display:block;
    position: absolute;
    top:10px;
    left:15px;
    font-size:var(--xx-large);
}
aside.callout p {
    margin: 0;
    margin-left:35px;
    font-size: var(--small);
    font-style:italic;
}

/**Essay Pages**/
.source {
    margin-top:-40px;
    text-align: right;
    margin-bottom:30px;
    text-transform: uppercase;
    font-weight: bold;
    color:var(--bold);
    margin-right:10px;
}
.essay h1 {
    text-align: left;
}
figure {
    margin: 0 auto 20px;
    padding:10px 20px 5px;
    width:75ch;
    background-color: var(--lighter);
    blockquote {
        margin:0;
        border:none;
    }
    blockquote ~ blockquote {
        border-top:1px dashed var(--accent);
        margin-top:10px;
    }
}
figure > a {
    display: block;
    margin-top:15px;
    text-align: right;
    font-style: italic;
    border-top:1px dashed;
    padding-top:10px;
    font-size: var(--small);
}
figure img {
    display: block;
    margin:20px auto 0px;
}
figure details {
    width:65ch;
    margin:15px auto 20px;
    padding:10px 20px;
    background-color: var(--accent-background);
}
figure details p {
    margin-bottom:10px;
}
figure summary {
    width:100%;
}
.details summary + p {
    padding-top:15px;
    border-top: 1px solid var(--accent);
}
.details dl {
    border-top: 1px solid var(--accent);
    padding-top:10px;
}
/**Codex Pages**/
.codex footer {
    font-size:smaller;
    font-style: italic;
}
.codex h2, .essay h2 {
    font-family: var(--font-heading);
    color:var(--bold);
    text-shadow: 1px 1px 1px var(--accent);
}
.codex {
    dt {
        font-weight: bold;
        margin-top:20px;
        color: var(--bold);
    }
    dd {
        margin:0 0 5px 20px;
    }
}
/**Codex - Legend Stones**/
.legendstones {
    width:100%;
    vertical-align: middle;
    border-collapse: collapse;

    th {
        font-weight: bold;
    }
    img {
        width:15px;
    }
    td,th {
        border:1px solid var(--accent);
    }
    td {
        padding:5px 10px;
    }
    .power {
        background-color: rgb(255, 188, 94);
    }
    .control {
        background-color: rgb(194, 253, 106);
    }
    .accuracy {
        background-color: rgb(115, 231, 249);
    }
    .balance {
        background-color: rgb(253, 132, 132);
    }
    .speed {
        background-color: rgb(183, 133, 250);
    }
    .potential {
        background-color: rgb(167, 166, 171);
    }
}
/*Map Pages*/
.mapintro {
    border-top:1px solid var(--bold);
    border-bottom:1px solid var(--bold);
    display:block;
    margin:0 auto;
    margin-bottom:40px;
    padding:40px 0;
    width:50%;
    text-align: center;
    font-size:var(--small);
    line-height:0.2rem;
    h1 {
        text-transform: uppercase;
        margin-bottom:40px;
        a.l {
            display:none;
        }
    }
    span {
        display: block;
        line-height:var(--larger);
        span {
            font-size:var(--larger);
            font-family:var(--font-heading);
        }
    }
}
.mapregions {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    margin-bottom:30px;
    div {
        margin:15px 5px;
    }
    img {
        display: block;
        width:150px;
        height:150px;
        object-fit:cont;
    }
}
.mapregions:last-of-type{
    margin-bottom:0px;
}
.map-hometown, .map-hometown ~ dd {
    font-style: italic;
    font-size: var(--small);
    line-height:var(--small);
}
.map-hometown a {
    font-size: var(--small);
}

.img-right {
    float:right;
    margin-left:20px;
}