css/standard023.css

   1 /* reset CSS (taken from blueprint and modified a bit) */
   2
   3 html, body, div, span,
   4 h1, h2, h3, h4, h5, h6, p,
   5 a,img,  dl, dt, dd, ol, ul, li,
   6 fieldset, form, label, legend,
   7 table, tbody, tfoot, thead, tr, th, td {
   8   margin: 0;
   9   padding: 0;
  10   border: 0;
  11   vertical-align: baseline;
  12 }
  13 table { border-collapse: separate; border-spacing: 0; }
  14 caption, th, td { text-align: left; font-weight: normal; }
  15 table, td, th { vertical-align: middle; }
  16
  17 /*  end reset */
  18
  19 /* some general layout */
  20 h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;}
  21
  22 body { background-color: #ddd; }
  23
  24
  25 /* the header, footer, etc */
  26 .header {
  27   background-color: #fff;
  28   text-align:       center;
  29   height:           4em;
  30   padding-top: 1.5em;
  31   margin-left: 3em;
  32   margin-right: 3em;
  33   border-bottom:    3px solid gray;
  34 }
  35
  36 .lastlogin {
  37   position:absolute;
  38   top:0;
  39   left:3em;
  40 }
  41 .lastlogin span { font-size:smaller;}
  42
  43 .main {
  44   background-color: #fff;
  45   margin-left: 3em;
  46   margin-right: 3em;
  47   min-height: 40em;
  48 }
  49
  50 .footer {
  51   background-color: #fff;
  52   margin-left: 3em;
  53   margin-right: 3em;
  54   padding:0;
  55   border-top: 2px solid gray;
  56   clear:both;
  57   height: 8em;
  58 }
  59 .footer .right { float:right;   font-size:smaller;}
  60 .footer .left  { float:left;  font-size:smaller; }
  61
  62 .status {
  63   position:absolute;
  64   right:4em;
  65   top:0.1em;
  66   font-size: smaller;
  67 }
  68
  69 /* sessions */
  70 .session {
  71   width: 100%;
  72   border-bottom: 1px solid #000;
  73   text-align: center;
  74 }
  75 .session div.sessionrules {
  76   width: 19em;
  77   float: left;
  78   text-align: left;
  79 }
  80 .session div.sessionrules div{
  81   display:none;
  82   background-color: #fff;
  83   border: 1px solid #000;
  84   position:absolute;
  85   z-index: 30;
  86   padding:0.5em;
  87 }
  88 .session div.sessionrules:hover div{ display:block; }
  89 .session div.sessionscore {
  90   width: 19em;
  91   float: right;
  92   text-align: right;
  93 }
  94 .session div.sessionscore div{
  95   position:absolute;
  96   width:12em;
  97   right:3em;
  98   display:none;
  99   background-color: #fff;
 100   border: 1px solid #000;
 101   z-index: 30;
 102 }
 103 .session div.sessionscore:hover div{ display:block;}
 104 .session img.rulesicon{ height: 1em; }
 105
 106 .session .scoretable{
 107   height:20em;
 108   overflow: auto;
 109 }
 110 .session table.score {
 111   margin:0.5em;
 112   width:10em;
 113   border-collapse:collapse;
 114 }
 115
 116 /* all kind of message that should appear in the middle of the page/table */
 117 .joingame,.sickness,.poverty,.total,.message {
 118  position: absolute;
 119  background-color: #fff;
 120  width: 20%;
 121  top:19em;
 122  left:40%;
 123  right:40%;
 124  text-align: center;
 125  z-index:22
 126 }
 127
 128 .total {
 129     top:11em;
 130     width: 14%;
 131     left: 43%;
 132 }
 133 /* scoring */
 134 .total .re {
 135  position: absolute;
 136  left: -12em;
 137  top:8em;
 138  background-color: #eee;
 139  z-index:15;
 140 }
 141 .total .contra {
 142  position: absolute;
 143  right: -14em;
 144  top:8em;
 145  background-color: #eee;
 146  z-index:15;
 147 }
 148
 149 /* output possible rules for  a new game  */
 150 .rules { margin-top:24em;}
 151
 152 /* playing cards*/
 153 .card {
 154   position:absolute;
 155   z-index:20;
 156   top:18em;
 157   left:28em;
 158   text-align:center;
 159   background-color:#fff;
 160   border:2px solid gray;
 161 }
 162 .card img { width:8em; }
 163
 164 /* display the table and the names */
 165 div.table {
 166   position:absolute;
 167   width:100%;
 168   height:37em;
 169   margin:0;
 170   left:0;
 171   padding:0;
 172 /*  border: 3px solid blue; */
 173   top: 9.2em;
 174   text-align:center;
 175 }
 176
 177 div.table img.table {
 178   position:absolute;
 179   width:25%;
 180   top:20%;
 181   height:22em;
 182   left:37.5%;
 183   z-index:5;
 184   display: block;
 185   margin:0;
 186   padding:0;
 187 }
 188 div.table div {
 189   /*background-color:green;*/
 190   position:absolute;
 191   width:12.5%;
 192   text-align:center;
 193   z-index:20;
 194 }
 195 div.table div img{
 196   /*background-color:green;*/
 197   width:20%;
 198 }
 199
 200 div.table div.table0 {
 201   top:45%;
 202   right:62.5%;
 203 }
 204 div.table div.table1 {
 205   top:0%;
 206   left:43.75%;
 207 }
 208 div.table div.table2 {
 209   top:45%;
 210   left:62.5%;
 211 }
 212 div.table div.table3 {
 213   bottom:0%;
 214   left: 43.75%;
 215 }
 216
 217 /* display the card tricks */
 218
 219 ul.tricks {
 220   position:relative;
 221   zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */
 222   list-style:none;
 223   margin:3px;
 224   padding:0;
 225   padding-bottom:3px;
 226   text-align:center;
 227   border-bottom:1px solid #444;
 228 }
 229 ul.tricks a { text-decoration:none; color:#000;}
 230 ul.tricks li {
 231   /*background-color:blue;*/
 232   padding:0.1em;
 233   margin:0.2em 0.5em;
 234   display:inline;
 235 }
 236 ul.tricks li.old {  background-color:#fff; }
 237 ul.tricks li:hover {  background-color: #bbb;}
 238 ul.tricks li.nohighlight:hover {  background-color: #fff;}
 239
 240 ul.tricks li div.trick {
 241   position:absolute;
 242   width:100%;
 243   height:35em;
 244   top:2.2em;
 245   left: 0;
 246   margin:0;
 247   padding:0;
 248 /*  border: 2px solid red;*/
 249   display:block;
 250 }
 251 ul.tricks li div.trick { display:none;}
 252 ul.tricks li div.trick img.arrow {
 253   position:absolute;
 254   margin:0;
 255   padding:0;
 256 /*  border: 5px solid blue;*/
 257   text-align:center;
 258   width:16%;
 259   height:16em;
 260   left:42%;
 261   right:42%;
 262   top:10em;
 263   z-index:8;
 264 }
 265
 266 #trick0 img { float:left; width: 3em; }
 267
 268 hr {clear:both;}
 269
 270 /*ul.tricks li:hover div.table{ display:block; }*/
 271
 272 /* left player */
 273 ul.tricks li div div.card0 img,
 274 ul.tricks li div div.card0 .score,
 275 .vorbehalt0 {
 276   position:absolute;
 277   margin:0;
 278   padding:0;
 279   /*border: 1px solid red;*/
 280   top: 40%;
 281   left:37.5%;
 282   right:56.5%;
 283   width:6%;
 284   z-index:30;
 285 }
 286
 287 .vorbehalt0 {
 288   left:37.5%;
 289   right:57.5%;
 290   width:10%;
 291   text-align:left;
 292 }
 293 ul.tricks li div div.card0 span.comment{
 294   position:absolute;
 295   margin:0;
 296   padding:0;
 297   /*border: 1px solid red;*/
 298   top: 5%;
 299   right:66.5%;
 300   left:17.5%;
 301   width:16%;
 302 }
 303
 304 /* top player */
 305 ul.tricks li div div.card1 img,
 306 ul.tricks li div div.card1 .score,
 307 .vorbehalt1 {
 308   position:absolute;
 309   margin:0;
 310   padding:0;
 311   /*border: 1px solid red;*/
 312   top: 22%;
 313   left:47%;
 314   right:47%;
 315   width:6%;
 316   text-align:center;
 317   z-index:30;
 318 }
 319 .vorbehalt1{
 320   left:45%;
 321   right:45%;
 322   width:10%;
 323   z-index:30;
 324 }
 325 ul.tricks li div div.card1 span.comment{
 326   position:absolute;
 327   margin:0;
 328   padding:0;
 329   /*border: 1px solid red;*/
 330   top: 5%;
 331   left:66.5%;
 332   right:17.5%;
 333   width:16%;
 334   text-align:center;
 335 }
 336
 337 /* right player */
 338 ul.tricks li div div.card2 img,
 339 ul.tricks li div div.card2 .score,
 340 .vorbehalt2{
 341   position:absolute;
 342   margin:0;
 343   padding:0;
 344   /*border: 1px solid red;*/
 345   top: 40%;
 346   right:37.5%;
 347   left:56.5%;
 348   width:6%;
 349   z-index:30;
 350 }
 351 .vorbehalt2{
 352   left:auto;
 353   right:38%;
 354   width:10%;
 355   text-align:right;
 356 }
 357 ul.tricks li div div.card2 span.comment{
 358   position:absolute;
 359   margin:0;
 360   padding:0;
 361   /*border: 1px solid red;*/
 362   top: 85%;
 363   left:66.5%;
 364   right:17.5%;
 365   width:16%;
 366   text-align:center;
 367 }
 368
 369 /* bottom player */
 370 ul.tricks li div div.card3 img,
 371 ul.tricks li div div.card3 .score,
 372 .vorbehalt3{
 373   position:absolute;
 374   margin:0;
 375   padding:0;
 376   /*border: 1px solid red;*/
 377   bottom: 20%;
 378   left:47%;
 379   right:47%;
 380   width:6%;
 381   text-align:center;
 382   z-index:30;
 383 }
 384 .vorbehalt3{
 385   left:45%;
 386   right:45%;
 387   width:10%;
 388   text-align:center;
 389 }
 390 ul.tricks li div div.card3 span.comment{
 391   position:absolute;
 392   margin:0;
 393   padding:0;
 394   /*border: 1px solid red;*/
 395   top: 85%;
 396   right:66.5%;
 397   left:17.5%;
 398   width:16%;
 399 }
 400
 401 span.comment{
 402  border: 3px solid green;
 403  max-height:6em;
 404  overflow: auto;
 405  word-wrap: break-word;
 406 }
 407
 408 ul.tricks li div div span.comment span{
 409   display:block;
 410   text-align:left;
 411   border-top:1px solid green;
 412 }
 413
 414 .mycards {
 415   margin:0;
 416   margin-top:38.5em;
 417   padding:0;
 418   border-top:       2px solid gray;
 419 /* border-bottom:    2px solid green;*/
 420   background-color: #faffc7;
 421   text-align:center;
 422 }
 423
 424 .mycards img { height:6em;}
 425
 426 .exchange {
 427   clear:both;
 428   margin:0;
 429   padding:0;
 430   border:1px solid red;
 431   background-color:yellow;
 432 }
 433
 434 .exchange img { height:6em;}
 435
 436 .line{
 437   clear:both;
 438   border-top:2px solid gray;
 439   margin:0;
 440   padding:0;
 441 }
 442
 443 .gameinfo {
 444   position:absolute;
 445   top:27em;
 446   right:0em;
 447   margin:1em;
 448   margin-top:0em;
 449   margin-right:3em;
 450
 451   width:12em;
 452
 453   padding:0.3em;
 454
 455   border:    2px solid gray;
 456   background-color: #efefef;
 457 }
 458
 459 .usermenu {
 460   position:absolute;
 461   top:10em;
 462   left:3em;
 463   margin:1em;
 464   margin-top:0em;
 465   margin-left:0em;
 466
 467   width: 12em;
 468
 469   border:    2px solid gray;
 470
 471   padding:0.3em;
 472
 473   background-color: #eee;
 474 }
 475
 476 .notes {
 477   position:absolute;
 478   top:27em;
 479   left:0;
 480   margin:1em;
 481   margin-top:0em;
 482   margin-left:3em;
 483
 484   width: 12em;
 485
 486   border:    2px solid gray;
 487
 488   padding:0.3em;
 489
 490   background-color: #efefef;
 491
 492   height:10em;
 493   overflow: auto;
 494   z-index:50;
 495 }
 496
 497 .user { margin-left:25%;margin-right:5%; }
 498 .user td.usergames { width:50%; }
 499 .wide { margin-left:5%;margin-right:5%; }
 500
 501 .over {
 502   text-align:center;
 503   margin-bottom:0.1em;
 504 }
 505
 506 .cardinput {
 507   display:inline;
 508   position:relative;
 509   border: 1px solid #000;
 510 }
 511
 512 .cardinput img { width: 4em;}
 513
 514 .cardinput:hover{ background-color:red;}
 515
 516 div span img.button { width: 2em;}
 517 div span img.tinybutton { width: 1.4em;}
 518
 519 .gamestatuspre {
 520   padding: 0 0.3em;
 521   background-color: #fd8901;
 522 }
 523 .gamestatusover {
 524   padding:0 0.3em;
 525   background-color: #f82c20 ;
 526 }
 527 .gamestatusplay {
 528   padding:0 0.3em;
 529   background-color: #15de26;
 530 }
 531
 532 .multi a{ color: #fff;}
 533
 534 .bigger{ font-size:larger;}
 535
 536
 537 /* statistics using jquery*/
 538 caption {
 539   text-align: center;
 540   margin: 0.5em;
 541   padding: 0.5em;
 542   padding-bottom: 0em;
 543   margin-bottom: 0;
 544  }
 545
 546 table.stats {
 547   margin: 0.5em 1em;
 548   border: solid 0.2em #aeaeae;
 549   -moz-border-radius: 0.5em ;
 550   float: left;
 551 }
 552 table.stats tbody tr.odd td  { background-color:#aeaeae; }
 553 table.stats tbody tr.even td { background-color:#eaeaea; }
 554 table.stats td, table.stats th {
 555   margin-left:  0.2em;
 556   margin-right: 0.2em;
 557   padding-left:  0.2em;
 558   padding-right: 0.2em;
 559   border-right: solid 0.1em #000;
 560 }
 561 table.stats tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 562 table.stats th { border-bottom: solid 0.2em #000 }
 563
 564 table.stats thead tr .header {
 565     background-image: url(bg.png);
 566     background-repeat: no-repeat;
 567     background-position: center right;
 568     cursor: pointer;
 569 }
 570 table.stats tbody td {
 571     padding: 4px;
 572     background-color: #eaeaea;
 573     vertical-align: top;
 574 }
 575 table.stats thead tr .headerSortUp {
 576     background-image: url(asc.png);
 577 }
 578 table.stats thead tr .headerSortDown {
 579     background-image: url(desc.png);
 580 }
 581 table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
 582     background-color: #8dbdd8;
 583 }
 584
 585
 586
 587 /* the login window */
 588 .login {
 589   text-align:center;
 590   padding-top: 1em;
 591 }
 592
 593 .login p, {
 594   padding: 0.1em 0.1em 0.15em;
 595 }
 596 .login h4 {
 597   padding: 0.3em 0.3em 0.45em;
 598 }
 599
 600 /* the login form */
 601 .login form{
 602   width: 24em;
 603   margin: 0.5em auto;
 604   padding: 0.5em 0.5em  1.5em;
 605   text-align: center;
 606 }
 607
 608 fieldset {
 609   border: 2px solid #000;
 610   padding: 0.5em 0.5em 0.75em;
 611   background-color: #eee;
 612 }
 613
 614 .login label, .login input{ margin: 0.5em 0.5em 0.75em;}
 615
 616 .login label{
 617   float:left;
 618   width:7em;
 619   text-align: left;
 620 }
 621
 622 .login input #email, .login input #password{
 623   width:9em;
 624   float:right;
 625 }
 626
 627 .login .submitbutton { background-color: #fff;}
 628 .login .submitbutton:hover { background-color: #aaa;}
 629
 630 #openid_url {
 631   background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
 632   padding-left: 18px;
 633 }
 634
 635 table.openid td, table.openid th{
 636     padding: 0.0em 0.3em;;
 637 }
 638
 639 .newbiehint {
 640     background-color: #fee;
 641 }
 642
 643 .vacation {
 644     color: #666;
 645     background-color: #fc3;
 646 }
 647
 648 div.table div img.gravatar, img.gravatar  {
 649     width:  4em;
 650     height: 4em;
 651     border: 3px solid #aaa;
 652 }
 653
 654 .highcall {
 655     background-color: #fc3;
 656 }