Newspaper

« April 2021 | May 2021 | June 2021 »

Attribution

The Newspaper Theme was created by MalyceGraves, later reworked by EstrellaYoshte for internal use in the Site News.

In the event that MalyceGraves is no longer an active member of staff or the site in general, ownership of this theme will revert to whoever is in charge of Site News.

+ Image Attribution

SCPN Logo

Source: Open Clipart
License: CC BY-SA 3.0 (originally PD)
Title: SCPN_logo.png
Author: rygle with edits by MalyceGraves & DrKens
Release year: 2016 / 2021

News Feed Header

Source: Flickr
License: PD
Title: SCPN_header.png
Author: National Transportation Safety Board
Release year: 2019

The SCP Logo itself is a product of the SCP Foundation Wiki and is licensed under CC BY-SA 3.0

---

Page Elements

Collapsible - Click me

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

s-title span

placard span

Image.

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.¹

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Longer Tab

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

---

Custom Blocks

Big Section Header

[[div class="section-header"]]
+ Big Section Header
[[/div]]

[[div class="gallery-frame"]]
[[image here]]
[[/div]]

S. D. Locke's Proposal - When Day Breaks

[[span class="hover"]][[span]]hover text[[/span]][[image here]][[/span]]

Top SCP this Month

a

Top Non-SCP this Month

b

[[div class="f-flex"]]

[[div class="f-con"]]
++++ H4
a
[[/div]]

[[/div]]

SCP Article

1

Tale

2

GoI-Format

3

[[div class="f-flex three"]]

[[div class="f-con"]]
++++ H4
three columns at max width
[[/div]]

[[/div]]

1

2

3

4

[[div class="f-flex data"]]
[[div]]
Reduced spacing for more optimal data display
[[/div]]
[[/div]]

Sticky ToC Setup

[[div class="anchor"]]
[[div class="tocbox"]]
[[div class="toc-u"]]
[[toc]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

---

The header font is DM Serif Display.

The body font is Kulim Park.
The monotype font is Fira Code.

---

Footnotes

1. This is a footnote.

Source Code

/*
    Newspaper Theme
    [2021 Wikidot Theme]
    By MalyceGraves and EstrellaYoshte
    Based on:
       Penumbra Theme by EstrellaYoshte
       Paperstack Theme by EstrellaYoshte
       Ad Astra Theme by NatVoltaic and stormbreath
       Inkblot Theme by Croquembouche
       Anderson Robotics Theme by Croquembouche
       BHL Style Collapsible by Monkatraz
       Monotypical Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
 
:root {
    --accentColor: #E5062B;
    --lgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png");
    --bgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newshead.png");
 
    --primaryBackgroundColor: #f3f3f3;
    --textColor: #090B0C;
    --headerColor: #161B33;
    --selectionColor: #FFE419;
 
    --header-font: 'DM Serif Display', serif;
    --link-timing: 0.125s ease-out;
}
 
#content-wrap {
    margin: 0.65em auto 0;
    box-sizing: border-box;
}
#page-content { font-size: 1rem; }
 
body {
    font-family: 'Kulim Park', sans-serif;
    color: var(--textColor);
    background-color: #FFF4E9;
    background-image: none;
    background-repeat: no-repeat;
}
tt {
    background-color: var(--primaryBackgroundColor);
}
code {
    font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
    font-size: 90%;
}
 
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a) {
    color: var(--accentColor);
}
 
#page-content div {
    clear: unset;
}
 
/* Selection */
::selection {
    background: var(--selectionColor);
    color: var(--textColor);
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
    height: 240px;
}
 
div#header-extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 1;
    z-index: -1;
}
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--bgurl);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
    z-index: -2;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 a {
    padding-top: 174px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
 
}
#header h2 {
margin-top: 6.5rem;
    font-size: 0.75rem;
    font-style: italic;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--headerColor);
  font-family: var(--header-font);
  text-shadow: none;
}
#header h2::before { color: var(--textColor); }
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP Foundation News");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "The Official SCPN Monthly");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: var(--textColor);
    background-color: #FEFBF8;
    padding: 0.3rem 0.25rem 0.4rem 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
    top: 0;
}
#login-status a {
    color: var(--accentColor);
}
#account-topbutton {
    border: none;
    margin-left: -0.1rem;
}
 
