Project

General

Profile

1 3089 cjones
/*   '$RCSfile$'                                              */
2
/*     Purpose: Default style sheet for PISCO project web pages             */
3
/*              Using this stylesheet rather than placing styles directly   */
4
/*              into PISCO web documents allows us to globally change the   */
5
/*              formatting styles of the entire site in one easy place.     */
6
/*              Versioning information for this document can be found at    */
7
/*              cvs.piscoweb.org.                                           */
8
/*   Copyright: 2000 Regents of the University of California and the        */
9
/*              Partnership for Interdisciplinary Studies of Coastal Oceans */
10
/*     Authors: Chris Jones, James Woods                                    */
11
/*                                                                          */
12
/*    '$Author$'                                                   */
13
/*      '$Date$'                                      */
14
/*  '$Revision$'                                                      */
15
/*                                                                          */
16
17
/*
18
*  import eml css:
19
*/
20
21
body {
22
    margin:                     0px;          /* No NN4 */
23
    padding:                    0px;
24
    border:                     0px;
25 3780 daigle
    background-image:           url('images/bg.gif');
26 3089 cjones
    background-position:        top left;     /* No NN4 */
27
    background-repeat:          repeat-y;     /* No NN4 */
28
    background-color:           #ffffff;
29
    color:                      #006699;
30
    font-style:                 normal;
31
    font-weight:                normal;
32
    font-size:                  85%;
33
    font-family:                Arial, Helvetica, sans-serif;
34
    text-decoration:            none;
35
  }
36
37
body>div img {
38
    padding:                    0px 0px 0px 0px;
39
    }
40
41
#header {
42
    margin:                     0px 0px 0px 0px; /* T R B L */
43
    padding:                    0px;
44
    border:                     0px;
45 3780 daigle
    background-image:           url('images/data_catalog_header_bg.jpg');
46 3089 cjones
    background-position:        top left;     /* No NN4 */
47
    background-repeat:          repeat-x;     /* No NN4 */
48
    height:                     100px; /* begin hack for ie5win */
49
    width:                      100%;
50
    voice-family:               "\"}\"";
51
    voice-family:               inherit;
52
    height:                     78px;
53
    width:                      100%;
54
    }
55
56
html>body #header {
57
    width:                      100%;
58
    height:                     78px; /* end hack for ie5win */
59
    }
60
61
#left_logo {
62
    position:                   absolute;
63
    top:                        0px;
64
    left:                       0px; /* we want the logo on the left */
65
    margin:                     0px 0px 0px 0px; /* T R B L */
66
    padding:                    0px;
67
    border:                     0px;
68 3780 daigle
    background-image:           url('images/data_catalog_logo.jpg');
69 3089 cjones
    background-position:        top left;     /* No NN4 */
70
    background-repeat:          no-repeat;         /* No NN4 */
71
    width:                      167px; /* begin hack for 1e5win */
72
    height:                     100px;
73
    voice-family:               "\"}\"";
74
    voice-family:               inherit;
75
    width:                      167px;
76
    height:                     78px;
77
    }
78
79
html>body #left_logo {
80
    width:                      167px;
81
    height:                     78px; /* end hack for ie5win */
82
    }
83
84
#right_logo {
85
    position:                   absolute;
86
    top:                        0px;
87
    right:                      0px; /* we want the logo near the right */
88
    margin:                     0px 0px 0px 0px; /* T R B L */
89
    padding:                    0px;
90
    border:                     0px;
91 3780 daigle
    background-image:           url('images/data_catalog_header_corner.jpg');
92 3089 cjones
    background-position:        top right;     /* No NN4 */
93
    background-repeat:          no-repeat;         /* No NN4 */
94
    height:                     100px; /* begin hack for 1e5win */
95
    width:                      78px;
96
    voice-family:               "\"}\"";
97
    voice-family:               inherit;
98
    height:                     78px;
99
    width:                      78px;
100
    }
101
102
html>body #right_logo {
103
    width:                      78px;
104
    height:                     78px; /* end hack for ie5win */
105
    }
106
107
#banner {
108
    margin:                     0px 0px 0px 167px; /* T R B L */
109
    padding:                    0px;
110
    border:                     0px;
111 3780 daigle
    background-image:           url('images/data_catalog_header_search.jpg');
