a, address, blockquote, body, caption, center, dd, dir, div, dl, dt, form, h1, h2, h3, h4, h5, h6, table, td, th, ol, p, ul {
    font-family: Serif, "Nimbus Roman No9 L", "urw-nimbus roman no9 l-iso8859-1", "urw-times-iso8859-1", "Times New Roman", "Serif";
    margin-left: 0px;
    font-style: italic;
}

body {
    font-size: 120%;
    text-align: center;
    margin: 0px auto;
    word-spacing: 0.3em;
    color: white;
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-image: URL(images/starssparkle.gif);
    background-position: top left;
    background-repeat: repeat;
}

/* NOTE: div.stars had to be added to wrap all page content ...
   because FireFox would not animate starssparkle.gif when user began scrolling
   when background-image was in the body alone :(
*/
div.stars {
    text-align: center;
    color: white;
    background-color: black;
    background-attachment: fixed;
    background-image: URL(images/starssparkle.gif);
    margin: 0px auto;
    width: 100%;
    height: 100%;
}

div.starsfixed {
    position: fixed;
    z-index: 0;
    text-align: center;
    color: white;
    background-color: transparent;
    margin: 0px auto;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-image: URL(images/starssparkle.gif);
    background-position: top left;
    background-repeat: repeat;

    /*
    background-position: center center;
    background-repeat: repeat;
        */
}

div.content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: white;
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.wordSpace1 {
    word-spacing: 0.1em;
}
.wordSpace2 {
    word-spacing: 0.2em;
}
.wordSpace3 {
    word-spacing: 0.3em;
}
.wordSpace4 {
    word-spacing: 0.4em;
}
.wordSpace45 {
    word-spacing: 0.45em;
}
.wordSpace5 {
    word-spacing: 0.5em;
}

.nowrap {
    white-space: nowrap;
}

.script {
    font-family: Serif, "Nimbus Roman No9 L", "urw-nimbus roman no9 l-iso8859-1", "urw-times-iso8859-1", "Times New Roman", "Serif";
    font-style: italic;
    /* word-spacing: 6px; */
}

.scriptlink {
    font-family: Serif, "Nimbus Roman No9 L", "urw-nimbus roman no9 l-iso8859-1", "urw-times-iso8859-1", "Times New Roman", "Serif";
    font-size: 150%;
    line-height: 150%;
    font-style: italic;
}

/* RAINBOW COLORS */
.red {
    color: red;
}

.orange {
    color: orange;
}

.yellow {
    color: yellow;
}

.green {
    color: lime;
}

.blue {
    /* color: #77bbff; */
    color: #88ccff;
}

.brightblue {
    color: #88ccff;
}

.indigo {
    /* color: #7777ff; */
    color: #8888ff;
}

.violet {
    color: fuchsia;
}

.white {
    color: white;
}
.ruby {
    color: #e0115f;
}

.gold { /* #FFD700; */
    color: gold;
}

.rage {
    color: red;
}

.glow {
    text-shadow: 3px 3px 6px white, -3px -3px 6px white, -3px 3px 6px white, 3px -3px 6px white;
} 
.glowWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 3px 3px 6px white, -3px -3px 6px white, -3px 3px 6px white, 3px -3px 6px white;
}

.glow2 {
    text-shadow: 3px 3px 4px white, -3px -3px 4px white, 3px -3px 4px white, -3px 3px 4px white;
}
.glow2WithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 3px 3px 4px white, -3px -3px 4px white, 3px -3px 4px white, -3px 3px 4px white;
}

.glow3 {
    text-shadow: 2px 2px 4px #999999, -2px -2px 4px #999999, -2px 2px 4px #999999, 2px -2px 4px #999999;
}
.glow3WithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 2px 2px 4px #999999, -2px -2px 4px #999999, -2px 2px 4px #999999, 2px -2px 4px #999999;
}