div#account-options {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-radius: 0.35rem;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
    top: 1.85rem;
 
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
    opacity: 1;
    pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
    #account-topbutton:hover + #account-options,
    #account-options:hover {
        opacity: 1;
        pointer-events: all;
    }
}
#account-options li a,
#account-options li a:hover {
    color: var(--accentColor);
}
 
/* ---- SEARCH ---- */
div#search-top-box {
    top: 2.25rem;
    right: 0.5rem;
    width: 1.6rem;
}
 
div#search-top-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0.05rem;
    background-color: var(--accentColor);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 1rem;
            mask-size: 1rem;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end;
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    position: relative;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-family: var(--body-font);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.1em 0.5em;
    box-sizing: border-box;
    border-radius: 0.35rem;
    border: none;
    box-shadow: 0 0 2px 1.5px var(--shadow);
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
    background-color: var(--primaryBackgroundColor)!important;
    color: var(--textColor);
    display: inline-block;
    border: none;
    height: 1.6rem;
    width: 9rem;
    transition: width .25s;
    outline: none;
}
 
div#search-top-box form input[type="submit"] {
    display: none;
}
 
/* ---- TOP BAR ---- */
 
#top-bar {
     top: 14.6rem;
     display: flex;
     justify-content: center;
     right: 0;
}
@media (max-width: 768px) {
    .mobile-top-bar {
         display: flex;
         justify-content: center;
         max-width: 100%;
         width: 100%;
         left: 0;
    }
}
 
/* div[class*=top-bar] is to select both regular and mobile top bar that exist in #top-bar */
 
#top-bar div[class*=top-bar] > ul > li > a {
    color: var(--textColor);
}
 
#top-bar div[class*=top-bar] ul li ul li a {
    color: var(--accentColor);
}
 
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a {
    background-color: transparent;
    background: none;
}
 
#top-bar div[class*=top-bar] > ul > li,
#top-bar div[class*=top-bar] > ul > li.sfhover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within {
    background-color: transparent;
    background-size: 100% 100%;
}
 
#top-bar div[class*=top-bar] ul li ul {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
 
#top-bar div[class*=top-bar] ul li ul li,
#top-bar div[class*=top-bar] ul li ul li a {
    background: transparent;
    border: none;
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
    background-color: #FEFBF8;
}
 
/* keyboard navigation compatibility */
#top-bar div[class*=top-bar] ul > li > ul > li > a {
    height: auto;
    max-height: none;
    line-height: 1.5!important;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
#top-bar div[class*=top-bar] > ul > li > ul {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
    opacity: 1;
    pointer-events: all;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar{
    background: #FEFBF8;
    clear: both;
    padding: .8em;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    overflow-x: hidden;
}
 
#side-bar .heading{
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 0.94rem;
    border-bottom: solid 1px var(--headerColor);
    border-top: solid 1px var(--headerColor);
    margin-top: 1.35rem;
    padding-left: 0;
    text-align: center;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #FEFBF8;
}
#side-bar .side-block.media {
    background-color:#FEFBF8;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
#side-bar .side-block.resources {
    background-color:#FEFBF8;
}
.side-block .menu-item > .image {
    display: none;
}
 
#side-bar div.menu-item a {
    color: var(--accentColor);
}
 
#top-bar div.open-menu a {
    border-radius: 0.35rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    color: transparent;
    background-color: #FEFBF8;
    border: none;
    padding: 0.15rem;
    user-select: none;
    background-image: url(https://grombald.github.io/Common-Theme/img/open-menu-button.png);
    background-image: var(--ct_bg_open-menu-button);
}
 
#top-bar div.open-menu {
    display: block !important;
}
 
/* ---- MAIN CONTENT ---- */
#main-content {
    background-color: #FEFBF8;
    padding: 0.5em 2em 0.75em;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 880px;
    margin: -0.4rem auto 0;
    border-radius: 0;
    box-sizing: border-box;
}
 