112 3089 cjones
    background-position:        top left;     /* No NN4 */
113
    background-repeat:          no-repeat;         /* No NN4 */
114
    height:                     100px; /* begin hack for 1e5win */
115
    width:                      400px;
116
    voice-family:               "\"}\"";
117
    voice-family:               inherit;
118
    height:                     78px;
119
    width:                      393px;
120
    }
121
122
html>body #banner {
123
    height:                     78px; /* end hack for ie5win */
124
    width:                      393px;
125
    }
126
127
#left_sidebar {
128
    position:                   absolute;
129
    top:                        78px;
130
    left:                       0px;
131
    margin:                     0px;
132
    padding:                    0px;
133
    border:                     0px;
134
    width:                      180px; /* begin hack for 1e5win */
135
    voice-family:               "\"}\"";
136
    voice-family:               inherit;
137
    width:                      167px;
138
    }
139
140
html>body #left_sidebar {
141
    width:                      167px; /* end hack for ie5win */
142
    }
143
144
#right_sidebar {
145
    position:                   absolute;
146
    top:                        78px;
147
    right:                      0px;
148
    margin:                     0px;
149
    padding:                    0px;
150
    border:                     0px;
151
    width:                      180px; /* begin hack for 1e5win */
152
    voice-family:               "\"}\"";
153
    voice-family:               inherit;
154
    width:                      0px;
155
    }
156
157
html>body #right_sidebar {
158
    width:                      0px; /* end hack for ie5win */
159
    }
160
161
#content {
162
    border:                     0px;
163
    margin:                     20px 20px 0px 187px;
164
    }
165
166
#loginbox {
167
    border:                     0px;
168
    position:                   absolute;
169
    top:                        55px;
170
    right:                      65px;
171
    }
172
173
#footer {
174
    position:                   absolute;
175
    right:                      10px;
176
    bottom:                     0;
177
    left:                       167px;
178
    margin:                     0px 10px 10px 177px;
179
    }
180
181
#debug {
182
    position:                   absolute;
183
    right:                      20px;
184
    bottom:                     0;
185
    left:                       167px;
186
    margin:                     0px 10px 10px 177px;
187
    }
188
189
p,ul,ol,dl,li,dt {
190
    color:                      #006699;
191
    font-style:                 normal;
192
    font-weight:                normal;
193
    font-family:                Arial, Helvetica, sans-serif;
194
    text-decoration:            none;
195
  }
196
197
p ol,p ul, p dl, ol ul {
198
    color:                      #006699;
199
    font-style:                 normal;
200
    font-weight:                normal;
201
    font-family:                Arial, Helvetica, sans-serif;
202
    text-decoration:            none;
203
  }
204
205
ul,ol {
206
    padding:                    0px;
207
    margin:                     0px 0px 0px 15px;
208
    }
209
210
div {
211
    color:                      #006699;
212
    font-style:                 normal;
213
    font-weight:                normal;
214
    font-family:                Arial, Helvetica, sans-serif;
215
    text-decoration:            none;
216
  }
217
218
219
/* NN 4.xx needs the font weight reset for b and strong tags */
220
strong, b {
221
    font-weight:                800;
222
  }
223
224
/* to emphasize words, use it inline with a <span> class*/
225
big {
226
    font-size:                  larger;
227
  }
228
229
/* to shrink words, use it inline with a <span> class*/
230
small {
231
    font-size:                  smaller;
232
  }
233
234
/* for pre-formated text: adds a small padding around it
235
 * font is set to the default style,
236
 * but could be changed for different effect
237
 */
238
pre {
239
    color:                      #006699;
240
    padding:                    10px;
241
    font-style:                 normal;
242
    font-weight:                normal;
243
    font-family:                Arial, Helvetica, sans-serif;
244
    text-decoration:            none;
245
  }
246
247
/* for creating block quotes.
248
 * set off with a slight indent to the left & right margins
249
 * font is set to default style,
250
 * but could be changed for different effect
251
 */
252
blockquote {
253
    color:                      #006699;
254
    padding:                    0;
255
    font-style:                 normal;
256
    font-weight:                normal;
257
    font-family:                Arial, Helvetica, sans-serif;
258
    text-decoration:            none;
259
  }