.glow4 {
    text-shadow: -3px 3px 5px #bbbbbb, -3px -3px 5px #bbbbbb, -3px 3px 5px #bbbbbb, 3px -3px 5px #bbbbbb;
}
.glow4WithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 3px 3px 5px #bbbbbb, -3px -3px 5px #bbbbbb, -3px 3px 5px #bbbbbb, 3px -3px 5px #bbbbbb;
}

.glow10px {
    text-shadow: 5px 5px 10px rgba(255,255,255, 0.8), -5px -5px 10px rgba(255,255,255, 0.8), 5px -5px 10px rgba(255,255,255, 0.8), -5px 5px 10px rgba(255,255,255, 0.8);
}
.glow10pxWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(255,255,255, 0.8), -5px -5px 10px rgba(255,255,255, 0.8), 5px -5px 10px rgba(255,255,255, 0.8), -5px 5px 10px rgba(255,255,255, 0.8);
}

.glowFaintBlue {
    text-shadow: 5px 5px 10px rgba(200,200,255, 0.8), -5px -5px 10px rgba(200,200,255, 0.8), 5px -5px 10px rgba(200,200,255, 0.8), -5px 5px 10px rgba(200,200,255, 0.8);
}
.glowFaintBlueWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(200,200,255, 0.8), -5px -5px 10px rgba(200,200,255, 0.8), 5px -5px 10px rgba(200,200,255, 0.8), -5px 5px 10px rgba(200,200,255, 0.8);
}

.glowFaintBlueLg {
    text-shadow: 5px 5px 8px rgba(200,200,255, 0.9), -5px -5px 6px rgba(200,200,255, 0.9), 5px -5px 6px rgba(200,200,255, 0.9), -5px 5px 6px rgba(200,200,255, 0.9);
}
.glowFaintBlueLgWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 6px rgba(200,200,255, 0.9), -5px -5px 6px rgba(200,200,255, 0.9), 5px -5px 6px rgba(200,200,255, 0.9), -5px 5px 6px rgba(200,200,255, 0.9);
}

.glowRed {
    text-shadow: 3px 3px 6px red, -3px -3px 6px red, 3px -3px 6px red, -3px 3px 6px red;
}
.glowRedWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 3px 3px 6px red, -3px -3px 6px red, 3px -3px 6px red, -3px 3px 6px red;
}

.glowRed2 {
    text-shadow: 5px 5px 10px rgba(255,0,0, 0.8), -5px -5px 10px rgba(255,0,0, 0.8), 5px -5px 10px rgba(255,0,0, 0.8), -5px 5px 10px rgba(255,0,0, 0.8);
}
.glowRed2WithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(255,0,0, 0.8), -5px -5px 10px rgba(255,0,0, 0.8), 5px -5px 10px rgba(255,0,0, 0.8), -5px 5px 10px rgba(255,0,0, 0.8);
}

.glowOrange {
    text-shadow: 5px 5px 10px rgba(255,165,0, 0.8), -5px -5px 10px rgba(255,165,0, 0.8), 5px -5px 10px rgba(255,165,0, 0.8), -5px 5px 10px rgba(255,165,0, 0.8);
}

.glowOrangeWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(255,165,0, 0.8), -5px -5px 10px rgba(255,165,0, 0.8), 5px -5px 10px rgba(255,165,0, 0.8), -5px 5px 10px rgba(255,165,0, 0.8);
}

.glowYellow {
    text-shadow: 5px 5px 10px rgba(255,255,0, 0.8), -5px -5px 10px rgba(255,255,0, 0.8), 5px -5px 10px rgba(255,255,0, 0.8), -5px 5px 10px rgba(255,255,0, 0.8);
}
.glowYellowWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(255,255,0, 0.8), -5px -5px 10px rgba(255,255,0, 0.8), 5px -5px 10px rgba(255,255,0, 0.8), -5px 5px 10px rgba(255,255,0, 0.8);
}

