/* main stylesheet use in conjunction with a colour say blue.css */
/* 080618 - bugfix - adjusted alertbox button to use id not class*/
/* 010417 - pulser infinite */
/* 170317 - slide information over game, goldbar distractors */
/* 110317 - added pulser, aboxstyle code, .goldbar, removed blue2blue.png */
/* 050317 - rewrite, includes alertbox css  and goldbar */
/* 200714 - added glow to a:hover*/

/* pulse shrink n grow - used by instructions div */
@keyframes pulse {
  0% {transform: scale3d(1, 1, 1);}
  50%{transform: scale3d(1.1, 1, .8);}
  100% {transform: scale3d(1, 1, 1);}
}
.pulser {animation: pulse 1s 1;animation-iteration-count: infinite;}
/* end of pulse css*/

body,table {font-family:verdana,arial,sans-serif;font-size:10pt;
            text-align:center;margin:auto;}
body   {background-color:#000000;color:#FFFFFF;}

#content {background-color:transparent;width:715px;
          margin:auto;padding-bottom:0px;
          position:relative; /* required for instructions overlay */
}

#maingame {border-style:ridge;border-color:#ffd68c;border-radius:10px;
           position: absolute;top: 50px;width: 99%;}  /* required for instructions overlay */

.boxes {border-style:ridge;border-color:#ffd68c;border-radius:10px;}

/* use goldbar class */
.goldbar {color:black;background-color:transparent;background:url('goldbar.jpg');}

/*Game Title*/
h1   {font-size:12pt;
      padding:2px;margin:0px;
      margin:auto; /* ns center */
      color:black;
      background-color:transparent;background:url('goldbar.jpg');
      background-repeat: repeat;}
      
/* style instructions */
#instructionslink {text-align:center;cursor:pointer;
                   background-color:#0000b0; 
                   background: linear-gradient(to bottom,rgba(0,140,255,1) 32%,rgba(0,30,180,1) 64%);
                   position:relative;z-index:10;  /* required for instructions overlay */
                   }
#instructions {display: none;cursor: default;}

.gamecredits {font-size:7pt;color:white;border:none;}

#creditdiv {font-size:12pt;font-weight:bold;} /* at2 only*/

 /* adjust width of scorebox textbox on quiz page */
#scorebox {width:30px;text-align:center;}

/* Quiz questions controls css bank yes no next etc*/
#quizcontrols {width:99%;text-align:center;margin:auto;
               background:transparent;border:none;padding-bottom:10px;
              }

.topbutton {text-align:center;
            width:120px;    
            font-size:9pt;font-weight:bold;
            border-width:1px;
            border-style:solid;
            border-radius:5px;
            padding:1px;margin:0px;
            margin:auto; /* ns center */
           }

.button {text-align:center;
         width:120px;
         font-size:9pt;font-weight:bold;
         border-width:1px;
         border-style:solid; 
         border-radius: 5px;
         padding:1px;margin:0px;
         margin:auto;
         color:#ffff00;
	 background-color:#aa0000;
         border-color:#ff0000 black black #ff0000;  
        }

#stem {font-size:11pt;overflow: auto;padding:5px;border-radius:5px;background-color:#000000;}

/*distractor class added to button class */
.distractor {font-size:10pt;width:auto;text-align:left;
             color: #000000;
             background: url(goldbar.jpg);
             border-color: #ffffff black black #ffffff;} 

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


/* buttons and distractors */
a {display:block;width:100%;text-decoration:none;}
a:hover {font-weight:bold;box-shadow:rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

#sndplayer {visibility:hidden;}

/* sitelink */          
#sitelink {margin-top: 12px;}
#sitelink a {
    font-size: 7pt;
    color: #ffffff;
    text-decoration: none;
    margin: auto;
    width: 80px;
    border: none;
    background-color: transparent;
}

#sitelink a:hover {text-decoration: underline;box-shadow: none;font-weight: normal;}

/* responsive design for smaller screens*/
@media screen and (max-width: 650px) /* screens less than 650px*/
  {
   body {margin:0;font-size:10pt;}
   #content {width:100%;}
   #guessbox, #cluebox {width:95%;font-size:10pt;}
/*   img {max-width: 100%} */
  }


/* Alert Box css */
/* 200214 - added fullscreen translucent background*/
/* 200714 - added glow to alertbox button*/

/* currently enabled so no need for aboxstyle*/
html, body {height: 100%;width:100%;} 
body {min-height: 100%;}

#alertboxcontainer {position:absolute;top:0px;left:0px;z-index:200;
                    background-color: rgba(0,0,0,0.5);
                   }
#aboxtitle {color:#ffffff;background-color:#444444;margin:2px;font-size:12pt;
            text-align:center;font-weight:bold;border-radius: 10px;}
#alertbox {position:absolute;top:0px;left:0px;
           border:solid 2px;border-color:#888888 #222222 #222222 #888888;
           display:none;height:300px;width:300px;
           color:#000000;background-color:#444444;text-align:center;
           border-radius: 20px;}

#alertboxtext {height:220px;margin:0px 5px  5px 5px;overflow:auto;
               font-size:10pt;font-weight:bold;
               background-color:#660000;color:#FFD68C;border:solid 1px #000000;}
               
#alertbutton {font-weight:bold;font-size:8pt;padding:1px 15px 1px 15px; 
              width:80px;
              margin:auto;
              text-decoration:none;
              color:#ffa500;
              background-color:#8b0000;
              border-color: red black black red;
	      border-left: 2px solid red;
	      border-right: 2px solid black;
	      border-radius: 10px;
	      border-style: solid;
              border-width: 2px;
              }
#alertbutton:hover {color: #ffffff;box-shadow: rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

#answerletter {font-size:12pt;}
/*  end of generic aboxstyling */