260
261
/* Headings Tags :
262
 * Headings are used to break up straight text.
263
 * They are used to present topics, or subsections, chapters, etc.
264
 * There are 6 headings tag which can be styled as we wish.
265
 * All of our headings will be rendered in the same font and color as the
266
 * default settings.
267
 */
268
269
/* h1: very large font, set bold */
270
h1 {
271
    color:                      #006699;
272
    padding:                    0;
273
    font-size:                  200%;
274
    font-style:                 normal;
275
    font-weight:                bold;
276
    font-family:                Arial, Helvetica, sans-serif;
277
    text-decoration:            none;
278
  }
279
280
/* large font, set bold */
281
h2 {
282
    color:                      #006699;
283
    padding:                    0;
284
    font-size:                  150%;
285
    font-style:                 normal;
286
    font-weight:                bold;
287
    font-family:                Arial, Helvetica, sans-serif;
288
    text-decoration:            none;
289
  }
290
291
/* slightly larger font, set bold
292
h3 {
293
    color:                      #006699;
294
    padding:                    0;
295
    font-size:                  120%;
296
    font-style:                 normal;
297
    font-weight:                400;
298
    font-family:                Arial, Helvetica, sans-serif;
299
    text-decoration:            none;
300
  }
301
*/
302
303
/* Style headings */
304
h3 {
305
  border-bottom:                #94c1d4 solid 1px;
306
  color:                        #006699;
307
  padding:                      0;
308
  margin:                       3px;
309
  text-align:                   left;
310
  font-style:                   italic;
311
  font-weight:                  200;
312
  }
313
314
/* same size font as default, no bold */
315
h4 {
316
    color:                      #006699;
317
    padding:                    0;
318
    font-style:                 normal;
319
    font-weight:                700;
320
    font-family:                Arial, Helvetica, sans-serif;
321
    text-decoration:            none;
322
  }
323
324
/* slightly smaller font */
325
h5 {
326
    color:                      #006699;
327
    padding:                    0;
328
    font-size:                  90%;
329
    font-style:                 normal;
330
    font-weight:                700;
331
    font-family:                Arial, Helvetica, sans-serif;
332
    text-decoration:            none;
333
  }
334
335
/* very small font */
336
h6 {
337
    color:                      #006699;
338
    background-color:           #FFFFFF;
339
    padding:                    0;
340
    font-size:                  50%;
341
    font-style:                 normal;
342
    font-weight:                normal;
343
    font-family:                Arial, Helvetica, sans-serif;
344
    text-decoration:            none;
345
  }
346
347
/* Old style hr command - will be depreciated
348
 * Netscape 4.x does not like this
349
 * should use new style below
350
 */
351
hr {
352
    border-top:                 #006699 0px solid;
353
    width:                      450px;
354
    height:                     2px;
355
    color:                      #006699;
356
    background-color:           #006699;
357
    /*border-width:               none;
358
    border-color:               #006699; */
359
  }
360
361
/* New horizontal rule. Netscape 4.x should render this fine.
362
 * apply this class to a <div> tag for the desired effect.
363
 * the rule is 1px wide, blue with a slight margin on the left and right.
364
 */
365
.rule {
366
    border-top-width:           2px;
367
    border-top-style:           solid;
368
    border-color:               #006699;
369
    margin:                     4px 4px
370
  }
371
372
/* check all link properties
373
 * make links orange
374
 * without decorations (underlines, etc)
375
 * and same size relative to parent
376
*/
377
a:link {
378
    color:                      #CC6633;
379
    text-decoration:            none;
380
  }
381
a:visited {
382
    color:                      #CC6633;
383
    text-decoration:            none;
384
  }
385
a:hover {
386
    color:                      #CC6633;
387
    text-decoration:            underline;
388
  }
389
a:active {
390
    color:                      #CC6633;
391
    text-decoration:            underline;
392
  }
393
394
/* image styles */
395
/* no padding or border around images by default */
396
img {
397
    border:                     0px;
398
    border-style:               none;
399
    border-width:               0px;
400
    padding:                    0px;
401
    text-decoration:            none;
402
  }
403
404
/* this class is needed to remove some extra space along the top of images
405
 * this attribute can not be put into default img class because it prevents
406
 * text from wrapping correctly
407
 */
