HTML, BODY {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
BODY {
text-align: center;
background-color: #4930F2;
}
/* Master grid. */
#page_content {
/*
display: grid;
grid-template-rows: 7rem auto auto;
grid-gap: 0;
*/
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header {
flex: 1 1;
}
.main_content {
flex: 4 1 auto;
}
.footer {
flex: 1 1;
padding: 1rem 0 0 0;
margin: 0;
}
#footer_grid {
display: grid;
grid-template-columns: min-content auto min-content;
height:100%;
}
#footer_grid > div:first-child {
margin-right: 1em;
}
/* Podium styles */
#player_flex {
display: flex;
justify-content: safe center;
flex-direction: row;
flex-wrap: wrap;
gap: 3ch;
margin: 1em 0 0 0;
}
.podium_buzzer {
display: inline-block;
position: relative;
z-index: 10;
padding: .2em;
border: 2px solid #88766f;
border-radius: 5px;
background-color: #3C2C34;
cursor: not-allowed;
}
.podium_buzzer.highlighted {
position: relative;
z-index: 20;
background:
linear-gradient(to right, #9cb8dd 95%, #e6f6fe 100%) right,
linear-gradient(to left, #9cb8dd 95%, #e6f6fe 100%) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
.podium_buzzer.first_place::before,
.podium_buzzer.second_place::before,
.podium_buzzer.third_place::before {
position: absolute;
top: .65em;
left: .5em;
padding: .3em;
font-family: Arial;
font-size: .9em;
border: 2px solid #fffc;
border-radius: 50%;
z-index: 10;
}
.podium_buzzer.first_place {
box-shadow:
0 0 10px 4px #fdefd799,
0 0 30px 25px #f1e6a1;
}
.podium_buzzer.first_place::before {
content: '1st';
background: linear-gradient(110deg, #f1e6a1 0%, #fcf3e3 45%, #fcf3e3 55%, #f1e6a1 100%);
border-color: #000d;
box-shadow:
0 0 3px 1px #fdefd799,
0 0 6px 4px #f1e6a1;
}
.podium_buzzer.second_place {
box-shadow:
0 0 10px 4px #fff9,
0 0 30px 25px #a6dde0;
}
.podium_buzzer.second_place::before {
content: '2nd';
background: linear-gradient(110deg, #c9ccd4 0%, #ebf0fc 45%, #ebf0fc 55%, #c9ccd4 100%);
border-color: #000d;
box-shadow:
0 0 3px 1px #ebf0fccc,
0 0 6px 4px #c9ccd4;
}
.podium_buzzer.third_place {
box-shadow:
0 0 10px 6px #e89ca899,
0 0 35px 15px #cd7f32;
}
.podium_buzzer.third_place::before {
content: '3rd';
background: linear-gradient(110deg, #cd7f32 0%, #e89ca8 45%, #e89ca8 55%, #cd7f32 100%);
box-shadow:
0 0 3px 1px #e89ca899,
0 0 6px 4px #cd7f32;
}
.podium_buzzer.control {
box-shadow:
0 0 10px 4px #eee9,
0 0 30px 20px #49c3b7;
}
.podium_buzzer.highlighted::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(to bottom, #B9D7FE 92%, #e6f6fe 100%) bottom,
linear-gradient(to top, #B9D7FE 92%, #e6f6fe 100%) top;
background-size: 100% 50%;
background-repeat: no-repeat;
border-radius: 5px;
clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 50%, 50% 50%, 100% 0%);
}
.podium {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
padding: .5em;
border: 2px solid #88766f;
border-radius: 5px;
color: #ffffff;
background: linear-gradient(120deg, #5a3934 0%, #805646 20%, #855c61 50%, #805645 80%, #5a3934 100%);
}
.podium > .buzz_key {
display: inline-block;
padding: .2em .4em;
margin-right: 2ch;
border-radius: 6px;
background: linear-gradient(90deg, #232323, #4a4a4a);
}
.podium > .name {
display: inline-block;
font-weight: bold;
margin-right: 2ch;
}
.podium > .score {
display: inline-block;
min-width: 7ch;
background: linear-gradient(120deg, #34357e 0%, #3c50cc 50%, #34357e 100%);
border: 3px groove #422b01;
}
.podium > .score_negative {
background: linear-gradient(120deg, #af2633 0%, #d13535 50%, #af2633 100%);
}
/* Guess window for podium */
#guess_window {
display: inline-block;
position: absolute;
top: -3.5em;
left: 0;
width: 100%;
background: linear-gradient(110deg, #fffe 0%, #aaae 50%, #fffe 100%);
border-radius: 1em;
border-color: #c0c0c0;
box-shadow: 2px 2px 2px #293a3d;
cursor: default;
}
#guess_window:hover {
background: linear-gradient(110deg, #fff 0%, #aaa 50%, #fff 100%);
}
#guess_window > BUTTON {
border: none;
margin-right: .5em;
margin-left: .5em;
background-color: #0000;
font-size: 2em;
text-shadow: 2px 2px 2px black;
}
#guess_window > BUTTON:hover {
cursor: pointer;
text-shadow: -2px -2px 2px black;
transform: translate(1px);
}
#guess_window > BUTTON:active {
transform: scale(0.97);
}
/* Common navigation link styles. */
.common_nav {
display: inline-block;
padding: .5em;
border: none;
border-radius: 1em;
box-shadow: 3px 3px 3px #3a1420;
font-family: Arial;
font-weight: bold;
color: #d1f6ff;
background-color: #da5780;
text-decoration: none;
text-align: center;
}
.common_nav:hover {
cursor: pointer;
color: #ffffff;
box-shadow: -3px -3px 3px #3a1420;
transform: translate(3px);
}
.common_nav:active {
transform: scale(0.97);
}
/* Common styles */
.close_button {
position: absolute;
top: 0;
right: 0;
border-radius: 0 0 0 .3em;
padding: 0 .2em .25em .2em;
margin: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: .8em;
z-index: 1;
}
.check_slide {
position: relative;
display: inline-block;
width: 4.4rem;
height: 1.2rem;
background: #333;
border: 1px solid black;
border-radius: 1.1rem;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.check_slide::after {
position: absolute;
right: .6em;
content: 'OFF';
font-family: Arial, sans-serif;
font-size: .7em;
font-weight: bold;
line-height: 1.2rem;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
color: #000;
z-index: 0;
}
.check_slide::before {
position: absolute;
left: .6em;
content: 'ON';
font-family: Arial, sans-serif;
font-size: .7em;
font-weight: bold;
line-height: 1.2rem;
color: #00bf00;
z-index: 0;
}
.check_slide > LABEL {
display: block;
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 1.9rem;
border-radius: 1.1rem;
transition: all .4s ease;
cursor: pointer;
z-index: 1;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.check_slide > input[type=checkbox] {
visibility: hidden;
}
.check_slide > input[type=checkbox]:checked + label {
left: 2.40rem;
}
.check_slide + SPAN {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
margin-left: 1ch;
text-shadow: 1px 1px 1px #666666;
}
.check_slide:has(> input[type=checkbox]:checked) + SPAN {
color:#fff;
}
/* Overrides for Loading JEOPARDY!... message */
H1.loading {
padding: .5em 1.5em;
font-size: 1.5em;
}
/* Headings */
#logo {
white-space: nowrap;
font-family: Gyparody;
font-size: 3.5rem;
font-weight: bold;
color: #f4eae3;
text-shadow: 5px 5px 6px #24170e;
}
H2.subheading {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 2rem;
font-weight: bold;
color: #f4eae3;
text-shadow: 5px 5px 6px #24170e;
}
/* Overrides for navigation links for choosing a Jeopardy! game. */
nav.game_menu > a {
padding: .5em 1em;
margin: .5em;
}
nav.game_menu > a:visited:not(:hover) {
color: #1A1A07;
background-color: #9d4b6c;
}
/* Game table with clue values. */
TABLE.game_table {
border-collapse: collapse;
border: none;
/* Center table */
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-weight: bold;
}
/* Table head for clue categories. */
TABLE.game_table THEAD TD {
padding: .5em .3em;
min-width: 10ch;
width: 10vw;
min-height: 2.5ex;
height: 4.5vw;
font-size: 1.5em;
color: #ffffff;
background: linear-gradient(120deg, #0c1579 0%, #131ca6 50%, #0c1579 100%);
border: solid black;
border-width: 12px 10px 5px 10px;
text-transform: uppercase;
}
/* Table - blank row. */
TABLE.game_table TR.blankrow TD {
/*min-height: .4ex; */
height: 0;
background-color: #4930F2;
border-width: 7px 10px;
padding: 0;
}
/* Table cells for dollar values. */
TABLE.game_table TBODY TD {
position: relative;
padding: .2em .8em .1em .8em;
font-family: Headthinker;
font-size: 4.3em;
font-weight: 100;
min-height: 2.5ex;
height: 4.5vw;
border: solid black;
border-width: 7px 10px;
user-select: none;
color: #e6bb5e;
background: linear-gradient(120deg, #0c1579 0%, #131ca6 50%, #0c1579 100%);
z-index: 100;
text-shadow: 6px 6px 6px #000000;
}
/* Dollar value hover. */
TABLE.game_table TBODY TD.unsolved {
cursor: pointer;
}
TABLE.game_table TBODY TD.unsolved:hover {
color: #e6dac7;
}
TABLE.game_table TBODY TD.unsolved::before {
display: block;
position: absolute;
inset: 0;
content: '';
opacity: 0;
z-index: -100;
background: linear-gradient(120deg, #0c1579 0%, #e83595 50%, #0c1579 100%);
transition: all 0.1s ease-in-out;
}
TABLE.game_table TBODY TD.unsolved:hover::before {
cursor: pointer;
opacity: 1;
}
/* Grid to center answers and questions on the page. */
.game_grid {
display: grid;
position: relative;
grid-template-rows: auto;
grid-gap: 0;
height: 100%;
z-index: 100;
}
/* Answer background. */
.game_grid.answer {
background: linear-gradient(120deg, #0c1579 0%, #131ca6 50%, #0c1579 100%);
border: 1px solid black;
}
/* Question background. */
.game_grid::before {
display: block;
position: absolute;
inset: 1.5em;
content: '';
opacity: var(--opacity, 0);
z-index: -100;
border: 2px solid blue;
background: linear-gradient(120deg, #62296a 0%, #b345c4 50%, #62296a 100%);
transition: all var(--trans_time, .8s) ease-in-out;
}
/* End of game background. */
.game_grid.end_game {
background-color: #000000;
background-image: url('/siteMedia/games/jeopardy/end_game.jpg');
background-position: center;
background-repeat: no-repeat;
animation: fadeIn 5s;
}
/* Animation to fade in element. */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* This is the center of the game grid where all the main content goes. */
.game_content {
padding: 0;
}
/* The answers and questions go in here. */
#clue_p {
display: none;
padding: 1em;
font-family: Korinna Extra Bold BT;
font-size: 3.5em;
color: #f8fbff;
text-shadow: 6px 6px 6px #000000;
text-align: center;
transition: all .5s ease-in-out;
text-transform: uppercase;
}
/* This is for the text under the question. */
.click_to_return {
font-family: Arial;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
color: #f8fbff;
text-shadow: none;
}
/* Clue footer with 'question' link. */
.footer BUTTON {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #000000;
background-color: #6aa584;
}
/* Button to add users */
.footer BUTTON.nav_button {
width: 2em;
height: 2.2em;
border: 1px solid black;
border-radius: 0 1em 1em 0;
}
.footer BUTTON#home_btn {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 23.617188 10.933594 L 19.976562 7.292969 L 19.976562 3.089844 C 19.976562 2.328125 19.359375 1.710938 18.597656 1.710938 C 17.839844 1.710938 17.222656 2.328125 17.222656 3.089844 L 17.222656 4.539062 L 14.511719 1.828125 C 13.171875 0.492188 10.84375 0.492188 9.503906 1.832031 L 0.402344 10.933594 C -0.132812 11.472656 -0.132812 12.34375 0.402344 12.882812 C 0.941406 13.417969 1.8125 13.417969 2.351562 12.882812 L 11.453125 3.777344 C 11.75 3.484375 12.269531 3.484375 12.566406 3.777344 L 21.667969 12.882812 C 21.9375 13.148438 22.289062 13.285156 22.640625 13.285156 C 22.996094 13.285156 23.347656 13.148438 23.617188 12.882812 C 24.152344 12.34375 24.152344 11.472656 23.617188 10.933594 Z M 23.617188 10.933594 '/%3E%3Cpath style=' stroke:none%3Bfill-rule:nonzero%3Bfill:rgb(0%25 0%25 0%25)%3Bfill-opacity:1%3B' d='M 12.488281 6.390625 C 12.222656 6.128906 11.796875 6.128906 11.53125 6.390625 L 3.527344 14.394531 C 3.398438 14.523438 3.328125 14.695312 3.328125 14.875 L 3.328125 20.710938 C 3.328125 22.082031 4.4375 23.191406 5.808594 23.191406 L 9.773438 23.191406 L 9.773438 17.054688 L 14.246094 17.054688 L 14.246094 23.191406 L 18.210938 23.191406 C 19.582031 23.191406 20.691406 22.082031 20.691406 20.710938 L 20.691406 14.875 C 20.691406 14.695312 20.621094 14.523438 20.492188 14.394531 Z M 12.488281 6.390625 '/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 30% center;
}
/* This is the link to take you to the next round, if there is one. */
#round_btn {
font-size: .9em;
color: #d1f6ff;
background-color: #da5780;
}
A.next_round {
font-size: .9em;
color: #d1f6ff;
background-color: #da5780;
}
#add_player {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 150;
padding: 1em;
border: 3px solid #000000;
background-color: #a54ad6;
box-shadow: 6px 6px 6px #321b3f;
}
#add_player > FORM {
margin-top: 1em;
text-align: left;
}
#name {
margin-bottom: 1em;
}
#add_player LABEL {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
margin-right: 1ch;
text-shadow: 1px 1px 1px #666666;
}
#add_player input[type=text] {
width: 10ch;
}
#add_player > FORM > BUTTON {
margin-left: 1ch;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
font-weight: bold;
}