.header { background-color: white; text-align: center; height: 4em; border-bottom: 3px solid gray; } .lastlogin { position:absolute; font-size:smaller; top:0; left:0; } .main { min-height: 40em; } .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,.message { position: absolute; width: 20%; top:22em; left:40%; right:40%; text-align: center; z-index:22 } .total .re { position: absolute; left: -4em; top:8em; background-color: #fff; z-index:15; } .total .contra { position: absolute; right: -4em; top:8em; background-color: #fff; z-index:15; } .poverty { top:32em; z-index:15; background-color:#fff; } .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; width:99%; height:35em; margin:0; padding:0; // border: 3px solid blue; top: 8.2em; text-align:center; } div.table img.table { position:absolute; width:25%; top:20%; height:22em; left:37.5%; z-index:9; display: block; margin:0; padding:0; } div.table div { /*background-color:green;*/ position:absolute; width:12.5%; text-align:center; z-index:20; } div.table div img{ /*background-color:green;*/ width:20%; } div.table div.table0 { top:45%; right:62.5%; } div.table div.table1 { top:5%; left:43.75%; } div.table div.table2 { top:45%; left:62.5%; } div.table div.table3 { bottom:5%; left: 43.75%; } 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.1em; 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; width:100%; height:35em; top:1.2em; margin:0; padding:0; // border: 2px solid red; display:block; } ul.tricks li div.trick { display:none; } ul.tricks li div.trick img.arrow { position:absolute; margin:0; padding:0; /* border: 5px solid blue;*/ text-align:center; width:16%; height:16em; left:42%; right:42%; top:9em; z-index:8; } hr {clear:both;} /*ul.tricks li:hover div.table{ display:block; }*/ ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 40%; left:37.5%; right:56x.5%; width:6%; z-index:9; } ul.tricks li div div.card0 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 5%; right:66.5%; left:17.5%; width:16%; } ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 20%; left:47%; right:47%; width:6%; text-align:center; z-index:9; } ul.tricks li div div.card1 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 5%; left:66.5%; right:17.5%; width:16%; text-align:center; } ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 40%; right:37.5%; left:56x.5%; width:6%; z-index:9; } ul.tricks li div div.card2 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 80%; left:66.5%; right:17.5%; width:16%; text-align:center; } ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ bottom: 20%; left:47%; right:47%; width:6%; text-align:center; z-index:9; } ul.tricks li div div.card3 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 80%; right:66.5%; left:17.5%; width:16%; } span.comment{ border: 3px solid green; } ul.tricks li div div span.comment span{ display:block; text-align:left; border-top:1px solid green; } .mycards { margin:0; margin-top:34.5em; 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 { position:absolute; top:10em; right:0em; margin:1em; margin-top:0em; 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 { position:absolute; top:10em; left:0; margin:1em; margin-top:0em; 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; } .user { margin-left:25%;margin-right:25%; } .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 { width: 2em; } .gamestatuspre { padding: 0 0.3em; background-color: #fd8901; } .gamestatusover { padding:0 0.3em; background-color: #f82c20 ; } .gamestatusplay { padding:0 0.3em; background-color: #15de26; } .scoretable{ height:10em; overflow: auto; } table.score { width:10em; border-collapse:collapse; } .bigger { font-size:larger; }