theme/stoica/display.css

   1 /* CSS Document */
   2 /* Design & CSS by Marie-Claude Doyon http://www.marieclaudedoyon.com */
   3
   4 html {
   5         background: url(bg-body.gif) repeat-y top center #d8e2d7;
   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: #193441;
  18         }
  19 a {
  20         color: #C15D42;
  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 #FCFFF5;
  39         }
  40 #header {
  41         position: relative;
  42         margin: 0 auto;
  43         width: 540px;
  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: #d8e2d7;
  67 }
  68
  69 #header h2.sitename {
  70         display: none;
  71         margin: 0;
  72         padding: 0;
  73         color: #FCFFF5;
  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: #91AA9D;
  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: 540px;
 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: #FCFFF5;
 121         background-color: #91AA9D;
 122         border-right: 1px solid #6A8787;
 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: #3F606F;
 129         background-color: #FCFFF5;
 130         border-right: 1px solid #6A8787;
 131         }
 132 #nav_views li.current a:hover {
 133         color: #193441;
 134         }
 135 #nav_views li a:hover {
 136         color: #FCFFF5;
 137         background-color: #3F606F;
 138         border-right: 1px solid #6A8787;
 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 #D8E2D7;
 151         width: 540px;
 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 110px;
 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 #91AA9D;
 189         color: #FCFFF5;
 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: #FCFFF5;
 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: 540px;
 214         border-top: 1px solid #D8E2D7;
 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 #D8E2D7;
 229         }
 230 .notice_single:hover {
 231         background-color: #F3F8EA;
 232         }
 233 .notice_single p {
 234         display: inline;
 235         margin: 0;
 236         padding: 0;
 237         }
 238 .avatar.stream {
 239         float: left;
 240         margin: 0 10px 0 0;
 241         }
 242 p.time {
 243         display: block;
 244         font-family: Verdana, Arial, Helvetica, sans-serif;
 245         font-size: 10px;
 246         line-height: 15px;
 247         }
 248 p.time a {
 249         color: #91AA9D;
 250         }
 251
 252 /* ----- Profile -----*/
 253 #profile {
 254         clear: left;
 255         margin: 0 -110px;
 256         padding: 10px 0 0 0;
 257         min-height: 170px;
 258         border-top: 1px solid #D8E2D7;
 259         font-family: Georgia, "Times New Roman", Times, serif;
 260         }
 261 #profile h1 {
 262         margin: 0;
 263         padding: 0;
 264         font-family: Verdana, Arial, Helvetica, sans-serif;
 265         font-size: 14px;
 266         }
 267 #profile h2 {
 268         margin: 0;
 269         padding: 0;
 270         font-family: Verdana, Arial, Helvetica, sans-serif;
 271         font-size: 11px;
 272         text-transform: uppercase;
 273         color: #91AA9D;
 274         }
 275 #profile p {
 276         margin: 0 10px 0 0;
 277         font-size: 12px;
 278         line-height: 14px;
 279         }
 280 #profile p.location {
 281         margin: 0 10px 12px 0;
 282         font-style: italic;
 283         }
 284 #profile p.notice_current {
 285         font-size: 18px;
 286         line-height: 21px;
 287         }
 288 #profile_avatar {
 289         float: left;
 290         margin-right: 4px;
 291         }
 292 #profile_avatar img {
 293         margin-bottom: 5px;
 294         }
 295 .avatar.profile {
 296         clear: left;
 297         margin: 0 10px 5px 0;
 298         }
 299 .avatar.original {
 300         float: left;
 301         margin: 0 10px 18px 0;
 302         }
 303 a.nickname {
 304         font-family: Verdana, Arial, Helvetica, sans-serif;
 305         font-weight: bold;
 306         font-size: 12px;
 307         padding-right: 3px;
 308         }
 309 #profile_information {
 310         float: left;
 311         position: relative;
 312         width: 270px;
 313         height: 200px;
 314         }
 315 .statistics {
 316         margin-top: 18px;
 317         }
 318 .statistics h2 {
 319         margin: 12px 0 3px 0;
 320         }
 321 dl.statistics {
 322         margin: 0;
 323         font-size: 12px;
 324         line-height: 14px;
 325         }
 326 .statistics dt {
 327         float: left;
 328         width: 96px;
 329 }
 330 .statistics dd {
 331         margin-left: 100px;
 332 }
 333 .statistics dt:after {
 334         content: ":";
 335         }
 336 #subscriptions {
 337         float: left;
 338         margin: 18px 0 30px 0;
 339         }
 340 #subscriptions_avatars {
 341         float: left;
 342         margin: 6px 0 0 0;
 343         padding: 0;
 344         list-style-type: none;
 345         width: 270px;
 346         }
 347 #subscriptions_avatars li .avatar.mini {
 348         float: left;
 349         margin: 0 3px 3px 0;
 350         padding: 0;
 351         line-height: 0;
 352         /* border: 1px solid #f00; */
 353         }
 354 #subscriptions_viewall {
 355         clear: left;
 356         }
 357 /* ----- End Profile -----*/
 358
 359 /* ----- Begin Subscriptions & Subscribers -----*/
 360
 361 ul.subscriptions, ul.subscribers {
 362         float: none;
 363         margin: 0;
 364         padding: 0;
 365         list-style-type: none;
 366         overflow: auto;
 367         }
 368 ul.subscriptions li, ul.subscribers li {
 369         display: block;
 370         float: left;
 371         padding: 0;
 372         }
 373 /* ----- End Subscriptions & Subscribers -----*/
 374
 375
 376
 377 #pagination {
 378         margin: 18px auto;
 379         width: 540px;
 380         }
 381 #nav_pagination {
 382         margin: 0 0 36px 0;
 383         padding: 0;
 384         float: right;
 385         list-style-type: none;
 386         font-size: 12px;
 387         font-weight: bold;
 388         }
 389 #nav_pagination li {
 390         display: block;
 391         float: left;
 392         background-color: #91AA9D;
 393         }
 394 #nav_pagination li.before {
 395         margin-right: 1px;
 396         }
 397 #nav_pagination li a {
 398         padding: 6px 15px;
 399         line-height: 21px;
 400         background-color: #91AA9D;
 401         color: #FCFFF5;
 402         }
 403 #nav_pagination li a:hover {
 404         background-color: #3F606F;
 405         color: #FCFFF5;
 406         text-decoration: none;
 407         }
 408
 409 #footer {
 410         clear: both;
 411         margin: 0 auto;
 412         padding: 0 0 36px 0;
 413         width: 540px;
 414         border-top: 1px solid #D8E2D7;
 415         }
 416 #footer p {
 417         margin-top: 9px;
 418         line-height: 12px;
 419         }
 420 #cc {
 421         float: left;
 422         margin: 3px 10px 0 0;
 423         }
 424
 425 /* ===== Begin Forms Styling ===== */
 426
 427 /* ----- Forms General Style ----- */
 428 form {
 429         margin: 0 auto;
 430         padding: 0;
 431         }
 432 form {
 433         font-family: Verdana, Arial, Helvetica, sans-serif;
 434         font-size: 12px;
 435         }
 436 form label {
 437         display: block;
 438         font-size: 12px;
 439         font-weight: bold;
 440         line-height: 18px;
 441         }
 442 form input {
 443         border: 1px solid #D8E2D7;
 444         width: 264px;
 445         }
 446 input#submit, input.submit  {
 447         display: block;
 448         margin: 18px 0;
 449         padding: 4px;
 450         font-weight: bold;
 451         color: #FCFFF5;
 452         background-color: #C15D42;
 453         cursor: pointer;
 454         border: 0;
 455         width: auto;
 456         }
 457 input#submit:hover, input.submit:hover {
 458         background-color: #904632;
 459         }
 460 input.checkbox {
 461         /*width: 14px;
 462         height: 14px;*/
 463         width: auto;
 464         border: 0;
 465         }
 466 textarea, input {
 467         font-family: Verdana, Arial, Helvetica, sans-serif;
 468         font-size: 12px;
 469         color: #193441;
 470         padding: 3px;
 471         }
 472 textarea:focus, input:focus {
 473         background-color: #f0f6eb;
 474         }
 475 textarea {
 476         width: 270px;
 477         border: 1px solid #D8E2D7;
 478         }
 479 .input_instructions {
 480         margin-top: 3px;
 481         display: block;
 482         font-size: 11px;
 483         line-height: 15px;
 484         color: #91aa9d;
 485         font-family: Verdana, Arial, Helvetica, sans-serif;
 486         }
 487
 488 /* ----- Status Form ----- */
 489 #status_form {
 490         height: 96px;
 491         /*background-color: #F00;*/
 492         }
 493 #status_form p {
 494         margin: 36px 0 0 0;
 495         padding: 0;
 496         }
 497 #status_label {
 498         display: block;
 499         clear: both;
 500         margin: 0;
 501         padding: 0 0 3px 0;
 502         font-size: 18px;
 503         font-weight: bold;
 504         line-height: 24px;
 505         color: #91AA9D;
 506         }
 507 #status_textarea {
 508         display: block;
 509         float: left;
 510         width: 463px;
 511         height: 35px;
 512         padding: 5px;
 513         font-family: Verdana, Arial, Helvetica, sans-serif;
 514         font-size: 12px;
 515         color: #193441;
 516         border: 0;
 517         }
 518 #status_submit {
 519         display: block;
 520         float: left;
 521         margin: 1px 0 0 4px;
 522         width: 63px;
 523         height: 45px;
 524         background-color: #C15D42;
 525         font-family: Verdana, Arial, Helvetica, sans-serif;
 526         font-weight: bold;
 527         font-size: 14px;
 528         color: #FCFFF5;
 529         cursor: pointer;
 530         border: 0;
 531         }
 532 #status_submit:hover {
 533         background-color: #904632;
 534         }
 535 #counter {
 536         position: absolute;
 537         top: 140px;
 538         left: -64px;
 539         width: 50px;
 540         font-weight: bold;
 541         text-align: right;
 542 }
 543 /* ----- Subscribe Form ----- */
 544 #subscribe .submit, #unsubscribe .submit, #remotesubscribe .button, #remotesubscribe {
 545         clear: left;
 546         margin: 0;
 547         width: 96px;
 548         height: 27px;
 549         font-family: verdana, arial, helvetica, sans-serif;
 550         font-weight: bold;
 551         font-size: 10px;
 552         text-transform: uppercase;
 553         background-color: #c15d42;
 554         color: #fcfff5;
 555         border: 0;
 556         }
 557 #remotesubscribe {
 558         width: 96px;
 559         height: 22px;
 560         padding: 5px 0 0 0;
 561         text-align: center;
 562         }
 563 #subscribe .button:hover, #unsubscribe .button:hover {
 564         background-color: #904632;
 565         cursor: pointer;
 566         }
 567
 568 a#remotesubscribe {
 569         display: block;
 570 }
 571
 572 /* ----- Login Form -----*/
 573 input#license {
 574         width: auto;
 575         border: 0;
 576         }
 577 /* ----- Avatar Form -----*/
 578 form {
 579         clear: left;
 580 }
 581
 582 /* ----- OpenID Form -----*/
 583
 584 input#openid_url {
 585    background: url(login-bg.gif) no-repeat;
 586    background-color: #fff;
 587    background-position: 4px 50%;
 588    color: #000;
 589    padding-left: 24px;
 590 }
 591
 592 /* People lists (search results, maybe subscribers) */
 593
 594 #profiles {
 595         clear: both;
 596         margin: 0 auto;
 597         padding: 0;
 598         list-style-type: none;
 599         width: 540px;
 600         border-top: 1px solid #D8E2D7;
 601         /*border: 1px solid #F00;*/
 602         }
 603 #profiles a:hover {
 604         text-decoration: underline;
 605         }
 606
 607 .profile_single {
 608         clear: both;
 609         display: block;
 610         margin: 0;
 611         padding: 5px 5px 5px 0;
 612         min-height: 48px;
 613         font-family: Georgia, "Times New Roman", Times, serif;
 614         font-size: 13px;
 615         line-height: 16px;
 616         border-bottom: 1px solid #D8E2D7;
 617         }
 618 .profile_single:hover {
 619         background-color: #F3F8EA;
 620         }
 621
 622 /* ----- IM Settings Form -----*/
 623
 624 #imsettings p {
 625         margin: 0;
 626         padding: 0;
 627         line-height: 15px;
 628 }
 629
 630 /* ===== End Forms Styling ===== */