Magazine Theme

Link to article: Magazine Theme.

Module Styles

• @import url(https://scp-wiki.wikidot.com/theme:magazine/code/3);
  
  .mmposter-wrap{
      display: flex;
      justify-content: center ;   
      flex-wrap: wrap;
  
  }
  
  .mmposter-cell{
      min-width: 10%;
          justify-self: center;
  }
  
  .mmposter-blockquote .mmposter-cell{
      min-width: 50%;
  }
  
  .mmposter-semi  .mmposter-cell{
    width: 50% ;
  }
  
  .mmposter-semi  .mmposter-cell span[style*="underline"]{
   display: none
  }
  
  .flex-pc{
      display: flex;
  }
  
  
  .flex-wrap{
      display: flex;
      justify-content: space-around;    
  }
  
  .flex-wrap div{
       margin: 0 0.5rem;
      width: 100%;
  }
  
  @media (max-width: 500px) {
    .flex-pc{
      display: block;
  }
  
      .flex-wrap{
  flex-wrap:wrap;        
      }
  
    .mmposter-semi  .mmposter-cell,
  
      .mmposter-cell{
          width: 100%;
  min-width: auto;
  
      }    
      .mmposter-right{
  margin-top:2rem;
      }    
      .mob-breakkkk{
      display: block
  }
  }
  
  /**/
  .no-sel  p{
  line-height: 1.2rem;
          color:#0e1554;
  
  }
  
  .no-sel  tt{
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
      color:#000;
      padding:0 0rem 0 1.2rem;
      font-family: initial;
  
  }
  
  .no-sel tt:before {
  content:" ←  ";
          padding:0 0.2rem 0 0rem;
  
  }
  
  /*
  -----------------------------
  Wrap columns
  -------------------------------
  */
  
  :root{
  
   --column111-box-width:10rem;
   --column111-box-height:15rem;
    --column111-gap:0rem;
    --column111-mid-width: 4rem;
    --column111-boxMOB-width:AUTO;
  
    --column111-blank-width:calc(var(--column111-box-width) / 2.5 - var(--column111-gap)  );
    --column111-blank-height:calc(var(--column111-box-height) +  var(--column111-gap) / 2 + var(--column111-blank-width) / 2.5  );
  
    --column111-line-top:calc(var(--column111-blank-height)  + 0.2rem );
  
    --column111-line-height:  calc(100% - var(--column111-blank-height) - 0.5rem);
  }
  
  .mz-column222-wrap{ 
    display: flex;
    flex-wrap: nowrap;
   justify-content:   space-around;
  }
  
  .column222-right, .column222-left{ 
  max-width:46% !important;
  }
  
  .column-wrap-111 .column222-box{ 
    display: block;
    background: {$box-bg};
    position: absolute;
    width: var(--column111-box-width);
    height: var(--column111-box-height);
  }
  
  .column-wrap-111  .column222-left-blank,
  
  .column-wrap-111  .column222-right-blank{
    float: right;
    width: var(--column111-blank-width);
    height: var(--column111-blank-height);
    padding: 0 var(--column111-gap);
  }
  
  .column-wrap-111 .column222-right-blank{
    float: left;
  }
  
  .column-wrap-111  .column222-mid{
     width: var(--column111-mid-width);
  }
  
  .column-wrap-111  .column222-mid-line{
    display: block;
    position: relative;
     border-left: 2px solid #333;
    height: var(--column111-line-height);
    top: var(--column111-line-top);
  }
  
  @media (max-width: 600px){
      .mz-column222-wrap{ 
    display: block;
   }
  
  .column-wrap-111   .column222-box{ 
    position: inherit;
    width: var(--column111-boxMOB-width);
    height: auto;
      margin: 0 auto;
  }
  
     .column222-left-blank,
    .column222-right-blank,
    .column222-mid-line{
      display: none;
    }
  .column222-right, .column222-left{ 
  max-width:100% !important;
  }
  }

• /*=====================================
  Magazine theme - 00000000
  ------------------------------
  Customiz
  =====================================*/
  
  @import url(https://scp-wiki.wikidot.com/theme:magazine/code/1);
  
  #main-content{    
      width:{$content-width};
  }
  
  div#header h1 a::before {
      content:{$header-title};
  }
  
  div#header h2::before {
     content: {$header-subtitle};
  }
  
  #header-extra-div-1::before {  
      background-image:{$logo-image};
  }
  
  
  @media (max-width: 767px) {
   div#header h1 a::before {
      content:{$header-title};
      content:{$pad-title};
     }
  
    div#header h2::before {
      content:{$header-subtitle};
      content:{$pad-subtitle};
     }
  
     #header-extra-div-1::before {  
         background-image:{$logo-image};
         background-image: {$logo-image-pad};
      }
  }
  
  @media (max-width: 500px) {
    div#header h1 a::before {
      content:{$header-title};
      content:{$pad-title};
      content:{$mob-title};
      }
  
      div#header h2::before {
      content: {$header-subtitle};
      content:{$pad-subtitle};
      content: {$mob-subtitle};
     }
  
     #header-extra-div-1::before {  
         background-image:{$logo-image};
         background-image: {$logo-image-pad};
         background-image: {$logo-image-mob};
      }
  }
  
  #side-bar:before {
      background-image:{$logo-sidebar};
      content:{$sidebar-content};
  }
  
  #page-title{
     display:{$page-title};
  }
  
  #page-title::after{
      content:{$title-orn-content};
      font-size:{$title-orn-size};
      line-height:calc( {$title-orn-size} * 0.7);
      width: {$title-orn-width};
      color:{$title-orn-color};
  }
  
  #page-title:before,
  #page-title:after{
     display:{$title-underlines};
  }
  

• /*=====================================
  Magazine Theme
  --------------
  Collapsible Sidebar Source
  =====================================*/
  
  :root{  
  --body-width-on-desktop:60rem;
  --SB-topbox_left:3.2rem;   
      --SB-bg_PC:var(--page-bg);
  }
  
  
  #content-wrap{
       margin-left:0;
  }
  
  #content-wrap::after {
  display: none;
  }
  
  #main-content {
      padding: 0;
      padding-top: var(--main-top);
      margin: 0 auto;
      left: 0;
      right: 0;
  }
  
  #main-content::after {
  filter: sepia(50%) hue-rotate(150deg) saturate(150%);
  }
  
  div#extra-div-1 {
      z-index: 9;
  }
  
  #side-bar{
    z-index: 1;
    position: fixed;
    height: 100%;
  }
  
  #page-content {
              margin: auto;
  }
  
  #side-bar{
       margin-left:0;
       margin: 0;
       position: fixed;
       padding-top:30px ;
         transition: left 1s;
  }
  
  
  #side-bar::before {
      position:  static;
      margin: 0 auto;
  }
  
  
  #side-bar:hover, #side-bar:active {
       transition: all 0.5s;
       background-color: var(--sidebar-bg-pc); 
  }
  
  #side-bar :is(.media, .sns):has(a:nth-child(2)) a img{
    --media_pd: 0.6em;
  }
  #side-bar :is(.media, .sns):has(a:nth-child(4)) a img{
    --media_pd: 0.5em;
  }
  #side-bar :is(.media, .sns):has(a::nth-child(6)) a img{
   --media_pd: 0.2em;
  }
  #side-bar :is(.media, .sns):has(a:nth-child(7)) a img{
   --media_pd: 0.5em;
  }
  #side-bar :is(.media, .sns):has(a:nth-child(8)) a img{
    --media_pd: 0.4em;
  }
  
  @media (max-width: 479px) {
   #content-wrap #side-bar :is(.media, .sns) a img{
        --media_pd: 0.6em;
       --media_width:2em;
    }   
  }
  

• /*===================================
  Magazine Theme
  --------------
  Extensions 
  =====================================*/
  @import url(https://scp-wiki.wikidot.com/theme:magazine/code/3);

• /*===================================
  Magazine Theme
  --------------
  Custom page background
  =====================================*/
  #container {
  --hollow-image: {$page-background};
  background: var(--hollow-image) center 0 repeat;
  }
  
  #content-wrap #side-bar::before,
  #content-wrap #side-bar {
  background-color: transparent ;
  }

• /*===================================
  Magazine Theme
  中华异学会英文版 -  Abnormality Institute EN ver.
  --------------
  All the icons are under CC-BY-SA
  LOGO_YXH by Freedom Koo; LOGO_noricst by Enflowerz
  =====================================*/
  :root{
      --tabNAV-bgHover:var(--color-navy);
      --tabMain-border:var(--color-navy);
      --visted-link:#333;
    --header-title: "Wonders Studie Association" ;
    --mob-title:"W. S. A.";
    --header-subtitle:"Wondering about Marvels, Studying by Spirit, Associating the World";
    --mob-subtitle:"To wonder, To study, To associate";
     --LOGO_position-mob:51% 0%;
      
     --LOGO_image-mob:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_noricst.svg');
  
  --LOGO_sidebar:var(--icon-cn);
  --LOGO_sidebar-opacity:0.7;
  
   --hr-image:var(--icon-cn);
   --hr-color:192,192,192;
      --icon-cn:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_CN.svg');
      --icon-yxh:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_YXH.svg');
  }
  /*============================================
  正文
  ============================================*/
  
  .mz-innerbox{
  }
  
  .mz-poem{
      text-align: center;
      font-family: var(--handwriting-font);
      font-size: 1.8em
  }
  
  .yxh-img{
      --yxh-size:15rem;
      width: var(--yxh-size);
      height: var(--yxh-size);
      background-image: var(--icon-yxh);
      background-size: cover;
      margin: 0 auto;
      opacity: 1;
      filter: blur(1px);
  }
  
  .yxh-maxim{
      border: solid 1px rgba(33,33,33,0.5);
      text-align: center;
      margin: 1em 3em;
      font-size: 1.6rem;
     font-family: 'Huiwen-Mincho';
  }
  
  @media (max-width: 500px){
      .mz-innerbox{
      font-size: 0.8rem;
  }
  .mz-poem{
      font-size: 0.8rem;
  }
   .yxh-maxim {
      margin: 1em 1em;
      font-size: 1.4rem;
   }
   .yxh-maxim p{
  padding: 0;
       line-height: 0;
   }
  }
  
  /*============================================
  分割线，来自woednaz
  ============================================ */
  
  .mz-poem  hr {
      border-top:1px solid #000 ;
      background: rgb(0, 0, 0, 0);
      border: 0;
      height: 1rem;
      width: 70%;
      position: relative;
      margin: 1.5rem auto;
      }
  
  .mz-poem  hr::before {
      content: " ";
      background-image: var(--hr-image);
      color: rgb(var(--hr-color));
      display: inline-block;
      position: absolute;
      top: -0.2rem;
      left: 0;
      margin: 0 auto;
      font-size: 0.938rem;
      line-height: 0;
      height: 1.6rem;
      width:4rem;
      background-repeat: no-repeat;
      background-position: center center;
      margin-left: -webkit-calc(50% - 2rem);
      margin-left: -moz-calc(50% - 2rem);
      margin-left: calc(50% - 2rem);
      background-color: transparent;
      z-index: 1;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain;
  }
  
  .mz-poem  hr::after {
      content: " ";
      height: 0.1rem;
      width: 100%;
      position: absolute;
      margin: 0 auto;
      background: rgb(var(--hr-color));
      left: 0;
      top: 50%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A");
      mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A");
      -webkit-mask-size: 43.375rem auto;
      mask-size: 43.375rem auto;
      -webkit-mask-position: center center;
      mask-position: center center;
  }
  
  /*
  ============================================
  杂项
  ============================================
   */
  
  /* ------------------假标签-------------------- */
  
  #main-content .page-tags {
     display:{$page-tags};
  }
  
  div.pseudo-tags ul {
      font-size: 85%;
      border-top: 1px solid #BBB;
      display: inline-block;
      margin: 10px 0 0;
      padding: 0 2px;
      list-style: none;
  }
  
  div.pseudo-tags li {
      color: #b01;
      text-decoration: none;
      display: inline-block;
      margin: 0 1px;
      cursor: pointer;
  }
  
  @media (max-width: 479px) {
   .poem-7 {
      font-size:120% ;
   }
  
   .yxh-maxim{
      margin: 2rem;
   }
  
  .yxh-outbox, .ej-outbox{
     }
  }

Inline Styles

• font-size:180%;

• font-family:var(--header-tt-font);

• font-family:var(--page-tt-font);

• font-family:var(--page-font);

• font-family:var(--handwriting-font);

• font-family:var(--teletype-font);

• display:flex;flex-wrap: wrap; justify-content:space-around; 

• --tip-color:blue

• text-align:center

• text-align:center

• left:-2rem;position:relative;--tip-color:#abddba

• margin: 0.5em 0 0.5em 0

• left:-4rem;position:relative;--tip-color:#bbdcea

• margin: 0.5em 0 0.5em 0

• --color-notepage: blue;--color-rowline: green;--color-bookpage-txt:red

• width:60%;margin: 0 auto

• margin: 0 auto;

• width:80%;margin: 0 auto

• width:80%;margin: 0 auto

• width:80%;margin: 0 auto

• margin: 0 auto;

• margin: 0 auto;

