Flopstyle: LITE

Link to article: Flopstyle: LITE.

/* HIDE PAGE TITLE */
 #page-title{
     display: none;
}

/* DOCUMENTATION CODE */
 .code{
     text-align: left;
}
 .code.slim{
     width: 60%;
     margin: 1em auto;
     color: black;
}
 tt{
     margin: 0 !important;
     padding: .2em .4em !important;
     background-color: hsl(0, 100%, 90%) !important;
     border-radius: .469em !important;
     font-size: unset;
}

/* CODE BY WOEDENAZ */
 :root{
     --white-monochrome: hsl(0, 0%, 95%);
}
 span.pointer{
     font-family: var(--mono-font);
     display: inline-block;
     height: .8125rem;
     line-height: .75rem;
     line-height: .8125rem;
     font-size: .625rem;
     font-size: .6875rem;
     background: var(--accentColor);
     color: var(--white-monochrome);
     -webkit-border-bottom-right-radius: .25rem;
     -moz-border-radius-bottomright: .25rem;
     border-bottom-right-radius: .25rem;
     -webkit-border-top-right-radius: .25rem;
     -moz-border-radius-topright: .25rem;
     border-top-right-radius: .25rem;
     margin: 0 0 0 .75rem;
     padding: .1875rem .3125rem .1875rem 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 span.pointer::before, span.pointer::after{
     float: left;
     position: relative;
}
 span.pointer::before{
     content: "";
     top: -.1875rem;
     left: -.625rem;
     width: 0;
     height: 0;
     border-color: transparent var(--accentColor) transparent transparent;
     border-style: solid;
     border-width: .5rem .5rem .5rem 0;
     padding: 0 .0625rem .1875rem;
}
 span.pointer::after{
     content: "";
     top: 0;
     left: -.5rem;
     width: .5rem;
     height: 1rem;
     color: var(--white-monochrome);
     font-size: 1rem;
     line-height: .6em;
     -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
     mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: 1rem auto;
     mask-size: 1rem auto;
     background-color: var(--white-monochrome);
}
 @media only screen and (max-width: 500px){
     span.pointer{
         width: -webkit-calc(100% - 1rem);
         width: -moz-calc(100% - 1rem);
         width: calc(100% - 1rem);
         height: auto;
         padding-left: .5rem;
         line-height: 1.5em;
    }
     span.pointer::after{
         -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
         mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
         -webkit-mask-size: contain;
         mask-size: contain;
         mask-position: center center;
    }
}

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle/2);

```
text-align: center;
```
```
text-align: center;
```
```
text-indent: 0;
```
```
clear: left;
```
```
clear: left;
```

```
limit
```
```
anchor
```
```
authorbox
```
```
flavorbox
```
```
flavorbox
```
```
meta-title
```
```
pseudocrumbs
```
```
templateInfo
```
```
centered
```
```
raisa-header
```
```
code
```
```
slim
```
```
raisa-header
```
```
pink-header
```
```
code
```
```
slim
```
```
pink-header
```
```
oracle-header
```
```
img-resize
```
```
code
```
```
slim
```
```
oracle-header
```
```
img-resize
```
```
cicapoco-header
```
```
img-resize
```
```
code
```
```
slim
```
```
cicapoco-header
```
```
img-resize
```
```
content-warning
```
```
code
```
```
slim
```
```
content-warning
```
```
blockquote
```
```
code
```
```
slim
```
```
blockquote
```
```
alt-blockquote
```
```
code
```
```
slim
```
```
alt-blockquote
```
```
lightweight
```
```
code
```
```
slim
```
```
lightweight
```
```
card-block
```
```
code
```
```
slim
```
```
card-block
```
```
log-header
```
```
code
```
```
slim
```
```
log-header
```
```
report-box
```
```
code
```
```
slim
```
```
report-box
```
```
report-box
```
```
realistic-shadow
```
```
code
```
```
slim
```
```
report-box
```
```
realistic-shadow
```
```
report-box
```
```
red-tint
```
```
code
```
```
slim
```
```
report-box
```
```
red-tint
```
```
report-box
```
```
orange-tint
```
```
code
```
```
slim
```
```
report-box
```
```
orange-tint
```
```
report-box
```
```
yellow-tint
```
```
code
```
```
slim
```
```
report-box
```
```
yellow-tint
```
```
report-box
```
```
green-tint
```
```
code
```
```
slim
```
```
report-box
```
```
green-tint
```
```
report-box
```
```
cyan-tint
```
```
code
```
```
slim
```
```
report-box
```
```
cyan-tint
```
```
report-box
```
```
blue-tint
```
```
code
```
```
slim
```
```
report-box
```
```
blue-tint
```
```
report-box
```
```
magenta-tint
```
```
code
```
```
slim
```
```
report-box
```
```
magenta-tint
```
```
report-box
```
```
grey-tint
```
```
code
```
```
slim
```
```
report-box
```
```
grey-tint
```
```
o5-box
```
```
code
```
```
slim
```
```
o5-box
```
```
faux-source
```
```
code
```
```
slim
```
```
faux-source
```
```
narration
```
```
justified
```
```
indented
```
```
code
```
```
slim
```
```
narration
```
```
justified
```
```
indented
```
```
warning-notice
```
```
code
```
```
slim
```
```
warning-notice
```
```
journal
```
```
code
```
```
slim
```
```
journal
```
```
journal
```
```
sms-message
```
```
code
```
```
slim
```
```
sms-message
```
```
sms-message
```
```
code
```
```
slim
```
```
rev-red
```
```
code
```
```
slim
```
```
rev-red
```
```
rev-green
```
```
code
```
```
slim
```
```
rev-green
```
```
rev-blue
```
```
code
```
```
slim
```
```
rev-blue
```
```
rev-yellow
```
```
code
```
```
slim
```
```
rev-yellow
```
```
terminal-span
```
```
terminal-span
```
```
terminal-span
```
```
code
```
```
slim
```
```
terminal-span
```
```
blinkbar
```
```
blinkbar
```
```
code
```
```
slim
```
```
blinkbar
```
```
lite-heading
```
```
code
```
```
slim
```
```
lite-heading
```
```
lite-heading
```
```
code
```
```
slim
```
```
lite-heading
```
```
image-showcase
```
```
block-center
```
```
code
```
```
slim
```
```
image-showcase
```
```
block-center
```
```
scene-break
```
```
code
```
```
slim
```
```
scene-break
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav-prev
```
```
code
```
```
slim
```
```
listPagesNav
```
```
listPagesNav-next
```
```
listPagesNav-prev
```
```
fade-away
```
```
code
```
```
slim
```
```
fade-away
```
```
footing
```
```
code
```
```
slim
```
```
footing
```
```
related-flex
```
```
related
```
```
code
```
```
slim
```
```
related-flex
```
```
related
```
```
series-nav
```
```
code
```
```
slim
```
```
series-nav
```
```
orderwrapper
```
```
council
```
```
ordertitle
```
```
orderdescription
```
```
itemno
```
```
code
```
```
orderwrapper
```
```
council
```
```
ordertitle
```
```
orderdescription
```
```
itemno
```
```
templateInfo
```
```
templateInfo
```
```
templateInfo
```
```
code
```
```
terminal
```
```
templateInfo
```
```
templateInfo
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
templateInfo
```
```
code
```
```
terminal
```
```
templateInfo
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
centered
```
```
card-block
```
```
anchor
```
```
pointer
```
```
authorbox
```
```
pointer
```
```
code
```
```
terminal
```
```
card-block
```
```
limit
```
```
pointer
```
```
anchor
```
```
pointer
```
```
sidebox
```
```
pointer
```
```
centered
```
```
limit
```
```
anchor
```
```
sidebox
```
```
limit
```
```
anchor
```
```
sidebox
```
```
limit
```
```
anchor
```
```
sidebox
```
```
templateInfo
```
```
templateInfo
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
templateInfo
```
```
terminal-span
```
```
terminal-span
```
```
terminal-span
```
```
templateInfo
```
```
centered
```

