body, html {
  font-family: Arial,Helvetica,Helv,Verdana,sans-serif;
  /*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
 /* font-size: 12pt;*/
  /*Based on: 5E798D*/
  color: #3F515E;
  background-color: #E0D7D0;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.header {
  background: #3F515E;
  color: #E0D7D0;
  padding-top: 20px;
/*  width: 100%;*/
}

#menuNAV {
  width: 100%;
  background: #3F515E;
}

#shootemDIV, #logoutDIV, #mouseDIV {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.navLI {
  color: #E0D7D0;
  font-size: 14pt;
  font-weight: bold;
}

.navLI:hover {
  color: #3F515E !important;
  background-color: #E0D7D0 !important;
}

.navLI:focus {
  color: #3F515E !important;
  background-color: #E0D7D0 !important;
}

.navA {
  color: #3F515 !importantE;
  font-size: 14pt;
  background-color: #E0D7D0 !important;
}

.navDD {
  background: #E0D7D0 !important;
  color: #3F515E !important;
  border: solid 1px #3F515E;
  border-top: solid 0px #3F515E;
}



.navLI_ON {
      background: #E0D7D0 !important;
      color: #3F515E !important;
      cursor: pointer;
      
    box-shadow: 4px 4px 6px #3F515E !important;
    border: solid 1px #3F515E;
  border-top: solid 0px #E0D7D0;
    }
    
    .navLI_ON:hover {
      background: #E0D7D0 !important;
      color: #3F515E !important;
    }
    
    .navLI_DD {
      background: #E0D7D0 !important;
      color: #3F515E  !important;
    }
    
    
    
    .navLI a:hover:not(.navLI_this) {
      color: #3F515E  !important;
      background: #E0D7D0 !important;
      font-weight: normal;
    }
    .navLI_this {
    /*
      font-weight: bold;: 0;
      font-size: 14pt;
      background: #E0D7D0 !important;
      color: #3F515E  !important;
      border: 0  !important;
      text-align: center;
      */
      color: #E0D7D0;
    font-size: 14pt;
    font-weight: bold;
    border: solid 1px #3F515E;
      background: #ffffff !important;
    }
    



.loginDIV, .gameDIV {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  border: solid 0px #8dccbc;
  padding: 0px;
}

.forminput input, select, textarea  {
  font-size: 10pt;
  height: 25px;
  width: 100%;
  border: solid 0px #999999;
  background: #eeeeee;
}

#showhidePW, #showhideRegPW {
  float: right;
  font-size: 8pt;
  cursor: pointer;
  padding-top: 4px;
}

#lostPW {
  float: left;
  font-size: 8pt;
  cursor: pointer;
  text-align: left;
}

.loginBTN {
  border: solid 1px #8dccbc;
  border-radius: 4px;
  background: cccccc;
  float: right;
}

.loginBTN_NO_FLOAT {
  border: solid 1px #8dccbc;
  border-radius: 4px;
  background: cccccc;
}

.loginBTN:hover {
  background: #c7c7c7;
}

#registerMSG {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

#registerTXT {
  display: none;
}

.regiaterBTNSPAN {
  float: right;
}

#registerformDIV {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

#registerform {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

/*
#gameDIV {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}
*/

.bodyCentered {
  text-align: center;
  font-size: 16pt;
}

.bold-text {
  font-weight: bold;
}

.pad-20 {
  padding: 20px;
}

.pad-top-20 {
  padding-top: 20px;
}

.width-575 {
  width: 575px;
}

#levelSEL, #mouselevelSEL, #mouseeventSEL {
  width: 100%;
  font-size: 14pt;
}

h1 {
  text-align: center;
  font-weight: bold;
  font-size: 48pt;
  letter-spacing: 4px;
}

h2 {
  text-align: center;
  font-weight: bold;
  font-size: 24pt;
}

.link {
 cursor: pointer;
 border: solid 1px #3F515E;
 border-radius: 4px;
 padding-left: 10px;
 padding-right: 10px;
}

#instructionDIV {
  display: none;
  margin-left: auto;
  margin-right: auto; 
  width: 100%; 
}

#shooteminstructionDIV {
  display: none;
  margin-left: auto;
  margin-right: auto; 
  width: 100%; 
}

