/* main stylesheet use in conjunction with a colour say blue.css */

/* 221022 - Instructionslink radial #maingame 60px*/

/* 211022 - distractor hover green added */

/* 300922 - pulse alertbox */

/* 300922 - instructionslink 5px padding*/

/* 230822 - remove link from alertbox*/

/* 080618 - alertbutton sb id not class*/

/* 140417 - heartbeat */

/* 100417 - fadein animation*/

/* 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.05, 1.05, .8);}

  100% {transform: scale3d(1, 1, 1);}

}



.pulser {animation: pulse 1s 1;animation-iteration-count: infinite;}

/* end of pulse css*/



/* fadein animation - make keyframes that tell the start state and the end state */

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



.fade-in {

          opacity:0;  /* make things invisible upon start */

          -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */

          -moz-animation:fadeIn ease-in 1;

          animation:fadeIn ease-in 1;



          -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

          -moz-animation-fill-mode:forwards;

          animation-fill-mode:forwards;



          -webkit-animation-duration:.75s;

          -moz-animation-duration:.75s;

          animation-duration:.85s;

	      }

/* end of fadein 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 {position: absolute;top: 60px;width: 100%;}  /* 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;

                   padding:5px;

                   background-color:#0000b0; 

                   background: radial-gradient(#00f, #000058) repeat scroll 0 0 rgba(0, 0, 0, 0);

                   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:hover {color: green;}



/* 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 css*/          

#sitelink  {

    font-size: 7pt;

    color: white;

    text-decoration: none;

    margin: auto;

    margin-top: 12px;

    border: none;

    background-color: transparent;

}



/* responsive design for smaller screens*/

@media screen and (max-width: 650px) /* screens less than 650px*/

  {

   body {margin:0;font-size:10pt;}

   #content {width:100%;}

   #maingame {top: 60px;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;

           animation: pulse .75s 1;

           }



#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-radius: 10px;

              border-color: red black black red;

	      border-left: 2px solid red;

	      border-right: 2px solid black;

	      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 */