@import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 
 @supports(--css:variables) {
:root {
    /* S-CSS-P Integration */
    --theme-base: "nuscp";
    --theme-id: "dustjacket-theme";
    --theme-name: "Dustjacket Theme";
 
    /* Header */
    --logo-image: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_logo.png");
    --header-title: "The Wanderers' Library";
    --header-subtitle: " ";
    --diagonal-stripes: unset;
 
    /* Typefaces */
    --body-font: adelle-sans, 'Lato', sans-serif;
    --header-font: 'zuijinregular', 'Poppins', sans-serif;
    --title-font: 'zuijinregular', 'Poppins', sans-serif;
    --mono-font: adaptive-mono, "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --pale-gray-monochrome: 178, 210, 180;
    --light-gray-monochrome: 130, 160, 135;
    --gray-monochrome: 45, 70, 45;
    --dark-gray-monochrome: 30, 55, 30;
    --bright-accent: 255, 219, 90;
    --medium-accent: 228, 180, 28;
    --dark-accent: 185, 150, 17;
    --newpage-color: 221, 102, 17;
 
    /* Primary Menu Colors */
    --swatch-menubg-hover-color: var(--dark-gray-monochrome);
    --swatch-menutxt-dark-color: var(--dark-gray-monochrome);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-border-color: var(--medium-accent);
 
   /* Primary Header Colors */
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
    
   /* Link Colors */
    --link-color: var(--pale-accent);

    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);
    --gradient-sidemenu-header: linear-gradient(10deg,
        rgba(var(--dark-gray-monochrome), 0.65) 0%,
        rgba(var(--dark-gray-monochrome), 0.75) 100%);
 
   --barColour: rgb(var(--gray-monochrome));
    --linkColour: rgb(var(--medium-accent));
}
 
/* HIGHLIGHTING */
::-moz-selection {
    background: rgba(var(--bright-accent), 0.5);
}
 
::selection {
    background: rgba(var(--bright-accent), 0.5);
}
 
/* LINKS */
a {
    color: rgb(var(--swatch-primary-darker));
}
 
a:hover,
a:active,
a:visited {
    color: rgb(var(--swatch-primary-darkest));
}
 
/* HEADER */
div#extra-div-1,
div#extra-div-2 {
        position: absolute;
    display: block;
    width: 100%;
    height: 7.5rem;
    top: 0;
    left: 0;
}
 
div#extra-div-1 {
    background-image: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wlheader_bg.png");
    background-size: 31.250rem;
    z-index: -1;
    mix-blend-mode: hard-light;
}
 
div#extra-div-2 {
    background: var(--gradient-header);
    background-size: var(--header-background-image-size);
    background-repeat: repeat;
    z-index: -2;
}
 
#header h1 a {
    margin-left: 7.75rem;
    margin-top: 0.6em;
    font-size: 175%;
    overflow-wrap: normal;
}
 
#header h1 a::before {
    content: "The Wanderers' Library";
    content: var(--header-title);
    color: rgb(var(--bright-accent));
    text-shadow: inherit;
    background: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png');
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: normal;
}
 
#header h2 {
    display: none;
}
 
/* Search Bar */
#search-top-box-form * {
    font-family: var(--header-font);
    font-weight: 600 !important;
    letter-spacing: 0.05em;
}
 
#search-top-box-form {
    display: inline-flex;
    justify-content: center;
    position: absolute;
    height: 1.3rem;
    top: 47%;
    right: 3%;
    width: auto;
    text-align: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    padding-top: 0.4rem !important;
}
 
#search-top-box input.empty {
    color: rgba(var(--swatch-menutxt-light-color), 0.5);
}
 
#search-top-box-form > input,
#search-top-box-form > input[type="submit"] {
    min-height: 1.3rem;
    height: 1.3rem;
    padding: .25rem;
    margin: 0;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    font-weight: 500;
}
 
input.button.btn {
    padding-top: 0.1em !important;
}
 
/* Log-In Info */
#login-status {
    color: rgb(var(--swatch-menubg-light-color));
    font-weight: 600;
    letter-spacing: 0.05em;
}
 
#login-status * {
    font-family: var(--header-font);
    letter-spacing: 0.05em;
}
 
/* TOPBAR */
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
    font-family: var(--header-font);
    text-transform: uppercase;
}
 
#top-bar div.top-bar > ul > li > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a {
    font-weight: 700;
    color: rgb(var(--swatch-menutxt-dark-color));
}
 
#top-bar div.top-bar > ul > li > ul,
#top-bar div.mobile-top-bar > ul > li > ul {
    background: rgba(var(--pale-gray-monochrome), 0.93);
}
 
#top-bar div.top-bar > ul > li > ul > li > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a:hover {
    background: transparent;
}

#top-bar div.top-bar > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > a:hover::before {
    background-color: rgba(var(--bright-accent), 1);
}
 
#top-bar > div.mobile-top-bar > div.open-menu > p > a {
    color: rgb(var(--medium-accent)) !important;
}
 
/* SIDEBAR */
#side-bar .heading {
      font-family: var(--header-font);
}
 
#side-bar div.menu-item a::before,
#side-bar div.menu-item a:hover::before {
    background-color: rgb(var(--gray-monochrome),0.25);
}
 
/* Page-Options */ 
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background-color: rgba(var(--swatch-menubg-dark-color), 1);
    border: 0.08rem solid rgba(var(--swatch-primary), 1);
    color: rgba(var(--swatch-primary), 1);
    font-weight: 700;
}
 
