body {
  background: url(../img/h.jpg) repeat;
  margin:0;
  padding:0;
}

#main{
  color:white;
  text-align:center;
  height:100%;
}

.tcenter {
  text-align:center;
}

.aProb {
  width:270px;
  margin: 1em auto;
}

.aProbBox {
  width:300px;
  margin: 1em auto;
}

.etd {
  width:90px;
  height:120px;
}

.ptd {
  font-size:250%;
  color:#080;
  background:white;
  width:90px;
  height:120px;
  border: solid 2px #080;
}

.ntd {
  width:90px;
  height:120px;
  font-size:250%;
  color:white;
  background:#08f;
}

.mtd {
  width:90px;
  height:120px;
  font-size:250%;
  color:white;
  background:#dfd;
}

.kcard {
  width:81px;
  height:108px;
}
#pond {
  width: 100%;
  background: #0af;
  padding-top: 100px;
  border-radius:10px;
  margin-left: auto;
  margin-right: auto;

}
#title {
  font-size:150%;
  margin-bottom:1em;
}
#deal {
  margin-top:2em;
}
td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ptd {
  text-align: center;
  vertical-align: middle;
}

.flash {
  border: solid 5px yellow;
}

.aCard {
  background: #fff;
  border: solid 2px #066;
  border-radius: 5px;
  box-shadow: 2px 2px 4px gray;
  width: 75px;
  height: 100px;
}

.aCard2 {
  background: #efe;
  border: solid 2px #066;
  border-radius: 5px;
  box-shadow: 2px 2px 4px gray;
  width: 75px;
  height: 100px;
}

.aCardFlash {
  background: yellow;
  border: solid 5px #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 4px gray;
  width: 75px;
  height: 100px;
}

.std-row {
  margin-top:1em;
  margin-bottom:1em;
  text-align:center;
}

.tbox {
  border:solid 2px #fff;
  padding:0.2em;
  border-radius: 10px;
  text-align:left;
  margin:1em 0;
}

#cmmtbox {
  background:#fff;
  margin-bottom:1em;
}

#author {
  font-size:90%;
  margin-top : 1em;
  margin-bottom:1em;
}

#card {
  margin: 20px;
  width: 100%;
  height: 100px;
  list-style: none;
}

#card li img .flash {
  border: solid 5px yellow;
}

#card li {
  margin: 10px;
  width: 75px;
  height: 100px;
  float: left;
  position: relative;
}

#card li img {
  position: absolute;
}

.off,
.lock {
  pointer-events: none;
}


@media screen and (min-width: 769px) {

  .aCard {
    background: #efe;
    border: solid 2px #066;
    border-radius: 5px;
    box-shadow: 2px 2px 4px gray;
    width: 150px;
    height: 200px;
  }

  .aCard2 {
    background: #efe;
    border: solid 2px #066;
    border-radius: 5px;
    box-shadow: 2px 2px 4px gray;
    width: 150px;
    height: 200px;
  }
  
  #card {
    margin: 20px;
    width: 100%;
    height: 200px;
    list-style: none;
  }

  .off,
  .lock {
    pointer-events: none;
  }
}