body{
  background:black;
  overflow-y: hidden
}

section > *{
  display:inline-block;
/*  vertical-align:top;*/
}
header *{
  color:#333;
  text-shadow: 2px 2px #fff;
 -webkit-text-stroke: 1px #ff0000;
}
.halfcourt{
  height:580px;
  width:390px;
  border:0px solid red;
  vertical-align: bottom;
  /*background:red;*/
}
#court{
  margin-top:50px;
  padding-top:10px;
  padding-bottom:10px;
  width:800px;
  height:600px;
  border:2px solid #fff;
  border-radius:10px;
  background:url('../img/court.jpg');
  opacity:0;
}
#p1,#p2{
  width:120px;
  /*background:black;*/
}
#pika{
  width:80px;
}
#gameOver{
  margin-top:50px;
  padding-top:200px;
  padding-bottom:10px;
  width:800px;
  height:600px;
  z-index:-2;
}
#instruction{
  border-radius:10px;
  padding-top:50px;
  z-index:1;
  width:800px;
  height:600px;
  background:white;
  font-size:50px;
  vertical-align:center;
  background-image:url('../img/court.jpg');
}/*
#instruction >:first-child{
  margin-top:80px;
}*/
#instruction > *{
  display:block;
  /*background:red;*/
}
.score{
  font-size: 70px;
  font-weight: bold;
  color: #f93738;
  text-shadow: 2px 2px #333333;
  -webkit-text-stroke: 1px #fff;
}
#method{
  background:url('img/header.png') no-repeat;
  margin-left:50px;
}
#logo{
  height:100px;
  width:300px;
  text-align:right
}
#logo img{
  width:100px;
  vertical-align: bottom
}
#method >*{
  display:inline-block;
  vertical-align:bottom;
}
#keyboard1 *, #keyboard2 *{
  display:block;
}
#countdown{
  font-size: 250px;
  font-weight:bold;
  color:#ff0000;
  position:absolute;
  /*text-shadow: 2px 2px #fff;*/
  -webkit-text-stroke: 2px #000;
}
#animation{
  padding:30px 0;
  height:160px;
  text-align:center;
}
table{
  display:block;
}
tr{
  line-height:50px;
}
#keyboard1 td, #keyboard2 td{
  display:inline-block;
  margin: 2px;
  font-size:35px;
  font-weight:bold;
  padding:0px;
  width:50px;
  height:50px;
  border-radius:10px;
  background:white;
  border: 3px solid black;
}
#instr_p1 td, #instr_p2 td{
  width: 160px;
  font-size:30px;
}
#keyboard1 td:hover{
  cursor:pointer;
  opacity:0.5;
}
#keyboard2 td:hover{
  cursor:pointer;
  opacity:0.5;
}
#keyboard1 td:nth-of-type(2) :hover{
  color:red !important;
}
td.playerCell{
  background:black !important;
  color:#fff;
}
button.gameBtn{
  border-radius:5px;
  border:2px solid black;
  background:#edf04a;
  color:#333;
  font-size:30px;
  font-weight:bold;
  padding:5px 20px;
}
button.gameBtn:hover{
  background:#333;
  color:#fff;
}
#userGuide{
  position:absolute;
  top:300px;
  left:0px;
  width:100%;
  text-align:center;
  font-size:60px;
  font-weight:bold;
  z-index:-1;
}
#userGuide *{
  width:100px;
  background:rgba(255,255,255,0.6);
  border-radius:5px;
  padding:5px 20px;
}