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