[[div class="limit"]]
  [[div class="anchor"]]
    [[div class="authorbox"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= **By:** %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

[[iftags +theme]]
      [[div class="flavorbox"]]
This is a working example of the {{authorbox}}. Consult the **[#Sideboxes Sideboxes]** subsection for further info.
      [[/div]]
= ⮤ This is a {{flavorbox}} ⮥
[[=]]
To create one, copy the following div
and paste it inside your {{authorbox}}:
[[/=]]
= {{@@[[div class="flavorbox"]]@@}}
[[/iftags]]
    [[/div]]
  [[/div]]
[[/div]]

[[iftags +theme]]
[[module CSS]]
/* HIDE PAGE TITLE */
 #page-title{
     display: none;
}

/* DOCUMENTATION CODE */
 .code{
     text-align: left;
}
 .code.slim{
     width: 60%;
     margin: 1em auto;
     color: black;
}
 tt{
     margin: 0 !important;
     padding: .2em .4em !important;
     background-color: hsl(0, 100%, 90%) !important;
     border-radius: .469em !important;
     font-size: unset;
}

/* CODE BY WOEDENAZ */
 :root{
     --white-monochrome: hsl(0, 0%, 95%);
}
 span.pointer{
     font-family: var(--mono-font);
     display: inline-block;
     height: .8125rem;
     line-height: .75rem;
     line-height: .8125rem;
     font-size: .625rem;
     font-size: .6875rem;
     background: var(--accentColor);
     color: var(--white-monochrome);
     -webkit-border-bottom-right-radius: .25rem;
     -moz-border-radius-bottomright: .25rem;
     border-bottom-right-radius: .25rem;
     -webkit-border-top-right-radius: .25rem;
     -moz-border-radius-topright: .25rem;
     border-top-right-radius: .25rem;
     margin: 0 0 0 .75rem;
     padding: .1875rem .3125rem .1875rem 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 span.pointer::before, span.pointer::after{
     float: left;
     position: relative;
}
 span.pointer::before{
     content: "";
     top: -.1875rem;
     left: -.625rem;
     width: 0;
     height: 0;
     border-color: transparent var(--accentColor) transparent transparent;
     border-style: solid;
     border-width: .5rem .5rem .5rem 0;
     padding: 0 .0625rem .1875rem;
}
 span.pointer::after{
     content: "";
     top: 0;
     left: -.5rem;
     width: .5rem;
     height: 1rem;
     color: var(--white-monochrome);
     font-size: 1rem;
     line-height: .6em;
     -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
     mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: 1rem auto;
     mask-size: 1rem auto;
     background-color: var(--white-monochrome);
}
 @media only screen and (max-width: 500px){
     span.pointer{
         width: -webkit-calc(100% - 1rem);
         width: -moz-calc(100% - 1rem);
         width: calc(100% - 1rem);
         height: auto;
         padding-left: .5rem;
         line-height: 1.5em;
    }
     span.pointer::after{
         -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
         mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
         -webkit-mask-size: contain;
         mask-size: contain;
         mask-position: center center;
    }
}
[[/module]]

= [[size 80%]]whoever gave me the power to edit CSS made a grave mistake[[/size]]

[[div class="meta-title"]]
Flopstyle: LITE
[[/div]]

[[div class="pseudocrumbs"]]
[[[sigma-9-themes|Sigma Themes]]] >> Flopstyle: LITE
[[/div]]

[[>]]
**Rating:**
[[module Rate]]
**Rating w/ Info Pane:**
[[include :scp-wiki:info:start]]
[[<]]
Thank you to [[*user stormbreath]] for his help, and [[*user Croquembouche]] for looking this over.

Select CSS styles are based on the [[[SCP Style Resource]]] (attributed where necessary).
[[/<]]
[[include :scp-wiki:info:end]]
[[/>]]

[[div class="templateInfo"]]
+* Example Formatting
[[/div]]

[[div class="centered"]]
[[collapsible show="▷ Show Extra Features ◁" hide="△ Hide Extra Features △"]]
[[/div]]
@@ @@
[[tabview]]
[[tab Custom Div Blocks]]

[[note]]
**Each div block example contains:**
[[<]]
* A visual appearance.
* Usage syntax.
* Some may also include a brief description of intended use.
[[/<]]
[[/note]]
@@ @@
[[div class="raisa-header"]]
++++* RAISA Notice Header
-- Maria Jones, Director, RAISA
----
[[div class="code slim"]]
@@[[div class="raisa-header"]]@@
@@++++* Heading@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="pink-header"]]
++++* Pretty Header
-- Maria Jones, Director, //Fabulous// ✧･ﾟ: *✧･ﾟ:*
----
[[div class="code slim"]]
@@[[div class="pink-header"]]@@
@@++++* Heading@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="oracle-header"]]
[[div class="img-resize"]]
[[image https://scp-wiki.wdfiles.com/local--files/spc-993/spcheader.png]]
[[/div]]
@@ @@
++++* From the Desk of ORACLE Header
-- Nathan Jones, Commissioner, CICAPOCO
@@ @@
----
[[div class="code slim"]]
@@[[div class="oracle-header"]]@@
@@[[div class="img-resize"]]@@
@@[[image URL_HERE]]@@
@@[[/div]]@@
@@++++* Heading@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="cicapoco-header"]]
[[div class="img-resize"]]
[[image https://scp-wiki.wdfiles.com/local--files/spc-993/spcheader.png]]
[[/div]]
@@ @@
++++* NOTICE FROM THE CENTRAL INTELLIGENCE COORDINATION AND PROJECTS OPERATION COMMAND OFFICE
@@ @@
----
[[div class="code slim"]]
@@[[div class="cicapoco-header"]]@@
@@[[div class="img-resize"]]@@
@@[[image URL_HERE]]@@
@@[[/div]]@@
@@++++* NOTICE FROM THE CENTRAL INTELLIGENCE COORDINATION AND PROJECTS OPERATION COMMAND OFFICE@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="content-warning"]]
⚠️ **CONTENT WARNING** ⚠️

[[div class="code slim"]]
@@[[div class="content-warning"]]@@
@@⚠️ **CONTENT WARNING** ⚠️@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="blockquote"]]
Regular Quote Block
----
[[div class="code slim"]]
@@[[div class="blockquote"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="alt-blockquote"]]
Alternative Quote Block
----
[[div class="code slim"]]
@@[[div class="alt-blockquote"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="lightweight" style="text-align: center;"]]
Lightweight Quote Block
----
[[div class="code slim"]]
@@[[div class="lightweight"]]@@
Text
@@[[/div]]@@
[[/div]]
@@ @@
[[/div]]

[[div class="card-block" style="text-align: center;"]]
Decorative Quote Block
----
[[div class="code slim"]]
@@[[div class="card-block"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="log-header"]]
+++* Log Header
//For Use Above Interview/Exploration Logs//
----
[[div class="code slim"]]
@@[[div class="log-header"]]@@
@@+++* Heading@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="report-box"]]
+++* Report Block
//For Internal Documentation//
----
[[div class="code slim"]]
@@[[div class="report-box"]]@@
@@+++* Heading@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="report-box realistic-shadow"]]
+++* Report Block w/ Realistic Shadow
----
[[div class="code slim"]]
@@[[div class="report-box realistic-shadow"]]@@
[[/div]]
[[/div]]

Report Block Alternatives:

[[div class="report-box red-tint"]]
[[div class="code slim"]]
@@[[div class="report-box red-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box orange-tint"]]
[[div class="code slim"]]
@@[[div class="report-box orange-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box yellow-tint"]]
[[div class="code slim"]]
@@[[div class="report-box yellow-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box green-tint"]]
[[div class="code slim"]]
@@[[div class="report-box green-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box cyan-tint"]]
[[div class="code slim"]]
@@[[div class="report-box cyan-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box blue-tint"]]
[[div class="code slim"]]
@@[[div class="report-box blue-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box magenta-tint"]]
[[div class="code slim"]]
@@[[div class="report-box magenta-tint"]]@@
[[/div]]
[[/div]]

[[div class="report-box grey-tint"]]
[[div class="code slim"]]
@@[[div class="report-box grey-tint"]]@@
[[/div]]
[[/div]]

[[div class="o5-box"]]
Overseer Document Block
----
[[div class="code slim"]]
@@[[div class="o5-box"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="faux-source"]]
Faux "Page Source" Block
----
[[div class="code slim"]]
@@[[div class="faux-source"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="narration justified indented"]]
= Narration Block

//Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.//

//Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.//
----
[[div class="code slim" style="text-indent: 0;"]]
@@[[div class="narration justified indented"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="warning-notice"]]
+* WARNING: NOTICE BLOCK
----
//For Use When Scaring the Heck out of Your Reader//
----
[[div class="code slim"]]
@@[[div class="warning-notice"]]@@
@@+* WARNING@@
@@----@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="journal"]]
__**Subject:__ Journal Block**
@@ @@
//For Use When You Want Authenticity//
@@ @@
[[div class="code slim"]]
@@[[div class="journal"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="journal"]]
__**Note:__** This div does not allow you to create a double linebreak. To achieve a double linebreak, do the following:
@@ @@
[[<]]
1. After each line of text, press enter.
2. In that new line, encase a space with two sets of {{@@}} (one on each side).
3. Press enter again and continue.
[[/<]]
[[/div]]

[[div class="sms-message"]]
SMS Message Block 😳

[[div class="code slim"]]
@@[[div class="sms-message"]]@@
Text
@@[[/div]]@@
[[/div]]
[[/div]]

[[div class="sms-message"]]
For a single SMS Message Block, include the following code under it.
For multiple SMS Message Blocks, include the following code under the final one.

[[div class="code slim"]]
@@[[div style="clear: left;"]]@@
@@[[/div]]@@
[[/div]]
[[/div]]
[[div style="clear: left;"]]
[[/div]]

[[/tab]]
[[tab Special Formatting]]

[[note]]
**Each special formatting example contains:**
[[<]]
* A visual appearance.
* Usage syntax.
[[/<]]
[[/note]]
@@ @@
,,//Red Document Revision Text//,,
[[span class="rev-red"]] Inoculation disseminated. [[/span]]

[[div class="code slim"]]
@@[[span class="rev-red"]] Text [[/span]]@@
[[/div]]
----
,,//Green Document Revision Text//,,
[[span class="rev-green"]] Outdated information appears in __green__. [[/span]]

[[div class="code slim"]]
@@[[span class="rev-green"]] Text [[/span]]@@
[[/div]]
----
,,//Blue Document Revision Text//,,
[[span class="rev-blue"]] Inoculation completed! [[/span]]

[[div class="code slim"]]
@@[[span class="rev-blue"]] Text [[/span]]@@
[[/div]]
----
,,//Yellow Document Revision Text//,,
[[span class="rev-yellow"]] Loading paused. Refresh? [[/span]]

[[div class="code slim"]]
@@[[span class="rev-yellow"]] Text [[/span]]@@
[[/div]]
----
,,//Computer Terminal Text//,,
[[span class="terminal-span"]] [REDACTION] [[/span]]
[[span class="terminal-span"]] [EXPUNGEMENT] [[/span]]
[[span class="terminal-span"]] [DATA LOST] [[/span]]

[[div class="code slim"]]
@@[[span class="terminal-span"]] [TEXT] [[/span]]@@
[[/div]]
----
,,//Blinking Text Cursor//,,
[[span class="blinkbar"]]_[[/span]]

__or__

[[span class="blinkbar"]]|[[/span]]

[[div class="code slim"]]
@@[[span class="blinkbar"]]|[[/span]]@@
[[/div]]
----
,,//Special Heading Area 1//,,
[[div class="lite-heading"]]
----
++* HEADING
+++* SUBHEADING
----
[[/div]]

[[div class="code slim"]]
@@[[div class="lite-heading"]]@@
@@----@@
@@++* HEADING@@
@@+++* SUBHEADING@@
@@----@@
@@[[/div]]@@
[[/div]]
----
,,//Special Heading Area 2//,,
[[div class="lite-heading"]]
----
++* ADDENDA MATERIALS
----
[[/div]]

