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