Edit or delete this room screen : CSS for horizontal tabbed options
[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
592 .boxlabel {
593         font-size: 8pt;
594         font-weight: bold;
595         color: #FFFFEE;
596 }
597
598 .boxlabel a {
599         color: #FFFFEE;
600 }
601
602 ul.adminitems {
603         list-style-type: none;
604 }
605
606 ul.adminitems li {
607         list-style: none;
608         font-size: 13px;
609 }
610
611 ul.adminitems a {
612         font-size: 13px;
613         margin: 5px;
614         color: #880000;
615         font-weight: bold;
616 }
617
618 ul.adminitems span {
619         display: block;
620         font-size: 8pt;
621         color: #000088;
622 }
623
624
625 .customize {
626         font-size: 8pt;
627         font-style: italic;
628         color: #000044;
629         background-color: #DDDDCC;
630 }
631
632 .view_name, .search_name, .selectbox, .inputbox {
633         font-size: 7pt;
634         background: #444455; 
635         color: #ddddcc;
636 }
637
638 .menubar_bg {
639         background-color: #FF0000;
640 }
641
642
643 .roomlist_floor {
644         font-size: 12pt;
645         font-weight: bold;
646         color: #000000;
647 }
648
649 .roomlist_new {
650         font-size: 10pt;
651         color: #880000;
652         font-weight: bold;
653 }
654
655 .roomlist_old {
656         font-size: 10pt;
657         color: #000088;
658 }
659
660 .ib_roomlist_floor {
661         font-size: 8pt;
662         font-weight: bold;
663         color: #000000;
664         cursor: pointer;
665 }
666
667 .ib_roomlist_new {
668         font-size: 10px;
669         color: #880000;
670         font-weight: bold;
671         cursor: pointer;
672 }
673
674 .ib_roomlist_old {
675         font-size: 10px;
676         color: #000088;
677         cursor: pointer;
678 }
679
680 .mailbox_summary {
681         font-size: 10pt;
682         color: #000000;
683         background-color: #FFFFFF;
684 }
685
686 .mailbox_summary tr {
687         width: 100%;
688 }
689
690 .mailbox_summary td {
691         border-top: 1px solid darkgrey;
692 }
693
694 blockquote {
695         color: navy !important; background-color: RGB(245,245,245) !important; 
696 }
697 blockquote blockquote {
698         color: maroon !important; background-color: RGB(235,235,235) !important;
699 }
700 blockquote blockquote blockquote {
701         color: green !important; background-color: RGB(225,225,225) !important;
702 }
703 blockquote blockquote blockquote blockquote {
704         color: purple !important; background-color: RGB(215,215,215) !important;
705 }
706 blockquote blockquote blockquote blockquote blockquote {
707         color: teal !important; background-color: RGB(205,205,205) !important;
708 }
709
710 blockquote pre {
711         margin-left: 1%;
712         margin-right: 1%;
713 }
714
715
716 var sub {
717         font-style: normal;
718 }
719
720 .note {
721         font-size: 85%;
722         margin-left: 10%;
723 }
724
725 .toolbar {
726         text-align: center;
727 }
728
729 .toolbar IMG {
730         float: right;
731 }
732
733 .errormsg {
734         color: #AA0000;
735         background: none;
736         font-weight: bold;
737         font-style: italic;
738 }
739
740 .imsg {
741         color: #aaaaaa;
742         background: none;
743         font-weight: bold;
744         font-style: italic;
745         text-align: center;
746 }
747
748 .warning {
749         color: #FF4500;
750         background: none;
751         text-decoration: none;
752 }
753
754 .error strong {
755         color: #DC143C;
756         background: #FFD700;
757         text-decoration: none;
758 }
759
760 .warning strong {
761         color: #FF4500;
762         background: #FFD700;
763         text-decoration: none;
764 }
765
766 .warning a:link, .warning a:visited, .warning a:active {
767         color: #FF4500;
768         background: none;
769         text-decoration: underline;
770 }
771
772 .error a:link, .error a:visited, .error a:active {
773         color: #DC143C;
774         background: none;
775         text-decoration: underline;
776 }
777
778 .error strong a:link, .error strong a:visited, .error strong a:active {
779         color: #DC143C;
780         background: #FFD700;
781 }
782
783 .warning strong a:link, .warning strong a:visited, .warning strong a:active {
784         color: #FF4500;
785         background: #FFD700;
786 }
787
788 colgroup.entity {
789         text-align: center;
790 }
791
792 .default {
793         text-decoration: underline;
794         font-style: normal;
795 }
796
797 .required {
798         font-weight: bold;
799 }
800
801 td li.transitional, .elements li.transitional {
802         font-weight: lighter;
803         color: #696969;
804         background: none;
805 }
806
807 td li.frameset, .elements li.frameset {
808         font-weight: lighter;
809         color: #808080;
810         background: none;
811 }
812
813
814 @media print {
815         input#toggler, .toolbar { display: none }
816 }
817
818
819 .treetitle {
820         padding:2px;
821         cursor:default;
822         
823         font-size: 11px;
824         color: #000000;
825 }
826 .editednode {
827         padding:2px;
828         cursor:default;
829         background-color: #FFFFFF;;
830         color: #000000;
831         
832         font-size: 11px;
833 }
834 .editednodeinput {
835         background-color: #FFFFFF;;
836         color: #000000;
837         
838         width: 150px;
839         height: 17px;
840         
841         border-style: solid;
842         border-width: 1px;
843         border-color: #000000;
844         
845         font-size: 11px;
846 }
847 .treetitleselectedfocused {
848         padding:2px;
849         cursor:default;
850         background-color: highlight;
851         color: highlighttext;
852         
853         font-size: 11px;
854 }
855 .treetitleselectedblured {
856         padding:2px;
857         cursor:default;
858         background-color: menu;
859         color: windowtext;
860         font-size: 11px;
861 }
862
863
864
865 div.auto_complete {
866         width: 350px;
867         background: #fff;
868 }
869
870 div.auto_complete ul {
871         border:1px solid #888;
872         margin:0;
873         padding:0;
874         width:100%;
875         list-style-type: none;
876         background: #fff;
877 }
878
879 div.auto_complete ul li {
880         margin:0;
881         padding:3px;
882 }
883
884 div.auto_complete ul li.selected {
885         background-color: #ffc;
886
887
888 div.auto_complete ul strong.highlight {
889         color: #800;
890         margin:0;
891         padding:0;
892 }
893
894
895 .floors_config, .roomops_zap {
896         border: 0;
897         background-color: #770000;
898         width: 100%;
899 }
900
901
902 .auth_validate, .event_background, .calendar_background, .calendar_view_background, .graphics_background, .messages_background, .paging_background, .preferences_background, .roomops_background, .sieve_background { 
903         border: 0;
904         width: 100%;
905         background-color: #ffffff;
906 }
907
908 .siteconfig_background { 
909         border: 0;
910         width: 100%;
911 }
912
913 .smtpqueue_background, .tabs_background, .useredit_background, .userlist_background, .downloads_background, .vcard_edit_background    {
914         border: 0;
915         width: 100%;
916         background-color: #ffffff;
917 }
918
919 .vcard_edit_background_alt, .roomops_background_alt {
920         border: 0;
921         width: 100%;
922         background-color: #dddddd;
923 }
924
925
926 .box {
927         width: 100%;
928         padding: 0px;
929         background-color: #FFFFFF;
930 }
931
932 .boxlabel, .boxcontent {
933         padding: 5px;
934 }
935
936 .boxlabel {
937         background-color: #000088;
938         text-align: center;
939 }
940
941 .boxcontent .col1,  .boxcontent .col2  { 
942         float: left;
943         width: 33%;
944 }
945
946
947 #login_screen {
948         margin: 3%;
949 }
950
951 .login_content {
952         background-color: white;
953 }
954
955 .login_message, .login_hello {
956         position: relative;
957         margin-left: auto;
958         margin-right: auto;
959         width: 80%;
960         text-align: center;
961 }
962
963 .login_image {
964         display: block;
965         margin-left: auto;
966         margin-right: auto;
967         text-align: center;
968 }
969
970 .login_message {
971         color: red;
972         font-weight: bold;
973         font-size: 16px;
974 }
975
976 #login_form {
977         position: relative;
978         display: block;
979         margin-top: 20px;
980         margin-left: auto;
981         margin-right: auto;
982         margin-bottom: 20px;
983         padding: 6px;
984         width: 300px;
985         background-color: #DDDDDD;
986 }
987
988 #login_form input, #login_form label, #login_form select {
989         display: block;
990         float: left;
991         margin: 6px;
992 }
993
994 #login_form label {
995         width: 130px;
996         text-align: left;
997 }
998
999 #pname, #uname {
1000         width: 130px;
1001         text-align: left;
1002 }
1003
1004 #login_form br {
1005         clear: left;
1006 }
1007
1008 #login_form .logbuttons {
1009         margin-left: auto;
1010         margin-right: auto;
1011 }
1012
1013 #login_form .logbutton {
1014         width: auto;
1015         text-align: center;
1016 }
1017
1018 .login_infos {
1019         display: block;
1020         margin-top: 30px;
1021         margin-left: auto;
1022         margin-right: auto;
1023         width: 80% ;
1024         text-align: left;
1025 }
1026
1027 #address_book_popup {
1028         position: absolute;
1029         top: 100px;
1030         right: 25px;
1031         width: 320px;
1032         height: auto;
1033         z-index: 100;
1034         background-color: #fff;
1035         color: #000;
1036         display: none;
1037         border: 1px solid black;
1038 }
1039
1040 #address_book_popup_container_div {
1041         position: relative;
1042         width: 100%;
1043         height: 100%;
1044         background-color: #fbf4ca;
1045 }
1046
1047 #address_book_popup_middle_div {
1048         position: relative;
1049         background-color: #fbf4ca;
1050 }
1051
1052 #address_book_inner_div {
1053         margin: 5px;
1054 }
1055
1056 #address_book_inner_div select {
1057         width: 100%;
1058         background-color: #fbf4ca;
1059 }
1060
1061 .address_book_popup_title {
1062         font-size: 12pt;
1063         background-color: #fbf4ca;
1064         color: #000;
1065 }
1066
1067 .edit_col, .host_col {
1068         display: none;
1069 }
1070
1071 .who_is_online .edit_col, .who_is_online .host_col {
1072         display: block;
1073 }
1074
1075 #wholist {
1076         border: 0;
1077         margin: 0;
1078         padding: 0;
1079         max-height: 200px;
1080         overflow: auto;
1081 }
1082
1083 #wholist li {
1084         color: black;
1085         text-align: left;
1086         list-style: none;
1087         border: 0;
1088         margin: 0;
1089         padding: 2px;
1090         white-space: nowrap;
1091         border-top: 1px solid #aaaaaa;
1092 }
1093
1094 #wholist li.activeuser a {
1095         background-color: rgb(255,240,146);
1096         padding-left: 5px;
1097
1098
1099 #wholist li.inactiveuser a {
1100         background-color: transparent;
1101         padding-left: 5px;
1102
1103
1104 table.altern {
1105         background-color: #ffffff;
1106         width: 98%;
1107 }
1108
1109 table.altern .even {
1110         background-color: #dddddd;
1111 }
1112
1113 table.altern .odd {
1114         background-color: #ffffff;
1115 }
1116
1117
1118 .adminlist, .tabbed_dialog {
1119         list-style: none;
1120 }
1121
1122 ul.tabbed_dialog {
1123 margin: 3% 0 0 2%;
1124 padding:0;
1125 float: left;
1126 width: 20%;
1127 }
1128
1129 .tabbed_dialog .tablabel {
1130 margin: 0 0 3% 0;
1131 padding: 0.4em;
1132 }
1133
1134 .tabcontent {
1135 margin-left: 22%;
1136 background-color: #ffffff;
1137 width: 74%;
1138 padding: 10px;
1139 height:60%;
1140 min-height:40%;
1141 max-height:90%;
1142 }
1143
1144 .tab_cell_label {
1145         font-size: 10pt;
1146         font-weight: bold;
1147         color: #000000;
1148         background-color: #FFFFFF;
1149 }
1150
1151 .tab_cell, .tab_cell_edit {
1152         font-size: 10pt;
1153         font-weight: bold;
1154         color: #000000;
1155         background-color: #CCCCCC;
1156 }
1157