[[div class="code slim"]]
@@[[div class="lite-heading"]]@@
@@----@@
@@++* ADDENDA MATERIALS@@
@@----@@
@@[[/div]]@@
[[/div]]
----
,,//Alternative Image Showcase//,,
[[div class="image-showcase block-center"]]
[[=image https://scp-wiki.wdfiles.com/local--files/theme:classic/base_image_frame.png]]
[[/div]]

[[div class="code slim"]]
@@[[div class="image-showcase block-center"]]@@
@@[[=image URL_HERE]]@@
@@[[/div]]@@
[[/div]]
----
,,//Fancy Scene/Section Break//,,
[[=image https://scp-wiki.wdfiles.com/local--files/component%3Atheme/logo.png class="scene-break"]]

[[div class="code slim"]]
@@[[=image URL_HERE class="scene-break"]]@@
[[/div]]
----
,,//ListPages Navigation//,,
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
**Next Iteration ▷**
[[/div]]

[[div class="listPagesNav-prev"]]
**◁ Back**
[[/div]]
[[/div]]

[[div class="code slim"]]
@@[[div class="listPagesNav"]]@@
@@[[div class="listPagesNav-next"]]@@
@@[[>]]@@
@@**Next Iteration ▷**@@
@@[[/>]]@@
@@[[/div]]@@

@@[[div class="listPagesNav-prev"]]@@
@@**◁ Back**@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
----
,,//Fade-Out Gradient//,,
[[div class="fade-away"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]

[[div class="code slim"]]
@@[[div class="fade-away"]]@@
@@ @@
@@ @@
@@ @@
@@[[/div]]@@
[[/div]]
----
,,//Page Footing//,,
[[div class="footing"]]
[[/div]]

[[div class="code slim"]]
@@[[div class="footing"]]@@
@@[[/div]]@@
[[/div]]
----
,,//Related Articles Box//,,
[[div class="related-flex"]]
[[div class="related" text]]
**__See Also:__**
* **[[[main|Front Page - SCP Foundation]]]**
[[/div]]
[[/div]]

[[div class="code slim"]]
@@[[div class="related-flex"]]@@
@@[[div class="related"]]@@
@@**__See Also:__**@@
@@* **[[[link-to-a-page|Custom Text]]]**@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
----
,,//Series Navigation//,,
[[div class="series-nav"]]
<< Previous Article | [[size 120%]]Current Article[[/size]] | Next Article >>
[[/div]]

[[div class="code slim"]]
@@[[div class="series-nav"]]@@
<< Previous Article | @@[[size 120%]]Current Article[[/size]]@@ | Next Article >>
@@[[/div]]@@
[[/div]]

[[/tab]]
[[tab Advanced Warning Header]]

[[div class="orderwrapper"]]
[[div class="council"]]
[[/div]]
[[div class="ordertitle"]]
+* TITLE / WARNING
[[/div]]
[[div class="orderdescription"]]
 _
+* SUBTITLE / FOR DIVISION EYES ONLY / DOCUMENT TYPE
This file is classified under Level-X/XXXX clearance.
Unauthorized access is forbidden.
[[/div]]
[[div class="itemno"]]
+* ITEM NUMBER / PROJECT NAME
[[/div]]
[[/div]]

__Source Code__

[[div class="code"]]
@@----@@
@@[[div class="orderwrapper"]]@@
@@[[div class="council"]]@@
@@[[/div]]@@
@@[[div class="ordertitle"]]@@
@@+* TITLE / WARNING@@
@@[[/div]]@@
@@[[div class="orderdescription"]]@@
@@ _@@
@@+* SUBTITLE / FOR DIVISION NAME EYES ONLY / DOCUMENT TYPE@@
@@The following file is classified under Level X/XXXX.@@
@@Unauthorized access is forbidden.@@
@@[[/div]]@@
@@[[div class="itemno"]]@@
@@+* ITEM NUMBER / PROJECT NAME@@
@@[[/div]]@@
@@[[/div]]@@
@@----@@
[[/div]]

[[/tab]]
[[/tabview]]

[[/collapsible]]

[[div class="templateInfo"]]
+* What Is This?
----
This is a theme created by [[*user Lt Flops]]. It is an aesthetic improvement and extension of **Sigma-10** (the Wiki's main theme).

Only use this if you understand what you're doing.

This theme is **__incompatible__** with **Black Highlighter**, **BASALT**, and **Sigma+**.
[[/div]]
[[div class="templateInfo"]]
+++* Dark Mode Counterpart

= [[size 200%]] **[[[theme:flopstyle-dark|Flopstyle: DARK]]]** [[/size]]
[[/div]]
@@ @@
[[div class="templateInfo"]]
+* How to Use
----
To use this theme, please copy and paste this syntax onto the top of your page:

[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle##**##var(--c-keyword)|]]##**
[[/div]]

If you wish to use this theme with another Sigma theme, paste Flopstyle __**first**__ and your chosen theme in the next line. Some fine-tuning may be necessary.

Please also note that this theme uses the following components:

# [[[*/component:croqstyle|Croqstyle CSS]]], by [[*user Croquembouche]]
# [[[*/component:fade-in|Fade In]]] (set at {{speed=1}}) by [[*user Croquembouche]]
# [[[*/component:toggle-sidebar|Toggle Sidebar]]], by [[*user EstrellaYoshte]]
[[/div]]
@@ @@
[[div class="templateInfo"]]
= **This theme was designed with the following component(s) in mind...**
[[/div]]
@@ @@
[[div class="templateInfo"]]
+++* [[[component:centered-header-sigma-9|Centered Header Sigma]]]
----
To use this component, please paste the following syntax //after// Flopstyle. If your page uses another custom Sigma theme, please paste the following syntax //after// the custom theme:

[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:component:centered-header-sigma-9##**##var(--c-keyword)|]]##**
[[/div]]

You may alter the header, sub-header, header colour, sub-header colour, and header logo as you see fit. Just paste this syntax //after// the Centered Header {{include}}, then style it accordingly:

[[div class="code terminal"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|CSS##**##var(--c-keyword)|]]##**
@@ @@##var(--c-symbol)|:root##{
@@   @@##var(--c-builtin)|@@--@@header-title##: ##var(--c-value)|"TITLE"##;
@@   @@##var(--c-builtin)|@@--@@header-subtitle##: ##var(--c-value)|"SUBTITLE"##;
@@   @@##var(--c-builtin)|@@--@@titleColor##: ##var(--c-value)|title_colour##;
@@   @@##var(--c-builtin)|@@--@@subtitleColor##: ##var(--c-value)|subtitle_colour##;
@@   @@##var(--c-builtin)|@@--@@lgurl##: ##var(--c-builtin)|url##(##var(--c-string)|@@URL_HERE@@##);
}
**##var(--c-keyword)|[[/module]]##**
[[/div]]

[[/div]]

[[div class="templateInfo"]]
+++* [[[component:flops-header|Flops Header]]]
----
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:component:flops-header##
**##var(--c-keyword)||####var(--c-builtin)|item####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|containment####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|level####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|security####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption-bg-color####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]

[[/div]]

[[div class="templateInfo"]]
[[# Sideboxes]]
+++* Sideboxes
----
= //Adapted from [[[theme:penumbra|Penumbra Theme]]] by [[*user EstrellaYoshte]].//

Sideboxes are built-in components that come in two types:

# {{authorbox}}
# {{sidebox}}

Usage instructions vary depending on the type.

* The {{authorbox}} does not display on screens of {{width=1280px}} and smaller, which includes mobile screens. It can be set up to display page and author information.
* The {{sidebox}} collapses into the page edge on screens of {{width=1280px}} and smaller. On those screens, it can be accessed by tapping your finger or hovering your cursor over it. It can be set up to display additional narrative information.

Please consider these conditions before setting up these items -- a large percentage of SCP Wiki users browse via mobile devices.
----
++++* 1. Authorbox
+++++* (See Top Left)
----
By default, the {{authorbox}} is **__opt-out__**. It comes preloaded on all pages that include Flopstyle: LITE. If you wish to //remove// it, please replace this:

[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle##**##var(--c-keyword)|]]##**
[[/div]]

With this:

[[div class="code terminal centered"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|style####var(--c-operator)|=####var(--c-string)|"display: none;"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:flopstyle##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

**Alternative 1:** After removing the {{authorbox}}, you can //replace// it with a custom version that displays any information you desire. This functionality can be especially useful for co-authored, rewritten, or translated pages. For your reference, this is the code that creates the {{authorbox}}:

[[div class="card-block"]]
@@[[div class="anchor"]]@@[[span class="pointer"]]Sets authorbox's sticky position.[[/span]]
@@[[div class="authorbox"]]@@

@@[[module ListPages name="="]]@@
@@||~ %%title%% ||@@
@@||= **By:** %%created_by_linked%% ||@@
@@||~ Published on %%created_at|%d %b %Y%% ||@@
@@[[/module]]@@

@@|| Optional Flavor Text ||@@

@@[[/div]]@@
@@[[/div]]@@[[span class="pointer"]]Sets the end limit of the anchor.[[/span]]
[[/div]]

By default, the {{authorbox}} makes use of ListPages to automate the metadata displayed. You could theoretically copy the ListPages portion of the {{authorbox}} onto //any// Wiki page, and these fields would populate in a way unique to that page. You may, of course, change any of these fields as desired.

You may also edit your custom {{authorbox}} to display flavor text tailored to your page, such as a note to readers.

See the left side of the page for an {{authorbox}} example.

{{flavorbox}} is the only div you should use inside an {{authorbox}}.

**Alternative 2:** If you want, you can move the {{authorbox}} to the right-hand side of the page. To do so, copy this syntax and paste it inside a CSS module at the top of your page:

[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|authorbox##{
@@     @@##var(--c-builtin)|right##: ##var(--c-value)|unset##;
@@     @@##var(--c-builtin)|left##: ##var(--c-value)|103.5%##;
@@     @@##var(--c-builtin)|padding##: ##var(--c-value)|0 0 0 1em##;
}
[[/div]]

If you have a page that does this, I recommend //against// inserting any {{sidebox}}es in that same page, or it will prove rather messy.

If you are planning on inserting any {{sidecontainers}} onto your page, I strongly recommend using the default {{authorbox}}. The reason being, when a right-hand {{authorbox}} and {{sidecontainer}} are used in tandem, they will overlap and become visually messy. This has the potential to be very confusing for readers. So, it's better staying on the safe side.
----
++++* 2. Sidebox
----
The {{sidebox}} is **__opt-in__**. It is set up like this:

[[div class="card-block"]]
@@[[div class="limit"]]@@ [[span class="pointer"]]Sets the start limit of the anchor.[[/span]]
@@[[div class="anchor"]]@@ [[span class="pointer"]]Sets sidebox's sticky position.[[/span]]
@@[[div class="sidebox"]]@@
Desired {{sidebox}} text here.
@@[[/div]]@@
@@[[/div]]@@
Text that the {{sidebox}} associates with.
@@[[/div]]@@ [[span class="pointer"]]Sets the end limit of the anchor.[[/span]]
[[/div]]

I recommend inserting a manual linebreak after {{sidebox}}-associated text. You can achieve this by encasing a space with two sets of {{@@}} (one on each side). The {{sidebox}} will appear alongside this text as you scroll past.
[[/div]]

[[div class="centered"]]
[[collapsible hideLocation="both" show="▷ Show Example ◁" hide="△ Hide Example △"]]
[[<]]

[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
With some finesse, it is possible
[[/div]]
[[/div]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
[[/div]]

[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
to have multiple sideboxes,
[[/div]]
[[/div]]
Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.

Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
[[/div]]

[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
which act like this.
[[/div]]
[[/div]]
Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.

Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
[[/div]]
[[/<]]

@@ @@

[[/collapsible]]
[[/div]]

[[div class="templateInfo"]]
Remember the {{limit}} div. Without a {{limit}}, the {{anchor}} will remain present across the entire page content once you scroll past its starting position.
[[/div]]

[[div class="templateInfo"]]
+++* Misc. Changeable Portions
----
If necessary, you can also edit any of these CSS properties to better suit your page. This list does //not// cover all styles that Flopstyle offers -- but it's a good place to start.
@@ @@
++++* Change Info Bar Properties

[[div class="code terminal"]]
@@ @@##var(--c-symbol)|body##{ ##var(--c-comment)|/* @@--@@ Recolour according to Site Theme @@--@@ */##
@@     @@##var(--c-builtin)|@@--@@barColour##: ##var(--c-value)|bar_colour##;
}
@@ @@##var(--c-symbol)|#u-author_block##{
@@     @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
@@ @@##var(--c-keyword)|.####var(--c-symbol)|translation_block##{
@@     @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]
@@ @@
++++* Change Lite-Heading Subtitle Colour

[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|lite-heading h3##{ ##var(--c-comment)|/* @@--@@ Recolour according to Site Theme @@--@@ */##
@@     @@##var(--c-builtin)|color##: ##var(--c-value)|lite_heading_colour##;
}
[[/div]]
@@ @@
++++* Change Card-Block & Sidebox Border-Left Colour

[[div class="code terminal"]]
@@ @@##var(--c-symbol)|:root##{
@@   @@##var(--c-builtin)|@@--@@accentColor##: ##var(--c-value)|accent_colour##;
}
[[/div]]
@@ @@
++++* Change Simple Warning Header Logo
= (The image must be transparent)
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|warning-notice##{
@@     @@##var(--c-builtin)|background-image##: ##var(--c-builtin)|url##(##var(--c-string)|@@URL_HERE@@##);
@@     @@##var(--c-builtin)|background-size##: ##var(--c-value)|400px##;
}
[[/div]]
@@ @@
++++* Change Advanced Warning Header Logo
= (The image must be transparent)
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|council##{
@@     @@##var(--c-builtin)|background-image##: ##var(--c-builtin)|url##(##var(--c-string)|@@URL_HERE@@##);
}
[[/div]]
@@ @@
++++* Change Series Navigation Background

[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|series-nav##{
@@     @@##var(--c-builtin)|background##: ##var(--c-builtin)|linear-gradient##(##var(--c-value)|to bottom right, hsla(0, 0%, 100%, 1), COLOUR_HERE##);
}
[[/div]]
@@ @@
++++* Hide Page Title

[[div class="code terminal"]]
@@ @@##var(--c-symbol)|#page-title##{
@@     @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]
@@ @@
++++* Hide Footnotes Footer

[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|footnotes-footer##{
@@     @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]

[[/div]]
@@ @@
[[div class="templateInfo"]]
++++* Flops' Personal To-Do List (Please Ignore)
----
# --Defeat the nefarious forces of Skeuomorphism.-- [[span class="terminal-span"]] [COMPLETED] [[/span]]
# --Update theme page layout.-- [[span class="terminal-span"]] [COMPLETED] [[/span]]
# Finish combing through all my articles for CSS I can add to Flopstyle.
 * --“Related Articles” box.-- [[span class="terminal-span"]] [COMPLETED] [[/span]]
 * “Hazard Warning” box.
# Finish updating all my articles with Flopstyle.
[[/div]]
@@ @@
[[div class="templateInfo"]]
+* Source Code
[[/div]]

[[div class="centered"]]
[[collapsible show="▷ Show Code ◁" hide="△ Hide Code △"]]
[[/div]]

[[<]]
[[code type="CSS"]]
@import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap);
[[/code]]

[[code type="CSS"]]
/* Flopstyle: LITE
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
**/

/* -------- SITE HEADER -------- */
 a, body, span{
     word-break: unset;
}
 #header h1 a,
 #header h1 a::before{
     color: hsl(0, 0%, 93%);
     text-shadow: none;
}
 #header h1 a{
     font-family: "Montserrat", "Arial", sans-serif;
     font-size: 170%;
     letter-spacing: 0;
}
 #header h2 span,
 #header h2 span::before{
     color: hsl(60, 62%, 85%);
     font-family: "Montserrat", "Arial", sans-serif;
     font-weight: 500;
     text-shadow: none;
}

/* -------- TOP-BAR -------- */
 #search-top-box,
 #top-bar,
 #login-status{
     right: 0;
}
 #top-bar ul li ul{
     top: 22px;
}
 #search-top-box-form input[type="submit"]{
     font-size: unset;
}
 #search-top-box-input,
 #search-top-box-form input[type="submit"]{
     background-color: hsl(0, 0%, 20%);
     background-image: none;
     border-color: hsl(0, 0%, 60%);
     border-radius: 0;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     background-color: hsl(0, 0%, 30%);
     background-image: none;
     border-color: hsl(0, 0%, 70%);
}
 #top-bar .open-menu a{
     border-radius: unset;
}

/* -------- SIDE-BAR -------- */
 #side-bar .side-block{
     border-color: hsl(0, 0%, 20%);
     border-radius: 0;
}
 #side-bar .heading{
     color: hsl(0, 0%, 5%);
     border-bottom: solid 1px hsl(0, 0%, 20%);
}

/* -------- SIDEBOXES --------
 * By EstrellaYoshte
 * Adapted From 'Penumbra Theme'
**/
 .anchor{
     position: -webkit-sticky;
     position: sticky;
     top: 0;

     z-index: 5;
}
 .authorbox,
 .sidebox{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 18rem);
     margin-right: 8px;
     padding: .3em 1.64em;

     box-sizing: border-box;

     z-index: 5;
}
 .authorbox{
     top: .5em;
     right: 103.5%;
     max-width: calc((100vw - 921.2px) / 2) !important;
     padding-right: 1em;

     font-size: 95%;
}
 .sidebox{
     left: 103.5%;
     margin-left: 1em;
     padding-left: 1em;

     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 73%);
     border-left: 8px solid var(--accentColor);
}
 .authorbox tr th,
 .authorbox tr td,
 .sidebox tr th,
 .sidebox tr td{
     padding: .25em !important;
}
 .flavorbox{
     width: 75%;
     margin: auto auto 5px;
     padding: 0 1em;

     border: 1px solid #888;
}

