source: WAeUP_SRP/trunk/skins/waeup_design/default.css.dtml @ 5224

Last change on this file since 5224 was 4294, checked in by Henrik Bettermann, 16 years ago

resolve #623
File size: 17.5 KB
Line 
1<dtml-comment>
2CSS directives conforming to the CSS 2.1 spec.
3Those CSS directives are suppported by user agents such as Mozilla/Firefox, MSIE6, MSIE5.x, etc.
4$Id: default.css.dtml 47552 2006-07-28 17:33:14Z gracinet $
5</dtml-comment>
6
7<dtml-let last_modified="_.DateTime()-14" expires="_.DateTime()+1" >
8<dtml-call "REQUEST.RESPONSE.setHeader( 'Content-Type', 'text/css' )">
9<dtml-call "REQUEST.RESPONSE.setHeader( 'Last-Modified', last_modified.toZone('GMT').rfc822() )">
10<dtml-call "REQUEST.RESPONSE.setHeader( 'Cache-Control', 'max-age=36000, must-revalidate' )">
11<dtml-call "REQUEST.RESPONSE.setHeader( 'Expires', expires.toZone('GMT').rfc822() )" >
12</dtml-let>
13
14<dtml-with stylesheet_properties>
15
16<dtml-comment>
17BASIC ELEMENTS ------------------------------
18</dtml-comment>
19
20body {
21  font: <dtml-var mainFont>;
22  background: <dtml-var mainBackground>;
23  color: <dtml-var mainFontColor>;
24  margin: 0;
25  padding: 0;
26}
27
28body .popup {
29  font: <dtml-var mainFont>;
30}
31
32a {
33  text-decoration: none;
34  color: <dtml-var mainLinkColor>;
35  background-color: transparent;
36}
37
38a.strong {
39  font-weight: bold;
40}
41
42img {
43  border: 0;
44  vertical-align: middle;
45}
46
47p {
48  margin: 0.5em 0 1em 0;
49  line-height: 133%;
50}
51p a {
52  text-decoration: underline;
53}
54p a:visited {
55  color: <dtml-var contentLinkVisitedColor>;
56  background-color: transparent;
57}
58p a:active {
59  color: <dtml-var contentLinkActiveColor>;
60  background-color: transparent;
61}
62a:hover {
63  text-decoration: none;
64}
65p img {
66  border: <dtml-var contentImageBorder>;
67  margin: 0;
68}
69
70h1, h2, h3, h4, h5, h6 {
71  color: <dtml-var headingFontColor>;
72  background-color: transparent;
73  font: <dtml-var headingFont>;
74  font-weight: bold;
75  margin: 0;
76  padding-top: 0.5em;
77}
78h1 {
79  font-size: <dtml-var headingSize1>;
80  margin-top: 0.5em;
81  margin-bottom: 0.5em;
82}
83h2 {
84  font-size: <dtml-var headingSize2>;
85  margin-bottom: 1em;
86}
87h3 {
88  font-size: <dtml-var headingSize3>;
89}
90h4 {
91  font-size: <dtml-var headingSize4>;
92}
93h5 {
94  font-size: <dtml-var headingSize5>;
95}
96h6 {
97  font-size: <dtml-var headingSize6>;
98}
99
100ol, ul {
101  padding: 0;
102  margin: 0;
103  line-height: 133%;
104}
105ul a, ol a {
106  text-decoration: underline;
107}
108
109dt {
110  font-weight: bold;
111  margin: 0.5em 0em 0.5em 0em;
112}
113dt a {
114  text-decoration: none;
115}
116
117dd {
118  line-height: 133%;
119  margin-bottom: 1em;
120}
121
122legend {
123  background: <dtml-var mainBackground>;
124  padding: 0.5em 0em 0.5em 0em;
125}
126
127textarea {
128  color: <dtml-var mainFontColor>;
129  background-color: white;
130  font: <dtml-var inputFont>;
131}
132input {
133  font: <dtml-var inputFont>;
134  color: <dtml-var mainFontColor>;
135  background-color: white;
136  vertical-align: middle;
137}
138select {
139  font: <dtml-var inputFont>;
140  vertical-align: top;
141}
142abbr, acronym, .explain {
143  color: <dtml-var mainFontColor>;
144  background-color: transparent;
145}
146q, blockquote {
147  font-style: italic;
148  font-size: 100%;
149}
150code {
151  font-size: 100%;
152  color: <dtml-var mainFontColor>;
153  background-color: <dtml-var preBackground>;
154}
155pre {
156  font-size: 100%;
157  padding: 1em;
158  border: <dtml-var preBorder>;
159  color: <dtml-var mainFontColor>;
160  background-color: <dtml-var preBackground>;
161  overflow: auto;
162}
163
164<dtml-comment>
165Classes ------------------------------
166</dtml-comment>
167
168#idioma p {
169  margin-top: 0;
170}
171
172.logo {
173  margin: <dtml-var logoMargin>;
174  padding: <dtml-var logoPadding>;
175}
176
177.note {
178  font-size: smaller;
179}
180
181.even {
182  background-color: <dtml-var boxEvenBackground>;
183}
184
185.odd {
186  background-color: <dtml-var boxOddBackground>;
187}
188
189.pending {
190  font-weight: bold;
191  color: #ffa500;
192}
193
194.work {
195  font-weight: bold;
196  color: blue;
197}
198
199.draft {
200  font-weight: bold;
201  color: #5555ff;
202}
203
204.published {
205  font-weight: bold;
206  color: #22a522;
207}
208
209.deferred {
210  font-weight: bold;
211  color: #ff6600;
212}
213
214.expired {
215  font-weight: bold;
216  color: #ff0033;
217}
218
219.locked {
220  border: 1px solid #ff6600;
221  color: #ff6600;
222  padding-left: 0.2em;
223  padding-right: 0.2em;
224}
225
226.url {
227  color: <dtml-var urlFontColor>
228}
229
230input.standalone, button.standalone {
231  background: <dtml-var standaloneButtonBackground>;
232  background-image: none;
233  color: <dtml-var standaloneButtonFontColor>;
234  border: <dtml-var standaloneButtonBorder>;
235}
236
237input.context {
238  background: <dtml-var contextButtonBackground>;
239  background-image: none;
240  color: <dtml-var contextButtonFontColor>;
241}
242
243input.destructive {
244  background: <dtml-var destructiveButtonBackground>;
245  background-image: none;
246  color: <dtml-var destructiveButtonFontColor>;
247}
248
249button {
250  font: <dtml-var inputFont>;
251  background: <dtml-var standaloneButtonBackground>;
252  color: <dtml-var standaloneButtonFontColor>;
253  background-image: none;
254  vertical-align: middle;
255}
256
257<dtml-comment>
258DIVs ------------------------------
259</dtml-comment>
260
261div.batchLayout {
262  text-align: right;
263  background-color: <dtml-var boxEvenBackground>;
264}
265
266div.pageNavigationLayout {
267  text-align: center;
268  background-color: <dtml-var boxEvenBackground>;
269}
270
271.contact {
272  text-align: center;
273  margin: 0;
274  padding: 1px 0px 1px 0px;
275}
276
277div.message {
278  background: <dtml-var messageBackground>;
279  color: <dtml-var mainFontColor>;
280  font: <dtml-var messageFont>;
281  margin: 1em 0;
282  padding: 0.5em 1em;
283  vertical-align: middle;
284}
285
286div.message a {
287  background: <dtml-var messageBackground>;
288  color: <dtml-var mainFontColor>;
289  text-decoration: underline;
290}
291
292div.description {
293  font: <dtml-var descriptionFont>;
294  display: block;
295  margin-bottom: 0.5em;
296  line-height: 133%;
297}
298
299div.documentActions {
300  float: right;
301  margin-top: 1em;
302}
303
304div.documentActions li {
305  display: inline;
306}
307
308div.searchBox {
309  float: right;
310  text-align: right;
311  padding: <dtml-var searchPadding>;
312  margin: <dtml-var searchMargin>;
313  clear: right;
314  background-color: transparent;
315  color: <dtml-var searchFontColor>;
316  text-transform: <dtml-var textTransform>;
317  width: 40%;
318}
319
320div.headerActions {
321  float: right;
322  text-align: right;
323  margin-top: 1em;
324  margin-right: 1em;
325  margin-bottom: 4px;
326}
327
328div.headerActions li {
329  display: inline;
330}
331
332div.pathBar {
333  padding: 1px 1em 1px 1em;
334  text-transform: <dtml-var textTransform>;
335}
336
337div.row {
338  clear: both;
339}
340
341div.label {
342  font-weight: bold;
343 
344}
345
346div.field {
347  padding: 0px 0px 0px 0px;
348  text-align: left;
349}
350
351span.legend {
352  font-weight: bold;
353}
354
355div.popupImg {
356  padding: 10px;
357  text-align: center;
358}
359
360.hidden {
361  display: none;
362}
363
364.hiddenItem {
365  background-color: <dtml-var boxEvenBackground>;
366}
367
368<dtml-comment>
369Documents language selection
370</dtml-comment>
371
372span.selectedLang {
373  background: #003a6b;
374  color: #ffffff;
375  font-weight: bold;
376  padding-left: 0.5em;
377  padding-right: 0.5em;
378}
379a.availableLang {
380  text-decoration: underline;
381}
382a.availableLang:hover {
383  text-decoration: none;
384}
385
386<dtml-comment>
387Accessibility statement and usage
388</dtml-comment>
389
390div.accesskeys, div.accesskeysUsage {
391  border: 1px solid #999999;
392  background-color: #dddddd;
393  padding: 1em;
394  margin: 0.5em 0 2em 0;
395}
396
397<dtml-comment>
398Contact info and conformance statement
399</dtml-comment>
400
401.contactInfo li {
402  display: inline;
403  margin: 1em;
404}
405
406.conformanceStatement {
407  text-align: center;
408}
409
410.conformanceStatement li {
411  display: inline;
412}
413
414.conformanceStatement img {
415  margin: 1em;
416}
417
418<dtml-comment>
419CMF Calendar
420</dtml-comment>
421
422.CalendarArrow {
423  font-weight: bold;
424  text-decoration: none;
425  color: #000000;
426}
427
428.CalendarTitle {
429  font-weight: bold;
430  text-decoration: none;
431  text-align: center;
432  color: #000000;
433}
434
435p.help {
436  font-style: italic;
437}
438
439table.calendar td {
440  white-space: nowrap;
441  background-color: white;
442  width: 1.5em;
443}
444
445table.calendar a {
446  text-decoration: none;
447  color: black;
448}
449
450table.calendar td.event {
451  background-color: <dtml-var boxEvenBackground>;
452  text-decoration: none;
453}
454
455table.calendar td.todayevent {
456  background-color: <dtml-var boxEvenBackground>;
457}
458
459table.calendar td.weekdays {
460  background-color: <dtml-var boxEvenBackground>;
461}
462
463table.calendar th {
464  background-color: <dtml-var boxEvenBackground>;
465  white-space: nowrap;
466}
467
468table.localRoleForm th {
469  text-align: left;
470}
471
472span.highlightedSearchTerm {
473  background-color: #ffff00;
474}
475
476span.searchFor {
477  font-weight: bold;
478}
479
480/* hack for IE6 bugs */
481/* Hides from IE5-mac \*/
482* html .group {height: 1%}
483* html div.box {height: 1%}
484* html div.box .content {height: 1%}
485* html div.document {height: 1%}
486/* End hide from IE-mac */
487
488.netscape4 {
489  display: none;
490}
491
492table {
493  font-size: 100%;
494}
495
496hr {
497  height: 1px;
498  color: <dtml-var mainTabBorderColorSelected>;
499  background-color: transparent;
500}
501
502form {
503  border: none;
504}
505
506textarea {
507  border: <dtml-var inputBorder>;
508  padding: 0.1em;
509}
510input {
511  border: <dtml-var inputBorder>;
512  margin-bottom: 1px; /* IE bug fix */
513  padding: 0.1em;
514}
515select {
516  font: <dtml-var inputFont>;
517  border: <dtml-var inputBorder>;
518  vertical-align: top;
519}
520
521abbr, acronym, .explain {
522  border-bottom: 1px dotted <dtml-var mainFontColor>;
523  cursor: help;
524}
525
526ol, ul {
527  padding-left: 3em;
528  margin: 0px;
529}
530
531.content li, #content li {
532  padding: 0em 0em 0.4em 0em;
533}
534
535ul.fileChoice {
536  padding-left: 0;
537  list-style-type: None;
538}
539
540button {
541  background: <dtml-var buttonBackground>;
542  border: <dtml-var buttonBorder>;
543  margin: 0.2em;
544  padding: 0.1em;
545  font: <dtml-var inputFont>;
546}
547
548button:hover {
549  background: <dtml-var buttonBackgroundHover>;
550}
551
552input.standalone, button.standalone {
553  background: <dtml-var standaloneButtonBackground>;
554  cursor: pointer;
555  font: <dtml-var inputFont>;
556  font-weight: <dtml-var buttonWeight>;
557  padding: <dtml-var standaloneButtonPadding>;
558  text-transform: <dtml-var textTransform>;
559}
560
561input.standalone:hover, button.standalone:hover {
562  background: <dtml-var standaloneButtonBackgroundHover>;
563}
564
565input.context {
566  background: <dtml-var contextButtonBackground>;
567  cursor: pointer;
568  font: <dtml-var inputFont>;
569  font-weight: <dtml-var buttonWeight>;
570  padding: <dtml-var contextButtonPadding>;
571  text-transform: <dtml-var textTransform>;
572  border: <dtml-var contextButtonBorder>;
573}
574
575input.context:hover {
576  background: <dtml-var contextButtonBackgroundHover>;
577}
578
579input.destructive {
580  background: <dtml-var destructiveButtonBackground>;
581  border: <dtml-var destructiveButtonBorder>;
582  cursor: pointer;
583  font: <dtml-var inputFont>;
584  font-weight: <dtml-var buttonWeight>;
585  padding: <dtml-var destructiveButtonPadding>;
586  text-transform: <dtml-var textTransform>;
587}
588
589input.destructive:hover {
590  background: <dtml-var destructiveButtonBackgroundHover>;
591  border: <dtml-var destructiveButtonBorderHover>;
592}
593
594input.noborder {
595  background: transparent;
596  border: <dtml-var noBorder>;
597  margin: 0;
598}
599
600input.searchButton {
601  font-size: 100% ! important;
602  margin-bottom: 1px ! important;
603}
604
605input.moveUp {
606  background: <dtml-var moveUpButtonBackground>;
607}
608input.moveDown {
609  background: <dtml-var moveDownButtonBackground>;
610}
611input.moveTop {
612  background: <dtml-var moveTopButtonBackground>;
613}
614input.moveBottom {
615  background: <dtml-var moveBottomButtonBackground>;
616}
617
618<dtml-comment>
619Forms ------------------------------
620</dtml-comment>
621
622form {
623  margin: 0px;
624}
625
626form.workflow {
627  padding:0px 0px 10px 0px;
628}
629
630form.workflow dl {
631  font-weight: bold;
632}
633
634form.workflow dd {
635  margin-left: 0px;
636}
637
638<dtml-comment>
639Generic table definitions
640</dtml-comment>
641
642table.columns td.left {
643  background: <dtml-var columnsLeftBackground>;
644}
645table.columns td.right {
646  background: <dtml-var columnsRightBackground>;
647}
648
649table.listing {
650  width: 100%;
651}
652
653table.listing caption {
654  font-weight: bold;
655}
656
657table.listing td {
658  padding: 0.4em;
659}
660
661table.listing thead tr th {
662  text-align: center;
663}
664
665table.listing thead td {
666  background-color: <dtml-var listingHeaderBackground>;
667  color: <dtml-var listingHeaderColor>;
668  text-align: center;
669  font-weight: bold;
670}
671
672table.listing tbody td {
673  background-color: <dtml-var listingCellBackground>;
674  color: <dtml-var listingCellColor>;
675}
676
677table.listing tbody tr.odd td {
678  background-color: <dtml-var listingCellOddBackground>;
679  color: <dtml-var listingCellOddColor>;
680}
681
682table.listing tbody tr.even td {
683  background-color: <dtml-var listingCellEvenBackground>;
684  color: <dtml-var listingCellEvenColor>;
685}
686
687table.listing .action {
688  font-weight: bold;
689  text-align: left;
690}
691
692<dtml-comment>
693Specific table definitions
694</dtml-comment>
695
696form#loginForm {
697  padding-top:20px;
698  padding-bottom:20px;
699  width: 30em;
700}
701table#login th {
702  width: 12em;
703}
704
705table#portalConfiguration th {
706  width: 18em;
707  padding-bottom: 1em;
708}
709table#portalConfiguration td {
710  width: 18em;
711  padding-bottom: 1em;
712}
713
714table#subscriptions td {
715  text-align: center;
716}
717
718table#subscriptions .action {
719  text-align: left;
720}
721
722table.localRolesAssignment {
723  width: 100%;
724  padding: 0;
725  margin: 0.4em;
726  margin-bottom: 2em;
727  border: 0.1em solid black;
728}
729
730table.localRolesAssignment td.assignedRole {
731  text-align: center;
732}
733
734table.localRolesAssignment td.inheritedRole {
735  text-align: center;
736  background: <dtml-var inheritedRole>;
737}
738
739span.inheritedRole {
740  background: <dtml-var inheritedRole>;
741}
742
743table.localRolesAssignment td.inheritedBlockedRole {
744  text-align: center;
745  background: <dtml-var inheritedBlockedRole>;
746}
747
748span.inheritedBlockedRole {
749  background: <dtml-var inheritedBlockedRole>;
750}
751
752<dtml-comment>
753DIVs ------------------------------
754</dtml-comment>
755
756div.top {
757  background: <dtml-var topBackground>;
758  margin: <dtml-var topMargin>;
759  padding: <dtml-var topPadding>;
760  width: 100%;
761}
762
763.contact {
764  background: <dtml-var footerBackground>;
765  border-top: <dtml-var footerBorder>;
766  border-bottom: <dtml-var footerBorder>;
767  width: 100%;
768}
769
770div.document {
771  font: <dtml-var contentFont>;
772  background: <dtml-var contentBackground>;
773}
774
775div.message {
776  border: <dtml-var messageBorder>;
777}
778
779div.pathBar {
780  border-bottom-color: <dtml-var mainTabBorderColorSelected>;
781  border-bottom-style: solid;
782  border-bottom-width: 1px;
783}
784
785div.row {
786  margin: 0em 0em 0.5em 0em;
787  position:relative;
788}
789
790
791
792<dtml-comment>
793
794The read star is not really necessary!
795
796.required {
797  padding-right: 0.5em;
798  background: <dtml-var requiredField>;
799}
800</dtml-comment>
801
802.error {
803  background: <dtml-var messageBackground>;
804  border: <dtml-var messageBorder>;
805  padding: 1em;
806  margin: 0em;
807}
808
809div.field {
810  margin-top: 0.2em;
811}
812
813span.legend {
814  background: <dtml-var contentBackground>;
815  font-size: <dtml-var legendFontSize>;
816  padding: 0.5em 0em 0.5em 0em;
817  position : relative;
818  top: -0.8em;
819  left: 0;
820}
821
822<dtml-comment>
823The "group" class is used to group together the HTML fields of a form.
824</dtml-comment>
825.group {
826  margin: 0em;
827  padding:5px 0px 5px 0px;
828}
829
830.comment_box {
831  border: 1px solid #bcbcbc;
832  margin: 1em 0 1em 1em;
833  padding: 5px 10px 10px 20px;
834}
835
836.user_roles {
837  margin: 1em 0 1em 0;
838  padding: 0.7em 0em 0.7em 0em;
839}
840
841.header_roles {
842  font-weight: bold;
843  background: #b1acb2;
844}
845
846.assign_roles {
847  padding-top: 0.7em;
848}
849
850table.calendar {
851  border: <dtml-var boxBorder>;
852  text-align: right;
853}
854
855table.calendar a:hover {
856  text-decoration: none;
857}
858
859table.calendar th {
860  border: none;
861  font-weight: bold;
862  text-align: center;
863}
864
865table.calendar td {
866  width: 1.5em;
867}
868
869table.calendar td.weekdays {
870  border: <dtml-var boxBorder>;
871  border-style: solid none;
872  text-align: center;
873}
874
875table.calendar td.event {
876  font-weight: bold;
877}
878
879table.calendar td.todayevent {
880  border: <dtml-var boxHighlight>;
881  font-weight: bold;
882}
883
884table.calendar td.todaynoevent {
885  border-collapse: collapse;
886  border: <dtml-var boxHighlight>;
887}
888
889<dtml-comment>
890Tooltips
891</dtml-comment>
892
893.tooltipControl {
894  color: #000000;
895  background: #ffffe1;
896  border: 1px solid #000000;
897
898  margin-left: 1em;
899}
900
901.tooltipControl:hover {
902  background: #ffffb8;
903}
904
905.tooltipArea {
906  color: #000000;
907  background: #ffffe1;
908  border: 1px solid #000000;
909  padding: 0.8em;
910  font-weight: normal;
911  font-size: 80%;
912  text-align: left;
913
914  position: inherit;
915  left: -15em;
916  top: 1.5em;
917  width: 20em;
918
919  visibility: hidden;
920  display: none;
921  z-index: 1000;
922}
923
924<dtml-comment>
925XXX: CPSMailBoxer definitions that should not be here but in a dedicated file
926</dtml-comment>
927
928div.mailboxerNoArchive {
929  border-top: solid;
930  border-width: 1px;
931}
932
933td.mailboxerMonth {
934  background-color: <dtml-var boxEvenBackground>;
935  text-align: center;
936}
937
938<dtml-comment>
939Books
940</dtml-comment>
941
942div.bookSummary {
943  width: 100%;
944  border: 1px solid black;
945  padding: 0.5em;
946}
947
948div.bookSummaryNav {
949  text-align: center;
950  width: 100%;
951  background-color: <dtml-var boxEvenBackground>;
952}
953
954li.summaryEntries {
955  margin: 0.5em;
956}
957
958div.bookPageHeader {
959  border-bottom: 1px solid black;
960}
961
962div.bookPageNavigation {
963}
964
965div.bookPageInfo {
966  float: right;
967}
968
969<dtml-comment>
970Hide stuff by id and make it available in source
971</dtml-comment>
972
973#bylineFolder {
974  clear: both;
975  text-align: left;
976}
977
978#byline {
979  clear: both;
980  text-align: right;
981  margin-top: 2em;
982}
983
984<dtml-comment>
985javascript use for block toggle
986</dtml-comment>
987
988div.hidden {
989  visibility: hidden;
990  display: none;
991}
992
993div.visible {
994  visibility: visible;
995  display: block;
996}
997
998<dtml-comment>
999Advanced search form
1000</dtml-comment>
1001
1002#advancedSearchForm {
1003  font-size: 90%;
1004}
1005
1006#advancedSearchZCText {
1007  text-align: right;
1008}
1009
1010p.advancedSearchButton {
1011  text-align: right;
1012}
1013
1014#advancedSearchForm fieldset {
1015  border: none;
1016  border-left: <dtml-var boxBorder>;
1017  border-bottom: <dtml-var boxBorder>;
1018  padding: 0.5em 0em 0.5em 0em;
1019  margin: 0.5em;
1020}
1021
1022span.advancedSearchColumn {
1023  padding-left: 1em;
1024  float:left;
1025  width:12em;
1026}
1027
1028div.drophover {
1029  border-bottom: 3px solid black;
1030}
1031
1032div.drophover-in {
1033  background: #ffe68f;
1034  border: 1px solid black;
1035}
1036
1037#ajax_psm {
1038  background: #ffac0b;
1039  color: white;
1040  padding: 8px;
1041  border: 1px solid black;
1042  float: right;
1043  font-weight: bold;
1044  position: absolute;
1045  <dtml-if "isUserAgentGecko(REQUEST)">
1046  -moz-border-radius: 4px;
1047  </dtml-if>
1048}
1049
1050div.draggable:hover {
1051  background: #efefef;
1052}
1053
1054div.more_block {
1055  padding-left: 10px;
1056}
1057
1058div.batchLayout, div.pageNavigationLayout {
1059  color: #666666;
1060  margin: 0px 2px 0px 2px;
1061  padding: 3px 20px 3px 0px;
1062}
1063
1064table.folderButtons {
1065  padding-top: 1.2em;
1066}
1067
1068</dtml-with>
Note: See TracBrowser for help on using the repository browser.