theme/iphone/display.css

   1 /* CSS Document */
   2 /* Design & CSS by Marie-Claude Doyon http://www.marieclaudedoyon.com */
   3 /* Simplified for mobile by Ken Sheppardson http://identi.ca/kshep    */
   4
   5 html {}
   6 body {
   7   width: 100%;
   8   padding: 0;
   9   margin: 0;
  10   font-family: Verdana, Arial, Helvetica, sans-serif;
  11   font-size: 24px;
  12   min-height: 100%;
  13   height: 100%;
  14   color: #193441;
  15 }
  16
  17 a {
  18   color: #C15D42;
  19   text-decoration: none;
  20 }
  21 a:hover {
  22   text-decoration: underline;
  23 }
  24 img, img a {
  25   border: 0;
  26 }
  27 h1 {
  28   font-size: 1.2em;
  29 }
  30
  31
  32 #wrap {
  33   margin: 0;
  34 }
  35
  36 #header {
  37   width: 100%;
  38   float: left;
  39   background-color: #193441;
  40   margin: 0 0 20px 0;
  41   padding: 0;
  42 }
  43 #logo {
  44   float: left;
  45   margin: 10px 0px 0px 10px;
  46 }
  47 p#branding {
  48   margin: 0;
  49   padding: 6px 0 3px 0;
  50   color: #fbf2d7;
  51   font-size: 2em;
  52   font-weight: bold;
  53   line-height: 2.5em;
  54 }
  55 p#branding a {
  56   color: #dab134;
  57 }
  58
  59 #header h1.pagetitle {
  60   display: none;
  61   margin: 0;
  62   padding: 0;
  63   font-size: 1.2em;
  64   line-height: 2em;
  65   color: #d8e2d7;
  66 }
  67
  68 #header h2.sitename {
  69   display: none;
  70   margin: 0;
  71   padding: 0;
  72   color: #FCFFF5;
  73 }
  74
  75 /* ===== Begin Navigation Styling ===== */
  76
  77 /* ----- Navigation ------ */
  78 #nav {
  79   float: right;
  80   margin: 0;
  81   padding: 0;
  82   list-style-type: none;
  83   font-size: 1.2em;
  84 }
  85 #nav li {
  86   display: block;
  87   float: left;
  88 }
  89 #nav li a {
  90   display: block;
  91   padding: 9px 15px 12px 0px;
  92   color: #91AA9D;
  93 }
  94 #nav li a:hover {
  95   text-decoration: underline;
  96 }
  97
  98 /* ----- Tabs ----- */
  99 #nav_views {
 100   clear: both;
 101   float: left;
 102   margin: 10px 0px 0px 5px;
 103   padding: 0;
 104   bottom: 0;
 105   list-style-type: none;
 106   font-size: 1.1em;
 107   font-weight: bold;
 108 }
 109 #nav_views li {
 110   display: block;
 111   float: left;
 112   line-height: 1.3em;
 113 }
 114 #nav_views li a {
 115   display: block;
 116   margin: 0;
 117   padding: 4px 12px 3px 12px;
 118   color: #FCFFF5;
 119   background-color: #91AA9D;
 120   border-right: 1px solid #6A8787;
 121 }
 122 #nav_views li a:hover {
 123   text-decoration: none;
 124 }
 125 #nav_views li.current a, #nav_views li.current a:hover {
 126   color: #3F606F;
 127   background-color: #FCFFF5;
 128   border-right: 1px solid #6A8787;
 129 }
 130 #nav_views li.current a:hover {
 131   color: #193441;
 132 }
 133 #nav_views li a:hover {
 134   color: #FCFFF5;
 135   background-color: #3F606F;
 136   border-right: 1px solid #6A8787;
 137 }
 138
 139 /* ----- Nav Footer ----- */
 140 #nav_sub {
 141   clear: both;
 142   margin: 18px 10px 0 10px;
 143   padding: 0;
 144   list-style-type: none;
 145   font-size: 1.1em;
 146   font-weight: bold;
 147   line-height: 2em;
 148   border-top: 1px solid #D8E2D7;
 149 }
 150 #nav_sub li {
 151   display: block;
 152   float: left;
 153 }
 154 #nav_sub li a {
 155   padding: 6px 24px 6px 0;
 156 }
 157 #nav_sub li a:hover {
 158   text-decoration: underline;
 159 }
 160 /* ===== End Navigation Styling ===== */
 161
 162 #content {
 163   clear: left;
 164   margin: 10px;
 165   font-family: Georgia, "Times New Roman", Times, serif;
 166   font-size: 1em;
 167   line-height: 1.1em;
 168 }
 169 #content h2 {
 170   font-family: Verdana, Arial, Helvetica, sans-serif;
 171   font-size: 1.1em;
 172 }
 173 #content label {
 174   font-family: Verdana, Arial, Helvetica, sans-serif;
 175   font-size: 1.1em;
 176 }
 177
 178 .instructions {
 179   clear: both;
 180   float: left;
 181   margin: 5px 5px 10px 5px;
 182 }
 183 .instructions p, .success, .error {
 184   font-weight: normal;
 185   margin: 0;
 186   padding: 10px;
 187   font-family: Georgia, "Times New Roman", Times, serif;
 188   font-size: 1.1em;
 189   line-height: 1.2em;
 190   border: 1px solid #91AA9D;
 191   color: #FCFFF5;
 192 }
 193 .instructions a, .success a, .error a {
 194   color: #d8e2d7;
 195   text-decoration: underline;
 196 }
 197 .instructions a:hover, .success a:hover, .error a:hover {
 198   color: #FCFFF5;
 199 }
 200 .success {
 201   clear: both;
 202   float: left;
 203   margin: 5px 5px 10px 5px;
 204   background-color: #48705b;
 205 }
 206 .error {
 207   clear: both;
 208   float: left;
 209   margin: 5px 5px 10px 5px;
 210   background-color: #ce3728;
 211 }
 212
 213
 214 /* ----- Stream -----*/
 215
 216 #notices {
 217   clear: both;
 218   margin: 0 auto;
 219   padding: 0;
 220   list-style-type: none;
 221   border-top: 1px solid #D8E2D7;
 222 }
 223 #notices a:hover {
 224   text-decoration: underline;
 225 }
 226 .notice_single {
 227   clear: both;
 228   display: block;
 229   margin: 0;
 230   padding: 5px 5px 5px 0;
 231   min-height: 48px;
 232   font-family: Georgia, "Times New Roman", Times, serif;
 233   font-size: 1em;
 234   line-height: 1.4em;
 235   border-bottom: 1px solid #D8E2D7;
 236 }
 237 .notice_single:hover {
 238   background-color: #F3F8EA;
 239 }
 240 .notice_single p {
 241   display: inline;
 242   margin: 0;
 243   padding: 0;
 244 }
 245 #notice_delete_form #confirmation_text {
 246   display: block;
 247   font-size: 1.1em;
 248   font-weight: bold;
 249 }
 250 input#submit_yes, input#submit_no {
 251   margin: 18px 10px 0px 0px;
 252   padding: 4px;
 253   font-weight: bold;
 254   color: #FCFFF5;
 255   background-color: #C15D42;
 256   cursor: pointer;
 257   border: 0;
 258   width: 40px;
 259 }
 260 input#submit_yes:hover, input#submit_no:hover {
 261   background-color: #904632;
 262 }
 263 .avatar.stream {
 264   float: left;
 265   margin: 0 10px 0 0;
 266 }
 267 p.time {
 268   display: block;
 269   font-family: Verdana, Arial, Helvetica, sans-serif;
 270   font-size: 0.9em;
 271   line-height: 2em;
 272 }
 273 p.time a {
 274   color: #91AA9D;
 275 }
 276
 277 /* ----- Profile -----*/
 278 #profile {
 279   clear: both;
 280   float: left;
 281   padding: 10px 0 0 0;
 282   border-top: 1px solid #D8E2D7;
 283   font-family: Georgia, "Times New Roman", Times, serif;
 284 }
 285 #profile h1 {
 286   clear: both;
 287   float: left;
 288   margin: 0;
 289   padding: 0;
 290   font-family: Verdana, Arial, Helvetica, sans-serif;
 291   font-size: 1.2em;
 292 }
 293 #profile h2 {
 294   clear: both;
 295   float: left;
 296   margin: 0;
 297   padding: 1em 0 0.2em 0;
 298   font-family: Verdana, Arial, Helvetica, sans-serif;
 299   font-size: 1.1em;
 300   text-transform: uppercase;
 301   color: #91AA9D;
 302 }
 303 #profile p {
 304   clear: both;
 305   float: left;
 306   margin: 0 10px 0 0;
 307   font-size: 1em;
 308   line-height: 1.4em;
 309 }
 310 #profile p.location {
 311   margin: 0 10px 12px 0;
 312   font-style: italic;
 313 }
 314 #profile p.notice_current {
 315   font-size: 1.2em;
 316   line-height: 1.3em;
 317 }
 318 #profile_avatar {
 319   float: left;
 320   margin-right: 4px;
 321 }
 322 #profile_avatar img {
 323   margin-bottom: 5px;
 324 }
 325 .avatar.profile {
 326   clear: left;
 327   margin: 0 10px 5px 0;
 328 }
 329 .avatar.original {
 330   float: left;
 331   margin: 0 10px 18px 0;
 332 }
 333 a.nickname {
 334   font-family: Verdana, Arial, Helvetica, sans-serif;
 335   font-weight: bold;
 336   font-size: 1.1em;
 337   padding-right: 3px;
 338 }
 339 #profile_information {
 340   float: left;
 341 }
 342
 343 .statistics {
 344   clear: both;
 345   float: left;
 346 }
 347 .statistics h2 {
 348   clear: both;
 349   float: left;
 350   margin: 12px 0 3px 0;
 351 }
 352 dl.statistics {
 353   margin: 0;
 354 }
 355 .statistics dt {
 356   clear: left;
 357   float: left;
 358   width: 200px;
 359 }
 360 .statistics dd {
 361   float: left;
 362 }
 363 .statistics dt:after {
 364   content: ":";
 365 }
 366 #subscriptions {
 367   clear: both;
 368   float: left;
 369   margin: 18px 0 30px 0;
 370 }
 371 #subscriptions_avatars {
 372   clear: both;
 373   float: left;
 374   margin: 6px 0 0 0;
 375   padding: 0;
 376   list-style-type: none;
 377 }
 378 #subscriptions_avatars li .avatar.mini {
 379   float: left;
 380   margin: 0 3px 3px 0;
 381   padding: 0;
 382   line-height: 0;
 383 }
 384 #subscriptions_viewall {
 385   clear: left;
 386 }
 387 /* ----- End Profile -----*/
 388
 389 /* ----- Begin Subscriptions & Subscribers -----*/
 390
 391 ul.subscriptions, ul.subscribers {
 392   float: none;
 393   margin: 0;
 394   padding: 0;
 395   list-style-type: none;
 396   overflow: auto;
 397 }
 398 ul.subscriptions li, ul.subscribers li {
 399   display: block;
 400   float: left;
 401   padding: 0;
 402 }
 403 /* ----- End Subscriptions & Subscribers -----*/
 404
 405
 406
 407 #pagination {
 408   margin: 18px auto;
 409 }
 410 #nav_pagination {
 411   margin: 0 0 36px 0;
 412   padding: 0;
 413   float: right;
 414   list-style-type: none;
 415   font-size: 12px;
 416   font-weight: bold;
 417 }
 418 #nav_pagination li {
 419   display: block;
 420   float: left;
 421   background-color: #91AA9D;
 422 }
 423 #nav_pagination li.before {
 424   margin-right: 1px;
 425 }
 426 #nav_pagination li a {
 427   padding: 6px 15px;
 428   line-height: 2em;
 429   background-color: #91AA9D;
 430   color: #FCFFF5;
 431 }
 432 #nav_pagination li a:hover {
 433   background-color: #3F606F;
 434   color: #FCFFF5;
 435   text-decoration: none;
 436 }
 437
 438 #footer {
 439   clear: both;
 440   margin: 10px;
 441   border-top: 1px solid #D8E2D7;
 442 }
 443 #footer p {
 444   font-size: 0.8em;
 445   margin-top: 1em;
 446   line-height: 1.2em;
 447 }
 448 #cc {
 449   float: left;
 450   margin: 3px 10px 0 0;
 451 }
 452
 453 /* ===== Begin Forms Styling ===== */
 454
 455 /* ----- Forms General Style ----- */
 456 form {
 457   margin: 0 auto;
 458   padding: 0;
 459 }
 460 form {
 461   font-family: Verdana, Arial, Helvetica, sans-serif;
 462   font-size: 1em;
 463 }
 464 form label {
 465   display: block;
 466   font-size: 1em;
 467   font-weight: bold;
 468   line-height: 1.5em;
 469 }
 470 form input {
 471   border: 1px solid #D8E2D7;
 472   width: 264px;
 473 }
 474 input#submit, input.submit  {
 475   display: block;
 476   margin: 18px 0;
 477   padding: 4px;
 478   font-weight: bold;
 479   color: #FCFFF5;
 480   background-color: #C15D42;
 481   cursor: pointer;
 482   border: 0;
 483   width: auto;
 484 }
 485 input#submit:hover, input.submit:hover {
 486   background-color: #904632;
 487 }
 488 input.checkbox {
 489   width: auto;
 490   border: 0;
 491 }
 492 textarea, input {
 493   font-family: Verdana, Arial, Helvetica, sans-serif;
 494   font-size: 1em;
 495   color: #193441;
 496   padding: 3px;
 497 }
 498 textarea:focus, input:focus {
 499   background-color: #f0f6eb;
 500 }
 501 textarea {
 502   width: 270px;
 503   border: 1px solid #D8E2D7;
 504 }
 505 .input_instructions {
 506   margin-top: 3px;
 507   display: block;
 508   font-size: 1em;
 509   line-height: 1.2em;
 510   color: #91aa9d;
 511   font-family: Verdana, Arial, Helvetica, sans-serif;
 512 }
 513
 514 /* ----- Status Form ----- */
 515 #status_form {
 516   width: 100%;
 517   margin: 0px 0px 10px 5px;
 518 }
 519 #status_form p {
 520   margin: 0;
 521   padding: 0;
 522 }
 523 #status_label {
 524   display: none;
 525   clear: both;
 526   margin: 0;
 527   padding: 0 0 3px 0;
 528   font-size: 1.5em;
 529   font-weight: bold;
 530   line-height: 2em;
 531   color: #91AA9D;
 532 }
 533 #status_textarea {
 534   display: block;
 535   float: left;
 536   width: 70%;
 537   height: 3em;
 538   margin: 0 0 10px 0;
 539   padding: 0;
 540   font-family: Verdana, Arial, Helvetica, sans-serif;
 541   font-size: 1.1em;
 542   color: #193441;
 543   border: 0;
 544 }
 545 #status_submit {
 546   display: block;
 547   float: left;
 548   margin: 0 0 0 4px;
 549   padding: 1em 10px 1em 10px;
 550   line-height: 1em;
 551   width: 10%;
 552   background-color: #C15D42;
 553   font-family: Verdana, Arial, Helvetica, sans-serif;
 554   font-weight: bold;
 555   font-size: 1em;
 556   color: #FCFFF5;
 557   cursor: pointer;
 558   border: 0;
 559 }
 560 #status_submit:hover {
 561   background-color: #904632;
 562 }
 563 #counter {
 564   padding: 1em .5em 1em 5px;
 565   color: #fff;
 566   clear: both;
 567   float: left;
 568   font-weight: bold;
 569   text-align: right;
 570 }
 571 /* ----- Subscribe Form ----- */
 572 #subscribe .submit, #unsubscribe .submit, #remotesubscribe .button, #remotesubscribe {
 573   clear: left;
 574   margin: 0;
 575   width: 96px;
 576   height: 27px;
 577   font-family: verdana, arial, helvetica, sans-serif;
 578   font-weight: bold;
 579   font-size: 12px;
 580   text-transform: uppercase;
 581   background-color: #c15d42;
 582   color: #fcfff5;
 583   border: 0;
 584 }
 585 #remotesubscribe {
 586   width: 96px;
 587   height: 22px;
 588   padding: 5px 0 0 0;
 589   text-align: center;
 590 }
 591 #subscribe .button:hover, #unsubscribe .button:hover {
 592   background-color: #904632;
 593   cursor: pointer;
 594 }
 595
 596 a#remotesubscribe {
 597   display: block;
 598 }
 599
 600 /* ----- Login Form -----*/
 601 input#license {
 602   width: auto;
 603   border: 0;
 604 }
 605 /* ----- Avatar Form -----*/
 606 form {
 607   clear: left;
 608 }
 609
 610 /* ----- OpenID Form -----*/
 611
 612 input#openid_url {
 613   background: url(login-bg.gif) no-repeat;
 614   background-color: #fff;
 615   background-position: 4px 50%;
 616   color: #000;
 617   padding-left: 24px;
 618 }
 619
 620 /* People lists (search results, maybe subscribers) */
 621
 622 #profiles {
 623   clear: both;
 624   margin: 0 auto;
 625   padding: 0;
 626   list-style-type: none;
 627   border-top: 1px solid #D8E2D7;
 628 }
 629 #profiles a:hover {
 630   text-decoration: underline;
 631 }
 632
 633 .profile_single {
 634   clear: both;
 635   display: block;
 636   margin: 0;
 637   padding: 5px 5px 5px 0;
 638   min-height: 48px;
 639   font-family: Georgia, "Times New Roman", Times, serif;
 640   font-size: 1.2em;
 641   line-height: 1.4em;
 642   border-bottom: 1px solid #D8E2D7;
 643 }
 644 .profile_single:hover {
 645   background-color: #F3F8EA;
 646 }
 647
 648 /* ----- IM Settings Form -----*/
 649
 650 #imsettings p {
 651   margin: 0;
 652   padding: 0;
 653   line-height: 1.3em;
 654 }
 655
 656 /* ===== End Forms Styling ===== */
 657
 658 /* ===== Tag Cloud Styling ===== */
 659
 660 p.tagcloud {
 661 text-align: center;
 662 }
 663
 664 p.tagcloud a {
 665 line-height:1em;
 666 vertical-align:middle;
 667 }
 668
 669 p.tagcloud a.largest {
 670 font-size: 4em;
 671 }
 672 p.tagcloud a.verylarge {
 673 font-size: 3em;
 674 }
 675
 676 p.tagcloud a.large {
 677 font-size: 2em;
 678 }
 679
 680 p.tagcloud a.medium {
 681 font-size: 1.5em;
 682 }
 683
 684 p.tagcloud a.small {
 685 font-size: 1em;
 686 }
 687
 688 p.tagcloud a.verysmall {
 689 font-size: 80%;
 690 }
 691
 692 p.tagcloud a.smallest {
 693 font-size: 60%;
 694 }
 695
 696 a.replybutton {
 697   border: 1px solid #D8E2D7;
 698   padding: 0px 10px 0px 10px;
 699   line-height: 0.8em;
 700 }