theme/stoica/display.css

   1 /* CSS Document */
   2 /* Design & CSS by Marie-Claude Doyon http://www.marieclaudedoyon.com */
   3
   4 html {
   5         background-color: #d8e2d7;
   6
   7         }
   8 body {
   9         position: absolute;
  10         width: 100%;
  11         margin: 0;
  12         padding: 0;
  13         font-family: Verdana, Arial, Helvetica, sans-serif;
  14         font-size: 10px;
  15         line-height: 12px;
  16         min-height: 100%;
  17         height: 98%;
  18         color: #193441;
  19         background: url(bg-body.gif) repeat-y top center;
  20         }
  21 a {
  22         color: #C15D42;
  23         text-decoration: none;
  24         }
  25 a:hover {
  26         text-decoration: underline;
  27         }
  28 img, img a {
  29         border: 0;
  30         }
  31 h1 {
  32         font-size: 14px;
  33         }
  34
  35
  36 #wrap {
  37         margin: 0 auto;
  38         padding: 0 20px;
  39         width: 760px;
  40         background: url(bg-header.gif) repeat-x #FCFFF5;
  41         }
  42 #header {
  43         position: relative;
  44         margin: 0 auto;
  45         width: 540px;
  46         height: 216px;
  47         /*border: 1px solid #FF0;*/
  48         /*background-color: #193441;*/
  49         }
  50 #logo {
  51         margin-top: 9px;
  52         }
  53 p#branding {
  54         margin: 0;
  55         padding: 6px 0 3px 0;
  56         color: #fbf2d7;
  57         font-size: 21px;
  58         font-weight: bold;
  59         line-height: 27px;
  60         }
  61 p#branding a {
  62         color: #dab134;
  63         }
  64
  65 #header h1.pagetitle {
  66         margin: 0;
  67         padding: 0;
  68         font-size: 15px;
  69         line-height: 24px;
  70         color: #FCFFF5;
  71         color: #d8e2d7;
  72 }
  73
  74 #header h2.sitename {
  75         display: none;
  76         margin: 0;
  77         padding: 0;
  78         color: #FCFFF5;
  79 }
  80
  81 /* ===== Begin Navigation Styling ===== */
  82
  83 /* ----- Navigation ------ */
  84 #nav {
  85         float: right;
  86         margin: 0;
  87         padding: 0;
  88         list-style-type: none;
  89         font-size: 12px;
  90         }
  91 #nav li {
  92         display: block;
  93         float: left;
  94         }
  95 #nav li a {
  96         display: block;
  97         padding: 9px 9px 12px 9px;
  98         color: #91AA9D;
  99         }
 100 #nav li a:hover {
 101         text-decoration: underline;
 102         }
 103
 104 /* ----- Tabs ----- */
 105 #nav_views {
 106         margin: 0 auto;
 107         padding: 0;
 108         position: absolute;
 109         bottom: 0;
 110         list-style-type: none;
 111         font-size: 14px;
 112         font-weight: bold;
 113         width: 540px;
 114         /*height: 30px;*/
 115         }
 116 #nav_views li {
 117         display: block;
 118         float: left;
 119         line-height: 21px;
 120         }
 121 #nav_views li a {
 122         display: block;
 123         margin: 0;
 124         padding: 4px 12px 3px 12px;
 125         color: #FCFFF5;
 126         background-color: #91AA9D;
 127         border-right: 1px solid #6A8787;
 128         }
 129 #nav_views li a:hover {
 130         text-decoration: none;
 131         }
 132 #nav_views li.current a, #nav_views li.current a:hover {
 133         color: #3F606F;
 134         background-color: #FCFFF5;
 135         border-right: 1px solid #6A8787;
 136         }
 137 #nav_views li.current a:hover {
 138         color: #193441;
 139         }
 140 #nav_views li a:hover {
 141         color: #FCFFF5;
 142         background-color: #3F606F;
 143         border-right: 1px solid #6A8787;
 144         }
 145
 146 /* ----- Nav Footer ----- */
 147 #nav_sub {
 148         clear: both;
 149         margin: 18px auto 0 auto;
 150         padding: 0;
 151         list-style-type: none;
 152         font-size: 11px;
 153         font-weight: bold;
 154         line-height: 21px;
 155         border-top: 1px solid #D8E2D7;
 156         width: 540px;
 157         }
 158 #nav_sub li {
 159         display: block;
 160         float: left;
 161         }
 162 #nav_sub li a {
 163         padding: 6px 24px 6px 0;
 164         }
 165 #nav_sub li a:hover {
 166         text-decoration: underline;
 167         }
 168 /* ===== End Navigation Styling ===== */
 169
 170 #content {
 171         clear: left;
 172         margin: 40px 0 45px 0;
 173         padding: 0 110px;
 174         font-family: Georgia, "Times New Roman", Times, serif;
 175         font-size: 14px;
 176         line-height: 18px;
 177         }
 178 #content h2 {
 179         font-family: Verdana, Arial, Helvetica, sans-serif;
 180         font-size: 15px;
 181         }
 182 #content label {
 183         font-family: Verdana, Arial, Helvetica, sans-serif;
 184         font-size: 12px;
 185         }
 186 .instructions, .success, .error {
 187         font-weight: normal;
 188         margin: 36px 0 0 0;
 189         padding: 10px;
 190         font-family: Georgia, "Times New Roman", Times, serif;
 191         font-size: 13px;
 192         line-height: 15px;
 193         border: 1px solid #91AA9D;
 194         color: #FCFFF5;
 195         }
 196 .instructions a, .success a, .error a {
 197         color: #d8e2d7;
 198         text-decoration: underline;
 199         }
 200 .instructions a:hover, .success a:hover, .error a:hover {
 201         color: #FCFFF5;
 202         }
 203 .success {
 204         background-color: #48705b;
 205         }
 206 .error {
 207         background-color: #ce3728;
 208         }
 209
 210
 211
 212 /* ----- Profile -----*/
 213 #profile {
 214         clear: left;
 215         margin: 0 -110px;
 216         padding: 10px 0 0 0;
 217         min-height: 170px;
 218         border-top: 1px solid #D8E2D7;
 219         font-family: Georgia, "Times New Roman", Times, serif;
 220         }
 221 #profile h1 {
 222         margin: 0;
 223         padding: 0;
 224         font-family: Verdana, Arial, Helvetica, sans-serif;
 225         font-size: 14px;
 226         }
 227 #profile h2 {
 228         margin: 0;
 229         padding: 0;
 230         font-family: Verdana, Arial, Helvetica, sans-serif;
 231         font-size: 11px;
 232         text-transform: uppercase;
 233         color: #91AA9D;
 234         }
 235 #profile p {
 236         margin: 0 10px 0 0;
 237         font-size: 12px;
 238         line-height: 14px;
 239         }
 240 #profile p.location {
 241         margin: 0 10px 12px 0;
 242         font-style: italic;
 243         }
 244 #profile p.notice_current {
 245         font-size: 18px;
 246         line-height: 21px;
 247         }
 248 #profile_avatar {
 249         float: left;
 250         margin-right: 4px;
 251         }
 252 #profile_avatar img {
 253         margin-bottom: 5px;
 254         }
 255 .avatar.profile {
 256         float: none;
 257         clear: left;
 258         margin: 0 10px 5px 0;
 259         }
 260 .avatar.original {
 261         margin: 0 10px 18px 0;
 262         }
 263 a.nickname {
 264         font-family: Verdana, Arial, Helvetica, sans-serif;
 265         font-weight: bold;
 266         font-size: 12px;
 267         padding-right: 3px;
 268         }
 269 #profile_information {
 270         float: left;
 271         position: relative;
 272         width: 270px;
 273         height: 200px;
 274         }
 275 .statistics {
 276         margin-top: 18px;
 277         }
 278 .statistics h2 {
 279         margin: 12px 0 3px 0;
 280         }
 281 dl.statistics {
 282         margin: 0;
 283         font-size: 12px;
 284         line-height: 14px;
 285         }
 286 .statistics dt, .statistics dd {
 287         float: left;
 288         margin: 0;
 289         }
 290 .statistics dt {
 291         clear: left;
 292         width: 96px;
 293         }
 294 .statistics dd {
 295         clear: right;
 296         }
 297 .statistics dt:after {
 298         content: ":";
 299         }
 300 #subscriptions {
 301         float: left;
 302         margin: 18px 0 30px 0;
 303         }
 304 #subscriptions_avatars {
 305         /*float: left;*/
 306         margin: 6px 0 0 0;
 307         padding: 0;
 308         list-style-type: none;
 309         width: 270px;
 310         }
 311 #subscriptions_avatars li .avatar.mini {
 312         float: left;
 313         margin: 0 3px 3px 0;
 314         padding: 0;
 315         line-height: 0;
 316         /* border: 1px solid #f00; */
 317         }
 318 #subscriptions_viewall {
 319         clear: left;
 320         }
 321 /* ----- End Profile -----*/
 322
 323 /* ----- Begin Subscriptions & Subscribers -----*/
 324
 325 ul.subscriptions, ul.subscribers {
 326         float: none;
 327         margin: 0;
 328         padding: 0;
 329         list-style-type: none;
 330         overflow: auto;
 331         }
 332 ul.subscriptions li, ul.subscribers li {
 333         display: block;
 334         float: left;
 335         padding: 0;
 336         }
 337 /* ----- End Subscriptions & Subscribers -----*/
 338
 339 #notices {
 340         clear: both;
 341         margin: 0 auto;
 342         padding: 0;
 343         list-style-type: none;
 344         width: 540px;
 345         border-top: 1px solid #D8E2D7;
 346         /*border: 1px solid #F00;*/
 347         }
 348 #notices a:hover {
 349         text-decoration: underline;
 350         }
 351 .notice_single {
 352         clear: both;
 353         display: block;
 354         margin: 0;
 355         padding: 5px 5px 5px 0;
 356         min-height: 48px;
 357         font-family: Georgia, "Times New Roman", Times, serif;
 358         font-size: 13px;
 359         line-height: 16px;
 360         border-bottom: 1px solid #D8E2D7;
 361         }
 362 .notice_single:hover {
 363         background-color: #F3F8EA;
 364         }
 365 .notice_single p {
 366         display: inline;
 367         margin: 0;
 368         padding: 0;
 369         }
 370 .avatar {
 371         float: left;
 372         margin: 5px 5px 0 0;
 373         }
 374 .avatar.stream {
 375         /*margin: 0 10px 10px 0;*/
 376         }
 377
 378 p.time {
 379         display: block;
 380         font-family: Verdana, Arial, Helvetica, sans-serif;
 381         font-size: 10px;
 382         line-height: 15px;
 383         }
 384 p.time a {
 385         color: #91AA9D;
 386         }
 387
 388 #pagination {
 389         margin: 18px auto;
 390         width: 540px;
 391         }
 392 #nav_pagination {
 393         margin: 0 0 36px 0;
 394         padding: 0;
 395         float: right;
 396         list-style-type: none;
 397         font-size: 12px;
 398         font-weight: bold;
 399         }
 400 #nav_pagination li {
 401         display: block;
 402         float: left;
 403         background-color: #91AA9D;
 404         }
 405 #nav_pagination li.before {
 406         margin-right: 1px;
 407         }
 408 #nav_pagination li a {
 409         padding: 6px 15px;
 410         line-height: 21px;
 411         background-color: #91AA9D;
 412         color: #FCFFF5;
 413         }
 414 #nav_pagination li a:hover {
 415         background-color: #3F606F;
 416         color: #FCFFF5;
 417         text-decoration: none;
 418         }
 419
 420 #footer {
 421         clear: both;
 422         margin: 0 auto;
 423         padding: 0 0 36px 0;
 424         width: 540px;
 425         border-top: 1px solid #D8E2D7;
 426         }
 427 #footer p {
 428         margin-top: 9px;
 429         }
 430 #cc {
 431         float: left;
 432         margin: 3px 10px 0 0;
 433         }
 434
 435 /* ===== Begin Forms Styling ===== */
 436
 437 /* ----- Forms General Style ----- */
 438 form {
 439         margin: 0 auto;
 440         padding: 0;
 441         }
 442 form {
 443         font-family: Verdana, Arial, Helvetica, sans-serif;
 444         font-size: 12px;
 445         }
 446 form label {
 447         display: block;
 448         font-size: 12px;
 449         font-weight: bold;
 450         line-height: 18px;
 451         }
 452 form input {
 453         border: 1px solid #D8E2D7;
 454         width: 264px;
 455         }
 456 input#submit, input.submit  {
 457         display: block;
 458         margin: 18px 0;
 459         padding: 4px;
 460         font-weight: bold;
 461         color: #FCFFF5;
 462         background-color: #C15D42;
 463         cursor: pointer;
 464         border: 0;
 465         width: auto;
 466         }
 467 input#submit:hover, input.submit:hover {
 468         background-color: #904632;
 469         }
 470 input.checkbox {
 471         width: 14px;
 472         border: 0;
 473         }
 474 textarea, input {
 475         font-family: Verdana, Arial, Helvetica, sans-serif;
 476         font-size: 12px;
 477         color: #193441;
 478         padding: 3px;
 479         }
 480 textarea:focus, input:focus {
 481         background-color: #f0f6eb;
 482         }
 483 textarea {
 484         width: 270px;
 485         border: 1px solid #D8E2D7;
 486         }
 487 .input_instructions {
 488         display: block;
 489         font-size: 11px;
 490         line-height: 21px;
 491         color: #91aa9d;
 492         font-family: Verdana, Arial, Helvetica, sans-serif;
 493         }
 494
 495 /* ----- Status Form ----- */
 496 #status_form {
 497         height: 96px;
 498         /*background-color: #F00;*/
 499         }
 500 #status_form p {
 501         margin: 36px 0 0 0;
 502         padding: 0;
 503         }
 504 #status_label {
 505         display: block;
 506         clear: both;
 507         margin: 0;
 508         padding: 0 0 3px 0;
 509         font-size: 18px;
 510         font-weight: bold;
 511         line-height: 24px;
 512         color: #91AA9D;
 513         }
 514 #status_textarea {
 515         display: block;
 516         float: left;
 517         width: 463px;
 518         height: 35px;
 519         padding: 5px;
 520         font-family: Verdana, Arial, Helvetica, sans-serif;
 521         font-size: 12px;
 522         color: #193441;
 523         border: 0;
 524         }
 525 #status_submit {
 526         display: block;
 527         float: left;
 528         margin: 1px 0 0 4px;
 529         width: 63px;
 530         height: 45px;
 531         background-color: #C15D42;
 532         font-family: Verdana, Arial, Helvetica, sans-serif;
 533         font-weight: bold;
 534         font-size: 14px;
 535         color: #FCFFF5;
 536         cursor: pointer;
 537         border: 0;
 538         }
 539 #status_submit:hover {
 540         background-color: #904632;
 541         }
 542 #counter {
 543         position: absolute;
 544         top: 140px;
 545         left: -64px;
 546         width: 50px;
 547         font-weight: bold;
 548         text-align: right;
 549 }
 550 /* ----- Subscribe Form ----- */
 551 #subscribe .submit, #unsubscribe .submit, #remotesubscribe .button, #remotesubscribe {
 552         margin: 0;
 553         width: 96px;
 554         height: 27px;
 555         font-family: verdana, arial, helvetica, sans-serif;
 556         font-weight: bold;
 557         font-size: 10px;
 558         text-transform: uppercase;
 559         background-color: #c15d42;
 560         color: #fcfff5;
 561         border: 0;
 562         }
 563 #remotesubscribe {
 564         width: 96px;
 565         height: 22px;
 566         padding: 5px 0 0 0;
 567         text-align: center;
 568         }
 569 #subscribe .button:hover, #unsubscribe .button:hover {
 570         background-color: #904632;
 571         cursor: pointer;
 572         }
 573
 574 a#remotesubscribe {
 575         display: block;
 576 }
 577
 578 /* ----- Login Form -----*/
 579 input#license {
 580         width: auto;
 581         }
 582 /* ----- Avatar Form -----*/
 583 form {
 584         clear: left;
 585 }
 586
 587 /* ----- OpenID Form -----*/
 588
 589 input#openid_url {
 590    background: url(login-bg.gif) no-repeat;
 591    background-color: #fff;
 592    background-position: 4px 50%;
 593    color: #000;
 594    padding-left: 24px;
 595 }
 596
 597 /* People lists (search results, maybe subscribers) */
 598
 599 .profile_single {
 600         clear: both;
 601         display: block;
 602         margin: 0;
 603         padding: 5px 5px 5px 0;
 604         min-height: 48px;
 605         font-family: Georgia, "Times New Roman", Times, serif;
 606         font-size: 13px;
 607         line-height: 16px;
 608         border-bottom: 1px solid #D8E2D7;
 609         }
 610 .profile_single:hover {
 611         background-color: #F3F8EA;
 612         }
 613
 614 /* ===== End Forms Styling ===== */