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