• --tk-img-right:url(http://scpsandboxcn.wikidot.com/local--files/icon/IMG-goat.png)

• --tk-img-right:url(IMAGE_LINK)

• --tk-img-left:url(IMAGE_LINK); --tk-img-right:url(IMAGE_LINK);

• --tk-img-left:url(http://scpsandboxcn.wdfiles.com/local--files/icon/ICON_angry-eagle.svg)

• --shadow-line:green;--tk-box-bg:skyblue;

• --shadow-line:green;--tk-box-bg:skyblue;color:darkred

• padding-top: 0rem

• height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;

• height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;

• float:right;width:160px

• {$mid-line}

• opacity:0

• display:none

Includes

• :scp-wiki:theme:magazine [info]
• :scp-wiki:info:start [info]
• :scp-wiki:info:more [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:collapsible-sidebar [info]

CSS Classes

• image

• wait

• wait

• wait

• wait

• wait

• wait

• wait

• wait

• wait

• float-sticky

• float-toc

• blockquote

• blockquote

• no-sel

• blockquote

• no-sel

• mmposter-wrap

• mmposter-cell

• mmposter-cell

• newpage

• mmposter-wrap

• mmposter-cell

• mmposter-cell

• blockquote

• mz-img-wrap

• mz-img-wrap

• mz-img-wrap

• mz-img-wrap

• img-frame

• mz-img-wrap

• img-frame

• mz-img-wrap

• img-b3d

• mz-img-wrap

• img-b3d

• mz-img-wrap

• img-border

• mz-img-wrap

• img-border

• mz-img-wrap

• img-border

• img-frame

• mz-img-wrap

• img-border

• img-frame

• mz-hr

• hr-contract

• mz-hr

• hr-solid

• mz-hr

• hr-double

• mz-hr

• hr-dotted

• mz-hr

• hr-contract

• hr-solid

• mmposter-wrap

• mmposter-cell

• mmposter-cell

• blockquote

• mz-hr

• hr-contract

• hr-solid

• mz-hr

• mz-mirror

• mmposter-wrap

• mmposter-cell

• mmposter-cell

• blockquote

• no-sel

• mz-hr

• mz-log-wrap

• mz-log-list

• mz-hr

• mz-log-trigger

• mz-log-hovertip

• mz-log-content

• mmposter-wrap

• mmposter-semi

• mmposter-cell

• blockquote

• blockquote

• pgtt-module  mz-hr

• mmposter-cell

• blockquote

• no-sel

• mz-log-wrap

• mz-log-list

• mz-hr

• mz-log-trigger

• mz-log-hovertip

• mz-log-content

• mmposter-wrap

• mmposter-blockquote

• mmposter-cell

• mz-blockquote

• mz-blockquote

• mmposter-cell

• mz-board

• mz-board

• mmposter-wrap

• mmposter-blockquote

• mmposter-cell

• mz-cover

• mz-cover

• mmposter-cell

• mz-paper

• mz-paper

• mmposter-wrap

• mmposter-blockquote

• mmposter-cell

• mz-textquote

• mz-textquote

• mmposter-cell

• mz-outbox

• mz-innerbox

• mz-outbox

• mz-innerbox

• mob-hid

• mz-paper

• mz-column

• mz-img-wrap

• mz-hr

• clip-wrap

• clip-body

• clip-wrap

• clip-body

• flex-wrap

• flex-wrap

• clip-wrap

• clip-body

• clip-wrap

• clip-img

• code

• clip-wrap

• clip-body

• clip-wrap

• clip-img

• flex-wrap

• note-page

• note-page

• mz-note

• mz-note

• mz-note

• note-left

• mz-note

• hr-double

• lc-wrap

• mz-notepage-wrap

• chew-top

• lc-mid

• notepage-body

• rowline-none

• notepage-header

• notepage-main

• page-fullline

• notepage-footer

• flex-pc

• mz-notepage-wrap

• chew-left

• notepage-body

• notepage-header

• notepage-main

• no-sel

• mz-notepage-wrap

• chew-left

• notepage-body

• notepage-header

• notepage-main

• notepage-footer

• notepage-footer

• mz-notequote-wrap  chew-left

• notepage-body

• notepage-header

• notepage-main

• notepage-footer

• hr-double

• mob-hid

• mz-notebook-wrap

• mob-hid

• notebook-body

• notebook-left  notebook-bookmark

• notepage-main

• no-sel

• mz-notebook-wrap

• notebook-body

• notebook-left

• notepage-main

• notebook-mid

• notebook-right

• notepage-main

• mz-note

• note-left

• mz-note

• note-left

• notebook-mid

• notebook-right

• notepage-main

• notebook-body

• notebook-body

• notebook-left/right

• notepage-main

• mz-talking-wrap

• pc-width

• talking-left

• talkimg-below

• talking-img

• talking-box

• talking-right

• talkimg-below

• talking-img

• talking-box

• talkbox-round  talkbox-dark

• flex-wrap

• blockquote

• no-sel

• mz-talking-wrap

• talking-left

• talkimg-below

• talking-img

• talking-box

• talking-right

• talkimg-below

• talking-img

• talking-box

• blockquote

• mz-talking-wrap

• pc-width

• blockquote

• talking-img

• no-image

• mz-talking-wrap

• pc-width

• talking-left

• talkimg-below

• talking-img

• talking-box

• blockquote

• talking-left

• talkimg-below

• talking-right

• talkimg-below

• talking-img

• talking-box

• blockquote

• talking-right

• talkimg-below

• talking-left

• talkimg-upper

• talking-img

• talking-box

• talkbox-lefttop

• blockquote

• talking-left

• talkimg-upper

• blockquote

• talking-box

• talkbox-lefttop

• talking-left

• talking-img

• talking-box

• talkbox-lefttop

• talkbox-inby

• blockquote

• talking-box

• talkbox-lefttop  talkbox-inby

• talking-right

• talkimg-below

• talking-img

• talking-box

• blockquote

• talking-right

• blockquote

• mz-talking-wrap

• talking-left

• talking-img

• talking-box

• talkbox-inby

• blockquote

• talking-box

• talkbox-lefttop  talkbox-inby

• talking-right

• talkimg-below

• talking-img

• talking-box

• talkbox-round

• talkbox-dark

• blockquote

• talking-box

• talkbox-round  talkbox-dark

• talking-right

• talkimg-below

• talking-img

• no-image

• talking-box

• talkbox-doubleline

• talkbox-righttop

• blockquote

• talking-box

• talkbox-doubleline

• talking-left

• talkimg-below

• talking-img

• talking-box

• talkbox-bubles

• blockquote

• talking-box

• talkbox-bubles

• talking-left

• talkimg-below

• talking-img

• talking-box

• talkbox-round

• talkbox-bubles

• blockquote

• talking-box

• talkbox-round

• talkbox-bubles

• mz-blockquote

• no-sel

• mz-tabcell

• mz-tabcell

• mz-tab

• mz-blockquote

• no-sel

• mz-tab

• mz-tab-line

• mz-blockquote

• mz-tab-line

• mz-blockquote

• no-sel

• mz-tt

• no-sel

• blockquote

• mz-tt

• mz-tt222

• no-sel

• blockquote

• mz-tt222

• mz-tt333

• no-sel

• blockquote

• mz-tt333

• mz-tt333

• meta-title

• no-sel

• blockquote

• meta-title

• meta-title

• mz-tt

• tt-box

• no-sel

• blockquote

• mz-tt

• tt-box

• no-sel

• blockquote

• no-sel

• blockquote

• mz-tt

• mz-column  

• mz-column

• mz-column

• column-333

• mz-column  column-nip

• mz-column

• column-nip

• column-333

• mob-hid

• mob-hid

• mz-column222-wrap  column-wrap-111

• column222-box

• mz-column222-cell

• column222-left

• column222-left-blank

• mz-column222-cell

• column222-mid

• mz-column222-cell

• column222-mid

• column222-mid-line

• mz-column222-cell

• column222-right

• column222-right-blank

• blockquote

• no-sel

• blockquote

• no-sel

• mz-column222-wrap  column-wrap-{$name}

• column222-box

• mz-column222-cell

• column222-left

• column222-left-blank

• mz-column222-cell

• column222-mid

• mz-column222-cell

• column222-mid

• column222-mid-line

• mz-column222-cell

• column222-right

• column222-right-blank

• blockquote

• no-sel

Page Source

[[iftags +theme]]
[[collapsible show="+ CODE" hide="- HIDE"]]
[!---------------1111111111111111111111111111111111111-------------------------------]
[[code type="CSS"]]
/*=====================================
Magazine Theme - sigma9
[2021 Wikidot Theme]
by Etinjat

Inspired by EstrellaYoshte, hoah2333 and MalyceGraves
Magazine logo is created by Kcorena 
Bird icon from https://pixabay.com/zh/vectors/eagle-bird-animal-perching-162199/
=====================================*/

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
/*=====================================
根属性 ROOT
=====================================*/

:root{

/* ----------- 页面 || PAGE ----------- */

--content-width:inherit;
--main-width:inherit;
    
    --main-top:var(--TB_height_half);
    --main-top_PAD:min(var(--PGtt_size),1.3rem); 
    --main-top_MOB:min(var(--PGtt_size),1rem);   



/* ----------- 字体 || FONT ----------- */

    --page-font: 'Roboto Slab', 'Markazi Text', 'Nanum Gothic', verdana, arial, helvetica, sans-serif;
    --handwriting-font:'Yesteryear', 'La Belle Aurore', "Monotype Corsiva", "Bradley Hand ITC", sans-serif;
    --page-tt-font:'DM Serif Display', 'Roboto Slab', 'BauhausLTDemi', sans-serif;   
    --header-tt-font:'IM Fell English', 'DM Serif Display','Roboto Slab', 'BauhausLTDemi', sans-serif;   
    --mono-font:'Courier New', 'Nanum Gothic Coding', 'Ubuntu Mono', "Trebuchet MS", Courier, monospace;
    --teletype-font:'Special Elite', 'IM Fell English', Courier, monospace;


--header-tt-font-weight:500;
--HD-h2_font-weight:600;

--mob-tt-font:var(--page-tt-font);

/* 用户栏文本 */
--font_printuser: var(--handwriting-font);
--font_my-account: var(--teletype-font);
   
/* 编辑区域 */    
--EDIT-box_font:  "Trebuchet MS", var(--page-font);
--EDIT-btn_font: 'Nanum Gothic', 'Special Elite', "Monotype Corsiva", "Bradley Hand ITC",var(--page-font);
--EDIT-help_font: fontawesome, 'Nanum Gothic', "Trebuchet MS", var(--mono-font);

/* ----------- 颜色 || BASE COLOR----------- */

--dark-accent:rgb(110, 100, 105);
--page-bg:var(--color-grey);
--accentColor:#542429;

--color-red:#990314;
--color-darkred:#6f1212;
--color-grey:#ecebf0;
--color-grey-pale:#eee;
--color-grey-dark:#e0e1e1;
--color-grey-darker:#d2d2d2;
--color-grey-darkest:#c4c4c4;
--swatch-primary-darker:egb(64,96,22);

--color-kraft:rgb(185,137,102);
--color-navy:rgb(20,21,39);
--color-blue:#2c477d;
--color-paleblue:#4e5166;
--color-gold:#c39c52;
--color-brown:#ead1b3;

--color-light:#e8e8e8;
--color-darkest:#000;
--color-darker:#333;
--color-dark:#555;  

/* ------------ 版头 ------------------  */

   /* 版头 和 标题 */
 --HD_bg:var(--color-kraft);
 --TB_bg:var(--color-navy);
 --TB_txt:var(--color-gold);
 --HD_mob_HOV:var(--color-red);
 --HDtt_color:var(--accentColor);
 --HD-h2_color:var(--color-darkest);     

 --HD_height:var(--HD_height_PC);
 --HD_height_PC:max(8rem, var(--HDtt_height));  
 --HD_height_PAD:var(--HD_height_PC);  
 --HD_height_MOB:var(--HD_height_PC);  
 --HD_blank:var(--SB_width-total,16rem);    
  
  
    /* 页眉标题 */
--header-title:"FOUNDATION";
--header-subtitle:"Secure Contain Protect";
--mob-title:"S C P";
--mob-subtitle:"FOUNDATION";
--pad-title:var(--header-title);
--pad-subtitle:var(--header-subtitle);

    --HDtt_top:2rem;
    --HDtt_size:4rem;
    --HDtt_size_PAD:3rem;
    --HDtt_size_MOB:var(--HDtt_size_PAD);
    --HD-h2_size:1.5rem;
    --HD-h2_size_PAD:1.25rem;
    --HD-h2_size_MOB:var(--HD-h2_size_PAD);
    --HDtt_gap:0.5rem;
    --HDtt_gap_MOB:0.25rem;
    --HDtt_height:calc(var(--HDtt_size) + var(--HDtt_gap) + var(--HD-h2_size) + var(--TB_height));
    --HD-h1_top:inherit;
    --HD-h2_top:-0.25em;
    --HD-h1_top_PAD:1rem;
    --HD-h1_top_MOB:var(--HD-h1_top_PAD);
    
  /* 用户栏和搜索栏 */  
     --SEARCH_line:var(--accentColor);
     --SEARCH_bg:transparent;
     --SEARCH_bg_HOV:var(--SEARCH_line);
     --SEARCH_txt:var(--SEARCH_line);
     --SEARCH_txt_HOV:var(--HD_bg);
    --USER_line:var(--HDtt_color);
    --USER_unline:var(--HD-h2_color);
    --USER-list_txt:var(--HDtt_color);
    --USER-list_txt_HOV:var(--color-gold);
    --HD-btn_line_HOV:var(--HD_mob_HOV);
    --HD-btn_bg_HOV:var(--HDtt_color);
    --HD-btn_line_HOV:var(--SEARCH_txt_HOV);
    
 --STATUS_maxwidth:var(--HD_blank); 
 --STATUS_top:1rem;
 --STATUS_padding:0.5rem; 
 --STATUS-btn_padding:0.5rem;
 --STATUS_grid: 1.5rem;
 --STATUS_grid-gap: 0.25rem;
 --STATUS-btn_grid: 2rem;
 --STATUS-btn_btn: 1.2rem;    
 --STATUS-btn_size: 1rem;
 --USER_font-size:var(--STATUS_grid);
 --unlogin-font-size: 1.25rem;
 --STATUS_row-11:var(--STATUS_grid);
 --STATUS_row-22:var(--STATUS_grid);
 --STATUS_column-11:0;
 --STATUS_column-22:var(--STATUS-btn_grid);
 --STATUS_column-33:minmax(5rem,auto);   
    
  --SEARCH_top:calc(var(--STATUS_top) + var(--STATUS_padding) * 3 + var(--USER_font-size) * 2 );  
   --HD-menu_minwidth:10rem;
   --HD-menu_maxwidth:var(--HD_blank);
   --HD-menu_height:var(--STATUS_grid);
    
/* 顶栏 */    
   --TB_height:1.8rem;
   --TB_height_half:calc(var(--TB_height) / 2 + var(--HDtt_gap) / 2);
   --TB_font-size:90%;

/* -------------------------------- 标志 ---------------------------------------- */
    --HD_cover:var(--icon-noise);
    --LOGO_sidebar-opacity:1;
    --LOGO_size:7rem;
    --LOGO_top:0;
    --LOGO_opacity:0.2;
    --LOGO_position:50.2% 0%;
    --LOGO_top_PAD:0.45rem;
    --LOGO_size_PAD:6.5rem;
    --LOGO_position_PAD:50.1% 0%;
    --LOGO_top_MOB:var(--LOGO_top_PAD);
    --LOGO_size_MOB:var(--LOGO_size_PAD);
    --LOGO_position_MOB:var(--LOGO_position_PAD);
   --LOGO_image:none;
    --LOGO_image_PAD:var(--LOGO_image);
   --LOGO_image_MOB:var(--LOGO_image_PAD);
    
    
   --LOGO_sidebar:var(--icon-magazine);
   --LOGO_sidebar_MOB:var(--LOGO_sidebar);
    

/* 图标 || ICON */

--icon-scp:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_SCP.svg);
--icon-magazine:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg);
--icon-noise:url(https://scp-wiki.wikidot.com/local--files/theme:magazine/IMG_noise.png);


--mzlog-img:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/ICON_eagle.svg');

 /* ----------------  侧边栏 || SIDE BAR ---------------------- */
   --SB_content:'Documents';   
   --barColour: var(--color-grey);
   --SB-hdtxt_color:#600;
    
   --SB-hdtxt_size:0.95rem;
    --SB-link_size:0.85rem;
    --SB-main_size:1.2rem;
    
--SB-line11: solid 0.18em var(--SB-hdtxt_cl);
--SB-line22: solid min(0.12em, 0.15rem) var(--SB-line_cl);
 
    
    
  /* 左右空白 + 侧边栏 = 整个侧边栏尺寸 = 页面右侧空白  */
    --SB_width:14rem;
    --SB-blank_right:1rem;
    --SB-blank_left:2rem;
    --SB-blank_top:6rem;
    --content-width:54rem;   
    --SB_width-total:calc(var(--SB_width) + var(--SB-blank_left) + var(--SB-blank_right));  

    /* 背景颜色 */
     --SB-bg_PC:transparent;
     --SB-bg_MOB:transparent;
     --SB-cover_MOB:transparent ; /* var(--icon-noise);*/

    /* 项目颜色 || ITEM COLOR */
    --SB-btn_border_cl:var(--color-darker);
    --SB-btn_txt:var(--color-darker);
    --SB-btn_bg:var(--color-navy);

    --SB-link_txt:var(--color-navy);
    --SB-link_bg:transparent;
    --SB-link_txt_HOV:var(--color-light);
    --SB-link_bg_HOV:var(--accentColor);

/* 栏线颜色 || ITEM LINE */
    --SB-hdtxt_cl:var(--accentColor);
    --SB-line_cl:var(--SB-hdtxt_cl);
    --SB-content_color:var(--SB-hdtxt_cl);
    --SB-hdtxt_cl_MOD:var(--SB-hdtxt_cl);
   --color-hr-sidebar:var(--color-navy);
   --SB-fold_color:var(--color-red);
    
    /* 栏线 */
    --SB-hdtxt_left: 0.4em;
    --SB-line11_size: min(0.2em, 2.5rem);
    --SB-line22_size: min(0.12em, 1.5rem);   
    --SB-line22_top:var(--SB-line11_size);
    --SB-line22_left: var(--SB-hdtxt_left);
    --SB-line22_right: max(7em, 65%) ;
    --SB-line_height: calc((var(--SB-line11_size) + var(--SB-line22_size)) / 2 + 0.5px );  

    --SB-line_clip: polygon(0 0, 100% 0, 100% var(--SB-line22_top), var(--SB-line22_right) var(--SB-line22_top), var(--SB-line22_right) 100%,  var(--SB-line22_left)  100%, var(--SB-line22_left)  var(--SB-line22_top), 0% var(--SB-line22_top));

/* 栏头 */
    --SB-topbox_size:8rem;
    --SB-topbox_top222:0rem;   
    --SB-phrase_size:2rem;
    --SB-phrase_top:calc(var(--SB-topbox_size) + 0.5rem);

     /* 手机按钮 */
    --SB_btntxt: "\f0c9";
    --SB-btn_square:1.5rem;
    --SB-btn_left:1rem;
    --SB-btn_top:1rem;
    --SB-btntxt_size:1rem;
    --SB-btntxt_size_HOV:var(--SB-btntxt_size);
    --SB-btntxt_cl:var(--color-navy);
    --SB-btn_bgcl:var(--color-navy);
    --SB-btn_border_cl: var(--color-navy);   
    --SB-btntxt_bg_HOV:var(--accentColor);
    --SB-btntxt_cl_HOV:var(--TB_txt); 
    --SB-btn_bgcl:var(--color-grey-dark); 


/* ------------------- 页面标题 || PAGE TITLE ------------------- */
  --PGtt_txt-color:var(--color-darkest);
    --PGtt_size:2.5rem;
    --PGtt_size_PAD:2rem;    
    --PGtt_size_MOB:1.5rem;    
    
     /*.....底部盒子.....*/
    --PGtt_underbox-gap:0rem;  
    --PGtt_underbox-height:0.5em;

     /*.....底部装饰线.....*/
    --PGtt-line_color:var(--color-darker);
    --PGtt-linebox_space: max(var(--PGtt-line01_height),var(--PGtt-line02_height) );
    --PGtt-linebox_gap: 0.07em;
    --PGtt-line_ornleft:calc(50% - var(--PGtt-orn_width) / 2);
    --PGtt-line_ornright:calc(50% + var(--PGtt-orn_width) / 2);
   
    --PGtt-line01_height: 0.1em;
    --PGtt-line02_height: 0.06em;
    --PGtt-line02clip_height: var(--PGtt-line01_height);
    --PGtt-line02clip_right: calc(100% - var(--PGtt-line02clip_left));
    --PGtt-line02clip_left: min(10%, var(--PGtt-orn_size) * 10 );

  --PGtt-lines-img: linear-gradient(90deg, var(--PGtt-line_color) , var(--PGtt-line_color));
  --PGtt-line02_clip:polygon(100% 0, 0 0, 0 var(--PGtt-line02clip_height), var(--PGtt-line02clip_left) var(--PGtt-line02clip_height), var(--PGtt-line02clip_left) 100%, var(--PGtt-line_ornleft) 100%, var(--PGtt-line_ornleft) 0, var(--PGtt-line_ornright) 0, var(--PGtt-line_ornright) 100%, var(--PGtt-line02clip_right) 100%, var(--PGtt-line02clip_right) var(--PGtt-line02clip_height), 100% var(--PGtt-line02clip_height));
 

    
     /*.....底部图案.....*/
    --PGtt-orn_content:"\f005";
    --PGtt-orn_txt-color:var(--accentColor);   
    --PGtt-orn_size:0.8em;
    --PGtt-orn_width:calc(var(--PGtt-orn_size) * 1.5);    

    
    
/* ------------------- 评分栏 || RATE BOX------------------- */

  --RATE_text:'Rating';
    --RATE_text_HOV:var(--RATE_text);   
    /* 颜色 */
    --RATE_font:var(--page-font);
    --RATE_bg:var(--page-bg);
    --RATE-num_bg:var(--RATE-num_border);
    --RATE-num_num:var(--color-light);
    --RATE-num_txt:var(--color-darkest);
    --RATE-num_border:var(--color-darker);
 
    --RATE-info_btn:var(--color-dark);
    --RATE-info_btn_HOV:var(--color-darker);
    --RATE-info_btn_HOV-txt:var(--color-light);
    --RATE-info_border:var(--color-grey-darkest);
 
    --RATE-mobox_border:var(--color-navy);
    --RATE-mobox_bg:var(--color-kraft);
    --RATE-mobox_tt:var(--color-gold);
    --RATE-mobox_txt:var(--color-darkest); 
    --RATE-mobox_btn: var(--accentColor) ; 
 
 /* .....尺寸..... */
    --RATE-num_size:1.2rem;
    --RATE-txt_size:0.8rem;
    --RATE-num_lh:1.2; /* 数字行间距 */
    --RATE-num_padding:0.4em;  
    --RATE_padding-left:0em;
    --RATE-num_height:calc(var(--RATE-num_size) + var(--RATE-num_padding) * 2);
    
    /*按钮*/
    --RATE-btn_mgleft:0.5rem;
    --RATE-btn_mgleft_half:0.25rem;    
    --RATE-btn_width: 1.5em;
    --flag-delta-size:0.5em;
    --RATE-btn_height:2em; 
    --RATE-btn_size: 1rem;

    --RATE-box_heigh:calc(var(--RATE_padding-top) + var(--RATE-line_width) + var(--RATE-num_size) + var(--RATE-line_gap) + var(--RATE-box_margin-bottom) - 1px);
    --RATE-box_margin-bottom:0.25rem;
    
      /* 旗子 */
   --RATE-btn_bgcolor:var(--RATE_bg);  
   --RATE-btn_color:var(--accentColor);  
   --RATE_bg_HOV:var(--color-grey-darkest);
   --RATE_txt_HOV:var(--color-red);
   --RATE_boder-flag:var(--color-darker);
   --RATE-flag_gap:var(--page-bg);  
    --RATE_padding-top:0rem;
    --RATE-flag_top: calc(var(--RATE_padding-top) + var(--RATE-btn_height) );
    --RATE-delta_height:calc(var(--RATE-btn_width) / 4);
    --flag-delta-count: calc(100% - var(--flag-delta-size));
    
    /* 线条 */ 
    --RATE-line_width:0.1rem; 
    --RATE-line_bottom: var(--RATE-line_width);
    --RATE-line_gap: var(--RATE-line_width);
    --RATE-line_gapcount:calc(var(--RATE-line_width) * 2 + var(--RATE-line_gap));
  
   /* ---------  引用块  --------- */

    --QUOTE_bg:rgba(236,235,220, 0.6);
    --QUOTE_bg222:rgba(220,220,230, 0.2);
    --QUOTE_border:rgba(33,33,33,0.4);
    --QUOTE_border-left:rgba(33,33,33,0.7);

  /* --------- 分割线 --------- */

      --color-hr:rgba(128,128,128,0.8);

  /* --------- 目录 / TOC MENU--------- */

    --TOC-bd_cl:var(--color-navy);
    --TOC-tt_cl:var(--color-navy);
    --TOC-tt_bg:var(--page-bg);

       --TOC-txt_size:1rem;
       --TOC-line_height:1.6rem;

       --TOC_text-tt:'MENU';
       --TOC_text-fold:'Fold';
       --TOC_text-unfold:'Unfold';

  /* --------- 特殊 div 样式 --------- */

    /* 泛黄块 */
    --mz-paper-bg:rgba(236,235,220, 0.6);
    --mz-paper-bg222:#e9e9e2;

    /* 便利贴 */
    --tip-bdcl:155,155,155;
    --tip-color:var(--color-grey-darker);
    --tip-deg:-45deg;
    --tip-dogear-size:1.5em;
    --tip-dogearoll-size:calc( var(--tip-dogear-size) * 1.4); 
    --tip-maxwidth_PC:calc(var(--content-width, 56rem) * 0.5);
    --tip-dogearoll-margin: 0rem -0.9rem 0 0;

   /* --------- 维基图片框 || IMAGE BOX--------- */

    --mz-img-bg:var(--page-bg);
    --shadow-gap:var(--mz-img-bg);
    --shadow-line:var(--color-navy);

    --box-line:drop-shadow(0px -1px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
        drop-shadow(0px 0px 0.1px var(--shadow-gap)) drop-shadow(0px 0px 0.1px var(--shadow-line))
        drop-shadow(0px 0px 0.1px var(--shadow-gap)) drop-shadow(0px 0px 0.1px var(--shadow-gap))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line))
        drop-shadow(0px 0px 0.5px var(--shadow-line)) drop-shadow(0px 0px 0px var(--shadow-line));

 /* ----------- TAB 样式 ----------- */

    --tabNAV-txt:var(--color-navy);
    --tabNAV-txt_HOV:var(--color-light);
    --tabMain-txt:var(--color-darker);

    --tabNAV-bg_HOV:var(--accentColor);
    --tabNAV-bg_SEL:var(--tabNAV-bg_HOV);

    --tabNAV-txt_SEL:var(--tabNAV-txt_HOV);
    --tabNAV-bg_ACT:var(--tabNAV-bg_HOV);
    --tabNAV-txt_ACT:var(--tabNAV-txt_HOV);

    --tabNAV-border:var(--color-darker);   
   --tabMain-border:var(--accentColor);
   --tabNAV-bg:var(--color-grey-darker);
   --tabMain-bg:var(--color-grey-dark);
    --tab-shadow:var(--color-grey-darkest);

    /* 深线样式 */
    --Line-tabNAV-txt:var(--color-navy);
    --Line-tabNAV-txt_HOV:var(--color-light);

   --Line-tabNAV-txt_SEL:var(--Line-tabNAV-txt_HOV);
   --Line-tabNAV-txt_ACT:var(--Line-tabNAV-txt_HOV);

   --Line-tab-base:var(--color-navy);  
    --Line-tabNAV-bg_HOV:var(--Line-tab-base);
    --Line-tabNAV-bg_SEL:var(--Line-tabNAV-bg_HOV);
    --Line-tabNAV-bg_ACT:var(--Line-tabNAV-bg_HOV);

    --Line-tabNAV-border:var(--Line-tab-base);
    --Line-tabMain-border:var(--Line-tab-base);

   --Line-tabNAV-bg:var(--page-bg);
   --Line-tabMain-bg:var(--Line-tabNAV-bg);
   --Line-tab-shadow:transparent;
   --Line-tabMain-txt:var(--Line-tab-base);

   --Line-tabBD-weight:3px;

    /* ------------- 文本标题框 / TITLE BOX-------------  */
    --ttbox_padding:0.5rem;
    --ttbox_margin:0.5rem;

    --ttbox_h1BDR-color:var(--color-navy);
    --ttbox_boxBDR-color:var(--ttbox_h1BDR-color);
    --ttbox_bevel-color:var(--ttbox_h1BDR-color);

    --ttbox_h1-color:var(--color-navy);

    --ttbox_h1-bg:var(--page-bg);
    --ttbox_box-bg:var(--page-bg);

    --ttbox_box-size:0.2rem;
    --ttbox_border-size:0.25rem;

    --ttbox_h1-size:1.2rem;
    --ttbox_h1-top:calc(0rem - var(--ttbox_h1-size) * 2 );
    --ttbox_h1-left:calc(0rem - var(--ttbox_padding) * 4);
    --mztt-h1pd-horiz:1rem;
    
     --ttbox_bevel-size:2rem;
     --ttbox_bevel-left:calc(0rem - var(--mztt-h1pd-horiz) + var(--ttbox_padding));
     --ttbox_bevel-top:calc(0rem - var(--ttbox_padding) + var(--ttbox_h1-size));
     --ttbox_bevel-bg:linear-gradient(-135deg, var(--ttbox_bevel-color), var(--ttbox_bevel-color) 50%, transparent 50%, transparent 100%);

 /*-------------- 操作区域 ----------------*/ 
    
  /*......... 历史区 .........*/
    --HISTORY-btn_size：1rem;
    --HISTORY-form_columns:repeat(8, auto);
    --HISTORY-form_td_width:100%;
    --HISTORY-form_td_margin:0.2rem 0;
    --HISTORY-perpage_width: 8.5rem;
       
  /*......... 编辑区 .........*/
   --EDIT-table_width:95%;

    --EDIT-ui_size-11: 1rem;
    --EDIT-ui_size-22: 0.8em;
    --EDIT-ui_size-33: 0.8em;
    --EDIT-ui_size-sub: 0.7em;
    --EDIT-ui_size-99:1em;
    --EDIT-ui_height: 2em;
    --EDIT-ui_weight: var(--EDIT-ui_height);
    --EDIT-ui_mono-font: 'Nanum Gothic Coding';
    --EDIT-ui_color:var(--color-navy);
    --EDIT-ui_color_HOV:var(--EDIT-ui_color);
    --EDIT-ui_bg:transparent;
    --EDIT-ui_bg_HOV:var(--color-grey-dark);
    --EDIT-ui-sub_HOV:var(--color-grey-darkest);

    --EDIT-ui-btn_margin:0 0.5em 0 0;
    --EDIT-ui-panel_margin:0 0 0.5em 0;

    --EDIT-border_color:var(--color-dark);
    --EDIT-border_color_Foc:var(--color-dark);
    
    --EDIT-box_bg:var( --color-grey);
    --EDIT-box_bg_Foc:var( --color-grey-pale);
    
    --EDIT-ui_outline:1.5px solid var(--EDIT-border_color);
    --EDIT-ui_font: 'Roboto Slab', 'DM Serif Display',"Trebuchet MS","FontAwesome";    
    
    
    /* ............... 保存盒子 .......- */
--lock-info111:"You have an exclusive 15-minute lock that \A will stop others editing this page while you are working. \A The lock expires in ";
--lock-info222:"\00A0 seconds of inactivity.";
--lock-info333:"Saving Page...... If this tip has been displaying for a long time, \A you may need to copy your contents from \A the Edit Form and refresh the page.";

 --lock-info111_MOB: "You can exclusively edit this page in ";
--lock-info222_MOB: "s.";
--lock-info333_MOB: "Saving Page. Backup your work if no response.";   

 /*-------------- 页脚 ----------------*/   
--FOOT_size: 0.8rem;
--LICENSE_bg: var(--color-grey-darker);
--LICENSE_cl: var(--color-darker);   
--FOOT-line_cl: var(--color-grey-darkest);
    
    
/* ----------- 讨论区帖子 / FORUM POST ----------- */

    --POST_hdbg:#e5e5e5;
    --POST_short:#DBDBDB;
    --POST_BDcolor:#333;
    --POST_BDcolor-222:#929292;
    
    
/* ----------- 笔记本组件厚度 ----------- */
--cl-tab-bar:var(--color-navy);
--cl-tab-bar222:#fff;
}


/*------------------------------------------------
PAD 根属性
------------------------------------------------*/

@media (max-width:1000px){
    :root{

  --LOGO_image: var(--LOGO_image-mob);

 /* ----------------  侧边栏  ---------------------- */
    --SB-blank_right:0rem;
    --SB-blank_left:0rem;
  }
}

/*------------------------------------------------
MOB 根属性
------------------------------------------------*/

@media (max-width:500px){
  :root{
 /*-------------- 操作区域 ----------------*/   
      --EDIT-table_width:95%;
   --EDIT-ui_size-11:0.8rem;
    --EDIT-ui-btn_margin: 0 0.15em 0 0;
    --EDIT-box_txt-size:1rem;   
--EDIT-ui_outline: 0.5px solid var(--EDIT-border_color);
 
--EDIT-bottomtable_width:95%;      
--EDIT-bottomtable_columns:100%;             
--EDIT-bottomtable_tip-order:-1;  
--EDIT-box-btn_padding:0 0.2em;
 --EDIT-help_size:0.9em;     
 --EDIT-help_display: inline-grid;   
--EDIT-help_right:0;      
 --EDIT-ui-panel_margin: -0.5rem 0 0.5rem 0rem;
      
        --lock-info111: var(--lock-info111_MOB); 
        --lock-info222: var(--lock-info222_MOB);
        --lock-info333: var(--lock-info333_MOB); 
       
   /*............ 历史区 .......*/
    --HISTORY-btn_size：1rem;
    --HISTORY-form_columns:repeat(4, auto);
--HISTORY-update_size: 0.8rem;
    --HISTORY-perpage_width: 5rem; 
      
      
 /*-------------- 页脚 ----------------*/   
      
      --FOOT-wiki_display:none;
      --LICENSE-link_size:1em;
      --LICENSE_size:0.75em;
  }
}


/*
=====================================
页面全局 / GLOBLE
=====================================
*/

body {
    font-family:var(--page-font), sans-serif;
    background-color: var(--page-bg);
    background-image:none;
}


#page-content p{
/*    font-size: 1.1em; */
}

tt {
    font-family:var(--mono-font);
    font-size: 98%;
}

::selection {
     color: white;
    background:var(--color-blue);
}

::-moz-selection {
     color: white;
    background:var(--color-blue);
}

a {
    color: var(--color-red);
}

a:visited {
    color:var(--color-darkred);
}

a.newpage {
    color: var(--color-kraft);
}

#page-content a {
    border: none;
}

#page-content .printuser img.small {
    padding-right: 0.25rem;
}

/* ----------------- 字体及字重 || FONT -------------------- */

#action-area h1,
div#extra-div-1:before, div#extra-div-1:after, 
#page-title, .meta-title, #page-content :is(h1, h2, h3, h4, h5,h6) {
        font-weight:600;
        font-family:var(--page-tt-font), serif;
}

#header :is(h1,h1 a,h1 a::before, h2,  h2::before) {
    font-family:var(--header-tt-font), serif;
    font-weight:var(--header-tt-font-weight, 600);
}

#header h2::before {
    font-weight:var(--HD-h2_font-weight,600);
}

@media (max-width: 600px) {
div#extra-div-1:before, div#extra-div-1:after, 
#page-title, .meta-title, #page-content :is(h1, h2, h3, h4, h5,h6) {
       font-family:var(--mob-tt-font);
       font-weight: var(--mob-hdtt-h1-font-weight,600);
 letter-spacing: 1.5px;
  }
 #container {
    /*  overflow: hidden; */
  }


}


/*
=====================================
版头
=====================================
*/


#container-wrap-wrap #container-wrap {
    background-color: none;
    background-image: none;
}

div#header {   
    
    background-image: none;
    width: 100%;
   max-width: 100%;
    height: var(--HD_height_PC);
    background-color:var(--HD_bg);
    background-image: var(--HD_cover);
    background-size:18rem;
    background-position: 0% 0%;
    background-repeat: repeat;

  display: grid;
  justify-content: space-between;
  grid-template-columns: var(--HD_leftright,1.2rem) minmax(300px, 100%) min-content var(--HD_leftright,1.2rem);
  grid-template-rows:0  var(--HDtt_top) minmax(var(--HDtt_size), 100%) minmax(var(--HD-h2_size), 100%) auto;
      grid-template-areas:
    '.  upper  upper    . ' 
    '.      leftop rightop .      '
    'hdleft bigtt  bigtt   hdright' 
    'hdleft subtt  subtt   hdright' 
    'topbar topbar topbar  topbar ';

}

#header h1, #header h2, 
#top-bar,#login-status, #search-top-box{
    position: initial;
    display: grid;
    top: 0;
    left:0;
    right:0;
    margin: 0;
    padding: 0;
    height: auto;
    align-content: center;
}

#header h1 a {
  padding:0;
}

#header h1{
    order: 1;
    grid-area: bigtt;
    display: inline-grid;    
    height: var(--HDtt_size);
    line-height: 0
}

#header h2{
    order: 2;
    grid-area: subtt;
}

/* ------------- ----
LOGO 
------------------ */

#header-extra-div-1, #header-extra-div-2, #header-extra-div-3{
     grid-area: upper;
}

#header-extra-div-1{
height: var(--HD_height);
width: 100%;
    display: inline-flex;
    justify-content: center;
   top:var(--LOGO_top);
    position: relative;
    overflow: hidden;
}

#header-extra-div-1:before{
    content: ' ';
    display: inline-flex;
    align-self: center;
    position: relative;
    height: var(--LOGO_size);
width: 100%;
background-size: contain;
background-position: var(--LOGO_position);
background-repeat: no-repeat;
background-image: var(--LOGO_image);
opacity: var(--LOGO_opacity);   
}

#header-extra-div-2{
    order:0
}
#header-extra-div-3{
    order:0
}

/* ---------------- 
版头标题
--------------------- */

#header h1, #header h2 {
    margin-left: 0;
    float: none;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}

#header h1 span, #header h2 span {
    font-size: 0;
    display: none;
}

#header h1 a::before, #header h2::before {
    text-shadow: none;
}

div#header h1 a{
    top: var(--HD-h1_top); 
    position: relative;
    letter-spacing: 0.1rem;
    max-width: max-content;
    margin: 0 auto;
}

div#header h1 a:before{
    font-size:var(--HDtt_size);
    content: var(--header-title);
    color: var(--HDtt_color);
}

#header h2::before {
   content: var(--header-subtitle);
   font-size:var(--HD-h2_size);
   margin-top:var(--HD-h2_top);
   color: var(--HD-h2_color);
}

/* ------------- ----
用户栏 
------------------ */

#login-status{
    grid-area: var(--area-status,rightop);
    margin-top: var(--STATUS_top);
    align-items: center;
    align-self: start;
    grid-gap: 0.5rem 0rem;
    grid-template-columns:var(--STATUS_column-11) var(--STATUS_column-22) var(--STATUS_column-33)  var(--STATUS_column-44,0);
    grid-template-rows:  var(--STATUS_row-11) var(--STATUS_row-22) var(--STATUS_row-33, auto);
    grid-template-areas:
        'left botton   Account  right'
        'left messages username right';
    width: max-content;
    word-break:  keep-all;
    color: transparent;
    font-size: 0;
    max-width: var(--HD-menu_maxwidth);
    min-width: var(--HD-menu_minwidth);
    display: inline-grid;
    height: var(--STATUS_height);
    justify-self: var(--justify-status);
    position: relative;
    left:var(--STATUS_left, 0);
}

/*------- 账户与用户名  ----------*/

#login-status .printuser, #login-status #my-account , #account-topbutton{
     font-family: var(--header-tt-font);
      color: var(--USER_line);
      font-size: var(--USER_font-size);
    margin-left: var(--STATUS_grid-gap);
}

#login-status #my-account{
    grid-area: Account;
    text-decoration: none;
    order:0;
    font-family: var(--font_my-account);
    pointer-events: none;
    width: auto;
    display: var(--display-status-txt,inline-grid);
    align-self: start;
}

#login-status .printuser{
    font-family: var(--font_printuser);
    grid-area: var(--area-username,username);
    white-space: nowrap;
    overflow: hidden ;
    text-overflow: '.';
    letter-spacing: 0.1rem;
    background-image:linear-gradient(40deg, transparent 0%, transparent 12%, var(--USER_line) 14%, var(--USER_line) 15%, var(--USER_line) 60%, transparent 90%, transparent 100%);
    background-size: 110% 0.15rem;
    background-repeat: no-repeat;
    background-position:-0.25em 70%;   
     width: 90%;
     max-width: min-content;
    cursor: default;
    padding: var(--STATUS_padding); 
    display: var(--display-topbox-notbtn);
    background-blend-mode:  color-burn
}


#login-status:hover .printuser{
    animation:  user-script 1.5s;
}

#login-status:has(:is(#account-topbutton, a[href*="messages"]):hover) .printuser{
    animation:  none;
}

#login-status .printuser:hover{
       color:var(--HD-h2_color) ;
    -webkit-text-stroke: 0.5px var(--HD_mob_HOV);
}

@keyframes user-script{
    0% {width:10%; background-size: 0% 0.15rem;text-overflow: '';}
    80% {width:90%; background-size: 0% 0.15rem;text-overflow: '';}
    100%  {width:90%; background-size: 0% 0.15rem;}
}

#login-status .printuser a{
    width: 100%;
    position: relative;
    display:  inline-block;
    margin-right: -100%;
    height: 100%;
    opacity: 0;
}

#login-status .printuser img.small {
 height:var(--USER_font-size);
}

/*------- 菜单 ----------*/
#account-topbutton{
        grid-area: botton;
    font-size: 0rem;
    border: none;
    margin: 0
}

#account-topbutton:hover:before {
    color: var(--HD_bg);
 background-color:  var(--USER_line);
}

#login-status #account-options{
    font-size:  var(--STATUS-btn_size);
    position: relative;
    background-color: var(--HD_bg);
    border: 2px solid var(--USER_line);
    grid-area: var(--area-account-options,left);
    justify-self:  var(--justify-account-options,end);
    align-self: start;
    overflow:hidden;
}

#account-options:hover, #login-status #account-options[style*="block"]{
    display: inline-grid;
}

#account-options ul {
margin:-0.1rem;   
width:105%;
height:105%;
}

#login-status #account-options a {
    color: var(--USER-list_txt);
    background-color: var(--HD_bg);
    border: 1px solid var(--USER_line);
    text-decoration: none;
}
 
#login-status  #account-options a:hover {
    background-color: var(--USER_line);
    color: var(--USER-list_txt_HOV);
    border: 1px solid var(--USER_unline);
}