/* -------- Sidebox Mobile Optimization Courtesy of Woedenaz -------- */
 .limit{
     line-height: 1.5;
     z-index: 5;
}
 .limit br{
     display: block;
}
 @media (max-width: 1280px){
     .sidebox{
         width: auto;
         max-width: 65vw !important;
         top: .75rem;
         right: calc(((100vw - 45.8rem) / 2) * -1);
         left: initial;
         padding: 0 .4rem;

         background-color: var(--accentColor);
         border: 1px solid hsl(0, 0%, 73%);
         border-left: 8px solid var(--accentColor);
         border-radius: 0;

         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         -webkit-transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         -o-transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
    }
     .sidebox::before,
     .sidebox::after{
         content: " ";
         position: absolute;
         right: 0;
    }
     .sidebox::before{
         width: 0;
         height: 0;
         top: calc(50% - .75rem);

         border-top: .75rem solid transparent;
         border-bottom: .75rem solid transparent;
         border-right: .75rem solid var(--accentColor);

         z-index: 10;
         transition: border .1s ease-in-out .1s;
    }
     .sidebox::after{
         width: 100%;
         max-width: .75rem;
         height: 100%;
         max-height: calc(100vh - 18rem);
         top: 0;

         background-color: hsl(0, 0%, 100%);

         z-index: -1;
         transition:
            box-shadow .5s ease-in-out .1s,
            max-width .5s ease-in-out .1s;
    }
     .sidebox > *{
         opacity: 0;
         -webkit-transition: opacity .2s ease-in-out .2s;
         -o-transition: opacity .2s ease-in-out .2s;
         transition: opacity .2s ease-in-out .2s;
    }
     .sidebox:hover{
         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 0);
         clip-path: inset(-.125rem -.25rem 0 0);
         -webkit-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         -o-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
    }
     .sidebox:hover::before{
         border-top: 0 solid transparent;
         border-bottom: 0 solid transparent;
    }
     .sidebox:hover::after{
         max-width: 100%;
         right: 0;
    }
     .sidebox:hover > *{
         opacity: 1;
    }
}
 @media (max-width: 768px){
     .sidebox,
     .sidebox:hover{
         right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
    }
}
 @media (max-width: 1280px){
     .authorbox{
         display: none;
         visibility: hidden;
    }
}