408
img.vtop {
409
    vertical-align:             top;
410
  }
411
412
/* Add a blue border around an image */
413
414
img.border {
415
    border:                     medium;
416
    border-style:               solid;
417
    border-color:               #006699;
418
    padding:                    0px;
419
  }
420
421
/* Format the headshot images in the who section */
422
423
img.headshot {
424
    margin-right:               20px;
425
    margin-bottom:              40px;
426
  }
427
428
/* Format the headshot images in the who section
429
 * that have alot of text aligned to the right */
430
img.headshot_long {
431
    margin-right:               20px;
432
    margin-bottom:              80px;
433
  }
434
435
/* Format inline images justified to the left in the text*/
436
437
img.inlineleft {
438
    border:                     medium;
439
    border-style:               solid;
440
    border-color:               #006699;
441
    margin-right:               8px;
442
    margin-top:                 8px;
443
    margin-bottom:              8px;
444
  }
445
446
/* Format inline images justified to the right in the text*/
447
448
img.inlineright {
449
    border:                     medium;
450
    border-style:               solid;
451
    border-color:               #006699;
452
    margin-left:                8px;
453
    margin-top:                 8px;
454
    margin-bottom:              8px;
455
  }
456
457
/* Default behavior for linked images
458
 * no border, no padding, aligned to the top
459
 */
460
461
a img {
462
    border:                     0px;
463
    border-style:               none;
464
    border-width:               0px;
465
    padding:                    0px;
466
    vertical-align:             top;
467
    text-decoration:            none;
468
  }
469
470
/* Default for table cells.
471
 * No border or padding.
472
 * Keep the relative font size and set color to blue
473
 */
474
475
 td {
476
    color:                      #006699;
477
    font-style:                 normal;
478
    font-weight:                normal;
479
    font-family:                Arial, Helvetica, sans-serif;
480
    text-decoration:            none;
481
    border:                     0px;
482
    padding:                    0px;
483
    vertical-align:             top;
484
  }
485
486
/* Classes for the footer area */
487
488
/* Basic footer class to get the correct font size
489
 * default footer style.
490
 * colors are the same, but font size is smaller
491
 */
492
.footer {
493
    color:                      #006699;
494
    background-color:           #FFFFFF;
495
    margin-top:                 20px;
496
    margin-bottom:              20px;
497
    margin-left:                5px;
498
    margin-right:               0px;
499
    font-size:                  75%;      /* No EM in NN4 */
500
    font-style:                 normal;
501
    font-weight:                normal;
502
    font-family:                Arial, Helvetica, sans-serif;
503
    text-decoration:            none;
504
    text-align:                 center;
505
  }
506
/* extra class to handle the small table in the footer */
507
.tblfooter {
508
    color:                      #006699;
509
    background-color:           #FFFFFF;
510
    font-size:                  75%;      /* No EM in NN4 */
511
    font-style:                 normal;
512
    font-weight:                normal;
513
    font-family:                Arial, Helvetica, sans-serif;
514
    text-decoration:            none;
515
  }
516
517
/* Classes for positioning: use with div tags for desired effect */
518
.indent1 {
519
    white-space:                nowrap;
520
    padding-left:               10px;
521
}
522
523
.indent2 {
524
    padding-left:               15px;
525
}
526
527
.indent3 {
528
    padding-left:               50px;
529
}
530
531
/* Classes for the <em> tag (emphasis) */
532
.italic {
533
    font-style:                 italic;
534
    font-weight:                normal;
535
  }
536
537
.italics {
538
    font-style:                 italic;
539
    font-weight:                normal;
540
  }
541
542
.bold {
543
    font-style:                 normal;
544
    font-weight:                bold;
545
  }
546
547
.waybold {
548
    font-style:                 italic;
549
    font-weight:                bolder;
550
  }
551
552
/* Additions for the data catalog pages */
553
554
/* Define a border for groups of elements.  This uses the
555
   -moz-border-radius (Mozilla, Netscape, Opera only)
556
   attribute for the time being.  Once
557
   browsers support the CSS3 border-radius attribute, this
558
   should be switched.*/