.glowGray {
    text-shadow: 5px 5px 10px rgba(255,255,255, 0.8), -5px -5px 10px rgba(255,255,255, 0.8), 5px -5px 10px rgba(255,255,255, 0.8), -5px 5px 10px rgba(255,255,255, 0.8);
}
.glowGrayWithOutline {
    text-shadow: -1px -1px rgba(0,0,0,1), 5px 5px 10px rgba(255,255,255, 0.8), -5px -5px 10px rgba(255,255,255, 0.8), 5px -5px 10px rgba(255,255,255, 0.8), -5px 5px 10px rgba(255,255,255, 0.8);
}
.numeric {
    font-size: 120%;
    font-family: Consolas;
}

em {
    color: yellow;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}


.underline {
    text-decoration: underline;
}

.nounderline {
    text-decoration: none;
}

.undrln {
    text-decoration: underline;
}

.noundrln {
    text-decoration: none;
}

.italic {
    font-style: italic;
}

.italicSkewLeft {
    transform: skew(10deg);
    /*
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
        */
}


.copy {
    font-size: 66%;
    color: lime;
    font-style: italic;
    font-family: Serif;
    font-weight: bold;
}

.aside {
    font-size: 70%; /* was 66% */
    word-spacing: 0.15em;
}



h1 {
    font-size: 190%;
    white-space: normal;
    word-spacing: 0.3em;
}
.sizeh1 {
    font-size: 190%;
}

h2 {
    font-size: 150%;
    word-spacing: 0.3em;
}
.sizeh2 {
    font-size: 150%;
}

h3 {
    font-size: 130%;
    word-spacing: 0.3em;
}
.sizeh3 {
    font-size: 130%;
}

h4 {
    font-size: 120%;
    word-spacing: 0.3em;
}
.sizeh4 {
    font-size: 120%;
}

p {
    text-align: justify;
    text-decoration: none;
    font-style: italic;
    font-weight: normal;
    word-spacing: 0.17em;
    line-height: 1.3em;
    margin: 0px auto;
    width: 60%;
    min-width: 300px;
    max-width: 95%;
}


hr {
    background-image: URL(images/spectrum-horz2.gif);
    background-size: 100% 100%;
    border-width: 0px;
    width: 33%;
    max-width: 95%;
    height: 0.4rem;
    border-radius: 0.2rem;
}
    hr.unionjack {
        background-image: URL(images/unionjack-horz.png);
        background-size: 100% 100%;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 0.4rem;
        border-radius: 0.2rem;
    }

    hr.unionjackmusicbreak {
        background-image: URL(images/unionjack-horz.png);
        background-size: 100% 100%;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 1.0rem;
        border-radius: 0.5rem;
    }


    hr.linespacer {   /* Used to control height between lines like <br style="lineheight: 10px;" /> used to do. Can't be used in a span. */
        height: 1rem; /* This is default. Just set the height in the style when used on a page. */
        width: 0px;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background-image: none;
        background-color: transparent;
        color: transparent;
    }

    hr.grayscale {
        background-image: URL(images/spectrum-vert2.gif);
        background-size: 100% 100%;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 0.4rem;
        border-radius: 0.2rem;
        opacity: 0.8;
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }

    hr.gray {
        background-image: none;
        background-color: #999999;
        background-size: auto;
        background-repeat: repeat;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 0.4rem;
        border-radius: 0.2rem;
    }

    hr.graytrans {
        opacity: 0.4;
        background-image: none;
        background-color: #aaaaaa;
        background-size: auto;
        background-repeat: repeat;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 0.4rem;
        border-radius: 0.2rem;
    }

    hr.whiteglow {
        background-image: none;
        background-color: white;
        background-size: auto;
        background-repeat: repeat;
        border-width: 0px;
        width: 33%;
        max-width: 95%;
        height: 0.4rem;
        border-radius: 0.2rem;
        -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    }

.hrmusicbreak {
    height: 1.0rem;
    border-radius: 0.5rem;
}

.grayscale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    color: #cccccc;
}