/* -------- GENERAL -------- */
 :root{
   --accentColor: hsl(0, 100%, 30%);
   --vivid-lime-green: hsl(112, 77%, 48%);
}
 body{
     color: hsl(0, 0%, 5%);

     word-break: unset;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus,
 #top-bar ul li ul,
 #side-bar .side-block,
 .page-rate-widget-box,
 .scp-image-block{
     box-shadow: none;
}

/* -------- COLLAPSIBLES -------- */
 .collapsible-block-link {
     font-size: 120%;
     font-weight: bold;
}

/* Licensebox Collapsible */
 .licensebox {
     text-align: center;
}

 .licensebox blockquote,
 .licensebox div.blockquote {
     text-align: left;
}

/* -------- INFO BAR -------- */
 body {
     --barColour: hsl(0, 89%, 18%);
}

 .info-container .collapsible-block-link {
     font-size: 100%;
}

 .info-container div.collapsible-block-content {
     padding: 0 .6rem 3rem;
}

 @media (max-width: 767px) {
     .info-container div.collapsible-block-content div {
          margin-right: 0;
          margin-left: 0;
    }
}

 .info-container .wiki-content-table {
     width: 90%;
}

/* -------- INFO PANE -------- */
 .creditRate{
     margin-right: 0 !important;
}
 .rate-box-with-credit-button{
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .creditButton p a:hover,
 .creditButtonStandalone p a:hover{
     color: var(--vivid-lime-green) !important;
}
 div.credit.first .wiki-content-table {
     width: 100%;
}

/* -------- PAGE RATING -------- */
 .page-rate-widget-box{
     margin-right: 0;
}
 .page-rate-widget-box,
 div.page-rate-widget-box .rate-points{
     border-radius: 0;
}
 .page-rate-widget-box .cancel,
 .page-rate-widget-box .cancel a:hover{
     border-radius: 0 !important;
}

/* -------- FORMATTING | [GENERAL] -------- */
 #page-content h1,
 #page-content h2,
 #page-content h3,
 #page-content h4,
 #page-content h5,
 #page-content h6{
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: .57em;

     line-height: 1.2;
     text-align: center;
     text-underline-offset: 25%;
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;

     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 67%);
}

 ol li{
     margin: 0 0 1em;
}
 ul{
     margin:1em 0;
}
 li, p{
     line-height: 1.5;
     text-underline-offset: 30%;
}
 .footnotes-footer, .bibitems{
     padding: 0 0 .5em;
}

/* -------- IMAGE BLOCK -------- */
.scp-image-block .scp-image-caption{
     font-size: 95%;
     line-height: 1.35;
     text-underline-offset: 30%;
}
 .scp-image-block.block-right{
     margin: 0 0 1em 2em;
}

/* -------- CUSTOM DIV BLOCKS -------- */
 .raisa-header, .pink-header,
 .oracle-header, .cicapoco-header{
     margin-bottom: 1em;
     padding: 0 .5em;

     text-align: center;
}

 .raisa-header{ /* ---- RAISA Notice Header ---- */
     background: hsl(60, 65%, 85%);
     border: 1px solid hsl(0, 0%, 60%);
}

 .pink-header{ /* ---- Pretty Header ---- */
     background: hsl(350, 100%, 85%);
     border: 1px solid hsl(0, 4%, 36%);
}
 .pink-header hr{
     border-color: hsl(0, 4%, 36%);
}

 .oracle-header{ /* ---- SPC's 'From the Desk of ORACLE' Header ---- */
     color: hsl(208, 100%, 97%);
     background: hsl(208, 67%, 44%);
     border: 1px solid hsl(0, 0%, 5%);
}
 .oracle-header hr{
     border-color: hsl(208, 100%, 97%);
}
 .img-resize img{ /* ---- Header Icons (See Example Formatting) ---- */
     float: left;
     width: auto;
     height: 8em;
     margin: .5em;
}

 .cicapoco-header{   /* ---- SPC's RAISA-Equivalent Header ---- */
     background: lightblue;
     border: 1px solid hsl(195, 50%, 39%);
}
 .cicapoco-header hr{
     border-color: hsl(195, 50%, 39%);
}

 .content-warning{   /* ---- Content Warning ---- */
     width: 75%;
     margin: 1rem auto;
     padding: 0 1rem;

     background: white;
     border: 3px double black;

     text-align: center;
}

 blockquote, /* ---- Regular Quote Block ---- */
 div.blockquote{
     background-color: hsl(0, 0%, 96%);
     border: 3px double hsl(0, 0%, 60%);
}
 blockquote table.wiki-content-table th,
 div.blockquote table.wiki-content-table th{
     background-color: hsl(0, 0%, 89%);
}

 .alt-blockquote{ /* ---- Alternative Quote Block ---- */
     margin: 1em 0;
     padding: 0 1em;

     background-color: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 60%);
     border-radius: 1em;
}

 .lightweight{ /* ---- Lightweight Quote Block ---- */
     margin: 1em 3em;
     padding: 0 1em;

     background-color: hsl(0, 0%, 90%);

     text-align: left;
}

 .card-block{ /* ---- Decorative Quote Block ---- */
     margin: 1em 0;
     padding: .6em 1.2em;

     background: hsl(220, 15%, 93%);
     border-left: 8px solid var(--accentColor);
     border-radius: .48em;
}

 blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr{
     border-color: hsl(0, 0%, 67%);
}

 .log-header{ /* ---- Interview/Exploration Log Header ---- */
     margin-bottom: 1em;
     padding: 0 1em;

     background: hsl(0, 0%, 96%);
     border: 3px dashed hsl(0, 0%, 60%);
     border-radius: 2em;
}

 .report-box{ /* ---- Report Block ---- */
     margin: 1em 0;
     padding: 0 1em;

     background-color: hsl(0, 0%, 100%);
     border: medium solid hsl(0, 0%, 5%);
}
 .report-box hr{
     border-color: hsl(0, 0%, 5%);
}

 .realistic-shadow{ /* ---- Better Shadows ---- */
     margin: 1em 0 2em 0;
     box-shadow:
          0 1px 1px hsla(0, 0%, 0%, .23),
          0 2px 2px hsla(0, 0%, 0%, .18),
          0 4px 4px hsla(0, 0%, 0%, .15),
          0 8px 8px hsla(0, 0%, 0%, .13);
}

 .report-box.red-tint{ /* ---- Alternative Report Block Variants ---- */
     background-color: hsl(360, 91%, 86%);
     border-color: hsl(360, 62%, 66%);
}
 .report-box.red-tint hr{
     border-color: hsl(360, 62%, 66%);
}

 .report-box.orange-tint{
     background-color: hsl(30, 91%, 86%);
     border-color: hsl(30, 62%, 66%);
}
 .report-box.orange-tint hr{
     border-color: hsl(30, 62%, 66%);
}

 .report-box.yellow-tint{
     background-color: hsl(60, 91%, 86%);
     border-color: hsl(60, 62%, 66%);
}
 .report-box.yellow-tint hr{
     border-color: hsl(60, 62%, 66%);
}

 .report-box.green-tint{
     background-color: hsl(120, 91%, 86%);
     border-color: hsl(120, 62%, 66%);
}
 .report-box.green-tint hr{
     border-color: hsl(120, 62%, 66%);
}

 .report-box.cyan-tint{
     background-color: hsl(180, 91%, 86%);
     border-color: hsl(180, 62%, 66%);
}
 .report-box.cyan-tint hr{
     border-color: hsl(180, 62%, 66%);
}

 .report-box.blue-tint{
     background-color: hsl(240, 91%, 86%);
     border-color: hsl(240, 62%, 66%);
}
 .report-box.blue-tint hr{
     border-color: hsl(240, 62%, 66%);
}

 .report-box.magenta-tint{
     background-color: hsl(300, 91%, 86%);
     border-color: hsl(300, 62%, 66%);
}
 .report-box.magenta-tint hr{
     border-color: hsl(300, 62%, 66%);
}

 .report-box.grey-tint{
     background-color: hsl(210, 9%, 86%);
     border-color: hsl(210, 15%, 42%);
}
 .report-box.grey-tint hr{
     border-color: hsl(210, 15%, 42%);
}

 .report-box.red-tint blockquote hr, .report-box.red-tint div.blockquote hr,
 .report-box.orange-tint blockquote hr, .report-box.orange-tint div.blockquote hr,
 .report-box.yellow-tint blockquote hr, .report-box.yellow-tint div.blockquote hr,
 .report-box.green-tint blockquote hr, .report-box.green-tint div.blockquote hr,
 .report-box.cyan-tint blockquote hr, .report-box.cyan-tint div.blockquote hr,
 .report-box.blue-tint blockquote hr, .report-box.blue-tint div.blockquote hr,
 .report-box.magenta-tint blockquote hr, .report-box.magenta-tint div.blockquote hr,
 .report-box.grey-tint blockquote hr, .report-box.grey-tint div.blockquote hr{
     border-color: hsl(0, 0%, 67%);
}

 div.o5-box{ /* ---- Overseer Document Block ---- */
     margin: 1em 6em;
     padding: 0 1em;

     background-color: hsl(0, 0%, 75%);
     border: medium solid hsl(0, 0%, 5%);
}
 div.o5-box hr{
     border-color: hsl(0, 0%, 5%);
}

 .faux-source{ /* ---- Mimics "Page Source" Appearance ---- */
     margin-bottom: 1em;
     padding: 0 2em;

     background-color: hsl(0, 0%, 100%);
     border: 1px dashed hsl(0, 0%, 67%);

     font-family: var(--mono-font);
}

 .narration{ /* ---- Mimics the Pages of a Book ---- */
     margin: 1em 0;
     padding: 0 1em;

     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 63%);
}

 .warning-notice{ /* ---- Simple Warning Block (Adapted From 'SCP-3143') ---- */
     padding: 0 1em;

     background-color: hsl(0, 0%, 100%);
     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     border: medium solid hsl(0, 0%, 5%);

     text-align: center;
}
 .warning-notice hr{
     border-color: hsl(0, 0%, 5%);
}

 .journal{ /* ---- Journal Block (Adapted From 'SCP-4003') ---- */
     margin: 1em 0;
     padding: .9em;

     background-image:
       linear-gradient(to top,
          hsl(201, 33%, 84%) 0%,
          hsl(60, 29%, 89%) 8%);
     background-position: 0 8px;
     background-size: 100% 1.3rem;
     border: 1px solid hsl(0, 0%, 80%);
     border-radius: .9em;

     font-family: "Architects Daughter", cursive;
}
 .journal p{
     margin: 0;

     font-size: 1.3rem;
     line-height: 1.3rem;
}

 .sms-message{ /* ---- SMS Message Block ---- */
     float: left;
     clear: left;
     width: 22.4em;
     margin: 0 0 1em;
     padding: 0 1.2em;

     background: hsl(0, 0%, 75%);
     border-radius: 2em;

     font-size: 112.5%;
     text-align: center;
}

 blockquote .collapsible-block-folded,
 .alt-blockquote .collapsible-block-folded,
 .lightweight .collapsible-block-folded,
 .card-block .collapsible-block-folded,
 .report-box .collapsible-block-folded,
 .o5-box .collapsible-block-folded,
 .narration .collapsible-block-folded,
 .journal .collapsible-block-folded,
 div.blockquote .collapsible-block-folded{
     /* ---- For Collapsibles Inside Divs | [CLOSED] ---- */
     padding: .75em 0;
     /* -------- */
}
 blockquote .collapsible-block-unfolded,
 .alt-blockquote .collapsible-block-unfolded,
 .lightweight .collapsible-block-unfolded,
 .card-block .collapsible-block-unfolded,
 .report-box .collapsible-block-unfolded,
 .o5-box .collapsible-block-unfolded,
 .narration .collapsible-block-unfolded,
 .journal .collapsible-block-unfolded,
 div.blockquote .collapsible-block-unfolded{
     /* ---- For Collapsibles Inside Divs | [OPEN] ---- */
     padding-top: .75em;
     /* -------- */
}