/*------------- 按钮 --------------------*/
#login-status:before,
#login-status:after,
#account-topbutton,
#login-status :not(div) + a[href*="messages"]{
    display: inline-grid;
    color:var(--USER_unline);
    font-size: 0rem;
    margin: 0;
    padding: 0;    
    justify-items: left;    
    margin-left: var(--STATUS_padding);
        min-height: var(--HD-menu_height);
}

#account-topbutton:after,
#login-status :not(div) + a[href*="messages"]:after{
    width: var(--STATUS-btn_grid);
    height:var(--STATUS-btn_grid);
    position: absolute;
}

/* 按钮样式 */
#login-status a:is(.login-status-create-account, .login-status-sign-in):before,
#login-status:before,
#login-status:after,
#search-top-box-form:before,
#account-topbutton:before {
    display: inline-grid;
    justify-content: center;
    color: var(--USER_line);
    content: '\f007';
    font-family: FontAwesome;
    font-size: var(--STATUS-btn_size);
    border:  var(--USER_line) solid 2px;
    width: var(--STATUS-btn_btn);
    min-height: var(--STATUS-btn_btn);
    margin-right: var(--STATUS-btn_padding);
    content: '\f007';
    border-radius:40%;
    padding:1px;
    align-content: center;
}

/* 用户名旁的装饰 */
#login-status:before,
#login-status:after{
   content:"\f05a";
    grid-area: messages;
    border:none;
    font-size: var(--STATUS-btn_btn);
    justify-content: end;
    display:none;
}

#login-status:has(:not(div) + a[href*="messages"]):after{
    display:none;
}


#login-status:before{
    grid-area: botton;
}

#login-status:has(.printuser):after{
    display: var(--display-status-txt, inherit);
}


/*------------- 私信 --------------------*/
#login-status :not(div) + a[href*="messages"]{
     grid-area: var(--area-messages,messages);
    display: inline-grid;
     align-self:  start;
    align-content:  center;
        height: 0;
}

#login-status  :not(div) + a[href*="messages"]:before{
    content: '\f0e0 ';
    font-size: var(--STATUS_grid);
    font-family: 'FontAwesome';
    color:var(--USER_line);

    -webkit-animation-name: user-messages;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
    animation-name: user-messages;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    animation-duration: 1s;
}

#login-status  :not(div) + a[href*="messages"]:hover:before{
   color:var(--HD_mob_HOV);
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

#login-status > a > strong {
    text-decoration: none ;
}

@-webkit-keyframes user-messages {
    from { content: '\f0e0 '; }
    to { content: '\f003'; }
}

@keyframes user-messages {
    from { content: '\f0e0 '; }
    to { content: '\f003'; }
}


/* ----------------- 未登录 ------------------- */
#login-status {
    column-gap: var(--STATUS_gridbox-gap,0);
}

#login-status a:is(.login-status-create-account, .login-status-sign-in){
   font-size:var(--unlogin-font-size);
   grid-area: var(--area-create-account, messages);
   font-family: var(--header-tt-font), var(--page-tt-font), serif;
   font-weight:600;
   color: var(--USER_line);
   display:inline-grid;
   white-space:nowrap;
   grid-template-columns: var(--STATUS-btn_grid) auto;
   grid-gap: var(--STATUS_unlogin-gap,var(--STATUS_padding));
   justify-content: start;
   align-self: start;
   text-decoration: none;
}

#login-status a.login-status-sign-in{
   grid-area: var(--area-sign-in,botton);
}

#login-status a:is(.login-status-create-account, .login-status-sign-in):before{
   content:"\f090";
   font-family:fontawesome;
   font-size:var(--STATUS-btn_size);
   width: var(--STATUS-btn_btn);
   height:var(--STATUS-btn_btn);
   border-radius: 5px;
   align-content: center;
   margin-left: var(--STATUS_padding);
   align-self: center;
}

#login-status a.login-status-create-account:before{
  content:"\f234"; 
}

#search-top-box-form:hover:before,
#login-status :is(.login-status-create-account, .login-status-sign-in):hover:before{
      color: var(--SEARCH_txt_HOV);
    background: var(--SEARCH_bg_HOV);
}

#login-status a:is(.login-status-create-account, .login-status-sign-in)::after {
    content: "";
}

/* ------------- ----
搜索栏 
------------------ */

#header  #search-top-box{
    grid-area: var(--area-search, rightop);
    justify-content: var(--justify-search,stretch);
    align-content:   start;
    width: 100%;
    min-width: var(--HD-menu_minwidth);
    margin-top:var(--SEARCH_top);
    position: relative;
    left: var(--HD-menu_left);
    height: var(--STATUS_grid);
}

#search-top-box-form {
   position: relative;
   display: grid;
   width:  initial;
   grid-template-columns: var(--STATUS-btn_grid) auto;
   grid-gap: var(--STATUS_grid-gap); 
}

#search-top-box-form:before {
      content: '\f002 ';
      position: absolute;
      z-index: -1;
      border-radius: 5px;
      align-self: center;
      min-height: var(--STATUS-btn_btn);
      margin-left: var(--STATUS_padding);
}

#search-top-box input.empty,
#search-top-box-input {
    order: 2;
    border: solid 2px var(--SEARCH_line);
    background-color: transparent;
    box-shadow: none;
    color: var(--SEARCH_txt);
   width: 100%;
   margin-left:0.25rem;
        display: var(--display-topbox-notbtn);
    border-radius: 5px;
}

#search-top-box-form #search-top-box-input:hover,
#search-top-box-form  #search-top-box-input:focus {
    border: solid 2px var(--SEARCH_line);
    color: var(--SEARCH_txt_HOV);
    background-color:var(--SEARCH_bg_HOV);
    box-shadow: none;
       outline: none;
}

#search-top-box-form input[type="submit"]:focus,
#search-top-box-form input[type="submit"]:hover {
    color: transparent;
    background: transparent;
    border: none;
    box-shadow: none;
}

#search-top-box-form input[type="submit"] {
    color: var(--SEARCH_txt);
    background: transparent;
    box-shadow: none;
    border: none;
    font-size: 0;
    width: var(--USER_font-size);
    height: var(--STATUS_grid);
   margin-left: var(--STATUS_padding);
}

/*========================== 
顶栏 
==============================*/
#header #top-bar{
    grid-area: topbar; 
    height: var(--TB_height); 
    font-size: var(--TB_font-size); 
    position: absolute; 
    background:var(--TB_bg);
    background-size: cover;
    background-position: 0% 0%;
    max-width: 100%;
    justify-content: center;
    display: inline-grid;
    align-items: center;
     margin-top: var(--HDtt_gap); 
}

#top-bar div.top-bar  > ul > li > ul,
#top-bar  .mobile-top-bar > ul > li > ul {
      border: var(--accentColor)  solid 2px  ;      
}

#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
 border-top:1px solid var(--accentColor);
}

#top-bar li ul li a {
    background: var(--color-kraft);
    border: var(--accentColor)  solid 2px  ;   
}

#top-bar ul li a {
    border-left: solid 1px rgba(264,64,64,.2);
    border-right: solid 1px rgba(264,64,64,.2);
}

#header #top-bar a{
    color:var(--TB_txt);
    text-align:center;
    padding: 0 min(1.2vw,1em);
    letter-spacing: 0.5px;
    font-size:var(--TB-li_size);
}

#top-bar ul li a{
display: unset
}

#top-bar ul li ul a{
display: block
}


#header #top-bar .sfhover a{
    color: var(--accentColor);
   background-color:var(--color-kraft);
}

#header  #top-bar a:hover{
    background: var(--accentColor);
        color: var(--color-gold);
}

/*========================== 
版头窄屏 
==============================*/

@media (max-width: 1100px) {
  div#header{
    --area-status:leftop;
    --area-username:Account;
    --area-account-options:username;
     --area-sign-in:botton;
     --area-create-account:Account;
    --STATUS_top:0.5rem;
   --STATUS_unlogin-gap:var(--STATUS_grid-gap);
    --SEARCH_top:var(--STATUS_top); 
    --STATUS_column-22:max-content;
    --display-status-txt:none;
    --HD-menu_maxwidth:80vw;
    --justify-account-options:start;   
      --justify-search:right;
  }
}

@media (max-width: 767px) {
  div#header{
   --HD_height:var(--HD_height_PAD);  
   --HDtt_size:var(--HDtt_size_PAD);
   --HD-h2_size:var(--HD-h2_size_PAD);
   --header-title:var(--pad-title);
   --header-subtitle:var(--pad-subtitle);
      --HD_leftright:0;
    --HD-h1_top:var(--HD-h1_top_PAD);
    --HD-h2_top:var(--HD-h2_top_PAD);
     --LOGO_image:var(--LOGO_image_PAD);
    --LOGO_top:var(--LOGO_top_PAD);
    --LOGO_size:var(--LOGO_size_PAD);
    --LOGO_position:var(--LOGO_position_PAD);
   --HDtt_gap:var(--HDtt_gap_MOB);
   --display-topbox-notbtn:none;
   --HD-menu_minwidth:var(--STATUS_grid);
    --HD-menu_maxwidth:var(--STATUS_grid);
   --area-status:upper;
   --area-search:upper;
      --STATUS_row-22:auto;
       --STATUS_row-33:0;
  --STATUS_column-11:var(--HD-menu_minwidth);
      --STATUS_column-22:var(--HD-menu_minwidth);
      --STATUS_column-33:var(--HD-menu_minwidth);
      --STATUS_column-44:0;
      --HD-menu_left:-0.5rem;
      --STATUS_gridbox-gap:calc(var(--STATUS_padding)  + var(--HD-menu_left) - var(--HD-menu_left) * 1.5);
      --STATUS_left:calc(0rem - var(--STATUS_gridbox-gap) + var(--HD-menu_left) * 2  - var(--STATUS-btn_size) - var(--STATUS_grid) * 2 );
      --unlogin-font-size:0rem;
    --area-account-options:username ;
    --area-messages:left;
    --area-sign-in:left;
    --area-create-account: botton ;
    --justify-account-options:end;    
    --justify-status:end; 
    --justify-search:end;   
  }
  .mobile-top-bar {
      width: 100%;
      justify-content:center;
      display: inline-flex;
      bottom: unset;
      left: unset;
  }
}

@media (max-width: 480px) {
  div#header{
   --HD_height:var(--HD_height_MOB);  
   --HDtt_size:var(--HDtt_size_MOB);
   --HD-h2_size:var(--HD-h2_size_MOB);
   --header-title:var(--mob-title);
   --header-subtitle:var(--mob-subtitle);
    --HD-h1_top:var(--HD-h1_top_MOB);
    --HD-h2_top:var(--HD-h2_top_MOB);
     --LOGO_image:var(--LOGO_image_MOB);
     --LOGO_top:var(--LOGO_top_MOB);
     --LOGO_size:var(--LOGO_size_MOB);
     --LOGO_position:var(--LOGO_position_MOB);
      --TB-li_size:90%;
  }
}

/*=====================================
标题
=====================================*/

/* ----------- 页面标题  ---------------- */
#page-title,
#page-content .meta-title{
 display: grid;
    width: 100%;
font-size: var(--PGtt_size);
font-weight: bold;
color: var(--PGtt_txt-color);    
background: var(--PGtt_bg);
background-size: var(--PGtt_bg-size,contain);
background-repeat:no-repeat;
 background-position: center;  
position: relative;
border: none;
justify-content: center;
    align-items: end;
    text-align: center;
grid-template-columns: 100%;
 grid-template-rows:  min-content var(--PGtt_underbox-gap) var(--PGtt_underbox-height);
grid-template-areas: 'body' 'gap' 'underbox' ;
    margin-bottom:0.5rem;

}
 
.meta-title:before,
#page-title:before{       
      grid-area:underbox;
    align-self: center;
    content: '  ';
    height:var(--PGtt-linebox_gap);
    background:transparent;
    border:var(--PGtt-linebox_space) solid;     border-image-source:var(--PGtt-lines-img);
    border-image-width: var(--PGtt-line01_height) 0px var(--PGtt-line02_height) 0px;
    border-image-slice: 100% 0 100% 0;
    -webkit-clip-path:var(--PGtt-line02_clip);
    clip-path:var(--PGtt-line02_clip);   
    background: var(--PGtt-linebox_background);
}

.meta-title:after,
#page-title:after{    
  grid-area:underbox;
 justify-self: center;
 align-self: center; 
 text-align:center;   
 content: var(--PGtt-orn_content);
 background:var(--PGtt_ornBG);
 background-size:var(--PGtt_ornBG-size, contain);
 background-repeat: no-repeat;
 background-position: center;
 height:var(--PGtt-orn_height,max-content);
 width:var(--PGtt-orn_width); 
 font-size: var(--PGtt-orn_size);
 color: var(--PGtt-orn_txt-color);
 z-index: 1;
font-family: 'FontAwesome',var(--RATE_font);
  margin-top: var(--PGtt-orn_top);
}

 /* ----------- 面包屑导航------------ */
#breadcrumbs {
  margin: 0.5em 0em;
}

/* ----------- 内文一级标题 || H1 ---------------- */
#action-area h1,
#page-content h1 {
    font-weight: bold;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    display: flex;
}

#page-content h1 {
    font-weight: bold;
    margin-bottom: 0.6rem;
    display: flex;
}

#action-area h1:after, 
#page-content h1::after {
    content: " ";
    flex-grow: 1;
    display: inline-flex;
    height: 0.1rem;
    margin: auto auto auto 0.375rem;
    color: var(--accentColor);
    background-color: var(--dark-accent);
    width:auto;
}


#page-content  blockquote :is(blockquote, .blockquote) h1,
#page-content .blockquote :is(blockquote, .blockquote) h1,
#page-content div:is(.note-nobody, .yui-content, .blockquote, .code, .mz-cover, .mz-textquote, .mz-outbox, .mz-blockquote,mz-board, .clip-wrap, .note-page, .mz-note ) h1{
    display: block;
}

h1 {
    color: var(--color-red);
    font-size: var(--PG-h1_size, 190%);
}
h2 {
    font-size: var(--PG-h2_size, 170%);
}
h3 {
    font-size: var(--PG-h3_size, 150%);
}
h4 {
    font-size: var(--PG-h4_size, 130%);
}
h5 {
    font-size: var(--PG-h5_size, 110%);
}
h6 {
    font-size: var(--PG-h6_size, 100%);
}

h2, h3, h4, h5, h6 {
    color: var(--color-navy);
}
/*
=====================================
标题与侧边栏适应 / adjust PAGE TITLE & SIDEBAR
=====================================
*/

#main-content{
    padding-top: 0;
    margin-top: 0em;
}

#side-bar .side-block:first-child {
    padding-top: 0;
    margin-top: 2em;
}

#content-wrap{
    display: flex;
    justify-content:  flex-start;
    align-items: flex-start;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
       margin-top: var(--main-top);
    width:var(--main-width, 100vw);
    flex-grow: 1;
    width:var(--main-width, 100vw);
    padding: 0 0rem;
}

#main-content{    
    margin: 0 auto;
    width:var(--content-width, 56rem);
    max-width:calc(98% - var(--SB_width-total)); 
    padding-right: var(--main-padding-right);
    padding-left:var(--main-padding-left);
    position: initial;
}

#side-bar,
#content-wrap:after{
    content: '  ';
    max-width: var(--SB_width);
    height:12rem;
    flex-grow: 1;
    flex-shrink: 0;
}

#content-wrap:after{
  flex-grow: 0;
  flex-shrink: 100;
  flex-basis:var(--SB_width-total,inherit);
  width: 0;
  margin-right:var(--SB-blank_left);
  margin-left:var(--SB-blank_right);

}

@media (max-width: 0rem){
      #main-content{    
    padding-left:10rem;
  }
}

@media (max-width: 1100px){
   #content-wrap #side-bar {
  --SB-blank_right: 0rem;
  --SB-blank_left: 0rem;
  }
}

@media (max-width: 767px){
    #content-wrap{
  }

  #main-content{    
   --PGtt_size: var(--PGtt_size_PAD);
   --main-top:  var(--main-top_PAD);   
     flex-grow: 1;  
     max-width:90%;
     margin: 0 auto ;
     padding-left:0;
     padding-right:0rem;
  }

  #content-wrap:before,
  #content-wrap:after{
    display:none;
    position: absolute;
    margin:0;
  }       
}

@media (max-width: 479px) {
 #content-wrap{
        --main-top:var(--main-top_MOB);   
   }
  #main-content{
    --PGtt_size: var(--PGtt_size_MOB);
    --PG-h1_size:150%; 
    --PG-h2_size:135%;  
    --PG-h3_size:120%;  
    --PG-h4_size:110%;  
    --PG-h5_size:100%;  
    --PG-h6_size:90%;  
    }
}

/*
=====================================
侧边栏 / SIDEBAR
=====================================
*/

/* ----------- 侧边栏样式 ---------------- */

#side-bar{
    --link-main-page:1.3rem;
    flex-basis:var(--SB_width,inherit);
    min-width:var(--SB_width,16em);
    position:  relative;
    margin-left:var(--SB-blank_left);
    margin-right:var(--SB-blank_right);
    left: 0;
    height:100%;
    margin-top: var(--SB-topbox_top222);
    padding: 0;
    background-color: var(--SB-bg_PC);
    border: none;
    filter: none;
    box-shadow:none
}

#side-bar:before { 
    position:relative;
    height:auto;
    width: 100%;
    background-size:  auto var(--SB-topbox_size);
    background-image:var(--LOGO_sidebar);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: var(--SB-bg_PC);
    opacity: var(--LOGO_sidebar-opacity);
    left: 0;
    
    color:var(--SB-content_color);   
    content:var(--SB_content);
    font-family: var(--handwriting-font);
    font-size: var(--SB-phrase_size);
    display: inline-grid;
    justify-content: center;
    padding-top: var(--SB-phrase_top);
    margin-top: 1rem;
    white-space: break-spaces;
 }


/* -------------- 内部 ----------- */
#side-bar .side-block.resources,
#side-bar div.side-block:first-child{
margin-top: 0;   
    padding-top: 0;
}

#side-bar div.side-block :not(a)  img{
    display: none ;

}

#side-bar div.side-block:not(.side-links) a  img{
    display: inline-block ;
    /*! padding: 0 0.1em; */;
}

#side-bar div.side-block img[alt*="cc-by-sa"]{
    margin: 0 auto;
}

#side-bar div.side-block a[href*="https:"]:not([href*="wikidot"]){
    background: none ;
    padding: 0;
}

#side-bar .side-block {
    padding: 0rem 0.8em;
    padding-top: 0px;
    border: none;
    border-radius:0px;
    box-shadow: none;
    background: transparent !important;
}


/* ------- 分割线 -------- */
#side-bar hr{
    display: none;
}

#side-bar .side-block hr{
    display: block;
    border-top: 2px  dotted var(--color-hr-sidebar);
}

/* ------- 媒体图标 -------- */

#side-bar .side-block:is(.media, .sns) {
padding-bottom: 0 !important;
}

#side-bar :is(.media, .sns) img{
    transition:transform 0.2s;
    background-color: transparent;
    width: var(--media_width,inherit)
}

 #side-bar :is(.media, .sns) img:hover{
     --media-scale:1.2;
    -ms-transform:scale(var(--media-scale));	
    -moz-transform:scale(var(--media-scale));
    -webkit-transform:scale(var(--media-scale));
    -o-transform:scale(var(--media-scale));
    transform:scale(var(--media-scale));
    transition:transform 0.1s;
     background-color: transparent;
}

#side-bar :is(.media, .sns) a img {
  --media_pd: 0.1em;  /* 7 icons in en */
  padding: 0;
  padding-left:  var( --media_pd);
   padding-right:  var( --media_pd);  
   padding-bottom: 0.5em;
}

#side-bar :is(.media, .sns):has(a:nth-child(2)) a img{
  --media_pd: 0.6em;
}
#side-bar :is(.media, .sns):has(a:nth-child(4)) a img{
  --media_pd: 0.5em;
}
#side-bar :is(.media, .sns):has(a::nth-child(6)) a img{
 --media_pd: 0.3em;
}
#side-bar :is(.media, .sns):has(a:nth-child(7)) a img{
 --media_pd: 0.1em;
}
#side-bar :is(.media, .sns):has(a:nth-child(11)) a img{
  --media_pd: 0.3em;
}
#side-bar :is(.media, .sns):has(a:nth-child(13)) a img{
  --media_pd: 0.1em;
}

@media (max-width: 479px) {
 #content-wrap #side-bar :is(.media, .sns) a img{
      --media_pd: 0.6em;
     --media_width:2em;
  }   
}


/* fixed for JP*/
#side-bar .sns div :is(a, a:hover){ 
    padding-top: 0; padding-bottom: 0; 
    background-color: transparent;
}

/*-----------------侧边栏主页按钮 / MAIN PAGE BTN -----------------------*/

#side-bar .menu-item a {
 font-size: var(--SB-link_size);
    font-family: var(--SB-link_font, "Trebuchet MS");
    letter-spacing:1px;
    
}

#side-bar .menu-item :is(a[href="/"], a[href="/"] ~ a[href="/forum:start"]){
    font-size: var(--SB-main_size);
     font-family: var(--SB-main_font, var(--page-tt-font));
}

#side-bar > *:first-child[class="image"] {
  display: none;
}

#side-bar .menu-item a[href="/"],
#side-bar .menu-item a:visited,
#side-bar .menu-item a{
    color: var(--SB-link_txt);
    padding:0.2em  0.3em;
}

#side-bar .menu-item a[href="/"]:hover,
#side-bar .menu-item a:hover {
    color:var(--SB-link_txt_HOV);
    background-color: var(--SB-link_bg_HOV);
    text-decoration: none;
}

#side-bar .menu-item a[href="/"] {
    top:0rem;
    position: relative;
    align-self: center;
}

#side-bar .heading {
    border: 0;
    padding:10px 0px 8px 0px;
    margin-bottom: 0.4em;
    font-size: var(--SB-hdtxt_size);
    font-weight: bold;
    color:var(--SB-hdtxt_color);
    width: 100%;
    
}
 
#side-bar .heading p{
    padding-left:var(--SB-hdtxt_left);
    padding-bottom: var(--SB-hdtxt_bottom, 0.1em);
}


/* 主页下方的系列 */
.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) {
    width:100%;
    display: inline-grid;
    grid-template-columns: 15% 2% 20% 2%  20% 2% 20% 2% 20%;
     font-size: 0;
    justify-items: center;
}

.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) a{
  --SB-item-line_cl:var(--color-dark);
    text-align: center;
    width: 100%;    
    border-image-source:linear-gradient(transparent 15%, var(--SB-item-line_cl) 15%, var(--SB-item-line_cl) 85%, transparent 85%);
    border-image-width: 0 0.1rem 0 0;
    border-image-slice: 0 100% 0 0;
    padding:  0;
}

.menu-item:has(a[href="/"]) ~ .menu-item:has(a[href*="/scp-series"]) :is(a:hover, a:last-child) {
   --SB-item-line_cl:transparent
}

/*-----------------底部线条  -----------------------*/
#side-bar .heading:after,
#side-bar .collapsible-block-folded:after,
#side-bar .collapsible-block-unfolded-link:after{
    content: ' ';
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
    font-size: var(--SB-hdtxt_size);
 height: 0.15em; 
 border-top: var(--SB-line11_size) solid var(--SB-line_cl);
 border-bottom: var(--SB-line22_size) solid var(--SB-line_cl);   
   -webkit-clip-path: var(--SB-line_clip);
   clip-path: var(--SB-line_clip);   
}


/*-----------------侧边栏折叠 / collapsible  -----------------------*/

 #side-bar .collapsible-block-folded{
    background: none;
}


#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar div.collapsible-block div.collapsible-block-folded > .collapsible-block-link {
    display: block;
      font-size: var(--SB-hdtxt_size);
    margin: 0;
}
/* 线*/
#side-bar .collapsible-block-unfolded-link::after,
#side-bar .collapsible-block-folded:after{
    width: 100%;
}
 

#side-bar .collapsible-block-unfolded-link,
#side-bar .collapsible-block-folded {
    background:none;
      border-bottom: 0.15em solid var(--SB-line);
}
 
/* 提示 */
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar a.collapsible-block-link{
     color:var(--SB-fold_color);
        text-decoration: none;
        margin-left: 0px;
      font-family: 'FontAwesome',var(--RATE_font);
}
 
#side-bar .collapsible-block-folded  a.collapsible-block-link:before{
   content: '\f0fe  \00A0 ';
}
 
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link:before {
    content: '\f146  \00A0';
}
 
#side-bar .collapsible-block-folded  a.collapsible-block-link:hover:before{
   content: '\f13a  \00A0 ';
}
 
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link:hover:before {
    content: '\f139  \00A0';
}
 
/* 折叠内容 */
#side-bar .collapsible-block-unfolded {
  border: none;
}
 
#side-bar .collapsible-block .menu-item:first-child{
    padding-top: 0.5rem;
}
 

/* ----------- 手机样式 || MOB ---------------- */

#content-wrap #side-bar:target {
    display: block;
    left: 0;
    position: fixed;
    background-color:var(--HD_bg);
    background-image: var(--HD_cover);
    background-size:300px;/* 20% */
    background-position: 0% 0%;
    background-repeat: repeat;
    border:none;
    border-right: 4px solid rgba(0,0,0,0.3);
    overflow-y: scroll;
    overflow-x: hidden;
}

@media (max-width: 767px){
 #content-wrap #side-bar {
     --SB-fold_color:var(--color-darkred);
        --SB-hdtxt_size:0.9rem;
    --SB-link_size:0.8rem;
    --SB-main_size:1.2rem;
      position: fixed;
      top: 0;
      margin-top: 0;
      margin-left: 0;
      left: -20rem;
      z-index: 50;
      background-image: var(--HD_cover);
      background-color:var(--SB-bg_PC);
      background-color:var(--HD_bg);
  }

  #side-bar:before {
background-color: var(--SB-bg_MOB);
background-image: var(--LOGO_sidebar_MOB);
pointer-events: none;
   }

    #side-bar:target {
    display: block;
    left: 0;
    position: fixed;
  } 
  #side-bar:target .close-menu {
   background: rgba(0,0,0,0.2) 1px 1px repeat;
  }

   #header #top-bar .open-menu a {     
    position: fixed;
    top: var(--SB-btn_top);
    z-index:20;
    border-radius: 5px;
    border: 0.15rem solid var(--SB-btn_border_cl);
    color:  var(--SB-btntxt_cl);
    background-color: var(--SB-btn_bgcl);
    background-image: var(--SB-btn_image, unset);
    font-size:0rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--SB-btn_square);
    height: var(--SB-btn_square);
    left:  var(--SB-btn_left);
}
  
 #header #top-bar .open-menu a:before {
    content: var(--SB_btntxt);
    font-size:var(--SB-btntxt_size);
    font-family: FontAwesome;
}

#header #top-bar .open-menu a:hover {
    --SB-btntxt_size: var(--SB-btntxt_size_HOV);
    --SB-btntxt_cl: var(--SB-btntxt_cl_HOV);
    --SB-btn_bgcl:var(--SB-btntxt_bg_HOV);
      -webkit-box-shadow:none;
      box-shadow:none;
  }  
   div.scpnet-interwiki-wrapper {
  margin: 0;
   }
}

/*=====================================
评分栏 / RATE BOX
=====================================*/

.rateBox .creditButton p a:focus,
.page-rate-widget-box a:focus{
user-select:none;
background:transparent;
}

/* ---------------------------------
----------- 常规 || normal -----------
-------------------------------------- */

.mz-talking-wrap, .rateBox, .page-rate-widget-box {
         --RATE-btn_filter: drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.2px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap)) drop-shadow(0px 0px 0.1px  var(--RATE-flag_gap))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag))
         drop-shadow(0px 0px 0.5px var(--RATE_boder-flag)) drop-shadow(0px 0px 0px var(--RATE_boder-flag));    
}

/* ---------------------------------
----------- 常规 -----------
-------------------------------------- */
 