.mirror {
    display: inline-block;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.slant {
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(50deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(50deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(50deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(50deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(50deg, 0deg);
}

.rotate-90 {
    writing-mode: vertical-lr;
    /*
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

            transform: rotate(90deg);
                */
}

img.topicon {
    width: 150px;
    height: 150px;
    border: 0px;
    padding: 0px;
    border-radius: 80px;
}

    img.topicon:hover {
        /*background-color: rgba(255,255,255,0.3);*/
        -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    }

img.bottomicon {
    display: inline;
    vertical-align: middle;
    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-radius: 80px;
}

    img.bottomicon:hover {
        /*background-color: rgba(255,255,255,0.3);*/
        -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    }

img.topiconglobalize {
    display: inline;
    vertical-align: middle;
    margin: 0px auto;
    border: 0px;
    padding: 3px;
    border-radius: 200px;
    /*border-radius: 400px 400px 300px 300px;*/
    margin-bottom: 8px;
}
    img.topiconglobalize:hover {
        background-color: rgba(255,255,255,0.2);
        -webkit-box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
        -moz-box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
        /*box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);*/
        box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
    }

img.bottomiconglobalize {
    display: inline;
    vertical-align: middle;
    border: 0px;
    padding: 3px;
    margin: 0px;
    border-radius: 140px;
    width: 116px;
    height: 150px;
    margin-bottom: 10px;
}

    img.bottomiconglobalize:hover {
        background-color: rgba(255,255,255,0.2);
        -webkit-box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
        -moz-box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
        box-shadow: inset 0px 6px 20px rgba(255, 255, 255, 0.9), 0px 0px 6px 6px rgba(255, 255, 255, 1.0);
    }


img.bottomiconGray {
    display: inline;
    vertical-align: middle;
    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-radius: 80px;
}

    img.bottomiconGray:hover {
        /*background-color: rgba(255,255,255,0.3);*/
        -webkit-box-shadow: 0px 0px 6px 6px rgba(0,0,0, 0.6);
        -moz-box-shadow: 0px 0px 6px 6px rgba(0,0,0, 0.6);
        box-shadow: 0px 0px 6px 6px rgba(0,0,0, 0.6);
    }

img.topiconrft {
        margin: 0px auto;
        border: 0px;
        padding: 8px;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 80px;
    }

    img.topiconrft:hover {
        background-color: rgba(255,255,255,0.0);
        -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    }




img.icon50 {
    display: inline;
    border: 0px;
    margin-bottom: 5px;
    padding: 0px;
    border-radius: 25px;
}
    img.icon50:hover {
        /*background-color: rgba(255,255,255,0.3);*/
        -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

div.sectionspacer {
    height: 25rem;
}

div.hoverRounded { /* Mostly used inside multi-line links. Usage: <a class="nohover"><div class="hoverRounded">Line1 Text<br />Line 2 Text</div></a>  */
    display: inline-block;
    border-radius: 3em; /* user can override border-radius depending on number of lines*/
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    line-height: 1.5em;
}

    div.hoverRounded:hover {
        /* background-color: rgba(255,255,255,0.25);  */
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

div.hoverRoundedManyones {
    /*display: inline-block;*/
    padding: 0;
    height: 170px;
    width: 170px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 85px;
}

    div.hoverRoundedManyones:hover {
        border: 1px solid black;
        background-color: rgba(75, 0, 130,0.3); /* indigo: 75, 0, 130*/
        /*
        -webkit-box-shadow: 0px 0px 10px 10px rgba(255, 0, 255, 0.9);
        -moz-box-shadow: 0px 0px 10px 10px rgba(255, 0, 255, 0.9);
            */
        box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.8), inset 0px 0px 10px 10px rgba(75, 0, 130, 0.8);
    }


div.hoverRoundedNoBg10 { /* can be used to create a white glow around divs. Adjust padding and border-radius as desired */
    display: inline-block; /* it has blend-radius and spread of 10px */
    padding: 0px;
    border-radius: 3em;
}
    div.hoverRoundedNoBg10:hover {
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
    }

div.rainbowcirclebg { /* can be used to create a white glow around divs. Adjust padding and border-radius as desired */
    display: inline-block; /* it has blend-radius and spread of 10px */
    padding: 0px;
    border-radius: 3em;
}

    div.rainbowcirclebg:hover {
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
    }

div.hoverRoundedNoBg6 { /* can be used to create a white glow around divs. Adjust padding and border-radius as desired */
    display: inline-block; /* it has blend-radius and spread of 6px */
    padding: 0px;
    border-radius: 3em;
}

    div.hoverRoundedNoBg6:hover {
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

.artist {
    font-size: 150%;
    padding-left: 0.4em;
    padding-right: 0.4em;
    border-radius: 3.5em;
}


a {
    font-weight: bold;
    color: lime;
    padding-top: 0.0em;
    padding-bottom: 0.15em;
    padding-right: 0.4em;
    padding-left: 0.4em;
    border-radius: 2em;
}

    a:link {
        color: lime; /* #00ff55; */ /* #39ff14; */
    }

    a:visited {
        color: lime; /* #39ff14; */
    }

    a:active {
        color: yellow; /* #39ff14; */
        outline: none;
    }
 
    a:focus {
        outline: none;
        /*-moz-outline-style: none; */
    }

    a:hover {
        /* background-color: rgba(255,255,255,0.25); */
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

    a.menu {
        background-color: rgba(0,0,0,0.4);
        padding-top: 0.0em;
        padding-bottom: 0.15em;
        padding-right: 0.4em;
        padding-left: 0.4em;
        border-radius: 2em;
    }

        a.menu:hover {
            background-color: rgba(0,0,0,0.7); /* rest of hover styles are same as <a> */
        }



    a.nohover { /* for use in links with images, in which the image has the hover */
        /* originally made no changes to 'a' styles, except in a.nohover:hover */
        padding-left: 0;
        padding-right: 0;
        border-radius: unset;
    }

        a.nohover:hover {
            background-color: transparent;
            -webkit-box-shadow: unset;
            -moz-box-shadow: unset;
            box-shadow: unset;

            /* Orignally did the following for box-shadow: */
            /*
            -webkit-box-shadow: 0px 0px rgba(255, 255, 255, 0.0);
            -moz-box-shadow: 0px 0px rgba(255, 255, 255, 0.0);
            box-shadow: 0px 0px rgba(255, 255, 255, 0.0);
            */
        }


    a.gray:link {
        color: #bbbbbb;
    }

    a.gray:visited {
        color: #bbbbbb;
    }

    a.gray:active {
        color: #999999;
    }

    a.gray:hover {
        /* background-color: rgba(0,0,0,0.25); */
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 6px 4px rgba(0,0,0, 0.6);
        -moz-box-shadow: 0px 0px 6px 4px rgba(0,0,0, 0.6);
        box-shadow: 0px 0px 6px 4px rgba(0,0,0, 0.6);
    }


    a.yellowlink {
        color: yellow;
    }

        a.yellowlink:hover {
            /* background-color: rgba(255,255,255,0.25); */
            background-color: transparent;
            -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 0, 0.9);
            -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 0, 0.9);
            box-shadow: 0px 0px 10px 10px rgba(255, 255, 0, 0.9);
        }


    a.white:link {
        color: white;
    }

    a.white:visited {
        color: white;
    }

    a.white:active {
        color: red;
    }

    a.black:link {
        color: black;
    }

    a.black:visited {
        color: black;
    }

    a.black:active {
        color: red;
    }



table {
    color: white;
    margin: 0px auto;
}

    table.nav {
        color: white;
        text-align: center;
    }
td {
    color: white;
}

    td.leftwords { /* for 2-cell tables so words on left get aligned right towards center-screen */
        width: 50%;
        text-align: right;
        padding-right: 1rem;
        vertical-align: top;
        padding-bottom: 5px;
    }

    td.rightwords { /* for 2-cell tables so words on right get aligned left towards center-screen */
        width: 50%;
        text-align: left;
        padding-left: 1rem;
        vertical-align: top;
        padding-bottom: 5px;
    }


div.viewport {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: transparent;
}

table.viewport {
    margin: 0px auto;
    border-collapse: separate;
    border-spacing: 0px;
    width: 98%;
    height: 100%;
}

td.viewport {
    padding: 0px;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
}

td.viewportContent {
    padding: 0px;
    padding-top: 1em;
    padding-bottom: 1em;
    vertical-align: middle;
    font-size: 120%;
}

/*
input[type=text], input[type=password] {
    border: 1px solid black;
    border-radius: 16px;
    background-color: rgba(255,255, 255, 0.5);
    padding: 3px;
    color: yellow;
    font-weight: bold;
    font-family: serif;
    font-style: italic;
    font-size: 100%;
    width: 90px;
    text-align: center;
    -webkit-box-shadow: inset 0px 0px 10px #000;
    -moz-box-shadow: inset 0px 0px 10px #000;
    box-shadow: inset 0px 0px 10px #000;
    cursor: n-resize;
}

    input[type=text]:hover, input[type=password]:hover {
        -webkit-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 1), inset 0px 0px 10px #000;
        -moz-box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 1), inset 0px 0px 10px #000;
        box-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 1), inset 0px 0px 10px #000;
    }

    input[type=text]:focus, input[type=password]:focus {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 10px #000, 0px 0px 6px 4px rgba(255, 255, 255, 1);
        -moz-box-shadow: inset 0px 0px 10px #000, 0px 0px 6px 4px rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 10px #000, 0px 0px 6px 4px rgba(255, 255, 255, 1);
    }
*/

/* color: rgba(224, 17, 95, 1) is ruby */
input[type=text], input[type=password] {
    font-size: 110%;
    border: 1px solid black;
    border-radius: 18px;
    background-color: rgba(224, 17, 95, 1);
    font-family: serif;
    font-weight: bold;
    font-style: italic;
    color: yellow;
    width: 5em;
    padding: 3px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    text-align: center;
    text-shadow: -1px -1px #000000;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
    cursor: n-resize;
}

    input[type=text]:hover, input[type=password]:hover {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

    input[type=text]:focus, input[type=password]:focus {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
        -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
    }

/* color: rgba(224, 17, 95, 1) is ruby */
button.page {
    font-size: 110%;
    border: 1px solid black;
    border-radius: 18px;
    background-color: rgba(224, 17, 95, 1);
    font-family: serif;
    font-weight: bold;
    font-style: italic;
    color: white;
    padding: 3px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    cursor: pointer;
    text-shadow: -1px -1px #000000;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1);
}

    button.page:hover {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.6), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

    button.page:focus {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
        -moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 1), 0px 0px 3px 2px rgba(255, 255, 255, 1);
    }


button.playPauseManyones_Play {
    border: 1px solid black;
    color: white;
    background-color: #e0115f;
    font-size: 110%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0.05em;
    width: 2em;
    height: 2em;
    padding: 0;
    padding-left: 0.23em;
    padding-top: 0.1em;
    border-radius: 1em;
    cursor: pointer;
    text-shadow: -2px -2px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
}
    button.playPauseManyones_Play:focus {
        outline: none;
    }

    button.playPauseManyones_Play:hover {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.9), 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
    }

button.playPauseManyones_Pause {
    border: 0px;
    color: transparent;
    background-color: transparent;
    font-size: 110%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0.05em;
    width: 2em;
    height: 2em;
    padding: 0;
    border-radius: 1em;
    cursor: pointer;
    /*
    text-shadow: -2px -2px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7);
        */
}

    button.playPauseManyones_Pause:focus {
        outline: none;
    }

    button.playPauseManyones_Pause:hover {
        outline: none;
        color: white;
        background-color: #e0115f;
        text-shadow: -2px -2px rgba(0, 0, 0, 1.0);
        -webkit-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: inset 0px 0px 9px rgba(0, 0, 0, 0.7), 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.9), 0px 0px 10px 10px rgba(255, 255, 255, 0.8);
    }





button.menu {
    border: 1px solid black;
    border-radius: 18px;
    /* background-color: #e0115f; */ /* #e0115f is 'ruby'  */
    background-image: URL(images/spectrum-horz2.gif);
    /* background-image: URL(images/audio2.png);*/
    background-size: 100% 100%;
    font-family: serif;
    font-weight: bold;
    font-style: italic;
    color: white;
    font-size: 110%;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    text-shadow: -1px -1px #444444;
    -webkit-box-shadow: inset 0px 0px 9px #000;
    -moz-box-shadow: inset 0px 0px 9px #000;
    box-shadow: inset 0px 0px 9px #000;
}

    button.menu:hover, button.menu:focus {
        outline: none;
        -webkit-box-shadow: inset 0px 0px 9px #000, 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: inset 0px 0px 9px #000, 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
        box-shadow: inset 0px 0px 9px #000, 0px 0px 6px 4px rgba(255, 255, 255, 0.8);
    }

#bottomDiv {
    position: fixed;
    z-index: 3;
    bottom: 15px;
    left: 0px;
    width: 100%;
    text-align: center;
    vertical-align: bottom;
}

#bottomMenuDiv {
    position: fixed;
    z-index: 99;
    margin: 0 auto;
    bottom: 15px;
    text-align: center;
    vertical-align: bottom;
}

#topDiv {
    position: fixed;
    z-index: 3;
    top: 5px;
    left: 0px;
    width: 100%;
    text-align: center;
    vertical-align: top;
}

#fullDiv {
    position: relative;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

div.logolink {
    padding: 10px;
    border-radius: 520px;
    z-index: 1;
}

    div.logolink:hover {
        background-color: rgba(120, 120, 120, 0.5);
    }

.shadedtext {
    background-color: rgba(0,0,0,0.4);
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 8px;
}

#starsfixed {
    position: fixed;
    text-align: center;
    color: white;
    background-color: black;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/starssparkle.gif);
    background-attachment: fixed;
    background-repeat: repeat;
}

