css/standard020.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:35em;
 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:7.5%;
 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:5%;
 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,ul.tricks li div div.card0 .score, .vorbehalt0 {
 274   position:absolute;
 275   margin:0;
 276   padding:0;
 277   /*border: 1px solid red;*/
 278   top: 40%;
 279   left:37.5%;
 280   right:56.5%;
 281   width:6%;
 282   z-index:30;
 283 }
 284 .vorbehalt0 {
 285   left:37.5%;
 286   right:57.5%;
 287   width:10%;
 288   text-align:left;
 289 }
 290 ul.tricks li div div.card0 span.comment{
 291   position:absolute;
 292   margin:0;
 293   padding:0;
 294   /*border: 1px solid red;*/
 295   top: 5%;
 296   right:66.5%;
 297   left:17.5%;
 298   width:16%;
 299 }
 300
 301 /* top player */
 302 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
 303   position:absolute;
 304   margin:0;
 305   padding:0;
 306   /*border: 1px solid red;*/
 307   top: 22%;
 308   left:47%;
 309   right:47%;
 310   width:6%;
 311   text-align:center;
 312   z-index:30;
 313 }
 314 .vorbehalt1{
 315   left:45%;
 316   right:45%;
 317   width:10%;
 318   z-index:30;
 319 }
 320 ul.tricks li div div.card1 span.comment{
 321   position:absolute;
 322   margin:0;
 323   padding:0;
 324   /*border: 1px solid red;*/
 325   top: 5%;
 326   left:66.5%;
 327   right:17.5%;
 328   width:16%;
 329   text-align:center;
 330 }
 331
 332 /* right player */
 333 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
 334   position:absolute;
 335   margin:0;
 336   padding:0;
 337   /*border: 1px solid red;*/
 338   top: 40%;
 339   right:37.5%;
 340   left:56.5%;
 341   width:6%;
 342   z-index:30;
 343 }
 344 .vorbehalt2{
 345   left:auto;
 346   right:38%;
 347   width:10%;
 348   text-align:right;
 349 }
 350 ul.tricks li div div.card2 span.comment{
 351   position:absolute;
 352   margin:0;
 353   padding:0;
 354   /*border: 1px solid red;*/
 355   top: 85%;
 356   left:66.5%;
 357   right:17.5%;
 358   width:16%;
 359   text-align:center;
 360 }
 361
 362 /* bottom player */
 363 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
 364   position:absolute;
 365   margin:0;
 366   padding:0;
 367   /*border: 1px solid red;*/
 368   bottom: 20%;
 369   left:47%;
 370   right:47%;
 371   width:6%;
 372   text-align:center;
 373   z-index:30;
 374 }
 375 .vorbehalt3{
 376   left:45%;
 377   right:45%;
 378   width:10%;
 379   text-align:center;
 380 }
 381 ul.tricks li div div.card3 span.comment{
 382   position:absolute;
 383   margin:0;
 384   padding:0;
 385   /*border: 1px solid red;*/
 386   top: 85%;
 387   right:66.5%;
 388   left:17.5%;
 389   width:16%;
 390 }
 391
 392 span.comment{
 393  border: 3px solid green;
 394  max-height:6em;
 395  overflow: auto;
 396  word-wrap: break-word;
 397 }
 398
 399 ul.tricks li div div span.comment span{
 400   display:block;
 401   text-align:left;
 402   border-top:1px solid green;
 403 }
 404
 405 .mycards {
 406   margin:0;
 407   margin-top:34.5em;
 408   padding:0;
 409   border-top:       2px solid gray;
 410 /* border-bottom:    2px solid green;*/
 411   background-color: #faffc7;
 412   text-align:center;
 413 }
 414
 415 .mycards img { height:6em;}
 416
 417 .exchange {
 418   clear:both;
 419   margin:0;
 420   padding:0;
 421   border:1px solid red;
 422   background-color:yellow;
 423 }
 424
 425 .exchange img { height:6em;}
 426
 427 .line{
 428   clear:both;
 429   border-top:2px solid gray;
 430   margin:0;
 431   padding:0;
 432 }
 433
 434 .gameinfo {
 435   position:absolute;
 436   top:27em;
 437   right:0em;
 438   margin:1em;
 439   margin-top:0em;
 440   margin-right:3em;
 441
 442   width:12em;
 443
 444   padding:0.3em;
 445
 446   border:    2px solid gray;
 447   background-color: #efefef;
 448 }
 449
 450 .usermenu {
 451   position:absolute;
 452   top:10em;
 453   left:3em;
 454   margin:1em;
 455   margin-top:0em;
 456   margin-left:0em;
 457
 458   width: 12em;
 459
 460   border:    2px solid gray;
 461
 462   padding:0.3em;
 463
 464   background-color: #eee;
 465 }
 466
 467 .notes {
 468   position:absolute;
 469   top:27em;
 470   left:0;
 471   margin:1em;
 472   margin-top:0em;
 473   margin-left:3em;
 474
 475   width: 12em;
 476
 477   border:    2px solid gray;
 478
 479   padding:0.3em;
 480
 481   background-color: #efefef;
 482
 483   height:10em;
 484   overflow: auto;
 485   z-index:50;
 486 }
 487
 488 .user { margin-left:25%;margin-right:5%; }
 489 .user td.usergames { width:50%; }
 490 .wide { margin-left:5%;margin-right:5%; }
 491
 492 .over {
 493   text-align:center;
 494   margin-bottom:0.1em;
 495 }
 496
 497 .cardinput {
 498   display:inline;
 499   position:relative;
 500   border: 1px solid #000;
 501 }
 502
 503 .cardinput img { width: 4em;}
 504
 505 .cardinput:hover{ background-color:red;}
 506
 507 div span img.button { width: 2em;}
 508 div span img.tinybutton { width: 1.4em;}
 509
 510 .gamestatuspre {
 511   padding: 0 0.3em;
 512   background-color: #fd8901;
 513 }
 514 .gamestatusover {
 515   padding:0 0.3em;
 516   background-color: #f82c20 ;
 517 }
 518 .gamestatusplay {
 519   padding:0 0.3em;
 520   background-color: #15de26;
 521 }
 522
 523 .multi a{ color: #fff;}
 524
 525 .bigger{ font-size:larger;}
 526
 527
 528 /* statistics using jquery*/
 529 caption {
 530   text-align: center;
 531   margin: 0.5em;
 532   padding: 0.5em;
 533   padding-bottom: 0em;
 534   margin-bottom: 0;
 535  }
 536
 537 table.stats {
 538   margin: 0.5em 1em;
 539   border: solid 0.2em #aeaeae;
 540   -moz-border-radius: 0.5em ;
 541   float: left;
 542 }
 543 table.stats tbody tr.odd td  { background-color:#aeaeae; }
 544 table.stats tbody tr.even td { background-color:#eaeaea; }
 545 table.stats td, table.stats th {
 546   margin-left:  0.2em;
 547   margin-right: 0.2em;
 548   padding-left:  0.2em;
 549   padding-right: 0.2em;
 550   border-right: solid 0.1em #000;
 551 }
 552 table.stats tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 553 table.stats th { border-bottom: solid 0.2em #000 }
 554
 555 table.stats thead tr .header {
 556     background-image: url(bg.png);
 557     background-repeat: no-repeat;
 558     background-position: center right;
 559     cursor: pointer;
 560 }
 561 table.stats tbody td {
 562     padding: 4px;
 563     background-color: #eaeaea;
 564     vertical-align: top;
 565 }
 566 table.stats thead tr .headerSortUp {
 567     background-image: url(asc.png);
 568 }
 569 table.stats thead tr .headerSortDown {
 570     background-image: url(desc.png);
 571 }
 572 table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
 573     background-color: #8dbdd8;
 574 }
 575
 576
 577
 578 /* the login window */
 579 .login {
 580   text-align:center;
 581   padding-top: 1em;
 582 }
 583
 584 .login p, {
 585   padding: 0.1em 0.1em 0.15em;
 586 }
 587 .login h4 {
 588   padding: 0.3em 0.3em 0.45em;
 589 }
 590
 591 /* the login form */
 592 .login form{
 593   width: 24em;
 594   margin: 0.5em auto;
 595   padding: 0.5em 0.5em  1.5em;
 596   text-align: center;
 597 }
 598
 599 fieldset {
 600   border: 2px solid #000;
 601   padding: 0.5em 0.5em 0.75em;
 602   background-color: #eee;
 603 }
 604
 605 .login label, .login input{ margin: 0.5em 0.5em 0.75em;}
 606
 607 .login label{
 608   float:left;
 609   width:7em;
 610   text-align: left;
 611 }
 612
 613 .login input #email, .login input #password{
 614   width:9em;
 615   float:right;
 616 }
 617
 618 .login .submitbutton { background-color: #fff;}
 619 .login .submitbutton:hover { background-color: #aaa;}
 620
 621 #openid_url {
 622   background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
 623   padding-left: 18px;
 624 }
 625
 626 table.openid td, table.openid th{
 627     padding: 0.0em 0.3em;;
 628 }
 629
 630 .newbiehint {
 631     background-color: #fee;
 632 }
 633
 634 .vacation {
 635     color: #666;
 636     background-color: #fc3;
 637 }