/* 220615 - refactored*/
/* 121112- Responsive design adjustment*/
/* 190613 - level status */
/* MEGG stylesheet engagement.css - generated from meggmaker.pl */
/* Main css tailored by individual colour schemes*/
/*Unless you are proficent with stylesheets only change the values with  EDIT alongside*/

/* Responsive full screen fixed background image*/
html { /* fullscreen background image*/
  background: url('cellbioblue.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

body   {color:#FFFFFF;text-shadow: black 0.1em 0.1em 0.2em;}

table  {color:#FFFFFF;}  

.maindiv {background-color:transparent;
          width:715px;
          margin:auto;
          padding-bottom:5px;
}

#messagediv {text-align:left;width:97%;margin:auto;}  /* new message style */
#messagediv select {font-size:8pt;border:1px solid #ffffff;}
#message {width:50%;}

/* #newuserform {background-color:#404040;} allow for png/swf background  */

/* combine elements sharing same border - golden rounded*/
h1,  #hoftext, .title,  #hoftext,
.menudiv, .menutitle,.maindiv, .cell,.skillcolour,.skillcolourlow,
 #rankingtable td, #interactiontable td, #skillstable td,#techtable td, 
 #halltable td, #spytable td, #battletable td, #logindiv
   {border-style:ridge;border-color:#ffd68c;border-radius:5px;}

/* style of playerstatus bar table cells */
#statusbar {width:98%;}
#statusbar td, #halltableobjective td,#objectivetable td
     {font-size:8pt;
    /*  white-space:nowrap;  */
      border:solid 1px #ffd68c;}
      
/* Use statusbarhoverclass to set up tooltip hover and id to add appropriate text */
.statusbarhoverclass:hover:after{
 border: 1px solid #cccccc;
 background-color: #444;
 position: absolute;
 padding: 3px 5px;
 font-size: 12px;
 z-index: 9999;
 margin-left: -120px;
 margin-top: 30px;
 width: 130px;
 height:130px;
 border-radius:10px;
 opacity:.9;
}

#logindiv {font-weight:bold;width:265px;margin:auto;text-align:left;padding:10px;}

#credithover:hover:after{
 content: 'Adenosine triphosphate is an adenosine-derived nucleotide that supplies large amounts of energy to cells through its hydrolysis to ADP';
}

#menhover:hover:after{
 content: 'Immune Cells are part of the system that protects the body from foreign substances, cells, and tissues';
}

#skillhover:hover:after{
 content: 'A Mutation is a change of the nucleotide sequence of the genome of an organism, virus, or extrachromosomal DNA or other genetic elements.';
}

#weaponhover:hover:after{
 content: 'An Enzyme is a protein molecule that acts as a catalyst to help other organic molecules with chemical reactions.';
}

/* end of staus bar css*/

.title    {color:#000000;background:url('goldbar.jpg');padding:2px 0px 2px 0px;
           font-weight:bold;font-size:10pt;
           margin:auto;margin-top:2px;
           width:98%;
           text-shadow: none;}
           
 /* 180610 - position for the slidemenu effects    */      
#menucontainer {position:absolute;left:-300px;top:2px;}

.menudiv {padding:0px;font-size:8pt;margin:auto;width:125px;}

.menutitle {font-size:10pt;color:black;font-weight:bold;background:url('gameimages/goldbar.jpg');
            text-shadow: none;}

/*Game Title and top row of reports*/
h1   {color:black;background:url('goldbar.jpg');width:98%;
      background-color:transparent;  /*#000044;  EDIT */
      font-size:10pt;
      padding:2px;
      margin:auto; /* ns center */
      margin:2px;
      text-shadow: none;
      }

#alertboxtext h1 {border:none;}

/* input text box style*/
.textbox {border:1px solid #ffffff;
          font-size:8pt;padding:3px;margin:2px;
          margin:auto;color:white;
}

#newgold {width:30px;} /* adjust width of newgold textbox on quiz page */

/*menu top buttons */
.topbutton {text-align:center;
            width:120px;    
            font-size:9pt;font-weight:bold;
            border-width:1px;
            border-style:solid; 
            padding:1px;margin:0px;
            padding-bottom:3px;
            margin:auto; /* ns center */
            border-radius:5px;
            text-shadow: black 0.1em 0.1em 0.2em;
           }
           
/* glow on hover*/
.topbutton:hover {box-shadow:rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

/*make sure sections under top buttons are display:none on start to make menus expand and contract*/
#bm, #gather, #reports, #upgrades, #exit {display:none;}

/*submenu buttons */
.button {border-width:1px;border-style:solid;
         font-size:9pt;font-weight:bold;
         width:120px;    
         padding:1px;padding-bottom:3px;
         margin:auto;margin:0px;
         border-radius:5px;
         }
               
/* quiz css */
/* Quiz questions controls css bank yes no next etc*/
#quizcontrols {text-align:center;margin:auto;
               background:transparent;border:none;
              }
#stem {font-size:11pt;overflow: auto;padding:5px;}

/*distractor class added to button class */
.distractor {font-size:10pt;
             width:auto; 
             text-shadow: none;
             background: url("goldbar.jpg") repeat;
            }
.distractor:hover
     {color:green;box-shadow:0 0 3px 3px rgba(255,180,2,0.8);}  

#qdiv {display:none;} /* 210510 - jquery addition - allows initial hiding of question div jquery slide */
#answerletter {font-size:16pt;color:#ff8000;} /* 120610 - enhance incorrect answer letter*/



/* Hall of fame and News cells*/
.cell {text-align:left;font-size:8pt; padding:2px;}

/*table css*/
#rankingtable td, #interactiontable td, #skillstable td,#techtable td, 
#halltable td, #halltableobjective, #battletable td
      {font-size:8pt; padding:2px;text-align:center;}

/*menu buttons and distractors in questions.pl*/
a {display:block;width:100%;text-decoration:none;}
a:hover {font-weight:bold;}

/* color upgradetable rows */
#upgraderow1 {background-color:#ff0000;}
#upgraderow2 {background-color:#ff3000;}
#upgraderow3 {background-color:#ff6000;}
#upgraderow4 {background-color:#ff9000;}
#upgraderow5 {background-color:#ffc000;}

#certaintydiv a {
     display:inline;
     text-decoration:none;font-weight:bold;
     padding:2px;
     border-width:1px;border-style:solid;
}

/*megg menu requirements */
#menudiv a:hover {width:97%;}

#sndplayer {visibility:hidden;}
#avatardiv {height:110px;width:105px;margin:auto;}

.avatar {width:95px;float:left;text-align:center;height:135px;}
/* Add alertbox styles to main */
/* Alert Box css */
#alertboxcontainer {position:absolute;top:0px;left:0px;z-index:200;
                    background-image:url(transparent.gif);
                       /*  filter:alpha(opacity=50%);   ie
                           -moz-opacity: 5.0;         firefox
                           opacity: 5.0;              w3c*/
                   }
