html {
  background-color:#111;
  color:#eee;
  overflow:hidden;
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
body {
  background-color:transparent;
  color:#eee;
  margin:0px;
  padding:8px 14px;
  height:98%;
  width:98%
}

h3 {
  display:inline-block;
  font-size:180%;
  margin-right:20px;
  vertical-align:-10%;
}

/******************** SETUP PANE ********************/
#controlTable input {width:95px;}
#controlTable select {width:100%;}
#controlTable tbody td {text-align:right;}
#controlTable tbody td:nth-child(3) {padding-left:45px;}
/****************************************************/



/******************** QUIZ PANE *********************/
#questionPane {
  font-size:250%;
  font-weight:bold;
  padding:15px 177px; /*don't let it run into scores in corner*/
  text-align:center;
}
#questionPane img {
  /*height:125px;*/ /*Force small so question doesn't take whole page*/
  /*TODO: figure out a way to default to 125px in question, but allow bigger at times*/
  vertical-align:middle;
}
#questionPane table { margin:auto; }
#questionPane table tr { vertical-align:middle; }
#questionPane table tr td { text-align:center; }
#quizProgress{
  border:solid 1px #777;
  border-radius:5px;
  margin:0px;
  padding:0px;
  width:100%;
}
#quizProgressBar {
  background-color:#f0f0f0;
  margin:0px;
  height:5px;
  width:1%;
}

#answerTable {
  margin:auto;
  margin-top:24px;
}
#answerTable tr {
  min-height:200px;
  vertical-align:middle;
}
#answerTable td {
  text-align:center;
  vertical-align:center;
}
#answerTable td.answer {
  border-radius:25px;
  font-size:220%;
  font-weight:bold;
  padding:24px;
  height:150px;
  width:34%;
}
#answerTable td.answer p {
  border-top:1px solid rgba(255,255,255,0.4);
  font-size:92%;
  font-weight:normal;
  margin-top:6px;
  padding-top:5px;
}
#answerTable img {
  max-height:180px;
  max-width:400px;
}
/** These answers correspond to buttons Y, X, B, & A **/
#a0 { border:solid 6px rgba(255, 255,  61, 0.6); }
#a1 { border:solid 6px rgba( 61, 158, 255, 0.6); }
#a2 { border:solid 6px rgba(255,  61,  61, 0.6); }
#a3 { border:solid 6px rgba( 61, 255,  61, 0.6); }

/** Styling for Right/Wrong Answers **/
#answerTable td.right {
  border:solid 6px rgba(32, 214,  0, 1);
  background-color:rgba( 0,  66, 23, 0.3);
}
#answerTable td.wrong {
  border:solid 2px rgba(153, 51, 51, 1);
  background-color:rgba( 76, 25, 25, 1);
  opacity:0.3; /*dim the whole div*/
}
#answerTable td.abstainRight {
  border:solid 6px rgba(239, 119, 0, 1);
  background-color:rgba(239, 119, 0, 0.1);
}
#answerTable td.abstainWrong {
  border:solid 2px rgba(153, 51, 51, 1);
  background-color:rgba( 76, 25, 25, 1);
  opacity:0.15; /*dim the whole div*/
}

/** Bonus Pane Overlay **/
.bonus {
  position:absolute;
  top:0px;
  left:0px;
  z-index:1000;

  /*background-color:rgba(0,0,0,0.85);*/
  background-image:url('img/crosshatch.png');
  padding-top:60px;
  height:2000px;
  width:100%;
  text-align:center;
}
.bonus img {
    height:initial;
    width:initial;
    max-height:1000px;
    max-width:1900px;
}

/** Player Scores in Corners during Quiz **/
#s0, #s1, #s2, #s3 {
    position:absolute;
    z-index:999; /*Very top*/
    background-color:black;
    border: solid 5px white;
    font-size:190%;
    height:45px;
    width:170px;
    opacity:0.5; /*grayed out until they buzz in*/
    overflow:hidden;
    padding:5px;
    text-align:center;
    white-space:nowrap;
}
#s0 { /*P1 Yellow*/
    top:0px;
    left:0px;
    border-color:#F0DA00;
    border-top:none;
    border-left:none;
    border-bottom-right-radius:15px;
}
#s1 { /*P2 Red*/
    top:0px;
    right:0px;
    border-color:#F01600;
    border-top:none;
    border-right:none;
    border-bottom-left-radius:15px;
}
#s2 { /*P3 Blue*/
    bottom:0px;
    left:0px;
    border-color:#0083F0;
    border-bottom:none;
    border-left:none;
    border-top-right-radius:15px;
}
#s3 { /*P3 Green*/
    bottom:0px;
    right:0px;
    border-color:#31D600;
    border-bottom:none;
    border-right:none;
    border-top-left-radius:15px;
}
#s0.buzzedIn, #s1.buzzedIn, #s2.buzzedIn, #s3.buzzedIn {
    background-color:#56008e;
    color:#fff;
    font-weight:bold;
    opacity:1;
}
#s0.lockedOut, #s1.lockedOut, #s2.lockedOut, #s3.lockedOut {
    border-color:rgba(153, 51, 51, 1);
    background-color:rgba( 76, 25, 25, 1); /*same color as wrong answer*/
    opacity:0.3; /*dim the whole div*/
}