/* ---- PAGE TITLE ---- */
#page-title, .meta-title {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: none;
    margin: 0.25rem 0;
    padding-bottom: 0;
}
#page-title::before,
#page-title::after,
.meta-title::before,
.meta-title::after {
    content: "";
    flex-grow: 1;
    height: 0.25rem;
    margin: auto auto auto 0.65rem;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
}
#page-title::before,
.meta-title::before {
    margin: auto 0.65rem auto auto;
}
 
/* ---- BREADCRUMBS ---- */
 
#breadcrumbs, #page-content .pseudocrumbs {
    font-size: 0.85rem;
    font-family: var(--header-font);
    margin-top: -1.05em;
}
#page-content .pseudocrumbs * { text-decoration-color: var(--accentColor)!important; }
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-width: 0;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: var(--textColor);
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: transparent;
     border: unset;
     box-shadow: none;
 
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 0 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: transparent;
     background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
     background-size: 100% 100% ;
     background-position: 0 100%;
     background-repeat: no-repeat;
     transition: background-size var(--link-timing);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0.25rem;
     padding: 0;
     color: #d6d6d6;
     background-color: var(--primaryBackgroundColor);
     border-color: transparent;
     border-radius: 0.35rem;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     border-radius: 0.35rem;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
     border-radius: 0.35rem;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
     color: var(--primaryBackgroundColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-top: 0.25rem;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 0.35rem 0;
    border-top: solid 0.2rem var(--accentColor);
    border-bottom: solid 0.2rem var(--accentColor);
}
 
/* ---- INFO PANE ---- */
 
:root {
    --linkColor: var(--selectionColor);
    --radius-adjust: 0.325rem;
    --shadow: rgba(0,0,0,0.2);
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 1rem;
}
#page-content .rate-box-with-credit-button {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 3px 1px var(--shadow);
    border-radius: var(--radius-adjust);
    padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
#page-content a.fa {
    transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: var(--textColor);
 
    padding-top: 0.25rem;
    padding-bottom: 0.0725rem;
    width: 0.9rem;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
    background-size: 100% 100%;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px var(--primaryBackgroundColor);
}
 
#page-content .creditButtonStandalone {
    margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
    border-radius: 1rem;
    color: var(--textColor);
    text-align: center;
    background: initial;
    box-shadow: 0 0 2px 1px var(--shadow);
    padding: 0.24rem;
 
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:focus {
    text-decoration: none;
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    box-shadow: none;
    margin: unset;
    margin-bottom: 1rem;
    background-color: var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 3px 1px var(--shadow);
    padding: 0.275rem;
}
 
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:hover, .page-rate-widget-box .cancel a:focus {
    color: var(--textColor);
    background: unset;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: var(--primaryBackgroundColor) !important;
    color: var(--textColor) !important;
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 1px var(--primaryBackgroundColor);
    border-bottom: solid 1px var(--primaryBackgroundColor);
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
.page-rate-widget-box .cancel {
    background-color: var(--primaryBackgroundColor);
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
/* ---- PAGE ELEMENTS ---- */
 
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headerColor);
    font-family: var(--header-font);
    font-weight: normal;
    margin: 0.45em 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.45em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
 
hr {
    height: 0.25rem;
    margin: 1.75rem 0;
    background-color: transparent;
    border-top: solid 0.125rem var(--headerColor);
    border-bottom: solid 0.125rem var(--headerColor);
    clear: both;
}
 
blockquote,
div.blockquote {
    background-color: var(--primaryBackgroundColor);
    border: none;
    border-left: solid 0.2rem var(--headerColor);
    padding: 0.1rem 1rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    position: relative;
}
blockquote::before, blockquote::after,
div.blockquote::before, div.blockquote::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0;
    background-color: var(--headerColor);
}
blockquote::before, div.blockquote::before {
    top: 0;
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
blockquote::after, div.blockquote::after {
    bottom: 0;
    transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg);
}
 
