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