/** Timer Styling **/
#timerWrap {
  border-radius:100px;
  font-weight:bold;
  height:200px;
  width:200px;
  max-width:200px;
  min-width:200px;
  overflow:visible;
  padding:0px;
}
#timerWrap.flash{ background-color:rgba( 76, 25, 25, .15); }
#timer {
  border-radius:100px;
  /*background-color:#300051;*/
  background:radial-gradient(circle at 50%, #2c0049 15%, #56008e 60%, #7500c4 66%, #cb7cff 67%, #56008e 68%, #2c0049 69%);
  color:rgba(255,255,255,0.85); /*off-white via transparency*/
  font-size:500%;
  margin:auto;
  overflow:hidden;
  width:200px;
  height:200px;
  line-height:200px;
}

/** Gradients that seem to point at the player who buzzed in **/
/* Starting Point: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+22,ffffff+22&1+0,0+23 */
.grad0 { /*P1 Yellow*/
  background: -moz-linear-gradient(-45deg, rgb(255,204,0,0.6) 0%, rgba(255,204,0,0) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(255,204,0,0.6) 0%, rgba(255,204,0,0) 20%); /* Chrome10-25, Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255,204,0,0.6) 0%, rgba(255,204,0,0) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.grad1 { /*P2 Red*/
  background: -moz-linear-gradient(45deg, rgb(204,0,0,0.6) 0%, rgba(204,0,0,0) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, rgba(204,0,0,0.6) 0%, rgba(204,0,0,0) 20%); /* Chrome10-25, Safari5.1-6 */
  background: linear-gradient(225deg, rgba(204,0,0,0.6) 0%, rgba(204,0,0,0) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.grad2 { /*P3 Blue*/
  background: -moz-linear-gradient(135deg, rgb(0,102,255,0.6) 0%, rgba(0,102,255,0) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(135deg, rgba(0,102,255,0.6) 0%, rgba(0,102,255,0) 20%); /* Chrome10-25, Safari5.1-6 */
  background: linear-gradient(45deg, rgba(0,102,255,0.6) 0%, rgba(0,102,255,0) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.grad3 { /*P4 Green*/
  background: -moz-linear-gradient(225deg, rgb(0,153,0,0.6) 0%, rgba(0,153,0,0) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(225deg, rgba0,153,0,0.6) 0%, rgba(0,153,0,0) 20%); /* Chrome10-25, Safari5.1-6 */
  background: linear-gradient(315deg, rgba(0,153,0,0.6) 0%, rgba(0,153,0,0) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/****************************************************/



/******************** SCORE PANE ********************/
#bar0, #bar1, #bar2, #bar3 {margin:auto; width:50%;}
#bar0 {background-color:#fc0;} /*P1 Yellow*/
#bar1 {background-color:#c00;} /*P2 Red*/
#bar2 {background-color:#06f;} /*P3 Blue*/
#bar3 {background-color:#090;} /*P4 Green*/

#scoreTable {margin:auto; width:66%;}
#scoreTable tr {vertical-align:bottom;}
#scoreTable tr td {
  font-size:200%;
  padding:2px 0px;
  text-align:center;
  white-space:nowrap;
}

#name0, #name1, #name2, #name3 {font-weight:bold;}
#scoreTable .negative {
  color:#e00;
  font-weight:bold;
  text-shadow: 0px 0px 15px #FF0000;
/*  text-shadow: 0px 0px 3px white; */
}

#winner {
  color: #fff;
  font-size: 6.5em; /*was 500%*/
  font-weight: 700;
  margin:100px 25px;
  text-align:center;

  letter-spacing: -7px;
  text-transform: uppercase;
  animation: blur 2s ease-out; /* infinite; */
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}
/****************************************************/



/** From here: https://www.bestcssbuttongenerator.com/#/19 **/
.submitButton {
  -moz-box-shadow: 3px 4px 0px 0px #1564ad;
  -webkit-box-shadow: 3px 4px 0px 0px #1564ad;
  box-shadow: 3px 4px 0px 0px #1564ad;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
  background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
  background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
  background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
  background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
  background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
  background-color:#79bbff;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  border:1px solid #337bc4;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  font-weight:bold;
  padding:12px 44px;
  text-decoration:none;
  text-shadow:0px 1px 0px #528ecc;
}
.submitButton:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
  background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
  background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
  background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
  background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
  background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
  background-color:#378de5;
}
.submitButton:active {
  position:relative;
  top:1px;
}

/****** Interesting Styles for reuse by Quiz Questions ******/
.terminal { /** Looks like old-timey terminal text **/
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0, 0.4), rgba(0,0,0, 0.4) 1px,
    transparent 1px,  transparent 2px);
  color:rgba(0, 234, 0, 0.5);
  font-family:monospace;
  text-shadow: 0 0 5px #51FF51;
}

/***** Warnings *****/
.warning {display:none;}
#warning {
    position:absolute;
    top:2px;
    right:5px;
    background-color:#ffdaaa;
    border:solid 3px orange;
    border-radius:8px;
    color:#000;
    padding:15px;
    width:50%;
}
#warning h3 {
    display:block;
    font-size:1.1em;
    margin:7px 0px 0px 0px;
    padding:0px;
}
#warnClose {
    float:right;
    background-color:#777;
    border:solid 1px #eee;
    border-radius:6px;
    color:#eee;
    cursor:pointer;
    font-weight:bold;
    padding:4px 6px;
}
#warnClose:hover {
    background-color:#7aa6ff;
    border-color:#0f5eff;
    color:#000;
}
/***** Keep invisibility at the very bottom so it always trumpe *****/
.invisible {display:none;}