#toc {
    display: block;
    background-color: #FEFBF8;
    border: none;
    padding: 0.1rem 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    padding: 0.75em;
    position: relative;
}
#toc::before, #toc::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
#toc::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
#toc::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#toc-list {
    font-family: var(--header-font);
}
#toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; }
#toc-list > div:not([style*="margin-left: 1em;"]) { display: none; }
 
.scp-image-block {
    border: solid 8px var(--primaryBackgroundColor);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}
.scp-image-block::before, .scp-image-block::after {
    content:'';
    position: absolute;
    pointer-events: none;
    border: solid 0.25rem var(--headerColor);
    transform: rotate(25deg);
}
.scp-image-block::before {
    right: -0.135rem;
    height: 36px;
    width: 9px;
    top: -14.25px;
    border-radius: 0 0 2rem 2rem;
    border-top: none;
}
.scp-image-block::after {
    top: -25px;
    right: -0.94rem;
    height: 16px;
    width: 14px;
    border-radius: 2rem 2rem 0 0;
    border-bottom: solid 0.55rem transparent;
    z-index: -1;
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 4px var(--primaryBackgroundColor);
    color: var(--textColor);
}
.scp-image-block.block-left,
.scp-image-block.block-right {
    margin: 0.25rem 2rem 0.625rem;
}
.scp-image-block.block-left { margin-left: 0.5rem; }
.scp-image-block.block-right { margin-right: 0.5rem; }
@media (max-width: 640px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--headerColor);
    color: var(--headerColor);
    background-color: var(--primaryBackgroundColor);
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--headerColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background-color: var(--primaryBackgroundColor);
    border-radius: 0.35rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
 
#page-content .collapsible-block-folded {
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100% ;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:focus-within {
    background-size: 100% 100% ;
    transition: background-size var(--link-timing);
}
#page-content .collapsible-block-unfolded-link {
    background-color: var(--accentColor);
    box-shadow: 0 0 0 0.2rem var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
#page-content .collapsible-block-link {
    display: inline-flex;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--textColor);
    font-weight: bold;
}
#page-content .collapsible-block-unfolded-link .collapsible-block-link {
    color: var(--primaryBackgroundColor);
}
 
/* Footnotes */
a.footnoteref {
    padding: 0 0.25em 1px;
    margin-left: -0.15em;
}
 
.hovertip {
    font-size: 1.25em;
    background-color: #FEFBF8 !important;
    border: none !important;
    border-left: solid 0.2rem var(--accentColor)!important;
    color: var(--textColor) !important;
    border-radius: 0 1rem;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    padding: 0.35rem;
    box-sizing: border-box;
    width: min(24rem, 60vw)!important;
 
    top: initial!important;
    left: initial!important;
    position: fixed! important;
 
    display: block!important;
    bottom: 2rem;
    right: -25rem;
 
    transition: right 0.45s cubic-bezier(.6,.18,.27,.88);
    transition-delay: 0.455s;
    z-index: 29;
}
.hovertip::before {
    content: "";
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
div[id$="button-hovertip"] { transition-delay: 0s; }
 
.hovertip[style*="display: block"],
.hovertip:hover {
    z-index: 30;
    right: 1rem;
    transition-delay: 0s;
}
 
.footnote .f-heading {
    font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
.footnotes-footer {
    border: none;
    border-left: solid 0.2rem var(--accentColor);
    padding: 0.1rem 1rem 1rem 1.25rem;
    position: relative;
    border-radius: 0 1.25rem;
}
.footnotes-footer::before {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    left: 0; top: 0;
    background-color: var(--accentColor);
    transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
 
.footnotes-footer .title {
    color: var(--textColor);
    font-family: var(--header-font);
    margin: 0 0 0.625rem 0;
}
 
/*-- tags --*/
 
#main-content .page-tags a {
    height: 0.8125rem;
    font-size: 0.6875rem;
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor);
    border-radius: 0.35rem;
    margin: .25rem .2rem;
    padding: 0.21rem 0.35rem 0.22rem 0.3rem;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 0 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
    background-size: 100% 100%;
    text-decoration: none;
}
#main-content .page-tags a:before {
    content: "⬤";
    font-size: 4px;
    padding-right: 0.2rem;
    display: inline-block;
}
 
