/* Fonts */
@font-face {
    font-family: "Captain Scarlet";
    src: url(fonts/Anderson_Captain_Scarlet.ttf);
}
/* font-family: "Captain Scarlet", "Six Caps", sans-serif */
@font-face {
    font-family: Mysteron;
    src: url(fonts/Anderson_The_Mysterons.ttf);
}
/* font-family: Mysteron, "Jolly Lodger", system-ui */
@font-face {
    font-family: Sofachrome;
    src: url(fonts/Sofachrome_Rg.otf);
}
/* font-family: Sofachrome, Notable, sans-serif */
@font-face {
    font-family: Handel;
    src: url(fonts/Handel_Gothic_Regular.ttf);
}
/* font-family: Handel, Goldman, sans-serif */
@font-face {
    font-family: fireball;
    src: url(fonts/Anderson_Fireball_XL5.ttf);
}
/* font-family: fireball, ??? */
@font-face {
    font-family: stingray;
    src: url(fonts/Anderson_Stingray.ttf);
}
/* font-family:  */
@font-face {
    font-family: secret;
    src: url(fonts/Anderson_The_Secret_Service.ttf);
}
/* font-family:  */
@font-face {
    font-family: thunderbirds;
    src: url(fonts/Anderson_Thunderbirds_Are_GO!.ttf);
}
/* font-family:  */


/* Layout */
body {
    display: grid;
    grid-template-columns: 200px auto 200px ;
    grid-template-rows: auto auto min-content;
    column-gap: 1ch;
    row-gap: 1ch;
}
header {
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-content: center;
}
#left-space {
    grid-column-start: 1;
    grid-row-start: 1;
    padding-bottom: 1em;
    align-content: center;
}
#right-space {
    grid-column-start: 3;
    grid-row-start: 1;
    align-content: center;
}
#left-space img, #right-space img {
    display: block;
    margin: auto;
}
nav#main_nav {
    grid-column-start: 1;
    grid-row: 2 / 4;
    text-align: center;
}
nav#local-nav {
    grid-column-start: 3;
    grid-row: 2 / 4;
    text-align: center;
}
main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
footer {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    vertical-align: bottom;
    text-align: left;
    font-size: 0.6em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
div::after {
    content: "";
    clear: both;
    display: table;
}
subtitle {
    display: block;
}
subtitle:nth-of-type(1) {
    margin-top: -1.5em;
}

dd {
    padding-bottom: 0.5em;
}
.note {
    font-size: smaller;
    font-style: italic;
}
img {
    border:0px;
}
.rfloat {
    float: right;
    padding: 0.25em 0 0.25em 0.5em;
}
.lfloat {
    float: left;
    padding: 0.25em 0.5em 0.25em 0;
}
.caps {
    text-transform: uppercase;
}
h1, subtitle {
    text-align: center;
}
div.update {
    border-bottom: solid #fff 2px;
    margin-bottom: 1.5em;
}

/* default setting */
body {
    background-color: #000;
    color: #eee;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a {
    color: #ff0;
}
.deadlink {
    color: #888;
}
footer {
    color:#aabbff;
}
footer p.broken {
    font-family: 'tahoma', Helvetica, sans-serif;
    color:#3fc8a6;
    font-size: 1em;
}
footer h4 {
    text-decoration: underline;
}
footer a {
    color:#fca2de;
}
nav a {
    font-family: "Handel", "Goldman", sans-serif;
    font-size: x-large;
    text-decoration: none;
    display: block;
    padding: 0.25em;
    text-align: center;
}
nav#main_nav a:nth-of-type(6n+1) {
    color: #ff0000;
}
nav#main_nav a:nth-of-type(6n+2) {
    color: #ffa500;
}
nav#main_nav a:nth-of-type(6n+3) {
    color: #ff0;
}
nav#main_nav a:nth-of-type(6n+4) {
    color: #0c0;
}
nav#main_nav a:nth-of-type(6n+5) {
    color: #00c;
}
nav#main_nav a:nth-of-type(6n+6) {
    color: #a0a;
}

