html, body, div, span,
p, a, em, img, small,
center, ol, ul, li,
form, table, tr, th, td
{
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: #aaa;
  outline: 0px dotted green;
  text-align: left;
  font-size: 100%;
  font-family: "silkscreen-1", Verdana, sans-serif;
  letter-spacing: -.05em;
  color: white;
  vertical-align: middle;
}

a {
  text-decoration:none;
}

.wf-loading {
  /* hide web fonts until they have finished loading */
  visibility: hidden;
}

noscript {
  color: red;
  font-weight: bold;
  padding: 2px;
  background-color: white;
  text-align: center;
}




/***** PLAY SCREEN *****/

#readout, #version, #returned {
  position:absolute;
  color:blue;
  background-color: aqua;
  font-size:60%;
  text-align: left;
  z-index:2000;
  display: inline;
}

#readout {
    top: 30px;
}

#readout2 {
  position:absolute;
  color:blue;
  background-color: aqua;
  font-size:60%;
  text-align: left;
  z-index:2000;
  top: 70px;
  display: inline;
}

#returned {
    top: 100px;
}

#toucharea {
  position:relative;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  outline: 0px solid green;
  visibility:visible;
  z-index:80;
  display:inline;
}

.center {
  position:relative;
  max-width:720px;
  min-width:320px;
  width:70%;
  margin-left:auto;
  margin-right:auto;
  outline: 0px solid green;
  text-align: center;
}

.hide {
  background-color: green;
  position:relative;
  display:none;
}

#court {
  position:relative;
  width: 100%;
  height: auto;
  margin: 1% auto;
  background-color: #333;
}

#centerline {
  position:absolute;
  top: 15%;
  height: 75%;
  width: 0%;
  border-left: dashed white .15em;
  margin-left:50%;
  margin-right:50%;
  z-index: 0;
}

/* the 4:3 rectangle that allows the court to keep its shape */
#xgif {
  width:100%;
  visibility:hidden;
}

#playerhide {
  visibility: hidden;
}

#p1 {
  background-color: gray;
  position:absolute;
  left:6%;
  width:3%;
  top:46%;
  height:8%;
  z-index: 100;
  color:green;
}

#p2 {
  background-color: gray;
  position:absolute;
  left:91%;
  width:3%;
  top:46%;
  height:8%;
  z-index: 100;
  color:green;
}

/* inside a 4:3 rectangle, a square is 3:4 */
/* xball moves on X */
#xball {
  height:100%;
  width:3%;
  position:absolute;
  left:50%;
  top:0%;
  visibility:visible;
  z-index:50;
  outline: 0px inset orange;
}

/* inside a 4:3 rectangle, a square is 3:4 */
/* ball moves on Y */
#ball {
  background-color:gray;
  width:100%;
  height:4%;
  position:absolute;
  top:50%;
  left:0%;
  visibility:hidden;
  outline: 0px inset red;
}

#scores {
  position:absolute;
  width:100%;
  height:16.66666%;
  top:2%;
}

#score1 {
  position:absolute;
  top:10%;
  left:5%;
  width:6.25%;
  height:100%;}

#score2 {
  position:absolute;
  top:10%;
  left:88.75%;
  width:6.25%;
  height:100%;
}

.s1, .s2, .s3, .s4, .s5, .s6, .s7 {
  position:absolute;
  width:25%;
  height:12.5%;
  background-color: white;
}

.s1 {left:0; top:0; width:100%;}
.s2 {left:0; top:0; height:45%;}
.s3 {left:77%; top:0; height:45%;}
.s4 {left:0; top:37.5%; width:100%;}
.s5 {left:0; top:37.5%; height:61.25%;}
.s6 {left:77%; top:37.5%; height:61.25%;}
.s7 {left:0; top:90%; width:100%;}

/* scores */
#player1 {
  outline: 0px solid blue;
  position:absolute;
  width: 25%;
  top:5%;
  left: 17%;
}

