@import url("http://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");
@import url('http://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("http://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("http://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(http://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(http://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(http://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(http://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(http://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(http://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;
}
}
}