.header { background-color: white; text-align: center; height: 4em; border-bottom: 3px solid gray; } .main { min-height: 40em; // margin-left: 12.5em; // margin-right: 12.5em; } .footer { margin:0; margin-top:0.3em; padding:0; border-top: 2px solid #444; font-size:smaller; clear:both; } .footer .right{ float:right; } .footer .left{ float:left; } .status { position:absolute; right:1em; top:0.1em; font-size: smaller; } .joingame,.sickness,.poverty,.total { position: absolute; width: 18em; top:21em; left:22em; text-align: center; } .rules { margin-top:20em; } .card { position:absolute; z-index:20; top:18em; left:28em; text-align: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; width:13em; } div.table span span{ /*background-color:green;*/ position:relative; } div.table span.table0 { top:9em; left:-15em; text-align:right; } div.table span.table1 { top:-3.5em; left: 0em; width:20em; text-align:center; } div.table span.table2 { top:9em; left:22em; text-align:left; vertical-align:center; } div.table span.table3 { top:21.5em; left: 0em; width:20em; text-align:center; } ul.tricks { position:relative; list-style:none; margin:3px; padding:0; padding-bottom:3px; text-align:center; border-bottom:1px solid #444; } ul.tricks a { text-decoration:none; color:#000;} ul.tricks li { /*background-color:blue;*/ margin:0; padding:0.2em 0.5em; display:inline; } ul.tricks li.old { background-color:#fff; } ul.tricks li:hover { background-color: #bbb;} ul.tricks li.nohighlight:hover { background-color: #fff;} 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: 7em; right:22em; } ul.tricks li div div.card1 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 1em; left:-7em; width:28em; text-align:center; } ul.tricks li div div.card2 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 7em; left: 15em; } ul.tricks li div div.card3 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 15em; left:-7em; width:28em; text-align:center; } ul.tricks li div div img { position:absolute; height:6em; margin:0; padding:0; } ul.tricks li div div span.comment { position:absolute; background-color:white; margin:0; padding:0; width:10em; border: 1px solid yellow; z-index:-11; } ul.tricks li div div span.score { position:absolute; width:5em; background-color: #fff; } ul.tricks li div div.card0 span.score { top: 1em; left: 2em; } ul.tricks li div div.card1 span.score { top: -1em; left: 14em; } ul.tricks li div div.card2 span.score { top: 1em; left: -1em; } ul.tricks li div div.card3 span.score { top: 2em; left: 14em; } ul.tricks li div div span.comment:hover { z-index:11; } ul.tricks li div div span.comment { z-index:-11; } ul.tricks li div div.card0 span.comment{ top:6em; left:-15em; border: 3px solid green; } ul.tricks li div div.card1 span.comment{ top:-5em; left:-4em; border: 3px solid green; } ul.tricks li div div.card2 span.comment{ top:-8em; left:6em; border: 3px solid green; } ul.tricks li div div.card3 span.comment{ top:5em; left:27em; border: 3px solid green; } ul.tricks li div div span.comment span{ display:block; width:10em; text-align:left; border-top:1px solid green; } .mycards { margin:0; margin-top:33em; padding:0; border:1px solid red; background-color:yellow; } .mycards img { height:6em; } .exchange { clear:both; margin:0; padding:0; border:1px solid red; background-color:yellow; } .exchange img { height:6em; } .line{ clear:both; border-top:2px solid gray; margin:0; padding:0; } .session { border-bottom:1px solid black; text-align:center; } .gameinfo, .useroptions { float:right; margin:1em; margin-top:3em; margin-right:0em; width:12em; border-top: 2px solid gray; border-left: 2px solid gray; border-bottom: 2px solid gray; padding:0.3em; background-color: #eee; } .usermenu { float: left; margin:1em; margin-top:3em; margin-left:0em; width: 12em; border-top: 2px solid gray; border-right: 2px solid gray; border-bottom: 2px solid gray; padding:0.3em; background-color: #eee; } .over { text-align:center; margin-bottom:0.1em; } .submitbutton { border:0; background-color: #efe; } .submitbutton:hover { background-color:#afa; } .cardinput { display:inline; position:relative; border: 1px solid black; } .cardinput img { width: 4em; } .cardinput:hover{ background-color:red; } div span img.button { height: 2em; width: 2em; }