.page-rate-widget-box {
    border-radius: 0;
    box-shadow: none;
    margin-top:0px;
    margin-bottom:var(--RATE-box_margin-bottom);
    margin-right: 0rem;
    position: relative;
    user-select:none;  
    z-index: 1;
    display: inline-flex;
}
 
 
/* .....评分文本栏和第一底线..... */
#main-content .page-rate-widget-box  .rate-points {
    border: solid 0px transparent;
    border-bottom: solid var(--RATE-line_width, 2px) var(--RATE-num_border);
    border-radius: 0;
    padding-top:var(--RATE_padding-top, 0.5rem);
    padding-right:var(--RATE_padding-left, 1rem);
    padding-bottom: var(--RATE-line_bottom,0.1rem);

    font-size: 0;
    color:var(--RATE-num_txt) ;
    position: relative;
 
    z-index: 1;
    display: inline-grid;
    align-self: start;
    align-items: baseline;   
    background-color: transparent !important; 
    margin-bottom: var(--RATE-line_bottom);
    
grid-template-columns: var(--RATE_column-11) var(--RATE_column-22) var(--RATE_column-33);
grid-template-rows: var(--RATE_row-11) var(--RATE_row-22) var(--RATE_row-33);
grid-template-areas:
'top top  top ' 
'. text number'
'. line line'
 'bottom bottom bottom'  ;
}

.page-rate-widget-box .rate-points {
    background-color: transparent !important;
}

/* 第二条底线 */
.rate-points::after {
  grid-area: line;
  content: ' ';
  border-bottom: solid var(--RATE-line_width, 2px) var(--RATE-num_border);
}

/* 评分数字 */
.rate-points .number {
    font-size: var(--RATE-num_size);
    background-color:var(--RATE-num_bg);
    color:var(--RATE-num_num);
    padding: 0 var(--RATE-num_padding);
    letter-spacing: 1px;
    line-height: var(--RATE-num_lh);
    word-break: keep-all;
    grid-area: number;
}
 
/* 评分文本 */
.page-rate-widget-box  .rate-points:before {
    grid-area: text;
    content: var(--RATE_text);
    font-size: var(--RATE-txt_size,0.8rem);
    padding: 0 0.4em 0 0.8em;
    margin-left: 0rem;
    font-family: 'FontAwesome',var(--RATE_font);
    letter-spacing: 0.25em;
    color: var(--RATE-info_btn);
    word-break:  keep-all;
    white-space:pre;
    /*! font-family: "Trebuchet MS"; */
}
 
.page-rate-widget-box:hover  .rate-points:before {
    content: var(--RATE_text_HOV) ;
}

/*.....评分旗子 || BTN FLAG ........*/
.page-rate-widget-box span.btn {
    background-color: transparent;
    border: solid 0px transparent; 
}

.creditRate .creditButton,
.page-rate-widget-box span.btn {
     font-size: var(--RATE-btn_size);
     height:var(--RATE-btn_height);
     width: var(--RATE-btn_width);
     text-align: center;
    -webkit-filter:var(--RATE-btn_filter);
    filter:var(--RATE-btn_filter);
    display: inline-flex;
    justify-content:  center;
    align-content: start;
    align-self: center;  
    top: 0;
    left: 0;
    padding: 0;
    margin-left: var(--flag-delta-size);
}

.page-rate-widget-box span.btn a{
    width: 100%;   
    background-color:  var(--RATE-btn_bgcolor);
    margin: 0;
    padding-bottom:0;
}

.creditRate  .creditButton p,
.page-rate-widget-box span.btn a{
    --flag-clip: polygon(100% 0, 100% 50%, 100% 100%, 50% var(--flag-delta-count), 0 100%, 0 0);
     background-color:  var(--RATE-btn_bgcolor);
    -webkit-clip-path:var(--flag-clip);
     clip-path: var(--flag-clip);
}


.page-rate-widget-box span.btn a:hover,
.creditRate .creditButton:hover p a{
          background-color:var(--RATE_bg_HOV);
          color:var(--RATE_txt_HOV);
          border-radius: 0;
          text-decoration: none;
}


/* ---------------------------------
著作信息栏 || INFO BOX
--------------------------------- */

.rateBox .rate-box-with-credit-button{
   background-color: transparent;
   border: none;
   border-radius: 0x;
   box-shadow: none;   
   user-select:none;
    display: inline-flex;
}

#page-content .creditRate{
  margin-right: 0.5rem;
}

.rateBox :is(.page-rate-widget-box, .creditButton){
    display: inline-flex;
}

.page-rate-widget-box span.btn:last-child {
     margin-right: 0;
}

.creditRate .creditButton{
    display: inline-flex;
    position: relative;
    margin-left: var(--RATE-btn_mgleft);
}
 
.creditRate .creditButton  a{
   --RATE-txt_size: var(--RATE-txt_size);
    font-size: var(--RATE-btn_size);
    margin: auto;
    background-color: transparent;
    color: var(--RATE-num_bg);
    left: unset;
    top: unset;
    display: inline-grid;
    justify-content: center;   
    align-items: center;
    grid-template-rows:var(--RATE-btn_width) auto;
     height:var(--RATE-btn_height);
     width: var(--RATE-btn_width);
 }
 

/* -------- 著作信息内部弹窗 --------------  */
.modalbox hr{
    border: none;
}

.modalcontainer  .modalbox .close-credits {
-webkit-filter:sepia(100%)   saturate(500%) brightness(200%);
filter: sepia(100%)   saturate(500%) brightness(200%);
}

.modalcontainer  .modalbox h2:first-child{
    color: var(--RATE-mobox_tt);
}

/* ------------ 著作信息评分栏 ------------------- */
div:is(#u-credit-view, #u-credit-otherwise) .modalcontainer .modalbox {
    --RATE_bg: var(--RATE-mobox_bg) ;
    --RATE-info_btn:var(--RATE-mobox_txt) ;
    --RATE-num_num: var(--RATE-mobox_bg);
    --RATE-num_bg: var(--RATE-mobox_border) ;   
    --RATE_boder-flag:var(--RATE-mobox_border);
    --RATE-flag_gap: var(--RATE-num_bg);
     --RATE-btn_bgcolor:var(--RATE-mobox_bg) ;  
     --RATE_bg_HOV:var(--RATE-mobox_btn);
    --RATE_txt_HOV:var(--RATE-mobox_tt);
     
    background: linear-gradient(var(--RATE-mobox_border) 51px,var(--RATE-mobox_bg) 51px);
    border: var(--RATE-num_bg) solid 4px;
    color: var(--RATE-mobox_txt) ;   
    scrollbar-color:  var(--RATE-mobox_btn) var(--RATE-mobox_border);
}

 .modalcontainer :is(a, .rateup a, .ratedown a, .cancel a) {
  color: var(--RATE-mobox_btn);
}

/* ----------- TAB 里的颜色 ---------------- */
.yui-content .page-rate-widget-box .btn:not(:first-child),
.yui-content .page-rate-widget-box:before {
    background-color: var(--tabMain-bg);
}

.yui-content .rate-points .number{
  color: var(--tabMain-bg);
}

.yui-content .page-rate-widget-box .btn:not(:first-child)::after{
    border-color: var(--tabMain-bg) var(--tabMain-bg) transparent var(--tabMain-bg);
}


/* ----------- 窄屏 ---------------- */

@media (max-width: 500px){
   .page-rate-widget-box {
       z-index: 0;
   }
    /* 让著作信息按钮在窄屏下，不出框架 */
    .creditButton  p{
    position: relative;
   }
}

/*
=====================================
正文元素 / PAGE CONTAINER 
=====================================
*/

/* ----------- 表格 ------------ */
table.wiki-content-table th {
  color: var(--RATE-num_bg);
  background-color: var(--color-light);
}

/* ----------- 目录（有空再弄） ------------ */

#page-content #toc-action-bar a {
     padding: 0;
}

#toc #toc-action-bar {
   text-align: center;
}

#toc{
     display: flex;
     flex-wrap: wrap;
     flex-basis: 100%;
     flex-direction: column;

     min-width: 8rem;
     font-size: var(--TOC-txt_size);
      padding: 0em 0em;
     background-color: transparent;
     line-height: var(--TOC-line_height);

    border: 0px solid var(--TOC-bd_cl);
    border-radius: 0rem 0.875rem;
    border-bottom: solid 0.2rem var(--TOC-bd_cl);
    border-top: solid 0.2rem var(--TOC-bd_cl);
    position: relative;

}


#toc .title {
    visibility: hidden;
    margin-top: -1rem;
    padding: 0;
    position: relative;
    text-align: left;

}

#toc .title:before {
 content:var(--TOC_text-tt,'MENU') ;
    visibility: visible;
    padding: 0.2rem 0.4rem;
    background-color:var(--TOC-tt_bg);
    color:var(--TOC-tt_cl);
        border-radius: 0.5rem;
    border: 2px solid var(--TOC-bd_cl);
}

 #toc #toc-action-bar{
    order: 3;
    text-align: right ;
}

#toc  #toc-action-bar {
padding: 0;
    line-height: 0.5rem;
    position: relative;
    bottom: -0.5rem;
}

#toc-action-bar a{
    font-size:0;
    text-decoration: none;
}

#toc-action-bar a[onclick*="foldToc"]:before,
#toc-action-bar a[onclick*="unfoldToc"]:before{
    font-size: initial;
        padding: 0.2rem 0.4rem;
    font-family: var(--page-font);
    background-color:var(--TOC-tt_bg);
    color:var(--TOC-tt_cl);
        border-radius: 0.5rem;
    border: 2px solid var(--TOC-bd_cl);  
}

#toc-action-bar a[onclick*="foldToc"]:before{
    content: var(--TOC_text-fold);
}

#toc-action-bar a[onclick*="unfoldToc"]:before{
    content: var(--TOC_text-unfold);
}

#toc-action-bar a[onclick*="foldToc"]:hover:before,
#toc-action-bar a[onclick*="unfoldToc"]:hover:before{
    background:  var(--TOC-bd_cl);
    color:var(--TOC-tt_bg);
}

/* ----------- 引用块 ------------ */

blockquote,
div.blockquote {
    border: 2px dashed var(--QUOTE_border);
    padding:0.5rem 0.8rem;
    margin: 1rem 3em;
    background-color: var(--QUOTE_bg222);
}

/* ----------- 替代引用块的div ------------ */
.mz-board,
.mz-blockquote {
    border: 3px double var(--QUOTE_border);
        border-left: 5px solid var(--QUOTE_border-left);
    padding:0.5rem 0.8rem;
    margin: 1rem 3em;
        background-size:80px;/* 20% */
    background-position: 0% 0%;
 background-repeat: repeat;
    background-color: transparent;
}

.mz-board:after,
.mz-blockquote:after {
    content: '\f06c ';
    font-family: 'FontAwesome';
    display: block;
    font-size: 1.2rem;
    width: 1rem;
    height:1rem;
    padding: 0.5rem;
    float: right;

    position: relative;
    margin-right: -1.5rem;
   margin-top:-1rem;
       background-color: var(--page-bg)
}

.mz-board:after,
.mz-blockquote div  .mz-blockquote:after,
.mz-blockquote div  .mz-blockquote:after {
    content: '\f02e ';
    font-family: 'FontAwesome';
    font-size: 1.2rem;
    background: none;
        margin-right: -1.5rem;
   margin-top:-0.5rem;
}

.mz-blockquote  .mz-blockquote  .mz-blockquote:after {
    display: none;
}

.mz-board{
    border: 2px solid #333;
    border-left: 7px solid #333;
    background: rgba(150,150,150,0.1);
}

.yui-content .mz-blockquote::after {
    background-color: var(--tabMain-bg);
}

.mz-tab-line .yui-content .mz-board::after,
.mz-tab-line .yui-content .mz-blockquote::after {
    background-color: var(--page-bg);
}

.mz-cover,
.mz-paper{
        border: 3.5px double #555;
        padding:0.5rem 1rem;
        margin: 1rem 1rem;
        background-size:100px;
        background-position: 0% 0%;
        background-repeat: repeat;
        background-color:var(--mz-paper-bg);
        background-image: var(--icon-noise);
}

.mz-cover{
        border: 2px solid var(--color-navy);
        background-color:var(--color-kraft);
        background-image: var(--icon-noise);
}


#page-content .mz-cover :is(h1, h2, h3, h4, h5, h6){
font-family:var(--teletype-font);
}

.mz-cover tt{
font-family:var(--teletype-font);
}


/**/

.mz-textquote {
    border-left: 5px #75878a solid;
    color: #75878a;
    padding:0px 0px 0px 1em;
    margin: 0.5em 1em;
}

.mz-textquote *:first-child{
    margin-top: 0.2rem ;
}

.mz-textquote *:last-child{
    margin-bottom: 0.2rem;
}

/*  引用块 与 div块 在手机格式下的边距  */

@media (max-width: 600px){
   blockquote, div.blockquote,
  .mz-paper,  .mz-blockquote,
  .mz-board, .mz-cover {  
    margin: 0.6rem 0.5rem;
      padding:0.5em 1em;
   }
}

/* ----------------- 异学会装饰性框架 ---------------------- */

.mz-outbox{
  border: solid 1px #C0C0C0;
  padding: 2% 2%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.mz-innerbox{
 border: solid 1px #C0C0C0;
padding: 2% 2%;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.mz-tabcell{
   border: solid 1px #C0C0C0;
   padding: 10px 15px;
   box-shadow: 0 1px 3px rgba(0,0,0,.2);
}


/*-------------- 便利贴与脚注 ------------------*/
.hovertip .content .footnote,
.mz-note{
    min-width: 15vw;
}

.hovertip  .content,
.mz-note{
    background-image:linear-gradient(var(--tip-deg),transparent 0%, transparent var(--tip-dogear-size) ,var(--tip-color) var(--tip-dogear-size), var(--tip-color) 100%);
    -webkit-filter: drop-shadow(0px 0px 2px rgba(var(--tip-bdcl),0.5));
    filter: drop-shadow(0px 0px 2px rgba(var(--tip-bdcl),0.5));
}

.hovertip  .content:after,
.mz-note::after{
    content: "  ";
    display: block;
    width: var(--tip-dogearoll-size);
    height: var(--tip-dogearoll-size);
    background-size:contain;
    background-image:linear-gradient(var(--tip-deg),transparent 0%, transparent 50% , var(--tip-color) 50%, var(--tip-color) 100%);    
    float: right;
    margin: 0 -0.5rem -0.5rem 0;
    -webkit-filter: drop-shadow(-2px -1px 4px rgba(var(--tip-bdcl),0.6))  drop-shadow(2px -1px 1px rgba(var(--tip-bdcl),0.2)) grayscale(50%);
    filter: drop-shadow(-2px -1px 4px rgba(var(--tip-bdcl),0.6))  drop-shadow(2px -1px 1px rgba(var(--tip-bdcl),0.2)) grayscale(50%);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

.mz-note.note-left{
    --tip-deg:45deg;
}

.mz-note.note-left:after{
   float: left;
    right: unset;
    left: 0;
}

.mz-note .blockquote,
.mz-note blockquote{
    padding:0 1em;
    margin: 1rem 1em;
}

.mz-note hr{
   border-width: 2px;
   border-style: solid;
}

#page-content .mz-note{
    max-width:var(--tip-maxwidth_PC);
    padding: 0.5rem;
}

a.footnoteref  {
    display: inline-flex;
    font-family:var(--page-tt-font);
    text-decoration: none;
}

a.footnoteref::before{
    content: "(";
    margin: 0 0.1em;
}

a.footnoteref::after{
    content: ")";
      margin: 0 0.1em;
}

.hovertip  {
    --tip-dogear-size:1em;
    --tip-dogearoll-size:1.35em;
    border: none !important;
    background: transparent !important;
   width: auto !important;
    font-size:var(--tip-txt_size)
}

.hovertip .content{
    --tip-dogear-padding: 0.5rem  calc(var(--tip-dogearoll-size) + 0.5em) 0.5rem 0.5rem;
    -webkit-filter: drop-shadow(0px 0px 3px rgba(var(--tip-bdcl),0.5))  drop-shadow(0px 0px 1px rgba(var(--tip-bdcl),1));  
    filter: drop-shadow(0px 0px 3px rgba(var(--tip-bdcl),0.5))  drop-shadow(0px 0px 1px rgba(var(--tip-bdcl),1));  
    padding:var(--tip-dogear-padding);
    font-size: 110%;
    min-height: var(--tip-dogearoll-size);
}

.hovertip .f-footer{
    height: 0;
    font-size: 0;
}

.hovertip .f-heading  {
    max-width: 11em;
    padding: 0em 0 0em 0em;
    font-size: 110%;
    font-family:var(--handwriting-font);
    letter-spacing:1px;
    font-weight: 600;
}

.hovertip .f-heading::after {
    content: ' ';
    height: 0.1rem;
    display: block;    
    padding: 0;
    margin-left: -5px;  
    background-image: linear-gradient(70deg, transparent 0px,  var(--color-navy) 8%,  var(--color-navy) 10%, transparent 100%);
}

@media (max-width: 500px) {  
  #page-content .mz-note{
     max-width: 90%;
  }   
  .hovertip {
    max-width: 90vw;
      --tip-txt_size:0.9em;
  }
 a.footnoteref  {
    font-size:80%;
  }
}

/* 非脚注的注释 */
.hovertip:not(:has(.f-heading))  .content {
    --tip-dogear-size:0;
    --tip-dogearoll-size:0;
    --tip-dogear-padding:0.5rem 1em;
    --tip-color:var(--color-grey-pale);
    letter-spacing: 1px
}

/*--------------便签纸-----------------*/

.note-page {
    display: block;
    overflow: hidden;
    font-family: "Monotype Corsiva", "Bradley Hand ITC",var(--handwriting-font);
    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)
}

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

.note-page blockquote,
.note-page .blockquote{
    margin: 0.5rem 2em;  
}

/*--------------回形针-----------------*/

.clip-wrap div {
    max-width: 60%;
    margin: 1rem auto;
    width: 60%;
}

.clip-wrap .clip-img,
.clip-wrap .clip-body {
    border: solid 2px rgb(var(--clip-border,0,0,0));
    background-color: rgb(var(--clip-bg, 244, 244, 244));
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    padding: 0.5rem;
}

.clip-wrap .clip-img::before,.clip-wrap .clip-img::after,
.clip-wrap .clip-body::before,.clip-wrap .clip-body::after {
    content:'';
    position: absolute;
    pointer-events: none;
    border: solid 0.25rem var(--color-darker);
    transform: rotate(25deg);
}

.clip-wrap .clip-img::before,.clip-wrap .clip-img::after {
    border: solid 0.25rem var(--color-darker);
}

.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
  right: 0.45rem;
  height: 36px;
  width: 9px;
  top: -0.45rem;
  border-radius: 0 0 2rem 2rem;
  border-top: none;
}

.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
    top: -24px;
    right: -0.5rem;
    height: 16px;
    width: 14px;
    border-radius: 2rem 2rem 0 0;
    border-bottom: solid 0.55rem transparent;
    z-index: -1;
}

.clip-wrap .clip-body img,
.clip-wrap .clip-img {
    border: 0.15rem solid var(--color-darkest);
  width: max-content;
}

.clip-wrap .clip-img::before {
  right: -0.2rem;
  top: -0.45rem;
}

.clip-wrap .clip-img::after {
    right: -0.8rem;
        height: 45px;
}

.clip-wrap .clip-img {
    padding: 0rem;
    border: 0.12rem solid var(--color-darkest);
    box-shadow:  0px 0px 0px 9px rgba(50,50,50, 0.1), 0px 0px 0px 12px rgba(150,150,150, 0.1);
}

@media (max-width: 500px) {
.clip-wrap{
     max-width: 100%;
}
.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
  right: 0.3rem;
  height: 1.4rem;
  width: 0.4rem;
  top: 0rem;
}

.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
    top: -1rem;
    right: -0.5rem;
    height: 1rem;
    width: 0.7rem;
}
}


/* ----------- 分割线 ------------ */

hr{
    margin: 1em 0em;
    padding-bottom: -1em;
    height: 0px;
    border-top: var(--color-hr) dashed 3.5px;
    color: transparent;
    background-color:  transparent;
}

.mz-hr{
    display: flex;
    flex-wrap: nowrap;
    flex-basis: 20%;
    width: 100%;
}

.hr-double hr{
    --color-hr: var(--color-dark);
    height:3px;
border-top: var(--color-hr) solid 3px;  
border-bottom: var(--color-hr) solid 3px;  
    
}

/* 缩减  */

blockquote hr,
div:is(.mz-cover, .yui-content, .mz-board, .mz-blockquote, .blockquote, .authorcontent) hr {
    border-top: var(--color-hr) solid 2px;
    margin: 1em 1.5em;
}

.mz-tt.tt-box hr{
  margin: 0.5rem  1rem;
    border-top:1px solid var(--color-hr);
}

/* 分割线框  */
.mz-hr.hr-contract  hr{
         margin: 1em 2em;
        border-block-width: 1px;

}

.mz-hr.hr-solid hr{
               border-style: solid;
}

.mz-hr.hr-dotted hr{
           border-style: dotted;
}

.mz-hr hr{
    flex-basis: 20%;
    flex-grow: 1;
    top: 1rem;
    position: relative;
}

.mz-hr tt sub{
    flex-basis: 0%;
    font-size: 0rem;
    top:0;
    bottom: 0;
}

.mz-hr  sub {
   font-size: inherit;
  position: relative;
top:0.3rem;
}

.mz-hr  tt sub:before {
    content: ' ';
margin: 1rem  0.8rem 0 0.8rem;
    font-size: 1.6rem;
      border-left:2px solid  var(--RATE-info_border);
    position: relative;
}

.mz-hr img{
    width: 2rem;
    margin: 0 0.2rem;
}

/* 分割线窄屏 */
@media (max-width: 500px){
.mz-hr  tt sub:before {
    content: ' ';
    margin: 0 0.3rem;
}
    
    
  hr{
    border-top: 2px dashed var(--color-hr);
 }

  .mz-hr{
    flex-wrap: nowrap;
  }

    .mz-hr .page-rate-widget-box{
    flex-shrink: 0;
  }

  .mz-hr p{
    flex-shrink: 1;
  }
     .mz-hr img{
    flex-shrink: 2;
  }
}

/* ----------- 插图 || IMAGE BOX ---------------- */

/* 无框 */
.mz-img-wrap .scp-image-block {
    margin: 0 0.5rem;
}

.mz-img-wrap .scp-image-block {
    border: none;
    box-shadow: none;
}

.mz-img-wrap .scp-image-block .scp-image-caption {
    background-color: transparent;
    border-top: none;
    padding: 0.8rem 0;
    font-size: 100%;
    font-weight: normal;
    letter-spacing: 1px;
}

/* 图片有框  */
.mz-img-wrap.img-frame img{
    border: 3px double #333;
}

.mz-img-wrap.img-frame .scp-image-caption{
    display: flex;
    flex: 100%;
}

.mz-img-wrap.img-frame .scp-image-caption:after,
.mz-img-wrap.img-frame .scp-image-caption:before{
   content: "";
    margin: auto auto auto 0.375rem;
    color: var(--color-navy);
    border-top: 0px double var(--accentColor);
    flex-shrink: 0;
    font-size: 2rem;
    position: relative;
    display: inline-flex;
    flex-grow: 1;
    height: 1rem;
    background-color: var(--dark-accent);
    justify-content:  flex-start;
}

.mz-img-wrap.img-frame.img-border img{
        border: 2px dotted #333;
}

/* 模块外框 */
.mz-img-wrap.img-border .scp-image-block {
        overflow: hidden;        
    padding: 1rem;
      background: linear-gradient(-45deg,transparent 15px,var(--mz-img-bg) 0) bottom right,
              linear-gradient(45deg,transparent 15px,var(--mz-img-bg) 0) bottom left,
              linear-gradient(135deg,transparent 15px,var(--mz-img-bg) 0) top left,
              linear-gradient(-135deg,transparent 15px,var(--mz-img-bg) 0) top right;
  background-size: 50% 51%;
  background-repeat: no-repeat;
    position:  inherit;
    filter:var(--box-line);

}

.img-border.img-paper .scp-image-block {      
    background: linear-gradient(-45deg,transparent 15px,var(--mz-paper-bg222) 0) bottom right,
               linear-gradient(45deg,transparent 15px,var(--mz-paper-bg222) 0) bottom left,
               linear-gradient(135deg,transparent 15px,var(--mz-paper-bg222) 0) top left,
               linear-gradient(-135deg,transparent 15px,var(--mz-paper-bg222) 0) top right;
}

/* 3d 边框  */
.mz-img-wrap.img-b3d .scp-image-block {
    border: #999 5px ridge;
}

.mz-img-wrap.img-b3d .scp-image-block .scp-image-caption {
    border-top: solid 3px #666;
}

/* 额外适应  */
.mz-img-wrap.img-tt .scp-image-caption{
    font-family: var(--page-tt-font), serif;
    font-size: 150%;
    letter-spacing: 1px;
}

/*
=====================================
更多效果 / MORE
=====================================
*/

/* ------------------------- 
内文标题 || Horizontally center title 
------------------------- */

#page-content  :is(.mz-tt.tt-box, .mz-tt333) h1{
    display: block;
    text-align: center;
}
 
.mz-tt{
    text-align:center;
    margin: var(--ttbox_margin);
}

.mz-tt h1 span{
     padding: 0 var(--mztt-h1pd-horiz);
}

.mz-tt h1:before{
content: "";
flex-grow: 1;
height: 0.1rem;
margin: auto auto auto 0.375rem;
color: var(--accentColor);
background-color: var(--dark-accent);   
}


/* -----------横跨标题其二 || Horizontally center title 2nd ----------- */
.mz-tt222 {
    border-top: 3px solid #6d6b82;
    border-bottom: 3px solid #6d6b82;
    padding:0 0.5rem;
    margin: 1rem 3em;
}

.mz-tt222:before,
.mz-tt222:after{
    content: ' ';
    border-top: 1.5px solid #6d6b82;
    margin: 0.1rem;
    text-align: center;
display: block;
}

#page-content  .mz-tt222 *{
    text-align: center;
    display: block;
}

/* -----------横跨标题其三 || Horizontally center title 3 ----------- */

.mz-tt333 *{
    margin: auto;
}

.mz-tt333:after{
    content: '  ';
    display: block;
    width:100%;
    border-bottom: 0.25em solid var(--PGtt-line_color)
}



/* --------------------------------- 
分栏 || Columns
---------------------------------  */
.mz-column p:first-of-type{
   margin: 0;  
}

.mz-column{
  -moz-column-count:2;
  -moz-column-rule:2px solid grey;
  -moz-column-gap:4rem;
  -webkit-column-count:2;     
  -webkit-column-rule:2px solid grey;
  -webkit-column-gap:4rem;
  column-count:2;     
  column-rule:2px solid grey;
  column-gap:4rem;

}

.mz-column.column-333{
      -moz-column-count:3;
      -webkit-column-count:3;    
      column-count:3;     

}

.mz-column.column-nip{
  -moz-column-rule:0px solid grey;
  -moz-column-gap:1.5rem;

   -webkit-column-rule:0px solid grey;
   -webkit-column-gap:1.5rem;

      column-rule:0px solid grey;
      column-gap:1.5rem;
}

.mz-column p:first-child{
  margin-top:0rem;
}

@media (max-width: 600px){
.mz-column.column-333, 
.mz-column{
  -moz-column-count:1;   
  -webkit-column-count:1;    
           column-count:1;    
  }
}


/* ---------------------------------------
 伪黑光盒 || Pseudo Blacklight box 
---------------------------------------- */

#page-content  .mz-tt.tt-box h1:after {
 content: " ";
    
    width: var(--ttbox_bevel-size);
    height:var(--ttbox_bevel-size);
    
    background: var(--ttbox_bevel-bg);
    color:var(--ttbox_bevel-color);

    position: absolute;
    font-size:var(--ttbox_bevel-size);
    margin-top:var(--ttbox_bevel-top);
    margin-left: var(--ttbox_bevel-left);
    
    z-index: -1;
       display: block;
}

#page-content  .mz-tt.tt-box h1:before{
    display: none;
}

#page-content  .mz-tt.tt-box h1{
    display: block;
    letter-spacing: 0.1rem;
    font-size:var(--ttbox_h1-size);
    background-color: var(--ttbox_h1-bg);
    border: solid var(--ttbox_border-size)  var(--ttbox_h1BDR-color);
    padding: var(--ttbox_padding);
    color:  var(--ttbox_h1-color);
    margin-left:  var(--ttbox_h1-left);
    max-width:  max-content;
}


