body, #middle {margin:auto;
      text-align:center; 
      background-color:#5eaafa;
      background-image:url(blue2blue.png);background-repeat:repeat-x;
     }

body,p,table,tr,td,ul,h2,h3
     {font-size:10pt;color:#000000; 
       font-family:'verdana','arial',sans-serif;}
       
#middle {margin-top:25px;margin-bottom:25px;} 
#top {position: fixed;left: 0;top: 0;height:25px; width: 100%; background-image: url(../goldbar.jpg);}
#bottom {text-align: center;padding: 0px; margin: 0px;}        
#bottom {position: fixed;left: 0;bottom: 0;height:30px; width: 100%; background-image: url(../goldbar.jpg);}        
#webbooklink, #exitlink {width:80px;display:inline-block;}

#container {margin:auto;
           /* margin-top:30px; */
            width:728px;
            background-color:#fff;
            border:1px solid white;
            padding:5px;
            padding-top:0;
            text-align:left;}

h1 	{font-size:13pt;font-weight:bold;
         background-color:#2f5699;
         color:#ffffff;
         border:1px white solid;
         padding:3px;
         margin:0;
         text-align:center;
        }
h2 	{font-size:12pt;font-weight:bold;}
h3 	{font-size:11pt;font-weight:bold;}

/* style of header on opening page index.htm */
.p1header {text-align:center;margin-left:auto;margin-right:auto;
            width:100%;padding:0px;margin:0px;}

body.controlbar {text-align:center;padding:0px;margin:0px;
                background-image:url(goldbar.jpg); /*background-repeat:repeat; */
}

td.question {background-color:#708090;color:white;
             border-style:groove;border-color:#F5DEB3;border-width:medium;font-weight:bold;}
.quizbutton {text-align:center;}
h2.question  {text-align:center;background-color:#708090;color:white;
              border-style:groove;border-color:#F5DEB3;border-width:medium;font-weight:bold;}

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

/*  opening page side by side columns*/
.leftmenu {
           padding:3px;text-align:center;
           border:solid 1px red;
           color:white;background-color:#808080;}

.mainbox {/*margin-left:100px;*/
          text-align:center;}
          
.highlight {border: 1px solid orange;padding:5px;background-color:#c0c0c0;}

.code {font-weight:bold;background-color:#a0a0a0;
       border: 1px solid orange;width:93%;padding:5px;}

.controls {width:80px;text-align:center;font-size:10pt;}

.controlbar select {background-color:darkred;font-size:10pt;font-weight:bold;color:white;}

/* class for a links for in page jumps */
.aname {border:none;padding:0;}

/* ordinary links*/
a {border-left:2px solid red;
     border-right:2px solid black;
     border-top:2px solid red;
     border-bottom:2px solid black;
     padding:0 10px 0 10px;
     text-decoration:none;
     color: white;
     font-family: verdana,sans-serif;
     font-weight: bold;
     background-color:#8b0000;
     border-radius: 5px;
   }

a:hover {border-left:2px solid black;
         border-right:2px solid red;
         border-top:2px solid black;
         border-bottom:2px solid red;
         color:#FFA500;
         }

li a {
     border-left:2px solid red;
     border-right:2px solid black;
     border-top:2px solid red;
     border-bottom:2px solid black;
     padding:1px;
     margin:5px;
     text-decoration:none;
     color: white;
     font-family: verdana,sans-serif;
     font-weight: bold;
     height:20px;
     background-color:#8b0000;
   }

li a:hover {border-left:2px solid black;
                border-right:2px solid red;
                border-top:2px solid black;
                border-bottom:2px solid red;
                padding:1px;
                /*display:block;*/
               height:20px;
               text-decoration:none;
               color:#FFA500;
               background-color:#8B0000;
               font-family: verdana, sans-serif;
               font-weight: bold;               
         }
/* style 'completed' textbox */
#controlbar #textdone {font-size:10pt;}
#controlbar #version {font-size:10pt;}

/* style menu links in bottom #controlbar*/
#controlbar a {border-left:2px solid red;
     border-right:2px solid black;
     border-top:2px solid red;
     border-bottom:2px solid black;
     padding:1px;
     /*display:block;*/
     text-decoration:none;
     color: white;
     font-family: verdana;
     font-weight: bold;
     height:15px;
     background-color:darkred;
   }

#controlbar a:hover {border-left:2px solid black;
                border-right:2px solid red;
                border-top:2px solid black;
                border-bottom:2px solid red;
                padding:1px;
                /*display:block;*/
               text-decoration:none;
               color:orange;
               background-color:darkred;
               font-family: verdana;
               font-weight: bold;
               height:15px;
         }


#textdone, #version {background-color:#8080aa;font-size:8pt;color:white;width:40px;}


/* style lists of links*/
.listoflinks li    {list-style:none;}
.listoflinks li a {display:block;height:20px;width:350px;text-align:center;}

.button {
    border-left:2px solid red;
     border-right:2px solid black;
     border-top:2px solid red;
     border-bottom:2px solid black;
     padding:1px;margin:5px;
/*     display:block; */
     text-align:center;
     text-decoration:none;
     color: white;
     font-family: verdana,sans-serif;
     font-weight: bold;
     width:80px; 
     height:20px;
     background-color:#8b0000;}

/* 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;}
        #container {width:98%;}
        #maingame {top: 60px;width: 100%;}    
        #guessbox, #cluebox {width:95%;font-size:10pt;}
        .code {overflow-x: auto;}
        .highlight {overflow-x: auto;}
  }
 
 
 /* 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:0 5px  5px 5px;overflow:auto;
               font-size:10pt;font-weight:bold;
               background-color:#660000;color:#FFD68C;border:solid 1px #000000;
    background: radial-gradient(#00f, #000058) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
               
.alertbutton {font-weight:bold;font-size:8pt;padding:1px 15px 1px 15px; 
              display:block;
              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) 0 0 3px 3px;}

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