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 /* 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
 434 .scoretable{
 435   height:20em;
 436   overflow: auto;
 437 }
 438 table.score {
 439   margin:0.5em;
 440   width:10em;
 441   border-collapse:collapse;
 442 }
 443
 444 .gameinfo {
 445   position:absolute;
 446   top:27em;
 447   right:0em;
 448   margin:1em;
 449   margin-top:0em;
 450   margin-right:3em;
 451
 452   width:12em;
 453
 454   padding:0.3em;
 455
 456   border:    2px solid gray;
 457   background-color: #efefef;
 458 }
 459
 460 .usermenu {
 461   position:absolute;
 462   top:10em;
 463   left:3em;
 464   margin:1em;
 465   margin-top:0em;
 466   margin-left:0em;
 467
 468   width: 12em;
 469
 470   border:    2px solid gray;
 471
 472   padding:0.3em;
 473
 474   background-color: #eee;
 475 }
 476
 477 .notes {
 478   position:absolute;
 479   top:27em;
 480   left:0;
 481   margin:1em;
 482   margin-top:0em;
 483   margin-left:3em;
 484
 485   width: 12em;
 486
 487   border:    2px solid gray;
 488
 489   padding:0.3em;
 490
 491   background-color: #efefef;
 492
 493   height:10em;
 494   overflow: auto;
 495   z-index:50;
 496 }
 497
 498 .user { margin-left:25%;margin-right:5%; }
 499 .user td.usergames { width:50%; }
 500 .wide { margin-left:5%;margin-right:5%; }
 501
 502 .over {
 503   text-align:center;
 504   margin-bottom:0.1em;
 505 }
 506
 507 .submitbutton {
 508   padding: 0.2em;
 509   padding-bottom: 0.3em;
 510   border:0;
 511   background-color: #efe;
 512 }
 513
 514 .submitbutton:hover {
 515   background-color:#afa;
 516 }
 517
 518
 519 .cardinput {
 520   display:inline;
 521   position:relative;
 522   border: 1px solid #000;
 523 }
 524
 525 .cardinput img {
 526   width: 4em;
 527 }
 528
 529 .cardinput:hover{
 530   background-color:red;
 531 }
 532
 533 div span img.button {
 534   width: 2em;
 535 }
 536
 537 .gamestatuspre {
 538    padding: 0 0.3em;
 539
 540     background-color: #fd8901;
 541 }
 542 .gamestatusover {
 543    padding:0 0.3em;
 544   background-color: #f82c20 ;
 545 }
 546 .gamestatusplay {
 547   padding:0 0.3em;
 548   background-color: #15de26;
 549 }
 550
 551 .bigger {
 552   font-size:larger;
 553 }
 554
 555 caption {
 556   text-align: center;
 557   margin: 0.5em;
 558   padding: 0.5em;
 559   padding-bottom: 0em;
 560   margin-bottom: 0;
 561  }
 562 table.stats { margin: 0.5em 1em;
 563   border: solid 0.2em #aeaeae;
 564   -moz-border-radius: 0.5em ;
 565   float: left;
 566 }
 567 table.stats tr.odd  { background-color:#aeaeae; }
 568 table.stats tr.even { background-color:#eaeaea; }
 569 table.stats td, table.stats th {
 570   margin-left:  0.2em;
 571   margin-right: 0.2em;
 572   padding-left:  0.2em;
 573   padding-right: 0.2em;
 574   border-right: solid 0.1em #000;
 575 }
 576 table.stats  tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 577
 578 table.stats th { border-bottom: solid 0.2em #000 }
 579
 580
 581 /* the login window */
 582 .login {
 583   text-align:center;
 584   padding-top: 1em;
 585 }
 586
 587 .login p, {
 588   padding: 0.1em 0.1em 0.15em;
 589 }
 590 .login h4 {
 591   padding: 0.3em 0.3em 0.45em;
 592 }
 593
 594 .login form{
 595   width: 20em;
 596   margin: 0.5em auto;
 597   padding: 0.5em 0.5em  1.5em;
 598   text-align: center;
 599 }
 600
 601 .login legend, .login label, .login input{
 602   padding: 0.5em 0.5em 0.75em;
 603 }
 604
 605 .login fieldset {
 606   border: 2px solid #000;
 607   padding: 0.5em 0.5em 0.75em;
 608   background-color: #eee;
 609 }
 610
 611 .login .submitbutton {
 612   background-color: #fff;
 613 }
 614
 615 .login .submitbutton:hover {
 616   background-color: #aaa;
 617 }
 618
 619 .login tr.center td{
 620   text-align: center;
 621 }