/* Copyright 2006, 2007, 2008, 2009, 2010 Arun Persaud * * This file is part of e-DoKo. * * e-DoKo is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * e-DoKo is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with e-DoKo. If not, see . * */ body { background-color: #ddd; } /* the header, footer, etc */ header { background-color: #fff; text-align: center; height: 4em; padding-top: 1.5em; margin: 0em 3em; border-bottom: 3px solid gray; } .lastlogin { position:absolute; top:0; left:3em; } .lastlogin span { font-size:smaller;} .main { background-color: #fff; margin: 0em 3em; padding: 1em 0em; 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:10.5%; text-align:center; z-index:20; } div.table div.table0 { top:45%; right:63.5%; } div.table div.table1 { top:2%; left:44.75%; } div.table div.table2 { top:45%; left:63.5%; } div.table div.table3 { bottom:2%; left: 44.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:relative; top:0em; margin:0em; padding:0em; width:100%; border-top: 2px solid gray; background-color: #efaaaa; text-align:center; } .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%; } div.user ul { list-style:none; padding: 0px; } div.user ul li { position: relative; padding:3px; margin: 0px; width: 80%; min-height: 1.2em; border-left: 2px solid #babdb6 ; border-right: 2px solid #babdb6 ; border-bottom: 2px solid #babdb6 ; } div.user ul li:first-child { border-top: 2px solid #babdb6 ; } .gamessession { display:none; } .user .gameid { float: left; width: 5em; } .user .turn { padding-left: 1em; width: 20em; } .user .gameshidesession { display: none; } .user .gameshidesession , .user .gamesshowsession { float:right; width: 10em; } .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;} .gamestatuspre { padding: 0 0.3em; background-color: #f57900; } .gamestatusover { padding:0 0.3em; background-color: #e9b96e ; color: #fff; } .gamestatusplay { padding:0 0.3em; background-color: #8ae234; } .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/register form */ ul.loginregister { width: 24em; margin: 0.25em auto; margin-top: 1.0em; padding: 0.0em; padding-top:0.5em; text-align: right; z-index: 1; } ul.loginregister li { display:inline; border: 0px; border-top: 2px solid #000; border-left: 2px solid #000; padding: 0.5em 0.75em; padding-bottom: 0.25em; background-color: #eee; } ul.loginregister li:last-child { border-right: 2px solid #000;} ul.loginregister li:hover {background-color: #aaa; } .doregister {display: none;} .dologin label,.doregister label {float:left; width: 6em; } .login fieldset{ width: 24em; margin: 0.0em auto; margin-bottom: 0.5em; 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; } fieldset p { font-size:smaller; } .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; float:left; } div img.button { float: right; width: 2em; } div span.numberoftricks { text-align:center; clear:both; display:block; } .highcall { background-color: #fc3; } .about { margin-left: 20%; margin-right: 20%; padding-top: 10%; } .about ul { margin-left: 2em; } .about div { width:12em; height: 6em; margin: 2em; padding: 1em; float:left; border: 1px solid black; } .about .code { background-color: #729fcf; } .about .database { background-color: #8ae234; } .about .graphics { background-color: #e9b96e; } .about .translation { background-color: #fce94f; }