css/standard003.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 h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;}
  20
  21 .header {
  22   background-color: white;
  23   text-align:       center;
  24   height:           4em;
  25   border-bottom:    3px solid gray;
  26 }
  27
  28 .lastlogin {
  29   position:absolute;
  30   font-size:smaller;
  31   top:0;
  32   left:0;
  33 }
  34
  35 .main {
  36   min-height: 40em;
  37 }
  38
  39 .footer {
  40   margin:0;
  41   margin-top:0.3em;
  42   padding:0;
  43   border-top: 2px solid #444;
  44   font-size:smaller;
  45   clear:both;
  46 }
  47 .footer .right { float:right; }
  48 .footer .left  { float:left; }
  49
  50 .status {
  51   position:absolute;
  52   right:1em;
  53   top:0.1em;
  54   font-size: smaller;
  55 }
  56
  57 .joingame,.sickness,.poverty,.total,.message {
  58  position: absolute;
  59  background-color: #fff;
  60  width: 20%;
  61  top:19em;
  62  left:40%;
  63  right:40%;
  64  text-align: center;
  65  z-index:22
  66 }
  67
  68
  69 .total .re {
  70  position: absolute;
  71  left: -4em;
  72  top:8em;
  73  background-color: #fff;
  74  z-index:15;
  75 }
  76 .total .contra {
  77  position: absolute;
  78  right: -4em;
  79  top:8em;
  80  background-color: #fff;
  81  z-index:15;
  82 }
  83
  84 .rules {
  85   margin-top:24em;
  86 }
  87
  88
  89 .card {
  90   position:absolute;
  91   z-index:20;
  92   top:18em;
  93   left:28em;
  94   text-align:center;
  95   background-color:white;
  96   border:2px solid gray;
  97 }
  98 .card img { width:8em; }
  99
 100 /* display the table and the names */
 101 div.table {
 102   position:absolute;
 103   width:100%;
 104   height:35em;
 105   margin:0;
 106   left:0;
 107   padding:0;
 108 /*  border: 3px solid blue; */
 109   top: 8.2em;
 110   text-align:center;
 111 }
 112
 113 div.table img.table {
 114   position:absolute;
 115   width:25%;
 116   top:20%;
 117   height:22em;
 118   left:37.5%;
 119   z-indexk:9;
 120   display: block;
 121   margin:0;
 122   padding:0;
 123 }
 124 div.table div {
 125   /*background-color:green;*/
 126   position:absolute;
 127   width:12.5%;
 128   text-align:center;
 129   z-index:20;
 130 }
 131 div.table div img{
 132   /*background-color:green;*/
 133   width:20%;
 134 }
 135
 136 div.table div.table0 {
 137   top:45%;
 138   right:62.5%;
 139 }
 140 div.table div.table1 {
 141   top:5%;
 142   left:43.75%;
 143 }
 144 div.table div.table2 {
 145   top:45%;
 146   left:62.5%;
 147 }
 148 div.table div.table3 {
 149   bottom:5%;
 150   left: 43.75%;
 151 }
 152
 153 ul.tricks {
 154   position:relative;
 155   list-style:none;
 156   margin:3px;
 157   padding:0;
 158   padding-bottom:3px;
 159   text-align:center;
 160   border-bottom:1px solid #444;
 161 }
 162 ul.tricks a { text-decoration:none; color:#000;}
 163 ul.tricks li {
 164   /*background-color:blue;*/
 165   margin:0.1em;
 166   padding:0.2em 0.5em;
 167   display:inline;
 168 }
 169 ul.tricks li.old {  background-color:#fff; }
 170 ul.tricks li:hover {  background-color: #bbb;}
 171 ul.tricks li.nohighlight:hover {  background-color: #fff;}
 172
 173 ul.tricks li div.trick {
 174   position:absolute;
 175   width:100%;
 176   height:35em;
 177   top:1.2em;
 178   left: 0;
 179   margin:0;
 180   padding:0;
 181 /*  border: 2px solid red;*/
 182   display:block;
 183 }
 184 ul.tricks li div.trick {
 185   display:none;
 186 }
 187
 188 ul.tricks li div.trick img.arrow {
 189   position:absolute;
 190   margin:0;
 191   padding:0;
 192 /*  border: 5px solid blue;*/
 193   text-align:center;
 194   width:16%;
 195   height:16em;
 196   left:42%;
 197   right:42%;
 198   top:11em;
 199   z-index:8;
 200 }
 201
 202 hr {clear:both;}
 203
 204 /*ul.tricks li:hover div.table{ display:block; }*/
 205
 206 ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score, .vorbehalt0 {
 207   position:absolute;
 208   margin:0;
 209   padding:0;
 210   /*border: 1px solid red;*/
 211   top: 45%;
 212   left:37.5%;
 213   right:56.5%;
 214   width:6%;
 215   z-index:30;
 216 }
 217 ul.tricks li div div.card0 span.comment{
 218   position:absolute;
 219   margin:0;
 220   padding:0;
 221   /*border: 1px solid red;*/
 222   top: 5%;
 223   right:66.5%;
 224   left:17.5%;
 225   width:16%;
 226 }
 227 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
 228   position:absolute;
 229   margin:0;
 230   padding:0;
 231   /*border: 1px solid red;*/
 232   top: 25%;
 233   left:47%;
 234   right:47%;
 235   width:6%;
 236   text-align:center;
 237   z-index:30;
 238 }
 239 ul.tricks li div div.card1 span.comment{
 240   position:absolute;
 241   margin:0;
 242   padding:0;
 243   /*border: 1px solid red;*/
 244   top: 5%;
 245   left:66.5%;
 246   right:17.5%;
 247   width:16%;
 248   text-align:center;
 249 }
 250 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
 251   position:absolute;
 252   margin:0;
 253   padding:0;
 254   /*border: 1px solid red;*/
 255   top: 45%;
 256   right:37.5%;
 257   left:56x.5%;
 258   width:6%;
 259   z-index:30;
 260 }
 261 ul.tricks li div div.card2 span.comment{
 262   position:absolute;
 263   margin:0;
 264   padding:0;
 265   /*border: 1px solid red;*/
 266   top: 85%;
 267   left:66.5%;
 268   right:17.5%;
 269   width:16%;
 270   text-align:center;
 271 }
 272 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
 273   position:absolute;
 274   margin:0;
 275   padding:0;
 276   /*border: 1px solid red;*/
 277   bottom: 15%;
 278   left:47%;
 279   right:47%;
 280   width:6%;
 281   text-align:center;
 282   z-index:30;
 283 }
 284 ul.tricks li div div.card3 span.comment{
 285   position:absolute;
 286   margin:0;
 287   padding:0;
 288   /*border: 1px solid red;*/
 289   top: 85%;
 290   right:66.5%;
 291   left:17.5%;
 292   width:16%;
 293 }
 294
 295 span.comment{
 296  border: 3px solid green;
 297 }
 298
 299 ul.tricks li div div span.comment span{
 300   display:block;
 301   text-align:left;
 302   border-top:1px solid green;
 303 }
 304
 305 .mycards {
 306   margin:0;
 307   margin-top:34.5em;
 308   padding:0;
 309   border:1px solid red;
 310   background-color:yellow;
 311 }
 312
 313 .mycards img {
 314   height:6em;
 315 }
 316
 317 .exchange {
 318   clear:both;
 319   margin:0;
 320   padding:0;
 321   border:1px solid red;
 322   background-color:yellow;
 323 }
 324
 325 .exchange img {
 326   height:6em;
 327 }
 328
 329 .line{
 330   clear:both;
 331   border-top:2px solid gray;
 332   margin:0;
 333   padding:0;
 334 }
 335
 336 .session {
 337   border-bottom:1px solid black;
 338   text-align:center;
 339 }
 340
 341 .gameinfo, .useroptions {
 342   position:absolute;
 343   top:10em;
 344   right:0em;
 345   margin:1em;
 346   margin-top:0em;
 347   margin-right:0em;
 348
 349   width:12em;
 350
 351   border-top:    2px solid gray;
 352   border-left:   2px solid gray;
 353   border-bottom: 2px solid gray;
 354
 355   padding:0.3em;
 356
 357   background-color: #eee;
 358 }
 359
 360 .usermenu {
 361   position:absolute;
 362   top:10em;
 363   left:0;
 364   margin:1em;
 365   margin-top:0em;
 366   margin-left:0em;
 367
 368   width: 12em;
 369
 370   border-top:    2px solid gray;
 371   border-right:  2px solid gray;
 372   border-bottom: 2px solid gray;
 373
 374   padding:0.3em;
 375
 376   background-color: #eee;
 377 }
 378
 379 .notes {
 380   position:absolute;
 381   top:27em;
 382   left:0;
 383   margin:1em;
 384   margin-top:0em;
 385   margin-left:0em;
 386
 387   width: 12em;
 388
 389   border-top:    2px solid gray;
 390   border-right:  2px solid gray;
 391   border-bottom: 2px solid gray;
 392
 393   padding:0.3em;
 394
 395   background-color: #efefef;
 396
 397   height:10em;
 398   overflow: auto;
 399 }
 400
 401 .user { margin-left:25%;margin-right:25%; }
 402
 403 .over {
 404   text-align:center;
 405   margin-bottom:0.1em;
 406 }
 407
 408 .submitbutton {
 409   border:0;
 410   background-color: #efe;
 411 }
 412
 413 .submitbutton:hover {
 414   background-color:#afa;
 415 }
 416
 417
 418 .cardinput {
 419   display:inline;
 420   position:relative;
 421   border: 1px solid black;
 422 }
 423
 424 .cardinput img {
 425   width: 4em;
 426 }
 427
 428 .cardinput:hover{
 429   background-color:red;
 430 }
 431
 432 div span img.button {
 433   width: 2em;
 434 }
 435
 436 .gamestatuspre {
 437    padding: 0 0.3em;
 438
 439     background-color: #fd8901;
 440 }
 441 .gamestatusover {
 442    padding:0 0.3em;
 443   background-color: #f82c20 ;
 444 }
 445 .gamestatusplay {
 446   padding:0 0.3em;
 447   background-color: #15de26;
 448 }
 449
 450 .scoretable{
 451   height:10em;
 452   overflow: auto;
 453 }
 454 table.score {
 455   width:10em;
 456   border-collapse:collapse;
 457 }
 458
 459 .bigger {
 460   font-size:larger;
 461 }