.page-tags span {
    border-top: solid 0.125rem var(--primaryBackgroundColor);
}
 
/* Pop-Up Windows */
.owindow {
    background-color: var(--primaryBackgroundColor);
    border: none;
}
 
.owindow .modal-header {
    background-color: transparent;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: transparent;
    color: var(--headerColor);
    border-bottom: 1px solid var(--headerColor);
}
 
.owindow .button-bar a {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
#page-content .modalbox {
    background: #FEFBF8;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#page-content .modalbox hr { margin: 0.75rem 1rem; }
 
/* Edit Buttons */
.buttons .btn {
    background-color: var(--primaryBackgroundColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: var(--accentColor);
    color: var(--primaryBackgroundColor);
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: var(--primaryBackgroundColor);
}
 
/* ---- CUSTOM SYNTAX ----*/
 
#page-content .section-header {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 3.5rem;
    margin-bottom: 0.75rem;
    clear: both;
}
#page-content .breaker + .section-header {
    margin-top: 1.5rem;
}
.section-header::before, .section-header::after {
    content: "";
    flex-grow: 1;
    height: 0.175rem;
    margin: auto -0.625rem auto auto;
    background-color: var(--primaryBackgroundColor);
}
.section-header::after {
    margin: auto auto auto -0.625rem;
}
 
.section-header h1 {
    width: max-content;
    margin: 0 auto;
    text-align: center;
    padding: 0.05rem 1.5rem;
    border-radius: 0rem 0.875rem;
    border-bottom: solid 0.2rem var(--accentColor);
    border-top: solid 0.2rem var(--accentColor);
    position: relative;
}
.section-header h1::before {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-0.3rem, -0.4rem) rotate(45deg);
}
.section-header h1::after {
    content: "";
    background-color: var(--accentColor);
    display: block;
    width: 0.6rem; height: 0.6rem;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0.3rem, 0.4rem) rotate(45deg) ;
}
.section-header h1 span {
    width: max-content;
    margin: auto;
}
 
/*-----------------*/
 
.s-title {
    font-size: 110%;
    font-weight: bold;
    display: inline;
    padding: 0 0.15em;
    padding-bottom: 0.1em;
    border-bottom: solid 0.1rem currentColor;
    border-top: solid 0.1rem currentColor;
}
 
.gallery-frame {
    box-sizing: border-box;
    background-color: #FFF4E9;
    padding: 0.75rem;
    border: inset 0.325rem var(--headerColor);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
    margin: auto;
}
.gallery-frame > img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); }
 
.hover:hover {
    text-decoration: none;
}
.hover span { display: none; }
.hover:hover span {
    position: absolute;
    display: inline;
    height: auto;
    max-width: 25%;
    background-color: var(--headerColor);
    color: #FEFBF8;
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-bottom-right-radius: 1rem;
}
 
.f-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.f-flex > div {
    flex-basis: 18rem;
    flex-grow: 1;
}
.f-flex.three > div {
    flex-basis: 13rem;
    flex-grow: 1;
}
.f-flex.data > div {
    padding: 0.65rem 0.375rem;
}
.f-flex.data > div:hover {
    z-index: 9;
}
 
