/* reset CSS (taken from blueprint and modified a bit) */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, a,img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* end reset */ /* some general layout */ h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;} body { background-color: #ddd; } /* the header, footer, etc */ .header { background-color: #fff; text-align: center; height: 4em; padding-top: 1.5em; margin-left: 3em; margin-right: 3em; border-bottom: 3px solid gray; } .lastlogin { position:absolute; top:0; left:3em; } .lastlogin span { font-size:smaller;} .main { background-color: #fff; margin-left: 3em; margin-right: 3em; min-height: 40em; } .footer { background-color: #fff; margin-left: 3em; margin-right: 3em; padding:0; border-top: 2px solid gray; clear:both; height: 8em; } .footer .right { float:right; font-size:smaller;} .footer .left { float:left; font-size:smaller; } .status { position:absolute; right:4em; top:0.1em; font-size: smaller; } /* sessions */ .session { width: 100%; border-bottom: 1px solid #000; text-align: center; } .session div.sessionrules { width: 19em; float: left; text-align: left; } .session div.sessionrules div{ display:none; background-color: #fff; border: 1px solid #000; position:absolute; z-index: 30; padding:0.5em; } .session div.sessionrules:hover div{ display:block; } .session div.sessionscore { width: 19em; float: right; text-align: right; } .session div.sessionscore div{ position:absolute; width:12em; right:3em; display:none; background-color: #fff; border: 1px solid #000; z-index: 30; } .session div.sessionscore:hover div{ display:block;} .session img.rulesicon{ height: 1em; } .session .scoretable{ height:20em; overflow: auto; } .session table.score { margin:0.5em; width:10em; border-collapse:collapse; } /* all kind of message that should appear in the middle of the page/table */ .joingame,.sickness,.poverty,.total,.message { position: absolute; background-color: #fff; width: 20%; top:19em; left:40%; right:40%; text-align: center; z-index:22 } .total { top:11em; width: 14%; left: 43%; } /* scoring */ .total .re { position: absolute; left: -12em; top:8em; background-color: #eee; z-index:15; } .total .contra { position: absolute; right: -14em; top:8em; background-color: #eee; z-index:15; } /* output possible rules for a new game */ .rules { margin-top:24em;} /* playing cards*/ .card { position:absolute; z-index:20; top:18em; left:28em; text-align:center; background-color:#fff; border:2px solid gray; } .card img { width:8em; } /* display the table and the names */ div.table { position:absolute; width:100%; height:37em; margin:0; left:0; padding:0; /* border: 3px solid blue; */ top: 9.2em; text-align:center; } div.table img.table { position:absolute; width:25%; top:20%; height:22em; left:37.5%; z-index:5; 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:0%; left:43.75%; } div.table div.table2 { top:45%; left:62.5%; } div.table div.table3 { bottom:0%; left: 43.75%; } /* display the card tricks */ ul.tricks { position:relative; zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */ 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;*/ padding:0.1em; margin: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:2.2em; left: 0; 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:10em; z-index:8; } #trick0 img { float:left; width: 3em; } hr {clear:both;} /*ul.tricks li:hover div.table{ display:block; }*/ /* left player */ ul.tricks li div div.card0 img, ul.tricks li div div.card0 .score, .vorbehalt0 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 40%; left:37.5%; right:56.5%; width:6%; z-index:30; } .vorbehalt0 { left:37.5%; right:57.5%; width:10%; text-align:left; } 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%; } /* top player */ ul.tricks li div div.card1 img, ul.tricks li div div.card1 .score, .vorbehalt1 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 22%; left:47%; right:47%; width:6%; text-align:center; z-index:30; } .vorbehalt1{ left:45%; right:45%; width:10%; z-index:30; } 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; } /* right player */ ul.tricks li div div.card2 img, ul.tricks li div div.card2 .score, .vorbehalt2{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 40%; right:37.5%; left:56.5%; width:6%; z-index:30; } .vorbehalt2{ left:auto; right:38%; width:10%; text-align:right; } ul.tricks li div div.card2 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 85%; left:66.5%; right:17.5%; width:16%; text-align:center; } /* bottom player */ ul.tricks li div div.card3 img, ul.tricks li div div.card3 .score, .vorbehalt3{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ bottom: 20%; left:47%; right:47%; width:6%; text-align:center; z-index:30; } .vorbehalt3{ left:45%; right:45%; width:10%; text-align:center; } ul.tricks li div div.card3 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ top: 85%; right:66.5%; left:17.5%; width:16%; } span.comment{ border: 3px solid green; max-height:6em; overflow: auto; word-wrap: break-word; } ul.tricks li div div span.comment span{ display:block; text-align:left; border-top:1px solid green; } .mycards { margin:0; margin-top:38.5em; padding:0; border-top: 2px solid gray; /* border-bottom: 2px solid green;*/ background-color: #faffc7; text-align:center; } .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; } .gameinfo { position:absolute; top:27em; right:0em; margin:1em; margin-top:0em; margin-right:3em; width:12em; padding:0.3em; border: 2px solid gray; background-color: #efefef; } .usermenu { position:absolute; top:10em; left:3em; margin:1em; margin-top:0em; margin-left:0em; width: 12em; border: 2px solid gray; padding:0.3em; background-color: #eee; } .notes { position:absolute; top:27em; left:0; margin:1em; margin-top:0em; margin-left:3em; width: 12em; border: 2px solid gray; padding:0.3em; background-color: #efefef; height:10em; overflow: auto; z-index:50; } .user { margin-left:25%;margin-right:5%; } .user td.usergames { width:50%; } .wide { margin-left:5%;margin-right:5%; } .over { text-align:center; margin-bottom:0.1em; } .cardinput { display:inline; position:relative; border: 1px solid #000; } .cardinput img { width: 4em;} .cardinput:hover{ background-color:red;} div span img.button { width: 2em;} div span img.tinybutton { width: 1.4em;} .gamestatuspre { padding: 0 0.3em; background-color: #fd8901; } .gamestatusover { padding:0 0.3em; background-color: #f82c20 ; } .gamestatusplay { padding:0 0.3em; background-color: #15de26; } .multi a{ color: #fff;} .bigger{ font-size:larger;} /* statistics using jquery*/ caption { text-align: center; margin: 0.5em; padding: 0.5em; padding-bottom: 0em; margin-bottom: 0; } table.stats { margin: 0.5em 1em; border: solid 0.2em #aeaeae; -moz-border-radius: 0.5em ; float: left; } table.stats tbody tr.odd td { background-color:#aeaeae; } table.stats tbody tr.even td { background-color:#eaeaea; } table.stats td, table.stats th { margin-left: 0.2em; margin-right: 0.2em; padding-left: 0.2em; padding-right: 0.2em; border-right: solid 0.1em #000; } table.stats tr td:last-child, table.stats tr th:last-child { border-right: solid 0 #000; } table.stats th { border-bottom: solid 0.2em #000 } table.stats thead tr .header { background-image: url(bg.png); background-repeat: no-repeat; background-position: center right; cursor: pointer; } table.stats tbody td { padding: 4px; background-color: #eaeaea; vertical-align: top; } table.stats thead tr .headerSortUp { background-image: url(asc.png); } table.stats thead tr .headerSortDown { background-image: url(desc.png); } table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; } /* the login window */ .login { text-align:center; padding-top: 1em; } .login p, { padding: 0.1em 0.1em 0.15em; } .login h4 { padding: 0.3em 0.3em 0.45em; } /* the login form */ .login form{ width: 24em; margin: 0.5em auto; padding: 0.5em 0.5em 1.5em; text-align: center; } fieldset { border: 2px solid #000; padding: 0.5em 0.5em 0.75em; background-color: #eee; } .login label, .login input{ margin: 0.5em 0.5em 0.75em;} .login label{ float:left; width:7em; text-align: left; } .login input #email, .login input #password{ width:9em; float:right; } .login .submitbutton { background-color: #fff;} .login .submitbutton:hover { background-color: #aaa;} #openid_url { background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%; padding-left: 18px; } table.openid td, table.openid th{ padding: 0.0em 0.3em;; } .newbiehint { background-color: #fee; } .vacation { color: #666; background-color: #fc3; } div.table div img.gravatar, img.gravatar { width: 4em; height: 4em; border: 3px solid #aaa; } .highcall { background-color: #fc3; }