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 @import url(../../base/css/display.css);
   6
   7 html {}
   8 body {
   9   width: 100%;
  10   padding: 0;
  11   margin: 0;
  12   font-family: Verdana, Arial, Helvetica, sans-serif;
  13   font-size: 24px;
  14   min-height: 100%;
  15   height: 100%;
  16   color: #193441;
  17 }
  18
  19 a {
  20   color: #C15D42;
  21   text-decoration: none;
  22 }
  23 a:hover {
  24   text-decoration: underline;
  25 }
  26 img, img a {
  27   border: 0;
  28 }
  29 h1 {
  30   font-size: 1.2em;
  31 }
  32
  33 #wrap {
  34   margin: 0;
  35 }
  36
  37 #header {
  38   width: 100%;
  39   float: left;
  40   background-color: #193441;
  41   margin: 0 0 20px 0;
  42   padding: 0;
  43 }
  44 #logo {
  45   float: left;
  46   margin: 10px 0px 0px 10px;
  47 }
  48 p#branding {
  49   margin: 0;
  50   padding: 6px 0 3px 0;
  51   color: #fbf2d7;
  52   font-size: 2em;
  53   font-weight: bold;
  54   line-height: 2.5em;
  55 }
  56 p#branding a {
  57   color: #dab134;
  58 }
  59
  60 #header h1.pagetitle {
  61   display: none;
  62   margin: 0;
  63   padding: 0;
  64   font-size: 1.2em;
  65   line-height: 2em;
  66   color: #d8e2d7;
  67 }
  68
  69 #header h2.sitename {
  70   display: none;
  71   margin: 0;
  72   padding: 0;
  73   color: #FCFFF5;
  74 }
  75
  76 /* ===== Begin Navigation Styling ===== */
  77
  78 /* ----- Navigation ------ */
  79 #nav {
  80   float: right;
  81   margin: 0;
  82   padding: 0;
  83   list-style-type: none;
  84   font-size: 1.2em;
  85 }
  86 #nav li {
  87   display: block;
  88   float: left;
  89 }
  90 #nav li a {
  91   display: block;
  92   padding: 9px 15px 12px 0px;
  93   color: #91AA9D;
  94 }
  95 #nav li a:hover {
  96   text-decoration: underline;
  97 }
  98
  99 /* ----- Tabs ----- */
 100 #nav_views {
 101   clear: both;
 102   float: left;
 103   margin: 10px 0px 0px 5px;
 104   padding: 0;
 105   bottom: 0;
 106   list-style-type: none;
 107   font-size: 1.1em;
 108   font-weight: bold;
 109 }
 110 #nav_views li {
 111   display: block;
 112   float: left;
 113   line-height: 1.3em;
 114 }
 115 #nav_views li a {
 116   display: block;
 117   margin: 0;
 118   padding: 4px 12px 3px 12px;
 119   color: #FCFFF5;
 120   background-color: #91AA9D;
 121   border-right: 1px solid #6A8787;
 122 }
 123 #nav_views li a:hover {
 124   text-decoration: none;
 125 }
 126 #nav_views li.current a, #nav_views li.current a:hover {
 127   color: #3F606F;
 128   background-color: #FCFFF5;
 129   border-right: 1px solid #6A8787;
 130 }
 131 #nav_views li.current a:hover {
 132   color: #193441;
 133 }
 134 #nav_views li a:hover {
 135   color: #FCFFF5;
 136   background-color: #3F606F;
 137   border-right: 1px solid #6A8787;
 138 }
 139
 140 /* ----- Nav Footer ----- */
 141 #nav_sub {
 142   clear: both;
 143   margin: 18px 10px 0 10px;
 144   padding: 0;
 145   list-style-type: none;
 146   font-size: 1.1em;
 147   font-weight: bold;
 148   line-height: 2em;
 149   border-top: 1px solid #D8E2D7;
 150 }
 151 #nav_sub li {
 152   display: block;
 153   float: left;
 154 }
 155 #nav_sub li a {
 156   padding: 6px 24px 6px 0;
 157 }
 158 #nav_sub li a:hover {
 159   text-decoration: underline;
 160 }
 161 /* ===== End Navigation Styling ===== */
 162
 163 #content {
 164   clear: left;
 165   margin: 10px;
 166   font-family: Georgia, "Times New Roman", Times, serif;
 167   font-size: 1em;
 168   line-height: 1.1em;
 169 }
 170 #content h2 {
 171   font-family: Verdana, Arial, Helvetica, sans-serif;
 172   font-size: 1.1em;
 173 }
 174 #content label {
 175   font-family: Verdana, Arial, Helvetica, sans-serif;
 176   font-size: 1.1em;
 177 }
 178
 179 .instructions {
 180   clear: both;
 181   float: left;
 182   margin: 5px 5px 10px 5px;
 183 }
 184 .instructions p, .success, .error {
 185   font-weight: normal;
 186   margin: 0;
 187   padding: 10px;
 188   font-family: Georgia, "Times New Roman", Times, serif;
 189   font-size: 1.1em;
 190   line-height: 1.2em;
 191   border: 1px solid #91AA9D;
 192   color: #FCFFF5;
 193 }
 194 .instructions a, .success a, .error a {
 195   color: #d8e2d7;
 196   text-decoration: underline;
 197 }
 198 .instructions a:hover, .success a:hover, .error a:hover {
 199   color: #FCFFF5;
 200 }
 201 .success {
 202   clear: both;
 203   float: left;
 204   margin: 5px 5px 10px 5px;
 205   background-color: #48705b;
 206 }
 207 .error {
 208   clear: both;
 209   float: left;
 210   margin: 5px 5px 10px 5px;
 211   background-color: #ce3728;
 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 #pagination {
 406   margin: 18px auto;
 407 }
 408 #nav_pagination {
 409   margin: 0 0 36px 0;
 410   padding: 0;
 411   float: right;
 412   list-style-type: none;
 413   font-size: 12px;
 414   font-weight: bold;
 415 }
 416 #nav_pagination li {
 417   display: block;
 418   float: left;
 419   background-color: #91AA9D;
 420 }
 421 #nav_pagination li.before {
 422   margin-right: 1px;
 423 }
 424 #nav_pagination li a {
 425   padding: 6px 15px;
 426   line-height: 2em;
 427   background-color: #91AA9D;
 428   color: #FCFFF5;
 429 }
 430 #nav_pagination li a:hover {
 431   background-color: #3F606F;
 432   color: #FCFFF5;
 433   text-decoration: none;
 434 }
 435
 436 #footer {
 437   clear: both;
 438   margin: 10px;
 439   border-top: 1px solid #D8E2D7;
 440 }
 441 #footer p {
 442   font-size: 0.8em;
 443   margin-top: 1em;
 444   line-height: 1.2em;
 445 }
 446 #cc {
 447   float: left;
 448   margin: 3px 10px 0 0;
 449 }
 450
 451 /* ===== Begin Forms Styling ===== */
 452
 453 /* ----- Forms General Style ----- */
 454 form {
 455   margin: 0 auto;
 456   padding: 0;
 457 }
 458 form {
 459   font-family: Verdana, Arial, Helvetica, sans-serif;
 460   font-size: 1em;
 461 }
 462 form label {
 463   display: block;
 464   font-size: 1em;
 465   font-weight: bold;
 466   line-height: 1.5em;
 467 }
 468 form input {
 469   border: 1px solid #D8E2D7;
 470   width: 264px;
 471 }
 472 input#submit, input.submit  {
 473   display: block;
 474   margin: 18px 0;
 475   padding: 4px;
 476   font-weight: bold;
 477   color: #FCFFF5;
 478   background-color: #C15D42;
 479   cursor: pointer;
 480   border: 0;
 481   width: auto;
 482 }
 483 input#submit:hover, input.submit:hover {
 484   background-color: #904632;
 485 }
 486 input.checkbox {
 487   width: auto;
 488   border: 0;
 489 }
 490 textarea, input {
 491   font-family: Verdana, Arial, Helvetica, sans-serif;
 492   font-size: 1em;
 493   color: #193441;
 494   padding: 3px;
 495 }
 496 textarea:focus, input:focus {
 497   background-color: #f0f6eb;
 498 }
 499 textarea {
 500   width: 270px;
 501   border: 1px solid #D8E2D7;
 502 }
 503 .input_instructions {
 504   margin-top: 3px;
 505   display: block;
 506   font-size: 1em;
 507   line-height: 1.2em;
 508   color: #91aa9d;
 509   font-family: Verdana, Arial, Helvetica, sans-serif;
 510 }
 511
 512 /* ----- Status Form ----- */
 513 #status_form {
 514   width: 100%;
 515   margin: 0px 0px 10px 5px;
 516 }
 517 #status_form p {
 518   margin: 0;
 519   padding: 0;
 520 }
 521 #status_label {
 522   display: none;
 523   clear: both;
 524   margin: 0;
 525   padding: 0 0 3px 0;
 526   font-size: 1.5em;
 527   font-weight: bold;
 528   line-height: 2em;
 529   color: #91AA9D;
 530 }
 531 #status_textarea {
 532   display: block;
 533   float: left;
 534   width: 70%;
 535   height: 3em;
 536   margin: 0 0 10px 0;
 537   padding: 0;
 538   font-family: Verdana, Arial, Helvetica, sans-serif;
 539   font-size: 1.1em;
 540   color: #193441;
 541   border: 0;
 542 }
 543 #status_submit {
 544   display: block;
 545   float: left;
 546   margin: 0 0 0 4px;
 547   padding: 1em 10px 1em 10px;
 548   line-height: 1em;
 549   width: 10%;
 550   background-color: #C15D42;
 551   font-family: Verdana, Arial, Helvetica, sans-serif;
 552   font-weight: bold;
 553   font-size: 1em;
 554   color: #FCFFF5;
 555   cursor: pointer;
 556   border: 0;
 557 }
 558 #status_submit:hover {
 559   background-color: #904632;
 560 }
 561 #counter {
 562   padding: 1em .5em 1em 5px;
 563   color: #fff;
 564   clear: both;
 565   float: left;
 566   font-weight: bold;
 567   text-align: right;
 568 }
 569 /* ----- Subscribe Form ----- */
 570 #subscribe .submit, #unsubscribe .submit, #remotesubscribe .button, #remotesubscribe {
 571   clear: left;
 572   margin: 0;
 573   width: 96px;
 574   height: 27px;
 575   font-family: verdana, arial, helvetica, sans-serif;
 576   font-weight: bold;
 577   font-size: 12px;
 578   text-transform: uppercase;
 579   background-color: #c15d42;
 580   color: #fcfff5;
 581   border: 0;
 582 }
 583 #remotesubscribe {
 584   width: 96px;
 585   height: 22px;
 586   padding: 5px 0 0 0;
 587   text-align: center;
 588 }
 589 #subscribe .button:hover, #unsubscribe .button:hover {
 590   background-color: #904632;
 591   cursor: pointer;
 592 }
 593
 594 a#remotesubscribe {
 595   display: block;
 596 }
 597
 598 /* ----- Login Form -----*/
 599 input#license {
 600   width: auto;
 601   border: 0;
 602 }
 603 /* ----- Avatar Form -----*/
 604 form {
 605   clear: left;
 606 }
 607
 608 /* ----- OpenID Form -----*/
 609
 610 input#openid_url {
 611   background: url(login-bg.gif) no-repeat;
 612   background-color: #fff;
 613   background-position: 4px 50%;
 614   color: #000;
 615   padding-left: 24px;
 616 }
 617
 618 /* People lists (search results, maybe subscribers) */
 619
 620 #profiles {
 621   clear: both;
 622   margin: 0 auto;
 623   padding: 0;
 624   list-style-type: none;
 625   border-top: 1px solid #D8E2D7;
 626 }
 627 #profiles a:hover {
 628   text-decoration: underline;
 629 }
 630
 631 .profile_single {
 632   clear: both;
 633   display: block;
 634   margin: 0;
 635   padding: 5px 5px 5px 0;
 636   min-height: 48px;
 637   font-family: Georgia, "Times New Roman", Times, serif;
 638   font-size: 1.2em;
 639   line-height: 1.4em;
 640   border-bottom: 1px solid #D8E2D7;
 641 }
 642 .profile_single:hover {
 643   background-color: #F3F8EA;
 644 }
 645
 646 /* ----- IM Settings Form -----*/
 647
 648 #imsettings p {
 649   margin: 0;
 650   padding: 0;
 651   line-height: 1.3em;
 652 }
 653
 654 /* ===== End Forms Styling ===== */
 655
 656 /* ===== Tag Cloud Styling ===== */
 657
 658 p.tagcloud {
 659 text-align: center;
 660 }
 661
 662 p.tagcloud a {
 663 line-height:1em;
 664 vertical-align:middle;
 665 }
 666
 667 p.tagcloud a.largest {
 668 font-size: 4em;
 669 }
 670 p.tagcloud a.verylarge {
 671 font-size: 3em;
 672 }
 673
 674 p.tagcloud a.large {
 675 font-size: 2em;
 676 }
 677
 678 p.tagcloud a.medium {
 679 font-size: 1.5em;
 680 }
 681
 682 p.tagcloud a.small {
 683 font-size: 1em;
 684 }
 685
 686 p.tagcloud a.verysmall {
 687 font-size: 80%;
 688 }
 689
 690 p.tagcloud a.smallest {
 691 font-size: 60%;
 692 }
 693
 694 a.replybutton {
 695   border: 1px solid #D8E2D7;
 696   padding: 0px 10px 0px 10px;
 697   line-height: 0.8em;
 698 }