#logo {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/onerb.png);
    background-size: 450px 450px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#manyonesbg {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/manyones_bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#logodim {
    opacity: 0.3;
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/onerb.png);
    background-size: 450px 450px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

div.logohover { /* can be used to create a white glow around divs. Adjust padding and border-radius as desired */
    display: inline-block; /* it has blend-radius and spread of 10px */
    padding: 0px;
    z-index: 1;
    border-radius: 214px;
    height: 428px;
    width: 428px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

    div.logohover:hover {
        background-color: transparent;
        -webkit-box-shadow: 0px 0px 12px 12px rgba(255, 255, 255, 0.8);
        -moz-box-shadow: 0px 0px 12px 12px rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 12px 12px rgba(255, 255, 255, 0.8);
    }


#earthlogo {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/earth.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#egglogo {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/awaken.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#ozlogo {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/OZ.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#lovelogo {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/lovewfrb.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#rainbow {
    position: fixed;
    /*z-index:0;*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: URL(images/rainbow.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    vertical-align: bottom;
}

#rbLogo {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    /*
	background-image: URL(images/rainbow.png);
	background-repeat: no-repeat;
	
	background-attachment: fixed;
	background-position: center center;
	text-align: center;
	vertical-align: bottom;
*/
}

#rbRight {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 10px;
    background-image: URL(images/spectrum-vert.gif);
    background-attachment: fixed;
}

