css/standard014.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  max-height:6em;
 358  overflow: auto;
 359  word-wrap: break-word;
 360 }
 361
 362 ul.tricks li div div span.comment span{
 363   display:block;
 364   text-align:left;
 365   border-top:1px solid green;
 366 }
 367
 368 .mycards {
 369   margin:0;
 370   margin-top:34.5em;
 371   padding:0;
 372   border-top:       2px solid gray;
 373 /* border-bottom:    2px solid green;*/
 374   background-color: #faffc7;
 375   text-align:center;
 376 }
 377
 378 .mycards img {
 379   height:6em;
 380 }
 381
 382 .exchange {
 383   clear:both;
 384   margin:0;
 385   padding:0;
 386   border:1px solid red;
 387   background-color:yellow;
 388 }
 389
 390 .exchange img {
 391   height:6em;
 392 }
 393
 394 .line{
 395   clear:both;
 396   border-top:2px solid gray;
 397   margin:0;
 398   padding:0;
 399 }
 400
 401
 402 /* sessions */
 403 .session {
 404   border-bottom:1px solid #000;
 405   text-align:center;
 406 }
 407 div.session div.sessionrules {
 408   width:19em;
 409   float:left ;
 410   text-align: left;
 411 }
 412 div.session div.sessionscore {
 413   width:19em;
 414   float:right ;
 415   text-align: right;
 416 }
 417 div.session div.sessionrules div{
 418   display:none;
 419   background-color: #fff;
 420   border: 1px solid #000;
 421   position:absolute;
 422   z-index: 30;
 423   padding:0.5em;
 424 }
 425 div.session div.sessionrules:hover div{
 426   display:block;
 427 }
 428 div.session div.sessionscore div{
 429   position:absolute;
 430   width:12em;
 431   right:3em;
 432   display:none;
 433   background-color: #fff;
 434   border: 1px solid #000;
 435   z-index: 30;
 436 }
 437 div.session div.sessionscore:hover div{
 438   display:block;
 439 }
 440 div.session img.rulesicon {
 441  height: 1em;
 442 }
 443
 444 .scoretable{
 445   height:20em;
 446   overflow: auto;
 447 }
 448 table.score {
 449   margin:0.5em;
 450   width:10em;
 451   border-collapse:collapse;
 452 }
 453
 454 .gameinfo {
 455   position:absolute;
 456   top:27em;
 457   right:0em;
 458   margin:1em;
 459   margin-top:0em;
 460   margin-right:3em;
 461
 462   width:12em;
 463
 464   padding:0.3em;
 465
 466   border:    2px solid gray;
 467   background-color: #efefef;
 468 }
 469
 470 .usermenu {
 471   position:absolute;
 472   top:10em;
 473   left:3em;
 474   margin:1em;
 475   margin-top:0em;
 476   margin-left:0em;
 477
 478   width: 12em;
 479
 480   border:    2px solid gray;
 481
 482   padding:0.3em;
 483
 484   background-color: #eee;
 485 }
 486
 487 .notes {
 488   position:absolute;
 489   top:27em;
 490   left:0;
 491   margin:1em;
 492   margin-top:0em;
 493   margin-left:3em;
 494
 495   width: 12em;
 496
 497   border:    2px solid gray;
 498
 499   padding:0.3em;
 500
 501   background-color: #efefef;
 502
 503   height:10em;
 504   overflow: auto;
 505   z-index:50;
 506 }
 507
 508 .user { margin-left:25%;margin-right:5%; }
 509 .user td.usergames { width:50%; }
 510 .wide { margin-left:5%;margin-right:5%; }
 511
 512 .over {
 513   text-align:center;
 514   margin-bottom:0.1em;
 515 }
 516
 517 .submitbutton {
 518   padding: 0.2em;
 519   padding-bottom: 0.3em;
 520   border:0;
 521   background-color: #efe;
 522 }
 523
 524 .submitbutton:hover {
 525   background-color:#afa;
 526 }
 527
 528
 529 .cardinput {
 530   display:inline;
 531   position:relative;
 532   border: 1px solid #000;
 533 }
 534
 535 .cardinput img {
 536   width: 4em;
 537 }
 538
 539 .cardinput:hover{
 540   background-color:red;
 541 }
 542
 543 div span img.button {
 544   width: 2em;
 545 }
 546
 547 .gamestatuspre {
 548   padding: 0 0.3em;
 549   background-color: #fd8901;
 550 }
 551 .gamestatusover {
 552   padding:0 0.3em;
 553   background-color: #f82c20 ;
 554 }
 555 .gamestatusplay {
 556   padding:0 0.3em;
 557   background-color: #15de26;
 558 }
 559
 560 .multi a{
 561   color: #fff;
 562 }
 563
 564 .bigger {
 565   font-size:larger;
 566 }
 567
 568 caption {
 569   text-align: center;
 570   margin: 0.5em;
 571   padding: 0.5em;
 572   padding-bottom: 0em;
 573   margin-bottom: 0;
 574  }
 575 table.stats { margin: 0.5em 1em;
 576   border: solid 0.2em #aeaeae;
 577   -moz-border-radius: 0.5em ;
 578   float: left;
 579 }
 580 table.stats tr.odd  { background-color:#aeaeae; }
 581 table.stats tr.even { background-color:#eaeaea; }
 582 table.stats td, table.stats th {
 583   margin-left:  0.2em;
 584   margin-right: 0.2em;
 585   padding-left:  0.2em;
 586   padding-right: 0.2em;
 587   border-right: solid 0.1em #000;
 588 }
 589 table.stats  tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 590
 591 table.stats th { border-bottom: solid 0.2em #000 }
 592
 593
 594 /* the login window */
 595 .login {
 596   text-align:center;
 597   padding-top: 1em;
 598 }
 599
 600 .login p, {
 601   padding: 0.1em 0.1em 0.15em;
 602 }
 603 .login h4 {
 604   padding: 0.3em 0.3em 0.45em;
 605 }
 606
 607 .login form{
 608   width: 20em;
 609   margin: 0.5em auto;
 610   padding: 0.5em 0.5em  1.5em;
 611   text-align: center;
 612 }
 613
 614 .login legend, .login label, .login input{
 615   padding: 0.5em 0.5em 0.75em;
 616 }
 617
 618 .login fieldset {
 619   border: 2px solid #000;
 620   padding: 0.5em 0.5em 0.75em;
 621   background-color: #eee;
 622 }
 623
 624 .login .submitbutton {
 625   background-color: #fff;
 626 }
 627
 628 .login .submitbutton:hover {
 629   background-color: #aaa;
 630 }
 631
 632 .login tr.center td{
 633   text-align: center;
 634 }