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