www/iphone/UiUIKit/stylesheets/iphone.css

   1 /*
   2
   3         Universal iPhone UI Kit 1.0
   4         Author: Diego Martín Lafuente.
   5         E-Mail: dlafuente@gmail.com
   6         AIM: Minidixier
   7         Licence: AGPLv3
   8         date: 2008-08-09
   9
  10         URL: www.minid.net
  11         SVN URL: http://code.google.com/p/iphone-universal/source/checkout
  12         Download: http://code.google.com/p/iphone-universal/downloads/list
  13
  14         */
  15
  16
  17         body {
  18                 background: rgb(197,204,211) url(../images/stripes.png);
  19                 font-family: Helvetica;
  20                 margin: 0 0 0 10px;
  21                 padding: 0;
  22                 -webkit-user-select: none;
  23                 -webkit-text-size-adjust: none;
  24                 }
  25
  26                 /* standard header on body */
  27
  28                 div#header + h1, ul + h1 {
  29                         color: rgb(76,86,108);
  30                         font: bold 18px Helvetica;
  31                         text-shadow: #fff 0 1px 0;
  32                         margin: 15px 0 0 10px;
  33                         }
  34
  35 #searchForm {
  36   background-color: #7ec8b2;
  37 }
  38 #nav {
  39     background-color: #000;
  40     height: 40px;
  41     width: 100%;
  42     overflow: hidden;
  43     border-bottom-width: 0px;
  44     border-bottom-top: 0px;
  45 }
  46 #nav li {
  47   margin: 10px 5px 0 5px;
  48   float: left;
  49   padding: 0;
  50   margin: 0;
  51   list-style: none;
  52   border-bottom-width: 0px;
  53   border-bottom-top: 0px;
  54 }
  55 #nav a {
  56   color: #fff;
  57   text-transform: uppercase;
  58   font-size: 10px;
  59   margin-top: 0px;
  60   margin-bottom: 0px;
  61   margin-left: 0px;
  62   vertical-align: bottom;
  63   }
  64
  65   a {
  66   text-decoration: none;
  67   color: #1A4064;
  68   cursor: pointer;
  69   }
  70
  71
  72
  73
  74                 /* standard paragraph on body */
  75
  76                 ul + p, ul.data + p + p, ul.form + p + p {
  77                         color: rgb(76,86,108);
  78                         font: 14px Helvetica;
  79                         text-align: center;
  80                         text-shadow: white 0 1px 0;
  81                         margin: 0 10px 17px 0;
  82                         }
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98                 /* headers */
  99
 100                 div#header {
 101                         background: rgb(109,133,163) url(../images/bgHeader.png) repeat-x top;
 102                         border-top: 1px solid rgb(205,213,223);
 103                         border-bottom: 1px solid rgb(46,55,68);
 104                         padding: 10px;
 105                         margin: 0 0 0 -10px;
 106                         min-height: 44px;
 107                         -webkit-box-sizing: border-box;
 108                         }
 109
 110
 111                                 div#header h1 {
 112                                         color: #fff;
 113                                         font: bold 20px/30px Helvetica;
 114                                         text-shadow: #2d3642 0 -1px 0;
 115                                         text-align: center;
 116                                         text-overflow: ellipsis;
 117                                         white-space: nowrap;
 118                                         overflow: hidden;
 119                                         width: 49%;
 120                                         padding: 5px 0;
 121                                         margin: 2px 0 0 -24%;
 122                                         position: absolute;
 123                                         top: 0;
 124                                         left: 50%;
 125                                         }
 126
 127                                         div#header a {
 128                                                 color: #FFF;
 129                                                 background: none;
 130                                                 font: bold 12px/30px Helvetica;
 131                                                 border-width: 0 5px;
 132                                                 margin: 0;
 133                                                 padding: 0 3px;
 134                                                 width: auto;
 135                                                 height: 30px;
 136                                                 text-shadow: rgb(46,55,68) 0 -1px 0;
 137                                                 text-overflow: ellipsis;
 138                                                 text-decoration: none;
 139                                                 white-space: nowrap;
 140                                                 position: absolute;
 141                                                 overflow: hidden;
 142                                                 top: 7px;
 143                                                 right: 6px;
 144                                                 -webkit-border-image: url(../images/toolButton.png) 0 5 0 5;
 145                                                 }
 146
 147                                                 div#header #backButton {
 148                                                         left: 6px;
 149                                                         right: auto;
 150                                                         padding: 0;
 151                                                         max-width: 55px;
 152                                                         border-width: 0 8px 0 14px;
 153                                                         -webkit-border-image: url(../images/backButton.png) 0 8 0 14;
 154                                                         }
 155
 156
 157                                                 .Action {
 158                                                         border-width: 0 5px;
 159                                                         -webkit-border-image: url(../images/actionButton.png) 0 5 0 5;
 160                                                 }
 161
 162
 163
 164                                                 div#header ul {
 165                                                         margin-top: 15px;
 166                                                 }
 167
 168                                                 div#header p {
 169                                                         color: rgb(60,70,80);
 170                                                         font-weight: bold;
 171                                                         font-size: 13px;
 172                                                         text-align: center;
 173                                                         clear: both;
 174                                                         position: absolute;
 175                                                         top: 4px;
 176                                                         left: 35px;
 177                                                         right: 35px;
 178                                                         margin: 0;
 179                                                         text-shadow: #C0CBDB 0 1px 0;
 180                                                         text-overflow: ellipsis;
 181                                                         white-space: nowrap;
 182                                                         overflow: hidden;
 183                                                 }
 184
 185                                                 div.pre {
 186                                                         height: 60px;
 187                                                         }
 188
 189
 190                                                         div.pre h1 {
 191                                                                 top: 18px !important;
 192                                                                 }
 193
 194                                                         div.pre a {
 195                                                                 top: 25px !important;
 196                                                                 right: 6px;
 197                                                                 }
 198
 199                                                         div.pre a#Backbutton {
 200                                                                 left: 6px !important;
 201                                                         }
 202
 203
 204
 205
 206
 207                 /***** List (base) ******/
 208
 209                 ul {
 210                         color: black;
 211                         background: #fff;
 212                         border: 1px solid #B4B4B4;
 213                         font: bold 17px Helvetica;
 214                         padding: 0;
 215                         margin: 15px 10px 17px 0;
 216                         -webkit-border-radius: 8px;
 217                         }
 218
 219
 220                         ul li {
 221                                 color: #666;
 222                                 border-top: 1px solid #B4B4B4;
 223                                 list-style-type: none;
 224                                 padding: 10px 10px 10px 10px;
 225                                 }
 226
 227
 228
 229                                 /* when you have a first LI item on any list */
 230
 231                                 li:first-child {
 232                                         border-top: 0;
 233                                         -webkit-border-top-left-radius: 8px;
 234                                         -webkit-border-top-right-radius: 8px;
 235                                         }
 236
 237                                 li:last-child {
 238                                         -webkit-border-bottom-left-radius: 8px;
 239                                         -webkit-border-bottom-right-radius: 8px;
 240                                         }
 241
 242
 243                                 /* universal arrows */
 244
 245                                 ul li.arrow {
 246                                         background-image: url(../images/chevron.png);
 247                                         background-position: right center;
 248                                         background-repeat: no-repeat;
 249                                         }
 250
 251
 252                                 #plastic ul li.arrow, #metal ul li.arrow {
 253                                         background-image: url(../images/chevron_dg.png);
 254                                         background-position: right center;
 255                                         background-repeat: no-repeat;
 256                                         }
 257
 258
 259
 260                                 /* universal links on list */
 261
 262                                 ul li a, li.img a + a {
 263                                         color: #000;
 264                                         text-decoration: none;
 265                                         text-overflow: ellipsis;
 266                                         white-space: nowrap;
 267                                         overflow: hidden;
 268                                         display: block;
 269                                         padding: 12px 10px 12px 10px;
 270                                         margin: -10px;
 271                                         -webkit-tap-highlight-color:rgba(0,0,0,0);
 272                                 }
 273
 274                                         ul li.img a + a {
 275                                                 margin: -10px 10px -20px -5px;
 276                                                 font-size: 17px;
 277                                                 font-weight: bold;
 278                                         }
 279
 280                                         ul li.img a + a + a {
 281                                                         font-size: 14px;
 282                                                         font-weight: normal;
 283                                                         margin-left: -10px;
 284                                                         margin-bottom: -10px;
 285                                                         margin-top: 0;
 286                                                 }
 287
 288
 289                                                 ul li.img a + small + a {
 290                                                         margin-left: -5px;
 291                                                 }
 292
 293
 294                                                 ul li.img a + small + a + a {
 295                                                         margin-left: -10px;
 296                                                         margin-top: -20px;
 297                                                         margin-bottom: -10px;
 298                                                         font-size: 14px;
 299                                                         font-weight: normal;
 300                                                         }
 301
 302                                                         ul li.img a + small + a + a + a {
 303                                                                 margin-left: 0px !important;
 304                                                                 margin-bottom: 0;
 305                                                         }
 306
 307
 308                                         ul li a + a {
 309                                                 color: #000;
 310                                                 font: 14px Helvetica;
 311                                                 text-overflow: ellipsis;
 312                                                 white-space: nowrap;
 313                                                 overflow: hidden;
 314                                                 display: block;
 315                                                 margin: 0;
 316                                                 padding: 0;
 317                                                 }
 318
 319                                                 ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
 320                                                         color: #666;
 321                                                         font: 13px Helvetica;
 322                                                         margin: 0;
 323                                                         text-overflow: ellipsis;
 324                                                         white-space: nowrap;
 325                                                         overflow: hidden;
 326                                                         display: block;
 327                                                         padding: 0;
 328                                                 }
 329
 330
 331
 332
 333
 334                                 /* standard mini-label */
 335
 336                                 ul li small {
 337                                         color: #369;
 338                                         font: 17px Helvetica;
 339                                         text-align: right;
 340                                         text-overflow: ellipsis;
 341                                         white-space: nowrap;
 342                                         overflow: hidden;
 343                                         display: block;
 344                                         width: 23%;
 345                                         float: right;
 346                                         padding: 3px 0px;
 347                                         }
 348
 349
 350
 351                                         ul li.arrow small {
 352                                                 padding: 0 15px;
 353                                         }
 354
 355                                         ul li small.counter {
 356                                                 font-size: 17px !important;
 357                                                 line-height: 13px !important;
 358                                                 font-weight: bold;
 359                                                 background: rgb(154,159,170);
 360                                                 color: #fff;
 361                                                 -webkit-border-radius: 11px;
 362                                                 padding: 4px 10px 5px 10px;
 363                                                 display: inline !important;
 364                                                 width: auto;
 365                                                 margin-top: 2px;
 366                                         }
 367
 368
 369                                         ul li.arrow small.counter {
 370                                                 margin-right: 15px;
 371                                         }
 372
 373
 374
 375
 376                                         /* resize without labels */
 377
 378                                         ul li.arrow a {
 379                                                 width: 95%;
 380                                                 }
 381
 382                                                 /* with labels */
 383
 384                                                 ul li small + a {
 385                                                         width: 75%;
 386                                                 }
 387
 388                                                 ul li.arrow small + a {
 389                                                         width: 70%;
 390                                                 }
 391
 392
 393
 394                 /* images */
 395
 396                         ul li.img {
 397                                 padding-left: 115px;
 398                         }
 399
 400                         ul li.img a.img {
 401                                 background: url(../images/standard-img.png) no-repeat;
 402                                 display: inline-block;
 403                                 width: 100px;
 404                                 height: 75px;
 405                                 margin: -10px 0 -20px -115px;
 406                                 float: left;
 407                         }
 408
 409
 410
 411                 /* individuals */
 412
 413
 414
 415                         ul.individual {
 416                                 border: 0;
 417                                 background: none;
 418                                 clear: both;
 419                                 height: 45px;
 420                         }
 421
 422                                 ul.individual li {
 423                                         color: rgb(183,190,205);
 424                                         background: white;
 425                                         border: 1px solid rgb(180,180,180);
 426                                         font-size: 14px;
 427                                         text-align: center;
 428                                         -webkit-border-radius: 8px;
 429                                         -webkit-box-sizing: border-box;
 430                                         width: 48%;
 431                                         float:left;
 432                                         display: block;
 433                                         padding: 11px 10px 14px 10px;
 434                                         }
 435
 436                                         ul.individual li + li {
 437                                                 float: right;
 438
 439                                         }
 440
 441
 442                                         ul.individual li a {
 443                                                 color: rgb(50,79,133);
 444                                                 line-height: 16px;
 445                                                 margin: -11px -10px -14px -10px;
 446                                                 padding: 11px 10px 14px 10px;
 447                                                 -webkit-border-radius: 8px;
 448                                         }
 449
 450                                                 ul.individual li a:hover {
 451                                                         color: #fff;
 452                                                         background: #36c;
 453                                                         }
 454
 455
 456
 457
 458                                                         /* Normal lists and metal */
 459
 460                                                         body#normal h4 {
 461                                                                 color: #fff;
 462                                                                 /* 002863 rgb(154,159,170) */
 463                                                                 background: rgb(0,40,99) url(../images/bglight.png) top left repeat-x;
 464                                                                 border-top: 1px solid rgb(0,40,99); /* rgb(165,177,186); */
 465                                                                 text-shadow: #666 0 1px 0;
 466                                                                 margin: 0;
 467                                                                 padding: 2px 10px;
 468                                                         }
 469
 470
 471                                                         body#normal, body#metal {
 472                                                                 margin: 0;
 473                                                                 padding: 0;
 474                                                                 background-color: rgb(255,255,255);
 475                                                         }
 476
 477                                                         body#normal ul, body#metal ul, body#plastic ul {
 478                                                                 -webkit-border-radius: 0;
 479                                                                 margin: 0;
 480                                                                 border-left: 0;
 481                                                                 border-right: 0;
 482                                                                 border-top: 0;
 483                                                                 }
 484
 485                                                                 body#metal ul {
 486                                                                         border-top: 0;
 487                                                                         border-bottom: 0;
 488                                                                         background: rgb(180,180,180);
 489                                                                 }
 490
 491
 492
 493
 494                                                                 body#normal ul li {
 495                                                                         font-size: 20px;
 496                                                                 }
 497
 498                                                                         body#normal ul li small {
 499                                                                                 font-size: 16px;
 500                                                                                 line-height: 28px;
 501                                                                         }
 502
 503                                                                         body#normal li, body#metal li {
 504                                                                                 -webkit-border-radius: 0;
 505                                                                                 }
 506
 507                                                                         body#normal li em {
 508                                                                                 font-weight: normal;
 509                                                                                 font-style: normal;
 510                                                                                 }
 511
 512                                                                 body#normal h4 + ul {
 513                                                                     border-top: 0px;
 514                                                                     # border-top: 1px solid rgb(152,158,164);
 515                                                                     border-bottom: 1px solid rgb(113,125,133);
 516                                                                 }
 517
 518
 519                                                                 body#metal ul li {
 520                                                                         border-top: 1px solid rgb(238,238,238);
 521                                                                         border-bottom: 1px solid rgb(156,158,165);
 522                                                                         background: url(../images/bgMetal.png) top left repeat-x;
 523                                                                         font-size: 26px;
 524                                                                         text-shadow: #fff 0 1px 0;
 525                                                                         }
 526
 527                                                                         body#metal ul li a {
 528                                                                                 line-height: 26px;
 529                                                                                 margin: 0;
 530                                                                                 padding: 13px 0;
 531                                                                         }
 532
 533                                                                                 body#metal ul li a:hover {
 534                                                                                         color: rgb(0,0,0);
 535                                                                                 }
 536
 537                                                                                         body#metal ul li:hover small {
 538                                                                                                 color: inherit;
 539                                                                                         }
 540
 541
 542                                                                         body#metal ul li a em {
 543                                                                                 display: block;
 544                                                                                 font-size: 14px;
 545                                                                                 font-style: normal;
 546                                                                                 color: #444;
 547                                                                                 width: 50%;
 548                                                                                 line-height: 14px;
 549                                                                         }
 550
 551                                                                         body#metal ul li small {
 552                                                                                 float: right;
 553                                                                                 position: relative;
 554                                                                                 margin-top: 10px;
 555                                                                                 font-weight: bold;
 556                                                                                 }
 557
 558
 559                                                                                 body#metal ul li.arrow a small {
 560                                                                                         padding-right: 0;
 561                                                                                         line-height: 17px;
 562                                                                                 }
 563
 564
 565                                                                                 body#metal ul li.arrow {
 566                                                                                         background: url(../images/bgMetal.png) top left repeat-x,
 567                                                                                         url(../images/chevron_dg.png) right center no-repeat;
 568                                                                                 }
 569
 570
 571
 572                                                                                 /* option panel */
 573
 574                                                                                         div#optionpanel {
 575                                                                                                 background: url(../images/blackbg.png) top left repeat-x;
 576                                                                                                 text-align: center;
 577                                                                                                 padding: 20px 10px 15px 10px;
 578                                                                                                 position: absolute;
 579                                                                                                 left: 0;
 580                                                                                                 right: 0;
 581                                                                                                 bottom: 0;
 582                                                                                                 }
 583
 584                                                                                                 div#optionpanel h2 {
 585                                                                                                         font-size: 17px;
 586                                                                                                         color: #fff;
 587                                                                                                         text-shadow: #000 0 1px 0;
 588                                                                                                 }
 589
 590
 591
 592
 593
 594                                                                                 /***** BUTTONS *****/
 595
 596                                                                                 .button {
 597                                                                                         color: #fff;
 598                                                                                         font: bold 20px/46px Helvetica;
 599                                                                                         text-decoration: none;
 600                                                                                         text-align: center;
 601                                                                                         text-shadow: #000 0 1px 0;
 602                                                                                         border-width: 0px 14px 0px 14px;
 603                                                                                         display: block;
 604                                                                                         margin: 3px 0;
 605                                                                                         }
 606
 607                                                                                         .green { -webkit-border-image: url(../images/greenButton.png) 0 14 0 14; }
 608                                                                                         .red { -webkit-border-image: url(../images/redButton.png) 0 14 0 14; }
 609
 610                                                                                         .white {
 611                                                                                                 color: #000;
 612                                                                                                 text-shadow: #fff 0px 1px 0;
 613                                                                                                 -webkit-border-image: url(../images/whiteButton.png) 0 14 0 14;
 614                                                                                                 }
 615
 616                                                                                         .black { -webkit-border-image: url(../images/grayButton.png) 0 14 0 14; }
 617
 618
 619 /***** FORMS *****/
 620
 621 /* fields list */
 622
 623                 ul.form {
 624
 625                 }
 626
 627                         ul.form li {
 628                                 padding: 7px 10px;
 629                         }
 630
 631                         ul.form li.error { border: 2px solid red; }
 632                         ul.form li.error + li.error { border-top: 0; }
 633
 634                         ul.form li:hover { background: #fff; }
 635
 636                         ul li input[type="text"], ul li input[type="password"], ul li textarea, ul li select {
 637                                 color: #777;
 638                                 background: #fff url(../.png); /* this is a hack due the default input shadow that iphones uses on textfields */
 639                                 border: 0;
 640                                 font: normal 17px Helvetica;
 641                                 padding: 0;
 642                                 display: inline-block;
 643                                 margin-left: 0px;
 644                                 width: 100%;
 645                                 -webkit-appearance: textarea;
 646                                 }
 647
 648                                 ul li textarea {
 649                                         height: 120px;
 650                                         padding: 0;
 651                                         text-indent: -2px;
 652                                 }
 653
 654                                 ul li select {
 655                                         text-indent: 0px;
 656                                         background: transparent url(../images/chevron.png) no-repeat 103% 3px;
 657                                         -webkit-appearance: textfield;
 658                                         margin-left: -6px;
 659                                         width: 104%;
 660                                 }
 661
 662                                 ul li input[type="checkbox"], ul li input[type="radio"] {
 663                                         margin: 0;
 664                                         color: rgb(50,79,133);
 665                                         padding: 10px 10px;
 666                                         }
 667
 668                                 ul li input[type="checkbox"]:after, ul li input[type="radio"]:after {
 669                                         content: attr(title);
 670                                         font: 17px Helvetica;
 671                                         display: block;
 672                                         width: 246px;
 673                                         margin: -12px 0 0 17px;
 674                                         }
 675
 676
 677
 678                                         /**** INFORMATION FIELDS ****/
 679
 680                                         ul.data li h4 {
 681                                                 margin: 10px 0 5px 0;
 682                                         }
 683
 684                                                 ul.data li p {
 685                                                         text-align: left;
 686                                                         font-size: 14px;
 687                                                         line-height: 18px;
 688                                                         font-weight: normal;
 689                                                         margin: 0;
 690                                                         }
 691
 692                                                         ul.data li p + p { margin-top: 10px; }
 693
 694
 695                                                         ul.data li {
 696                                                                 background: none;
 697                                                                 padding: 15px 10px;
 698                                                                 color: #222;
 699                                                         }
 700
 701                                                         ul.data li a {
 702                                                                 display: inline;
 703                                                                 color: #2E3744;
 704                                                                 text-decoration: underline;
 705                                                         }
 706
 707
 708                                                         ul.field li small {
 709                                                                 position: absolute;
 710                                                                 right: 25px;
 711                                                                 margin-top: 3px;
 712                                                                 z-index: 3;
 713                                                         }
 714
 715                                                         ul.field li h3 {
 716                                                                 color: rgb(76,86,108);
 717                                                                 width: 25%;
 718                                                                 font-size: 13px;
 719                                                                 line-height: 18px;
 720                                                                 margin: 0 10px 0 0;
 721                                                                 float: left;
 722                                                                 text-align: right;
 723                                                                 overflow: hidden;
 724                                                                 text-overflow: ellipsis;
 725                                                                 white-space: nowrap;
 726                                                                 padding: 0;
 727                                                                 }
 728
 729                                                                 ul.field li a {
 730                                                                         font-size: 13px;
 731                                                                         line-height: 18px;
 732                                                                         overflow: visible;
 733                                                                         white-space: normal;
 734                                                                         display: inline-block;
 735                                                                         width: 60%;
 736                                                                         padding: 0;
 737                                                                         margin: 0 0 0 0;
 738                                                                         vertical-align: top;
 739                                                                         }
 740
 741                                                                 ul.field li big {
 742                                                                         font-size: 13px;
 743                                                                         line-height: 18px;
 744                                                                         font-weight: normal;
 745                                                                         overflow: visible;
 746                                                                         white-space: normal;
 747                                                                         display: inline-block;
 748                                                                         width: 60%;
 749                                                                         }
 750
 751
 752
 753
 754
 755
 756                                                                 ul.field li small {
 757                                                                         font-size: 13px;
 758                                                                         font-weight: bold;
 759                                                                 }
 760
 761
 762                                                 /* this is for profiling */
 763
 764                                                 ul.profile {
 765                                                         border: 0;
 766                                                         background: none;
 767                                                         clear: both;
 768                                                         min-height: 62px;
 769                                                         position: relative;
 770                                                         }
 771
 772                                                         ul.profile li {
 773                                                                 background: #fff url(../images/profile-user.png) no-repeat;
 774                                                                 border: 1px solid #B4B4B4;
 775                                                                 width: 62px;
 776                                                                 height: 62px;
 777                                                                 -webkit-border-radius: 4px;
 778                                                                 -webkit-box-sizing: border-box;
 779                                                                 float: left;
 780                                                                 }
 781
 782                                                         ul.profile li + li {
 783                                                                 border: 0;
 784                                                                 background: none;
 785                                                                 width: 70%;
 786                                                                 }
 787
 788
 789                                                                 ul.profile li + li h2, ul.profile li + li p {
 790                                                                         color: rgb(46,55,68);
 791                                                                         text-shadow: #fff 0 1px 0;
 792                                                                         margin: 0;
 793                                                                 }
 794
 795                                                                 ul.profile li + li h2 {
 796                                                                         font: bold 18px/22px Helvetica;
 797                                                                         text-overflow: ellipsis;
 798                                                                         white-space: nowrap;
 799                                                                         overflow: hidden;
 800                                                                         }
 801
 802                                                                 ul.profile li + li p {
 803                                                                         font: 14px/18px Helvetica;
 804                                                                         text-overflow: ellipsis;
 805                                                                         white-space: nowrap;
 806                                                                         overflow: hidden;
 807                                                                         }
 808
 809
 810                                                                 /* any A element inside this kind of field list will scale 62x62 */
 811
 812                                                                 ul.profile li a {
 813                                                                         display: block;
 814                                                                         width: 62px;
 815                                                                         height: 62px;
 816                                                                         color: transparent;
 817                                                                 }
 818
 819
 820
 821         /***** PLASTIC LISTS *****/
 822
 823         body#plastic {
 824                 margin: 0;
 825                 padding: 0;
 826                 background: rgb(173,173,173);
 827         }
 828
 829         body#plastic ul {
 830                 -webkit-border-radius: 0;
 831                 margin: 0;
 832                 border-left: 0;
 833                 border-right: 0;
 834                 border-top: 0;
 835                 background-color: rgb(173,173,173);
 836                 }
 837
 838
 839                 body#plastic ul li {
 840                         -webkit-border-radius: 0;
 841                         border-top: 1px solid rgb(191,191,191);
 842                         border-bottom: 1px solid rgb(157,157,157);
 843                 }
 844
 845
 846                         body#plastic ul li:nth-child(odd) {
 847                                 background-color: rgb(152,152,152);
 848                                 border-top: 1px solid rgb(181,181,181);
 849                                 border-bottom: 1px solid rgb(138,138,138);
 850                         }
 851
 852
 853                 body#plastic ul + p {
 854                         font-size: 11px;
 855                         color: #2f3237;
 856                         text-shadow: none;
 857                         padding: 10px 10px;
 858                         }
 859
 860                         body#plastic ul + p strong {
 861                                 font-size: 14px;
 862                                 line-height: 18px;
 863                                 text-shadow: #fff 0 1px 0;
 864                         }
 865
 866                         body#plastic ul li a {
 867                                 text-shadow: rgb(211,211,211) 0 1px 0;
 868                         }
 869
 870                         body#plastic ul li:nth-child(odd) a {
 871                                 text-shadow: rgb(191,191,191) 0 1px 0;
 872                         }
 873
 874
 875                         body#plastic ul li small {
 876                                 color: #3C3C3C;
 877                                 text-shadow: rgb(211,211,211) 0 1px 0;
 878                                 font-size: 13px;
 879                                 font-weight: bold;
 880                                 text-transform: uppercase;
 881                                 line-height: 24px;
 882                                 }
 883
 884
 885
 886         /**** MINI & BIG BANNERS ****/
 887
 888                         #plastic ul.minibanner, #plastic ul.bigbanner {
 889                                 margin: 10px;
 890                                 border: 0;
 891                                 height: 81px;
 892                                 clear: both;
 893                                 }
 894
 895                                 #plastic ul.bigbanner {
 896                                         height: 140px !important;
 897                                 }
 898
 899                                 #plastic ul.minibanner li {
 900                                         border: 1px solid rgb(138,138,138);
 901                                         background-color: rgb(152,152,152);
 902                                         width: 145px;
 903                                         height: 81px;
 904                                         float: left;
 905                                         -webkit-border-radius: 5px;
 906                                         padding: 0;
 907                                         }
 908
 909                                 #plastic ul.bigbanner li {
 910                                         border: 1px solid rgb(138,138,138);
 911                                         background-color: rgb(152,152,152);
 912                                         width: 296px;
 913                                         height: 140px;
 914                                         float: left;
 915                                         -webkit-border-radius: 5px;
 916                                         padding: 0;
 917                                         margin-bottom: 4px;
 918                                         }
 919
 920                                         #plastic ul.minibanner li:first-child {
 921                                                 margin-right: 6px;
 922                                         }
 923
 924
 925                                         #plastic ul.minibanner li a {
 926                                                 color: transparent;
 927                                                 text-shadow: none;
 928                                                 display: block;
 929                                                 width: 145px;
 930                                                 height: 81px;
 931                                                 }
 932
 933                                         #plastic ul.bigbanner li a {
 934                                                 color: transparent;
 935                                                 text-shadow: none;
 936                                                 display: block;
 937                                                 width: 296px;
 938                                                 height: 145px;
 939                                                 }
 940
 941
 942
 943         /**** CHAT ****/
 944
 945
 946         body#chat {
 947                 background: #DBE1ED;
 948                 }
 949
 950                 body#chat div.bubble {
 951                         margin: 10px 10px 0 0px;
 952                         width: 80%;
 953                         clear: both;
 954                 }
 955
 956
 957
 958                 body#chat div.right {
 959                         float: right;
 960                         }
 961
 962                 body#chat div.left {
 963                         float: left;
 964                         }
 965
 966
 967                         body#chat div.right p {
 968                                 border-width: 10px 20px 12px 10px;
 969                         }
 970
 971                         body#chat div.left p {
 972                                 border-width: 10px 10px 12px 20px;
 973                         }
 974
 975                         /* lefties */
 976
 977                         body#chat div.left p.lime {
 978                                 -webkit-border-image: url(../images/chat_bubbles_lime_l.png) 10 10 13 19;
 979                                 }
 980
 981                         body#chat div.left p.lemon {
 982                                 -webkit-border-image: url(../images/chat_bubbles_lemon_l.png) 10 10 13 19;
 983                                 }
 984
 985                         body#chat div.left p.orange {
 986                                 -webkit-border-image: url(../images/chat_bubbles_orange_l.png) 10 10 13 19;
 987                                 }
 988
 989                         body#chat div.left p.aqua {
 990                                 -webkit-border-image: url(../images/chat_bubbles_aqua_l.png) 10 10 13 19;
 991                                 }
 992
 993                         body#chat div.left p.purple {
 994                                 -webkit-border-image: url(../images/chat_bubbles_purple_l.png) 10 10 13 19;
 995                                 }
 996
 997                         body#chat div.left p.pink {
 998                                 -webkit-border-image: url(../images/chat_bubbles_pink_l.png) 10 10 13 19;
 999                                 }
