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