/* -------- FORMATTING | [SPECIAL] -------- */
 .centered{ /* ---- Center-Aligns Text ---- */
     text-align: center;
}

 .justified{ /* ---- Justify-Aligns Text ---- */
     text-align: justify;
}

 .indented{ /* ---- Indents Block by ½-inch/2em (Use Within Other Divs) ---- */
     text-indent: 2.4em;
}

 .indented .bibcite,
 .indented .bibitems,
 .indented .footnoteref,
 .indented .footnotes-footer,
 .indented .scp-image-block,
 .indented h1, .indented h2, .indented h3,
 .indented h4, .indented h5, .indented h6,
 .indented .image-container,
 .indented ol,
 .indented ul,
 .indented .centered{
     text-indent: 0;
}

 .rev-red, .rev-green, .rev-blue, .rev-yellow, .terminal-span{
     font-weight: bold;
}

 .rev-red{ /* ---- Red Document Revision Text ---- */
     color: hsl(360, 100%, 27%);
}

 .rev-green{ /* ---- Green Document Revision Text ---- */
     color: hsl(120, 100%, 27%);
}

 .rev-blue{ /* ---- Blue Document Revision Text ---- */
     color: hsl(240, 100%, 27%);
}

 .rev-yellow{ /* ---- Yellow Document Revision Text ---- */
     color: hsl(40, 100%, 40%);
}

 .terminal-span{ /* ---- Computer Terminal Text ---- */
     font-family: var(--mono-font);
     font-size: 110%;
     letter-spacing: .3px;
}

/* ---- Blinking Text Cursor (Adapted From 'Your Very First SCP!') ---- */
 .blinkbar{color: black; animation: blink 1.5s infinite;}
 @keyframes blink{to{opacity: .0;}}
 @keyframes flicker{0% {opacity: .9890; }5% {opacity: .5842; }10% {opacity: .9865; }20% {opacity: .0412; }20% {opacity: .6255; }25% {opacity: .3157; }30% {opacity: .7328; }35% {opacity: .4654; }40% {opacity: .9128; }45% {opacity: .2449; }50% {opacity: .5485; }55% {opacity: .6438; }60% {opacity: .1180; }65% {opacity: .9085; }70% {opacity: .0266; }75% {opacity: .6795; }80% {opacity: .7812; }85% {opacity: .0117; }90% {opacity: .2239; }95% {opacity: .8897; }100% {opacity: .2260; }}
 @keyframes overlay-anim{0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}

 .lite-heading{ /* ---- Special Heading Area (Adapted From 'SCP-4058') ---- */
     clear: both;
     margin: 3.6em auto;
}
 .lite-heading h3{
     color: hsl(360, 100%, 27%);
}
 .lite-heading hr{
     width: 55%;
     margin: auto;

     border-width: medium;
}

 div.image-showcase{ /* ---- Alternative Image Showcase ---- */
     width: 25em;
     margin-bottom: 1em;

     background: hsl(0, 0%, 100%);
     border: 3px ridge hsl(0, 0%, 5%);
}
 div.image-showcase.block-center{
     margin-right: auto;
     margin-left: auto;
}

 .scene-break{ /* ---- Fancy Scene/Section Break ---- */
     width: 3.5em;
     margin: 2em 0;
}

 .listPagesNav{ margin-bottom: 5em; }
 .listPagesNav-prev, /* ---- ListPages Navigation (Adapted from 'SCP-5552') ---- */
 .listPagesNav-next{
     width: 45%;
     margin: 0 0 1em;
     padding: 0 2%;

     background: hsl(0, 0%, 90%);
     border: 1px solid hsl(0, 0%, 60%);
}
 .listPagesNav-prev{
     float: left;
     text-align: left;
}
 .listPagesNav-next{
     float: right;
     text-align: right;
}

 .fade-away{
     background: linear-gradient(to bottom, hsl(0, 0%, 95%), hsl(0, 0%, 5%));
}

 .footing::before{ /* ---- Page Footing ---- */
     content: " ";
     position: absolute;
     bottom: 1px;
     left: 0;
     right: 0;

     border-bottom: 2px solid hsl(0, 0%, 47%);
}
 .footing{
     position: relative;
     bottom: -2px;
     margin-bottom: 2px;

     border-bottom: 1px solid hsl(0, 0%, 47%);
}

 .related-flex{ /* ---- Related Articles Box ---- */
     display: flex;
     justify-content: center;
}
 .related{
     margin: 1em 0;
     padding: 0 1em;

     background-color: hsl(0, 0%, 100%);
     border: thick solid hsla(0, 0%, 60%, 0.5);

     text-align: left;
}

 .series-nav{ /* ---- Series Navigation ---- */
     margin: .5em 0;

     background:
       linear-gradient(to bottom right,
          hsla(0, 0%, 100%, 1),
          hsla(0, 0%, 50%, .5));
     border: outset 1.5px hsl(0, 0%, 5%);
     border-radius: 2em;

     font-size: 85%;
     font-weight: bold;
     text-align: center;
}