.mz-tt.tt-box {
       background-color: var(--ttbox_box-bg);
  border: solid var(--ttbox_box-size)  var(--ttbox_boxBDR-color);
    padding: 0rem 0 1rem 0;
   position: relative;
   padding: var(--ttbox_padding);
    text-align: left;
}

.mz-tt.tt-box  h1:first-of-type {
    display: block;
    top:var(--ttbox_h1-top);
    position: relative;
}

.mz-tt.tt-box  h1:first-of-type + * {
    margin-top:var(--ttbox_h1-top);
}

.tt-box p{  
    padding:inherit 0.5rem;
}

@media (max-width: 600px){
#page-content .mz-tt.tt-box  h1 {
  font-size:130%;
}
}

/*=====================================
tab 分页
=====================================*/

/* ---- YUI TAB BASE ---- */
.yui-navset {

    margin: 0 0.1rem;
}

.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{
    background-color:inherit;
    background-image:inherit
}

.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{
    background:inherit;
    text-decoration:inherit
}

.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{
    color:inherit;
    background:inherit;
}

.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{
    border-color:inherit
}

.yui-navset li{
    line-height:inherit;
    min-width: 15%;   
}

/* ---- YUI TAB CUSTOMIZATION ----*/

 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
    /* width: calc(100% - .05rem); */
     /*! margin: 0 auto; */
     border-color: var(--tabNAV-border);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{

     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: var(--tabNAV-bg);
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #d6d6d6;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--tabNAV-bg_HOV);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #d6d6d6;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;

     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--tabNAV-bg_SEL);
     color:var(--tabNAV-txt_SEL);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: var(--tabNAV-txt_SEL);
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color:var(--tabNAV-txt_ACT);
     background-color: var(--tabNAV-bg_ACT);
}
 .yui-navset .yui-content {
    background-color:var(--tabMain-bg);
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5rem;
     margin: var(--tab-margin);
     border: var(--tabMain-border) solid 1px;
          border-top: var(--tabMain-border) solid 4px;
}

.yui-navset .yui-nav{
     border: none ;  
          filter: drop-shadow(0px -1px 1px var(--tab-shadow));
}

.mz-tab .yui-navset{
     filter: drop-shadow(-1px 1px 0.5px var(--tab-shadow)) drop-shadow(1px 1px 0.5px var(--tab-shadow))
         drop-shadow(0px -1px 0.5px var(--tab-shadow)) drop-shadow(0px -1px 0.5px var(--tab-shadow) );
}


/* ---------------- 线条 ---------------- */

.mz-tab-line  .yui-navset .yui-nav{
    filter:none;
    background-color: var(--Line-tabNAV-border);  
    padding-left:var(--Line-tabBD-weight);
}

.mz-tab-line  .yui-navset .yui-nav li {
    margin-right:var(--Line-tabBD-weight);
   margin-top: var(--Line-tabBD-weight);
}

.mz-tab-line .yui-navset .yui-nav a,
.mz-tab-line .yui-navset .yui-navset-top .yui-nav a{
     background-color: var(--Line-tabNAV-bg);
    border-top: var(--Line-tabBD-weight) solid var(--Line-tabNAV-border);  
    color: var(--Line-tabNAV-txt);
}

.mz-tab-line .yui-navset .yui-nav a:hover,
.mz-tab-line .yui-navset .yui-nav a:focus{
     background-color: var(--Line-tabNAV-bg_HOV);
}

.mz-tab-line .yui-navset .yui-nav .selected,
.mz-tab-line  .yui-navset .yui-navset-top .yui-nav .selected{
     background-color: var(--Line-tabNAV-bg_SEL);
     color:var(--Line-tabNAV-txt_SEL);
}

 .mz-tab-line .mz-line .yui-navset .yui-nav .selected a{
     color: var(--Line-tabNAV-txt_SEL);
}
 .mz-tab-line .yui-navset .yui-nav .selected a:focus,
 .mz-tab-line .yui-navset .yui-nav .selected a:active{
     color:var(--Line-tabNAV-txt_ACT);
     background-color: var(--Line-tabNAV-bg_ACT);
}
 .mz-tab-line .yui-navset .yui-nav  a:hover,
 .mz-tab-line .yui-navset .yui-nav .selected a,
 .mz-tab-line .yui-navset .yui-nav .selected a:focus,
 .mz-tab-line .yui-navset .yui-nav .selected a:hover {
       color:var(--Line-tabNAV-txt_HOV);
     background-color: var(--Line-tabNAV-bg_HOV);
}

 .mz-tab-line .yui-navset .yui-nav .selected,
 .mz-tab-line .yui-navset .yui-navset-top .yui-nav .selected {
    background-color: var(--Line-tabNAV-bg_SEL);
    color: var(--Line-tabNAV-txt_SEL);
}

.mz-tab-line .yui-navset .yui-content {
    background-color:var(--Line-tabMain-bg);
}

.mz-tab-line .yui-navset .yui-content,
.mz-tab-line .yui-navset .yui-navset-top .yui-content{
     border: var(--Line-tabMain-border) solid var(--Line-tabBD-weight);
}

@media (max-width:520px){
  .mz-tab-line  .yui-navset .yui-nav{
    width:initial;
  }
}

/*=====================================
底栏
=====================================*/
 
.page-tags a{
    padding: 0.2rem 0.2rem;
    margin: 0 0.05rem;
}
 
.page-tags a:hover,
.page-watch-options a:hover:before,
#page-options-container  a:hover{  
 color: var(--SB-link_txt_HOV);
 background-color: var(--SB-link_bg_HOV);
    text-decoration: none;
}


/*========================
操作区
========================*/

/*------------------------
按钮
--------------------------*/

/* 通常 */

#action-area .btn:hover{
   text-decoration: none;
    cursor: pointer;
}

/* 关闭 */

a.action-area-close{
    height: 2em;
    margin-top: 0.5em;
    align-content: center;
    display: grid;
    background: var(--ACT-close_bg);
    border: 2px dotted var(--color-darker)
}

a.action-area-close:hover{
  --ACT-close_bg: var(--color-darkest);
 text-decoration: none;
  border: 2px solid var(--color-darker);
}

/* 勾选 */

.checkbox * {
    display: inline-flex;
    align-items: center;
}

#action-area input[type="checkbox"]{
    margin-left: 1em;
    background-color: transparent;
     width: 1rem;
    appearance: none;
    cursor:  pointer;   
}

#action-area  input[type="checkbox"]::before{
    content: "\f096";
    font-family: fontawesome;
    font-size: 150%;
}

#action-area input[type="checkbox"]:checked::before{
    content: "\f046";
}

/*----------------------------------
历史区（未完成）
------------------------------------*/

#history-form-1 .form tbody{
    display: flex;
    flex-wrap: wrap; 
}

#history-form-1 .form tbody td {
    width: var(--HISTORY-form_td_width);
    margin:var(--HISTORY-form_td_margin);
}

#history-form-1 .form tbody > tr td:last-child{
    display: inline-grid;
    grid-template-columns: var(--HISTORY-form_columns);
    grid-template-rows: auto auto;
    grid-gap: 0.25em 0rem;
    font-size: var(--HISTORY-btn_size);
    align-items: center;
    align-content: center;
    width: max-content;
    padding-right: 0
}

#history-form-1{
  display: grid;
  grid-template-areas:
 'left m11 right' 
 'left m22 right' 
  'left m33 right'     
 'under under  under';
      grid-template-columns:1fr auto 1fr;
      grid-template-rows:auto auto auto auto;
}

#history-form-1 .form {
    grid-area: m11;
    margin: 0;
    max-width: max-content;
}

#history-form-1 .buttons{
    position: relative;
     grid-area: m22; 
    text-align: right;
    margin: -1.8rem 0 0 0;
    padding: 0;
    width: max-content;
    justify-self: flex-end;
    font-size: var(--HISTORY-update_size);
 }


#revision-list{
    grid-area: under;
    
}

#history-form-1 #h-perpage{
    width: var(--HISTORY-perpage_width);
}

/*----------------------------------
编辑区
------------------------------------*/


/*--------------- 代码按钮 ---------------------*/

.wd-editor-toolbar-panel li.hseparator {
display: none;
}

.wd-editor-toolbar-panel {
   display: flex;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    margin: var(--EDIT-ui-panel_margin);
}

.wd-editor-toolbar-panel div {
   flex-basis: 100%;
   margin: 0.2rem 0;
   height: auto;
   display: flex;
}

.wd-editor-toolbar-panel div:nth-child(2) {
    order: 3;
}

.wd-editor-toolbar-panel div:nth-child(1) {
    order: 2;
}

.wd-editor-toolbar-panel div:nth-child(1):after {
   content: '\f096';
   width: var( --EDIT-ui_weight);
   display: inline-grid;
   margin: var(--EDIT-ui-btn_margin);
    justify-content :center;
    align-items: center;
}


.wd-editor-toolbar-panel ul li {
 margin: var(--EDIT-ui-btn_margin);
}

.wd-editor-toolbar-panel,
.wd-editor-toolbar-panel a ,
.wd-editor-toolbar-panel a:hover {
        background-image:none;
        font-family: var(--EDIT-ui_font);
        letter-spacing: 1px;
        text-decoration: none;
        font-size: var(--EDIT-ui_size-11);
}

.wd-editor-toolbar-panel ul li ul li a,
.wd-editor-toolbar-panel ul li a {
     height: var(--EDIT-ui_height);
     width: var(--EDIT-ui_weight);
     display: inline-grid;
     position: relative;
     background-color: var(--EDIT-ui_bg);
    text-align: center;   
}

.wd-editor-toolbar-panel a::before {
    content: "";
   display: inline-grid; 
    left: 0;
    top: 0; 
  height: var( --EDIT-ui_height);
  width: var( --EDIT-ui_weight);
    text-align: center;
    line-height: 1.5em;
    white-space: nowrap;
    z-index: 5;
    color:var(--EDIT-ui_color);
    align-content: center;
    justify-self: center;
    align-self: center;
}

.wd-editor-toolbar-panel a:hover {
    --EDIT-ui_color: var(--EDIT-ui_color_HOV);
    outline:var(--EDIT-ui_outline);
     -webkit-filter:brightness(90%);  
    filter: brightness(90%);  
    background-image: var(--hollow-image);
 }

/*---------- 引导 -----------*/

.wd-editor-toolbar-panel a[class*="wiz"]::after {
    content:"\f0d0";
    font-size: var(--EDIT-ui_size-99);
    justify-self:right;
    align-self: flex-end;
    opacity: 1;
    color:var(--EDIT-ui_color);  
    z-index: 6;
    transition:  opacity 0.5s;
    position: absolute;
}

.wd-editor-toolbar-panel a[class*="wiz"]::before {
     opacity:0.25 ;
     -webkit-text-stroke: 1px rgba(50,50,50,0.4);
        transition:  opacity 0.5s;
}

.wd-editor-toolbar-panel a[class*="wiz"]:hover::before {
     opacity:1 ;
        transition:  opacity 0.25s;
}

.wd-editor-toolbar-panel a[class*="wiz"]:hover::after {
    opacity: 0.25;
    transition:  opacity 0.25s;
}

/*---------- 次级框 -----------*/
.wd-editor-toolbar-panel li li a {
    --EDIT-ui_bg: var(--page-bg);
    outline:var(--EDIT-ui_outline);
    background-image: var(--hollow-image);
}


.wd-editor-toolbar-panel ul li ul:before {
    content: '▲';    
    position: relative;
    top:-1.3em;
    left: 1em;
    font-size: 0.65em;
    width: 0;
    height: 0;
    display: block;
    color: var(--EDIT-border_color); 
}

/*---------- 各项 -----------*/

.wd-editor-toolbar-panel ul {
  display: flex;
}

.wd-editor-toolbar-panel ul li ul a::before {
    content: "H";
    font-size: var(--EDIT-ui_size-sub);
    font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-h1::before{
    content: "H1";
    font-size: var(--EDIT-ui_size-11);
    font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-h2::before {
    content: "H2";
}

.wd-editor-toolbar-panel a.weditor-h3::before {
    content: "H3";
}

.wd-editor-toolbar-panel a.weditor-h4::before {
    content: "H4";
}

.wd-editor-toolbar-panel a.weditor-h5::before {
    content: "H5";
}

.wd-editor-toolbar-panel a.weditor-h6::before {
    content: "H6";
}

.wd-editor-toolbar-panel a.weditor-bold::before {
    content: "\f032";
}

.wd-editor-toolbar-panel a.weditor-italic::before {
    content: "\f033";
}

.wd-editor-toolbar-panel a.weditor-underline::before {
    content: "\f0cd";
}

.wd-editor-toolbar-panel a.weditor-strikethrough::before {
    content: "\f0cc";
}

.wd-editor-toolbar-panel a.weditor-teletype::before {
    content: "\f035";
}

.wd-editor-toolbar-panel a.weditor-quote::before {
    content: "\f10e";
}

.wd-editor-toolbar-panel a.weditor-superscript::before {
    content: "\f12b";
}

.wd-editor-toolbar-panel a.weditor-subscript::before {
    content: "\f12c";
}

.wd-editor-toolbar-panel a.weditor-raw::before {
    content: "\f070";
}

.wd-editor-toolbar-panel a.weditor-hr::before {
    content: "——";
    font-weight: 900;
}

.wd-editor-toolbar-panel a.weditor-div::before {
    content: "div";
    font-size: var(--EDIT-ui_size-33);
   font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-clearfloat::before {
    content: "\f0ec";
}

.wd-editor-toolbar-panel a.weditor-clearfloatleft::before {
    content: "\f177";
}

.wd-editor-toolbar-panel a.weditor-clearfloatright::before {
    content: "\f178";
}

.wd-editor-toolbar-panel a.weditor-table::before {
    content: "\f0ce";
}

.wd-editor-toolbar-panel a.weditor-toc::before {
    content: "toc";
    font-size: var(--EDIT-ui_size-33);
    font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-code::before,
.wd-editor-toolbar-panel a.weditor-codewiz::before  {
    content: "\003c\002f\003e";
    font-size: var(--EDIT-ui_size-33);
}

.wd-editor-toolbar-panel a.weditor-uri::before,
.wd-editor-toolbar-panel a.weditor-uriwiz::before {
    content: "\f0c6";
}

.wd-editor-toolbar-panel a.weditor-pagelink::before,
.wd-editor-toolbar-panel a.weditor-pagelinkwiz::before {
    content: "\f0c1";
}

.wd-editor-toolbar-panel a.weditor-image::before,
.wd-editor-toolbar-panel a.weditor-imagewiz::before {
    content: "\f03e";
}

.wd-editor-toolbar-panel a.weditor-html::before {
    content: "\f1c9";
}

.wd-editor-toolbar-panel a.weditor-numlist::before {
    content: "\f0cb";
}

.wd-editor-toolbar-panel a.weditor-bullist::before {
    content: "\f0ca";
}

.wd-editor-toolbar-panel a.weditor-incindent::before {
    content: "\f03c";
}

.wd-editor-toolbar-panel a.weditor-decindent::before {
    content: "\f03b";
}

.wd-editor-toolbar-panel a.weditor-deflist::before {
    content: "\f03a";
}

.wd-editor-toolbar-panel a.weditor-footnote::before {
    content:"\f0f6";
    transform:  rotateX(180deg);
    margin-top: 1px   
}

.wd-editor-toolbar-panel li:nth-child(6){
 order: 10
}

.wd-editor-toolbar-panel a.weditor-math::before {
    content: "√x";
        font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-mathinline::before {
    content: "x/2";
    font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-eqref::before {
    content: "Eq";
    font-size:  var(--EDIT-ui_size-22);
        font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-bib::before {
    content: "Bib";
    font-size: var(--EDIT-ui_size-33);
        font-weight: 600;
}

.wd-editor-toolbar-panel a.weditor-bibcite::before {
    content: "[n]";
    font-size: var(--EDIT-ui_size-22);
        font-weight: 600;
}


/*--------------- 编辑框 ---------------------*/

#edit-page-form tbody {
    width: 100%;
}

#edit-page-form .form {
    width: 100%;
    display: flex;
}

#edit-page-form  .form tr td:first-child{
    vertical-align:  middle;
    margin-bottom: 0.5rem;
    padding: 0;
    text-align: center;
}

 #edit-page-title,  
 #edit-page-textarea{
  max-width: var(--EDIT-table_width) !important;
  width: var(--EDIT-table_width) !important;
  }

#edit-page-form *::selection,
#edit-page-form *::-moz-selection {
     color: white;
    background:var(--color-darker);
}

#main-content textarea:focus,
#main-content input.text:focus{
    outline:var(--EDIT-ui_outline);
    background-color: var(--EDIT-box_bg_Foc);
}

#main-content textarea,
#main-content input.text {
      border: 2px solid var(--EDIT-border_color);
      background-color: var(--EDIT-box_bg);
      background-image: var(--hollow-image);
    -webkit-filter:brightness(95%);  
    filter: brightness(95%);  
    width: 100%;
    font-family: var(--EDIT-box_font);
}

#edit-page-title,
#edit-page-comments,
#edit-page-textarea{    
    line-height: 130%;
    padding: 5px 5px;   
    font-size: var(--EDIT-box_txt-size, 1.1rem);
    letter-spacing:0.5px;
}

/* 编辑框下小物件 */
.change-textarea-size {
  padding:var(--EDIT-box-btn_padding, 0 2.5rem);
}

.edit-help-34{
    display: var(--EDIT-help_display);
    grid-template-areas: 'a b''c d';
    margin-top: 0.5em;
    
}

.edit-help-34 a{
    font-family: var(--EDIT-help_font);
    letter-spacing: 0px;
        color: var(--color-paleblue);
        font-size: var(--EDIT-help_size, 0.9rem);
    font-weight: 400;
    letter-spacing:0.5px;
    margin-right:var(--EDIT-help_right, 0.5em);
}

.edit-help-34 a:first-child{
    grid-area: b;
}

.edit-help-34 a:last-child{
    grid-area: d;
}

.edit-help-34 a:before{
    content:"\f002";
    margin:0 0.2em 0 0.2em;
}
.edit-help-34 a:hover,
.edit-help-34 a:hover:before{
    text-decoration: none;
        color: var(--color-red);
}


/* ---------- 编辑补充信息 ---------- */

.edit-page-bottomtable{
   width:var(--EDIT-table_width);
}


.edit-page-bottomtable tbody td{
    line-height: 1.5rem;
}

.edit-page-bottomtable tbody tr {
    display: inline-grid;
    grid-gap: 0.5em 5%; 
    grid-template-columns: var(--EDIT-bottomtable_columns, 35% 60%);
    grid-template-rows: 50% 50%;
    margin-top:0.5em;
    align-items: center;
    width: 100%;
}


/*------------------ 修复保存卡死 || Fixed the saving box by W Asriel ------------------------- */

table.edit-page-bottomtable td {
  padding: 0 !important;
}



table.edit-page-bottomtable td:last-child {
   --lock-info_size:0.8rem;
    border: 2px dashed var(--color-grey-darkest) !important;
    background-color: var(--color-grey-pale) !important;
    border: 2px dashed var(--color-grey-darkest);
    width: 100%;
    order: var(--EDIT-bottomtable_tip-order, 0);
    padding: 0.3em 0.1em 0rem 0.5em !important;  
}

table.edit-page-bottomtable td div#lock-info {
    font-family: "Trebuchet MS";
    font-size: 0;
    background: none !important;
    border: none !important;
}

body[class="wait"] #odialog-shader-iframe,body[class="wait"] #odialog-shader {
    display:none!important
}
#odialog-container {
    position:fixed!important;
}
body[class="wait"] #odialog-container {
    z-index:-1
}
body[class="wait"] #odialog-container #owindow-1 {
    display:none!important
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area .edit-page-bottomtable td:last-child {
    background-color:rgb(var(--very-light-gray-monochrome,200,200,200)) !important;;
    border:2px solid rgb(var(--dark-gray-monochrome,0,0,0)) !important;
}

div#lock-info {
    content:var(--lock-info222);
    display:inline;
    font-size:var(--lock-info_size);
}

div#lock-info::before {
    content:var(--lock-info111);
    display:inline;
    font-size:var(--lock-info_size);
    white-space:pre-wrap
}
div#lock-info>strong {
    font-size:var(--lock-info_size);
}
div#lock-info>br {
    display:none
}
div#lock-info::after {
    content:var(--lock-info222);
    display:inline;
    font-size:var(--lock-info_size);
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::before {
    content:var(--lock-info333);
    display:inline;
    font-size:var(--lock-info_size);
    color:rgb(var(--gray-monochrome,33,33,33));
    white-space:pre-wrap
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size:0
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info>strong {
    font-size:0
}
body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size:0
}

/* ---------- 编辑操作按钮 ---------- */
.mz-btn,
div.buttons input:not(.btn-sm) {
  font-family: var(--EDIT-btn_font);
    padding: 0.5rem;
    color: var(--color-darkgrey);
    border-radius:10px;
    background:var(--color-light);
    border: 2px double var(--color-dark);
    margin:var(--EDIT-btn_margin, 0 0.6rem 0.5rem 0rem) ;
}


.mz-btn:hover,
div.buttons input:not(.btn-sm):hover{
    filter: brightness(95%);
    background-image: var(--icon-noise); 

}

/* ===============================
页脚 
================================*/


#footer {
 display: inline-grid !important;     
 grid-template-areas: 
     '. left  right'
     '. under  under';   
 grid-template-columns: 1rem max-content auto 1rem;
     font-size: 0;
         width: 100%;
     padding: 2px 0;
     font-family:   "Trebuchet MS", 'Nanum Gothic', var(--mono-font);     
}

 #footer a{
     font-size: var(--FOOT_size);
}

 #footer a[href="http://www.wikidot.com"]{
    grid-area: left;
    width: max-content;
     display: var(--FOOT-wiki_display, block);
}

 #footer a[href="http://www.wikidot.com"]:before{
    content: "Powered by ";
     color: var(--FOOT-line_cl);
        
}

#footer .options :is(a:first-child, a:nth-child(2)) {
display:var(--FOOT-wiki_display, inline); 
}


#footer .options {
  grid-area:  var(--FOOT-options_area, right);
    order: 2;
    width: max-content;
    text-align: center;
    float: unset;
    justify-self: right
}

#footer .options a:not(:last-child):after {
    content: '|';
    margin: 0 0.5em;
    color: var(--FOOT-line_cl);
}

#license-area{
   background:var(--LICENSE_bg);
   font-size:var(--LICENSE_size);  
   color: var(--LICENSE_cl);
}

#license-area a{
    word-break:  keep-all;
    white-space:   pre-wrap;
    font-size:var(--LICENSE-link_size)

}


/* ===============================
最近发帖 
================================*/

.thread-container .post .long .head .title a {
  font-weight: bold;
  font-size:0.9em;
    width: 100%;
    padding-bottom: 0.2rem;
    display: block;
}

.thread-container .post .long .head .info {
    display: flex;
    flex-wrap:  wrap;
    font-size: 0;
}

.thread-container .post .long .head .info * {
    font-size: initial;
}

.thread-container .post .long .head .info br + a + a,
.thread-container .post .long .head .info br + a,
.thread-container .post .long .head .info .odate  {
   margin: 0 0.1rem;
}



.thread-container .post .long .head .info br {
  display: none;
}

.thread-container .post .long .head .info .printuser{
    display:  inline-flex;
    flex-wrap: nowrap;
     margin: 0;
    margin-right: 0.5rem;
}


.thread-container .post .long .head .info br + a ,
.thread-container .post .long .head .info br + a + a  {
    text-decoration: none;
    padding:0 0.2rem;
    border-bottom: 1px solid transparent;   
}

.thread-container .post .long .head .info br + a:hover ,
.thread-container .post .long .head .info br + a + a:hover  {
    border-color:var(--accentColor)
}


.thread-container .post .long .head .info br + a +  a  {
padding-left: 0;
}


.thread-container .post .long .head .info br + a + a:before {
   content: '▷';
    color:var(--POST_BDcolor);
   border-bottom: 1px solid transparent;
    border-color: var(--POST_hdbg);
    padding-right: 0.3rem;
}


/*=====================================
其他小组件 / OTHER
=====================================*/


/* ----------- 辑录  ----------------*/

.mz-mirror{
     -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}

.mz-log-trigger{
  background-image: var(--mzlog-img);
  width: 2rem;
  height:auto;
  background-size: contain;
  background-repeat: no-repeat;
    background-position: center;
  margin: var(--mzlog-trigger-margin);
  cursor: help;
  margin: 0 0.1rem;
}
 
.mz-log-hovertip{
  position: absolute;
  z-index: -1;
  right:12%;
  max-width: 15rem;
  max-height:8rem;
  background-color: #ecebf0;
  background-color: var(--page-bg);
  padding:0.1rem 0.5rem;
  border: 4px double grey;
  opacity: 0;
        transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
 
.mz-log-trigger:hover + .mz-log-hovertip,
.mz-log-hovertip:hover{
  z-index: 1;
  opacity: 1;
        transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

.mz-log-content{
  margin-top:-0.5rem;
}


/* -----------窄屏隐藏----------------*/

@media (max-width: 520px) {
  .mob-hid{
     display:none;
  }
    .center-mg-mob{
       margin:0 auto;
   }
}

/* -----------悬浮目录----------------*/

.float-sticky{
  position: sticky;
   top: 0rem;
  right: 0;

}

.float-toc{
  float: right;
  position: absolute;
  right: -16rem;
}

@media (max-width: 1300px) {
.float-toc{
 display:none;
}
}

/*=====================================
调整其他组件 Modify the comportments
=====================================*/

/* ----------------- Author Label  -----------------------*/

#page-content .authorlink-wrapper {
 --swatch-tertiary-color:50,50,50,0.8;
  z-index: 0;
  margin-top: var(--author-top-adjust, 0rem);  
  margin-right: var(--author-right-adjust, 0.5em);
}

/* ----------------- Ayers' info tab  -----------------------*/

#main-content:has(.info-container) #page-title:before, 
#main-content:has(.info-container) #page-title:after {
    display: none   
}

.info-container {
  top:-1rem;
  position:relative;
}

/*  Anomaly Class Bar */
.w-cell > hr{
border-width: 2px;
border-color: transparent;
}

/*=====================================
外文站排版修复 fixed for other sites
=====================================*/

/* ---------- EN & ES ---------- */
.side-block.borradores + .side-block .menu-item:first-child,
.side-block.resources + div + .side-block .menu-item:first-child{
    display: inline-flex;
    font-size: var(--link-main-page);
    justify-content:  space-around;
    width: 100%;
    color: transparent;
    margin: auto;
    font-family:var(--page-tt-font);
    align-content: center;
    align-items: center;
}

.side-block.borradores + .side-block .menu-item:first-child a:before,
.side-block.resources + div + .side-block .menu-item:first-child a:before{
    display: inline-flex;
    content:"\f138";
    font-family: FontAwesome;
    align-items:center;
    padding-right: 0.6rem;
    font-size: 0.8em;
    color:var(--SB-link_txt);
}

.side-block.borradores + .side-block .menu-item:first-child a:hover:before,
.side-block.resources + div + .side-block .menu-item:first-child a:hover:before{
    color:var(--SB-link_txt_HOV);
}

/* -------- KO ---------- */
#side-bar:lang(ko) .menu-item :is(a[href="/"], a[href="/"] + div, a[href="/"] ~ a ) {
   font-size:var(--link-main-page);
   align-self: baseline;
}


/* ---------- VN ---------- */
#side-bar:lang(vi) .side-block a:is(.collapsible-block-link):before {
    display: none;
}

/* ---------- INT ---------- */

#content-wrap:lang(en){
  --SEARCH_top_MOB:0rem;  
  --ct_bg_open-menu-button:none; 
  --ct_col_m_sidebar-bg:transprent;
  --ct_brd_m_sidebar-right:transprent;
  --ct_bg_sidebar-item-main:none;
  --ct_bg_sidebar-item-default:none;
  --ct_bg_sidebar-item-home:none;
  --ct_bg_sidebar-collapse:none;
  --ct_bg_sidebar-expand:none;
  --ct_col_rate-primary:transparent;
}

 #side-bar .side-bar-container {
  padding:0;
  width: 100%;
  overflow: unset;
}

#side-bar .side-bar-container .menu-item.home a{
    font-family: var(--page-tt-font);
}

