source: trunk/themes/default/theme.css @ 5129

Last change on this file since 5129 was 5129, checked in by patdenice, 14 years ago

Feature 1502: merge multiple css files into theme.css in default theme.

  • Property svn:eol-style set to LF
File size: 15.1 KB
Line 
1/**
2 * Menubar
3 */
4#menubar {
5        float: left;
6        margin: 0 0 10px 1em;
7        padding: 0;
8        display: inline;
9}
10
11#menubar DL, #menubar DT, #menubar DD {
12        margin: 0; padding: 0; display: block;
13}
14
15#menubar .button {
16        margin: -2px 2px 2px;
17        width: auto;
18        padding: 0;
19        text-indent: 0;
20        list-style: none;
21        text-align: center;
22        float: right;
23}
24
25/* H2 properties copied here */
26#menubar DT {
27        font-weight: bold;
28        padding: 5px 5px 5px 5px;
29        font-size: 120%;
30        text-align: center;
31}
32
33#menubar UL,
34#menubar FORM,
35#menubar P {
36        font-size: 92%;
37        margin: 10px 0 10px 5px;
38}
39#menubar UL {
40        list-style-type: square;
41        list-style-position: inside;
42        padding: 0 0 0 2px;
43}
44#menubar UL UL {
45        font-size: 100%;
46        margin-top: 0;
47        margin-bottom: 0;
48}
49
50#menubar LI.selected A {
51        font-weight: bold;
52}
53
54#menubar LI.selected LI A {
55        font-weight: normal;
56}
57
58#menubar .menuInfoCatByChild {
59        font-size: 80%;
60        font-style: italic;
61}
62
63#menubar INPUT {
64        text-indent: 2px;
65}
66
67/* quickconnect form */
68FORM#quickconnect {
69        margin: 5px;
70        padding: 0;
71}
72
73FORM#quickconnect FIELDSET {
74        margin: 0;
75        padding: 0; /*IE6 requires padding 0*/
76}
77
78FORM#quickconnect FIELDSET DIV {
79        margin: 8px 5px;
80        padding: 0;
81}
82
83#menubar #menuTagCloud {
84        text-align: center;
85        margin: 5px 0;
86}
87
88#menubar #menuTagCloud SPAN {
89        white-space: nowrap;
90}
91
92/**
93 * Content
94 */
95.content {
96        margin-right: 1em;
97        margin-bottom: 1em; /* when it's longer than menu bar */
98}
99
100BODY#theCommentsPage .content,
101BODY#theUploadPage .content,
102BODY#theRegisterPage .content,
103BODY#theIdentificationPage .content,
104BODY#theProfilePage .content,
105BODY#theSearchPage .content,
106BODY#theAboutPage .content,
107BODY#thePopuphelpPage .content,
108BODY#thePasswordPage .content,
109BODY#theNotificationPage .content,
110BODY#theTagsPage .content,
111BODY#theNBMPage .content
112{
113        margin: 1em;
114}
115
116.content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
117
118.content .navigationBar, .content .additional_info, .content .calendarBar {
119        margin: 8px 4px;
120        text-align: center;
121}
122
123.content .pageNumberSelected {
124        font-style: italic;
125        font-weight: bold;
126}
127
128.content .additional_info {
129        font-size: 110%;
130}
131
132
133/* actions */
134UL.categoryActions {
135        margin: 0 2px;
136        width: auto;
137        padding: 0;
138        text-indent: 0;
139        list-style: none;
140        text-align: center;
141}
142
143.content DIV.titrePage UL.categoryActions {
144        float: right;
145        text-align: center;
146}
147
148.content DIV.titrePage {
149        padding: 0 0 3px;
150}
151
152.content UL.categoryActions LI {
153        display: inline;
154}
155
156.content UL.categoryActions A IMG, UL.categoryActions A {
157        border: none;
158        margin-bottom: -5px;
159}
160
161/* begin chronology/calendar elements*/
162.content DIV.calendarViews {
163        display: block;
164        float: right;
165        margin: 2px 0 0;
166}
167
168SPAN.calItem, SPAN.calItemEmpty {
169        font-weight: bold;
170        margin: 0 1px;
171}
172
173SPAN.calItem A { border:0 }
174
175.content DIV.calendarCalBar {
176        margin: 10px 10px;
177        text-align: left;
178}
179
180SPAN.calCalHead {
181        font-weight: bold;
182        font-size: 110%;
183        margin: 0 2px;
184}
185
186SPAN.calCal { margin: 0 2px; }
187
188/* nice looking month calendar*/
189TABLE.calMonth {
190        border: none;
191        border-collapse: collapse;
192        margin-bottom: 10px;    /*<-IE ignores this */
193}
194
195TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank {
196        vertical-align: top;
197  font-weight: bold;
198  font-size: 18px;
199}
200
201TD.calDayHead {
202  font-weight: bold;
203  font-size: 12px;
204        text-align: center;
205}
206
207DIV.calImg {
208        overflow: hidden;
209        vertical-align: bottom;
210        z-index: 1;
211        position: relative; /*<- this required by IE*/
212}
213
214.calImg img {
215        position: relative;
216        border: 0;
217}
218
219.calBackDate {
220        padding-left: 4px;
221        padding-top: 0px;
222        z-index: 2;
223        position: absolute;
224        vertical-align: top;
225        color: #000;
226}
227
228.calForeDate {
229        padding-left: 5px;
230        padding-top: 1px;
231        z-index: 3;
232        position: absolute;
233        vertical-align: top;
234        color: #fff;
235}
236
237/* Category thumbnails on main page, CSS code inspired from MOD subcatify */
238.content UL.thumbnailCategories {
239        margin: 0;
240        padding: 0;
241        list-style: none;
242        overflow: hidden;
243        width: 100%;
244}
245
246.content UL.thumbnailCategories LI {
247        margin:0;
248        padding:0;
249        float:left;
250}
251
252.content DIV.thumbnailCategory {
253        display:block;
254        padding: 2px 0px 0px 2px;
255        margin: 5px;
256}
257
258.content DIV.thumbnailCategory DIV.description {
259        font-size: 90%;
260        overflow: auto;
261        /*width: inherit;*/
262}
263
264.content DIV.thumbnailCategory DIV.description H3 {
265        text-align: left;
266        background: transparent;
267        margin: 0;
268        padding: 0.1em;
269        font-size: 120%;
270}
271
272.content DIV.thumbnailCategory DIV.description P {
273        margin: 0;
274}
275
276.content DIV.thumbnailCategory DIV.illustration {
277        text-align: left;
278        margin: 2px 0 0 2px;
279        float: left;
280}
281
282
283/* User comments */
284DIV#comments {
285        padding-left: 5px;
286        padding-right: 5px;
287}
288
289DIV#comments DIV.description {
290        font-size: 100%;
291}
292
293/* Thumbnails */
294.content UL.thumbnails SPAN.thumbLegend {
295        font-size: 90%;
296        overflow: hidden;/* oversized legend is clipped */
297}
298
299/* Thumbnail "elastic" layout */
300.content UL.thumbnails {
301        margin: 0;
302        padding: 0;
303        list-style: none;
304        text-align: center;     /* to center the whole collection in .content */
305}
306.content UL.thumbnails LI { display: inline }
307
308.content UL.thumbnails SPAN.wrap1 {
309        margin: 0 5px 5px 5px;
310        display: table-cell; display: inline-table;
311        display: inline-block;/* Why 3 display option ??? */
312        vertical-align: top;    /* OK with Opera and IE6 not Geko */
313        text-align: center;             /* to center the thumbnail and legend in Geko/Opera */
314}
315.content UL.thumbnails SPAN.wrap2 {
316        margin: 0;                      /* important reset the margins */
317        display: table-cell;/* block prevents vertical-align here */
318        vertical-align: middle;/* Ok with Opera and Geko not IE6 */
319}
320.content UL.thumbnails SPAN.wrap2 A,
321.content UL.thumbnails LABEL {
322        display: block;
323        border-bottom: none;
324}
325.content UL.thumbnails IMG {
326        margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
327}
328
329/**
330 * Picture
331 */
332#imageHeaderBar {
333        padding-top: 2px;
334        padding-bottom: 2px;
335        margin-top: 4px;
336        overflow: hidden;
337        width: 100%;
338}
339
340#imageHeaderBar .browsePath {
341        float: left;
342        margin-left: 10px;
343}
344
345#imageHeaderBar .imageNumber {
346        float: right;
347        margin-right: 10px;
348}
349
350#imageHeaderBar H2 {
351        text-align: center;
352        padding: 0;
353        clear: both;
354}
355
356#imageToolBar {
357        text-align: center;
358        position: relative;
359        clear: both;
360        margin-bottom: 4px;
361        padding: 0;
362        height: 28px;
363}
364
365#imageToolBar A, #imageToolBar IMG {
366        display: block;
367        border: none;
368        margin: 0; padding: 0;
369}
370#imageToolBar A { width: 48px; }
371#imageToolBar IMG { margin: 2px auto; }
372#imageToolBar .randomButtons A { float: left; }
373#imageToolBar .navButtons    A { float: right; }
374
375#theImage {
376        clear: left;
377        text-align: center;
378}
379
380#theImage>IMG {
381        display: block;
382        margin: 0 auto;
383        border: none;
384}
385
386#linkPrev {
387        float: left;
388        margin-right: 10px;
389        margin-left: 5px;
390}
391
392#linkNext {
393        float: right;
394        margin-right: 5px;
395        margin-left: 10px;
396}
397
398TABLE.infoTable .label {
399        font-weight: bold;
400        text-align: right;
401        padding-right: 0.5em;
402}
403
404TABLE.infoTable TD.value UL {
405        margin: 0;
406        padding: 0 0 0 1.5em;
407        list-style-type: square;
408}
409
410.thumbnailCategories LI { list-style: none; }
411
412.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
413        padding:0;
414        border:0;
415}
416
417.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
418        cursor: pointer;
419}
420
421.rateButtonSelected {
422        font-weight:bold;
423        font-size:120%;
424}
425
426.rateButtonStarFull {
427        background: url('icon/rating-stars.gif') no-repeat scroll; background-position:-16px center; width:16px;
428}
429
430.rateButtonStarEmpty {
431        background: url('icon/rating-stars.gif') no-repeat scroll; background-position:0 center; width:16px;
432}
433
434/**
435 * Default Layout
436 */
437BODY {
438        margin: 5px;
439        padding: 0;
440        font-size: 0.8em;
441        font-family: Arial,Helvetica,sans-serif;
442}
443
444
445H1 {
446        text-align: center;
447        font-size: 150%;
448        font-weight: bold;
449        padding: 0;
450        margin: 0.5em 0 1em 0;
451}
452
453H2 {
454        margin: 0;
455        padding: 5px 0.5em 5px 0.5em;
456        text-align: left;
457        font-size: 120%;
458}
459
460A {
461        text-decoration:none;
462        border-bottom: 1px dotted #005e89;
463}
464A:hover {
465        border-bottom: 1px solid #858460;
466}
467
468IMG {
469        border: none;
470}
471
472HR.separation {
473        visibility: hidden;
474        clear: both;
475}
476
477#copyright {
478        clear: both;
479        font-size: 83%;
480        text-align: center;
481        margin: 0 0 10px 0;
482}
483
484INPUT, SELECT {
485        margin: 0;
486        font-size: 1em; /* <= some browsers don't set it correctly */
487}
488
489TABLE { /* horizontaly centered */
490        margin-left: auto;
491        margin-right: auto;
492}
493
494
495FORM { padding: 0; margin: 0; }
496
497FORM P {
498        text-align: center;
499        margin-top: 2em;
500        margin-bottom: 2em;
501}
502
503FORM FIELDSET P {
504        margin-top: 1em;
505        margin-bottom: 0;
506}
507
508SELECT.categoryList {
509        height: 20em;
510        width: 500px;
511}
512
513
514/**
515 * Filter forms are displayed label by label with the input (or select...)
516 * below the label. Use an UL to make a group (radiobox for instance).
517 * Use a SPAN to group objects in line
518 */
519FIELDSET {
520        padding: 1em;
521        margin: 1em;
522        overflow: hidden; /* <- makes Opera happy */
523}
524
525FORM.filter FIELDSET UL {
526  margin: 0;
527}
528FORM.filter FIELDSET UL,
529FORM.filter FIELDSET LABEL {
530        display: block;
531        float: left;
532        margin-right: 1em;
533        padding: 0;
534}
535
536FORM.filter FIELDSET LI {
537        list-style: none;
538        margin-bottom: 0.5em;
539}
540
541FORM.filter FIELDSET LI LABEL {
542        display: inline;
543        float: none;
544}
545
546FORM.filter FIELDSET UL.tagSelection LABEL {
547        display: inline;
548        float: none;
549        margin-right:0.5em;/*reduce from above*/
550}
551
552/* cannot use FIELDSET>LABEL because of IE<=6 */
553FORM.filter FIELDSET LABEL INPUT,
554FORM.filter FIELDSET LABEL SELECT,
555FORM.filter FIELDSET LABEL SPAN,
556FORM.filter FIELDSET LABEL TEXTAREA {
557  display: block;
558  margin: 0.5em 0;
559}
560FORM.filter FIELDSET * LABEL INPUT,
561FORM.filter FIELDSET * LABEL SELECT,
562FORM.filter FIELDSET * LABEL TEXTAREA,
563FORM.filter FIELDSET LABEL SPAN INPUT,
564FORM.filter FIELDSET LABEL SPAN SELECT,
565FORM.filter FIELDSET LABEL SPAN TEXTAREA {
566        display: inline;
567        vertical-align: top;
568        margin: 0 0.5em 0 0;
569}
570
571FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {
572        margin-right:0;
573}
574
575/* following declaration is important to avoid strange FF behaviour */
576FORM.filter FIELDSET LABEL SPAN SELECT {
577        margin: 0;
578}
579
580FORM.filter FIELDSET P
581{
582        clear: left;
583        display: block;
584}
585
586FORM.filter INPUT[type="submit"] {
587        margin-top: 1em;
588}
589
590FORM.properties UL {
591        list-style-type: none;
592        margin: 0;
593        padding: 0;
594}
595
596FORM.properties LI {
597        margin-bottom: 0.5em;
598        padding: 0;
599        line-height: 1.8em;
600        clear: left;
601}
602
603FORM.properties SPAN.property {
604        font-weight: bold;
605        float: left;
606        width: 50%;
607        text-align: right;
608        margin: 0;
609        padding: 0 0.5em 0 0;
610}
611
612/* button tools */
613UL.actions {
614        text-indent: 0;
615        list-style: none;
616}
617UL.actions LI {
618        display: inline;
619}
620UL.actions A, UL.actions IMG {
621        border: none;
622}
623
624UL.tagSelection {
625        width: 99%;
626        margin: 1em 0 1em 0;
627        padding: 0;
628}
629
630UL.tagSelection LI {
631        display: inline;
632        white-space: nowrap;
633}
634
635#fullTagCloud {
636        font-size: 120%;
637        text-align: justify;
638        padding: 0;
639        margin: 1em 2em 1em 2em;
640}
641
642#fullTagCloud SPAN {
643        white-space: nowrap;
644        margin: 0 2px;
645}
646
647
648.tagLevel5 { font-size: 150%; }
649.tagLevel4 { font-size: 140%; }
650.tagLevel3 { font-size: 120%; }
651.tagLevel2 { font-size: 100%; }
652.tagLevel1 { font-size: 90%; }
653
654
655/* Popup help page */
656BODY#thePopuphelpPage #copyright {
657        display: none;
658}
659
660#theNotificationPage p { padding: 0.5em; }
661BODY#thePopuphelpPage .content P {
662        text-align: justify;
663        padding: 0.5em;
664}
665
666BODY#thePopuphelpPage .content OL LI,
667BODY#thePopuphelpPage .content UL LI
668{
669        margin-bottom: 0.5em;
670}
671
672TR.tagLine {
673        border-bottom: 1px solid #ddd;
674}
675TD.nbEntries {
676        text-align: right;
677        font-style: italic;
678        font-size: 90%;
679}
680
681FIELDSET.tagLetter {
682        border: 1px solid #d3d3d3;
683        width: 200px;
684        margin: 0.5em;
685        padding: 10px;
686}
687
688LEGEND.tagLetterLegend {
689        border: 1px solid #d3d3d3;
690        font-size:120%;
691        font-weight: bold;
692        padding: 0 5px;
693        font-style: normal;
694}
695
696TABLE.tagLetterContent {
697        width:100%;
698        font-size:80%;
699        border-collapse : collapse;
700}
701
702#theHeader {text-align: center;}
703
704#theNotificationPage DL,
705#thePopuphelpPage DL { margin: 0 25px 25px; }
706.content #comments UL.thumbnailCategories LI { width:99%; }
707/* jQuery datepicker */
708IMG.ui-datepicker-trigger {
709        cursor : pointer;
710}
711
712/* Set the width of the menubar for the galery */
713#menubar {
714  width: 18em;
715}
716.content {
717  margin-left: 20em;  /* = #menubar width + 2em */
718}
719/* Set minimum width of the page before getting a scrollbar */
720/* IE5 and IE6 don't get that */
721BODY {
722  min-width: 60em;  /* ~ 3* #menubar width */
723}
724BODY#thePopuphelpPage {
725  min-width: 0;
726}
727
728/* Set some sizes according to your maximum thumbnail width and height */
729.content UL.thumbnails SPAN,
730.content UL.thumbnails SPAN.wrap2 A,
731.content UL.thumbnails LABEL,
732.content DIV.thumbnailCategory DIV.illustration {
733  width: 140px;      /* max thumbnail width + 2px */
734}
735.content UL.thumbnails SPAN.wrap2,
736.content DIV.thumbnailCategory DIV.description {
737  height: 140px;    /* max thumbnail height + 2px */
738}
739
740
741/* Category thumbnails on main page */
742.content UL.thumbnailCategories LI {
743  width: 49.7%;    /* 49.7% for 2 per line, 33.2% for 3 per line*/
744}
745
746/* Set defaults for thumbnails legend */
747.content UL.thumbnails SPAN.thumbLegend {
748  display: block;  /* display: none; if you don't want legend */
749  height: 4em;    /* legend height (don't set auto to be Gecko friendly)*/
750}
751
752/**
753 * Default colors
754 */
755#imageToolBar * {
756        background: inherit;
757}
758
759/* So that non-links are slightly greyed out */
760.content .navigationBar, SPAN.calItemEmpty, TD.calDayCellEmpty {
761        color: #b0b0b0;
762}
763
764/* Tables & forms */
765/* IE <= 6 is so bad with this that you can't merge with the following rule */
766INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
767INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
768        color:black;
769        background-color: #d3d3d3;      /* lightgrey */
770}
771
772INPUT.text, INPUT.password, INPUT.button,
773INPUT.submit, INPUT.reset, INPUT.file,
774SELECT, TEXTAREA {
775        color:black;
776        background-color: #d3d3d3;      /* lightgrey */
777}
778
779INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .focus {
780        background-color: #f5f5f5;      /* whitesmoke */
781}
782
783/* some theme set a border on INPUT  which is not pretty for radio/checkbox */
784INPUT[type="radio"], INPUT[type="checkbox"] {
785        border: none;   /* <= Opera needs this */
786}
787
788INPUT.radio, INPUT.checkbox {
789        border: none;   /* <= IE6 needs this */
790}
791
792/* rate buttons displayed like links */
793INPUT.rateButton, INPUT.rateButtonSelected, INPUT.rateButtonStarFull, INPUT.rateButtonStarEmpty {
794        color:inherit;
795        background-color:transparent !important;        /* Konqueror doesn't accept transparent here */
796}
797
798.errors { /* Errors display */
799        color: red;
800        background-color: #ffe1e1;
801        font-weight: bold;
802        margin: 5px;
803        border: 1px solid red;
804        background-image: url(icon/errors.png);
805        background-repeat: no-repeat;
806        background-position: top right;
807        padding: 10px 50px 10px 10px;
808}
809
810/* Informations box in administration */
811.infos {
812        color: #002000;
813        background-color: #98fb98; /* palegreen */
814        background-image: url(icon/infos.png);
815        background-repeat: no-repeat;
816        background-position: top right;
817        margin: 5px;
818        padding: 10px 50px 10px 10px;
819}
820
821/* Header message like upgrade or adviser mode */
822.header_msgs {
823        text-align:center;
824        font-weight: bold;
825        color:#696969;  /* dimgray */
826        background-color: #d3d3d3;
827        margin: 1px;
828        padding: 1px;
829}
830
831/* Header notes box in public/administration */
832.header_notes {
833        border: 1px solid #aaaaaa; /* border color and style */
834        text-align: center;
835        background-image: url(icon/note.png);
836        background-repeat: no-repeat;
837        background-position: top left;
838        font-weight: bold;
839        margin: 14px;
840        padding: 5px 00px 0px 0px;
841}
842
843LEGEND {
844        font-style: italic;
845}
846
847/*calendar*/
848SPAN.calItem, SPAN.calItemEmpty, 
849TD.calDayCellEmpty, TD.calDayCellFull {
850        border: 1px solid gray;
851}
Note: See TracBrowser for help on using the repository browser.