/* -------- ADVANCED WARNING HEADER --------
 * Adapted From 'SCP-001-JP - indonootoko's Proposal'
 * See the Example at the Top of the Page
**/
 .orderwrapper{
     position: relative;
     width: auto;

     text-align: center;
}
 .council{
     position: relative;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 295px;
     height: 295px;
     margin: auto;

     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 295px 295px;
}
 .ordertitle{
     position: absolute;
     top: 27px;
     left: 0;
     right: 0;
}
 .ordertitle h1{
     color: hsl(0, 0%, 5%);

     font-size: 220%;
     line-height: 90%;
}
 .orderdescription{
     position: absolute;
     top: 93px;
     left: 0;
     right: 0;
     width: 100%;
}
 .orderdescription h1{
     color: hsl(0, 0%, 5%);

     font-size: 120%;
}
 .orderdescription p{
     color: hsl(0, 0%, 5%);

     font-size: 90%;
}
 .itemno{
     position: absolute;
     bottom: 18px;
     left: 0;
     right: 0;
}
 .itemno h1{
     color: hsl(0, 0%, 5%);

     font-size: 170%;
}

/* ==== 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 ====
 * Adapted From 'Black Highlighter Theme'
**/
 .yui-navset * {
    transition:
       color 80ms cubic-bezier(.4, 0, .2, 1),
       background-color 80ms cubic-bezier(.4, 0, .2, 1);
}

 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - .125rem);
    margin: 0 auto;

    border-color: hsl(360, 94%, 20%);
    box-shadow: 0 calc(.0625rem * 5) 0 0 hsl(360, 94%, 20%);
}

 .yui-navset .yui-nav a, /* == Link Modifier == */
 .yui-navset .yui-navset-top .yui-nav a {
    color: hsl(0, 0%, 5%);
    /* ==== Tab Background Colour | [UNSELECTED] ==== */
    background-color: hsl(0, 0%, 99%);
    /* ==== */
    background-image: none;
    border: unset;
}

 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus {
    color: hsl(0, 0%, 96%);
    /* ==== Tab Background Colour | [HOVER] ==== */
    background-color: hsl(360, 100%, 27%);
    /* ==== */
}

 .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;
    padding: 0;

    background-color: hsl(0, 0%, 96%);
    border-color: transparent;
    box-shadow: 0 0 0 .0625rem hsl(360, 94%, 20%);
}

 .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%;
}

 .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;

    /* ==== Tab Background Colour | [SELECTED] ==== */
    background-color: hsl(360, 94%, 20%);
    /* ==== */
}

 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em {
    border: hsl(360, 94%, 20%);
}

 .yui-navset .yui-nav .selected a {
    width: 100%;

    color: hsl(0, 0%, 96%) !important;
    background-image: none;
}

 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active {
    color: hsl(0, 0%, 96%);
    background-color: hsl(360, 94%, 20%);
}

 .yui-navset .yui-nav .selected a:hover {
    cursor: default;
}

 .yui-navset-left .yui-content {
    /* ==== Content Background ==== */
    background-color: hsl(0, 0%, 99%);
    /* ==== */
}

 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content {
    padding: .5em;
    border-color: hsl(0, 0%, 60%);
}

/* -------- PAGE TAGS -------- */
 #main-content .page-tags{
     border-top: 1px solid hsl(0, 0%, 73%);
}
 #main-content .page-tags a{
     display: inline-block;
     height: .8125rem;
     margin: 0 0 .5rem .75rem;
     padding: .1875rem .3125rem .1875rem 0;

     color: hsl(0, 0%, 95%);
     background-color: hsl(0, 0%, 27%);
     border-bottom-right-radius: .25rem;
     border-top-right-radius: .25rem;

     line-height: 13px;
     line-height: .8125rem;
     font-size: 11px;
     font-size: .6875rem;
     font-weight: normal;
}
 #main-content .page-tags a:before{
     width: 0;
     height: 0;
     top: -.1875rem;
     left: -.625rem;
     padding: 0 .0625rem .1875rem;

     border-color: transparent hsl(0, 0%, 27%) transparent transparent;
     border-style: solid;
     border-width: .5rem .5rem .5rem 0;
}
 #main-content .page-tags a:before,
 #main-content .page-tags a:after{
     content: "";
     position: relative;
     float: left;
}
 #main-content .page-tags a:after{
     width: .25rem;
     height: .25rem;
     top: .2813rem;
     left: -.5rem;

     background-color: hsl(0, 0%, 100%);
     border-radius: .125rem;
}
 #main-content .page-tags span{
     max-width: 100%;
     border-top: .5rem solid transparent;
}

/* -------- WIKIWALK NAVIGATOR -------- */
 .footer-wikiwalk-nav {
    text-align: center;
}

/* -------- INTERWIKI -------- */
 div.scpnet-interwiki-wrapper{
     margin-bottom: 2rem;
}
 iframe.scpnet-interwiki-frame{
     width: 17.75em;
     min-height: 4.25em;
     margin-left: 4px;

     background: hsl(127, 050%, 94%);
     border: 1px solid hsl(0, 0%, 20%);
}
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     padding: 5px;

     background: 0;
     border: 0;
     box-shadow: none;
}
 #interwiki .heading{
     color: hsl(0, 0%, 5%);
     border-bottom: 1px solid hsl(0, 0%, 20%);
}
 #interwiki .menu-item img{
     display: none;
}

/* -------- SHOW-CHANGES HIGHLIGHTS -------- */
 .inline-diff ins::before{
     color: hsl(240, 100%, 93%);
}
 .inline-diff del::before{
     color: hsl(0, 100%, 90%);
}
 .inline-diff ins + del::before,
 .inline-diff del + ins::before{
     color: transparent;
}
 .inline-diff br + ins::before,
 .inline-diff br + del::before,
 .inline-diff ins:first-of-type::before,
 .inline-diff del:first-of-type::before{
     position: absolute;
     display: inline-block;
     left: -1em;

     content: "\f111";
     font: normal normal normal 16px/1 "FontAwesome";
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

/* -------- PRESENTATION -------- */
 .templateInfo{
     margin: 1em 0;
     padding: 0 1em;
     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 87%);
}

/* -------- CROQSTYLE ALTERATIONS -------- */
 #edit-page-textarea{ font-family: unset; }
 tt{
     background-color: unset;
     font-size: unset;
     padding: unset;
     margin: unset;
     border-radius: unset;
}

/* ---- BETTERFOOTNOTES PATCH ---- */
 :root{
     --posX: calc(50% - 358px - 13rem) !important;
     --fnLinger: 1.5s !important;
}
 .fnnum{
     font-size: 90%;
}
 .fnnum:hover + .fncon{
     right: calc(-8vw - 4rem) !important;
}

/* -------- REDUCED MOTION ACCESSIBILITY -------- */
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
          animation-duration: .001s !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001s !important;
    }
}

/* -------- MOBILE MEDIA QUERY -------- */
 @media (max-width: 479px){
     #header h1 a{
          font-size: 85%;
    }
     div.image-showcase{
          width: 90%;
    }
     div.o5-box{
          margin: 1em 0;
    }
}

/* -------- NOTE MEDIA QUERY -------- */
 @media (min-width: 480px) and (max-width: 580px){
     #header h1 a{
          font-size: 100%;
    }
     div.image-showcase{
          width: 100%;
    }
     div.o5-box{
          margin: .5em;
    }
}

/* -------- MINI TABLET MEDIA QUERY -------- */
 @media (min-width: 581px) and (max-width: 767px){
     #header h1 a{
          font-size: 120%;
    }
}
 @media (max-width: 767px){
     .open-menu a:hover{
          box-shadow: none;
    }
}

/* -------- TABLET MEDIA QUERY -------- */
 @media (min-width: 768px) and (max-width: 979px){
     #header h1 a{
          font-size: 140%;
    }
}
[[/code]]
[[/<]]
[[/collapsible]]
[[/iftags]]

[[include :scp-wiki:component:croqstyle]]
[[include :scp-wiki:component:fade-in speed=1]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle/2);
[[/module]]

[[include :scp-wiki:component:interwiki-style
|priority=2
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle/2
]]

Flopstyle: LITE

Module Styles

Inline Styles

Includes

CSS Classes

Page Source