.f-con {
    border: none;
    padding: 0.15rem 0.75rem;
    margin: 0.85rem;
    position: relative;
    border-radius: 0 1.25rem;
    background-color: #FFF4E9;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#page-content .f-flex .f-con { max-width: 25rem; }
.f-con h4 {
    background-color: var(--headerColor);
    color: #FEFBF8;
    padding: 0.1rem 0;
    border-radius: 0 0.625rem;
}
 
.placard {
    display: inline-block;
    position: relative;
    padding: 0.45rem 0.65rem;
    margin: -1.05rem -0.5rem -1.3rem;
    border: solid 1em transparent;
    background: var(--primaryBackgroundColor) padding-box;
    clip-path: polygon(0 3em, 3em 0, 100%  0, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0 100%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.placard::before, .placard::after {
    position: absolute;
    width: 3em;
    height: .35em;
    background: radial-gradient(at 50% 0, rgba(0,0,0,0.17), rgba(0,0,0,0) 65%);
    content: "";
}
.placard::before {
    top: 0.45em;
    left: -0.95em;
    transform: rotate(-45deg);
}
.placard::after {
    bottom: 0.45em;
    right: -0.95em;
    transform: rotate(135deg);
}
 
/*---- Side ToC setup ----*/
 
.anchor {
    position: sticky;
    height:0;
    top: 0.5rem;
    z-index: 4;
}
.tocbox {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: max(-18.75rem, -17vw);
    z-index: 4;
    box-sizing: border-box;
    width: max-content;
    pointer-events: none;
}
 
#page-content .tocbox .toc-u {
    padding: 0.5rem;
    background-color: #FEFBF8;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-right: solid 0.2rem var(--headerColor);
    position: relative;
    width: 15rem;
    max-height: calc(98vh - 2rem);
    max-width: calc((30vw - 50% - 6rem)/1.2);
    margin-right: 0; margin-left: auto;
    pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
    content: "";
    display: block;
    height: 0.5rem; width: 0.5rem;
    position: absolute;
    right: 0;
    background-color: var(--headerColor);
}
.toc-u::before {
    top: 0;
    transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
    bottom: 0;
    transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
 
#page-content .tocbox .toc-u #toc-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 84vh;
    padding: 0 0.5em 1em;
    scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
    width: 6px;
}
 
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
    display: contents;
}
 
#toc-list > div { position: relative; }
#toc-list > div[style*="1em"]::before {
    content: "•";
    display: inline-block;
    position: absolute;
    left: -0.75em;
    color: var(--accentColor);
}
 
@media (max-width: 1340px) {
    .anchor {
        filter: none;
        transition: filter 0.2s ease-out;
     }
    .tocbox {
        right: -1rem;
        width: unset;
    }
    .tocbox::before {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
        width: 1.5rem; height: 100%;
        top: 0; right: -0.25rem;
        pointer-events: all;
}
    .tocbox::after {
        content: "";
        display: block;
        position: absolute;
        background-color: transparent;
 
        width: 0; height: 0;
        border: solid 1rem transparent;
        border-left-width: 0.5rem;
        border-right-color: var(--headerColor);
 
        top: calc(50% - 1rem); right: 0;
        pointer-events: all;
        transition: border-right-width 0.15s ease-out;
    }
    #page-content .tocbox .toc-u {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 60vw;
        box-shadow: none;
        clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
        transition: clip-path 0.2s ease-out;
        pointer-events: none;
    }
 
    .anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
    .tocbox:hover {
        pointer-events: all;
    }
    .tocbox:hover::after {
        border-right-width: 0;
    }
    #page-content .tocbox:hover .toc-u {
        pointer-events: all;
        clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
    }
}
 
/* ---- FOOTER & LICENSE AREA ---- */
 
#footer, #license-area {
    background-color: #FFF4E9;
    color: var(--textColor);
}
#footer a { color: var(--accentColor); }
 
#footer {
    padding-top: 1rem;
}
#license-area {
    padding-top: 0;
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- MOBiLE QUERY ---- */
@media (max-width: 767px) {
 
    div#header, div#top-bar {
        width: 100%;
        max-width: 100%;
    }
 
    #login-status {
        padding-top: 0rem;
        padding-left: 0.3rem;
    }
    #login-status span.printuser  {
        font-size: 0;
    }
    #login-status span.printuser img {
        font-size: 0;
        transform: translate(6px, 5px);
    }
    #login-status a#my-account {
        display: none;
    }
 
    #main-content {
        padding: 0.5em 1.75em 0.75em;
    }
    #side-bar .close-menu {
        opacity: 0;
        margin-left: 18.75em;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
 
    :root {
        --header-title: "SCPF News";
    }
 
    #page-title, .meta-title { font-size: 2.4em; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.25em; }
    h4 { font-size: 1.05em; }
    h5 { font-size: 0.9em; }
    h6 { font-size: 0.8em; }
}