1000
1001                         body#chat div.left p.graphite {
1002                                 -webkit-border-image: url(../images/chat_bubbles_graphite_l.png) 10 10 13 19;
1003                                 }
1004
1005                         body#chat div.left p.clear {
1006                                 -webkit-border-image: url(../images/chat_bubbles_clear_l.png) 10 10 13 19;
1007                                 }
1008
1009
1010
1011
1012                         /*rights*/
1013
1014                         body#chat div.right p.aqua {
1015                                 -webkit-border-image: url(../images/chat_bubbles_aqua_r.png) 10 19 13 10;
1016                                 }
1017
1018                         body#chat div.right p.lemon {
1019                                 -webkit-border-image: url(../images/chat_bubbles_lemon_r.png) 10 19 13 10;
1020                                 }
1021
1022                         body#chat div.right p.lime {
1023                                 -webkit-border-image: url(../images/chat_bubbles_lime_r.png) 10 19 13 10;
1024                                 }
1025
1026                         body#chat div.right p.purple {
1027                                 -webkit-border-image: url(../images/chat_bubbles_purple_r.png) 10 19 13 10;
1028                                 }
1029
1030                         body#chat div.right p.pink {
1031                                 -webkit-border-image: url(../images/chat_bubbles_pink_r.png) 10 19 13 10;
1032                                 }
1033
1034                         body#chat div.right p.graphite {
1035                                 -webkit-border-image: url(../images/chat_bubbles_graphite_r.png) 10 19 13 10;
1036                                 }
1037
1038                         body#chat div.right p.clear {
1039                                 -webkit-border-image: url(../images/chat_bubbles_clear_r.png) 10 19 13 10;
1040                                 }
1041
1042
1043
1044
1045
1046
1047
1048                 body#chat div.bubble p {
1049                         color: #000;
1050                         font-size: 16px;
1051                         margin: 0;
1052                 }
1053
1054                         body#chat div.bubble + p {
1055                                 color: #666;
1056                                 text-align: center;
1057                                 font-size: 12px;
1058                                 font-weight: bold;
1059                                 margin: 0;
1060                                 padding: 10px 0 0 0;
1061                                 clear: both;
1062                         }
1063
1064
1065
1066
1067
1068
1069                 /**** image grids ****/
1070
1071
1072                 body#images {
1073                         background: #fff;
1074                         margin: 0;
1075                 }
1076
1077                         body#images ul {
1078                                 margin: 4px 4px 4px 0;
1079                                 border: 0;
1080                                 -webkit-border-radius: 0;
1081                                 }
1082
1083                                 body#images ul li {
1084                                         border: 1px solid #C0D5DD;
1085                                         -webkit-border-radius: 0;
1086                                         width: 73px;
1087                                         height: 73px;
1088                                         float: left;
1089                                         margin: 0 0 4px 4px;
1090                                         background: #F4FBFE url(../images/image-loading.gif) no-repeat center center;
1091                                         padding: 0;
1092                                         }
1093
1094                                         body#images ul li a {
1095                                                 display: block;
1096                                                 width: 100%;
1097                                                 height: 100%;
1098                                                 margin: 0;
1099                                                 padding: 0;
1100                                         }
1101
1102
1103                 /*** BLANK PAGES ***/
1104
1105                 body#blank {
1106                         background: #fff;
1107                 }
1108
1109
1110                 body#blank p {
1111                         color: #898989;
1112                         text-align: center;
1113                         margin: 250px 0 0 0;
1114                         }
1115
1116
1117
1118
1119                         /**** ICONFIED LIST ****/
1120
1121
1122                         ul li a img.ico, ul li img.ico {
1123                                 float: left;
1124                                 display: block;
1125                                 margin: -4px 10px -4px -1px;
1126                         }
1127
1128