/*
    The following definitions was copied, verbatim, from the Style-Sheel that is located in the 
    Node-Search Package's `upgrade-files/stylesheets/package.css' directory.  In that CSS-File,
    the following CSS-Definition uses the selector:
    TR.NSTR TD { ... }

    This Definition creates a "Blue Icicle" looking thing.
*/
TH.Str-Category-Row
{
    background: linear-gradient(
        0.25turn, 
        lightskyblue, 5%, 
        lightblue, 30%,
        var(--JD-White2)
    );

    color:          black;
    font-weight:    bold;
    font-size:      130%;
    padding:        0.6em 1em 0.6em 0.75em;
    border-top:     0.4em solid;
    border-bottom:  0.4em solid;

    border-image: repeating-linear-gradient(
        45deg,
        lightblue,
        lightblue 20px,
        lightskyblue 20px,
        var(--JD-White2) 40px
    ) 20;
}

/* Base Roman Numeral Style */
B.Roman-Num
{
    color:          ivory;
    font-weight:    bold;
    font-family:    "Georgia", "Times New Roman", serif;
    padding:        0.1em 0.75em;
    margin:         0 0.2em 0em 1em;
    border-radius:  0.4em;
    display:        inline-block;
    box-shadow:     inset 0 0 4px rgba(0, 0, 0, 0.15);
}

/* RMN: The Roman-Numeral */
B.Roman-Num.R1 { background: darkred;        }
B.Roman-Num.R2 { background: slateblue;      }
B.Roman-Num.R3 { background: forestgreen;    }

B.Str-Expl
{
    color:          ivory;
    font-family:    "Georgia", "Times New Roman", serif;
    padding:        0.1em 0.75em;
    margin:         0 0.1em;
    border-radius:  0.4em;
    display:        inline-block;
    animation:      Roman-Numeral-Glow 3s ease-in-out infinite;
}

B.Str-Expl.R1
{
    background: repeating-linear-gradient(
        135deg,
        #cc6e49 0em,
        #5a0000 1.5em,
        #f31414 3em,
        #cc6e49 4.5em
    );
}

B.Str-Expl.R2
{
    background: repeating-linear-gradient(
        135deg,
        #000033 0em,
        #4169e1 1.5em,
        #6e9cac 3em,
        #000033 4.5em
    );
}

B.Str-Expl.R3
{
    background: repeating-linear-gradient(
        135deg,
        #003300 0em,
        #37d137 1.5em,
        #6cb16c 3em,
        #003300 4.5em
    );
}


@keyframes Roman-Numeral-Glow
{
    0%
    {
        box-shadow:
            /*
            0 0             → Centered around the element.
            Blur radius     → how soft the glow is.
            Spread radius   → increases the glow’s size.
            */

            /* Inner-Glow, X-Offset, Y-Offset, Blur-Radius, Color */
            inset 0 0 16px 0.8em black,

            /* Outer-Glow, X-Offset, Y-Offset, Blur-Radius, Spread radius, Color */
            0 0 16px 0.6em white;
    }

    50%
    {
        box-shadow:
            inset 0 0 0 transparent,
            0 0 4px 0.1em transparent;
    }

    100%
    {
        box-shadow:
            inset 0 0 16px 0.6em black,
            0 0 16px 0.6em white;
    }
}