#rbBottom {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 10px;
    width: 100%;
}

#rbTop {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 10px;
    width: 100%;
}

#rbZLogo {
    z-index: 3;
    /* position: relative; */
    width: 100%;
    /*
	background-image: URL(images/zrb1.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment:scroll;
	text-align: center;
	vertical-align: bottom;
	*/
}

.hraudio { /* should have same width as following audio classes + (left + right padding) */
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.one-audio {
    width: 280px;
    margin: 0px auto;
    background-color: transparent;
    background-image: URL(images/audio2.png);
    background-size: 100% 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 30px;
}
    .one-audio:hover {
        opacity: 0.8;
    }

.one-audio-manyones {
    width: 280px;
    margin: 0px auto;
    background-color: transparent;
    color: black;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    border-radius: 30px;
}

    .one-audio-manyones:hover {
        background-image: URL(images/starssparkle.gif);
        background-repeat: repeat;
    }

.one-audio-manyones-mobile {
    width: 280px;
    margin: 0px auto;
    background-color: transparent;
    color: black;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    border-radius: 30px;
}


.one-audio-white {
    width: 280px;
    margin: 0px auto;
    background-color: white;
    /* background-image: URL(images/audio2.png); */
    background-image: none;
    background-size: 100% 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    -moz-box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 6px 6px rgba(255, 255, 255, 0.8), inset 0px 0px 6px 6px rgba(0, 0, 0, 0.5);
}
    .one-audio-white:hover {
        opacity: 0.8;
    }

.one-audio-sky {
    width: 280px;
    margin: 0px auto;
    background-color: transparent;
    background-image: URL(images/blue-sky.jpg);
    background-size: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 30px;
}

    .one-audio-sky:hover {
        background-image: none;
        background-color: rgba(255, 255, 255, 0.5);
    }

/* unionjack-horz.png  */

.one-audio-unionjack {
    width: 280px;
    margin: 0px auto;
    background-color: transparent;
    background-image: URL(images/1200px-Flag_of_the_United_Kingdom.svg.png);
    background-size: 100% 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 30px;
}
    .one-audio-unionjack:hover {
        opacity: 0.8;
    }

.plyr--audio .plyr__controls {
    background: rgba(255,255,255,0.0);
    color: #000000;
    font-weight: bold;
}

/*  We can put 500x500 images in the following corner divs,
    and they will only display 1 quarter of the image ...
    For instance, tlCorner (top-left) will only show the bottom-right corner of the image,
    because the rest of the image is hidden outside of the window
*/
#tlCorner {  /* (top-left) */
    position: fixed;
    z-index: 0;
    top: -250px;
    left: -250px;
    width: 500px;
    height: 500px;
    background-color: transparent;
    /*
        border: 1px solid red;
    background-attachment: fixed;
    background-image: URL(images/onerb.png);
    background-repeat: no-repeat;
    background-size: 500px 500px;
    background-position: -250px -250px;
        */
}