#player2 {
  outline: 0px solid blue;
  position:absolute;
  top:5%;
  right: 17%;
  width:25%
}

#vs{
  text-align: center;
  font-size:80%;
  position:absolute;
  width: 100%;
  top:5%;
}

#alert {
  position:absolute;
  left:10%;
  top:30%;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  padding: 3% 0%;
  text-align:center;
  color:red;
  font-size: 1.5em;
  z-index:200;
  background-color: #333;
}

#hello {
  color: black;
  font-size: 215%;
  letter-spacing: -.05em;
  font-weight: bold;
}

#login {
  position:absolute;
  left:4%;
  top:22%;
  width:89%;
  padding:2%;
  color:red;
  text-align:center;
  background-color: #ccc;
  z-index:1000;
}

#loginMessage {
  color:red;
}

#entername {
  margin-top: .2em;
  width: 50%;
  font-size: 2em;
}

#go {
  font-size: 1.5em;
}

#cancel {
  margin-top: .5em;
  font-size: .8em;
}









/***** INFO SCREEN *****/

#info {
  background-color: #666;

}

#insertcoin, #spectate, #status, #playerCounts, #rotate {
  position: relative;
  width:100%;
}

#spectate a {
  color: aqua;
}

#insertcoin a {
  color: fuchsia;
  border: 0px solid black;
}

#insertcoin a:hover {
  color: aqua;
  background-color: fuchsia;
}

#rotate {
  display:none;
}

#leaderboard {
  position:relative;
  width:100%;
  max-width:20em;
  min-width:240px;
  text-align: center;
  margin: 1% auto;
  padding-top:2%;
  font-size: 1em;
}

#scoretable {
  width: 60%;
  padding: 2% 0% 5% 0%;
  margin: -2% 24% 5% 16%;
  font-size: 100%;
}

.rank {
  text-align: right;
  padding-right: 10%;
  width: 30%;
}

.name, .disconame {
  text-align: center;
  width: 30%;
}

.disconame {
  color: #888;
}
.scor {
  text-align: right;
  width: 30%;
}

#footer {
  position:relative;
  text-align: center;
  font-size: 53%;
  margin: 1% auto;
  padding: 2%;
  padding-bottom: 10%;
  background-color: #333;
}

#footer p {
  margin-bottom: .75em;
}


a {
  color: #38f
}











/******* MEDIA QUERIES *******/

/* score div positioning tweaks */
@media (min-width: 381px) and (max-width: 512px) {
  .s3 {left:79%; top:0; height:45%;}
  .s6 {left:79%; top:37.5%; height:61.25%;}
}
@media (min-width: 512px) and (max-width: 820px) {
  .s3 {left:79%; top:0; height:45%;}
  .s6 {left:79%; top:37.5%; height:61.25%;}
}


/* iphone portrait mode */
@media (max-width: 320px) and (max-height: 480px) and (orientation: portrait) {
  #rotate {
    display: inline;
  }
}


/* iphone landscape mode */
@media (max-width: 480px) and (max-height: 320px) and (orientation: landscape) {
  body {
    outline:0px solid purple;
  }

  .center {
    margin-top:0;
  }

  #court {
    width:75%;
    margin-top:0;
  }

  #toucharea {
    outline:10px solid blue;
    background-color:blue;
    width:100%;
    height:100%;
    display:inline;
    visibility:visible;
    z-index:10000;
  }

  .s3 {left:85%; top:0; height:45%;}
  .s6 {left:85%; top:37.5%; height:61.25%;}

  #info {
    width: 100%;
    margin: 0;
    display:none;
  }
  
  #entername {
    margin-top: .2em;
    width: 50%;
    font-size: 1.5em;
  }
  
  #go {
    font-size: 1em;
  }
  
  #cancel {
    margin-top: .5em;
    font-size: .7em;
  }

}