div#page-options-bottom > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom-2 > a:active {
    background-color: rgba(var(--swatch-menubg-light-color), 0.85);
    color: rgba(var(--swatch-primary), 1);
}


/* Footer */
#footer {
    width: calc(100% - 1.25rem);
    color: rgb(var(--swatch-menubg-dark-color));
}

#footer a {
    color: inherit;
} 

/* Page-Tags */
#main-content .page-tags {
    border-top: 2px solid rgb(var(--dark-accent));
}
 
#main-content .page-tags a {
    display: inline-block;
    height: 0.8125rem;
    line-height: 13px;
    line-height: 0.8125rem;
    font-size: 11px;
    font-size: 0.6875rem;
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin: 0 0 .5rem .75rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0;
}
 
#main-content .page-tags a:before {
    top: -0.1875rem;
    left: -0.625rem;
    width: 0;
    height: 0;
    border-color:
     transparent
     rgb(48, 48, 52)
     transparent
     transparent;
    border-color:
     transparent
     rgb(var(--gray-monochrome, 45, 70, 45))
     transparent
     transparent;
    border-style: solid;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    padding: 0 0.0625rem 0.1875rem;
}
 
#main-content .page-tags a:before,
#main-content .page-tags a:after {
    content: "";
    float: left;
    position: relative;
}
 
#main-content .page-tags a:after {
    --box-shadow: rgb(var(--gray-monochrome, 45, 70, 45));
    top: 0.28125rem;
    left: -0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: rgb(var(--bright-accent, 255, 219, 90));
    box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
}
 
.page-tags span {
    border-top: .5rem solid transparent;
}

/* Rating and Info Modules */
.page-rate-widget-box,
#page-content .rate-box-with-credit-button {
    background: linear-gradient(to top,
        rgba(var(--swatch-menubg-dark-color), 1) 0,
        rgba(var(--swatch-menubg-medium-color), 1) 100%);
    font-family: var(--header-font);
    letter-spacing: 0.05em;
}
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
    font-weight: 500;
}
 
#page-content .rate-box-with-credit-button > .creditButton > p > a::before {
    background-color: rgb(var(--rating-module-button-color));
}
 
/* Blockquotes, Horizontal Rules and Special Divs*/
.blockquote, 
blockquote {
       background: rgb(var(--pale-gray-monochrome));
       border: 3px outset rgb(var(--medium-accent));
}

hr {
    height: .125rem;
    border: 0;
    border-top: .063rem solid transparent;
    background-color: rgba(var(--bright-accent));
    background: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png');
    background-size: cover;
}
 
.fancyhr hr {
    border-top: 2vw solid transparent;
    background-color: rgba(var(--bright-accent), 0);
    height: 0;
    box-sizing: border-box;
    border-image-source: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png');
    border-image-repeat: round round;
    background: none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
.fancyborder {
    box-sizing: border-box;
    border: 2vw solid rgba(0,0,0,0.5);
    border-image: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png') 600 round;
    border-image-width: 6;
    padding: 2vw;
}
 
/* footnote by 7happy7 */
span:not([class]):not([style]) > sup.footnoteref:first-child > a.footnoteref:before,
sup.footnoteref > a.footnoteref:before {
content: "(";
}
span:not([class]):not([style]) > sup.footnoteref > a.footnoteref:before {
content: ",";
}
 
/* Adjusts footnote block at bottom to fit the Hand format better, rather than BHL Default */
.footnotes-footer {
        width: unset;
    margin: unset;
    padding: 20px;
    background-color: #EEF6EE;
        border: solid 1px #112211;
}
 
/* MOBILE ELEMENTS */
@media only screen and (max-width: 768px) {
    #header h1 a,
    #header h2 span {
        margin-left: 7.75rem;
        margin-top: 0.35em;
    }
 
    #header h1 a {
        line-height: 1;
    }
 
    #header h2 span {
        margin-top: calc(3.4rem + var(--offset-from-page-top));
    }
 
    div#extrac-div-1 {
        background-image: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wlheader_bg.png');
        background-size: 31.250rem;
        z-index: 3;
    }
 
    div#extrac-div-1,
    div#extrac-div-2 {
        position: absolute;
        display: block;
        width: 100%;
        height: 7.5rem;
        top: 0;
        left: 0;
    }
 
    div#extrac-div-3::before {
        text-shadow: inherit;
        background: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png');
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        content: var(--header-title);
        font-family: var(--header-font);
        font-size: 170%;
        width: 95%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        background-color: transparent;
        text-align: center;
        font-weight: 700;
    }
 
    div#extrac-div-3 {
        display: block;
        position: static;
        z-index: 1;
        background-color: transparent;
    }
 
    div#extrac-div-2 > span {
        display: flex;
        top: 0;
        right: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 3rem;
        box-sizing: inherit;
        background: var(--gradient-topmenu-mobile, linear-gradient(to bottom, 
            rgba(var(--swatch-topmenu-border-color), 1) 0, 
            rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, 
            rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
            rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), 
            rgba(var(--swatch-topmenu-border-color), 1) 3rem));
        background-size: 100% 10.375rem;
        align-items: center;
        position: sticky;
        margin-top: 7.5rem;
        background-color: transparent;
    }
 
    div#extra-div-2::before {
        content: " ";
        width: 100%;
        height: 100%;
    }
 
    div#extrac-div-2 {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
        left: 0;
        z-index: 0;
    }
 
    #search-top-box {
        width: 12.5rem;
    }
 
   #search-top-box-form {
        top: 0;
        right: 0;
        align-items: initial;
    }
}
}