#mouseinstructionDIV {
  display: none;
  margin-left: auto;
  margin-right: auto; 
  width: 100%; 
}


.link:hover {
 color: #5E798D;
 border: solid 1px #5E798D;
}

.classGameDIV {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.timeDiv {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 24pt;
  padding-top: 100px;
}

.resultText {
  font-size: 18pt;
}

.hidden {
  display: none;
}

.buttonFont-5 {
  font-size: 36pt;
}

.buttonFont-8 {
  font-size: 24pt;
}

.buttonFont-12 {
  font-size: 18pt;
}

.buttonFont-16 {
  font-size: 14pt;
}

.tryBtnDIV {
  display: none;
}

#giveUpDIV {
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  width: max-content;
}

#giveUpDIV:hover {
  color: #ff0000;
}

.size-5 {
  /*width: 80px;*/
  width: 16.67%;
  height: 80px;
  font-size: 36pt;
}

.size-8 {
/*w width: 52px;*/
  width: 11.%;
  height: 52px;
  font-size: 24pt;
}

.size-12 {
 /*w width: 36px;*/
  width: 7.5%;
  height: 36px;
  font-size: 18pt;
}

.size-16 {
/*w  width: 27px;*/
  width: 5.75%;
  height: 27px;
  font-size: 12pt;
}


.size-5-TOTAL {
  width: 85px;
  /*width: 16.67%;*/
  height: 80px;
  font-size: 24pt;
  background-color: #D0C2B8;
  border: solid 4px #E0D7D0;
}

.size-8-TOTAL {
  /*width: 56px;*/
  width: 12%;
  height: 52px;
  font-size: 14pt;
  background-color: #D0C2B8;
  border: solid 4px #E0D7D0;
  margin: 2px;
}

.size-12-TOTAL {
 /* width: 40px;*/
  width: 10%;
  height: 36px;
  font-size: 12pt;
  background-color: #D0C2B8;
  border: solid 4px #E0D7D0;
  margin: 2px;
}

.size-16-TOTAL {
 /* width: 40px;*/
  width: 12%;
  height: 27px;
  font-size: 10pt;
  background-color: #D0C2B8;
  border: solid 4px #E0D7D0;
  margin: 2px;
}



.answerDIV {
  width: 100%;
  text-align: center;
  border: solid 1px #cccccc;
/*  font-size: 36pt;*/
  background-color: #EFEBE7;
/*  width: 80px;
  height: 80px;*/
}

.answerTotalDIV, .gridTOTAL {
/*  font-size: 36pt;*/
  border: solid 1px #cccccc;
  background-color: #D0C2B8;
  width: 100%;
/*  width: 80px;
  height: 80px;*/
}

.gapDIV {
  border: 0;
  width: 10px;
}

.gridTABLE, .answerTABLE {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
              table-layout:fixed;
              width:100%;
}

.gridINPUT, .gridTOTAL {
/*  width: 80px;
  height: 80px;*/
  width: 100%;
  text-align: center;
/*  font-size: 36pt;*/
}

.answerTR {
  width: 100%;
}

.historyLEVEL {
  font-size: 12pt;
  text-align: center;
  background: #D0C2B8;
}



#gameDLG {
  color: #3F515E;
  background-color: #E0D7D0;
}

.GameTABLE-DIV {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
}

.GameTABLE {
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #3F515E;
 /* width: 300px;*/
  background: #ffffff;
              table-layout:fixed;
              width:100%;
}

.whiteBG {
  background: #ffffff;
}

.orangeBG {
  background: #ff9900;
}

.greenBG {
  background: #00ff00;
}

.centerTXT {
  text-align: center;
}

#ConfirmLogoutDIV {
  display: none;
}

#loginHoF {
  cursor: pointer;
}

.linkTXT {
  cursor: pointer;
}

.footerDIV {
  height: 1px;
  background: #3F515E;
  margin-top: 20px;
}

.footerTXT {
  font-size: 8pt;
  margin-top: 10px;
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.footerMENU {
  text-align: center;
  margin-top: 10px;
}

.footerNAV {
  color: #3F515E;
  font-size: 9pt;
  margin-top: 10px;
  cursor: pointer
}

.footerNAV:hover {
  color: #5E798D;
  cursor: pointer
}

#ipTable {
  width: 100%;
}

