.header {
  background-color:white;
  text-align:center;
  border-bottom:3px solid gray;
}
.header p { 
  position:absolute;
  right:0;
  top:0;
}

p.gamenumber { 
  position:absolute;
  top:0;
  text-align:center;
}

.card { 
  position:absolute;
  z-index:20;
  top:18em;
  left:28em;
  text-aling:center;
  background-color:white;
  border:2px solid gray;
}
.card img { width:8em; }

/* display the table and the names */
div.table {
  position:absolute;
  margin:0;
  padding:0;
/*  border: 5px solid blue;*/
  top: 14em;
  left: 20em;
}

div.table img { 
  height:20em;
  width:20em;
  z-index:9;
}
div.table span {
/*  background-color:green;*/
  position:absolute;
}
div.table span.table0 {
  top:10em;
  left:-5em;
  text-align:right;
}
div.table span.table1 {
  top:-2em;
  left: 0em;
  width:20em;
  text-align:center;
}
div.table span.table2 {
  top:10em;
  left:21em;
  text-align:left;
  vertical-align:center;
}
div.table span.table3 {
  top:23em;
  left: 0em;
  width:20em;
  text-align:center;
}



ul.tricks {
  position:relative;
  list-style:none;
  margin:3px;
  padding:0;
  /*background-color:yellow;*/
  text-align:center;

}

ul.tricks a { text-decoration:none; color:#000;}

ul.tricks li {
  /*background-color:blue;*/
  margin:0.2em 0.5em;  
  display:inline;
}
ul.tricks li:hover {
  background-color: yellow;
}


ul.tricks li div.trick {
  position:absolute;
  margin:0;
  padding:0;
/*  border: 5px solid green;*/
  top: 8em;
  left: 20em;
  height:20em;
  width:20em;
  z-index:9;
  display:none;
}

ul.tricks li div.trick img.arrow {
  position:absolute;
  margin:0;
  padding:0;
  top: 4em;
  left: 3em;
  height:14em;
  z-index:-2;
}

hr {clear:both;}

/*ul.tricks li:hover div.table{ display:block; }*/

ul.tricks li div div.card0 {
  position:absolute;
  margin:0;
  padding:0;
  /*border: 1px solid red;*/
  top: 9em;
  right:27em;
}
ul.tricks li div div.card1 {
  position:absolute;
  margin:0;
  padding:0;
  /*border: 1px solid red;*/
  top: -3em;
  left:-3em;
  width:28em;
  text-align:center;
}
ul.tricks li div div.card2 {
  position:absolute;
  margin:0;
  padding:0;
  /*border: 1px solid red;*/
  top: 9em;
  right:-2em;
}
ul.tricks li div div.card3 {
  position:absolute;
  margin:0;
  padding:0;
  /*border: 1px solid red;*/
  top: 20em;
  left:-3em;
  width:28em;
  text-align:center;
}

ul.tricks li div div img {
  position:absolute;
  height:6em;
  margin:0;
  padding:0;
}

ul.tricks li div div.card0 img {
  top: -2em;
  left:5em;
}
ul.tricks li div div.card1 img {
  top: 3em;
  left:10em;
}
ul.tricks li div div.card2 img {
  top: -2em;
  left:-6em;
}
ul.tricks li div div.card3 img {
  top: -6em;
  left:10em;
}


ul.tricks li div div span {
  position:absolute;
  background-color:white;
  margin:0;
  padding:0;
  width:10em;
  border: 1px solid yellow;
  z-index:11;
}
ul.tricks li div div.card0 span{
  top:1em;
  left:-10em;
  border: 3px solid green;
}
ul.tricks li div div.card1 span{
  top:0em;
  left:1em;
  border: 3px solid green;
}
ul.tricks li div div.card2 span{
  top:-2em;
  left:0em;
  border: 3px solid green;
}
ul.tricks li div div.card3 span{
  top:1em;
  left:3em;
  border: 3px solid green;
}

.mycards {
  clear:both;
  margin:0;
  margin-top:38em;
  padding:0;
  border:1px solid red;
  background-color:yellow;
}

.mycards img {
  height:6em;
}

.line{
  clear:both;
  border-top:2px solid gray;
  margin:0;
  padding:0;
}

.info {
  float:right;
  border:2px solid gray;
  border-top:0;
}

.ruleset {
  float:right;
  border:2px solid gray;
  border-top:0;
}

.time { 
  float:left;
  border:2px solid gray;
  border-top:0;
}

.over { 
  float:right;
  border:2px solid black;
  clear:right;
}

.bug {
  float:left;
  width:10em;
  border:2px solid gray;
  border-top:0;
  padding-top:0.5em;
  clear:left;
}