#side-bar .side-bar-container .hover {
  color: var(--color-darkred);
}

#side-bar .side-bar-container .menu-item {
    padding: 0;
    margin: 0;
}

#side-bar .side-bar-container .menu-item p::before{
    display: none;
}

#side-bar .side-bar-container  .collapsible-block-link::before{
    display: unset;
    color: var(--SB-fold_color);
    margin:0;
    margin-bottom: 2rem;
}

#side-bar .side-bar-container .scpnet-interwiki-frame{
    min-height: 10rem;
    width: auto;
    max-width: auto;
}

.scpnet-interwiki-wrapper{
    margin-left: 0;
    margin:0 -0.5rem ;
    width: auto;
}

.page-rate-widget-box:lang(en) span a{
  --ct_col_rate-primary:var(--RATE-btn_color);
}

[[/code]]
[!---------------------------
222222222222222222222222
ssssssssssssssssssssssssss
----------------------------]

[[code type="CSS"]]
/*
=====================================
    Magazine Theme
----------------------------------
    Interwiki Source
=====================================
*/

:root{
    --color-grey: #ecebf0;
    --accentColor: #613339;
    --color-light: #e8e8e8;
    --color-navy: rgb(20,21,39);
}


#interwiki .side-block img {
 filter: hue-rotate(220deg);
 -webkit-filter: hue-rotate(220deg);
}

#interwiki div.side-block:nth-child(4) > div:nth-child(1) > div:nth-child(1) img {
 filter: none;
 -webkit-filter: none;
}

#interwiki .side-block {
 border: solid 1px var(--accentColor);;
 border-radius: 0px;
 background: var(--color-light);
 box-shadow: none;
}

#interwiki .side-block .heading {
    margin-top: 0;
 padding-left: 5px;
 padding-top: 3px;
 height: 18px;
 color:var(--color-grey);
 background-color: var(--accentColor);
 background-size: cover;
 text-align: center;
}


#interwiki .side-block div.menu-item a:visited,
#interwiki .side-block div.menu-item a {
 color: var(--accentColor);
}


@media screen and (max-width: 230px){
    #interwiki .side-block {
        background: none;
        border: none;
  } 
#interwiki  .side-block div.menu-item a:visited,
#interwiki  .side-block div.menu-item a {
      color: var(--color-navy);
  }
}
[[/code]]
[!---------------------------
33333333333333333333333
----------------------------]
[[code type="CSS"]]
/*=====================================
    Magazine Theme
----------------------------------
    Extensions Source
=====================================*/


@import url(https://scp-wiki.wikidot.com/local--files/theme:magazine/IMG-source_base64.css);

:root{
--img-chew444: var(--MASK-chew222);
}

/* ==================
笔记本组件
====================*/

:root{
 --color-notepage: var(--color-light);
 --NOTEBOOK-bookmark_color:var(--color-dark);
  --color-header-footer:var(--color-notepage);

 --cl-a1:235,235,225,1;
  --cl-a2:222,210,220,1;
  --cl-a3:210,200,195,1;
  --cl-a4:25,25,25,1;
   --page-color:#f3f3f3;

/* 书本厚度描框 */
--box-bk-0:0.0625rem 0.0625rem 0 rgba(var(--cl-a1)), 0.125rem 0.125rem 0 rgba(var(--cl-a2)), 0.1875rem 0.1875rem 0 rgba(var(--cl-a2)), 0.25rem 0.25rem 0 rgba(var(--cl-a3)), 0.3125rem 0.3125rem 0 rgba(var(--cl-a2)), 0.375rem 0.375rem 0 rgba(var(--cl-a2)), 0.4375rem 0.4375rem 0 rgba(var(--cl-a2)), 0.8rem 0.8rem 0 rgba(var(--cl-a4));
/* 书籍拱起描边 */ 
  --NOTE-book-arch:drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4))) drop-shadow(0px -1px 0px rgb(var(--cl-a4)));

/**/    

  --NOTEPAGE-txt_size: 1.1rem; 
  --NOTEPAGE-p_padding-top:0em;  

    --NOTEPAGE-line_size: 1.5em;

    --NOTEPAGE-line-height: 1.5em; 
    --NOTEPAGE-line-height_half: calc(var(--NOTEPAGE-line-height) / 2);
    --NOTEPAGE-line-height_half-OPS: calc( 0em -  var(--NOTEPAGE-line-height_half));
--color-rowline: #c0c0c0;
    


    --NOTEPAGE-side_width: 1rem;
   --NOTEPAGE-side_height: 100%; 
    --NOTEPAGE-txt_border-size: 0;

    --MASK-chew_repeat: repeat;
    --MASK-chew_size:100%;

    /* 小 */
    --NOTE-quote_bg:#e9e8e0;
    --NOTE-quote_line: var(--NOTE-quote_bg);
    --NOTE-quote_width:2em;
    --NOTE-quote_shadow: drop-shadow(1px 1px 2px rgba(11,11,11,0.5)); 

    --NOTE-quote_bg-size:  calc(var(--NOTEPAGE-line_size) * 1.4) calc(var(--NOTEPAGE-line_size) * 1.4);
     --NOTE-quote_height:100%;
     --NOTE-quote-side_position: 0 0.5em;
    --NOTE-quote-side_clip: inset(0 0 0 25%);
     --NOTE-quote_padding_lr: 0.5em; 
     --NOTE-quote_padding: var(--NOTEPAGE-line-height_half) var( --NOTE-quote_padding_lr); 
    
    /* 书缝 */
        --NOTE-bookseam_bg: 55,55,55;
     --NOTE-bookseam_width: 2rem;
    --NOTE-bookseam_width-half: -1rem;

}

@media (max-width: 550px) {    
   .notebook-body, .notepage-body{
     --NOTEPAGE-txt_size: 0.9rem; 
     --NOTE-bookmark_display:none;
     --NOTE-bookseam_display:none;
    }  

    .mz-notebook-wrap {        
    --NOTEBOOK-grid:'left' 'right';
    --NOTEBOOK-grid-columns:auto;
    --NOTEBOOK-mid_display:none;
    --NOTEBOOK-bookmark_display:none;    
    --box-bk-0:none;
     --NOTEPAGE-side_width: 0.6rem;
     --NOTEBOOK_padding:0 0 1em 0;
        --NOTEBOOK_border:3px solid #bbb;
    }

    .notebook-right{
        --NOTEBOOK-bookmark_display:none;
        margin-top: calc( 0em - var(--NOTEPAGE-line-height) / 2);
    }

}

/*---------------------------
整本
--------------------------*/

.notebook-body{   
    display:grid;
     grid-template-areas:  var(--NOTEBOOK-grid,'left mid right');
    grid-template-columns: var(--NOTEBOOK-grid-columns, 50% auto 50%);
    
    -moz-box-shadow:  var(--box-bk-0);
    -webkit-box-shadow: var(--box-bk-0);
    -o-box-shadow: var(--box-bk-0);
    -ms-box-shadow: var(--box-bk-0);
    box-shadow: var(--box-bk-0);
    background-color: #f3f3f3;
    background-color: var(--page-color);
    border:var(--NOTEBOOK_border, 1px solid #cccccc); 
    background-color: var(--color-notepage);
    padding: var(--NOTEBOOK_padding, 0);
}


.notebook-left{
    grid-area: left;
}

.notebook-mid{
    grid-area: mid;
    width: 0.15em;
    height: 100%;
    background-color: var(--color-dark);
    display: var(--NOTEBOOK-mid_display, inline-grid);
    grid-template-rows: 100% 0%;
}

.notebook-right{
    grid-area: right;
}

.notebook-body .notepage-main{
   margin: 0 var(--NOTEPAGE-side_width) var(--NOTEPAGE-side_width) var(--NOTEPAGE-side_width); 
    height: 100%;
    width: calc(100% - var(--NOTEPAGE-side_width) * 2 );
    align-self: flex-start;
    align-items: flex-start;
    align-content: flex-start
}

.notebook-mid:before{
     content: ' ';
    display: inline-grid;     
}

.notebook-mid:after{
   content: '▲';
    display: inline-grid;
    position: relative;
    width: 0rem;
    height: 0rem;
    left:-0.55rem;
    bottom:-0.4rem;
   color: var(--page-bg);
    font-size: 1.2rem;
    line-height: 0;

   -webkit-filter: var(--NOTE-book-arch);
    filter: var(--NOTE-book-arch);  
}

.mz-notebook-wrap .notebook-body:before{
    content: "";
    display:  var(--NOTE-bookseam_display, inline-grid);
    grid-area: right;
    width: var(--NOTE-bookseam_width);
    margin-left: var(--NOTE-bookseam_width-half);
    position: relative;
    background-image: linear-gradient(to left,transparent 0%, transparent 20%, rgba(var(--NOTE-bookseam_bg),0.1) 40%, rgba(var(--NOTE-bookseam_bg),0.2) 50%, rgba(var(--NOTE-bookseam_bg),0.1) 60%, transparent 80%, transparent 100%);
}

.notebook-noseam{
    --NOTE-bookseam_display:none;
}


/*---------- 书签 --------------*/
.notebook-bookmark{
    display:grid;
    grid-template-areas: 'mid ';
}

.notebook-bookmark:before{
    grid-area: mid;
    content: ' ';
    display:var(--NOTEBOOK-bookmark_display,block);
    position: relative;
    width: var(--NOTEBOOK-bookmark_width, 1.2rem);
    height:var(--NOTEBOOK-bookmark_height, 20rem);
    max-height: 40%; 
    background-color: var(--NOTEBOOK-bookmark_color);
    margin-top: -1px;
    margin-left:var(--NOTEBOOK-bookmark_left, 90%);
    z-index: 2;

-webkit-clip-path:var(--NOTEBOOK-bookmark-clip);
clip-path: var(--NOTEBOOK-bookmark-clip);

    --NOTEBOOK-bookmark-clip:polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 100%);

}

/*---------------------------
单页与边缘
--------------------------*/

.mz-notepage-wrap{
    width: 100%;
    margin: 0 auto;
   -webkit-filter:drop-shadow(1px 2px 2px #333);
    filter: drop-shadow(1px 2px 2px #333);
    height: auto;
}

.notepage-body{
 display: inline-grid;
    grid-template-areas:
        'header header header'
        'left top  right'
        'left mid right'
        'left bottom right'
        'footer footer footer';
    grid-gap: 0;
    
}

.notepage-body:before,
.notepage-body:after{
        content: ' ';
    width: var(--NOTEPAGE-side_width);
    height: var(--NOTEPAGE-side_height); 
    -webkit-mask-position: left;
            mask-position: top;
     -webkit-mask-repeat:var(--MASK-chew_repeat);
         mask-repeat: var(--MASK-chew_repeat);
     -webkit-mask-size: var(--MASK-chew_size);
         mask-size:var(--MASK-chew_size);
            background-color: var(--color-notepage);
}

.notepage-body:before{
    grid-area: var(--NOTEPAGE-before_area,left);  
    -webkit-mask-image:var(--MASK-chew-before);
            mask-image:var(--MASK-chew-before);
    margin: var(--MASK-chew-before_margin);
    display: var(--NOTEPAGE-before_display, inherit);  
}

.notepage-body:after{
    grid-area:var(--NOTEPAGE-after_area,right);  
            -webkit-mask-image:var(--MASK-chew-after);
            mask-image:var(--MASK-chew-after);
        margin: var(--MASK-chew-after_margin);
    display: var(--NOTEPAGE-after_display, inherit);  
}

.mz-notepage-wrap :is(.blockquote, blockquote):before{
    content: " ";
    display: block;
    position: absolute; 
    margin:-2.5em 0em 0 -0.5em;
    width: 1.5em;
    height: 6em;
    background: var(--NOTE-tap_bg, rgba(55,55,55,0.1));
    transform: rotate(45deg);
    border: var(--NOTE-tap_bd, rgba(33,33,33,0.4) solid 1.5px);
}

/* 撕痕 */
.chew-left .notepage-body:before{
   --MASK-chew-before: var(--MASK-chew);
    --NOTEPAGE-before_display:inline-grid;
}

.chew-right .notepage-body:after{
   --MASK-chew-after: var(--MASK-chew);
   --NOTEPAGE-after_display:inline-grid;
   -webkit-transform:scale(-1);
    transform: scale(-1);
}

.chew-bottom,
.chew-top{
    --NOTEPAGE-txt_border-size:0.8em;
    --NOTEPAGE-before_area:header;
    --NOTEPAGE-after_area:footer;
    --NOTEPAGE-side_width: 100%;
   --NOTEPAGE-side_height: 1rem; 
     --MASK-chew_repeat: repeat-x;
    --MASK-chew_size:14rem;
    --NOTEPAGE-before_display:none;
    --NOTEPAGE-after_display:none;
    --NOTEPAGE-header_font-size:0;
    --NOTEPAGE-footer_font-size:0; 

    --NOTE-quote_width:100%;
    --NOTE-quote_bg-size:3em;
    --NOTE-quote_height:3em;
     --NOTE-quote-side_clip:inset(0 0 25% 0);
   --NOTE-quote-side_position: 0em 0;
  --NOTE-quote-side_repeat:repeat-x;
}

.chew-top {
        --NOTEPAGE-before_display:inline-grid;
        --MASK-chew-before_margin:0px 0 -1px 0;
        --NOTEPAGE-footer_font-size:0.8em;
        --NOTEPAGE-header_display:none;

}

.chew-bottom {
     --MASK-chew-after_margin: -1px 0 0 0;  
    --NOTEPAGE-after_display:inline-grid;
    --NOTEPAGE-header_font-size:1.5em;
}

.chew-bottom .notepage-body:after{
    --MASK-chew-after: var(--MASK-chew222);
}

.chew-top .notepage-body:before{
    --MASK-chew-before: var(--MASK-chew222);
    transform: scaleY(-1);
}

/*---------- 头尾 --------------*/

.notepage-header{
    grid-area: top;  
    min-height:var(--NOTEPAGE-header_min-height, 1.5rem);
    height: var(--NOTEPAGE-header_height);
    background-color:var(--color-header-footer);
    display: var(--NOTEPAGE-header_display, inherit);  
      font-size: var(--NOTEPAGE-header_font-size, inherit);    
}

.notepage-footer{
    grid-area: bottom; 
    min-height:var(--NOTEPAGE-footer_min-height, 1.5rem);
    height: var(--NOTEPAGE-footer_height);    
    width: 100%;
    background-color: var(--color-header-footer);
    display: var(--NOTEPAGE-footer_display, inherit);  
    font-size: var(--NOTEPAGE-footer_font-size, inherit);  
}

/*---------- 正文 --------------*/
.notepage-main:before, .notepage-main:after{
  content: ' ';    
    height: 100%;
}
.notepage-main{
    grid-area: mid;   
    display: var(--NOTE-main_display, inline-grid);
  --NOTEPAGE-rowline :linear-gradient(to top ,var(--color-rowline) 0em, var(--color-rowline) 0.05em, transparent 0.06em, transparent 0.16em,#c0c0c0 0.17em, var(--color-rowline) 0.22em, transparent 0.25em,transparent 100%);
  --NOTEPAGE-rowline_single:linear-gradient(to top , var(--color-rowline) 0em,  var(--color-rowline) 0.12em, transparent 0.15em); 
}

.notepage-main :is(.blockquote, blockquote),
.notepage-main{
    white-space:normal;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-repeat: repeat;
    background-position: 0rem 0;
    background-size: 100% var(--NOTEPAGE-line_size);
    background-image: var(--NOTEPAGE-rowline);
    background-color: var(--color-notepage);
    padding-top: var(--NOTEPAGE-p_padding-top);
    border-left: var(--NOTEPAGE-txt_border-size)  var(--color-notepage) solid;
    border-right: var(--NOTEPAGE-txt_border-size)   var(--color-notepage) solid;
    color:var(--color-bookpage-txt, inherit);
            font-size: var(--NOTEPAGE-txt_size); 
}

#page-content .notepage-main p{
        font-size: var(--NOTEPAGE-txt_size);
        line-height: var(--NOTEPAGE-line-height); 
        padding:var(--NOTEPAGE-txt_padding, 0 0.5em);
        margin-top: var(--NOTEPAGE-line-height);
  margin-bottom: 0
}

/*-------------- 洞洞书页 ------------------*/
.mz-notequote-wrap{
     --NOTE-quote_line: var(--color-grey-darkest);
    --NOTEPAGE-footer_display:inline-grid;
    --color-header-footer: var(--NOTE-quote_bg);
    --NOTEPAGE-header_min-height:1.2em;
    --NOTEPAGE-footer_min-height:1.2em;
        --NOTEPAGE-before_display:none;
        --NOTEPAGE-after_display:none;
   --MASK-chew: none;
    --MASK-chew222:none;
    --page-color:red;

}

.mz-notequote-wrap .notepage-main,
.notepage-main :is(.blockquote, blockquote){
    background-color:  var(--NOTE-quote_bg);
   background-image: linear-gradient(to top ,var(--NOTE-quote_line) 0%, var(--NOTE-quote_bg) 10%);        
    border: 0;
    margin-top: var(--NOTEPAGE-line-height);
    margin-bottom: 0;
    background-position: 0 var(--NOTEPAGE-line-height_half);
    padding: var(--NOTE-quote_padding);
    -webkit-filter: var(--NOTE-quote_shadow);
            filter: var(--NOTE-quote_shadow);
}

.mz-notequote-wrap .notepage-body:before,
.mz-notequote-wrap .notepage-body:after,
.mz-notequote-wrap :is(.blockquote, blockquote):before{
   content: '  ';
    width:var(--NOTE-quote_width);
    height: var(--NOTE-quote_height);
    margin: var(--NOTEPAGE-line-height_half-OPS) 0  var(--NOTEPAGE-line-height_half-OPS) var(--NOTE-quote_margin-left);
    position: relative;
    float: left;
    background-image: radial-gradient(transparent 38%,var(--NOTE-quote_bg) 41%); /* 标准的语法（必须放在最后） */
     background-size:var( --NOTE-quote_bg-size);
     background-position: var( --NOTE-quote-side_position);
    background-repeat: var( --NOTE-quote-side_repeat); 
}

.notepage-main :is(.blockquote, blockquote){
    --NOTE-quote_width:var(--NOTE-inerquote_width, 1.5em);
    --NOTE-quote_height: calc(100% + var(--NOTEPAGE-line-height_half) * 2);
    --NOTE-quote_bg-size:var( --NOTE-quote_width) var( --NOTE-quote_width);
    --NOTE-quote-side_repeat:repeat-y;
    --NOTEPAGE-txt_padding:0;
     --NOTE-quote-side_position:auto;
    --NOTE-quote_margin-left: calc(0em - var(--NOTE-quote_width) - var(--NOTE-quote_padding_lr) );  
}

.mz-notequote-wrap .notepage-main {
            margin-top: 0;
    -webkit-filter: none;
            filter: none;   
}

.mz-notequote-wrap .notepage-body{
        -webkit-filter: var(--NOTE-quote_shadow);
          filter: var(--NOTE-quote_shadow);
}

.mz-notequote-wrap .notepage-body:before,
.mz-notequote-wrap .notepage-body:after{
    margin: 0    ;
    float: none;
    font-size: var(--NOTEPAGE-txt_size); 
    background-color: transparent;
-webkit-clip-path:  var(--NOTE-quote-side_clip);
clip-path: var(--NOTE-quote-side_clip);
}

.mz-notequote-wrap .notepage-body:before{
    display: var(--NOTEPAGE-before_display, inline-grid);
}
.mz-notequote-wrap .notepage-body:after{
    display: var(--NOTEPAGE-after_display, inline-grid);
}
/*------------ 其他 --------------*/

#page-content .notepage-main :is(.blockquote, blockquote) p{
   margin: 0;
}

.notepage-main hr{
    border: none;
    height:  1px;
    margin: 0 auto;
    position: relative;
    top: 0.5em;
    box-shadow: 0 0.2em 0px 1px var(--color-dark);
    width: 90%;  
}


.notepage-main .mz-note :is(.blockquote, blockquote){
    -webkit-filter: none;
    filter: none;
    background-image: none;
    background-color: var(--QUOTE_bg222);
    border: 2px dashed var(--QUOTE_border);
    margin-top: 0
}

.notepage-main ul{
    margin: 0;
}
.notepage-main ul li{
    line-height: var(--NOTEPAGE-line-height);  
}
/*------------ 扩展 --------------*/

.rowline-single .notepage-main, .notepage-main.rowline-single{
        background-image: var(--NOTEPAGE-rowline_single);  
}

.rowline-none, .rowline-none *{
        background-image: none;  
}

 /* ====================
对话框
===================== */

.mz-talking-wrap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
 /* 变量 */
    --tk-img-width:5rem;
    --tk-img-heigh:var(--tk-img-width);
    --tk-img-margin:0rem 1.2rem;
    --tk-img-left:var(--icon-scp);
    --tk-img-right:var(--icon-magazine);
    --tk-delta-width:0.5rem;
    --tk-delta-width:0.5rem;
    --tk-box-bg: var(--page-bg);
    --tk-txt-padd:1rem;
    --tk-delta-size:2rem;
    --tk-delta-horiz: -0.5rem; /* 似乎低配版chrome无法用负数margin实现该功能*/
    --tk-delta-verti: -1rem;
    --tk-delta-path: polygon(50% 0, 100% 0, 100% 50%, 0 100%);
    --tk-bd-weight:1px;
    --tk-bdops-weight:-1px;
    --tk-img-out:calc(var(--tk-img-heigh) * -0.8);
    --tk-img-out-ops:calc(var(--tk-img-out) * -1);
    
    --line-border-shadow:
        drop-shadow(var(--tk-bd-weight) 0px 0px var(--shadow-line)) drop-shadow(0px var(--tk-bd-weight) 0px var(--shadow-line)) 
        drop-shadow(var(--tk-bdops-weight) 0px 0px var(--shadow-line)) drop-shadow(0px var(--tk-bdops-weight) 0px var(--shadow-line));  /* 放这里让变量可以直接在style中修改 */ 
}

.mz-talking-wrap :is(.talking-left,.talking-right){
    display: inline-flex;
    width: 100%;
    margin-bottom: var(--tk-delta-size);
}

.talking-img{
    margin: var(--tk-img-margin);
    min-height: var(--tk-img-heigh);
    min-width:  var(--tk-img-width);
    background-image: var(--tk-img-left);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;  
}

.talking-right .talking-img{
    background-image: var(--tk-img-right);
}

.mz-talking-wrap .talking-img.no-image, 
.mz-talking-wrap .no-image .talking-img,
.mz-talking-wrap.no-image  .talking-img{
    background-image: none;
}

.talking-box p:first-child{
    margin: 0;
}

#page-content .talking-box{
        max-width: 40%;
}

.talking-box{
    display:flex;
    flex-wrap: wrap;
    max-width: 60%;
    padding:var(--tk-txt-padd);
    background-color: var(--tk-box-bg);  
    -webkit-filter: var(--line-border-shadow);
    filter: var(--line-border-shadow);
    align-self:   center;
}

.talking-box::after,
.talking-box:before{
   content: ' ';
   width: var(--tk-delta-size);
   height: var(--tk-delta-size);
   display: inline-flex;
   position: absolute;
    align-self: end;   
    background-repeat: no-repeat;

   background-color: inherit;
  -webkit-clip-path:var(--tk-delta-path);
    clip-path: var(--tk-delta-path);
    z-index: -1;
 
    left: var(--tk-delta-horiz);
    bottom:var(--tk-delta-verti);
}

.talking-box::after{
    display: none ;
}

.talking-right, .talking-right .talking-box{
    flex-direction: row-reverse;
}

.talking-right, .talking-right .talking-box p{
   text-align: left;
    flex-basis: 100%;
}


.talking-right .talking-box:before, 
.talking-right .talking-box:after{
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    left: unset;
    right: var(--tk-delta-horiz);
}

.talking-center{
    margin: 0 auto;
    display:flex;
    align-items:  center;
}

.talking-center *{
    margin: 0 0.2rem;
}

/*------ 手机 -------*/

@media (max-width: 500px) {
    .talking-img{
        display: none;
    }
    
    .mz-talking-wrap div:is(.talkimg-upper, .talkimg-below){
        margin: 0 0 var(--tk-delta-size) 0;
    }

   #page-content .talking-box{
        max-width: 80%;
   }
}


/* 方向 */
.talking-box.talkbox-righttop:before,
.talking-box.talkbox-lefttop:before, 
.talking-box.talkbox-righttop:after,
.talking-box.talkbox-lefttop:after {
     align-self: start;
    
    right: var(--tk-delta-horiz);
    top:var(--tk-delta-verti);
    bottom:unset;
    
     -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
}

.talking-box.talkbox-righttop:before,
.talking-box.talkbox-righttop:after{
   -moz-transform:scale(-1,-1);
    -webkit-transform:scale(-1,-1);
    -o-transform:scale(-1,-1);
     transform:scale(-1,-1);
    
    left:unset;
    right: var(--tk-delta-horiz);
    top:var(--tk-delta-verti);
    bottom:unset;
}

.talkbox-inby{
     align-self: start;
}

.talkbox-inby::before,
.talkbox-inby::after {
       -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);

    left: var(--tk-delta-verti);
    bottom:0;
}

.talkbox-inby.talkbox-lefttop::before,
.talkbox-inby.talkbox-lefttop::after{
     transform:scaleY(1);
    left:var(--tk-delta-verti);
    right: unset;
    top:0;
    bottom:unset;
}

.talking-right .talkbox-inby::before, 
.talking-right .talkbox-inby::after{
    -moz-transform:scale(-1);
    -webkit-transform:scale(-1);
    -o-transform:scale(-1);
   transform:scale(-1);
    left:unset;
    right:var(--tk-delta-verti);
    top:unset;
    bottom:0;
}

.talkbox-inby.talkbox-righttop::before,
.talkbox-inby.talkbox-righttop::after {
   -moz-transform:scale(-1,1);
    -webkit-transform:scale(-1,1);
    -o-transform:scale(-1,1);
        transform:scale(-1,1);
    left:unset;
    right:var(--tk-delta-verti);
    top:0;
    bottom:unset;
}

/* 内折 */
.talkbox-round.talkbox-inby{
   --tk-delta-verti: var(--tk-delta-horiz)
}

/*------ 自定义 -------*/

.talkbox-round{
    border-radius:40px;
}

.talkbox-dark, div:is(.talking-box:before, .talking-box:after) {
   background-color: var(--shadow-line);
   color: var(--page-bg);
}

.talkbox-doubleline{
    -webkit-filter: var(--RATE-btn_filter);
    filter: var(--RATE-btn_filter);
}

/* 图片位置 */
.mz-talking-wrap .talkimg-below {
    margin-bottom: var(--tk-img-out-ops);
}
.mz-talking-wrap .talkimg-upper {
    margin-top: var(--tk-img-out-ops);
}

.talkimg-below .talking-img{
    background-position: bottom center;
    position: relative;
    bottom: var(--tk-img-out);
}

.talkimg-upper .talking-img{
    background-position: top center;
    position: relative;
    top: var(--tk-img-out);
}

/* 思考气泡 */
.talkbox-bubles.talking-box {
    margin-bottom: 1.5rem 
}

.talkbox-bubles.talking-box::after {
display: block;
}

.talkbox-bubles.talking-box::before,
.talkbox-bubles.talking-box::after{
 --tk-delta-path: polygon(0 74%, 41% 74%, 41% 100%, 0 100%);
}

.talkbox-bubles.talking-box::before {
    --tk-delta-path:polygon(0 65%, 40% 65%, 39% 100%, 0 100%);
    --tk-delta-size:3rem;
    --tk-delta-horiz: -0.5rem;
    --tk-delta-verti: -1rem;
}

.talkbox-bubles.talking-box::after {
    --tk-delta-path:polygon(0 65%, 40% 65%, 39% 100%, 0 100%);
    --tk-delta-size:2rem;
    --tk-delta-horiz: -1.2rem;
    --tk-delta-verti: -2rem;
}

.talkbox-round.talkbox-bubles.talking-box::before {
    --tk-delta-path:circle(28% at 50% 50%);
}

.talkbox-round.talkbox-bubles.talking-box::after {
    --tk-delta-path:circle(20% at 50% 50%);
}

 /* ====================
翻页
===================== */