#ip1, #ip2 {
  width: 100%;
}

#ip3 {
  width: 100%;
  height: 200px;
  border: solid 1px #666666;
}

.greenTXT {
  color: #009900;
}

.redTXT {
  #ff0000;
}

.menuBTN {
/*#overBTN, #clickBTN, #dblclickBTN, #dragBTN {*/
 color: #666666;
 width:100%;
 font-size: 8pt;
 background: #C0AEA1;
 border-radius: 4px;
 border: solid 1px #3F515E;
 font-weight: normal;
}

.menuBTN_OVER {
color: #000000;
 width:100%;
 font-size: 8pt;
 background: #C0AEA1;
 border-radius: 4px;
  background: #F0E0D0;
  text-transform: uppercase;
 font-weight: bold;
}











/* ********************************************************************************** */





  #navOuterDIV {
    background-color: #3F515E;
  }
  
  .nav-center {
    width: max-content;
    margin-left:
    auto; margin-right: auto;
    border: 0;
  }
  /*

    .navLI {
      float: left;
      font-size: 12pt;
      text-align: center;
      cursor: pointer;
      color: #ffffff;
    }
    .navLI:hover {
      background: #8dccbc;
      color: #478040;
      border: 0  !important;
    }
    .navLI a {
      display: block;
      text-decoration: none;
      cursor: pointer;
      color: #ffffff;
    }
    
    .navLI a:hover:not(.navLI_this) {
      color: #478040  !important;
      background: #8dccbc !important;
      font-weight: normal;
    }
    .navLI_this {
      font-weight: normal;
      background: #8dccbc !important;
      color: #478040  !important;
      border: 0  !important;
      text-align: center;
    }
    
    .navLI_ON {
      background: #8dccbc;
      color: #ffffff;
      cursor: pointer;
    }
    
    .navLI_ON:hover {
      background: #8dccbc;
      color: #ffffff;
    }
*/







/* ********************************************************************************** */

















/**********************************************/
/*                                            */
/*              Media Controls                */
/*                                            */
/**********************************************/

@media only screen and (min-width: 1400px) {  /* Bootsttap XX-Large */

  #px1400 {display: inline-block;}
  #px1200 {display: none;}
  #px992  {display: none;}
  #px768  {display: none;}
  #px576  {display: none;}
  #px575  {display: none;}
  
  .startBTN {
    width: 400px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 400px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 25px;
    height: 25px;
    font-size: 7pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 16px;
  }

  .historyTH, .historyTH-VIEW {
    font-weight: bold;
    font-size: 16pt;
    background: #C0AEA1;
    text-align: center;
    border: solid 1px #666666;
  }

  .historyTD {
    text-align: center;
    font-size: 12pt;
    border: solid 1px #666666;
  }
  
  .areaDIV {
    font-size: 12pt;
  }
  
  .loginBTN-WIDTH {
    width: 200px;
  }

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    border: solid 1px #3F515E;
           /*     table-layout:fixed;
                width:100%;*/
  }

}

@media only screen and (max-width: 1399px) and (min-width: 1200px) {  /* Bootsttap X-Large */

  #px1400 {display: none;}
  #px1200 {display: inline-block;}
  #px992  {display: none;}
  #px768  {display: none;}
  #px576  {display: none;}
  #px575  {display: none;}
  
  .startBTN {
    width: 400px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 400px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 25px;
    height: 25px;
    font-size: 7pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 16px;
  }

  .historyTH, .historyTH-VIEW {
    font-weight: bold;
    font-size: 16pt;
    background: #C0AEA1;
    text-align: center;
  }

  .historyTD {
    text-align: center;
    font-size: 12pt;
  }
  
  .areaDIV {
    font-size: 12pt;
  }
  
  .loginBTN-WIDTH {
    width: 200px;
  }

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    border: solid 1px #3F515E;
           /*     table-layout:fixed;
                width:100%;*/
  }



}

