.header { background-color: white; text-align: center; height: 4em; border-bottom: 3px solid gray; } .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 { position: absolute; width: 10%; top:24em; left:45%; right:45%; 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; left:25%; right:25%; margin:0; padding:0; /* border: 5px solid blue;*/ top: 16em; text-align:center; } div.table img { top:25%; bottom:25%; height:50%; width:50%; z-index:9; display: block; margin-left: auto; margin-right: auto } div.table div { /*background-color:green;*/ position:absolute; width:25%; height:25%; text-align:center; } div.table div img{ /*background-color:green;*/ width:25%; height:25%; } div.table div.table0 { top:37.5%; left:0%; } div.table div.table1 { top:-25%; left:37.5%; } div.table div.table2 { top:37.5%; left:75%; } div.table div.table3 { bottom:-25%; left: 37.5%; } 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 { display:none; } ul.tricks li div.trick img.arrow { position:absolute; margin:0; padding:0; /* border: 5px solid blue;*/ text-align:center; width:16%; left:42%; right:42%; top:12em; 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: 16em; 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: 3em; 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: 10em; 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: 3em; 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: 16em; 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: 24em; 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;*/ top: 22em; 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: 24em; 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: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 { 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 { height: 2em; 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; }