theme/default/display.css

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