Site 7 Anomalous Phenomenon Classification System Base

Link to article: Site 7 Anomalous Phenomenon Classification System Base.

Module Styles

• @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300&display=swap');
  
  .baseHeading {
      width: 100%;
      height: 150px;
      margin: auto;
      border: 1px solid #ccc;
      font-family: 'Oswald', sans-serif;
      background: white;
  }
  
  .leftBlockHeading {
      width: 29%;
      float: left;
      height: 100%;
  }
  .confidentialHeading {
      height: 25%;
      padding-left: 20px;
      padding-top: 15px;
  }
  .confidentialSpan {
      font-size: 36px;
      line-height: 0px;
  }
  .confidentialSpan a {
      color: #000;
  }
  .detailsHeading {
      height: 70%;
      margin: 0;
      padding-left: 20px;
  }
  .detailsSpan {
      font-size: auto;
  }
  .detailsSpan[data-title="none"] {
      display: none;
  }
  
  .centerBlockHeading {
      width: 55%;
      float: left;
      text-align: center;
      padding-top: 15px;
      height: 75px;
  }
  
  div#u-dangerLevels-1:hover::after, div#u-dangerLevels-2:hover::after, div#u-dangerLevels-3:hover::after, div#u-dangerLevels-4:hover::after, div#u-dangerLevels-5:hover::after, div#u-dangerLevels-6:hover::after {
      display: block;
      content: attr(data-title); /* Text output */
      position: absolute; /* Absolute positioning */
      z-index: 1; /* Hint popups overlaying all other elements */
      background: rgba(255,255,230,0.9); /* Background semi-transparency */
      font-family: Arial, sans-serif; /* Fonts */
      font-size: 11px; /* Hint font size */
      padding: 5px 10px; /* Padding */
      border: 1px solid #333; /* Border */
      width: 20em;
      top: auto;
      transform: skew(0deg) !important;
      color: #333;
  }
  div#u-dangerLevels-1[data-title="none"], div#u-dangerLevels-2[data-title="none"], div#u-dangerLevels-3[data-title="none"], div#u-dangerLevels-4[data-title="none"], div#u-dangerLevels-5[data-title="none"], div#u-dangerLevels-6[data-title="none"] {
      display: none !important;
  }
  
  .rightBlockHeading {
      width: 14%;
      height: 80%;
      float: left;
      text-align: center;
      position: relative;
  }
  .rightBlockHeading div {;
      display: none;
  }
  .{$scp-class} #classImageHeading-{$scp-class} {
      width: 70%;
      height: 80%;
      display: inline-block;
      margin: 7% 0px;
  }
  .{$scp-class} #u-classImageHeading-{$scp-class} {
      display: inline-block !important;
      width: 100px;
      height: 90px;
      margin-top: 15px;
  }
  .{$scp-class} #u-classImageHeading-{$scp-class}:hover::after {
      display: block;
      content: attr(data-title); /* Text output */
      position: absolute; /* Absolute positioning */
      z-index: 1; /* Hint popups overlaying all other elements */
      background: rgba(255,255,230,0.9); /* Background semi-transparency */
      font-family: Arial, sans-serif; /* Fonts */
      font-size: 11px; /* Hint font size */
      padding: 5px 10px; /* Padding */
      border: 1px solid #333; /* Border */
      transform: skew(0deg) !important;
      color: #333;
  }
  
  #u-classImageHeading-nonstandard:not([data-title="Class — safe"]):not([data-title="Class — euclid"]):not([data-title="Class — keter"]):not([data-title="Class — thaumiel"]):not([data-title="Class — neutralized"]) {
      display: inline-block !important;
      width: 100px;
      height: 90px;
      margin-top: 15px;
  }
  #u-classImageHeading-nonstandard:not([data-title="Class — safe"]):not([data-title="Class — euclid"]):not([data-title="Class — keter"]):not([data-title="Class — thaumiel"]):not([data-title="Class — neutralized"]):hover::after {
      display: block;
      content: attr(data-title); /* Text output */
      position: absolute; /* Absolute positioning */
      left: 20%; /* top: 10%; */ /* Hint position */
      z-index: 1; /* Hint popups overlaying all other elements */
      background: rgba(255,255,230,0.9); /* Background semi-transparency */
      font-family: Arial, sans-serif; /* Fonts */
      font-size: 11px; /* Hint font size */
      padding: 5px 10px; /* Padding */
      border: 1px solid #333; /* Border */
      transform: skew(0deg) !important;
      color: #333;
  }
  
  
  .bottomBlockHeading {
      width: 70%;
      height: 20%;
      text-align: center;
      display: inline-flex;
      float: right;
  }
  .componentHeading {
      font-size: 18px;
      width: 55%;
      text-align: center;
      background: #ccc;
      height: 100%;
      transform: skew(-45deg);
      box-shadow: inset 5px 5px 4px -4px rgba(0,0,0,0.7);
  }
  .componentHeadingSkewFixSpan {
    transform: skew(45deg);
    display: block;
  }
  
  .xxxxHeading {
      font-size: 18px;
      width: 15%;
      text-align: center;
      background: #ccc;
      height: 100%;
      transform: skew(-45deg);
      box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
  }
  .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
      display: flex !important;
      text-align: center;
      width: 17.1%;
      transform: skew(-45deg);
      z-index: 1;
      box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
  }
  .xxxxSkewFixSpan {
    transform: skew(45deg);
    display: block;
  }
  .XXXXheadBox {
    color: black;
    position: relative;
    top: -15px;
    margin: 0 0 0 30%;
    transform: skew(45deg);
  }
  .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]:hover::after {
      display: block;
      content: attr(data-title); /* Text output */
      position: absolute; /* Absolute positioning */
      z-index: 1; /* Hint popups overlaying all other elements */
      background: rgba(255,255,230,0.9); /* Background semi-transparency */
      font-family: Arial, sans-serif; /* Fonts */
      font-size: 11px; /* Hint font size */
      padding: 5px 10px; /* Padding */
      border: 1px solid #333; /* Border */
      transform: skew(45deg);
      width: max-content;
      top: 110%;
      color: #333;
  }
  
  .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
      font-size: 18px;
      width: 14%;
      text-align: center;
      background: #ccc;
      height: 100%;
      display: none;
      color: white;
      box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
  }
  .potentialLvl-Bl {
      color: black;
      position: relative;
      top: -15px;
      margin: 0 0 0 10%;
      transform: skew(45deg);
  }
  .potentialLvl-Wh {
      color: white;
      position: relative;
      top: -15px;
      margin: 0 0 0 10%;
      transform: skew(45deg);
  }
  .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
      display: flex !important;
      text-align: center;
      width: 18%;
      transform: skew(-45deg);
      z-index: 1;
      box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
  }
  .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}:hover::after {
      display: block;
      content: attr(data-title); /* Text output */
      position: absolute; /* Absolute positioning */
      z-index: 1; /* Hint popups overlaying all other elements */
      background: rgba(255,255,230,0.9); /* Background semi-transparency */
      font-family: Arial, sans-serif; /* Fonts */
      font-size: 11px; /* Hint font size */
      padding: 5px 10px; /* Padding */
      border: 1px solid #333; /* Border */
      transform: skew(45deg);
      width: max-content;
      top: 110%;
      color: #333;
  }
  
  .numberHeading {
      font-size: 18px;
      width: 30%;
      text-align: center;
      background: #ccc;
      margin-left: -15px;
      box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
      margin-top: -0.2px;
  }
  
  /* Mobile optimisation by MrNereof */
  @media (max-width: 1024px) {
      .centerBlockHeading {
          height: 60px;
      }
  
      div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
          width: 60px !important;
          height: 60px !important;
          background-size: 60px !important;
          margin-top: 20px !important;
      }
      
      .{$scp-class} div#u-classImageHeading-{$scp-class}, div#u-classImageHeading-nonstandard {
          width: 90px !important;
          height: 90px !important;
      }
      
      .{$scp-class} div#u-classImageHeading-{$scp-class} span, div#u-classImageHeading-nonstandard span {
          line-height: 50px !important;
      }
      
      span.confidentialSpan {
          font-size: 29px !important;
      }
      
      .bottomBlockHeading {
          width: 30em !important;
      }
  
      .componentHeading {
          transform: skew(0deg) !important;
      }
  
      .componentHeadingSkewFixSpan {
          transform: skew(0deg) !important;
      }
  
      .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
          width: 3em !important;
          transform: skew(0deg) !important;
      }
  
      .XXXXheadBox {
          transform: skew(0deg) !important;
      }
  
      .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
          width: 5em !important;
          transform: skew(0deg) !important;
      }
  
      .potentialLvl-Wh {
          transform: skew(0deg) !important;
      }
      .numberHeading {
          width: 10em !important;
      }
      .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]::after {
          transform: skew(0deg) !important;
          width: 20em !important;
          color: #333;
      }
      .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}::after {
          transform: skew(0deg) !important;
          width: 20em !important;
      }
  }
  
  @media (max-width: 970px) {
      .baseHeading {
          padding-bottom: 105px;
      }
  
      .detailsHeading {
          max-width: 200% !important;
          width: 200%;
          font-size: 1.2em;
      }
  
      .centerBlockHeading {
          display: flex;
          width: 100%;
          margin-left: 10px;
      }
  
      div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
          margin-top: -10px !important;
      }
  
       .rightBlockHeading {
          position: absolute;
          right: 10%;
          width: 90px !important;
          height: 90px !important;
          margin-top: 25px;
      }
      
      .bottomBlockHeading {
          margin-top: 10px;
          width: 100% !important;
      }
  }
  
  @media (max-width: 410px) {
      .centerBlockHeading {
          height: 50px;
      }
  
      div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
          width: 50px !important;
          height: 50px !important;
          background-size: 50px !important;
      }
  
      .baseHeading {
          padding-bottom: 95px;
      }
  }
  
  
  :hover::after {
      display: none;
      content: none;
  }