#trCorner { /* (top-right) */
    position: fixed;
    z-index: 0;
    top: -250px;
    right: -250px;
    width: 500px;
    height: 500px;
    background-color: transparent;
}

#blCorner { /* (bottom-left) */
    position: fixed;
    z-index: 0;
    bottom: -250px;
    left: -250px;
    width: 500px;
    height: 500px;
    background-color: transparent;
}

#brCorner { /* (bottom-right) */
    position: fixed;
    z-index: 0;
    bottom: -250px;
    right: -250px;
    width: 500px;
    height: 500px;
    background-color: transparent;
}


::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 7px #dddddd;
    border-radius: 7px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    /*background-image: URL(images/spectrum-vert2-rev.png);
    background-size: 100% 100%; */
    background-color: #999999;
    box-shadow: inset 0 0 7px #444444;
    border-radius: 7px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: white;
    }

::-webkit-scrollbar-button:vertical:increment {
    /*box-shadow: inset 0 0 4px white;*/
    background-image: URL(images/arrow-down.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 15px;
    height: 15px;
    /*background-size: 100% 100%; */
    /*background-color: white; border-radius: 7px;*/
    color: white;
    background-color: transparent;
}

::-webkit-scrollbar-button:vertical:decrement {
    /*box-shadow: inset 0 0 4px white;*/
    background-image: URL(images/arrow-up.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 15px;
    height: 15px;
    /*background-size: 100% 100%; */
    /*background-color: white; border-radius: 7px;*/
    color: white;
    background-color: transparent;
}


::-webkit-scrollbar-track-piece {
    background-color: transparent;
}