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