Inline Styles

• height:calc(100% - 32px);

• display:flex; height:95px; flex-wrap:wrap; align-items: center; justify-content:center;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-1}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-2}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-3}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-4}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-5}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-6}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;

• background:#4e6c77;

• color: white; font-weight: bold; font-size: 500%; line-height: 60px;

• background:#ffc000;

• color: white; font-weight: bold; font-size: 500%; line-height: 60px;

• background:#b80000;

• color: white; font-weight: bold; font-size: 500%; line-height: 60px;

• background:#8B008B;

• color: white; font-weight: bold; font-size: 500%; line-height: 60px;

• background:#ddd;

• color: black; font-weight: bold; font-size: 500%; line-height: 60px;

• background:{$non-standard-color};

• color: white; font-weight: bold; font-size: 500%; line-height: 60px;

• width:max(650px, 70%);

• position: relative;top: -15px;

• background: #4e6c77; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: red; display: none; font-size: 18px;

• background: red; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: red; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: #4e6c77; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: orange; display: none; font-size: 18px;

• background: red; display: none; font-size: 18px;

• background: black; display: none; font-size: 18px;

• color:white; margin: 0 0 0 25%;

• background: white; display: none; font-size: 18px;

• background: #ccc; display: none; font-size: 18px;

• background: white; display: none; font-size: 18px;

