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