.mz-tab .yui-navset{
     filter: drop-shadow(-1px 0px 1px var(--tab-shadow)) drop-shadow(1px 1px 1px var(--tab-shadow));
}

.mz-tab  .yui-navset .yui-content {
    border: none;
    border-top: solid 4px var(--accentColor);
    color:  var(--tabMain-txt);
    background-color: var(--tabMain-bg);
    display: flex;
flex-wrap:wrap;

}

.mz-tab  .yui-navset .yui-content div[id*="wiki-tab"]{
    width: 100%;
    margin: 0 -0.2rem 0 -0.2rem;
    padding: 1rem;
}

.mz-tab  .yui-navset .yui-content:after{
     display: block;
    content: '  ';
    border: none;
    border-top: solid 0px transparent;
    padding:0rem 0;
     margin: 0;
    color: #ece3e3;
    width: 100%;
    height: 10rem;
           height:auto;
    background-color: var(--tabMain-bg);

 -webkit-mask-repeat: repeat-x;
         mask-repeat: repeat-x;
 -webkit-mask-size: 10rem;
         mask-size: 12rem;
    -webkit-mask-image:var(--img-chew444);
    mask-image:var(--img-chew444);
    -webkit-mask-position: bottom;
   mask-position:bottom;
     position: relative;
margin:0 0 -1rem 0;
    z-index: 1;
     top:0rem;

}

/**/
.mz-tab  .yui-content div[style*="display: none;"][id*="wiki-tab"]{
transform:rotateX(-180deg);    
    left: 0rem;

    position: absolute;
    opacity: 0;
    display: block !important;
    top:0%;
        transform-origin:  50% 0;  
height: 0;
    visibility:  hidden;
    border: 1px solid rgba(33,33,33,.8);
     border-top:0px solid rgba(33,33,33,0);
    background: #fffcf8;
    transition:   all 0s;
    height: 0 ;

   z-index: -0 !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

}

.mz-tab  .yui-content div[style*="display: block;"][id*="wiki-tab"]{
transform:rotateX(0deg);
        left: 0rem;
        position:     relative;
    top:0;
    transform-origin:  50% 0;   
z-index:0;
height: auto;
background:  var(--tabMain-bg);
    border: 1px solid rgba(33,33,33,0);
        transition:   all 1s;
transform-style: preserve-3d;
}

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


[!---------------------------
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
----------------------------]

[[div class="float-sticky"]]
[[div class="float-toc"]]
[[toc]]
[[/div]]
[[/div]]

+ Usage

This is a sigma9 theme created by [[*user etinjat]], which is inspired by  [[[theme:newspaper | Newspaper Theme]]] and  [[*user hoah2333]]'s [https://scp-wiki-cn.wikidot.com/semimonth-202108-02 old Semimonth Theme] (Now it looks [http://scp-wiki-cn.wikidot.com/semimonth-202112-01 better]). And the magazine logo on sidebar is made by  [[*user Kcorena]]. 

+++* To use this theme, put the following syntax on any page:

[[div class="blockquote"]]
@@[[include :scp-wiki:theme:magazine]]@@
[[/div]]

+++* Custom Options：