• background: #8B008B; display: none; font-size: 18px;

• background: red; display: none; font-size: 18px;

• width: 0;

• background: #505052; display: none; font-size: 18px;

• background: #505052; display: none; font-size: 18px;

• background: #505052; display: none; font-size: 18px;

• background: #505052; display: none; font-size: 18px;

• background: #505052; display: none; font-size: 18px;

• background: #505052; display: none; font-size: 18px;

• position: relative;top: -15px;

Includes

• (none)

CSS Classes

• baseHeading

• {$scp-class}

• contaiment-risk-{$contaiment-risk}

• threat-ind-{$threat-ind}

• leftBlockHeading

• confidentialHeading

• confidentialSpan

• detailsHeading

• detailsSpan

• detailsSpan

• detailsSpan

• centerBlockHeading

• rightBlockHeading

• bottomBlockHeading

• componentHeading

• componentHeadingSkewFixSpan

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• XXXXheadBox

• potentialLvl-Wh

• potentialLvl-Wh

• potentialLvl-Wh

• potentialLvl-Wh

• potentialLvl-Wh

• potentialLvl-Wh

• numberHeading

• numberHeadingSkewFixSpan

Page Source

[[div class="baseHeading {$scp-class} contaiment-risk-{$contaiment-risk} threat-ind-{$threat-ind}"]]

    [[div class="leftBlockHeading" style="height:calc(100% - 32px);"]]
        [[div class="confidentialHeading"]]
            [[span class="confidentialSpan"]][[[s7-apcs-guide|CONFIDENTIAL]]][[/span]]
        [[/div]]

        [[div class="detailsHeading"]]
            [[span class="detailsSpan" data-title="{$lineFirst}"]]{$lineFirst}[[/span]]
            [[span class="detailsSpan" data-title="{$lineSecond}"]]{$lineSecond}[[/span]]
            [[span class="detailsSpan" data-title="{$lineThird}"]]{$lineThird}[[/span]]
        [[/div]]
    [[/div]]

