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