/* 150426 - rewritten main.css */
/* RESET & BASE */
*,*::before,*::after {box-sizing: border-box;}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Segoe UI', Verdana, Arial, sans-serif;
  font-size: 10pt;
  text-align: center;
  margin: 0;
  background-color: #000;
  color: #fff;
  line-height: 1.4;
}

/* ANIMATIONS */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05, 1.05); }
}

.pulser {
  animation: pulse 1s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.85s ease-in forwards;
}

/* LAYOUT */
#content {
  width: 715px;
  margin: auto;
  position: relative;
}

#maingame {
  position: absolute;
  top:70px;
  width: 100%;
}

/* COMMON UI ELEMENTS */
.boxes {
  border: ridge #ffd68c;
  border-radius: 10px;
  background-color: #000040;
  padding: 2px;
}

.goldbar {
  color: #000;
  background: url('goldbar.jpg');
}

.blueradial {background: radial-gradient(#00f, #000058);}

/* TYPOGRAPHY */
h1 {
  font-size: 12pt;
  margin: 0 auto;
  padding: 2px;
  color: #000;
  background: url('goldbar.jpg') repeat;
}

/* INSTRUCTIONS PANEL */
#instructionslink {
  cursor: pointer;
  padding: 5px;
  background: radial-gradient(#00f, #000058);
  position: relative;
  z-index: 10;
}

#instructions {
  display: none;
}

/* BUTTONS */
.button,
.topbutton {
  display: inline-block;
  width: 120px;
  font-size: 9pt;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  padding: 4px;
  margin: 2px auto;
  cursor: pointer;
}

.button {
  color: #ffff00;
  background-color: #aa0000;
  border: 1px solid;
  border-color: #ff0000 #000 #000 #ff0000;
}

.button:hover {
  color: #fff;
  box-shadow: rgba(255, 180, 2, 0.8) 0 0 5px;
}

/* QUIZ AREA */
#stem {
  font-size: 11pt;
  padding: 5px;
  border-radius: 5px;
  background-color: #000;
  overflow: auto;
}

.distractor {
  font-size: 10pt;
  text-align: left;
  color: #000;
  background: url('goldbar.jpg');
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
}

.distractor:hover {
  color: #008000;
}

.cell {
  text-align: left;
  font-size: 8pt;
  padding: 2px;
}

/* LINKS */
a {
  display: block;
  width: 100%;
  text-decoration: none;
}

a:hover {
  font-weight: bold;
  box-shadow: rgba(255, 180, 2, 0.8) 0 0 3px;
}

/* ALERT BOX */
#alertboxcontainer {
  position: absolute;
  top: 0;left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
}

#alertbox {
  position: absolute;
  border: 2px solid #444;
  border-color: #888888 #222222 #222222 #888888;
  display: none;
  height: 300px;
  width: 300px;
  color: #000;
  background-color: #444;
  text-align: center;
  border-radius: 20px;
  animation: pulse 0.75s;
}

#aboxtitle {color:#ffffff;background-color:#444444;margin:2px;
            font-weight:bold;border-radius: 10px;}
            
#alertboxtext {
  height: 220px;
  margin: 5px;
  overflow: auto;
  font-size: 10pt;
  font-weight: bold;
  background-color: #660000;
  color: #FFD68C;
}

.alertbutton {
  font-weight: bold;
  font-size: 8pt;
  padding: 1px 15px 1px 15px;
  width: 80px;
  margin: auto;
  color: #ffa500;
  background-color: #8b0000;
  border-radius: 10px;
  border: 2px solid;
  border-color: red black black red;
}

.alertbutton:hover {
  color: #fff;
  box-shadow: rgba(255, 180, 2, 0.8) 0 0 5px;
}

/* MISC */
#scorebox {
  width: 30px;
  text-align: center;
}

#sndplayer {visibility: hidden;}

#sitelink {
  font-size: 7pt;
  margin-top: 10px;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 650px) {
  #content {width: 100%;}
  img {max-width: 100%;}
}