559
.group {
560
    padding:                    0;
561
    color:                      #006699;
562
    min-width:                  800px;
563
    voice-family:               "\"}\""; /* begin ie5win hack */
564
    voice-family:               inherit;
565
    -moz-border-radius:         10px; /* end ie5win hack */
566
    }
567
/* Children of the group get some padding */
568
.group * {
569
    padding:                    2px;
570
    }
571
572
.group_border {
573
    /* orange-ish border */
574
    border:                     #cc9900 solid 1px;
575
    }
576
577
.subGroup {
578
    padding:                    3px;
579
    color:                      #006699;
580
    voice-family:               "\"}\""; /* begin ie5win hack */
581
    voice-family:               inherit;
582
    -moz-border-radius:         10px; /* end ie5win hack */
583
    }
584
585
.subGroup_border {
586
    /* blue-ish border */
587
    border:                     #94c1d4 solid 1px;
588
    }
589
590
/* This selector causes the 'section' tables to indent under the overarching div
591
 * tags */
592
div>table.subGroup {
593
    padding-left:               15px;
594
    padding-right:              15px;
595
    }
596
597
div.left {
598
    position:                   absolute;
599
    left:                       20px;
600
    clear:                      right;
601
    }
602
603
div.right {
604
    position:                   absolute;
605
    right:                      20px;
606
    clear:                      left;
607
    }
608
609
table.left {
610
    position:                   absolute;
611
    left:                       20px;
612
    }
613
614
table.right {
615
    float:                      right;
616
    margin-right:               10px;
617
    clear:                      left;
618
    }
619
620
th {
621
    border-bottom:              #94c1d4 solid 1px;
622
    color:                      #94c1d4;
623
    padding:                    0;
624
    margin:                     0;
625
    text-align:                 left;
626
    font-style:                 italic;
627
    font-weight:                700;
628
}
629
630
th.rowheader {
631
    background:                 #e5f5fd;
632
    border-right:               #94c1d4 solid 1px;
633
    }
634
635
.rowodd {
636
    border-bottom:              #94c1d4 dotted 1px;
637
    border-top:                 #94c1d4 dotted 1px;
638
    background-color:           #e5f5fd;
639
    padding:                    0;
640
    margin:                     0;
641
}
642
643
.roweven {
644
    padding:                    0;
645
    margin:                     0;
646
}
647
648
.coleven {
649
    border-left:                #94c1d4 dotted 1px;
650
    border-right:               #94c1d4 dotted 1px;
651
    background-color:           #e5f5fd;
652
    padding-left:               2px;
653
    padding-right:              2px;
654
    text-align: left;
655
}
656
657
.colodd {
658
    padding-left:               2px;
659
    padding-right:              2px;
660
    text-align:                 left;
661
}
662
663
.innercolodd {
664
    border:                     solid #94c1d4 1px;
665
    font-size:                  .75em;
666
    padding-left:               2px;
667
    padding-right:              2px;
668
    text-align:                 left;
669
}
670
671
.innercoleven {
672
    border:                     solid #94c1d4 1px;
673
    background-color:           #e5f5fd;
674
    font-size:                  .75em;
675
    padding-left:               2px;
676
    padding-right:              2px;
677
    text-align:                 left;
678
}
679
680
.onehundred_percent {
681
    width:                      100%;
682
    }
683
684
.seventyfive_percent {
685
    width:                      75%;
686
    }
687
688
.fifty_percent {
689
    width:                      50%;
690
    }
691
692
.fortyfive_percent {
693
    width:                      45%;
694
    }
695
696
.forty_percent {
697
    width:                      40%;
698
    }
699
700
.twentyfive_percent {
701
    width:                      25%;
702
    }
703
704
.fifteen_percent {
705
    width:                      15%;
706
    }
707
708
input, select, textarea {
709
    color:                      #006699;
710
    border:                     1px solid #94c1d4;
711
    margin:                     5px;
712
    }
713
714
input.submit {
715
    margin-left:                5px;
716
    border:                     #94c1d4 dotted 1px;
717
    background-color:           #e5f5fd;
718
    font-size:                  85%;
719
    }
720
721
label {
722
    text-align:                 right;
723
    vertical-align:             middle;
724
    color:                      #94c1d4;
725
    }
726
727
.login {
728
    font-size:                  85%;
729
    width:                      6em;
730
    }