.header { background-color:white; text-align:center; border-bottom:3px solid gray; } .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; } .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; }