[[div class="centerBlockHeading" style="display:flex; height:95px; flex-wrap:wrap; align-items: center; justify-content:center;"]]

[[div id="dangerLevels-1" data-title="{$danger-select-1}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-1}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[div id="dangerLevels-2" data-title="{$danger-select-2}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-2}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[div id="dangerLevels-3" data-title="{$danger-select-3}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-3}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[div id="dangerLevels-4" data-title="{$danger-select-4}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-4}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[div id="dangerLevels-5" data-title="{$danger-select-5}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-5}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[div id="dangerLevels-6" data-title="{$danger-select-6}" style="width: 16%; height: 65%; background: url('http://scp-wiki.wdfiles.com/local--files/component%3As7-apcs-base/{$danger-select-6}.png');background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block;"]]
[[/div]]

[[/div]]



    [[div class="rightBlockHeading"]]
            [[div id="classImageHeading-safe" data-title="Class — Safe" style="background:#4e6c77;"]]
               [[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]S[[/span]]
            [[/div]]
            [[div id="classImageHeading-euclid" data-title="Class — Euclid" style="background:#ffc000;"]]
                [[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]E[[/span]]
            [[/div]]
            [[div id="classImageHeading-keter" data-title="Class — Keter" style="background:#b80000;"]]
                [[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]K[[/span]]
            [[/div]]
            [[div id="classImageHeading-thaumiel" data-title="Class — Thaumiel" style="background:#8B008B;"]]
                [[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]T[[/span]]
            [[/div]]
            [[div id="classImageHeading-neutralized" data-title="Class — Uncontained / Neutralized" style="background:#ddd;"]]
                [[span style="color: black; font-weight: bold; font-size: 500%; line-height: 60px;"]]N[[/span]]
            [[/div]]
            [[div id="classImageHeading-nonstandard" data-title="Class — {$scp-class}" style="background:{$non-standard-color};"]]
                [[span style="color: white; font-weight: bold; font-size: 500%; line-height: 60px;"]]{$non-standard-class}[[/span]]
            [[/div]]
    [[/div]]

    [[div class="bottomBlockHeading" style="width:max(650px, 70%);"]]
        [[div class="componentHeading"]]
            [[span class="componentHeadingSkewFixSpan" style="position: relative;top: -15px;"]]{$activation}[[/span]]
        [[/div]]



        [[div id="xxxxHeading-A5" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|A5##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-A4" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                A4
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-A3" style="background: red; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                A3
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-A2" style="background: red; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                A2
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-B5" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|B5##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-B4" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                B4
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-B3" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                B3
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-B2" style="background: red; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                B2
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-C5" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|C5##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-C4" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|C4##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-C3" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                C3
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-C2" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                C2
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-D5" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|D5##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-D4" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|D4##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-D3" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                D3
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-D2" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                D2
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-E5" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|E5##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-E4" style="background: #4e6c77; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|E4##
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-E3" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                E3
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-E2" style="background: orange; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                E2
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-KETER" data-title="KETER CLASSE" style="background: red; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                KETER
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-AAA" data-title="Containment breach is inevitable under any and all means of containment" style="background: black; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox" style="color:white; margin: 0 0 0 25%;"]]
                AAA
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-EEE" data-title="Possibility of containment breach has been ruled out" style="background: white; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                EEE
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-TS" data-title="Containment is impossible" style="background: #ccc; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                Ȼ
            [[/div]]
    [[/div]]
    
        [[div id="xxxxHeading-Q" data-title="Insufficient data for analysis" style="background: white; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ?
            [[/div]]
    [[/div]]

       [[div id="xxxxHeading-T" style="background: #8B008B; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                ##white|T##
            [[/div]]
    [[/div]]

        [[div id="xxxxHeading-KC" data-title="Type of end-of-the-world scenario that may follow a containment breach" style="background: red; display: none; font-size: 18px;"]]
            [[div class="XXXXheadBox"]]
                {$k-class}
            [[/div]]
    [[/div]]

        [[div id="xxxxHeading-none" style="width: 0;"]]
    [[/div]]



        [[div id="potentialLevel-1" data-title="Secrecy danger level: Broken Masquerade" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist I
            [[/div]]
    [[/div]]
    [[div id="potentialLevel-2" data-title="Secrecy danger level: Distant Storm" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist II
            [[/div]]
    [[/div]]
    [[div id="potentialLevel-3" data-title="Secrecy danger level: Fallen Angel" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist III
            [[/div]]
        [[/div]]
        [[div id="potentialLevel-4" data-title="Secrecy danger level: Fingerpost" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist IV
            [[/div]]
        [[/div]]
        [[div id="potentialLevel-5" data-title="Secrecy danger level: Razorblade" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist V
            [[/div]]
        [[/div]]
        [[div id="potentialLevel-6" data-title="Secrecy danger level: Vacuum" style="background: #505052; display: none; font-size: 18px;"]]
            [[div class="potentialLvl-Wh"]]
                Vedist VI
            [[/div]]
        [[/div]]

        [[div class="numberHeading"]]
            [[span class="numberHeadingSkewFixSpan" style="position: relative;top: -15px;"]]{$scp-number}[[/span]]
        [[/div]]
    [[/div]]

[[/div]]




[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300&display=swap');

.baseHeading {
    width: 100%;
    height: 150px;
    margin: auto;
    border: 1px solid #ccc;
    font-family: 'Oswald', sans-serif;
    background: white;
}

.leftBlockHeading {
    width: 29%;
    float: left;
    height: 100%;
}
.confidentialHeading {
    height: 25%;
    padding-left: 20px;
    padding-top: 15px;
}
.confidentialSpan {
    font-size: 36px;
    line-height: 0px;
}
.confidentialSpan a {
    color: #000;
}
.detailsHeading {
    height: 70%;
    margin: 0;
    padding-left: 20px;
}
.detailsSpan {
    font-size: auto;
}
.detailsSpan[data-title="none"] {
    display: none;
}

.centerBlockHeading {
    width: 55%;
    float: left;
    text-align: center;
    padding-top: 15px;
    height: 75px;
}

div#u-dangerLevels-1:hover::after, div#u-dangerLevels-2:hover::after, div#u-dangerLevels-3:hover::after, div#u-dangerLevels-4:hover::after, div#u-dangerLevels-5:hover::after, div#u-dangerLevels-6:hover::after {
    display: block;
    content: attr(data-title); /* Text output */
    position: absolute; /* Absolute positioning */
    z-index: 1; /* Hint popups overlaying all other elements */
    background: rgba(255,255,230,0.9); /* Background semi-transparency */
    font-family: Arial, sans-serif; /* Fonts */
    font-size: 11px; /* Hint font size */
    padding: 5px 10px; /* Padding */
    border: 1px solid #333; /* Border */
    width: 20em;
    top: auto;
    transform: skew(0deg) !important;
    color: #333;
}
div#u-dangerLevels-1[data-title="none"], div#u-dangerLevels-2[data-title="none"], div#u-dangerLevels-3[data-title="none"], div#u-dangerLevels-4[data-title="none"], div#u-dangerLevels-5[data-title="none"], div#u-dangerLevels-6[data-title="none"] {
    display: none !important;
}

.rightBlockHeading {
    width: 14%;
    height: 80%;
    float: left;
    text-align: center;
    position: relative;
}
.rightBlockHeading div {;
    display: none;
}
.{$scp-class} #classImageHeading-{$scp-class} {
    width: 70%;
    height: 80%;
    display: inline-block;
    margin: 7% 0px;
}
.{$scp-class} #u-classImageHeading-{$scp-class} {
    display: inline-block !important;
    width: 100px;
    height: 90px;
    margin-top: 15px;
}
.{$scp-class} #u-classImageHeading-{$scp-class}:hover::after {
    display: block;
    content: attr(data-title); /* Text output */
    position: absolute; /* Absolute positioning */
    z-index: 1; /* Hint popups overlaying all other elements */
    background: rgba(255,255,230,0.9); /* Background semi-transparency */
    font-family: Arial, sans-serif; /* Fonts */
    font-size: 11px; /* Hint font size */
    padding: 5px 10px; /* Padding */
    border: 1px solid #333; /* Border */
    transform: skew(0deg) !important;
    color: #333;
}

#u-classImageHeading-nonstandard:not([data-title="Class — safe"]):not([data-title="Class — euclid"]):not([data-title="Class — keter"]):not([data-title="Class — thaumiel"]):not([data-title="Class — neutralized"]) {
    display: inline-block !important;
    width: 100px;
    height: 90px;
    margin-top: 15px;
}
#u-classImageHeading-nonstandard:not([data-title="Class — safe"]):not([data-title="Class — euclid"]):not([data-title="Class — keter"]):not([data-title="Class — thaumiel"]):not([data-title="Class — neutralized"]):hover::after {
    display: block;
    content: attr(data-title); /* Text output */
    position: absolute; /* Absolute positioning */
    left: 20%; /* top: 10%; */ /* Hint position */
    z-index: 1; /* Hint popups overlaying all other elements */
    background: rgba(255,255,230,0.9); /* Background semi-transparency */
    font-family: Arial, sans-serif; /* Fonts */
    font-size: 11px; /* Hint font size */
    padding: 5px 10px; /* Padding */
    border: 1px solid #333; /* Border */
    transform: skew(0deg) !important;
    color: #333;
}


.bottomBlockHeading {
    width: 70%;
    height: 20%;
    text-align: center;
    display: inline-flex;
    float: right;
}
.componentHeading {
    font-size: 18px;
    width: 55%;
    text-align: center;
    background: #ccc;
    height: 100%;
    transform: skew(-45deg);
    box-shadow: inset 5px 5px 4px -4px rgba(0,0,0,0.7);
}
.componentHeadingSkewFixSpan {
  transform: skew(45deg);
  display: block;
}

.xxxxHeading {
    font-size: 18px;
    width: 15%;
    text-align: center;
    background: #ccc;
    height: 100%;
    transform: skew(-45deg);
    box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
    display: flex !important;
    text-align: center;
    width: 17.1%;
    transform: skew(-45deg);
    z-index: 1;
    box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.xxxxSkewFixSpan {
  transform: skew(45deg);
  display: block;
}
.XXXXheadBox {
  color: black;
  position: relative;
  top: -15px;
  margin: 0 0 0 30%;
  transform: skew(45deg);
}
.contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]:hover::after {
    display: block;
    content: attr(data-title); /* Text output */
    position: absolute; /* Absolute positioning */
    z-index: 1; /* Hint popups overlaying all other elements */
    background: rgba(255,255,230,0.9); /* Background semi-transparency */
    font-family: Arial, sans-serif; /* Fonts */
    font-size: 11px; /* Hint font size */
    padding: 5px 10px; /* Padding */
    border: 1px solid #333; /* Border */
    transform: skew(45deg);
    width: max-content;
    top: 110%;
    color: #333;
}

.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
    font-size: 18px;
    width: 14%;
    text-align: center;
    background: #ccc;
    height: 100%;
    display: none;
    color: white;
    box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.potentialLvl-Bl {
    color: black;
    position: relative;
    top: -15px;
    margin: 0 0 0 10%;
    transform: skew(45deg);
}
.potentialLvl-Wh {
    color: white;
    position: relative;
    top: -15px;
    margin: 0 0 0 10%;
    transform: skew(45deg);
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
    display: flex !important;
    text-align: center;
    width: 18%;
    transform: skew(-45deg);
    z-index: 1;
    box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
}
.threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}:hover::after {
    display: block;
    content: attr(data-title); /* Text output */
    position: absolute; /* Absolute positioning */
    z-index: 1; /* Hint popups overlaying all other elements */
    background: rgba(255,255,230,0.9); /* Background semi-transparency */
    font-family: Arial, sans-serif; /* Fonts */
    font-size: 11px; /* Hint font size */
    padding: 5px 10px; /* Padding */
    border: 1px solid #333; /* Border */
    transform: skew(45deg);
    width: max-content;
    top: 110%;
    color: #333;
}

.numberHeading {
    font-size: 18px;
    width: 30%;
    text-align: center;
    background: #ccc;
    margin-left: -15px;
    box-shadow: inset 0 5px 4px -4px rgba(0,0,0,0.7);
    margin-top: -0.2px;
}

/* Mobile optimisation by MrNereof */
@media (max-width: 1024px) {
    .centerBlockHeading {
        height: 60px;
    }

    div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
        width: 60px !important;
        height: 60px !important;
        background-size: 60px !important;
        margin-top: 20px !important;
    }
    
    .{$scp-class} div#u-classImageHeading-{$scp-class}, div#u-classImageHeading-nonstandard {
        width: 90px !important;
        height: 90px !important;
    }
    
    .{$scp-class} div#u-classImageHeading-{$scp-class} span, div#u-classImageHeading-nonstandard span {
        line-height: 50px !important;
    }
    
    span.confidentialSpan {
        font-size: 29px !important;
    }
    
    .bottomBlockHeading {
        width: 30em !important;
    }

    .componentHeading {
        transform: skew(0deg) !important;
    }

    .componentHeadingSkewFixSpan {
        transform: skew(0deg) !important;
    }

    .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk} {
        width: 3em !important;
        transform: skew(0deg) !important;
    }

    .XXXXheadBox {
        transform: skew(0deg) !important;
    }

    .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind} {
        width: 5em !important;
        transform: skew(0deg) !important;
    }

    .potentialLvl-Wh {
        transform: skew(0deg) !important;
    }
    .numberHeading {
        width: 10em !important;
    }
    .contaiment-risk-{$contaiment-risk} #u-xxxxHeading-{$contaiment-risk}[data-title]::after {
        transform: skew(0deg) !important;
        width: 20em !important;
        color: #333;
    }
    .threat-ind-{$threat-ind} #u-potentialLevel-{$threat-ind}::after {
        transform: skew(0deg) !important;
        width: 20em !important;
    }
}

@media (max-width: 970px) {
    .baseHeading {
        padding-bottom: 105px;
    }

    .detailsHeading {
        max-width: 200% !important;
        width: 200%;
        font-size: 1.2em;
    }

    .centerBlockHeading {
        display: flex;
        width: 100%;
        margin-left: 10px;
    }

    div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
        margin-top: -10px !important;
    }

     .rightBlockHeading {
        position: absolute;
        right: 10%;
        width: 90px !important;
        height: 90px !important;
        margin-top: 25px;
    }
    
    .bottomBlockHeading {
        margin-top: 10px;
        width: 100% !important;
    }
}

@media (max-width: 410px) {
    .centerBlockHeading {
        height: 50px;
    }

    div#u-dangerLevels-1, div#u-dangerLevels-2, div#u-dangerLevels-3, div#u-dangerLevels-4, div#u-dangerLevels-5, div#u-dangerLevels-6 {
        width: 50px !important;
        height: 50px !important;
        background-size: 50px !important;
    }

    .baseHeading {
        padding-bottom: 95px;
    }
}


:hover::after {
    display: none;
    content: none;
}
[[/module]]