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