Added pager config to tuiconfig.c
[citadel.git] / webcit / static / webcit.css
1 @media print {
2         input#toggler, .toolbar { display: none }
3 }
4
5 /* Typography & colors */
6
7 html {  font-size: 100%;}
8
9 body { font-size: 11pt}
10
11 #banner h1 { font-size: 16pt; }
12
13 #banner h2,#banner .titlebar, .address_book_popup_title {
14         font-size: 13pt;
15 }
16
17 #button, #content .msgbuttons a,input#delbutton,.attachfile,.logbuttons input,.buttons input, #wholist li, .buttons a, .customize, .mailbox_summary, .menubar_link, .roomlist_floor, .ib_roomlist_floor, .roomlist_new, .ib_roomlist_new, .roomlist_old, .ib_roomlist_old, #banner ul.room_actions li, #navbar, .selector_top, .selector_bottom, .room_banner .infos,.room_banner .nummsgs,li.search,li.view, .room_actions form select option, .selectbox, #message_list_hdr table, .message_header, ul.adminitems li span {
18         font-size: 10pt;
19 }
20
21 /* Color */
22
23 body {
24         background-color: #004E79;
25         font-family: "Trebuchet MS", "Verdana", "Bitstream Vera Sans", sans-serif;
26         font-weight: 400;
27 }
28
29 .boxcontent,.service form div,table.altern .odd, #message_list, .message_content, #roomlist_div,.editednode,.mailbox_summary, .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .downloads_background, .vcard_edit_background, div.auto_complete, div.auto_complete ul {
30         background-color: #FFF;
31         color: #000;
32 }
33
34 #login_form, #message_list_hdr table, #resize_msglist, .message, .message_header, .vcard_edit_background_alt,.roomops_background_alt 
35  {
36         background-color: #CCC;
37 }
38
39 .box, #wholist li.inactiveuser a {
40         background-color: transparent;
41 }
42
43 .room_banner .infos {
44         cursor: help;
45 }
46
47 input, select, #login_form #uname, #login_form #pname, #wholist li.activeuser a, .room_actions form select, .room_actions li.search input, .address_book_popup_title {
48         background-color: #fbf4ca;
49 }
50
51 input, select, #login_form #uname, #login_form #pname, .room_actions form select, .room_actions li.search input, .address_book_popup_title {
52         border: 1px solid #999;
53         color: #333;
54 }
55
56 .login_message {
57         color: #AD1C00;
58         font-weight: 700;
59         text-transform: uppercase;
60 }
61
62 #iconbar, #room_infos, #address_book_popup,.roomops_cell, .roomops_cell_edit, .mimepart {
63         background-color: #F0FFFF;
64         color: #666;
65 }
66
67 #iconbar #button {
68         border: none;
69         list-style: none;
70 }
71
72 #room_infos, #address_book_popup, .mimepart, .room_actions form select {
73         border: 1px solid #333;
74 }
75
76
77 .buttons a,.roomlist_floor,.tablabel,.treetitle {
78         color: #000;
79         font-weight: 700;
80 }
81
82 #button li {
83         border: none;
84         border-bottom: 2px groove #AAA;
85         border-right: 2px groove #AAA;
86 }
87
88 .logo_citadel a,.logo_citadel img {
89         border: none;
90 }
91
92 .logo,.logo_citadel, #button li.switch {
93         border: none;
94         border-bottom: 1px solid #AAA;
95 }
96
97 #button li a {
98         color: #000;
99         text-decoration: none;
100 }
101
102 #wholist li {
103         border: none;
104         border-top: 1px solid #AAA;
105 }
106
107 #banner h1,#banner h2,.room_banner .nummsgs,.mimepart div,.required {
108         font-weight: 700;
109 }
110
111 #banner ul.room_actions li.start_page a, #navbar, .selector_top,.selector_bottom {
112         background-color: #022750;
113         color: #FFF;
114 }
115
116 #banner, #banner a {
117         color: #FFF
118 }
119
120 .room_actions form select {
121         cursor: pointer;
122 }
123
124 #content {
125         background-color: #6C91A6;
126         color: #000;
127 }
128
129 input#delbutton,.attachfile, .logbuttons input,.buttons input {
130         background-color: transparent;
131         border: 2px groove #AAA;
132         color: #000;
133 }
134
135 #message_list_hdr form input {
136         border: 0;
137 }
138
139 #message_list_hdr select {
140         background-color: #AD1C00;
141         border: 1px solid #6C91A6;
142 }
143
144 #message_list_hdr table {
145         font-style: italic;
146 }
147
148 #resize_msglist {
149         background-image: url(/static/resizegrippy.gif);
150         background-position: center;
151         background-repeat: no-repeat;
152 }
153
154 #resize_msglist hr {
155         background-color: #999;
156         border: 0;
157         color: #999;
158         height: 3px;
159 }
160
161 .message {
162         border: 1px outset #999;
163         clear: both;
164 }
165
166 .message_header .message_subject {
167         font-style: italic;
168 }
169
170 .adminlist,.tabbed_dialog {
171         list-style: none;
172 }
173
174 .customize {
175         background-color: #DDC;
176         color: #004;
177         font-style: italic;
178 }
179
180 .default {
181         font-style: normal;
182         text-decoration: underline;
183 }
184
185 .editednodeinput {
186         background-color: #FFF;
187         border: 1px solid #000;
188         color: #000;
189         height: 17px;
190         width: 150px;
191 }
192
193 .error a: link,.error a:visited,.error a:active {
194         background: none;
195         color: #DC143C;
196         text-decoration: underline;
197 }
198
199 .error strong {
200         background: #FFD700;
201         color: #DC143C;
202         text-decoration: none;
203 }
204
205 .error strong a: link,.error strong a:visited,.error strong a:active {
206         background: #FFD700;
207         color: #DC143C;
208 }
209
210 .errormsg {
211         background: none;
212         color: #A00;
213         font-style: italic;
214         font-weight: 700;
215 }
216
217 .floors_config,.roomops_zap {
218         background-color: #700;
219         border: 0;
220 }
221
222 .ib_roomlist_floor, .ib_roomlist_new, .ib_roomlist_old {
223         cursor: pointer;
224 }
225
226 .ib_roomlist_floor, .roomlist_new, .ib_roomlist_new {
227         font-weight: 700;
228 }
229
230 .ib_roomlist_floor {
231         color: #000;
232 }
233
234 .roomlist_new, .ib_roomlist_new {
235         color: #800;
236 }
237
238 .roomlist_old, .ib_roomlist_old {
239         color: #008;
240 }
241
242 .imsg {
243         background: none;
244         color: #AAA;
245         font-style: italic;
246         font-weight: 700;
247 }
248
249 .menubar_bg {
250         background-color: red;
251 }
252
253 .mimepart div span {
254         display: block;
255         font-style: italic;
256 }
257
258 .mimepart dl dd,.mailbox_summary td, .mimepart dl dt {
259         border-top: 1px solid #AAA;
260 }
261
262 .mimepart dl dt {
263         font-weight: 700;
264 }
265
266 .roomops_cell_label,.boxlabel,.tab_cell_label {
267         background-color: #FF7814;
268         color: #FFF;
269         font-weight: 700;
270 }
271
272 .selectbox {
273         background-color: #FF8000;
274 }
275
276 .tab_cell,.tab_cell_edit {
277         background-color: #CCC;
278         font-weight: 700;
279 }
280
281 .tabcontent {
282         background-color: #FFF;
283         border-left: 3px solid #FF7814;
284 }
285
286 .treetitleselectedblured {
287         background-color: menu;
288         color: windowtext;
289 }
290
291 .treetitleselectedfocused {
292         background-color: highlight;
293         color: highlighttext;
294 }
295
296 .warning a: link,.warning a:visited,.warning a:active, .warning {
297         background: none;
298         color: #FF4500;
299 }
300
301 .warning, .warning strong {
302         text-decoration: none;
303 }
304
305 .warning a: link,.warning a:visited,.warning a:active {
306         text-decoration: underline;
307 }
308
309 .warning strong {
310         background: #FFD700;
311         color: #FF4500;
312 }
313
314 .warning strong a: link,.warning strong a:visited,.warning strong a:active {
315         background: #FFD700;
316         color: #FF4500;
317 }
318
319 blockquote {
320         background-color: #f5f5f5 !important;
321         color: navy !important;
322 }
323
324 blockquote blockquote {
325         background-color: #ebebeb !important;
326         color: maroon !important;
327 }
328
329 blockquote blockquote blockquote {
330         background-color: #e1e1e1 !important;
331         color: green !important;
332 }
333
334 blockquote blockquote blockquote blockquote {
335         background-color: #d7d7d7 !important;
336         color: purple !important;
337 }
338
339 blockquote blockquote blockquote blockquote blockquote {
340         background-color: #cdcdcd !important;
341         color: teal !important;
342 }
343
344 blockquote pre {
345         margin-left: 1%;
346         margin-right: 1%;
347 }
348
349 div.auto_complete ul {
350         background: #fff;
351         border: 1px solid #888;
352         list-style-type: none;
353 }
354
355 div.auto_complete ul li.selected {
356         background-color: #ffc;
357 }
358
359 div.auto_complete ul strong.highlight {
360         color: #800;
361 }
362
363
364 table.altern {
365         border-bottom: solid 2px #AAA;
366         border-top: solid 2px #AAA;
367 }
368
369 table.altern .even {
370         background-color: #DDD;
371 }
372
373 td li.frameset,.elements li.frameset {
374         background: none;
375         color: gray;
376         font-weight: lighter;
377 }
378
379 td li.transitional,.elements li.transitional {
380         background: none;
381         color: #696969;
382         font-weight: lighter;
383 }
384
385 ul.adminitems {
386         list-style-type: disc;
387         padding: 0;
388 }
389
390 ul.adminitems li {
391         font-weight: 700;
392 }
393
394 ul.adminitems li span
395 {
396         color: #666;
397 }
398
399 var sub {
400         font-style: normal;
401 }
402
403 .calendar {
404         background-color: #204B78;
405 }
406
407 .day {
408         font-weight: 700;
409 }
410
411 .calout {
412         background-color: #DDDDDD;
413 }
414
415 .calday {
416         background-color: #FFFFFF;
417 }
418
419 .calweekend {
420         background-color: #EEEECC;
421 }
422
423
424
425 /* Links */
426
427 a {     text-decoration: none; }
428
429 a:active { color: #AD1C00; }
430
431 a:link { color: blue; }
432
433 a:visited { color: purple; }
434
435 .msgbuttons a {
436         border: 2px groove #AAA;
437         color: #000;
438 }
439
440 #important_message, .buttons a:hover, .msgbuttons a:hover, input:hover, #button li a:hover, #wholist li a:hover, #navbar ul li a:hover {
441         background-color: #AD1C00;
442         color: #FFF;
443 }
444
445
446 /* Layout */
447
448 * html {
449         overflow: hidden;
450 }
451
452 body {
453         height: 100%;
454         overflow: hidden;
455         text-align: center;
456 }
457
458 body, #global {
459         margin: 0;
460         padding: 0;
461 }
462
463 #important_message {
464         position: absolute;
465         top: 0; 
466         right: 0;
467         z-index: 2;
468 }
469
470 #login_screen {
471         margin: 0;
472         padding: 3% 6% 3% 6%;
473 }
474
475 #iconbar, #banner, #content, #message_list_hdr, #message_list, #preview_pane  {
476         text-align: left;
477 }
478
479 #iconbar {
480         position: absolute;
481         top: 0;
482         left: 0;
483         width: 16%;
484 }
485
486 #banner {
487         position: absolute;
488         top: 0;
489         left: 16%;
490         width: 84%;
491         height: 18%;
492 }
493
494 #navbar {
495         position: absolute;
496         bottom: 0; 
497         left: 0;
498         width: 100%;
499 }
500
501 #content {
502         position: absolute;
503         top: 18%;
504         left: 16%;
505         width: 84%;
506         height: 82%;
507         overflow: auto;
508 }
509
510 #message_list_hdr {
511         position: absolute;
512         display: block;
513         top: 0;
514         left: 0;
515         width: 100%;
516         height: 5%;
517         overflow: hidden;
518 }
519
520 #message_list {
521         position: absolute;
522         top: 5%;
523         left: 0;
524         width: 100%;
525         height: 20%;
526         overflow: auto;
527         cursor: pointer;
528 }
529
530 #resize_msglist {
531         position: absolute;
532         top: 25%;
533         left: 0;
534         width: 100%;
535         height: 1%;
536         overflow: hidden;
537         cursor: s-resize;
538 }
539
540 #preview_pane {
541         position: absolute;
542         top: 26%;
543         left: 0%;
544         width: 100%;
545         height: 74%;
546         overflow: auto;
547 }
548
549 .fix_scrollbar_bug {
550         margin-right: 1px;              /* Gecko and other non-broken browsers */
551         width: expression('96%');       /* Only IE6 understands 'expression' - fixes weird scrollbarbug */
552 }
553
554
555
556
557 /* Boxes */
558
559 .box {
560         width: 100%;
561         padding: 0;
562 }
563
564 #content .box {
565         margin: 2% auto 0 auto;
566         width: 95%;
567         text-align: center;
568 }
569
570 .boxlabel, .boxcontent {
571         padding: 5px;
572 }
573
574 .boxlabel {
575         text-align: center;
576 }
577
578 .boxcontent {
579         text-align: left;
580 }
581
582
583 /* Login */
584
585 #login_screen .login_message, #login_screen .login_image, .login_hello, #login_screen #login_form {
586         display: block;
587         margin: 0 auto 0 auto;
588 }
589
590 #login_screen .login_message, .login_hello, #global center {
591         width: 80%;
592 }
593
594 #login_screen .login_image {
595         width: 65%;
596 }
597
598 #login_screen #login_form {
599         padding: 10px;
600         width: 320px;
601 }
602
603 #login_form input, #login_form label, #login_form select {
604         display: block;
605         float: left;
606         margin: 6pt;
607 }
608
609 #login_form label, #pname, #uname {
610         width: 130px;
611         text-align: left;
612 }
613
614 #login_form br {
615         clear: left;
616 }
617
618 .login_infos {
619         display: block;
620         margin: 20px auto 0 auto;
621         width: 80% ;
622         text-align: left;
623 }
624
625
626 /* Iconbar */
627
628 .logo, .logo_citadel, #iconbar #button, #button li.switch, #wholist {
629         margin: 0;
630         padding: 0;
631 }
632
633 .logo, .logo_citadel, #button li.switch, #wholist li {
634         text-align: center;
635 }
636
637 .logo, .logo_citadel {
638         display: block;
639 }
640
641 #iconbar #button {
642         width: 100%;
643 }
644
645 #button li {
646         margin: 4px 8px 4px 8px;
647         padding: 0;
648 }
649
650
651
652 #button img {
653         vertical-align: middle;
654         padding-left: 2px;
655         padding-right: 5px;
656 }
657
658 #button li a {
659         display: block;
660         width: 100%;
661 }
662
663 html>body #button li a {
664         width: auto;
665 }
666
667 #wholist {
668         border: 0;
669         max-height: 200px;
670         overflow: auto;
671 }
672
673 #wholist li {
674         list-style: none;
675         margin: 0;
676         padding: 2px;
677         white-space: nowrap;
678 }
679
680
681 /* Banner */
682
683 #banner .room_banner {
684         float: left;
685         margin: 0;
686         padding: 0;
687 }
688
689 #banner .room_banner img {
690         float: left;
691         margin: 0 5px 15px 0;
692 }
693
694 #banner h1, #banner h2, #banner .room_banner .infos, #banner .room_banner p {
695         margin: 2px;
696         padding: 0;
697 }
698
699 #room_infos {
700         position: absolute;
701         top: 0;
702         left: 50%;
703         width: 45%;
704         z-index: 10;
705         cursor: pointer;
706         text-align: left;
707         padding: 10px 2px 2px 2px;
708 }
709
710 #room_infos img.close_infos {
711         float: right;
712 }
713
714 #banner ul.room_actions {
715         margin: 0;
716         list-style: none;
717         float: right;
718         text-align: right;
719 }
720
721 #banner ul.room_actions li {
722         white-space: nowrap;
723         display: inline;
724 }
725
726 #banner ul.room_actions li select, #banner ul.room_actions li input {
727         margin-top: 8px;
728         margin-right: 4px;
729 }
730
731 /* Navbar */
732
733 #navbar ul, .selector_top, .selector_bottom {
734         width: 100%;
735         margin: 0 auto 0 auto;
736         padding: 0;
737         white-space: nowrap;
738         text-align: center;
739         vertical-align: middle;
740 }
741
742 #navbar ul li {
743         display: inline;
744         list-style: none;
745         vertical-align: middle;
746 }
747
748 #navbar ul li a {
749         padding: 2px 8px 8px 8px;
750         white-space: nowrap;
751  }
752
753 #navbar ul li img {
754         float: none;
755         margin: 0 2px 0 2px;
756 }
757  
758
759 /* Content */
760
761 .boxcontent table {
762         margin: 0;
763         padding: 0;
764 }
765
766 #content table .box {
767         margin: 0;
768         width: 100%;
769         text-align: left;
770 }
771
772 .service, .who_is_online {
773         text-align: center;
774         width: 100%;
775 }
776
777 .service table, .advanced table {
778         margin-top: 0 auto 0 auto;
779         width: 100%;
780         text-align: left;
781 }
782
783 .advanced table table {
784         margin: 0;
785         padding: 0;
786 }
787
788 .instructions {
789         text-align: center;
790 }
791
792 #message_list_hdr table {
793         position: absolute;
794         bottom: 0; 
795         left: 0;
796         width: 100%;    
797 }
798
799 .selector_top, .selector_bottom {
800         text-align: center;
801 }
802
803 .message {
804         margin: 1%;
805         padding: 0;
806 }
807
808 .message_header p {
809         margin: 2px 0 2px 0;
810         padding: 0;
811 }
812
813 .msgbuttons a {
814         margin: 0 2px 0 2px;
815         padding: 1px;
816 }
817
818 .mimepart {
819         margin-top: 15px;
820         margin-bottom: 15px;
821         margin-left: 15%;
822         width: 70%;
823         padding: 0;
824 }
825
826 .mimepart img {
827         vertical-align: middle;
828         float: left;
829 }
830
831 .mimepart div {
832         vertical-align: middle;
833         margin: 0 0 15px 0 ;
834         padding: 5px;
835 }
836
837 .mimepart div span {
838         vertical-align: top;
839 }
840
841 .mimepart dl {
842         width: 100%;
843         padding: 5px;
844 }
845
846 .mimepart dl dt {
847         width: 30%;
848         float: left;
849         margin: 0 0 0 0;
850         padding: .5em;
851 }
852
853 /* hack ie5 mac \*/
854 dt { clear: both; }
855 /* end hack */
856
857 .mimepart dl dd {
858         float: left;
859         width: 62%;
860         margin: 0;
861         padding: .5em;
862 }
863
864 .mimepart p {
865         margin-top: 1em;
866         margin-bottom: 0;
867         clear: both;
868 }
869
870 .msgbuttons {
871         float: right;
872         visibility: hidden;
873         margin-top: 0;
874         padding: 0;
875 }
876
877 .buttons a {
878         text-align: center;
879 }
880
881 .msgbuttons a span, .buttons span {
882         display: none;
883 }
884
885 .message_content {
886         margin: 0;
887         padding: 3px;
888         clear: both;
889 }
890
891 .message form div label {
892         display: block;
893         float: left;
894         margin: 3px;
895         width: 9em;
896         text-align: right;
897 }
898
899 .message form div input, .message form div select {
900         margin: 3px;
901 }
902
903 .imgedit {
904         vertical-align: middle;
905 }
906
907 .send_edit_msg {
908         float: right;
909         margin-top: 0 ;
910         margin-right: 0;
911         padding-top: 2px 50px 2px 50px;
912 }
913
914 .mailbox_summary tr {
915         width: 100%;
916 }
917
918 .note {
919         font-size: 85%;
920         margin-left: 10%;
921 }
922
923 .toolbar {
924         text-align: center;
925 }
926
927 .toolbar img {
928         float: right;
929 }
930
931 .imsg {
932         text-align: center;
933 }
934
935 colgroup.entity {
936         text-align: center;
937 }
938
939 div.auto_complete ul {
940         margin: 0;
941         padding: 0;
942         width: 100%;
943 }
944
945 div.auto_complete ul li {
946         margin: 0;
947         padding: 3px;
948 }
949
950 div.auto_complete ul strong.highlight {
951         margin: 0;
952         padding: 0;
953 }
954
955 .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background, .siteconfig_background, .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .downloads_background, .vcard_edit_background, .vcard_edit_background_alt, .roomops_background_alt, .floors_config, .roomops_zap  {
956  width: 100%;
957 }
958
959 #address_book_popup {
960         position: absolute;
961         top: 100px;
962         right: 25px;
963         width: 320px;
964         height: auto;
965         z-index: 100;
966         display: none;
967 }
968
969 #address_book_popup_container_div {
970         position: relative;
971         width: 100%;
972         height: 100%;
973 }
974
975 #address_book_popup_middle_div {
976         position: relative;
977 }
978
979 #address_book_inner_div {
980         margin: 5px;
981 }
982
983 #address_book_inner_div select {
984         width: 100%;
985 }
986
987 #address_book_inner_div input {
988         margin: 4px 5px 0 5px;
989 }
990
991 .service .edit_col, .service .host_col {
992         display: none;
993 }
994
995 .who_is_online .edit_col, .who_is_online .host_col {
996         display: block;
997 }
998
999
1000 /* System Administration Menu */
1001
1002 ul.adminitems {
1003         margin: 15px;
1004         padding: 0;
1005 }
1006
1007 ul.adminitems li {
1008         margin: 0.5em;
1009         padding: 0;
1010 }
1011
1012 ul.adminitems li span {
1013         display: block;
1014 }
1015
1016
1017 /* Room list - Tree Node */
1018
1019 .treetitle, .editednode, .treetitleselectedfocused, .treetitleselectedblured {
1020         padding: 2px;
1021         cursor: default;
1022 }
1023
1024
1025 table.altern {
1026         margin: 0 auto 0 auto;
1027         width: 98%
1028
1029
1030 table.altern tr td {
1031         height: 2em;    
1032
1033
1034 /* Advanced menu */
1035
1036 table.advanced {
1037         margin: 0 auto 0 auto;
1038         width: 96%;
1039         border-collapse: separate;
1040         border-spacing: 15px;
1041
1042
1043 .advanced .boxcontent ul {
1044         margin-left: 4em;
1045 }
1046
1047 .advanced .boxcontent .col1, .advanced .boxcontent .col2 { 
1048         float: left;
1049         width: 33%;
1050 }
1051
1052 .advanced .boxcontent .col2, .advanced .boxcontent .lastcol {
1053         margin-left: 0;
1054         margin-bottom: 4em;
1055 }
1056
1057 /* Site configuration */
1058
1059 #TheTabs {
1060 }
1061
1062 .tabs_background {
1063         margin-top: 0;
1064 }
1065
1066 /* Links and buttons */
1067
1068 .send_edit_msg {
1069         margin: 0 15px 0 0;
1070 }
1071
1072 .logbuttons, .buttons {
1073         margin: 2px auto 2px auto;
1074         width: 95%;
1075         text-align: center;
1076 }
1077
1078 /* Tabs */
1079
1080 .tab_cell_label, .tab_cell, .tab_cell_edit {
1081         margin: 0;
1082         padding: 0 15px 0 15px;
1083 }
1084
1085 ul.tabbed_dialog {
1086         margin: 3% 0 0 2%;
1087         padding: 0;
1088         float: left;
1089         width: 20%;
1090 }
1091
1092 .tabbed_dialog .tablabel {
1093         margin: 0 0 3% 0;
1094         padding: 0.4em;
1095 }
1096
1097 .tabcontent {
1098         margin-top: 2%;
1099         margin-left: 22%;
1100         width: 74%;
1101         padding: 10
1102 }
1103
1104 /* Calendar view */
1105
1106 .calendar {
1107         margin: 2% auto 0 auto;
1108         width: 98%;
1109 }
1110
1111 .calday, .calout, .calweekend {
1112         width: 14%;
1113         height: 60px;
1114         text-align: left;
1115         vertical-align: top;
1116 }