@media only screen and (max-width: 1199px) and (min-width: 992px) {  /* Bootsttap Large */

  #px1400 {display: none;}
  #px1200 {display: none;}
  #px992  {display: inline-block;}
  #px768  {display: none;}
  #px576  {display: none;}
  #px575  {display: none;}
  
  .startBTN {
    width: 400px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 400px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 25px;
    height: 25px;
    font-size: 7pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 16px;
  }

  .historyTH, .historyTH-VIEW {
    font-weight: bold;
    font-size: 16pt;
    background: #C0AEA1;
    text-align: center;
  }

  .historyTD {
    text-align: center;
    font-size: 12pt;
  }
  
  .areaDIV {
    font-size: 12pt;
  }
  
  .loginBTN-WIDTH {
    width: 200px;
  }

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    border: solid 1px #3F515E;
           /*     table-layout:fixed;
                width:100%;*/
  }



}

@media only screen and (max-width: 991px) and (min-width: 768px) {  /* Bootsttap Medium */

  #px1400 {display: none;}
  #px1200 {display: none;}
  #px992  {display: none;}
  #px768  {display: inline-block;}
  #px576  {display: none;}
  #px575  {display: none;}
  
  .startBTN {
    width: 400px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 400px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 25px;
    height: 25px;
    font-size: 7pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 16px;
  }

  .historyTH, .historyTH-VIEW {
    font-weight: bold;
    font-size: 16pt;
    background: #C0AEA1;
    text-align: center;
  }

  .historyTD {
    text-align: center;
    font-size: 12pt;
  }
  
  .areaDIV {
    font-size: 12pt;
  }
  
  .loginBTN-WIDTH {
    width: 200px;
  }

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
    width: 600px;;
    border: solid 1px #3F515E;
           /*     table-layout:fixed;
                width:100%;*/
  }



}

@media only screen and (max-width: 767px) and (min-width: 576px) {  /* Bootsttap Small */

  #px1400 {display: none;}
  #px1200 {display: none;}
  #px992  {display: none;}
  #px768  {display: none;}
  #px576  {display: inline-block;}
  #px575  {display: none;}
  
  .startBTN {
    width: 400px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 400px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 25px;
    height: 25px;
    font-size: 7pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 16px;
  }

  .historyTH {
    font-weight: bold;
    font-size: 16pt;
    background: #C0AEA1;
    text-align: center;
  }
  
  .historyTH-VIEW {
    font-weight: bold;
    font-size: 10pt;
    background: #C0AEA1;
    text-align: center;
  }

  .historyTD {
    text-align: center;
    font-size: 12pt;
  }
  
  .areaDIV {
    font-size: 12pt;
  }
  
  .loginBTN-WIDTH {
    width: 200px;
  } 

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
    width: 575px;;
    border: solid 1px #3F515E;
           /*     table-layout:fixed;
                width:100%;*/
  
  }



}

@media only screen and (max-width: 575px) {  /* Bootsttap X-Small */

  #px1400 {display: none;}
  #px1200 {display: none;}
  #px992  {display: none;}
  #px768  {display: none;}
  #px576  {display: none;}
  #px575  {display: inline-block;}
  
  .startBTN {
    width: 300px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    background-color: #3F515E;
    color: #EFEBE7;
  }

  #tryBTN {
    width: 300px;
    margin-top: 10px;
  }
  
  .showNumbleGameBTN {
    width: 20px;
    height: 20px;
    font-size: 6pt;
    margin: 0;
    padding: 0;
  }
  
  .showGameIMG {
    width: 12px;
  }

  .historyTH {
    font-weight: bold;
    font-size: 12pt;
    background: #C0AEA1;
    text-align: center;
  }
  
  .historyTH-VIEW {
    font-weight: bold;
    font-size: 8pt;
    background: #C0AEA1;
    text-align: center;
  }

  .historyTD {
    text-align: center;
    font-size: 10pt;
  }
  
  .areaDIV {
    font-size: 10pt;
  }
  
  .loginBTN-WIDTH {
    width: 120px;
  }

  #resultsTABLE, #rodentMENU {
    margin-left: auto;
    margin-right: auto;
 /*   width: 50%;*/
    border: solid 1px #3F515E;
                table-layout:fixed;
                width:100%;
  }



}