#aboxtitle {color:#ffffff;background-color:#333333;
            margin:2px;font-size:12pt;text-align:center;font-weight:bold;
            /* 181012 - adjust title width to allow for rounded corners*/
            margin:2px 10px 2px 10px;
            }

#alertbox {position:absolute;top:0px;left:0px;
           border:solid 2px;border-color:#888888 #222222 #222222 #888888;
           display:none;height:275px;width:300px;
           background-color:#333333;
           text-align:center;
           /* 181012 - rounded corners*/
  	   -webkit-border-radius: 10px;
  	   -khtml-border-radius: 10px;
           border-radius: 10px; /* ff13 and  ie9 suported*/
          }

#alertboxtext {height:210px;margin:0px 10px  10px 10px;padding:3px;overflow:auto;
               font-size:10pt;font-weight:bold;
               border:solid 1px #000000;
               background-color:#222222;
               background-image:url('menu.png');
               background-repeat:no-repeat;
               background-position:center;
}
/* glow on hover */
#alertbox a:hover {box-shadow:rgba(255, 180, 2, 0.8) 0px 0px 3px 3px;}

#alertbutton {font-weight:bold;font-size:8pt;padding:1px 15px 1px 15px;
              text-decoration:none;
              width:30px; margin:auto;text-align:center; /* line added 230308 */
              border-radius:5px;
}

#banknow {color:yellow;border:1px red solid;text-align:center;}
.notebox {color:yellow;border:1px red solid;text-align:center;}

/* used on background page to display upgrade path in a table */
.skillcolour {background-color:green;}
.skillcolourlow {background-color:#ff9000;}
.briefing {border-style:ridge;border-color:#ffd68c;width:130px;text-align:center;} 

#hoftext {background-color:green;}
#messageframe {display:none;}

 #myscroller {position:relative;overflow:hidden;  /* mandatory */
                width:98%; height:250px;background-color:#000000;       
                margin:auto;                     
              }
.highlight  { font-size:10pt;font-weight:bold;
              padding:2px;margin:2px;
              margin:auto; }
.greenstatus {background-color:green;} /* level status complete */
.orangestatus {background-color:#ff9000;} /* level status incomplete */

.inlineblock {display: inline-block;}  
.floatleft {float:left;}
.floatright {float:right;}
.widebutton {width:200px;}
.narrowbutton {width:60px;}
/* scrollable  tables ie ranking */
.scrolltable  { text-align:center;margin:auto;width:95%;height:450px;overflow:auto;}

/* responsive design for smaller screens*/
@media screen and (max-width: 715px) /* screens less than 715px*/
  {
   .maindiv {width:97%;}
   #statusbar td {font-size:7pt;white-space:normal;}
   #message {width:220px;} /* adjust width for small screen */
   .scrolltable {height:300px;}
/*   img {max-width: 100%} */
  }
   
#menutitle {box-shadow:0 0 3px 3px rgba(255,180,2,0.8);
            margin:5px 5px 5px 0;
            cursor: pointer;}

#menubody {display:none;position:absolute;z-index: 100;} /*ensure menu is always on top */
 
 #newmenu {display:none;
           width:140px;
           margin:auto;
          }