/* Supercar */
body.supercar {
    background-color: #ffc;
    color: #000;
}
body.supercar a {
    color: #c00;
}
body.supercar footer {
    color: hsl(228, 100%, 25%);
}
body.supercar footer p.broken {
    color: hsl(165, 55%, 30%);
}
body.supercar nav#main_nav a:nth-of-type(6n+2) {
    color: #e69500;
}
body.supercar nav#main_nav a:nth-of-type(6n+3) {
    color: #bb3;
}
/* Fireball */
/* Stingray */
body.stingray {
    background-color:#66ccff;
    color:#000000;
}
body.stingray a {
    color:#b00;
}
body.stingray a:visited {
    color:#ff6600;
}
body.stingray footer {
    color:#830;
}
body.stingray footer p.broken {
    color:#174439;
}
body.stingray footer a {
    color:#8e005f;
}
body.stingray nav#main_nav a:nth-of-type(6n+2) {
    color: #f60;
}
body.stingray nav#main_nav a:nth-of-type(6n+4) {
    color: #0a0;
}
/* Joe 90 */ /* Secret Service */
body.joe90, body.secret_service {
    background-color: #590008;
    color: #ffd;
}
body.joe90 nav#main_nav a:nth-of-type(6n+5), body.secret_service nav#main_nav a:nth-of-type(6n+5), body.terrahawks nav#main_nav a:nth-of-type(6n+5) {
    color: #22f;
}
body.joe90 nav#main_nav a:nth-of-type(6n+6), body.secret_service nav#main_nav a:nth-of-type(6n+6) {
    color: #b2f;
}

/* UFO */
body.ufo {
    background-color:#229494;
    color:#000;
}
body.ufo a:link {
    color:#a00;
}
body.ufo nav#main_nav a:nth-of-type(6n+1) {
    color: #a00;
}
body.ufo nav#main_nav a:nth-of-type(6n+4) {
    color: #060;
}
body.ufo nav#main_nav a:nth-of-type(6n+6) {
    color: #808;
}
/* Space: 1999 */
body.s1999 {
    background-color:#CCFFCC;
    color:#000000;
}
body.s1999 a {
    color:#cc0000;
}
body.s1999 a:visited {
    color:#ff6600;
}
body.s1999 nav#main_nav a:nth-of-type(6n+3) {
    color: #cece00;
}
/* Terrahawks */
body.terrahawks {
    background-color: #024;
}
/* Space Precinct */
body.space_precinct {
    background-color: #003;
}

/* personnel pages */
dl.personnel {
    display: grid;
    grid-template-columns: max-content auto;
}
dl.personnel dt {
    grid-column-start: 1;
    font-weight: bold;
}
dl.personnel dd {
    grid-column-start: 2;
    margin-left: 0;
    padding-left: 0.2em;
}
.ep_link {
    font-style: italic;
}
.rl_info {
    margin-top: 1.5em;
}
.personnel_image {
    width: 250px;
    object-fit: contain;
}
dd p {
    margin-top: 0;
}

.votm {
    color: #88ff00;
    font-variant-caps: small-caps;
}

.italic em, i em, .note em {
    font-weight: bold;
}
.italic i, .note i {
    font-style: normal;
}
.italic i em, .note i em {
    font-style: italic;
}


/* Stills */
img.lstill {
    padding: 0.25em 0.5em 0.25em 0;
    float:left;
    clear:left;
}
img.still, img.rstill, img.lstill {
    height: 8em;
    aspect-ratio: 1068 / 600;
}
img.still {
    margin: 0.25em;
}
img.rstill {
    padding:0.25em 0 0.25em 0.5em;
    float:right;
    clear:right;
}

/* episode guides */
div.episode {
    display: grid;
    grid-template-columns: 2em 3em auto 13em calc(1.5em / 296 * 1582);
}
div.episode_no_prod {
    display: grid;
    grid-template-columns: 2.5em auto 13em calc(1.5em / 296 * 1582);
}
div.episode div, div.episode_no_prod {
    padding: 0.5em;
    column-gap: 0.5em;
}
div.ep_no, div.ep_no_dbl {
    grid-column-start: 1;
    text-align: right;
}
    div.ep_no {
        grid-row-start: 1;
    }
    div.ep_no_dbl {
        grid-row-start: 2;
    }
