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