[[div class="blockquote no-sel"]]
@@[[include :scp-wiki:theme:magazine@@
 |collapsible-sidebar=@@---]@@ {{To use the collapsible sidebar.}}
|content-width= {{Change the width of main content.}}
|header-title= "texts" {{Change the big header title [[footnote]] It should be enclosed with "quotation marks" [[/footnote]].}}
|header-subtitle= "texts" {{Change the small header subtitle}}
|mob-title= "texts" {{Change the header title when in narrow screen //(like phones)//.}}
|mob-subtitle= "texts" {{Header subtitle when in narrow screen.}}
|logo-image=url('yourlink') {{Logo on header //(Hidden by default)//.}}
|logo-image-mob=url('yourlink')  {{Header Logo in narrow screen //(Default to the Foundation logo)//.}}
|logo-sidebar=url('yourlink')  {{Logo on sidebar //(Default to the magazine logo)//. }}
|sidebar-content= "texts" {{Text under the sidebar logo.}}
|page-title= none   {{Remove page-title.}}
|title-underlines = none   {{Remove underlines of page-title.}}
|title-orn-content= "★" {{The ornament below page-title}}
|title-orn-size= 1.5rem [[footnote]]   It is equivalent to removing the ornament when you set 0.  [[/footnote]]
|title-orn-color= #542429
|title-orn-width= 2rem[[footnote]]  The width of the blank space behind the ornament.  [[/footnote]]
@@]]@@
[[/div]]

+++* Add background image

[[div class="blockquote no-sel"]]
@@[[module css]]@@
#container {
@@--hollow-image:  url('YOUR IMAGE LINK');@@
@@background: var(--hollow-image) center 0 repeat;@@
}

#content-wrap  #side-bar::before,
#content-wrap  #side-bar {
background-color: transparent ;
}


@@[[/module]]@@
[[/div]]

* **PS：**For many calc function are used, so if you want to change the values of elements, please modify the variables in {{:root}} and use {{rem}} as the unit.

@@@@
@@@@
@@@@


+ Examples


[[div class="mmposter-wrap" ]]

[[div class="mmposter-cell" ]]

+* First Title

++* Second Title

+++* Third Title

++++* Fourth Title

+++++* Fifth Title

++++++* Sixth Title




[[/div]]


[[div class="mmposter-cell"]]


[[>]]
**Rating**:
[[module Rate]]
[[/>]]

[[>]]
**Rating w/ Credit Module:**
[[/>]]

[[include :scp-wiki:info:start]]
Info about your page.
[[include :scp-wiki:info:more]]
More information about your page.
[[include :scp-wiki:info:end]]


[[/div]]

[[/div]]


 **bold** | //italic// | __underline__ | --strikethrough-- | {{Mono text}} ^^superscript^^,,subscript,,



[[collapsible show="+ A collapsible" hide="-  Something inside the collapsible"]]


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


* [# Unvisited Link ]
 * [https://scp-wiki.wikidot.com A link you probably visited]
 * [[a href="#" class="newpage"]]Empty link[[/a]]

++* Fonts
[[div style="font-size:180%;"]]
Header title：[[span style="font-family:var(--header-tt-font);"]]IM Fell English[[/span]]

Page title：[[span style="font-family:var(--page-tt-font);"]]DM Serif Display[[/span]]

Body：[[span style="font-family:var(--page-font);"]]Roboto Slab[[/span]]

Handwriting：[[span style="font-family:var(--handwriting-font);"]]Yesteryear[[/span]]

Mono：{{Courier New}}

Teletype：[[span style="font-family:var(--teletype-font);"]]Special Elite[[/span]]
[[/div]]

[[/collapsible]]




@@ @@


~~~~


@@@@
@@@@

+ Image block

[[div class="mmposter-wrap" ]]
[[div class="mmposter-cell" ]]


[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|caption= Standard Image Block
|width=280px
]]


[[/div]]


[[div class="mmposter-cell"]]

Wrap the following div codes on 
the outside of the standard image block
to use the special styles below:

[[div class="blockquote"]]
@@[[div class="mz-img-wrap " ]]@@
@@[[include component:image-block@@
name=
|width=
|caption=
|align=
]]
@@[[/div]]@@
[[/div]]
[[/div]]

[[/div]]


~~~~


@@@@
@@@@

[[div style="display:flex;flex-wrap: wrap; justify-content:space-around; "]]
[[div class="mz-img-wrap" ]]
[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|width=120px
|caption=
**Image**
class="mz-img-wrap"
]]
[[/div]]

[[div class="mz-img-wrap img-frame" ]]
[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|width=120px
|caption=
**Image**
class="mz-img-wrap img-frame"
]]
[[/div]]


[[div class="mz-img-wrap img-b3d" ]]
[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|width=120px
|caption=
**Image**
class="mz-img-wrap img-b3d"
]]
[[/div]]


[[div class="mz-img-wrap img-border" ]]
[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|width=120px
|caption=
**Image**
class="mz-img-wrap img-border"
]]
[[/div]]


[[div class="mz-img-wrap img-border img-frame" ]]
[[include component:image-block
name=https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_magazine.svg
|width=120px
|caption=
**Image**
class="mz-img-wrap img-border img-frame"
]]
[[/div]]

[[/div]]

~~~~


@@@@
@@@@




+ Horizontal rule 


A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

@@@@
@@@@

------


@@@@
@@@@

[[div class="mz-hr hr-contract" ]]
------
[[/div]]
[[div class="mz-hr hr-solid" ]]
------
[[/div]]
[[div class="mz-hr hr-double" ]]
------
[[/div]]
[[div class="mz-hr hr-dotted" ]]
------
[[/div]]
[[div class="mz-hr hr-contract hr-solid" ]]
------
[[/div]]



@@@@
@@@@



[[div class="mmposter-wrap" ]]
[[div class="mmposter-cell" ]]

**Wrap a div block, and add classname：**
* **Reduce hrs' size：**hr-contract
* **Change hrs to solid ：**hr-solid
* **To dotted：**hr-dotted
* **Double line:** hr-double

[[/div]]
[[div class="mmposter-cell"]]

[[div class="blockquote "]]
@@[[div class="mz-hr hr-contract hr-solid" ]]@@

@@------@@

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

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



[[div class="mz-hr" ]]
[[image https://scp-wiki.wikidot.com/local--files/theme:magazine/ICON_eagle.svg width="5rem" class="mz-mirror"]]

------

{{,,#,,}}

Woohoo

{{,,#,,}}

------

{{,,#,,}}
[[module Rate]]
[[/div]]


[[div class="mmposter-wrap" ]]
[[div class="mmposter-cell" ]]

**Add stuff to one or both sides of the horizontal rule(s):**
* Leave a blank text line between each thing.
* Horiz rules can be added repeatedly.
* Notice that not to add so much stuff to avoid a pile on the narrow screen.

[[/div]]


[[div class="mmposter-cell"]]
[[div class="blockquote no-sel"]]

@@[[div class="mz-hr" ]]@@

@@[[image xxxx ]]@@

@@------@@

@@{{,,#,,}}@@ {{Convert to a vertical line.}}

@@text@@ 

@@[[module Rate]]@@

@@------@@

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



[[div class="mz-log-wrap"]]
[[module ListPages  category="*" limit="1" fullname="="]]
[[div  class="mz-log-list"]]
[[div class="mz-hr" ]]

%%title%% 

{{,,#,,}}

------
[[div class="mz-log-trigger"]]
[[/div]]

[[div class="mz-log-hovertip"]]
**Author：**%%created_by%%

**Date：**%%created_at|%m-%d-%Y%%

**Tags：**%%tags%%
[[/div]]
[[/div]]
[[div class="mz-log-content"]]

[[div class="mmposter-wrap mmposter-semi" ]]
[[div class="mmposter-cell" ]]

Modules  can be used for a variety of things. Like this:

[[div class="blockquote"]]
@@[[include :scp-wiki:theme:magazine@@
|page-title= none 
@@]]@@
[[/div]]

[[div class="blockquote"]]
@@[[div class="pgtt-module  mz-hr" ]]@@
@@[[module ListPages  category="*" limit="1" fullname="="]]@@
%__#__%title%%
@@[[/module]]@@
@@{{,,#,,}}@@
@@------@@
@@{{,,#,,}}@@
@@[[image source]]@@
@@[[/div]]@@
[[/div]]


[[/div]]


[[div class="mmposter-cell"]]


OR MORE!
Move your mouse over the picture to see the hovertip box.

[[div class="blockquote no-sel"]]

@@[[div class="mz-log-wrap"]]@@
@@[[module ListPages  category="*" limit="1" fullname="="]]@@
@@[[div  class="mz-log-list"]]@@
@@[[div class="mz-hr" ]]@@
%__#__%title%%
@@{{,,#,,}}@@
@@------@@
@@[[div class="mz-log-trigger"]]@@
@@[[/div]]@@
@@[[div class="mz-log-hovertip"]]@@
@@**Author：**@@%__#__%created_by%%
@@**Date：**@@%__#__%created_at|%m-%d-%Y%%
@@**Tags：**@@% %tags%%
@@[[/div]]@@
@@[[/div]]@@
@@[[div class="mz-log-content"]]@@
OR MORE!
@@[[/div]]@@
@@[[/div]]@@
@@[[/module]]@@
@@[[/div]]@@
[[/div]]
[[/div]]
[[/div]]
[!---------------------------------]


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


@@@@
@@@@


+ Blockquote


> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes[[footnote]]

FOOTENOTE!

[[/footnote]]


++* Other blockquote
[[div class="mmposter-wrap mmposter-blockquote" ]]
[[div class="mmposter-cell" ]]

[[div class="mz-blockquote" ]]
@@[[div class="mz-blockquote"]]@@

mz-blockquote

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



[[/div]]
[[div class="mmposter-cell"]]


[[div class="mz-board" ]]
@@[[div class="mz-board" ]]@@

mz-board

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




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



@@@@

[[div class="mmposter-wrap mmposter-blockquote" ]]
[[div class="mmposter-cell" ]]

[[div class="mz-cover"]]
@@[[div class="mz-cover"]]@@
normal text
{{@@{{teletype text}}@@}}
@@[[/div]]@@

[[/div]]
[[/div]]
[[div class="mmposter-cell"]]

[[div class="mz-paper"]]
@@[[div class="mz-paper"]]@@

mz-paper

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

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

[[div class="mmposter-wrap mmposter-blockquote" ]]
[[div class="mmposter-cell" ]]

[[div class="mz-textquote"]]
@@[[div class="mz-textquote"]]@@
mz-textquote
@@[[/div]]@@
[[/div]]

[[/div]]
[[div class="mmposter-cell"]]

[[div class="mz-outbox"]]
[[div class="mz-innerbox"]]
@@[[div class="mz-outbox"]]@@
@@[[div class="mz-innerbox"]]@@
text
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
[[/div]]

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




[[div class="mob-hid"]]
++* Composite

[[div class="mz-paper"]]

[[div class="mz-column" ]]

[[div class="mz-img-wrap " ]]
[[include component:image-block
name=http://scpsandboxcn.wdfiles.com/local--files/icon/ICON_angry-eagle.svg
|width=200px
|align=left
|caption=
**NO OIL HERE**
]]
[[/div]]
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae suscipit ante, quis interdum arcu. Nam efficitur magna nec nulla luctus, eu faucibus magna elementum. Duis tempor odio in magna efficitur, sit amet porttitor purus dapibus. Sed interdum elit vel enim dapibus, quis gravida mi dapibus. Donec tincidunt commodo tellus vitae malesuada. Mauris a volutpat ante, quis tempus ex. Nullam nisl neque, sollicitudin sed congue at, iaculis ullamcorper libero. Praesent egestas urna ut ante accumsan, et posuere lacus bibendum. Nunc sit amet dictum nisi, ac fermentum arcu. Nam eu pretium nibh. Vestibulum efficitur, elit non lacinia semper, turpis nunc cursus orci, vel accumsan dolor felis ac risus.

Cras lacus nulla, finibus sit amet rutrum nec, tincidunt ut est. Ut interdum odio neque, eu finibus leo eleifend sed. Cras porta consequat congue. Vestibulum placerat felis vehicula, imperdiet felis sit amet, vestibulum dui. Sed venenatis, lorem et ullamcorper condimentum, tortor sem hendrerit ipsum, et aliquet nibh orci vel ligula. Fusce in luctus mauris. Aenean elit dui, lobortis vel leo at, iaculis maximus neque. Sed sit amet neque in urna elementum tempus. Nullam at velit eu magna sodales convallis. Donec placerat pulvinar ante, quis volutpat erat dapibus ut. Pellentesque in scelerisque sapien, ac vestibulum felis. Fusce euismod faucibus hendrerit.

[[/div]]


[[div class="mz-hr" ]]

------

@@  @@,,Lorem Ipsum,,@@  @@

------

[[/div]]
Praesent malesuada lacinia mattis. Vivamus a urna eu orci scelerisque tincidunt sed sed risus. Sed maximus consectetur lectus sed dapibus. Integer sit amet tempor velit. In pellentesque nulla et elit dapibus, sed facilisis nunc semper. Vivamus nisl est, ultricies sit amet placerat ac, imperdiet vitae sem. Quisque dictum quam ac odio tempor, quis scelerisque massa sodales. Praesent ligula ante, sodales ac mi nec, euismod luctus sem. Duis urna erat, bibendum sit amet scelerisque vel, faucibus vitae nunc. Sed consequat mi ex, non lacinia dui tincidunt eget. Donec blandit nec lacus ac pulvinar. Donec ut mollis sem. Proin vel arcu tincidunt, dignissim libero sed, finibus lorem. Aenean nec enim sem.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo, lacus mauris eleifend metus, vel tincidunt nisi nisi a neque. Sed feugiat ante sit amet nibh dictum laoreet. Cras vehicula porttitor magna, quis sollicitudin magna varius ut. Mauris quis urna in mauris pellentesque consectetur. Duis quis enim non turpis dapibus laoreet a id nisi. Duis gravida condimentum mi, ut ornare purus egestas et. 

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


@@@@
@@@@

++ More div blocks

[[div class="clip-wrap"]]
[[div class="clip-body"]]
++++* [/theme:newspaper Clip]
@@[[div class="clip-wrap"]]@@
@@[[div class="clip-body"]]@@
content
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
[[/div]]


[[div class="flex-wrap"]]
[[div class="flex-wrap"]]
[[div class="clip-wrap"]]
[[div class="clip-body"]]
[[=image http://backroomssandboxcn.wikidot.com/local--files/img/PHO_ravine-gully.jpg width="300px"]]
content
[[/div]]
[[/div]]

[[div class="clip-wrap"]]
[[div class="clip-img"]]
[[image http://backroomssandboxcn.wikidot.com/local--files/img/PHO_ravine-gully.jpg  width="300px"]]
[[/div]]
[[/div]]
[[/div]]

[[/div]]

+++++* Code

[[div class="code"]]
@@[[div class="clip-wrap"]]@@
@@[[div class="clip-body"]]@@
@@[[image YOUR-IMAGE-LINK]]@@
content
@@[[/div]]@@
@@[[/div]]@@

@@[[div class="clip-wrap"]]@@
@@[[div class="clip-img"]]@@
@@[[image YOUR-IMAGE-LINK]]@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]

+ Note pages

[[div class="flex-wrap"]]
[[div class="note-page"]]
> [/scp-style-resource#toc7 Note paper]
@@[[div class="note-page"]]@@
content
@@[[/div]]@@
[[/div]]


[[div class="mz-note"]]
> [https://scp-wiki-cn.wikidot.com/component:note-template#u-ch3 Note tip]
@@[[div class="mz-note"]]@@
@@[[/div]]@@

------

Left Dogear:

@@[[div class="mz-note note-left"]]@@
@@[[/div]]@@

------

Swap the background color of note:

@@[[div class="mz-note" style="--tip-color:blue"]]@@
@@[[/div]]@@

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


[[div class="hr-double" style="text-align:center"]]
------
++ Row-striped pages
------
[[/div]]

[[div class="lc-wrap"]]
[[div class="mz-notepage-wrap chew-top lc-mid"]]
[[div class="notepage-body rowline-none"]]
[[div_ class="notepage-header"]]
[[/div]]
[[div class="notepage-main" ]]
> Usage
To enable the style of row-striped pages and notebook pages bellow, add a line of code in the include: 

@@[[include :scp-wiki-cn:theme:magazine@@
__|extensions=true__
@@]]@@

@@@@
To use more similar stuff, see [http://scp-wiki-cn.wikidot.com/component:note-template the component here].
[[div class="page-fullline"]]
[[/div]]
[[/div]]
[[div class="notepage-footer"]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
@@@@
@@@@
[[div class="flex-pc"]]
[[div class="mz-notepage-wrap chew-left"]]
[[div class="notepage-body"]]
[[div_ class="notepage-header"]]
[[/div]]
[[div class="notepage-main"]]
[[div class="no-sel "]]
@@[[div class="mz-notepage-wrap chew-left"]]@@[[footnote]] 
 In "chew-xxx", "xxx" can be replaced with  left/right/top/bottom/both/none to adjust the position of the torn edge.[[/footnote]]
@@[[div class="notepage-body"]]@@
@@[[div_ class="notepage-header"]]@@
Top text.
@@[[/div]]@@
@@[[div class="notepage-main"]]@@
Main text.
@@[[/div]]@@
@@[[div class="notepage-footer"]]@@
Bottom  text, usually the page number.
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
@@@@
[[/div]]
[[div class="notepage-footer"]]
[[/div]]
[[/div]]
[[/div]]
@@@@
@@@@
[[div class="mz-notequote-wrap  chew-left"]]
[[div class="notepage-body"]]
[[div_ class="notepage-header"]]
[[/div]]
[[div class="notepage-main"]]
The usage method is the same as above, just replace

**mz-notepage-wrap**

to:

**mz-notequote-wrap**

That's done.
@@@@
@@@@
@@@@
@@@@
[[/div]]
[[div class="notepage-footer"]]
[[/div]]
[[/div]]
[[/div]]

@@@@
[[/div]]
[[div class="hr-double mob-hid" style="text-align:center"]]
------
++ Notebook
------
[[/div]]

[[div class="mz-notebook-wrap mob-hid"]]
[[div class="notebook-body"]]
[[div class="notebook-left  notebook-bookmark"]]
[[div class="notepage-main"]]
[[div class="no-sel "]]
@@[[div class="mz-notebook-wrap"]]@@
@@[[div class="notebook-body"]]@@
@@[[div class="notebook-left"]]@@
@@[[div class="notepage-main"]]@@
@@     @@Left text. 
@@[[/div]]@@
@@[[/div]]@@
@@[[div class="notebook-mid"]]@@
@@[[/div]]@@
@@[[div class="notebook-right "]]@@
@@[[div class="notepage-main "]]@@
@@     @@Right text.
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
@@ @@
[[div class="mz-note note-left" style="left:-2rem;position:relative;--tip-color:#abddba"]]
[[div_ style="margin: 0.5em 0 0.5em 0"]]
@@       @@Hey, it look like a tab[[footnote]] 
Maybe you would need some color codes: 
#bbdcea #f3a2aa #f0dd8e #bbdcea #b5b6ae [[/footnote]].
[[/div]]
[[/div]]
@@ @@
[[div_ class="mz-note note-left" style="left:-4rem;position:relative;--tip-color:#bbdcea"]]
[[div_ style="margin: 0.5em 0 0.5em 0"]]
 Widening the page of site and folding the sidebar may improve the visual effect of this block.
[[/div]]
[[/div]]


[[/div]]
[[/div]]
[[div class="notebook-mid"]]
[[/div]]
[[div class="notebook-right"]]
[[div class="notepage-main"]]

**Note:**
* This block only displays the full appearance on a wide screen, and changes to the row-striped page style above on a narrow screen.
* To modify the color of background/row-stripes/text of bookpage separately, add //@@style="--color-notepage: blue;--color-rowline: green;--color-bookpage-txt:red"@@//  to the div which //class="notebook-body"//.
* To remove the bookseam style in the middle of the notebook, add //notebook-noseam// in the div which class="notebook-body".
* To enable the bookmark, add //notebook-bookmark// in the div which class="notebook-left/right".
*  To change the default row stripe style of the bookpage block to single stripe,  add //rowline-single// in the div which class="notepage-main".
 * Add //rowline-none// to remove the stripe.

[[/div]]
[[/div]]
[[/div]]
[[/div]]
@@@@
@@@@
+ Dialogues

[[div class="mz-talking-wrap pc-width" style="width:60%;margin: 0 auto"]]
[[div class="talking-left talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
Mabe you want a talk.
[[/div]]
[[/div]]

[[div class="talking-right talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-round  talkbox-dark"]]
See the folow to create a sheet of speech bubbles.
[[/div]]
[[/div]]
[[/div]]

[[collapsible show="+ Here we go" hide="- close"]]
[[div class="flex-wrap"]]
[[div class="blockquote no-sel" style="margin: 0 auto;"]]
++* Code
@@[[include :scp-wiki-cn:theme:magazine@@ __extensions=true__]]{{Add the code at include.}}

@@[[div class="mz-talking-wrap"]]@@ {{The Beginning-block}}
@@[[div class="talking-left talkimg-below" ]]@@{{The Dialog-block}}
@@[[div class="talking-img"]]@@ {{The Image-block}}
@@[[/div]]@@
@@[[div class="talking-box"]]@@{{The Text-block}}
**Left**
@@[[/div]]@@
@@[[/div]]@@

@@[[div class="talking-right talkimg-below" ]]@@
@@[[div class="talking-img"]]@@
@@[[/div]]@@
@@[[div class="talking-box"]]@@
**Right**
@@[[/div]]@@
@@[[/div]]@@

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

[[div]]
++* Intro
Maybe the speech bubbles sheet is too broad to display a well visual effect on the wide screen (like PC), so you can add the coda  __//style="width:80%;margin: 0 auto"//__ at the beginning-block to narrow the whole sheet. Meanwhile, add the classname __//pc-width//__ to make it restore 100% width when on narrow screen (like phone).

[[div class="blockquote" style="margin: 0 auto;"]]
@@[[div class="mz-talking-wrap pc-width"  style="width:80%;margin: 0 auto"]]@@
[[/div]]

On narrow screens, the picture in the image-block are hidden to leave space for text.  If you want to hide the picture in wide screen, add the classname __//no-image//__ in the image-block. Like this: 

[[div class="blockquote"]]
 @@[[div class="talking-img no-image"]]@@
[[/div]]
[[/div]]
[[/div]]


@@@@
@@@@

[[div class="mz-talking-wrap pc-width"  style="width:80%;margin: 0 auto"]]

[[div class="talking-left talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
**Left dialog-block：**
@@@@
@@@@
[[div class="blockquote" style="margin: 0 auto;"]]
@@[[div class="talking-left talkimg-below" ]]@@
[[/div]]
[[/div]]
[[/div]]


[[div class="talking-right talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
**Right dialog-block：**
@@@@
@@@@
[[div class="blockquote" style="margin: 0 auto;"]]
@@[[div class="talking-right talkimg-below" ]]@@
[[/div]]
[[/div]]
[[/div]]


[[div class="talking-left talkimg-upper" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-lefttop"]]

To place the dialog-block below the picture, follow this: 

1. Fill in the classname of dialog-block with __//talkimg-upper//__ to modify the picture position.
@@@@
[[div class="blockquote"]]
@@[[div class="talking-left talkimg-upper" ]]@@
[[/div]]
2. Fill in the classname of text-block with __//talkbox-lefttop / talkbox-righttopr//__ to modify the position of speech triangle of dialog-block.
@@@@
@@@@
[[div class="blockquote"]]
@@[[div class="talking-box talkbox-lefttop"]]@@
[[/div]]
[[/div]]
[[/div]]

[[div class="talking-left" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-lefttop talkbox-inby"]]
To place the picture in the center of image-block,  do not fill in the classname of dialog-block with anything except __//talking-left / talking-right//__ and add __//talkbox-inby//__ into text-block.

[[div class="blockquote"]]
@@[[div class="talking-box talkbox-lefttop  talkbox-inby"]]@@
[[/div]]
[[/div]]
[[/div]]


[[div class="talking-right talkimg-below" style="--tk-img-right:url(http://scpsandboxcn.wikidot.com/local--files/icon/IMG-goat.png)"]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
To swap a new picture, need to fill in __//@@--tk-img-left@@//__ or __//@@--tk-img-right@@//__ to the style of text-block according to its direction.

[[div class="blockquote"]]
@@[[div class="talking-right" style="--tk-img-right:url(IMAGE_LINK)"]]@@
[[/div]]

If you fill both codes in the beginning-block, the left and right pictures in the whole sheet will be converted. 

[[div class="blockquote"]]
 @@[[div class="mz-talking-wrap" style="--tk-img-left:url(IMAGE_LINK); --tk-img-right:url(IMAGE_LINK);" ]]@@
[[/div]]

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


[[div class="talking-left" style="--tk-img-left:url(http://scpsandboxcn.wdfiles.com/local--files/icon/ICON_angry-eagle.svg)"]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-inby" style="--shadow-line:green;--tk-box-bg:skyblue;"]]

To change the colors of  text-block, need to full __//@@--shadow-line@@//__ and __//@@--tk-box-bg@@//__ within its style definition.

[[div class="blockquote"]]
@@[[div class="talking-box talkbox-lefttop  talkbox-inby " style="--shadow-line:green;--tk-box-bg:skyblue;color:darkred"]]@@
[[/div]]
[[/div]]
[[/div]]


[[div class="talking-right talkimg-below"]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-round talkbox-dark"]]
Full in the classname of text-block with __//talkbox-round//__ to change its border to round; Full with __//talkbox-dark//__ to make a dark style.

[[div class="blockquote"]]
@@[[div class="talking-box talkbox-round  talkbox-dark"]]@@
[[/div]]
[[/div]]
[[/div]]

[[div class="talking-right talkimg-below"]]
[[div class="talking-img no-image"]]
[[/div]]
[[div class="talking-box talkbox-doubleline talkbox-righttop"]]
Full with __//talkbox-doubleline//__ to change its border to doubleline.
[[div class="blockquote"]]
@@[[div class="talking-box talkbox-doubleline"]]@@
[[/div]]
[[/div]]
[[/div]]


[[div class="talking-left talkimg-below"]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-bubles"]]
Full with __//talkbox-bubles//__ to change the speech triangle to two bubles (default to square).
[[div class="blockquote"]]
@@[[div class="talking-box talkbox-bubles"]]@@
[[/div]]
[[/div]]
[[/div]]

[[div class="talking-left talkimg-below"]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box talkbox-round talkbox-bubles "]]
Add the __//talkbox-round//__ to make them round).
[[div class="blockquote"]]
@@[[div class="talking-box talkbox-round talkbox-bubles"]]@@
[[/div]]
[[/div]]
[[/div]]


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



+ TABs


@@ @@

[[tabview]]
[[tab Tabulator]]


This is a tab view.

[[/tab]]

[[tab Customization]]

* Put them under the include.

[[div class="mz-blockquote no-sel"]]

@@[[module CSS]]@@
:root{
@@--tabNAV-bgHover:#333;@@{{Background color of the TABnav which is selected / hovered.}}
@@--tabMain-border:#333;@@ {{Border color}}
}
@@[[/module]]@@
   

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

[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
[[div class="mz-tabcell"]]

@@[[div class="mz-tabcell"]]@@
Text.
@@[[/div]]@@

------

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

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

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

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

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

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

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

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

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

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

This is a long tab. It contains a lot of text.
[[/div]]

[[/tab]]

[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab  long long long long long long long long long long long long long Tab]]

vvvvvvvvvvv

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

@@@@
@@@@

++* Teared tab
[[div class="mz-tab"]]
[[tabview]]
[[tab Tabulator]]
This teared tab flipped the second time it was selected.

Not good.
[[/tab]]
[[tab Code]]
[[div class="mz-blockquote no-sel"]]
@@[[include :scp-wiki-cn:theme:magazine@@
|extensions=true
@@]]@@

@@[[div class="mz-tab"]]@@
@@[[tabview]]@@
@@[[tab Tabulate]]@@

@@[[/tab]]@@
@@[[/tabview]]@@
@@[[/div]]@@
[[/div]]
[[/tab]]
[[/tabview]]
[[/div]]

@@@@
@@@@

++* linear tab


[[div class="mz-tab-line"]]
[[tabview]]
[[tab Tabulator]]

[[div class="mz-blockquote"]]
@@[[div class="mz-tab-line"]]@@
@@[[tabview]]@@
@@[[tab TAB]]@@

@@[[/tab]]@@
@@[[/tabview]]@@
@@[[/div]]@@
[[/div]]

[[/tab]]
[[tab Customization]]
* Put them under the include.


[[div class="mz-blockquote no-sel"]]

@@[[module CSS]]@@
:root{
    @@--Line-tab-base:#333;@@ {{Border color}}
    @@--Line-tabNAV-txt:#333;@@ {{Text color of the navTAB.}}
    @@--Line-tabNAV-txtHover:#e8e8e8;@@ {{Text color of the TAB-nav which is  selected or hovered.}}
}

@@[[/module]]@@
   

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

[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]

[[tab Long Tab]]
This is a long tab. It contains a lot of text.

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

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

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

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

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

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

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

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

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

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

This is a long tab. It contains a lot of text.
[[/tab]]

[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab  long long long long long long long long long long long long long Tab]]

vvvvvvvvvvv

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


@@@@
@@@@

@@@@
@@@@


[[div class="mz-tt"]]
+ Horizontally center  title 
○  Type A
[[/div]]

[[div class="no-sel blockquote"]]
@@[[div class="mz-tt"]]@@
@@+ Type A @@  
@@[[/div]]@@
[[/div]]

[[div class="mz-tt222"]]
+*  Type B
[[/div]]
= ○ text

[[div class="no-sel blockquote"]]
@@[[div class="mz-tt222"]]@@
@@+ Type B @@  
@@[[/div]]@@
[[/div]]

[[div class="mz-tt333"]]
+*  Type C
[[/div]]

[[div class="no-sel blockquote"]]
@@[[div class="mz-tt333"]]@@
@@+*  Type C@@  
@@[[/div]]@@

{{Or just horizontal line:}}

@@[[div class="mz-tt333"]]@@
@@[[/div]]@@
[[/div]]

[[div class="meta-title"]]
Meta Title 
[[/div]]

[[div class="no-sel blockquote"]]
@@[[div class="meta-title"]]@@
Meta Title 
@@[[/div]]@@

{{Or just horizontal line:}}

@@[[div class="meta-title"]]@@
@@[[/div]]@@
[[/div]]

@@@@
@@@@


[[div  class="mz-tt tt-box"]]
+ Pseudo Blacklight box

[[div class="no-sel blockquote"]]
@@[[div  class="mz-tt tt-box" style="padding-top: 0rem"]]@@
@@+* title @@

texts

@@+* more titles@@

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


+* Customization

[[div class="no-sel blockquote"]]

@@[[module CSS]]@@
:root{
@@--ttbox_h1BDR-color: #333;@@ {{Color of the title box's border}}
@@--ttbox_boxBDR-color: #333;@@ {{Color of the content box's border}}
@@--ttbox_bevel-color: #333;@@ {{Color of the  title box's bevel}}


@@--ttbox_h1-bg: #333;@@ {{Background color of title}}
@@--ttbox_h1-color: fff;@@ {{Color of title}}
}

@@[[/module]]@@
[[/div]]

@@@@
@@@@
[[div style="height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;"]]
+*  Individual title
[[/div]]

[[div class="no-sel blockquote"]]
@@[[div style="height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;"]]@@
@@+*  Individual title@@
@@[[/div]]@@
[[/div]]

[[/div]]

@@@@
@@@@

[[div class="mz-tt"]]
+ Columns 

[[/div]]


[[div class="mz-column  " ]]

The following codes divide the page into two or three columns, but it would be shrinked  to one column if the screen is narrow[[footnote]] For saving space, the following columns demonstration will not be displayed on narrow screen.    [[/footnote]].

> @@[[div class="mz-column"]]@@
> Two  columns
> @@[[/div]]@@


> @@[[div class="mz-column column-333"]]@@
> Three columns
> @@[[/div]]@@

> @@[[div class="mz-column  column-nip"]]@@
> No column-rule
> @@[[/div]]@@


> @@[[div class="mz-column column-nip column-333"]]@@
> Three columns without column-rule
> @@[[/div]]@@

[[div class="mob-hid"]]
**Lorem Ipsum：**
 In sit amet velit lacus. Ut finibus lorem vel felis interdum, ut posuere nisl sollicitudin. Proin ultrices neque ac mattis venenatis. Suspendisse potenti. Aliquam quis lacinia lorem, vel facilisis neque. Curabitur imperdiet nisl vitae nibh bibendum cursus. Nunc sollicitudin nisl eget egestas fermentum. Proin facilisis scelerisque ex, non molestie elit ultrices pulvinar. Morbi ac ultricies lacus. Proin consectetur dolor erat, a vestibulum metus scelerisque a. Sed dictum faucibus leo non condimentum. Donec enim augue, vehicula ut porta euismod, pellentesque quis lectus. Nam feugiat nisi nec nulla pretium, vel elementum sapien faucibus.

[[div style="float:right;width:160px"]]
[[=image http://scpsandboxcn.wikidot.com/local--files/icon/IMG-goat.png width="150px"]]
= Goat sheet
[[/div]]

Cras dolor velit, fermentum et sem ut, consequat iaculis orci. Ut dictum ipsum sed risus ullamcorper convallis. Nam non molestie odio, et pharetra risus. Aenean velit nisi, iaculis at venenatis a, semper vitae nibh. Vivamus aliquam risus at erat malesuada dapibus. Aliquam sit amet sapien risus. Vivamus efficitur aliquam justo, eget feugiat diam tincidunt vel. Suspendisse potenti. Maecenas eleifend eleifend auctor. Ut eget scelerisque augue. Nunc lacinia massa quam, in cursus erat tristique eget. 
[[/div]]
[[/div]]

[[div class="mob-hid"]]
------
[[div class="mz-column222-wrap  column-wrap-111"]]
[[div class="column222-box"]] 

[[=image  http://scpsandboxcn.wikidot.com/local--files/icon/IMG-goat.png  width="200px"]]
[[=]]
++* Box of text wrapping
○ Nobody
[[/=]]

[[/div]]
[[div class="mz-column222-cell column222-left"]]
[[div class="column222-left-blank"]]
[[/div]] 
 Suspendisse vitae libero a lectus consectetur iaculis non in massa. Suspendisse sed turpis id dolor consectetur egestas quis feugiat eros. Nam porta sit amet massa et volutpat. Praesent ut risus eu purus dictum varius. Nulla facilisi. In hac habitasse platea dictumst. Nam volutpat massa quis risus tincidunt, ut porttitor velit consequat. Ut tincidunt nulla in orci suscipit dapibus. Nulla ante ligula, sollicitudin in mauris nec, sollicitudin pharetra ligula. Quisque congue non metus at tristique. Nam bibendum sem magna, a consectetur elit dictum eu. Duis sagittis, nibh sit amet dignissim feugiat, dui quam mattis nisi, vel convallis lacus dui at nisl. Fusce lobortis non massa in tempus. Nunc ut vulputate magna. Nulla euismod metus quis lorem egestas, eget accumsan diam tristique.

Proin eu ultrices eros. Sed sit amet sapien ornare, tempus mauris tristique, consectetur ligula. Vestibulum ac tincidunt nunc. Morbi suscipit, lacus ut auctor lobortis, libero lacus egestas tellus, non fringilla metus nibh vel nisi. In mi lectus, varius non lorem vel, faucibus tempor enim. Fusce tincidunt libero id efficitur posuere. Integer sit amet dictum ipsum. Phasellus blandit est quis eros mollis sollicitudin. Nunc vehicula arcu vitae nisi pretium scelerisque. Vestibulum tristique odio eget urna facilisis finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[[/div]]
[[div class="mz-column222-cell column222-mid"]]
[[/div]]
[[div class="mz-column222-cell column222-mid "]]
[[div class="column222-mid-line" style=" "]]
[[/div]]
[[/div]]
[[div class="mz-column222-cell column222-right"]]
[[div class="column222-right-blank"]]
[[/div]] 
Praesent id nisl et ligula volutpat venenatis sit amet sit amet massa. Nam feugiat, odio vel tincidunt interdum, lorem sapien fringilla ipsum, vel molestie ipsum mi vitae tortor. Quisque sit amet enim nulla. Aenean consectetur erat ut mauris bibendum ornare. Ut posuere ante id libero tincidunt gravida. Nunc feugiat, lectus vitae consequat iaculis, velit dui placerat mauris, id mollis ipsum felis non sem. Vestibulum et eleifend dolor. Nulla facilisi. Praesent vel sapien pharetra, rhoncus metus id, ornare lorem. Nullam et molestie diam. 

Ut ac suscipit nisl. Suspendisse bibendum lorem egestas ex tempor malesuada. Praesent ut facilisis odio, id imperdiet dui. Suspendisse vehicula augue tempor risus porttitor vestibulum. Nam a turpis finibus, hendrerit risus ut, finibus diam. Fusce sed pulvinar augue. Nulla ut arcu eros. Duis tempus egestas risus id maximus. Cras non ex pharetra, posuere risus eget, scelerisque purus. Duis bibendum ultricies molestie. Curabitur hendrerit ligula vitae molestie vestibulum. Etiam vel rutrum massa. Proin quis est eget nulla tristique egestas. 

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo.

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


@@@@

------




@@@@

[[=]]
++* How to use 
[[/=]]
Select all and replace the following placeholders:
[[div class="blockquote no-sel"]]
{$name} {{Unique ID of each wrapped box.}}
{$box-width} {{Fixed width of wrapped content.}}
{$box-height}  {{Fixed height of wrapped content.}}
[[/div]]

[[collapsible show="+ CODES" hide="- HIDE"]]

[[div class="blockquote no-sel"]]
@@[[div class="mz-column222-wrap  column-wrap-{$name}"]]@@
@@[[div class="column222-box"]]@@ 
**Wrapped content**
@@[[/div]]@@
@@[[div class="mz-column222-cell column222-left"]]@@
@@[[div class="column222-left-blank"]]@@
@@[[/div]]@@ 
**Left text**
@@[[/div]]@@
@@[[div class="mz-column222-cell column222-mid"]]@@
@@[[/div]]@@
@@[[div class="mz-column222-cell column222-mid "]]@@
@@[[div class="column222-mid-line" style="{$mid-line}"]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[div class="mz-column222-cell column222-right"]]@@
@@[[div class="column222-right-blank"]]@@
@@[[/div]]@@ 
**Right text**
@@[[/div]]@@
@@[[/div]]@@
[[/div]]

[[div class="blockquote no-sel"]]
@@[[module CSS]]@@
:root{
 @@--column{$name}-box-width:{$box-width};@@
 @@--column{$name}-box-height:{$box-height};@@
  @@--column{$name}-gap:0rem;@@
  @@--column{$name}-mid-width: 4rem;@@
  @@--column{$name}-boxMOB-width:AUTO;@@
  @@--column{$name}-blank-width:calc(var(--column{$name}-box-width) / 2.5 - var(--column{$name}-gap)  );@@
  @@--column{$name}-blank-height:calc(var(--column{$name}-box-height) +  var(--column{$name}-gap) / 2 + var(--column{$name}-blank-width) / 2.5  );@@
  @@--column{$name}-line-top:calc(var(--column{$name}-blank-height)  + 0.2rem );@@
  @@--column{$name}-line-height:  calc(100% - var(--column{$name}-blank-height) - 0.5rem);@@
}


.mz-column222-wrap{
  display: flex;
  flex-wrap: nowrap;
 justify-content:   space-around;
}

.column222-right, .column222-left{
max-width:46% !important;
}

.column-wrap-{$name} .column222-box{
  display: block;
  background: {$box-bg};
  position: absolute;
  @@width: var(--column{$name}-box-width);@@
  @@height: var(--column{$name}-box-height);@@
}

.column-wrap-{$name}  .column222-left-blank,
.column-wrap-{$name}  .column222-right-blank{
  float: right;
  @@width: var(--column{$name}-blank-width);@@
  @@height: var(--column{$name}-blank-height);@@
  padding: 0 var(--column{$name}-gap);
}

.column-wrap-{$name} .column222-right-blank{
  float: left;
}

.column-wrap-{$name}  .column222-mid{
   @@width: var(--column{$name}-mid-width);@@
}

.column-wrap-{$name}  .column222-mid-line{
  display: block;
  position: relative;
   border-left: 2px solid #333;
  @@height: var(--column{$name}-line-height);@@
  @@top: var(--column{$name}-line-top);@@
}

@media (max-width: 600px){
    .mz-column222-wrap{
  display: block;
 }

.column-wrap-{$name}   .column222-box{
  position: inherit;
  @@width: var(--column{$name}-boxMOB-width);@@
  height: auto;
    margin: 0 auto;
}
   .column222-left-blank,
  .column222-right-blank,
  .column222-mid-line{
    display: none;
  }
   .column222-right, .column222-left{ 
     max-width:100% !important;
  }
}

@@[[/module]]@@
[[/div]]
[[/div]]
[[/collapsible]]



[!-----------------------------------------------
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
-------------------------------------------------]

[[module css]]
@import url(https://scp-wiki.wikidot.com/theme:magazine/code/3);

.mmposter-wrap{
    display: flex;
    justify-content: center ;   
    flex-wrap: wrap;

}

.mmposter-cell{
    min-width: 10%;
        justify-self: center;
}

.mmposter-blockquote .mmposter-cell{
    min-width: 50%;
}

.mmposter-semi  .mmposter-cell{
  width: 50% ;
}

.mmposter-semi  .mmposter-cell span[style*="underline"]{
 display: none
}

.flex-pc{
    display: flex;
}


.flex-wrap{
    display: flex;
    justify-content: space-around;    
}

.flex-wrap div{
     margin: 0 0.5rem;
    width: 100%;
}

@media (max-width: 500px) {
  .flex-pc{
    display: block;
}

    .flex-wrap{
flex-wrap:wrap;        
    }

  .mmposter-semi  .mmposter-cell,

    .mmposter-cell{
        width: 100%;
min-width: auto;

    }    
    .mmposter-right{
margin-top:2rem;
    }    
    .mob-breakkkk{
    display: block
}
}

/**/
.no-sel  p{
line-height: 1.2rem;
        color:#0e1554;

}

.no-sel  tt{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
    color:#000;
    padding:0 0rem 0 1.2rem;
    font-family: initial;

}

.no-sel tt:before {
content:" ←  ";
        padding:0 0.2rem 0 0rem;

}

/*
-----------------------------
Wrap columns
-------------------------------
*/

:root{

 --column111-box-width:10rem;
 --column111-box-height:15rem;
  --column111-gap:0rem;
  --column111-mid-width: 4rem;
  --column111-boxMOB-width:AUTO;

  --column111-blank-width:calc(var(--column111-box-width) / 2.5 - var(--column111-gap)  );
  --column111-blank-height:calc(var(--column111-box-height) +  var(--column111-gap) / 2 + var(--column111-blank-width) / 2.5  );

  --column111-line-top:calc(var(--column111-blank-height)  + 0.2rem );

  --column111-line-height:  calc(100% - var(--column111-blank-height) - 0.5rem);
}

.mz-column222-wrap{ 
  display: flex;
  flex-wrap: nowrap;
 justify-content:   space-around;
}

.column222-right, .column222-left{ 
max-width:46% !important;
}

.column-wrap-111 .column222-box{ 
  display: block;
  background: {$box-bg};
  position: absolute;
  width: var(--column111-box-width);
  height: var(--column111-box-height);
}

.column-wrap-111  .column222-left-blank,

.column-wrap-111  .column222-right-blank{
  float: right;
  width: var(--column111-blank-width);
  height: var(--column111-blank-height);
  padding: 0 var(--column111-gap);
}

.column-wrap-111 .column222-right-blank{
  float: left;
}

.column-wrap-111  .column222-mid{
   width: var(--column111-mid-width);
}

.column-wrap-111  .column222-mid-line{
  display: block;
  position: relative;
   border-left: 2px solid #333;
  height: var(--column111-line-height);
  top: var(--column111-line-top);
}

@media (max-width: 600px){
    .mz-column222-wrap{ 
  display: block;
 }

.column-wrap-111   .column222-box{ 
  position: inherit;
  width: var(--column111-boxMOB-width);
  height: auto;
    margin: 0 auto;
}

   .column222-left-blank,
  .column222-right-blank,
  .column222-mid-line{
    display: none;
  }
.column222-right, .column222-left{ 
max-width:100% !important;
}
}
[[/module]]

[!--
ccccccccccccccccccccccccc
--]
[[div style="opacity:0"]]
+ Goto Bottom
[[/div]]

------
[[/iftags]]


[!--========= 源代码 / SOURCE =============--]
[[module CSS]]
/*=====================================
Magazine theme - 00000000
------------------------------
Customiz
=====================================*/

@import url(https://scp-wiki.wikidot.com/theme:magazine/code/1);

#main-content{    
    width:{$content-width};
}

div#header h1 a::before {
    content:{$header-title};
}

div#header h2::before {
   content: {$header-subtitle};
}

#header-extra-div-1::before {  
    background-image:{$logo-image};
}


@media (max-width: 767px) {
 div#header h1 a::before {
    content:{$header-title};
    content:{$pad-title};
   }

  div#header h2::before {
    content:{$header-subtitle};
    content:{$pad-subtitle};
   }

   #header-extra-div-1::before {  
       background-image:{$logo-image};
       background-image: {$logo-image-pad};
    }
}

@media (max-width: 500px) {
  div#header h1 a::before {
    content:{$header-title};
    content:{$pad-title};
    content:{$mob-title};
    }

    div#header h2::before {
    content: {$header-subtitle};
    content:{$pad-subtitle};
    content: {$mob-subtitle};
   }

   #header-extra-div-1::before {  
       background-image:{$logo-image};
       background-image: {$logo-image-pad};
       background-image: {$logo-image-mob};
    }
}

#side-bar:before {
    background-image:{$logo-sidebar};
    content:{$sidebar-content};
}

#page-title{
   display:{$page-title};
}

#page-title::after{
    content:{$title-orn-content};
    font-size:{$title-orn-size};
    line-height:calc( {$title-orn-size} * 0.7);
    width: {$title-orn-width};
    color:{$title-orn-color};
}

#page-title:before,
#page-title:after{
   display:{$title-underlines};
}

[[/module]]
[[div style="display:none"]]
[[include :scp-wiki:component:interwiki-style
|priority=1
|type=sidebar
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Amagazine/2
]]
[[/div]]
[!---=============================---]

[!--========= 折叠侧边栏 / Collapsible sidebar =============--]
[!------------------------------------------------{$collapsible-sidebar}
[[include :scp-wiki:component:collapsible-sidebar]]
[[module CSS]]
/*=====================================
Magazine Theme
--------------
Collapsible Sidebar Source
=====================================*/

:root{  
--body-width-on-desktop:60rem;
--SB-topbox_left:3.2rem;   
    --SB-bg_PC:var(--page-bg);
}


#content-wrap{
     margin-left:0;
}

#content-wrap::after {
display: none;
}

#main-content {
    padding: 0;
    padding-top: var(--main-top);
    margin: 0 auto;
    left: 0;
    right: 0;
}

#main-content::after {
filter: sepia(50%) hue-rotate(150deg) saturate(150%);
}

div#extra-div-1 {
    z-index: 9;
}

#side-bar{
  z-index: 1;
  position: fixed;
  height: 100%;
}

#page-content {
            margin: auto;
}

#side-bar{
     margin-left:0;
     margin: 0;
     position: fixed;
     padding-top:30px ;
       transition: left 1s;
}


#side-bar::before {
    position:  static;
    margin: 0 auto;
}


#side-bar:hover, #side-bar:active {
     transition: all 0.5s;
     background-color: var(--sidebar-bg-pc); 
}

#side-bar :is(.media, .sns):has(a:nth-child(2)) a img{
  --media_pd: 0.6em;
}
#side-bar :is(.media, .sns):has(a:nth-child(4)) a img{
  --media_pd: 0.5em;
}
#side-bar :is(.media, .sns):has(a::nth-child(6)) a img{
 --media_pd: 0.2em;
}
#side-bar :is(.media, .sns):has(a:nth-child(7)) a img{
 --media_pd: 0.5em;
}
#side-bar :is(.media, .sns):has(a:nth-child(8)) a img{
  --media_pd: 0.4em;
}

@media (max-width: 479px) {
 #content-wrap #side-bar :is(.media, .sns) a img{
      --media_pd: 0.6em;
     --media_width:2em;
  }   
}

[[/module]]
[!---============= 扩展 ================---]
[[iftags [[#ifexpr {$extensions} == (true) | - ]]]]
[[module CSS]]
/*===================================
Magazine Theme
--------------
Extensions 
=====================================*/
@import url(https://scp-wiki.wikidot.com/theme:magazine/code/3);
[[/module]]
[[/iftags]]
[!---============= 自定义网页背景图 ================---]
[[iftags [[#ifexpr {$my-background} == (true) | - ]]]]
[[module CSS]]
/*===================================
Magazine Theme
--------------
Custom page background
=====================================*/
#container {
--hollow-image: {$page-background};
background: var(--hollow-image) center 0 repeat;
}

#content-wrap #side-bar::before,
#content-wrap #side-bar {
background-color: transparent ;
}
[[/module]]
[[/iftags]]
[!---============= 异学会================---]
[[iftags [[#ifexpr {$yxh} == (true) | - ]]]]
[[module CSS]]
/*===================================
Magazine Theme
中华异学会英文版 -  Abnormality Institute EN ver.
--------------
All the icons are under CC-BY-SA
LOGO_YXH by Freedom Koo; LOGO_noricst by Enflowerz
=====================================*/
:root{
    --tabNAV-bgHover:var(--color-navy);
    --tabMain-border:var(--color-navy);
    --visted-link:#333;
  --header-title: "Wonders Studie Association" ;
  --mob-title:"W. S. A.";
  --header-subtitle:"Wondering about Marvels, Studying by Spirit, Associating the World";
  --mob-subtitle:"To wonder, To study, To associate";
   --LOGO_position-mob:51% 0%;
    
   --LOGO_image-mob:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_noricst.svg');

--LOGO_sidebar:var(--icon-cn);
--LOGO_sidebar-opacity:0.7;

 --hr-image:var(--icon-cn);
 --hr-color:192,192,192;
    --icon-cn:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_CN.svg');
    --icon-yxh:url('https://scp-wiki.wikidot.com/local--files/theme:magazine/LOGO_YXH.svg');
}
/*============================================
正文
============================================*/

.mz-innerbox{
}

.mz-poem{
    text-align: center;
    font-family: var(--handwriting-font);
    font-size: 1.8em
}

.yxh-img{
    --yxh-size:15rem;
    width: var(--yxh-size);
    height: var(--yxh-size);
    background-image: var(--icon-yxh);
    background-size: cover;
    margin: 0 auto;
    opacity: 1;
    filter: blur(1px);
}

.yxh-maxim{
    border: solid 1px rgba(33,33,33,0.5);
    text-align: center;
    margin: 1em 3em;
    font-size: 1.6rem;
   font-family: 'Huiwen-Mincho';
}

@media (max-width: 500px){
    .mz-innerbox{
    font-size: 0.8rem;
}
.mz-poem{
    font-size: 0.8rem;
}
 .yxh-maxim {
    margin: 1em 1em;
    font-size: 1.4rem;
 }
 .yxh-maxim p{
padding: 0;
     line-height: 0;
 }
}

/*============================================
分割线，来自woednaz
============================================ */

.mz-poem  hr {
    border-top:1px solid #000 ;
    background: rgb(0, 0, 0, 0);
    border: 0;
    height: 1rem;
    width: 70%;
    position: relative;
    margin: 1.5rem auto;
    }

.mz-poem  hr::before {
    content: " ";
    background-image: var(--hr-image);
    color: rgb(var(--hr-color));
    display: inline-block;
    position: absolute;
    top: -0.2rem;
    left: 0;
    margin: 0 auto;
    font-size: 0.938rem;
    line-height: 0;
    height: 1.6rem;
    width:4rem;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: -webkit-calc(50% - 2rem);
    margin-left: -moz-calc(50% - 2rem);
    margin-left: calc(50% - 2rem);
    background-color: transparent;
    z-index: 1;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.mz-poem  hr::after {
    content: " ";
    height: 0.1rem;
    width: 100%;
    position: absolute;
    margin: 0 auto;
    background: rgb(var(--hr-color));
    left: 0;
    top: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A");
    -webkit-mask-size: 43.375rem auto;
    mask-size: 43.375rem auto;
    -webkit-mask-position: center center;
    mask-position: center center;
}

/*
============================================
杂项
============================================
 */

/* ------------------假标签-------------------- */

#main-content .page-tags {
   display:{$page-tags};
}

div.pseudo-tags ul {
    font-size: 85%;
    border-top: 1px solid #BBB;
    display: inline-block;
    margin: 10px 0 0;
    padding: 0 2px;
    list-style: none;
}

div.pseudo-tags li {
    color: #b01;
    text-decoration: none;
    display: inline-block;
    margin: 0 1px;
    cursor: pointer;
}

@media (max-width: 479px) {
 .poem-7 {
    font-size:120% ;
 }

 .yxh-maxim{
    margin: 2rem;
 }

.yxh-outbox, .ej-outbox{
   }
}
[[/module]]
[[/iftags]]