div.prod_no {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
    div.prod_no_dbl {
        grid-column-start: 2;
        grid-row-start: 2;
    }
div.ep_name {
        grid-row: 1 / 2;
    }
    div.ep_name_dbl {
        grid-row-start: 2;
    }
    .episode div.ep_name, .episode div.ep_name_dbl {
        grid-column: 3 / 4;
        font-weight: bold;
    }
    .episode_no_prod div.ep_name, .episode_no_prod div.ep_name_dbl {
        grid-column-start: 2;
        font-weight: bold;
    }

div.air_date {
    grid-row-start: 1;
}
    div.air_date_dbl {
        grid-row-start: 2;
    }
    div.air_date, div.air_date_dbl {
        text-align: right;
        font-style: italic;
    }
    .episode div.air_date, .episode div.air_date_dbl {
        grid-column-start: 4;
    }
    .episode_no_prod div.air_date, .episode_no_prod div.air_date_dbl {
        grid-column-start: 3;
    }
    
.episode .rating div.rating_dbl {
    grid-column-start: 5;
}
    .episode_no_prod div.rating, .episode_no_prod div.rating_dbl {
        grid-column-start: 4;
    }
    div.rating {
        grid-row-start: 1;
    }
    div.rating_dbl {
        grid-row: 1 / 3;
    }
    
.star {
    height: 1.5em;
    aspect-ratio: 1582 / 296;
}
div.blurb {
    grid-row-start: 2;
}
    div.blurb_dbl {
        grid-row-start: 3;
    }
    .episode div.blurb, .episode div.blurb_dbl {
        grid-column: 3 / 6;
    }
    .episode_no_prod div.blurb, .episode_no_prod div.blurb_dbl {
        grid-column: 2 / 5;
    }


.end {
    font-family: 'Comic Relief', system-ui;
    padding-bottom: 2em;
}
.end dl {
    display: grid;
    grid-template-columns: max-content auto;
}
.end dl dt {
    grid-column-start: 1;
    text-align: right;
}
.end dl dd {
    grid-column-start: 2;
    padding-bottom: 0em;
    margin-left: 0.5em;
}
/*.end ul{
    list-style-type:none;
    list-style-image:url("images/newspectrumlogo_small.gif");
}*/
.spotter {
    color: #f6bb78;
    font-style: italic;
    font-size: smaller;
}
.italic {
    font-style: italic;
}

.starring {
    font-family: 'Arial Narrow', 'Nimbus Sans L', sans-serif;
}

.prev-next {
    display: grid;
    grid-template-columns: auto auto;
    font-size: x-large;
    column-gap: 10ch;
}
.prev-next a {
    display: block;
    text-decoration: none;
    padding: 0.5em;
}
.prev-next a:nth-of-type(1) {
    text-align: left;    
}
.prev-next a:nth-of-type(2) {
    text-align: right;
}
.prev-next a:nth-of-type(3) {
    text-align: center;
    grid-column: 1 / 3;
}

/* bingo */
body.bingo {
    text-align: center;
    width: 75vh;
    height: 100vh;
    display: block;
}
.bingo header {
    width: inherit;
}
.bingo main {
    display: grid;
    grid-template-columns: calc(20% - 0.5em - 4px) calc(20% - 0.5em - 4px) calc(20% - 0.5em - 4px) calc(20% - 0.5em - 4px) calc(20% - 0.5em - 4px);
}
.bingo main div {
    aspect-ratio: 1 / 1;
    align-content: center;
    margin: 0;
    padding: 0.25em;
    box-sizing: border-box;
    font-size: x-small;
}

#extra {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    text-align: left;
}
#extra dl {
    display: grid;
    grid-template-columns: max-content auto;
}
#extra dl dd {
    grid-column-start: 1;
    border: 2px solid black;
    height: 3em;
    aspect-ratio: 1 / 1;
    margin: 0.25em;
}
#extra dl dt {
    grid-column-start: 2;
    margin: auto 0.25em;
    
}

#footnotes, .footnotes{
    font-size: small;
    text-align: left;
}
#footnotes dl, dl.footnotes {
    display: grid;
    grid-template-columns: max-content auto;
}
#footnotes dl dt, dl.footnotes dt {
    grid-column-start: 1;
    padding: 0.25em;
}
#footnotes dl dd, dl.footnotes dd {
    grid-column-start: 2;
    padding: 0.25em;
    margin: 0;
}

/* actor pages */
.show {
    width: max-content;
    float: left;
}