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