SCP Style Resource

Link to article: SCP Style Resource.

.danke {
    padding: 5px;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: 1.1em; 
}

.agent {
    background-color:#002200;
    border: 3px solid #55AA55;
    color: #77CC77;
}

.site {
    background-color:#222200;
    border: 3px solid #AAAA55;
    color: #DDDD77;
}

.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}

.page p, .page ul {
    line-height: 20px;
    margin: 0;
}

.danke {
    padding: 5px;
    margin-bottom:10px;
    font-family: monospace;
    font-size: 1.1em; 
}

.agent {
    background-color:#002200;
    border: 3px solid #55AA55;
    color: #77CC77;
}

.site {
    background-color:#222200;
    border: 3px solid #AAAA55;
    color: #DDDD77;
}

.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}

.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}

/* //// When you want to add new "records", //// */
/* //// add new "options" like the following format. //// */
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link
{animation-delay: calc(6s + 2s);}

.tape-record {position: relative;height: 6em;pointer-events: none;}.record {display: block;position: absolute;width: 100%;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;text-align: center;}.tape-wrap {position: relative;background-color: rgba(244, 244, 244, 1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png");background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png");background-size: contain;background-position: center center;background-repeat: no-repeat;pointer-events: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-right {top: 0;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-wrap .collapsible-block-unfolded-link {padding-top: 1em;}.tape-wrap .collapsible-block-folded,.tape-wrap .collapsible-block-unfolded-link {position: relative;text-align: center;}.tape-wrap .collapsible-block-link:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.tape-wrap .collapsible-block-folded .collapsible-block-link:before {content: "\f04b";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link:before {content: "\f1da";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {animation-name: g-ex;animation-duration: 1s;animation-fill-mode: forwards;visibility: hidden;opacity: 0;}.tape-wrap .collapsible-block-folded {padding-top: 1em;padding-bottom: 1em;}@keyframes g-ex {50% {visibility: visible;opacity: 0;}100% {visibility: visible;opacity: 1;}}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-anim {height: 300px;}.tape-left,.tape-right {display: block;width: 70px;height: 70px;position: relative;margin: 0 auto;padding: 0 auto;}.tape-left {top: 105px;bottom: initial;left: -36px;}.tape-right {top: 60px;bottom: initial;left: 35px;}}

/* //// When you want to add new "records", //// */
/* //// add new "options" like the following format. //// */
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link
{animation-delay: calc(6s + 2s);}

.tape-record {position: relative;height: 6em;pointer-events: none;}.record {display: block;position: absolute;width: 100%;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;text-align: center;}.tape-wrap {position: relative;background-color: rgba(244, 244, 244, 1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png");background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png");background-size: contain;background-position: center center;background-repeat: no-repeat;pointer-events: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-right {top: 0;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-wrap .collapsible-block-unfolded-link {padding-top: 1em;}.tape-wrap .collapsible-block-folded,.tape-wrap .collapsible-block-unfolded-link {position: relative;text-align: center;}.tape-wrap .collapsible-block-link:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.tape-wrap .collapsible-block-folded .collapsible-block-link:before {content: "\f04b";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link:before {content: "\f1da";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {animation-name: g-ex;animation-duration: 1s;animation-fill-mode: forwards;visibility: hidden;opacity: 0;}.tape-wrap .collapsible-block-folded {padding-top: 1em;padding-bottom: 1em;}@keyframes g-ex {50% {visibility: visible;opacity: 0;}100% {visibility: visible;opacity: 1;}}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-anim {height: 300px;}.tape-left,.tape-right {display: block;width: 70px;height: 70px;position: relative;margin: 0 auto;padding: 0 auto;}.tape-left {top: 105px;bottom: initial;left: -36px;}.tape-right {top: 60px;bottom: initial;left: 35px;}}

#u-start, .textchange div.sitemember:nth-child(2) {display:none;}.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}.typearea {color: lime; font-family: "Courier";font-size: 1.2em;margin: 10px 0 0 10px;white-space: nowrap;overflow: hidden;width: 0;}#u-start:target ~ .typearea {width: 100%;animation: type 4s steps(60, end); }.typearea a{color: lime;text-decoration: none;}.blink {animation: blink 1s infinite;}@keyframes type{ from { width: 0; } } @keyframes blink{to{opacity: .0;}}.buttonwrapper {text-align: center;}.likebutton {padding: 0.1em 0.5em;text-decoration: none;font-size: 1.3em;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}.likebutton:hover {background-color: #DDD;color: #000;border: 1px solid #0098b3;}

#u-start, .textchange div.sitemember:nth-child(2) {display:none;}.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}.typearea {color: lime; font-family: "Courier";font-size: 1.2em;margin: 10px 0 0 10px;white-space: nowrap;overflow: hidden;width: 0;}#u-start:target ~ .typearea {width: 100%;animation: type 4s steps(60, end); }.typearea a{color: lime;text-decoration: none;}.blink {animation: blink 1s infinite;}@keyframes type{ from { width: 0; } } @keyframes blink{to{opacity: .0;}}.buttonwrapper {text-align: center;}.likebutton {padding: 0.1em 0.5em;text-decoration: none;font-size: 1.3em;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}.likebutton:hover {background-color: #DDD;color: #000;border: 1px solid #0098b3;}


div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* black shadow at the top of the terminal */
    background-image: 
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80;
}

div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text {
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
    }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}


div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* black shadow at the top of the terminal */
    background-image: 
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
    content: "> ";
}

.orderwrapper {position: relative;width: auto;text-align: center;}.council1 {position: relative;top: 0;bottom: 0;left: 0;right: 0;width: 295px;height: 295px;margin: auto;background-image: url( "https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png" );background-size: 295px 295px;background-repeat: no-repeat;background-position: center;}.ordertitle {position: absolute;left: 0;right: 0;top: 38px;}.ordertitle h1 {font-size: 220%;color: #555;}.orderdescription {position: absolute;left: 0;right: 0;top: 85px;width: 100%;}.orderdescription p {font-size: 90%;color: #555;}.orderdescription h1 {font-size: 120%;color: #555;}.itemno {position: absolute;left: 0;right: 0;bottom: 27px;}.itemno h1 {font-size: 170%;color: #555;}

.orderwrapper {position: relative;width: auto;text-align: center;}.council1 {position: relative;top: 0;bottom: 0;left: 0;right: 0;width: 295px;height: 295px;margin: auto;background-image: url( "https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png" );background-size: 295px 295px;background-repeat: no-repeat;background-position: center;}.ordertitle {position: absolute;left: 0;right: 0;top: 38px;}.ordertitle h1 {font-size: 220%;color: #555;}.orderdescription {position: absolute;left: 0;right: 0;top: 85px;width: 100%;}.orderdescription p {font-size: 90%;color: #555;}.orderdescription h1 {font-size: 120%;color: #555;}.itemno {position: absolute;left: 0;right: 0;bottom: 27px;}.itemno h1 {font-size: 170%;color: #555;}

div.transparent-box-example {
    border: 1px solid #ccc;
    padding: 0.5em;
    margin: 0.25em;
}

.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}
.page p,
.page ul {
    line-height: 20px;
    margin: 0;
}

.fakeprot .mailform-box .buttons{display:none;}
.fakeprot + .collapsible-block .collapsible-block-link {padding: 0.1em 0.5em;text-decoration: none;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:hover {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:active {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-unfolded-link{margin:0.5em 0;text-align: center;}
.fakeprot + .collapsible-block .collapsible-block-folded{margin:0.5em 0;text-align: center;}
.fakeprot .passw input[type=text] {text-security:disc;-webkit-text-security:disc;-mox-text-security:disc;}
.mailform-box td:first-child {width: 80px;}

.fakeprot .mailform-box .buttons{display:none;}
.fakeprot + .collapsible-block .collapsible-block-link {padding: 0.1em 0.5em;text-decoration: none;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:hover {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:active {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-unfolded-link{margin:0.5em 0;text-align: center;}
.fakeprot + .collapsible-block .collapsible-block-folded{margin:0.5em 0;text-align: center;}
.fakeprot .passw input[type=text] {text-security:disc;-webkit-text-security:disc;-mox-text-security:disc;}
.mailform-box td:first-child {width: 80px;}

```
.bblock:hover {color: white}
```
```
.dblock:hover {background: #f4f4f4}
```

.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}

.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}

```
#page-title {
    display: block;
}
```

border-collapse:collapse; max-width: 600px;

font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;

font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;

text-align: center; padding: .3em .7em; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

text-align: center; padding: .3em .7em; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

text-align: center; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

border-collapse:collapse; max-width: 600px;

font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;

font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;

text-align: center; padding: .3em .7em; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

text-align: center; padding: .3em .7em; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

text-align: center; border: 1px solid black

border: 1px solid black; padding: .3em .7em;

```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```
```
border: 1px solid silver
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```
```
border-radius: 10px; margin: 10px
```
```
border-radius: 10px; margin: 10px
```

background: gray; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;

background: white; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;

background: gray; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;

background: white; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;

border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;

background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat; float: center; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);

```
background: url(
```

background: url(https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;

background: url(https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```
```
border: none; width: 100%;
```
```
text-align: right;
```
```
text-align: right;
```
```
border: none; width: 100%;
```
```
text-align: right;
```
```
text-align: right;
```

font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;

display: inline-block; width: 100%; background-color: black; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;

font-size: 18px; color: black; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;

display: inline-block; width: 100%; background-color: #f3f3f3; text-align: center; border: 1px solid #080808; margin: 1px; padding-top: 8px; padding-bottom: 8px;

font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;

display: inline-block; width: 100%; background-color: #b01; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;

font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;

display: inline-block; width: 100%; background-color: black; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;

display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;

```
width: 50%;
```
```
width: 50%; text-align: right;
```

display: flex; padding-bottom: -1em; border-bottom: solid 1px #444; font-size: 1.25em;

```
width: 50%;
```
```
width: 50%; text-align: right;
```

display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;

```
width: 50%;
```
```
width: 50%; text-align: right;
```

display: flex; padding-bottom: -1em; border-bottom: solid 1px #444; font-size: 1.25em;

```
width: 50%;
```
```
width: 50%; text-align: right;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```
```
background-color: white
```
```
background-color: black
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

max-width:450px;text-align:center;margin: auto;

max-width:450px;text-align:center;margin: auto;

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

border-bottom:2px solid #777; margin-bottom:1px;

```
border-bottom:1px solid #777;
```

```
footer-wikiwalk-nav
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
danke
```
```
site
```
```
danke
```
```
agent
```
```
no-unfold
```
```
containercontainer
```
```
container
```
```
overlay
```
```
overlayback
```
```
blinkbar
```
```
no-unfold
```
```
containercontainer
```
```
container
```
```
overlay
```
```
overlayback
```
```
blinkbar
```
```
tape-wrap
```
```
tape-anim
```
```
tape-left
```
```
tape-right
```
```
tape-record
```
```
record
```
```
r1
```
```
record
```
```
r2
```
```
record
```
```
r3
```
```
record
```
```
r4
```
```
tape-wrap
```
```
tape-anim
```
```
tape-left
```
```
tape-right
```
```
tape-record
```
```
record
```
```
r1
```
```
record
```
```
r2
```
```
type-wrap-wrapper
```
```
type-wrapper
```
```
typearea
```
```
textchange
```
```
sitemember
```
```
blink
```
```
sitemember
```
```
blink
```
```
buttonwrapper
```
```
likebutton
```
```
type-wrap-wrapper
```
```
type-wrapper
```
```
typearea
```
```
textchange
```
```
sitemember
```
```
blink
```
```
sitemember
```
```
blink
```
```
buttonwrapper
```
```
likebutton
```
```
terminal
```
```
scanline
```
```
text
```
```
terminal
```
```
scanline
```
```
text
```
```
orderwrapper
```
```
council1
```
```
ordertitle
```
```
orderdescription
```
```
itemno
```
```
orderwrapper
```
```
council1
```
```
ordertitle
```
```
orderdescription
```
```
itemno
```
```
transparent-box-example
```
```
transparent-box-example
```
```
page
```
```
page
```
```
fakeprot
```
```
passw
```
```
fakeprot
```
```
passw
```
```
input-container
```
```
input-field
```
```
input-container
```
```
input-field
```
```
btn
```
```
btn-success
```
```
btn2
```
```
btn-success
```
```
input-container
```
```
input-field
```
```
input-container
```
```
input-field
```
```
btn
```
```
btn-success
```
```
btn2
```
```
btn-success
```
```
bblock
```
```
bblock
```
```
dblock
```
```
dblock
```
```
emoji
```
```
inline
```
```
at_mention
```
```
emoji
```
```
alone
```
```
msgimage
```
```
email-example
```
```
email
```
```
tofrom
```
```
email
```
```
tofrom
```
```
email-example
```
```
email
```
```
tofrom
```
```
email
```
```
tofrom
```

[[>]]
[[module Rate]]
[[/>]]

[[module css]]
.danke {
    padding: 5px;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: 1.1em; 
}

.agent {
    background-color:#002200;
    border: 3px solid #55AA55;
    color: #77CC77;
}

.site {
    background-color:#222200;
    border: 3px solid #AAAA55;
    color: #DDDD77;
}

.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}

.page p, .page ul {
    line-height: 20px;
    margin: 0;
}
[[/module]]

Hello and welcome!

This is meant to be an ease-of-access, quick 'copy-paste' resource for alternative logs and formats for SCP files, in the same vein as Group-of-Interest Style guides for their individual formats. If you're looking for basic Wikidot formatting, go check out [[[Wiki Syntax]]]. For more advanced coding, check out the [[[advanced-formatting-and-you|Advanced Formatting]]] guide.

For the purposes of accruing multiple format bits, this will remain open for collaboration. Be sure to follow the presentation format here.

**Note:** This is not intended to be an exhaustive list. These templates do not have to be adhered to. Users are encouraged to branch out and experiment with any set-up they're most comfortable with.

**Note:** CSS Modules are only applied to a page after the page is refreshed. Previewing a page does not refresh the page. To see the effect of any modifications to a CSS Module, you must save the page.

+++* See Also
* [[[components-hub|]]]
* [[[sigma-9-themes|]]]
* [[[black-highlighter-themes|]]]
@@ @@
[[toc]]

@@ @@
[[# basic]]

++ Basic Article Template

[[code]]
[[>]]
[[module Rate]]
[[/>]]

**Item #:** SCP-XXXX

**Object Class:** Safe/Euclid/Keter (indicate which class)
 
**Special Containment Procedures:** [Paragraphs explaining the procedures]

**Description:** [Paragraphs explaining the description]

**Addendum:** [Optional additional paragraphs]

[[footnoteblock]]

[[div class="footer-wikiwalk-nav"]]
[[=]]
<< [[[SCP-XXXW]]] | SCP-XXXX | [[[SCP-XXXY]]] >>
[[/=]]
[[/div]]
[[/code]]

++ Interview Template

[[code]]
> **Interviewed:** [The person, persons, or SCP being interviewed]
> 
> **Interviewer:** [Interviewer, can be blocked out using █]
> 
> **Foreword:** [Small passage describing the interview]
> 
> **<Begin Log, [optional time info]>**
> 
> **Interviewer:** [speech]
> 
> **Person:** [speech]
> 
> [Repeat as necessary]
> 
> **<End Log, [optional time info]>**
> 
> **Closing Statement:** [Small summary and passage on what transpired afterward]
[[/code]]

**Note:** When inserting block quotes with the > symbol, make sure you add a space after each > you use-- otherwise your text won't show up as a block quote.

----

[[# tables]]

++ Test Log formats:

**__Option 1__**[[footnote]]As seen in [[[SCP-2682]]][[/footnote]]

**What it looks like:**

[[table  style="border-collapse:collapse; max-width: 600px;"]]
[[row]]
[[cell style="font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;"]]
TEST TITLE STUFF
[[/cell]]
[[cell style="font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Subject
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Protocol
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Results
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[/table]]

**What to copy:**

[[collapsible]]
[[code]]
[[table  style="border-collapse:collapse; max-width: 600px;"]]
[[row]]
[[cell style="font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;"]]
TEST TITLE STUFF
[[/cell]]
[[cell style="font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Subject
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Protocol
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Results
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
DATA HERE
[[/cell]]
[[/row]]
[[/table]]
[[/code]]
[[/collapsible]]

-----

**__Option 2__**[[footnote]]As seen in [[[SCP-2832]]][[/footnote]]

**What it looks like:**

[[table style="border: 1px solid silver"]]
[[row]]
[[hcell style="border: 1px solid silver"]]
Date
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
DATA
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Effects
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Notes
[[/hcell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[/table]]

**What to copy:**

[[collapsible]]
[[code]]

[[table style="border: 1px solid silver"]]
[[row]]
[[hcell style="border: 1px solid silver"]]
Date
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
DATA
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Effects
[[/hcell]]
[[hcell style="border: 1px solid silver"]]
Notes
[[/hcell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
DATE
[[/cell]]
[[cell style="border: 1px solid silver"]]
[[=]]
DATA
[[/=]]
[[/cell]]
[[cell style="border: 1px solid silver"]]
EFFECTS
[[/cell]]
[[cell style="border: 1px solid silver"]]
NOTES
[[/cell]]
[[/row]]
[[/table]]
[[/code]]
[[/collapsible]]

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

[[# logs]]

++ Audio/Video Log Formats:

**__Option 1__**[[footnote]]As seen in [[[SCP-2571]]][[/footnote]]

**What it looks like:**

[[div class="blockquote"]]

= **VIDEO LOG**
----
**DATE:** 

**NOTE:** 
----

[BEGIN LOG]


**TIME:** EVENT

**TIME:** EVENT

**TIME:** EVENT

-----

[END LOG]

[[/div]]

**Tip!** This style mimics the regular quoteboxes you see around the site (basic wiki formatting are lines beginning in "> "), but with the added benefit of working better with images.

**What to copy:**

[[collapsible]]

[[code]]
[[div class="blockquote"]]

= **VIDEO LOG**
----
**DATE:** 

**NOTE:** 
----

[BEGIN LOG]


**TIME:** EVENT

**TIME:** EVENT

**TIME:** EVENT

-----

[END LOG]

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

----


**__Option 2__**[[footnote]]As seen in [[[SCP-1730]]][[/footnote]]

**What it looks like:**

[[div class="blockquote" style="border-radius: 10px; margin: 10px"]]
**Exploration Video Log Transcript**

**Date:** OPTIONAL

**Exploration Team:** TEAM NAME - OPTIONAL

**Subject:** AREA/ANOMALY - OPTIONAL

**Team Lead:** OPTIONAL

**Team Members:** OPTIONAL
-----

[BEGIN LOG]

**Person A:** Dialogue

**Person B:** Dialogue

//STUFF HAPPENS//

**Person A:** Dialogue

[END LOG]

[[/div]]

**What to copy:**

[[collapsible]]
[[code]]
[[div class="blockquote" style="border-radius: 10px; margin: 10px"]]
**Exploration Video Log Transcript**

**Date:** OPTIONAL

**Exploration Team:** TEAM NAME - OPTIONAL

**Subject:** AREA/ANOMALY - OPTIONAL

**Team Lead:** OPTIONAL

**Team Members:** OPTIONAL
-----

[BEGIN LOG]

**Person A:** Dialogue

**Person B:** Dialogue

//STUFF HAPPENS//

**Person A:** Dialogue

[END LOG]

[[/div]]
[[/code]]

[[/collapsible]]

-----

**__Option 3__**[[footnote]]As seen in [[[SCP-2409]]].[[/footnote]]

For a computer-y look.

**What it looks like:**

[[div class="danke site"]]
| DETAILS
| DETAILS
| DETAILS
| DETAILS
| DETAILS

TEXT TEXT TEXT
MORE TEXT

MORE

AND MORE

AND YET EVEN MORE TEXT TO JOT DOWN
[[/div]]

**What to copy:**

[[collapsible]]
**IMPORTANT** This part gets placed at the top of the page.

[[code]]
[[module css]]
.danke {
    padding: 5px;
    margin-bottom:10px;
    font-family: monospace;
    font-size: 1.1em; 
}

.agent {
    background-color:#002200;
    border: 3px solid #55AA55;
    color: #77CC77;
}

.site {
    background-color:#222200;
    border: 3px solid #AAAA55;
    color: #DDDD77;
}
[[/module]]

[[/code]]

**IMPORTANT**: This gets placed wherever you want the box to appear.

[[code]]
[[div class="danke agent"]]
| DETAILS
| DETAILS
| DETAILS
| DETAILS
| DETAILS

TEXT TEXT TEXT
MORE TEXT

MORE

AND MORE

AND YET EVEN MORE TEXT TO JOT DOWN
[[/div]]

[[/code]]

**Tips!** Change 'danke agent' to 'danke site' for a different color scheme (yellow).
[[/collapsible]]

__**Option 4:**__

[[div style="background: gray; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

[[div style="background: white; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

STUFF GOES IN HERE

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

[[collapsible]]

[[code CSS]]
[[div style="background: gray; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

[[div style="background: white; padding: 1px 15px; border: solid 3px lightgray; margin: 10px; border-radius: 30px 15px;"]]

STUFF GOES IN HERE

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

[[/code]]

[[/collapsible]]

**__Option 5__**[[footnote]]As seen in [http://ja.scp-wiki.net/ykamikura-6 When Dandelions Bloom(tale-jp)][[/footnote]]

**What it looks like:**

[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- DO NOT ERASE THIS "+*". --]
[[span_ class="overlay"]]
AND MORE!
[[/span]]
[[div_ class="overlayback"]]
[[/div]]

+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
text
more text

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

[[/div]]
[[/div]]
[[/div]]
[[module CSS]]
.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]

**What to copy:**

[[collapsible]]
**IMPORTANT** This part gets placed at the top of the page.

[[code]]
[[module CSS]]
.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]
[[/code]]

**IMPORTANT**: This gets placed wherever you want the box to appear.

[[code]]
[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- DO NOT ERASE THIS "+*". --]
[[span_ class="overlay"]]
AND MORE!
[[/span]]
[[div_ class="overlayback"]]
[[/div]]

+* h1
++* h2
+++* h3
++++* h4
+++++* h5
++++++* h6
text
more text

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

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

**__Option 6__**[[footnote]]As seen in [http://ja.scp-wiki.net/cassette-tape-1006-1 Audio cassette #1006-1(tale-jp)], [http://ja.scp-wiki.net/spc-710-jp SPC-710-JP], and [[[SCP-3648]]] _
[[size 85%]]//※[[[SCP-3648]]] uses only the audio cassette animation.//[[/size]] _
[[size 85%]]//※The audio cassette image is created by [[*user indonootoko]] from the JP branch.//[[/size]][[/footnote]]

**What it looks like:**

[[div class="tape-wrap"]]
[[collapsible show="PLAY" hide="RELOAD"]]
[[div class="tape-anim"]]
[[div class="tape-left"]]
[[/div]]
[[div class="tape-right"]]
[[/div]]
[[/div]]

[[div class="tape-record"]]
[[span class="record r1"]]//the first line//
//the second line//
//the final line//[[/span]]
[[span class="record r2"]]//TEXT//
//MORE TEXT//[[/span]]

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


[[module CSS]]
/* //// When you want to add new "records", //// */
/* //// add new "options" like the following format. //// */
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link
{animation-delay: calc(6s + 2s);}

.tape-record {position: relative;height: 6em;pointer-events: none;}.record {display: block;position: absolute;width: 100%;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;text-align: center;}.tape-wrap {position: relative;background-color: rgba(244, 244, 244, 1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png");background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png");background-size: contain;background-position: center center;background-repeat: no-repeat;pointer-events: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-right {top: 0;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-wrap .collapsible-block-unfolded-link {padding-top: 1em;}.tape-wrap .collapsible-block-folded,.tape-wrap .collapsible-block-unfolded-link {position: relative;text-align: center;}.tape-wrap .collapsible-block-link:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.tape-wrap .collapsible-block-folded .collapsible-block-link:before {content: "\f04b";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link:before {content: "\f1da";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {animation-name: g-ex;animation-duration: 1s;animation-fill-mode: forwards;visibility: hidden;opacity: 0;}.tape-wrap .collapsible-block-folded {padding-top: 1em;padding-bottom: 1em;}@keyframes g-ex {50% {visibility: visible;opacity: 0;}100% {visibility: visible;opacity: 1;}}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-anim {height: 300px;}.tape-left,.tape-right {display: block;width: 70px;height: 70px;position: relative;margin: 0 auto;padding: 0 auto;}.tape-left {top: 105px;bottom: initial;left: -36px;}.tape-right {top: 60px;bottom: initial;left: 35px;}}
[[/module]]

**What to copy:**

[[collapsible]]
**IMPORTANT:**
* This part gets placed at the top of the page.
* When you want to add new "records", add new "options" like the following format.
 * .r3 {animation-delay: 9s;} _
.r4 {animation-delay: 12s;}

[[code]]
[[module CSS]]
/* //// When you want to add new "records", //// */
/* //// add new "options" like the following format. //// */
.r1 {animation-delay: 3s;}
.r2 {animation-delay: 6s;}

.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link
{animation-delay: calc(6s + 2s);}

.tape-record {position: relative;height: 6em;pointer-events: none;}.record {display: block;position: absolute;width: 100%;animation-name: record;animation-duration: 2.5s;opacity: 0;top: 0;text-align: center;}.tape-wrap {position: relative;background-color: rgba(244, 244, 244, 1);border: 1px dashed #999;padding: 0 1em;}.tape-anim {position: relative;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/DoxYSJAV4AET63r.png");background-size: 200px;background-position: center center;background-repeat: no-repeat;min-height: 300px;}.tape-left,.tape-right {display: block;position: absolute;margin: auto;height: 0;width: 70px;padding-bottom: 100%;background-image: url("https://unofficial-scp-sandbox-jp.wikidot.com/local--files/iroiro-workshop-8/scp_trans.png");background-size: contain;background-position: center center;background-repeat: no-repeat;pointer-events: none;}.tape-left {top: -20px;bottom: 0;left: -70px;right: 0;animation-name: spin1;animation-duration: 15s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-right {top: 0;bottom: -32px;left: 0;right: -72px;animation-name: spin1;animation-duration: 20s;animation-timing-function: linear;animation-fill-mode: forwards;}.tape-wrap .collapsible-block-unfolded-link {padding-top: 1em;}.tape-wrap .collapsible-block-folded,.tape-wrap .collapsible-block-unfolded-link {position: relative;text-align: center;}.tape-wrap .collapsible-block-link:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}.tape-wrap .collapsible-block-folded .collapsible-block-link:before {content: "\f04b";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link:before {content: "\f1da";}.tape-wrap .collapsible-block-unfolded-link .collapsible-block-link {animation-name: g-ex;animation-duration: 1s;animation-fill-mode: forwards;visibility: hidden;opacity: 0;}.tape-wrap .collapsible-block-folded {padding-top: 1em;padding-bottom: 1em;}@keyframes g-ex {50% {visibility: visible;opacity: 0;}100% {visibility: visible;opacity: 1;}}@keyframes spin1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes record {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;}}@-moz-document url-prefix() {.tape-anim {height: 300px;}.tape-left,.tape-right {display: block;width: 70px;height: 70px;position: relative;margin: 0 auto;padding: 0 auto;}.tape-left {top: 105px;bottom: initial;left: -36px;}.tape-right {top: 60px;bottom: initial;left: 35px;}}
[[/module]]
[[/code]]

**IMPORTANT:**
* This gets placed wherever you want the box to appear.
* When you want to add new "records", add new "options" like the following format.
 * @@[[span class="record r3"]]Text[[/span]]@@ _
@@[[span class="record r4"]]//More text//[[/span]]@@
[[code]]
[[div class="tape-wrap"]]
[[collapsible show="PLAY" hide="RELOAD"]]
[[div class="tape-anim"]]
[[div class="tape-left"]]
[[/div]]
[[div class="tape-right"]]
[[/div]]
[[/div]]

[[div class="tape-record"]]
[[span class="record r1"]]//the first line//
//the second line//
//the final line//[[/span]]
[[span class="record r2"]]//TEXT//
//MORE TEXT//[[/span]]

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


**__Option 7__**

**What it looks like:**

[[div class="type-wrap-wrapper"]]
[[div class="type-wrapper"]]
[[div id="u-start"]]
[[/div]]
[[div class="typearea"]]
[[div class="textchange"]]
[[module ListUsers users="."]]
[[div class="sitemember"]]
Your wikidot ID is "%%name%%".[[span class="blink"]]|[[/span]]
[[/div]]
[[/module]]
[[div class="sitemember"]]
I can't verify your wikidot ID.[[span class="blink"]]|[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="buttonwrapper"]]
[[a class="likebutton" href="#u-start"]]Click![[/a]]
[[/div]]
[[/div]]
[[module CSS]]
#u-start, .textchange div.sitemember:nth-child(2) {display:none;}.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}.typearea {color: lime; font-family: "Courier";font-size: 1.2em;margin: 10px 0 0 10px;white-space: nowrap;overflow: hidden;width: 0;}#u-start:target ~ .typearea {width: 100%;animation: type 4s steps(60, end); }.typearea a{color: lime;text-decoration: none;}.blink {animation: blink 1s infinite;}@keyframes type{ from { width: 0; } } @keyframes blink{to{opacity: .0;}}.buttonwrapper {text-align: center;}.likebutton {padding: 0.1em 0.5em;text-decoration: none;font-size: 1.3em;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}.likebutton:hover {background-color: #DDD;color: #000;border: 1px solid #0098b3;}
[[/module]]

**What to copy:**

[[collapsible]]
**IMPORTANT** This part gets placed at the top of the page.

[[code]]
[[module CSS]]
#u-start, .textchange div.sitemember:nth-child(2) {display:none;}.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}.typearea {color: lime; font-family: "Courier";font-size: 1.2em;margin: 10px 0 0 10px;white-space: nowrap;overflow: hidden;width: 0;}#u-start:target ~ .typearea {width: 100%;animation: type 4s steps(60, end); }.typearea a{color: lime;text-decoration: none;}.blink {animation: blink 1s infinite;}@keyframes type{ from { width: 0; } } @keyframes blink{to{opacity: .0;}}.buttonwrapper {text-align: center;}.likebutton {padding: 0.1em 0.5em;text-decoration: none;font-size: 1.3em;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}.likebutton:hover {background-color: #DDD;color: #000;border: 1px solid #0098b3;}
[[/module]]
[[/code]]

**IMPORTANT**: This gets placed wherever you want the box to appear.

[[code]]
[[div class="type-wrap-wrapper"]]
[[div class="type-wrapper"]]
[[div id="u-start"]]
[[/div]]
[[div class="typearea"]]
[[div class="textchange"]]
[[module ListUsers users="."]]
[[div class="sitemember"]]
Your wikidot ID is "%%name%%".[[span class="blink"]]|[[/span]]
[[/div]]
[[/module]]
[[div class="sitemember"]]
I can't verify your wikidot ID.[[span class="blink"]]|[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="buttonwrapper"]]
[[a class="likebutton" href="#u-start"]]Click![[/a]]
[[/div]]
[[/div]]
[[/code]]
[[/collapsible]]

**__Option 8__**[[footnote]]As seen in [[[SCP-4224]]], [[[SCP-3241]]] & [/apas Automated Passive Amnestization System Ver. 17.09].[[/footnote]]

**What it looks like:**
[[module CSS]]

div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* black shadow at the top of the terminal */
    background-image: 
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80;
}

div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text {
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
    }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}
[[/module]]
[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Terminal #001__[[/size]]
@@ @@
@@ @@
@@------@@
Welcome, User
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Links inside the terminal gain a ">" when you hover over them.
> [https://www.google.com like this]

Thanks for checking out my format!
@@ @@
@@ @@
[[/div]]
[[/div]]
**What to copy:**
[[collapsible]]

**IMPORTANT:** This is the CSS module. It goes at the top of the article.
[[code]]
[[module CSS]]

div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* black shadow at the top of the terminal */
    background-image: 
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* Same as above.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
    content: "> ";
}
[[/module]]
[[/code]]

**IMPORTANT:** This is the terminal itself. This can go anywhere.
[[code]]
[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Terminal #001__[[/size]]
@@ @@
@@ @@
@@------@@
Welcome, User
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Links inside the terminal gain a ">" when you hover over them.
> [https://www.google.com like this]

Thanks for checking out my format!
@@ @@
@@ @@
[[/div]]
[[/div]]
[[/code]]
[[/collapsible]]
@@ @@
@@ @@
[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]
++ Warning/Notice formats:

**__Option 1__**[[footnote]]As seen in [[[SCP-835]]][[/footnote]]

**What it looks like:**

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
[[size larger]] **NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION** [[/size]]

Notification text goes here.

-- Maria Jones, Director, RAISA
[[/=]]
[[/div]]

**What to copy:**

[[collapsible]]
[[code]]

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
++++ NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION 

Notification text goes here.

-- Maria Jones, Director, RAISA
[[/=]]
[[/div]]

[[/code]]
[[/collapsible]]

**__Option 2__**[[footnote]]As seen in [[[SCP-3143]]][[/footnote]]

**What it looks like:**

[[=]]
[[div style="background: url(https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat; float: center; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
##ff5c48|[[size 150%]] **WARNING: THE FOLLOWING FILE IS LEVEL #/XXXX CLASSIFIED** [[/size]]##
----
[[size larger]] **ANY ATTEMPT TO ACCESS THIS FILE WITHOUT LEVEL #/XXXX AUTHORIZATION WILL BE LOGGED AND WILL LEAD TO IMMEDIATE DISCIPLINARY ACTION.**[[/size]]
[[/div]]
[[/=]]

**What to copy:**

[[collapsible]]
[[code]]

[[=]]
[[div style="background: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") center no-repeat; float: center; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
+ WARNING: THE FOLLOWING FILE IS LEVEL #/XXXX CLASSIFIED
----
+++ ANY ATTEMPT TO ACCESS THIS FILE WITHOUT LEVEL 4/XXXX AUTHORIZATION WILL BE LOGGED AND WILL LEAD TO IMMEDIATE DISCIPLINARY ACTION.
[[/div]]
[[/=]]

[[/code]]

**Note:** This code includes a link to include a background image, which was deleted at some point. If you want to leave this warning message with a white background you can keep the code the way it, but if you want to include the intended image you can replace in the link in the code with the link [https://scp-wiki.wdfiles.com/local--files/djkaktus-s-proposal/amber.png here].

[[/collapsible]]

__**Option 3:**__

**What It Looks Like:** 

[[div style="background: url(https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
++* ##black|BY ORDER OF THE OVERSEER COUNCIL##
##black|The following file is Level X/XXXX classified. Unauthorized access is forbidden.##
[[/=]]
= **##black|XXXX##**

@@ @@

@@ @@

[[/div]]

**What To Copy:**

[[collapsible]]

[[code css]]

[[div style="background: url(https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
++* ##black|BY ORDER OF THE OVERSEER COUNCIL##
##black|The following file is Level X/XXXX classified. Unauthorized access is forbidden.##
[[/=]]
= **##black|XXXX##**

@@ @@

@@ @@

[[/div]]

[[/code]]

[[/collapsible]]

__**Option 4:**__[[footnote]]As seen in [http://ja.scp-wiki.net/indonootoko-s-proposal SCP-001-JP][[/footnote]]

**What It Looks Like:**

[[div class="orderwrapper"]]
[[div class="council1"]]
[[/div]]
[[div class="ordertitle"]]
+* title
[[/div]]
[[div class="orderdescription"]]
 _
+* subtitle
description description description description description description description description description description description description description description description description description description
[[/div]]
[[div class="itemno"]]
+* XXXX
[[/div]]
[[/div]]

[[module CSS]]
.orderwrapper {position: relative;width: auto;text-align: center;}.council1 {position: relative;top: 0;bottom: 0;left: 0;right: 0;width: 295px;height: 295px;margin: auto;background-image: url( "https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png" );background-size: 295px 295px;background-repeat: no-repeat;background-position: center;}.ordertitle {position: absolute;left: 0;right: 0;top: 38px;}.ordertitle h1 {font-size: 220%;color: #555;}.orderdescription {position: absolute;left: 0;right: 0;top: 85px;width: 100%;}.orderdescription p {font-size: 90%;color: #555;}.orderdescription h1 {font-size: 120%;color: #555;}.itemno {position: absolute;left: 0;right: 0;bottom: 27px;}.itemno h1 {font-size: 170%;color: #555;}
[[/module]]

**What To Copy:**

[[collapsible]]

[[code]]
[[div class="orderwrapper"]]
[[div class="council1"]]
[[/div]]
[[div class="ordertitle"]]
+* title
[[/div]]
[[div class="orderdescription"]]
 _
+* subtitle
description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description description 
[[/div]]
[[div class="itemno"]]
+* XXXX
[[/div]]
[[/div]]

[[module CSS]]
.orderwrapper {position: relative;width: auto;text-align: center;}.council1 {position: relative;top: 0;bottom: 0;left: 0;right: 0;width: 295px;height: 295px;margin: auto;background-image: url( "https://kaktuskontainer.wdfiles.com/local--files/format-hell/scp_trans.png" );background-size: 295px 295px;background-repeat: no-repeat;background-position: center;}.ordertitle {position: absolute;left: 0;right: 0;top: 38px;}.ordertitle h1 {font-size: 220%;color: #555;}.orderdescription {position: absolute;left: 0;right: 0;top: 85px;width: 100%;}.orderdescription p {font-size: 90%;color: #555;}.orderdescription h1 {font-size: 120%;color: #555;}.itemno {position: absolute;left: 0;right: 0;bottom: 27px;}.itemno h1 {font-size: 170%;color: #555;}
[[/module]]
[[/code]]

[[/collapsible]]

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]
++ Alternative Header Format

__**Option 1:**__

**What it looks like:**[[footnote]]Image stolen from [[*user djkaktus]]'s [[[SCP-3935]]].[[/footnote]]

[[table style="border: none; width: 100%;"]]
[[row]]
[[cell]]
[[size 125%]]**Item #:** SCP-XXXX[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Level 4/XXXX**##[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell]]
[[size 125%]]**Object Class:** Euclid[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Classified**##[[/size]]
[[/cell]]
[[/row]]
[[/table]]
----
[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/scp-3935/school.png|align=center|width=100%|caption=SCP-XXXX.]]
----

**What to copy:**

[[collapsible]]
[[code]]
[[table style="border: none; width: 100%;"]]
[[row]]
[[cell]]
[[size 125%]]**Item #:** SCP-XXXX[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Level 4/XXXX**##[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell]]
[[size 125%]]**Object Class:** Euclid[[/size]]
[[/cell]]
[[cell style="text-align: right;"]]
[[size 125%]]###990000|**Classified**##[[/size]]
[[/cell]]
[[/row]]
[[/table]]
----
[[include component:image-block name=image.jpg|align=center|width=100%|caption=SCP-XXXX.]]
----
[[/code]]
**Note:** Replace 'image.jpg' with the name/url of the image you're using. Remember that this type of image-box will widen the image to occupy 100% of the article's width.
[[/collapsible]]

__**Option 2:**__[[footnote]] As seen in [[[SCP-2983]]] and others to come. [[/footnote]]

**What it looks like:**

[[collapsible]]

**Level 1:**

[[image header1new.png]]

------

**Level 2:**

[[image header2.png]]

------

**Level 3:**

[[image https://i.imgur.com/RDgDBft.png]]

------

**Level 4:**

[[image header4.png]]

------

**Level 5:**

[[image header5.png]]

------

**[**Big thanks to [[*user TSATPWTCOTTTADC]] for fixing headers 1 and 3.**]**

[[/collapsible]]

**What to copy:**

[[collapsible]]

[[code]]
[[image header1/2/3/4/5.png]] (Specify Image)

------
[[/code]]

**Note:** This code does not include the image file. Either upload it into the article or copy the image's address from here.

[[/collapsible]]

__**Option 3:**__[[footnote]] As seen in [http://ja.scp-wiki.net/scp-1970-jp SCP-1970-JP],  [http://ja.scp-wiki.net/scp-1370-jp SCP-1370-JP], and [[[SCP-4260]]]. [[/footnote]]

**What it looks like:**
[[include :scp-wiki:component:classified-decoration
|lv=1
|item=7777
|oc=Euclid
|lang=EN
]]
[[collapsible show="+ In addition to this..." hide="- close"]]
[[include :scp-wiki:component:classified-decoration
|lv=2
|item=7777-RU
|oc=Евклид
|lang=RU
]]
[[include :scp-wiki:component:classified-decoration
|lv=3
|item=7777-KO
|oc=유클리드(Euclid)
|lang=KO
]]
[[include :scp-wiki:component:classified-decoration
|lv=4
|item=CN-7777
|oc=Euclid
|lang=CN
]]
[[include :scp-wiki:component:classified-decoration
|lv=5
|item=7777-FR
|oc=Euclide
|lang=FR
]]
[[include :scp-wiki:component:classified-decoration
|lv=1
|item=7777
|oc=--Euclid--
+* Safe
|lang=EN
]]
[[/collapsible]]



**What to copy:**

[[collapsible]]
> @@[[include :scp-wiki:component:classified-decoration@@
> |lv=**1**/**2**/**3**/**4**/**5**
> |item=7777
> |oc=Euclid
> |lang=**EN**/**RU**/**KO**/**CN**/**FR**/**PL**/**ES**/**TH**/**JP**/**DE**/**IT**/**UA**/**PTBR**
> @@]]@@

> @@[[include :scp-wiki:component:classified-decoration@@
> |lv=1
> |item=7777
> |oc=@@--@@Euclid@@--@@
> **@@+* Safe@@**
> |lang=EN
> @@]]@@
= //Or you want to change the text of "LEVEL" and "CLASSIFIED"?//
> @@[[include :scp-wiki:component:classified-decoration@@
> |lv=1/2/3/4/5
> |item=7777
> |oc=Euclid
> |lang=EN/RU/KO/CN/FR/PL/ES/TH/JP/DE/IT/UA/PTBR
> |trans-level=**<the translation equivalent of "LEVEL" in your language>**
> |trans-classified=**<the translation equivalent of "CLASSIFIED" in your language>**
> @@]]@@
[[/collapsible]]


__**Option 5:**__[[footnote]]As seen in [[[SCP-3570|EE-3570]]] and [[[SCP-4792]]]. Credit to [[*user Yossipossi]], [[*user Lt Flops]], and KindlyTurtleClem.[[/footnote]]

**What it looks like:**
[[a href="*https://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;"]]
[[span_ style="display: inline-block; width: 100%; background-color: black; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;"]]
**Threat Level:** Black
[[/span]]
[[/a]]
= ^^(Click me!)^^

[[collapsible show="+ And in other colours..." hide="- close"]]
[[a href="*https://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="font-size: 18px; color: black; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;"]]
[[span_ style="display: inline-block; width: 100%; background-color: #f3f3f3; text-align: center; border: 1px solid #080808; margin: 1px; padding-top: 8px; padding-bottom: 8px;"]]
**Threat Level:** White
[[/span]]
[[/a]]
@@ @@
[[a href="*https://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;"]]
[[span_ style="display: inline-block; width: 100%; background-color: #b01; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;"]]
**Threat Level:** Red
[[/span]]
[[/a]]
[[/collapsible]]

**What to copy:**

[[collapsible]]

[[code]]
[[a href="*https://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp" style="font-size: 18px; color: white; text-shadow: 1px 3px 1px rgba(0,0,0,0.3); text-decoration: none;"]]
[[span_ style="display: inline-block; width: 100%; background-color: black; text-align: center; border: 1px none #000; margin: 1px; padding-top: 8px; padding-bottom: 8px;"]]
**Threat Level:** Black
[[/span]]
[[/a]]
[[/code]]

**Note:** To change the colour, simply fill the "background-color" field with white/blue/green/yellow/orange/red/black. Colours with higher/lower contrast may require you to change the text "color" field to white/black for readability.

**Note:** This works best with other alternative header styles, as seen above. Based on the French Branch's Threat Level classifications.
[[/collapsible]]


__**Option 8: Option 1(Simpler Version)**__

**What it looks like:**

[[collapsible]]

[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;"]]
[[div style="width: 50%;"]]
**Item #**: SCP-XXXX

**Object Class**: Keter
[[/div]]
[[div style="width: 50%; text-align: right;"]]
**Level 5/XXXX**

**Top Secret**
[[/div]]
[[/div]]

Content

----

[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444; font-size: 1.25em;"]]
[[div style="width: 50%;"]]
**Item #**: SCP-XXXX

**Object Class**: Keter
[[/div]]
[[div style="width: 50%; text-align: right;"]]
**Level 5/XXXX**

**Top Secret**
[[/div]]
[[/div]]

Content

[[/collapsible]]

**What to copy:**

[[collapsible]]

[[code]]
[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;"]]
[[div style="width: 50%;"]]
**Item #**: SCP-XXXX

**Object Class**: Keter
[[/div]]
[[div style="width: 50%; text-align: right;"]]
**Level 5/XXXX**

**Top Secret**
[[/div]]
[[/div]]

Content
[[/code]]
----
[[code]]
[[div style="display: flex; padding-bottom: -1em; border-bottom: solid 1px #444; font-size: 1.25em;"]]
[[div style="width: 50%;"]]
**Item #**: SCP-XXXX

**Object Class**: Keter
[[/div]]
[[div style="width: 50%; text-align: right;"]]
**Level 5/XXXX**

**Top Secret**
[[/div]]
[[/div]]

Content
[[/code]]

[[/collapsible]]
@@ @@

@@ @@

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ Invisible Text

[[module CSS]]
div.transparent-box-example {
    border: 1px solid #ccc;
    padding: 0.5em;
    margin: 0.25em;
}
[[/module]]

Instead of doing "{{@@##white|TEXT HERE...##@@}}" (which would break on any browsers using a "dark theme"), you should use //transparent// instead.

Try selecting the below boxes:

[[div class="transparent-box-example" style="background-color: white"]]
##transparent|This text is invisible but can be seen on select.##

##white|This text is white instead.##
[[/div]]

[[div class="transparent-box-example" style="background-color: black"]]
##transparent|This text is invisible but can be seen on select.##

##white|This text is white instead.##
[[/div]]

**What to copy:**

[[code]]
##transparent|Your text here.##
[[/code]]

Disclaimer: this works on Sigma-9 only.

**What it looks like:**

##transparent|Your text here.##

++ "Paper/Note" formats

**__Option 1__**[[footnote]] As seen in [[[SCP-4003]]] [[/footnote]]

**What it looks like:**

[[div class="page"]]

Document body here. You will need to use "@@ @@" on new lines to properly space text.
@@ @@
Like so.
@@ @@
You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel. 
@@ @@
[[>]]
Enjoy.
[[/>]]
[[/div]]


**What to copy:**

[[collapsible]]

**IMPORTANT** This goes at the top of your page:

[[code]]
[[module css]]
.page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: linear-gradient(to top ,rgb(202, 219, 228) 0%, rgb(231, 233, 220) 8%);
    background-origin: padding-box;
    background-position: 0px 8px;
    background-repeat: repeat;
    background-size: 100% 20px;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}
.page p,
.page ul {
    line-height: 20px;
    margin: 0;
}
[[/module]]
[[/code]]

**IMPORTANT** This goes where you want the box to appear:

[[code]]
[[div class="page"]]

Document body here. You will need to use "@@ @@" on new lines to properly space text.
@@ @@
Like so.
@@ @@
You can use [[<]], [[=]], and [[>]] to align different lines/paragraphs to give proper feel. 
@@ @@
[[>]]
Enjoy.
[[/>]]
[[/div]]
[[/code]]
[[/collapsible]]

@@ @@

@@ @@

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ "Login/Logout" formats

**__Option 1__**[[footnote]]**Source:** https://scp-jp-sandbox2.wikidot.com/inc:fakeprot _
**Original Author:** [[*user Nanimono Demonai]][[/footnote]][[footnote]] As seen in [http://ja.scp-wiki.net/scp-1370-jp SCP-1370-JP]. [[/footnote]]

**What it looks like:**
[[module CSS]]
.fakeprot .mailform-box .buttons{display:none;}
.fakeprot + .collapsible-block .collapsible-block-link {padding: 0.1em 0.5em;text-decoration: none;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:hover {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:active {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-unfolded-link{margin:0.5em 0;text-align: center;}
.fakeprot + .collapsible-block .collapsible-block-folded{margin:0.5em 0;text-align: center;}
.fakeprot .passw input[type=text] {text-security:disc;-webkit-text-security:disc;-mox-text-security:disc;}
.mailform-box td:first-child {width: 80px;}
[[/module]]

[[div class="fakeprot"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# name
 * title: ID
 * default: <YOUR ID>
 * type: text
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[div class="passw"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# affiliation
 * title: PASSWORD
 * default: ・・・・・・・・・
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[/div]]
[[/div]]
[[collapsible show="Login" hide="Logout"]]
text
[[/collapsible]]


**What to copy:**

[[collapsible]]

**IMPORTANT:** This goes at the top of your page:

[[code]]
[[module CSS]]
.fakeprot .mailform-box .buttons{display:none;}
.fakeprot + .collapsible-block .collapsible-block-link {padding: 0.1em 0.5em;text-decoration: none;background-color: #F4F4F4;border: 1px solid #AAA;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:hover {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-link:active {background-color: #DDD;color: #000;}
.fakeprot + .collapsible-block .collapsible-block-unfolded-link{margin:0.5em 0;text-align: center;}
.fakeprot + .collapsible-block .collapsible-block-folded{margin:0.5em 0;text-align: center;}
.fakeprot .passw input[type=text] {text-security:disc;-webkit-text-security:disc;-mox-text-security:disc;}
.mailform-box td:first-child {width: 80px;}
[[/module]]
[[/code]]

**IMPORTANT:** This goes where you want the form to appear:

[[code]]
[[div class="fakeprot"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# name
 * title: ID
 * default: <YOUR ID>
 * type: text
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[div class="passw"]]
[[module MailForm to="aaaa (DUMMY)" button=""]]
# affiliation
 * title: PASSWORD
 * default: ・・・・・・・・・
 * rules:
  * required: true 
  * maxLength:10
  * minLength: 100
[[/module]]
[[/div]]
[[/div]]
[[collapsible show="Login" hide="Logout"]]
text
[[/collapsible]]
[[/code]]
[[/collapsible]]

**__Option 2__**

**What it looks like:**
[[html]]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {box-sizing: border-box;}
 
.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}
 
.input-field:focus{
    border-style: solid;
    transition: 0.5;
    border-color: maroon;
    border-width: 2px;
}
 
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.5s;
}
 
.btn:focus {
    outline: 0;
}
 
.btn {
    background-color: Maroon;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
    transition: 0.09s;
    border-radius: 3px;
}
 
.btn:hover {
    opacity: 1;
    transition: 0.8s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}
 
.btn:active {
    transition: 0.09s;
    transform: translateY(1px);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
 
.btn2 {
    background-color: white;
    border: none;
    cursor: pointer;
}
 
p{
font-family: Helvetica;
margin-bottom: 5%;
}
</style>
</head>
<body>
 
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p style="font-size:55px; font-weight: bold;">SCiPNET LOGIN</p>
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
 
  <div class="input-container">
    <input onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;" class="input-field" type="password" placeholder="Password">
  </div>
 
   <button id="start_button" class="btn btn-success" onclick="window.open('REPLACE THIS TEXT WITH A URL TO WHERE YOU WANT THE LOGIN BUTTON TO TAKE YOU','_parent')" disabled> Login</button>
 
<br></br>
   <button style= "font-weight: bold;" class="btn2 btn-success"> Forgot password?</button>
 
</form>
</body>
</html>
[[/html]]

**What to copy:**
[[collapsible]]
[[code type="html"]]
[[html]]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {
    box-sizing: border-box;
}

.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;

}

.input-field:focus{
    border-style: solid;
    transition: 0.5;
    border-color: maroon;
    border-width: 2px;
}

.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.5s;
}

.btn:focus {
    outline: 0;
}

.btn {
    background-color: Maroon;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
    transition: 0.09s;
    border-radius: 3px;
    transition 0.8s;
}

.btn:hover {
    opacity: 1;
    transition: 0.8s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}

.btn:active {
    transition: 0.09s;
    transform: translateY(1px);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}

.btn2 {
    background-color: white;
    border: none;
    cursor: pointer;
}

p {
    font-family: Helvetica;
    margin-bottom: 5%;
}
</style>
</head>
<body>

<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p style="font-size:55px; font-weight: bold;">SCiPNET LOGIN</p>
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  
  <div class="input-container">
    <input onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;" class="input-field" type="password" placeholder="Password">
  </div>

   <button id="start_button" class="btn btn-success" onclick="window.open('REPLACE THIS TEXT WITH A URL TO WHERE YOU WANT THE LOGIN BUTTON TO TAKE YOU','_parent')" disabled> Login</button>

<br></br>
   <button style= "font-weight: bold;" class="btn2 btn-success"> Forgot password?</button>


</form>
</body>
</html>
[[/html]]
[[/code]]

**IMPORTANT:**
* The login button won't redirect if the password field is empty.
* This login format is made for articles that use offsets. Change the placeholder text to the proper offset link for your article.
[[/collapsible]]


[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ Image Carousel

[[include :scp-wiki:component:carousel
| images=nintendo.jpg,youtube.jpg,linkedin.png,rescue.png,billwurtz.jpg
| caption=A selection of images with no inherent meaning or hidden message.
| interval=3
| wiki=scp-sandbox-3
| page=carousel-demo
| width=300px
| height=240px
| position=center
| background=white
]]

[[[component:carousel | Instructions for use]]]

@@ @@

@@ @@

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ Blackbox formats

**__Option 1__**[[footnote]]Credit for both of these goes to [[*user Nanimono Demonai]].[[/footnote]]
**What It Looks Like:**
[[span class="bblock"]]This is a format to let you blackbox information and let it be visible over a mouseover.[[/span]]

**What To Copy:**
[[code]]
[[span class="bblock"]]text here[[/span]]
[[/code]]

**How To Adjust It:**
This code lets you adjust the color of the mouseover text.
[[code]]
[[module CSS]]
.bblock:hover {color: white}
[[/module]]
[[/code]]

**__Option 2__**
**What It Looks Like:**
[[span class="dblock"]]This changes the color of the background on mouseover, rather than the text.[[/span]]

**What To Copy:**
[[code]]
[[span class="dblock"]]text here[[/span]]
[[/code]]

**How To Adjust It:**
This code lets you adjust the color of the mouseover background.
[[code]]
[[module CSS]]
.dblock:hover {background: #f4f4f4}
[[/module]]
[[/code]]

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ "today's date" format

**What It Looks Like:**
[[module ListPages limit="1" category="*" order="updated_at desc"]]
> Today's date is %%updated_at|%Y/%m/%d%%... maybe!
[[/module]]

**What to copy:**
[[collapsible]]
[[code]]
[[module ListPages limit="1" category="*" order="updated_at desc"]]
> Today's date is %%updated_at|%Y/%m/%d%%... maybe!
[[/module]]
[[/code]]
[[/collapsible]]

@@@@
@@@@
[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]
@@@@
@@@@

++ Discord Chat Formatting

**What it looks like:**

[[include :scp-wiki:component:discord-chat-source |inc-source= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-user= --]
|user-id=one
|username=GOTO 20
|usericon=https://scp-wiki.wdfiles.com/local--files/component:discord-chat/GOTO20.png
|usercolor=#ff5e56
]]

[[include :scp-wiki:component:discord-chat-source |inc-user= --]
|user-id=two
|username=corvas
|usericon=https://scp-wiki.wdfiles.com/local--files/component:discord-chat/corvas.png
|usercolor=#60b9dc
]]

[[include :scp-wiki:component:discord-chat-source |inc-start= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-msg-start= --]
|user-id=one
|username=GOTO 20
|msg-time=Today at 4:28 PM
]]
yo, Corvus, you around? [[image https://scp-wiki.wdfiles.com/local--files/component:discord-chat/smug.svg class="emoji inline"]]
[[include :scp-wiki:component:discord-chat-source |inc-msg-end= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-msg-start= --]
|user-id=two
|username=Corvas
|msg-time=Today at 4:28 PM
]]
ya 
what's up [[span class="at_mention"]]@GOTO 20[[/span]]
[[image https://scp-wiki.wdfiles.com/local--files/component:discord-chat/smug.svg class="emoji alone"]]
[[include :scp-wiki:component:discord-chat-source |inc-msg-end= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-new-msgs= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-msg-start= --]
|user-id=one
|username=GOTO 20
|msg-time=Today at 4:29 PM
]]
Here is an image
[[image https://scp-wiki.wdfiles.com/local--files/component:discord-chat/noodle.jpg link="https://scp-wiki.wdfiles.com/scp-4378" class="msgimage"]]
[[include :scp-wiki:component:discord-chat-source |inc-msg-end= --] ]]

[[include :scp-wiki:component:discord-chat-source |inc-attch= --]
|attch-id=attch-one
|user-id=one
|username=GOTO 20
|msg-time=Today at 4:30 PM
|attchname=mv_sk1r.tar.gz
|attchsize=2.71 KB
|attchlink=https://scpwiki.com/scp-2105
]]

[[include :scp-wiki:component:discord-chat-source |inc-attch= --]
|attch-id=attch-two
|user-id=two
|username=corvas
|msg-time=Today at 5:20 PM
|attchname=butts.zip
|attchsize=512 MB
|attchlink=https://scpwiki.com/scp-4205
]]

[[include :scp-wiki:component:discord-chat-source |inc-end= --] ]]

**What to copy:**

[/component:discord-chat Full explanation and code available here.]

@@@@
@@@@
[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

++ ACS Header (Anomaly Classification System)

[[[anomaly-classification-system-guide|Click here to learn what this is for.]]]

**Original author:** [[*user Woedenaz]]

**What it looks like:**


[[include :scp-wiki:component:anomaly-class-bar-source

|item-number= XXXX

|clearance= #

|container-class= euclid

|secondary-class= none

|secondary-icon= https://example.com

|disruption-class= vlam

|risk-class= warning

]]

**What to copy:**

[[collapsible]]
[[[component:anomaly-class-bar|Click here for a full guide.]]]

> [[include :scp-wiki:component:anomaly-class-bar-source
> 
> |item-number= XXXX
> 
> |clearance= #
> 
> |container-class= euclid
> 
> |secondary-class= none
> 
> |secondary-icon= https://example.com/acs-image.svg
> 
> |disruption-class= vlam
> 
> |risk-class= warning
> 
> ]]

[[/collapsible]]

@@@@
@@@@
[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]
@@@@
@@@@

++ Email Template

[[module CSS]]
.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
[[/module]]

**What it looks like:**[[footnote]] As seen in [[[APAS | Automated Passive Amnestization System Ver. 17.09]]], [[[The Beast Beneath The Library]]], and [[[SCP-4415]]]. [[/footnote]]

[[div class="email-example"]]
[[=]]
------
[[collapsible show="Access SCiPNET Email? One (1) new message!" hide="Re:SUBJECT"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**To:** RECIPIENT
**From:** SENDER
**Subject:** SUBJECT
[[/div]]
------
text
[[/div]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**To:** RECIPIENT
**From:** SENDER
**Subject:** Re:SUBJECT
[[/div]]
------
text
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/div]]

**What to copy:**

[[collapsible]]
**IMPORTANT:** This goes at the top of your page.
[[code]]
[[module CSS]]
.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
[[/module]]
[[/code]]

**IMPORTANT:** This goes where you want the email exchange.
[[code]]
[[div class="email-example"]]
[[=]]
------
[[collapsible show="Access SCiPNET Email? One (1) new message!" hide="Re:SUBJECT"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**To:** RECIPIENT
**From:** SENDER
**Subject:** SUBJECT
[[/div]]
------
text
[[/div]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**To:** RECEPIENT
**From:** SENDER
**Subject:** Re:SUBJECT
[[/div]]
------
text
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/div]]
[[/code]]
[[/collapsible]] 
@@@@
@@@@
[[module CSS]]
#page-title {
    display: block;
}
[[/module]]
@@ @@
@@ @@

SCP Style Resource

Module Styles

Inline Styles

Includes

CSS Classes

Page Source