1/* 
2** Plone style sheet for CSS2-capable browsers.
3** Copyright Alexander Limi, 2002-2003 - http://www.plonesolutions.com
4**
5** Thanks to Geir Bkholt, Stian Siland for input and guidance.
6**
7** Style sheet documentation can be found at http://plone.org/documentation
8**
9** You should preferrably use ploneCustom.css to add your own CSS classes and to
10** customize your portal, as these are the base fundaments of Plone, and will 
11** change and be refined in newer versions. Keeping your changes in
12** ploneCustom.css will make it easier to upgrade. 
13**
14** Feel free to use whole or parts of this for your own designs, but give credit
15** where credit is due.
16**
17*/
18
19
20/*
21**  DTML instructions to set caching headers. Inside comments area to play nicer with CSS editors.
22**
23** **   
24**   
25**   
26**   
27** */
28/*  */
29
30
31 
32body {
33    font: 0.7em Verdana, Helvetica, Arial, sans-serif;
34    background: White;
35    color: Black;
36    margin: 0;
37    padding: 0;
38/* These work in IE only, changes the look of the scrollbar + textareas */
39    scrollbar-base-color: #DEE7EC;
40    scrollbar-highlight-color: #DEE7EC;
41    scrollbar-track-color: #F7F9FA;
42    scrollbar-darkshadow-color: #F7F9FA;
43    scrollbar-3dlight-color: #8CACBB;
44    scrollbar-shadow-color: #8CACBB;
45    scrollbar-arrow-color: #436976;
46}
47
48table {
49    font-size: 100%;
50}
51
52a {
53	text-decoration: none;
54    color: #436976;
55    background-color: transparent;
56}
57
58table {
59
60}
61
62
63img {
64    border: none;
65	vertical-align: middle;
66}
67
68p {
69    margin: 0.5em 0em 1em 0em;
70    text-align: justify;
71    line-height: 1.5em;
72}
73
74p a {
75    text-decoration: underline;
76}
77
78p a:visited {
79	color: Purple;
80    background-color: transparent;
81}
82
83p a:active {
84	color: Red;
85    background-color: transparent;
86}
87
88p img {
89    border: 0;
90    margin: 0;
91}
92
93
94hr {
95    clear: both;
96    height: 1px;
97    color: #8CACBB;
98    background-color: transparent;
99}
100
101
102h1, h2, h3, h4, h5, h6 {
103    color: Black;
104    clear: left;
105    font: 100% Verdana, Helvetica, Arial, sans-serif;
106    margin: 0;
107    padding-top: 0.5em;
108    border-bottom: 1px solid #8CACBB;
109}
110
111h1 a,
112h2 a,
113h3 a,
114h4 a,
115h5 a,
116h6 a { color: Black ! important; }
117
118
119h1 {
120    font-size: 160%;
121}
122
123h2 {
124    font-size: 150%;
125}
126
127h3 {
128    font-size: 140%;
129}
130
131h4 {
132    font-size: 120%;
133}
134
135h5 {
136    font-size: 100%;
137}
138
139h6 {
140    font-size: 80%;
141}
142
143ul { 
144    line-height: 1.5em;
145    list-style-type: square;
146    margin: 0.5em 0 0 2em;
147    padding:0;
148}
149
150ol {
151    line-height: 1.5em;
152    margin: 0.5em 0 0 2em;
153    padding:0;
154}
155
156ul a, ol a {
157    text-decoration: underline;
158}
159
160li {
161    margin-bottom: 1em;
162}
163
164dl {
165}
166
167dt {
168    font-weight: bold;    
169}
170
171dt a {
172    text-decoration: underline;
173}
174
175
176dd {
177    line-height: 1.5em;
178    margin-bottom: 1em;
179}
180
181d a {
182    text-decoration: underline;
183}
184
185
186fieldset {
187    border: 1px solid #8cacbb;
188    margin: 2em 0em 1em 0em;
189    padding: 1em 0em;
190}
191
192legend {
193    background: White;
194    padding: 0.5em;
195}
196
197
198form {
199    border: none;
200    margin: 0;
201}
202
203textarea {
204    border: 1px solid #8cacbb;  
205    color: Black;
206    background-color: white;
207    width: 88%;
208    padding: 0.1em;
209}
210
211input {
212    font: 100% Verdana, Helvetica, Arial, sans-serif;
213    border: 1px solid #8cacbb;  
214    color: Black;
215    background-color: white;
216    vertical-align: middle;
217    margin-bottom: 1px; /* IE bug fix */
218    padding: 0.1em;
219}
220
221select {
222    font: 100% Verdana, Helvetica, Arial, sans-serif;
223    border: 1px solid #8cacbb;  
224    vertical-align: top;
225}
226
227abbr, acronym, .explain {
228    border-bottom: 1px dotted Black;
229    color: Black;
230    background-color: transparent;
231    cursor: help;
232}
233
234q {
235    font-family: Times, "Times New Roman", serif;
236    font-style: italic;
237    font-size: 120%;
238}
239
240blockquote {
241    font-family: Times, "Times New Roman", serif; 
242    font-style: italic;
243    font-size: 120%;
244}
245
246code {
247    font-size: 120%;
248    color: Black;
249    background-color: #dee7ec;
250}
251
252pre {
253    font-size: 120%;
254    padding: 1em;
255    border: 1px solid #8cacbb;
256    color: Black;
257    background-color: #dee7ec;
258}
259
260.netscape4 {
261    display: none;
262}
263
264/*
265** Structural Elements
266*/
267
268div.top {
269    /* Top section */
270    background: transparent;
271    margin: 0;
272    padding: 0;
273}
274
275.logo {
276    /* Logo properties */
277    margin: 1em 0em 1em 2em;
278    padding: 0;
279}
280
281div.searchBox {
282    /*searchbox style and positioning */
283    background-color: transparent;
284    color: Black;
285    float: right;
286    margin: 3em 0em 0em 0em;
287    padding: 0em 2em 0em 0em;
288    text-align: right;
289    text-transform: lowercase;
290    width: 30%;
291}
292
293input.searchButton {
294    font-size: 100% ! important;
295    margin-bottom: 1px ! important;
296}
297
298div.tabs {
299    /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
300    background: transparent;
301    border-collapse: collapse;
302    border-bottom-color: #8CACBB;
303    border-bottom-style: solid;
304    border-bottom-width: 1px;
305    padding: 0.5em 0em 0em 2em;
306    white-space: nowrap;
307}
308
309div.tabs a {
310    /* The normal, unselected tabs. They are all links */
311    background: transparent;
312    border-color: #8CACBB;
313    border-width: 1px; 
314    border-style: solid solid none solid;
315    color: #436976;
316    font-weight: normal;
317    height: 1.2em;
318    margin-right: 0.5em;
319    padding: 0em 2em;
320    text-transform: lowercase;
321}
322
323div.tabs a.selected {
324    /* The selected tab. There's only one of this */
325    background: #DEE7EC;
326    border: 1px solid #8CACBB;
327    border-bottom: #DEE7EC 1px solid;
328    color: #436976;
329    font-weight: normal;
330}
331
332div.tabs a:hover {
333    background: #DEE7EC;
334    border-color: #8CACBB;
335    border-bottom-color: #DEE7EC;
336    color: #436976;
337}
338
339div.personalBar {
340    /* Bar with personalized menu (user preferences, favorites etc) */
341    background: #DEE7EC;
342    border-bottom-color: #8CACBB;
343    border-bottom-style: solid;
344    border-bottom-width: 1px;
345    color: Black;
346    padding-right: 3em;
347    text-align: right;
348    text-transform: lowercase;
349}
350
351div.personalBar a {
352    background-color: transparent;
353	color: #436976;
354    font-weight: normal;
355    margin-left: 1em;
356}
357
358div.personalBar img {
359    vertical-align: top;
360}
361.caseSensitive {
362    text-transform: none;
363}
364
365div.pathBar {
366    /* The path bar, including breadcrumbs and add to favorites */
367    border-bottom-color: #8CACBB;
368    border-bottom-style: solid;
369    border-bottom-width: 1px;
370    padding-left: 2em;
371    padding-right: 2em;
372    text-transform: lowercase;
373}
374
375.breadcrumbs {
376    float: left;
377    text-transform: lowercase;
378}
379
380.addFavorite {
381    vertical-align: bottom;
382}
383
384table.columns {
385	width: 100%;
386}
387
388table.columns td.left {
389    vertical-align: top;
390    width: 15%;
391    padding: 2em 0em 1em 2em;
392}
393
394table.columns td.main {
395    vertical-align: top;
396    padding: 0em 2em 1em 2em;
397    margin: 0;
398
399}
400
401table.columns td.right {
402    vertical-align: top;
403    width: 15%;
404    padding: 2em 2em 1em 0em;
405}
406
407#contentTabs {
408    background: transparent;
409    border-collapse: collapse;
410    border-bottom: 1px solid #74AE0B;
411    padding-left: 1em;
412    margin-top: 2em;
413    white-space: nowrap;
414}
415
416#contentTabs a {
417    background: transparent;
418    border: 1px solid #74AE0B;
419    border-style: solid solid none solid;
420    color: #578308;
421    font-weight: normal;
422    height: 1.2em;
423    margin-right: 0.5em;
424    padding: 0em 2em;
425    text-transform: lowercase;
426}
427
428#contentTabs a.selected {
429    background: #CDE2A7;
430    border-bottom: #CDE2A7 1px solid;
431    color: #578308;
432    font-weight: normal;
433}
434
435#contentTabs a:hover {
436    background-color: #CDE2A7;
437    color: #578308;
438}
439
440#contentBar {
441    background: #CDE2A7;
442    border-left: 1px solid #74AE0B;
443    border-right: 1px solid #74AE0B;
444    color: #578308;
445    text-align: right;
446    text-transform: lowercase;
447}
448
449/* Fix for IE6 disappearing float bug */
450#content {  
451    height: 100%; 
452}
453
454
455div.document {
456    background: White;
457    font: 120% Verdana, Helvetica, Arial, sans-serif;
458    padding: 0;
459    margin: 0em 0em 2em 0em;
460}
461
462div.editableDocument {
463    background: White;
464    border: 1px solid #74AE0B;
465    font: 120% Verdana, Helvetica, Arial, sans-serif;
466    margin: 0em 0em 2em 0em;
467    padding: 0em 1em 2em 1em;
468}
469
470div.documentActions {
471    float: right; 
472    margin-top: 1.5em;
473}
474
475div.message {
476    background: #FFCE7B;
477    border: 1px solid #FFA500;
478    color: Black;
479    font: bold 80% Verdana, Helvetica, Arial, sans-serif;
480    margin: 2em 0em 1em 0em;
481    padding: 0.5em 1em;
482    vertical-align: middle;
483}
484
485div.message a {
486	color: Black;
487    text-decoration: underline;
488}
489
490
491
492div.title {
493    margin-top: 1em;
494}
495
496.description {
497    /* The summary text describing the document */
498    font: bold 100% Verdana, Helvetica, Arial, sans-serif;
499    display: block;
500    margin: 1em 0em;
501    line-height: 1.5em;
502}
503
504.footer {
505    background: #DEE7EC;
506    border-top: 1px solid #8CACBB;
507    border-bottom: 1px solid #8CACBB;
508    color: Black;
509    clear: both;
510    float: none;
511    margin: 2em 0em;
512    padding: 0.5em 0em 1em 0em;
513    text-align: center;
514}
515
516
517/* Accessibility and visual enhancement elements */
518
519a.skipnav {
520    visibility: hidden;
521    position: absolute;
522} 
523
524
525/*
526** Widgets
527*/
528
529input.standalone {
530    background: #DEE7EC url(linkOpaque.gif) 9px 1px no-repeat;
531    color: Black;
532    cursor: pointer;
533    font-size: 80%;
534    font-weight: normal;
535    margin-bottom: 1em;
536    padding: 1px 1px 1px 15px;
537    text-transform: lowercase;
538}
539
540input.context {
541    background: White url(linkTransparent.gif) 9px 1px no-repeat;
542    color: Black;
543    cursor: pointer;
544    font-size: 80%;
545    font-weight: normal;
546    margin-bottom: 1em;
547    padding: 1px 1px 1px 15px;
548    text-transform: lowercase;
549}
550
551input.destructive {
552    background: #FFCE7B url(linkTransparent.gif) 9px 1px no-repeat;
553    border: 1px solid #FFA500;  
554    color: Black;
555    cursor: pointer;
556    font-size: 80%;
557    font-weight: normal;
558    margin-bottom: 1em;
559    padding: 1px 1px 1px 15px;
560    text-transform: lowercase;
561}
562
563input.noborder {
564    border: none;
565    margin: 0;
566    background-color: transparent;
567}
568
569div.row {
570    clear: both;
571    min-height: 4em;
572    margin: 0em 0em 1em 0em;
573    position: relative;
574}
575
576.group {
577    border: 1px solid #8cacbb;
578    margin: 1em 0em 1em 0em;
579    padding: 0em 1em;
580}
581span.legend {
582    background: White;
583    font-size: 80%;
584    padding: 0.5em;
585    position : relative;
586    top: -0.8em;
587    left: 0em;
588}
589
590div.label {
591    font-weight: bold;
592    display: inline;
593    padding-right: 0.5em;
594}
595
596div.field {
597    margin-top: 0.2em;
598}
599
600div.help {
601    background-color: #FFFFE1; 
602    border: 1px solid black; 
603    font-size: 80%;
604    font-weight: normal;
605    line-height: normal;
606    text-align: left;
607    position: absolute;
608    left: -18em;
609    top: 1.5em;
610    width: 16em;
611    padding: 0.5em;
612}
613
614.error {
615    /* Class for error indication in forms */
616    background: #FFCE7B;
617    border: 1px solid #FFA500;
618    padding: 1em;
619    margin: 0;
620    width: 68% !important;
621}
622
623.required {
624    /* Used in addition to class "label" on required elements */
625    background: url(required.gif) right no-repeat;
626}
627
628span.card {
629    background: #DEE7EC;
630    border-color: #8CACBB;
631    border-width: 1px;
632    border-style: solid;
633    float: left;
634    margin: 1em;
635    padding: 1em;
636    text-align: center;
637    width: 15%;
638}
639
640table.listing,
641div.stx table {
642    /* The default table for document listings. Contains name, document types, modification times etc in a file-browser-like fashion */
643    border-collapse: collapse;
644    border-left: 1px solid #8CACBB;
645    border-bottom: 1px solid #8CACBB;
646    font-size: 80%;
647    margin: 1em 0em 1em 0em;
648    clear: both;
649}
650
651table.listing th,
652div.stx table th {
653    background: #DEE7EC;
654    border-top: 1px solid #8CACBB;
655    border-bottom: 1px solid #8CACBB;
656    border-right: 1px solid #8CACBB;
657    color: Black;
658    font-weight: normal;
659    padding: 0em 1em 0em 1em;
660    text-transform: lowercase;
661    white-space: nowrap;
662}
663
664table.listing td.top {
665    border-left: 1px solid White;
666    border-top: 1px solid White ! important;
667    border-right: 1px solid White ! important;
668    text-align: right ! important;
669    padding: 0em 0em 1em 0em;
670    /* insane IE row bug workaround */
671    position: relative;
672    left: -1px;
673    top: -1px;
674}
675
676table.listing tr.odd {
677    /*every second line should be shaded */
678    background: transparent;
679}
680
681table.listing tr.even {
682    background: #F7F9FA;
683}
684
685table.listing td,
686div.stx table td {
687    border-right: 1px solid #8CACBB;
688    padding: 0em 1em;
689    text-align: left;
690}
691
692table.listing a:hover {
693    text-decoration: underline;
694}
695
696table.listing img {
697	vertical-align: middle;
698}
699
700/* Additional STX workaround classes */
701
702div.stx table p /* stupid STX table workaround */
703{
704    margin: 0;
705    padding: 0;
706}
707
708div.stx table  /* stupid STX table workaround */
709{
710    border: 1px solid #8CACBB ! important;
711}
712div.stx table td {
713    border-bottom: 1px solid #8CACBB;
714}
715
716
717div.box {
718    border: none;
719    margin: 0em 0em 2em 0em;
720    padding: 0;
721}
722
723div.box h4 {
724    font-size: 1em;
725}
726
727div.box h5 { 
728    background: #DEE7EC;
729    border: 1px solid #8CACBB;
730    border-style: solid solid none solid;
731    color: Black;
732    padding: 0em 1em 0em 1em;
733    text-transform: lowercase;
734    display: inline;
735    font-size: 1em;
736    height: 1em;
737}
738
739div.box h6 { 
740    background: #DEE7EC;
741    border: 1px solid #8CACBB;
742    border-style: solid solid none solid;
743    color: Black;
744    padding: 0em 1em 0em 1em;
745    text-transform: lowercase;
746    display: block;
747    font-size: 1em;
748    height: 1.2em;
749}
750
751
752div.box div.body {
753    background: transparent;
754    border-collapse: collapse;
755    border: 1px solid #8CACBB;
756}
757
758.boxDetails {
759    text-align: right;
760}
761
762div.box .content {
763    padding: 1em;
764}
765
766div.box a.close {
767    float: right;
768    text-transform: none;
769    border-left: 1px solid #8CACBB;
770    padding: 0em 0.2em;
771}
772
773div.box h1, 
774div.box h2, 
775div.box h3, 
776div.box h4 {
777    margin: 0;
778    padding: 0;
779}
780
781div.box .even {
782    background-color: #F7F9FA;
783}
784
785div.box .odd {
786    background-color: transparent;
787}
788
789div.box input {
790    font-size: 100%;
791}
792
793div.spacer {
794	margin: 1em;
795}
796
797.currentNavItem {
798    color: Black;
799    font-weight: bold;
800}
801
802.private {
803    color: Black;
804}
805
806.published {
807    color: #74AE0B;
808}
809
810.pending {
811    color: #FFA500;
812}
813
814.syndicated {
815    color: #008000;
816}
817
818.expired {
819    color: Red;
820}
821
822.even {
823    background-color: #F7F9FA;
824}
825
826.odd {
827    background-color: transparent;
828}
829
830.highlight {
831    background-color: #F7F9FA;
832}
833
834div.listingBar {
835    background: #DEE7EC;
836    border-color: #8CACBB;
837    border-style: solid;
838    border-width: 1px;
839    padding: 0em 1em;
840    text-align: center;
841    text-transform: lowercase;
842    clear: both;
843    vertical-align: top;
844    margin: 1em 0em;
845}
846
847div.listingBar span.previous {
848    text-align: left;
849    float: left;
850}
851
852div.listingBar span.next {
853    text-align: right;
854    float: right;
855}
856
857div listingBar img {
858	vertical-align: middle;
859}
860
861
862/*
863** Calendar elements - used in the calendar rendering 
864*/
865
866div.day {
867    background-color: #FFFFBB;
868    border: 1px solid Black;
869    padding: 0.2em;
870    position: absolute;
871    visibility: hidden;
872    width: 12em;
873    z-index: 2;
874}
875
876div.date {
877    font-weight: bold;
878}
879
880  
881table.calendar {
882    border: 1px solid #8CACBB;
883    margin: 0em 1em 2em 0em;
884    text-align: right;
885}
886
887table.calendar a {
888    text-decoration: none;
889    color: #436976;
890}
891
892table.calendar a:hover {
893    text-decoration: none;
894}
895
896table.calendar th {
897    background-color: #DEE7EC;
898    color: Black;
899    font-weight: bold;
900    text-align: center;
901}
902
903table.calendar td {
904    background-color: transparent;
905    width: 1.5em;
906    padding: 2px;
907}
908
909table.calendar td.weekdays {
910    background-color: #DEE7EC;
911    border: 1px solid #8CACBB;
912    border-style: solid none;
913    text-align: center;
914}
915
916table.calendar td.event {
917    background-color: #DEE7EC;
918    font-weight: bold;
919}
920
921table.calendar td.noevent {
922    background-color: transparent;
923}
924
925table.calendar td.todayevent {
926    background-color: #DEE7EC;
927    border: 2px solid #FFA500;
928    font-weight: bold;
929}
930
931table.calendar td.todaynoevent {
932    border-collapse: collapse;
933    border: 2px solid #FFA500;
934}
935
936
937
938
939
940
941/*  */
942
943