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