css/standard009.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 hr {clear:both;}
 218
 219 /*ul.tricks li:hover div.table{ display:block; }*/
 220
 221 ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score, .vorbehalt0 {
 222   position:absolute;
 223   margin:0;
 224   padding:0;
 225   /*border: 1px solid red;*/
 226   top: 40%;
 227   left:37.5%;
 228   right:56.5%;
 229   width:6%;
 230   z-index:30;
 231 }
 232 ul.tricks li div div.card0 span.comment{
 233   position:absolute;
 234   margin:0;
 235   padding:0;
 236   /*border: 1px solid red;*/
 237   top: 5%;
 238   right:66.5%;
 239   left:17.5%;
 240   width:16%;
 241 }
 242 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
 243   position:absolute;
 244   margin:0;
 245   padding:0;
 246   /*border: 1px solid red;*/
 247   top: 22%;
 248   left:47%;
 249   right:47%;
 250   width:6%;
 251   text-align:center;
 252   z-index:30;
 253 }
 254 ul.tricks li div div.card1 span.comment{
 255   position:absolute;
 256   margin:0;
 257   padding:0;
 258   /*border: 1px solid red;*/
 259   top: 5%;
 260   left:66.5%;
 261   right:17.5%;
 262   width:16%;
 263   text-align:center;
 264 }
 265 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
 266   position:absolute;
 267   margin:0;
 268   padding:0;
 269   /*border: 1px solid red;*/
 270   top: 40%;
 271   right:37.5%;
 272   left:56x.5%;
 273   width:6%;
 274   z-index:30;
 275 }
 276 ul.tricks li div div.card2 span.comment{
 277   position:absolute;
 278   margin:0;
 279   padding:0;
 280   /*border: 1px solid red;*/
 281   top: 85%;
 282   left:66.5%;
 283   right:17.5%;
 284   width:16%;
 285   text-align:center;
 286 }
 287 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
 288   position:absolute;
 289   margin:0;
 290   padding:0;
 291   /*border: 1px solid red;*/
 292   bottom: 20%;
 293   left:47%;
 294   right:47%;
 295   width:6%;
 296   text-align:center;
 297   z-index:30;
 298 }
 299 ul.tricks li div div.card3 span.comment{
 300   position:absolute;
 301   margin:0;
 302   padding:0;
 303   /*border: 1px solid red;*/
 304   top: 85%;
 305   right:66.5%;
 306   left:17.5%;
 307   width:16%;
 308 }
 309
 310 span.comment{
 311  border: 3px solid green;
 312 }
 313
 314 ul.tricks li div div span.comment span{
 315   display:block;
 316   text-align:left;
 317   border-top:1px solid green;
 318 }
 319
 320 .mycards {
 321   margin:0;
 322   margin-top:34.5em;
 323   padding:0;
 324   border-top:       2px solid gray;
 325 /* border-bottom:    2px solid green;*/
 326   background-color: #faffc7;
 327   text-align:center;
 328 }
 329
 330 .mycards img {
 331   height:6em;
 332 }
 333
 334 .exchange {
 335   clear:both;
 336   margin:0;
 337   padding:0;
 338   border:1px solid red;
 339   background-color:yellow;
 340 }
 341
 342 .exchange img {
 343   height:6em;
 344 }
 345
 346 .line{
 347   clear:both;
 348   border-top:2px solid gray;
 349   margin:0;
 350   padding:0;
 351 }
 352
 353 .session {
 354   border-bottom:1px solid black;
 355   text-align:center;
 356 }
 357 div.session div.sessionrules {
 358   width:19em;
 359   float:left ;
 360   text-align: left;
 361 }
 362 div.session div.sessionscore {
 363   width:19em;
 364   float:right ;
 365   text-align: right;
 366 }
 367 div.session div.sessionrules div{
 368   display:none;
 369   background-color: white;
 370   border: 1px solid black;
 371   position:absolute;
 372   z-index: 30;
 373   padding:0.5em;
 374 }
 375 div.session div.sessionrules:hover div{
 376   display:block;
 377 }
 378 div.session div.sessionscore div{
 379   position:absolute;
 380   width:12em;
 381   right:3em;
 382   display:none;
 383   background-color: white;
 384   border: 1px solid black;
 385   z-index: 30;
 386 }
 387 div.session div.sessionscore:hover div{
 388   display:block;
 389 }
 390
 391 .scoretable{
 392   height:20em;
 393   overflow: auto;
 394 }
 395 table.score {
 396   margin:0.5em;
 397   width:10em;
 398   border-collapse:collapse;
 399 }
 400
 401 .gameinfo {
 402   position:absolute;
 403   top:27em;
 404   right:0em;
 405   margin:1em;
 406   margin-top:0em;
 407   margin-right:3em;
 408
 409   width:12em;
 410
 411   padding:0.3em;
 412
 413   border:    2px solid gray;
 414   background-color: #efefef;
 415 }
 416
 417 .usermenu {
 418   position:absolute;
 419   top:10em;
 420   left:3em;
 421   margin:1em;
 422   margin-top:0em;
 423   margin-left:0em;
 424
 425   width: 12em;
 426
 427   border:    2px solid gray;
 428
 429   padding:0.3em;
 430
 431   background-color: #eee;
 432 }
 433
 434 .notes {
 435   position:absolute;
 436   top:27em;
 437   left:0;
 438   margin:1em;
 439   margin-top:0em;
 440   margin-left:3em;
 441
 442   width: 12em;
 443
 444   border:    2px solid gray;
 445
 446   padding:0.3em;
 447
 448   background-color: #efefef;
 449
 450   height:10em;
 451   overflow: auto;
 452   z-index:50;
 453 }
 454
 455 .user { margin-left:25%;margin-right:5%; }
 456 .user td.usergames { width:50%; }
 457 .wide { margin-left:5%;margin-right:5%; }
 458
 459 .over {
 460   text-align:center;
 461   margin-bottom:0.1em;
 462 }
 463
 464 .submitbutton {
 465   padding: 0.2em;
 466   padding-bottom: 0.3em;
 467   border:0;
 468   background-color: #efe;
 469 }
 470
 471 .submitbutton:hover {
 472   background-color:#afa;
 473 }
 474
 475
 476 .cardinput {
 477   display:inline;
 478   position:relative;
 479   border: 1px solid black;
 480 }
 481
 482 .cardinput img {
 483   width: 4em;
 484 }
 485
 486 .cardinput:hover{
 487   background-color:red;
 488 }
 489
 490 div span img.button {
 491   width: 2em;
 492 }
 493
 494 .gamestatuspre {
 495    padding: 0 0.3em;
 496
 497     background-color: #fd8901;
 498 }
 499 .gamestatusover {
 500    padding:0 0.3em;
 501   background-color: #f82c20 ;
 502 }
 503 .gamestatusplay {
 504   padding:0 0.3em;
 505   background-color: #15de26;
 506 }
 507
 508 .bigger {
 509   font-size:larger;
 510 }
 511
 512 caption {
 513   text-align: center;
 514   margin: 0.5em;
 515   padding: 0.5em;
 516   padding-bottom: 0em;
 517   margin-bottom: 0;
 518  }
 519 table.stats { margin: 0.5em 1em;
 520   border: solid 0.2em #aeaeae;
 521   -moz-border-radius: 0.5em ;
 522   float: left;
 523 }
 524 table.stats tr.odd  { background-color:#aeaeae; }
 525 table.stats tr.even { background-color:#eaeaea; }
 526 table.stats td, table.stats th {
 527   margin-left:  0.2em;
 528   margin-right: 0.2em;
 529   padding-left:  0.2em;
 530   padding-right: 0.2em;
 531   border-right: solid 0.1em black;
 532 }
 533 table.stats  tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 black; }
 534
 535 table.stats th { border-bottom: solid 0.2em black }
 536
 537 .login {
 538   text-align:center;
 539   padding-top: 1em;
 540 }
 541
 542 .login p, {
 543   padding: 0.1em;
 544   padding-bottom: 0.15em;
 545 }
 546 .login h4 {
 547   padding: 0.3em;
 548   padding-bottom: 0.45em;
 549 }
 550
 551 .login form{
 552   width: 20em;
 553   margin: 0.5em auto;
 554   padding: 0.5em;
 555   padding-bottom: 1.5em;
 556   text-align: center;
 557 }
 558
 559 .login legend, .login label{
 560   padding: 0.5em;
 561   padding-bottom: 0.75em;
 562 }
 563
 564 .login input{
 565   margin: 0.5em;
 566   margin-bottom: 0.75em;
 567 }
 568
 569 .login fieldset {
 570   border: 2px solid black;
 571   padding: 0.5em;
 572   padding-bottom: 0.75em;
 573   background-color: #eee;
 574 }
 575
 576 .login .submitbutton {
 577   background-color: #fff;
 578 }
 579
 580 .login .submitbutton:hover {
 581   background-color: #aaa;
 582 }
 583
 584 .login tr.center td{
 585   text-align: center;
 586 }