html, body {height:100%;}
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
    background-image: url('images/wood.jpg');
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  }

  canvas {
    display: block;
  }

  #Game {
    width: 100%;
    height: 100%;
    position: relative;
  }



  h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

.wrapper {
  padding: 0 15px 15px 15px;
  xwidth: 480px;
  xmax-width: 320px;
  xmin-width: 300px;
  margin: 0 auto;
  xbackground-color: #808080;
  xbackground-image: url('images/wood.jpg');
}

.pageTitle {
  margin: 5px 0 5px 0;
}

  .pageTitle h1 {
      display: inline-block;
      vertical-align: middle;
  }

  .pageTitle img {
      text-align: center;
      width: 100%;
      padding: 15px 10px 20px 10px;
      max-width: 400px;
      min-width: 240px;
      box-sizing: border-box;
  }

.backButton {
  width: 48px;
  height: 48px;
  margin: 3px 30px 3px 0px;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(images/BackButton.png);
  vertical-align: text-bottom;
  vertical-align: middle;
}



/* .hideGame {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
}
.showGame {
    position: inherit;
    width: auto;
    height: auto;

} */

.popupPage{
    position: absolute;   /*fixed; */
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/wood.jpg');
    z-index: 2;
    xcursor: pointer;
}
.statsTable{
   
    border-collapse: collapse;
     
    padding: 0 15px 0 15px;
    width:100%;
     xmax-width: 400px;
    margin: 0 auto; 
    min-width: 320px;
}
.statsTable  td,.statsTable  th{
    padding:3px 5px 3px 5px;
}
.statsTable  td:nth-child(1) {
    padding-right:10px;
    text-align:left;  
} 
.statsTable th {
    text-align: left;
 }
 
.statsTable tr:nth-child(odd) {
    xbackground-color: #33333365;
    background-color: rgba(51, 51, 51, 0.6)
 }
.statsTable tr:nth-child(even) {
    xbackground-color: #33333335;
    background-color: rgba(51, 51, 51, 0.3)
 }

.achievementList {
  margin: 0 0 50px 0;
  padding: 0 0;
}

  .achievementList li {
      margin: 5px 5px 5px 5px;
      height: 50px;
      background-color: #222222;
      list-style-type: none;
  }

      .achievementList li.NotFound {
          background-color: #808080;
          xbackground: #808080 url('images/QuestionMark50x50.png') left no-repeat;
      }

      .achievementList li img {
          width: 50px;
          vertical-align: top;
          float: left;
          clear: both;
      }

      .achievementList li.NotFound img {
          xvisibility: hidden;
          opacity: 0.4;
      }

      .achievementList li div.title {
          padding: 6px 0 0 65px;
          font-size: 17px;
      }

      .achievementList li div.description {
          padding: 3px 0 0 65px;
          font-size: 12px;
      }

      .achievementList li div.points {
          font-size: 14px;
          float: right;
          background: url('images/coin_c15x15.png') right no-repeat;
          padding: 3px 18px 3px 5px;
          margin: 0 3px 0 0;
          box-sizing: border-box;
      }

.achievementPopup{
        /* Height & width depends on how you want to reveal the overlay (see JS below) */
        xmax-height: 200px;
        width:100%;
        margin:0 auto;
        position: fixed; /* Stay in place */
        z-index: 10; /* Sit on top */
        left: 0;
        top: -200px;
        xtop: 0px;
        overflow-x: hidden; /* Disable horizontal scroll */
        color: #FFFFFF;
        visibility:hidden;
        pointer-events: none;

    
}
.achievementPopup .container{
    xbackground-color:green;
    text-align:left;   
    margin: 0 auto;
    
    min-width:200px;
    max-width:320px;
    
}
.achievementPopup .achievementList li {
    margin: 0px 0px 1px 5px;
}
 
.achievementPopup.showAchievementPopup {
          animation: showAchievementPopup 3s;
}
@keyframes showAchievementPopup {
        0% {
            visibility:visible;
            top: -200px;
        }
    
        10% {
            top: 0px;
        }
        90% {
            top: 0px;
        }
        99% {
             top: -200px;
    
        }
        100% {
             visibility:hidden;
        }
}