Project

General

Profile

1 5564 leinfelder
/*   '$RCSfile: pisco.css,v $'                                              */
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 5385 leinfelder
17
18 5564 leinfelder
/* Color Scheme:
19
 *    dark blue:                  #003366
20
 *    aqua blue:                  #0066CC
21
 *    aqua green:                 #006666
22
 *    white:                      #FFFFFF
23
 *    dark tan(kelp color):       #666600
24
 *    light tan:                  #CCCC99
25
 */
26 5385 leinfelder
27
28 5564 leinfelder
/*
29
*  import eml css:
30
*/
31 5385 leinfelder
32 5564 leinfelder
body {
33
    width:                   100%;
34
    min-width:			800px;
35
    /* width:expression(document.body.clientWidth < 800? "800px": "auto");  */ /* hack for ie min width */
36 5385 leinfelder
37 5569 leinfelder
    margin:                     0px 0px 0px 0px;
38 5564 leinfelder
    background-color:           #ffffff;
39
    padding:                    0px;
40
    border:                     0px;
41
/*  background-image:           url('images/bg.gif');
42
/*  background-position:        top left;     /* No NN4 */
43
/*  background-repeat:          repeat-y;     /* No NN4 */
44 5385 leinfelder
45 5564 leinfelder
    font-style:                 normal;
46
    font-weight:                normal;
47
    font-size:                  100%;
48 5581 leinfelder
    font-family:                "Myriad Pro", "Myriad Web Pro", "Myriad Web", "Myriad", Verdana, Arial, Helvetica, sans-serif;
49 5564 leinfelder
    text-decoration:            none;
50
  }
51 5385 leinfelder
52 5564 leinfelder
body>div img {
53
    padding:                    0px 0px 0px 0px;
54
    }
55 5385 leinfelder
56
57 5569 leinfelder
#content_wrapper {
58
	margin:                     0px 10px 10px 10px;
59
}
60 5385 leinfelder
61
62 5564 leinfelder
#header {
63
  width:                        100%;
64
  min-width:			800px;
65
  width:expression(document.documentElement.clientWidth < 800? "800px": "auto");   /* hack for ie min width */
66
   /* position:                   absolute;
67
    top:                        0px;
68
    left:                       10px;
69
    right:                      10px; */
70
/*  margin:                     0px 10px 0px 10px; /* T R B L */
71
    padding:                    0px;
72
    border:                     0px;
73
    background-color:           #ffffff;
74
/*  background-image:           url('images/data_catalog_header_bg.jpg'); */
75 5385 leinfelder
76 5564 leinfelder
    height:                     60px; /* begin hack for ie5win */
77
    width:                      100%;
78
    voice-family:               "\"}\"";
79
    voice-family:               inherit;
80
    height:                     60px;
81
    }
82 5385 leinfelder
83 5564 leinfelder
html>body #header {
84
    height:                     60px;
85
    width:                      auto;
86
    min-width:                  800px; /* end hack for ie5win */
87
    }
88 5385 leinfelder
89
90 5564 leinfelder
/* div "content" should be sibling to div "header" */
91
/* top margin required to clear sibling (logo is 100px tall)*/
92 5385 leinfelder
93 5564 leinfelder
#content {
94
    margin:                     105px 0px 0px 0px ;
95
    background-color:           #ffffff;
96
    border:                     0px;
97
    /* margin:                     0px 0px 0px 0px;
98
 */
99
    }
100 5385 leinfelder
101 5564 leinfelder
102
103
/* these elements positioned to be in header below */
104
105
#left_logo {
106
    position:                   absolute;
107
    top:                        5px;
108
    z-index:                    2;  /* stack on top of header menu */
109
    left:                       10px; /* we want the logo on the left */
110
    margin:                     0px 0px 0px 0px; /* T R B L */
111
    padding:                    0px;
112
    border:                     0px;
113
    background-image:           url('images/sbclter-logo.gif');
114
    background-position:        top left;     /* No NN4 */
115
    background-repeat:          no-repeat;         /* No NN4 */
116
    width:                      99px; /* begin hack for 1e5win */
117
    height:                     100px;
118
    voice-family:               "\"}\"";
119
    voice-family:               inherit;
120
    width:                      99px;
121
    height:                     100px;
122
    }
123
124
html>body #left_logo {
125
    width:                      99px;
126
    height:                     100px; /* end hack for ie5win */
127
    }
128
129
#right_logo {
130
    position:                   absolute;
131
    top:                        0px;
132
    right:                      10px; /* we want the logo near the right */
133
    margin:                     0px 0px 0px 0px; /* T R B L */
134
    padding:                    0px;
135
    border:                     0px;
136
    background-image:           url('images/sbclter-coastal-header.jpg');
137
    background-position:        top right;     /* No NN4 */
138
    background-repeat:          no-repeat;         /* No NN4 */
139
    height:                     60px; /* begin hack for 1e5win */
140
    width:                      223px;
141
    voice-family:               "\"}\"";
142
    voice-family:               inherit;
143
    height:                     60px;
144
    width:                      223px;
145
    }
146
147
html>body #right_logo {
148
    width:                      223px;
149
    height:                     60px; /* end hack for ie5win */
150
    }
151
152
/* banner holds the title and subtitle */
153
#banner {
154
    margin:                     0px 0px 0px 110px; /* T R B L */
155
    padding:                    0px;
156
    border:                     0px;
157
    background-color:           #ffffff;
158
/*  background-image:           url('images/data_catalog_header_search.jpg') */
159
    background-position:        top left;     /* No NN4 */
160
    background-repeat:          no-repeat;         /* No NN4 */
161
/*  height:                     60px; /* begin hack for ie5win */
162
    voice-family:               "\"}\"";
163
    voice-family:               inherit;
164
/*  height:                     60px;
165 5385 leinfelder
 */
166 5564 leinfelder
    }
167 5385 leinfelder
168 5564 leinfelder
html>body #banner {
169
/*  height:                     60px; /* end hack for ie5win */
170
    }
171
172
173
174
/* Header Sub-Title Classes
175
 * title and subtitle in the left portion of the banner */
176
177
div.header-title {
178
    position:           absolute;
179
    top:                5px;
180
    left:               110px;
181
    color:              #003366;
182
/*  padding:            1px 4px 1px 100px;
183
 */
184
    font-size:          26px;
185
    font-family:        serif;
186
    font-style:         normal;
187
    font-weight:        800;
188 5385 leinfelder
}
189 5564 leinfelder
190
191
div.header-subtitle {
192
    position:           absolute;
193
    top:                40px;
194
    left:               115px;
195
    color:              #006666;
196
/*  padding:            1px 4px 1px 110px; */
197
    font-size:          12px;
198 5385 leinfelder
}
199 5564 leinfelder
200
div.header-menu {
201
    position:           absolute;
202
    top:                60px;
203
    width:              100%;
204
    z-index:            1;       /* put menu underneath logos */
205
    border-top:         1px solid #006666;
206
    border-bottom:      1px solid #006666;
207
    color:              #666600;
208
    background-color:   #CCCC99;
209
    padding:            2px 2px 2px 110px;
210
    font-size:          14px;
211
}
212
213
214
215
216
/* header doesnt currently accomodate this class  */
217
div.header-submenu {
218
    color:              #003366;
219
    background-color:   #FFFFFF;
220
    padding:            2px 10px 2px 110px;
221
    font-size:          14px;
222
}
223
224
225
226
227
#left_sidebar {
228
    position:                   absolute;
229
    top:                        0px;
230
    left:                       0px;
231
    margin:                     0px;
232
    padding:                    0px;
233
    border:                     0px;
234
    background-color:           #003366;
235
    width:                      10px; /* begin hack for 1e5win */
236
    voice-family:               "\"}\"";
237
    voice-family:               inherit;
238
    width:                      10px;
239
    }
240
241
html>body #left_sidebar {
242
    width:                      10px; /* end hack for ie5win */
243
    }
244
245
#right_sidebar {
246
    position:                   absolute;
247
    top:                        0px;
248
    right:                      0px;
249
    margin:                     0px;
250
    padding:                    0px;
251
    border:                     0px;
252
    background-color:           #003366;
253
    width:                      10px; /* begin hack for 1e5win */
254
    voice-family:               "\"}\"";
255
    voice-family:               inherit;
256
    width:                      10px;
257
    }
258
259
html>body #right_sidebar {
260
    width:                      10px; /* end hack for ie5win */
261
    }
262
263
264
265
266
267
268
269
270
271
272
273
274
/* these classes to be children of div "content" */
275
276
277
/* for the skip-to box */
278
279
 div.skipto-box {
280
      vertical-align:	  middle;
281
      text-align:         center;
282
      color:              #003366;
283
      background-color:   #CCCC99;
284
      /* turned off float, placed with a table cell */
285
      /*float:              left; */
286
      padding:            6px;
287
      /* set border for NN4 only change in advanced.css */
288
      border:             0.1px solid #006666;
289
      margin:             8px;
290
      /* width: 		  50%; */
291
      width:              300px;
292
     /* height:             20px; */
293
      font-size:          12px;
294
  }
295
296
div.r-box {
297
      vertical-align:     middle;
298
      text-align:         center;
299
      color:              #003366;
300
      background-color:   #CCCC99;
301
      float:              right;
302
      padding:            6px 6px;
303
      /* set border for NN4 only change in advanced.css */
304
      border:             0.1px solid #006666;
305
      margin:             0px;
306
      width:              50%;
307
   /*   height:             auto; */
308
      font-size:          12px;
309
   /*   clear:              both; */
310
  }
311
312
313
div.content-area {
314
       /* for padding area within parent area */
315
    background-color:   #FFFFFF;
316
    color:              #003366;
317
    text-align:         left;
318
   padding:            30px 40px 15px 40px;
319
   /*padding:            0px 0px 0px 0px; */
320
321 5385 leinfelder
}
322
323 5564 leinfelder
div.content-area-dense {
324
       /* for padding area within parent area */
325
    background-color:   #FFFFFF;
326
    color:              #003366;
327
    text-align:         left;
328
  /*  padding:            30px 40px 15px 40px; */
329
   padding:            0px 0px 0px 0px;
330
331 5385 leinfelder
}
332
333 5564 leinfelder
334
335
div.hanging-paragraph {
336
	margin-left:	20px;
337
	text-indent:	-20px;
338
339 5385 leinfelder
}
340
341 5564 leinfelder
div.smaller-font {
342
    	font-size:		smaller;
343 5385 leinfelder
}
344
345 5564 leinfelder
div.bottom-padding {
346
/*	padding:		0px 0px 10px 0px; */
347
	padding-bottom:		10px;
348 5385 leinfelder
}
349
350 5564 leinfelder
div.left-padding {
351
	padding-left:		10px;
352 5385 leinfelder
}
353
354 5564 leinfelder
#search-box {
355
  /* background and text style set by table .group */
356
  position:           relative;
357
  margin-left:        50%;
358
  /* top: 110px; */
359
 }
360
361
362
#search-box_right {
363
    text-align:     right;
364
    }
365
366
#loginbox {
367
    border:                     0px;
368
    position:                   absolute;
369
    top:                        55px;
370
    right:                      65px;
371
    }
372
373
#footer {
374
    position:                   absolute;
375
    right:                      10px;
376
    bottom:                     0;
377
    left:                       167px;
378
    margin:                     0px 10px 10px 177px;
379
    }
380
381
#debug {
382
    position:                   absolute;
383
    right:                      20px;
384
    bottom:                     0;
385
    left:                       167px;
386
    margin:                     0px 10px 10px 177px;
387
    }
388
389
p,ul,ol,dl,li,dt {
390 5583 leinfelder
    color:                      #555555;
391 5564 leinfelder
    font-style:                 normal;
392
    font-weight:                normal;
393
    text-decoration:            none;
394
  }
395
396
p ol,p ul, p dl, ol ul {
397 5583 leinfelder
    color:                      #555555;
398 5564 leinfelder
    font-style:                 normal;
399
    font-weight:                normal;
400
    text-decoration:            none;
401
  }
402
403
ul,ol {
404
    padding:                    0px;
405
    /* margin:                     0px 0px 0px 15px; */
406
    }
407
408
409
410
.ol-lower-alpha {
411
    list-style-type: lower-alpha;
412
    margin-top:       2px;
413
414
  }
415
416
417
.ul-bulleted-list {
418
    list-style-type:  disc;
419
    margin-top:       2px;
420
    margin-bottom:    10px;
421
    margin-left:      15px;
422
  }
423
424
/* add a little space before items in a list ?*/
425
/* ol li { margin-top : 5px; } */
426
/* ul li { margin-top : 5px; } */
427
428
429
430
431
div {
432
    color:                      #003366;
433
    font-style:                 normal;
434
    font-weight:                normal;
435
    text-decoration:            none;
436
  }
437
438
439
/* NN 4.xx needs the font weight reset for b and strong tags */
440
strong, b {
441
    font-weight:                800;
442
  }
443
444
/* to emphasize words, use it inline with a <span> class*/
445
big {
446
    font-size:                  larger;
447
  }
448
449
/* to shrink words, use it inline with a <span> class*/
450
small {
451
    font-size:                  smaller;
452
  }
453
454
/* for pre-formated text: adds a small padding around it
455
 * font is set to the default style,
456
 * but could be changed for different effect
457
 */
458
pre {
459
    color:                      #003366;
460
    padding:                    10px;
461
    font-style:                 normal;
462
    font-weight:                normal;
463
    text-decoration:            none;
464
  }
465
466
/* for creating block quotes.
467
 * set off with a slight indent to the left & right margins
468
 * font is set to default style,
469
 * but could be changed for different effect
470
 */
471
blockquote {
472
    color:                      #003366;
473
    padding:                    0;
474
    font-style:                 normal;
475
    font-weight:                normal;
476
    text-decoration:            none;
477
  }
478
479
/* Headings Tags :
480
 * Headings are used to break up straight text.
481
 * They are used to present topics, or subsections, chapters, etc.
482
 * There are 6 headings tag which can be styled as we wish.
483
 * All of our headings will be rendered in the same font and color as the
484
 * default settings.
485
 */
486
487
/* h1: very large font, set bold */
488
h1 {
489
    color:                      #003366;
490
    background-color:           #ffffff;
491
    padding:                    0;
492 5575 leinfelder
    font-size:                  18pt;
493 5564 leinfelder
    font-style:                 normal;
494
    font-weight:                bold;
495
    text-decoration:            none;
496
  }
497
498
/* large font, set bold */
499
h2 {
500
    color:                      #003366;
501
    background-color:           #ffffff;
502
    padding:                    0;
503 5575 leinfelder
    font-size:                  16pt;
504 5564 leinfelder
    font-style:                 normal;
505
    font-weight:                bold;
506
    text-decoration:            none;
507
  }
508
509
/* slightly larger font, set bold */
510 5385 leinfelder
h3 {
511 5564 leinfelder
    color:                      #003366;
512
    background-color:           #ffffff;
513
    padding:                    0;
514 5575 leinfelder
    font-size:                  14pt;
515 5564 leinfelder
    font-style:                 normal;
516
    font-weight:                700;
517
    text-decoration:            none;
518
   /*  margin-bottom:                 0px; */
519
  }
520 5385 leinfelder
521
522 5564 leinfelder
/* an italic header w border */
523
/*
524
h3 {
525
  border-bottom:                #94c1d4 solid 1px;
526
  color:                        #003366;
527
  padding:                      0;
528 5575 leinfelder
  font-size:                    14pt;
529 5564 leinfelder
  margin:                       3px;
530
  text-align:                   left;
531
  font-style:                   italic;
532
  font-weight:                  200;
533
  }
534
*/
535 5385 leinfelder
536
537
538 5564 leinfelder
/* slightly larger, no bold */
539
/* make margins around h4 all the same, and a little larger than h5 */
540
h4 {
541
    color:                      #003366;
542
    padding:                    0;
543 5575 leinfelder
    font-size:                  12pt;
544 5564 leinfelder
    font-style:                 normal;
545
    font-weight:                400;
546
    text-decoration:            none;
547
    margin-top:			10px;
548
    margin-bottom:                 0px;
549 5385 leinfelder
550 5564 leinfelder
  }
551 5385 leinfelder
552 5564 leinfelder
/* slightly smaller font */
553
/* moz-net-fox and ie have different default margins for h5 - make them uniform */
554
h5 {
555
    color:                      #003366;
556
    padding:                    0;
557 5575 leinfelder
    font-size:                  12pt;
558 5564 leinfelder
    font-style:                 normal;
559
    font-weight:                400;
560
    text-decoration:            none;
561
    margin-bottom:                 0px;
562
    margin-top:                 7px;
563 5385 leinfelder
564
565 5564 leinfelder
  }
566 5385 leinfelder
567 5564 leinfelder
/* very small font */
568
h6 {
569
    color:                      #003366;
570
    background-color:           #FFFFFF;
571
    padding:                    0;
572 5575 leinfelder
    font-size:                  10pt;
573 5564 leinfelder
    font-style:                 normal;
574
    font-weight:                normal;
575
    text-decoration:            none;
576
  }
577 5385 leinfelder
578
579
580 5564 leinfelder
/* Old style hr command - will be depreciated
581
 * Netscape 4.x does not like this
582
 * should use new style below
583
 * used anywhere? remove?
584
 */
585
hr {
586
    border-top:                 #003366 0px solid;
587
    width:                      450px;
588
    height:                     2px;
589
    color:                      #003366;
590
    background-color:           #003366;
591
    /*border-width:               none;
592
    border-color:               #003366; */
593
  }
594 5385 leinfelder
595 5564 leinfelder
/* New horizontal rule. Netscape 4.x should render this fine.
596
 * apply this class to a <div> tag for the desired effect.
597
 * the rule is 1px wide, blue with a slight margin on the left and right.
598
 */
599
.rule {
600
    border-top-width:           2px;
601
    border-top-style:           solid;
602
    border-color:               #003366;
603
    margin:                     4px 4px
604
  }
605
606
 /* Default link properties
607
 * currently set the links to the dark tan
608
 * with no additional decorations
609
 * except underline on hover
610
*/
611
a:link {
612 5571 leinfelder
    color:                      #333333;
613 5564 leinfelder
    background:                 transparent;
614
/*    background-color:           #FFFFFF; */
615
    text-decoration:            none;
616
  }
617
a:visited {
618 5571 leinfelder
    color:                      #333333;
619 5564 leinfelder
    background:                  transparent;
620
/*    background-color:           #FFFFFF; */
621
    text-decoration:            none;
622
  }
623
a:hover {
624 5571 leinfelder
    color:                      #000000;
625 5564 leinfelder
    background:                 transparent;
626
/*    background-color:           #FFFFFF; */
627
    text-decoration:            underline;
628
  }
629
a:active {
630 5571 leinfelder
    color:                      #333333;
631 5564 leinfelder
    background:                 transparent;
632
/*    background-color:           #FFFFFF; */
633
    text-decoration:            none;
634
  }
635 5385 leinfelder
636 5564 leinfelder
/* Menu Link properties
637
 * the Menu is currently identical to the dafault
638
 * but this may change so it is defined here
639
 */
640
a.menu:link {
641 5570 leinfelder
    color:                      #003366;
642 5564 leinfelder
    background:                 transparent;
643
    /*background-color:           #CCCC9A;*/
644
    text-decoration:            none;
645
  }
646
a.menu:visited {
647 5570 leinfelder
    color:                      #003366;
648 5564 leinfelder
    background:                 transparent;
649
    /*background-color:           #CCCC9A;*/
650
    text-decoration:            none;
651
  }
652
a.menu:hover {
653 5570 leinfelder
    color:                      #003366;
654 5564 leinfelder
    background:                 transparent;
655
   /* background-color:           #CCCC9A;*/
656
    text-decoration:            underline;
657
  }
658
a.menu:active {
659 5570 leinfelder
    color:                      #003366;
660 5564 leinfelder
    background:                 transparent;
661
   /* background-color:           #CCCC9A; */
662
    text-decoration:            none;
663
  }
664
665
/* SubMenu Link Properties
666
 * Set the color to dark tan with underline on hover
667
 */
668
a.submenu:link {
669 5570 leinfelder
    color:                      #003366;
670 5564 leinfelder
/*  color:                      #003366; */
671
    background:                 transparent;
672
    /*background-color:           #CCCC9A;*/
673
    text-decoration:            none;
674
  }
675
a.submenu:visited {
676 5570 leinfelder
    color:                      #003366;
677 5564 leinfelder
/*  color:                      #003366; */
678
    background:                 transparent;
679
    /*background-color:           #CCCC9A;*/
680
    text-decoration:            none;
681
  }
682
a.submenu:hover {
683 5570 leinfelder
    color:                      #003366;
684 5564 leinfelder
/*  color:                      #003366; */
685
    background:                 transparent;
686
   /* background-color:           #CCCC9A;*/
687
    text-decoration:            underline;
688
  }
689
a.submenu:active {
690 5570 leinfelder
    color:                      #003366;
691 5564 leinfelder
/*  color:                      #003366; */
692
    background:                 transparent;
693
   /* background-color:           #CCCC9A; */
694
    text-decoration:            none;
695
  }
696
697 5385 leinfelder
698 5564 leinfelder
/* image styles */
699
/* no padding or border around images by default */
700
img {
701
    border:                     0px;
702
    border-style:               none;
703
    border-width:               0px;
704
    padding:                    0px;
705
    text-decoration:            none;
706
  }
707 5385 leinfelder
708 5564 leinfelder
/* this class is needed to remove some extra space along the top of images
709
 * this attribute can not be put into default img class because it prevents
710
 * text from wrapping correctly
711
 */
712
img.vtop {
713
    vertical-align:             top;
714
  }
715 5385 leinfelder
716 5564 leinfelder
/* Add a blue border around an image */
717 5385 leinfelder
718 5564 leinfelder
img.border {
719
    border:                     medium;
720
    border-style:               solid;
721
    border-color:               #003366;
722
    padding:                    0px;
723
  }
724 5385 leinfelder
725 5564 leinfelder
/* Format the headshot images in the who section */
726 5385 leinfelder
727 5564 leinfelder
img.headshot {
728
    margin-right:               20px;
729
    margin-bottom:              40px;
730
  }
731 5385 leinfelder
732 5564 leinfelder
/* Format the headshot images in the who section
733
 * that have alot of text aligned to the right */
734
img.headshot_long {
735
    margin-right:               20px;
736
    margin-bottom:              80px;
737
  }
738
739
/* Format inline images justified to the left in the text*/
740 5385 leinfelder
741 5564 leinfelder
img.inlineleft {
742
    border:                     medium;
743
    border-style:               solid;
744
    border-color:               #003366;
745
    margin-right:               8px;
746
    margin-top:                 8px;
747
    margin-bottom:              8px;
748
  }
749 5385 leinfelder
750 5564 leinfelder
/* Format inline images justified to the right in the text*/
751 5385 leinfelder
752 5564 leinfelder
img.inlineright {
753
    border:                     medium;
754
    border-style:               solid;
755
    border-color:               #003366;
756
    margin-left:                8px;
757
    margin-top:                 8px;
758
    margin-bottom:              8px;
759
  }
760
761
/* Default behavior for linked images
762
 * no border, no padding, aligned to the top
763
 */
764 5385 leinfelder
765 5564 leinfelder
a img {
766
    border:                     0px;
767
    border-style:               none;
768
    border-width:               0px;
769
    padding:                    0px;
770
    vertical-align:             top;
771
    text-decoration:            none;
772
  }
773
774
/* Default for table cells.
775
 * No border or padding.
776
 * Keep the relative font size and set color to blue
777
 */
778
779
 td {
780
    color:                      #003366;
781
    font-style:                 normal;
782
    font-size:                  95%;
783
    font-weight:                normal;
784
    text-decoration:            none;
785
    border:                     0px;
786
    padding:                    0px;
787
    vertical-align:             top;
788
  }
789
790
/* Classes for the footer area */
791
792
/* Basic footer class to get the correct font size
793
 * default footer style.
794
 * colors are the same, but font size is smaller
795
 */
796
.footer {
797
    color:                      #003366;
798
    background-color:           #FFFFFF;
799
    margin-top:                 20px;
800
    margin-bottom:              20px;
801
    margin-left:                5px;
802
    margin-right:               0px;
803
    font-size:                  75%;      /* No EM in NN4 */
804
    font-style:                 normal;
805
    font-weight:                normal;
806
    text-decoration:            none;
807
    text-align:                 center;
808
  }
809
/* extra class to handle the small table in the footer */
810
.tblfooter {
811
    color:                      #003366;
812
    background-color:           #FFFFFF;
813
    font-size:                  75%;      /* No EM in NN4 */
814
    font-style:                 normal;
815
    font-weight:                normal;
816
    text-decoration:            none;
817
  }
818
819
/* Classes for positioning: use with div tags for desired effect */
820
.indent1 {
821
    white-space:                nowrap;
822
    padding-left:               10px;
823 5385 leinfelder
}
824
825 5564 leinfelder
.indent2 {
826
    padding-left:               15px;
827 5385 leinfelder
}
828
829 5564 leinfelder
.indent3 {
830
    padding-left:               50px;
831 5385 leinfelder
}
832
833 5564 leinfelder
/* Classes for the <em> tag (emphasis) */
834
.italic {
835
    font-style:                 italic;
836
    font-weight:                normal;
837
  }
838 5385 leinfelder
839 5564 leinfelder
.italics {
840
    font-style:                 italic;
841
    font-weight:                normal;
842
  }
843 5385 leinfelder
844 5564 leinfelder
.bold {
845
    font-style:                 normal;
846
    font-weight:                bold;
847
  }
848 5385 leinfelder
849 5564 leinfelder
.waybold {
850
    font-style:                 italic;
851
    font-weight:                bolder;
852
  }
853 5385 leinfelder
854 5564 leinfelder
/* Additions for the data catalog pages */
855 5385 leinfelder
856 5564 leinfelder
/* Define a border for groups of elements.  This uses the
857
   -moz-border-radius (Mozilla, Netscape, Opera only)
858
   attribute for the time being.  Once
859
   browsers support the CSS3 border-radius attribute, this
860
   should be switched.*/
861
.group {
862
    padding:                    0;
863
    color:                      #003366;
864
    min-width:                  800px;
865
    voice-family:               "\"}\""; /* begin ie5win hack */
866
    voice-family:               inherit;
867
    -moz-border-radius:         10px; /* end ie5win hack */
868
    }
869
/* Children of the group get some padding */
870
.group * {
871
    padding:                    2px;
872
    }
873
874
.group_border {
875
    /* aqua-green border */
876
    border:                     #006666 solid 1px;
877
    }
878 5385 leinfelder
879 5564 leinfelder
.subGroup {
880
    padding:                    3px;
881
    color:                      #003366;
882
    voice-family:               "\"}\""; /* begin ie5win hack */
883
    voice-family:               inherit;
884
    -moz-border-radius:         10px; /* end ie5win hack */
885
    }
886
887
.subGroup_border {
888
    /* blue-ish border */
889
    border:                     #94c1d4 solid 1px;
890
    }
891
892
/* This selector causes the 'section' tables to indent under the overarching div
893
 * tags */
894
div>table.subGroup {
895
    padding-left:               15px;
896
    padding-right:              15px;
897
    }
898
899
div.left {
900
    position:                   absolute;
901
    left:                       20px;
902
    clear:                      right;
903
    }
904
905
div.right {
906
    position:                   absolute;
907
    right:                      20px;
908
    clear:                      left;
909
    }
910
911
table.left {
912
    position:                   absolute;
913
    left:                       20px;
914
    }
915
916
table.right {
917
    float:                      right;
918
    margin-right:               10px;
919
    clear:                      left;
920
    }
921
922
th {
923
    border-bottom:              #006666 solid 1px;
924
    color:                      #003366;
925
    /* previously #94c1d4 */
926
    padding:                    0;
927
    margin:                     0;
928
    text-align:                 left;
929 5583 leinfelder
    font-style:                 normal;
930 5564 leinfelder
    font-weight:                700;
931
}
932
933
th.rowheader {
934 5571 leinfelder
    background:                 #f1f8f8;
935 5564 leinfelder
    border-right:               #94c1d4 solid 1px;
936
    }
937
938
.rowodd {
939
    border-bottom:              #94c1d4 dotted 1px;
940
    border-top:                 #94c1d4 dotted 1px;
941 5571 leinfelder
    background-color:           #f1f8f8;
942 5564 leinfelder
    padding:                    0;
943
    margin:                     0;
944
}
945
946
.roweven {
947
    padding:                    0;
948
    margin:                     0;
949
}
950
951 5385 leinfelder
.coleven {
952 5564 leinfelder
    border-left:                #94c1d4 dotted 1px;
953
    border-right:               #94c1d4 dotted 1px;
954 5571 leinfelder
    background-color:           #f1f8f8;
955 5564 leinfelder
    padding-left:               2px;
956
    padding-right:              2px;
957
    text-align: left;
958 5385 leinfelder
}
959
960
.colodd {
961 5564 leinfelder
    padding-left:               2px;
962
    padding-right:              2px;
963
    text-align:                 left;
964 5385 leinfelder
}
965 5564 leinfelder
966 5385 leinfelder
.innercolodd {
967 5564 leinfelder
    border:                     solid #94c1d4 1px;
968
    font-size:                  .75em;
969
    padding-left:               2px;
970
    padding-right:              2px;
971
    text-align:                 left;
972 5385 leinfelder
}
973
974
.innercoleven {
975 5564 leinfelder
    border:                     solid #94c1d4 1px;
976 5571 leinfelder
    background-color:           #f1f8f8;
977 5564 leinfelder
    font-size:                  .75em;
978
    padding-left:               2px;
979
    padding-right:              2px;
980
    text-align:                 left;
981 5385 leinfelder
}
982
983 5564 leinfelder
.onehundred_percent {
984
    width:                      100%;
985
    }
986
987
.eighty_percent {
988
    width:                      80%;
989
    }
990
991
992
.seventyfive_percent {
993
    width:                      75%;
994
    }
995
996
.seventy_percent {
997
    width:                      70%;
998
    }
999
1000
.fifty_percent {
1001
    width:                      50%;
1002
    }
1003
1004
.fortyfive_percent {
1005
    width:                      45%;
1006
    }
1007
1008
.forty_percent {
1009
    width:                      40%;
1010
    }
1011
1012
.twentyfive_percent {
1013
    width:                      25%;
1014
    }
1015
1016
1017
.twenty_percent {
1018
    width:                      20%;
1019
    }
1020
1021
1022
.fifteen_percent {
1023
    width:                      15%;
1024
    }
1025
1026
input, select, textarea {
1027
    color:                      #003366;
1028
    border:                     1px solid #94c1d4;
1029
    margin:                     5px;
1030
    }
1031
1032
input.submit {
1033
    margin-left:                5px;
1034
    border:                     #94c1d4 dotted 1px;
1035 5571 leinfelder
    background-color:           #f1f8f8;
1036 5564 leinfelder
    font-size:                  85%;
1037
    }
1038
1039
label {
1040
    text-align:                 right;
1041
    vertical-align:             middle;
1042
    color:                      #94c1d4;
1043
    }
1044
1045
.login {
1046
    font-size:                  85%;
1047
    width:                      6em;
1048
    }
1049
input.view.data-button{
1050
 /*  color:		#666600; */
1051
   font-size:		1.25em;
1052
 /*  font-weight:		bold; */
1053
   text-decoration:		underline;
1054
   background:		#ffffff;
1055
1056 5385 leinfelder
}
1057 5564 leinfelder
1058 5566 leinfelder
/***
1059
iframe classes
1060
****/
1061
.iframeheaderclass {
1062 5569 leinfelder
    height:   100px;
1063 5566 leinfelder
    width:    100%;
1064
    border:   0px;
1065 5574 leinfelder
    margin-bottom:   10px;
1066 5566 leinfelder
}
1067
1068
.iframesearchboxclass {
1069
    height:   340px;
1070
    width:    100%;
1071
    border:   0px;
1072
    margin:   0px;
1073
}
1074
1075
.iframeadvancedsearchboxclass {
1076
    height:   1250px;
1077
    width:    100%;
1078
    border:   0px;
1079
    margin:   0px;
1080
}
1081
1082
.iframemapclass {
1083
    height:   570px;
1084
    width:    100%;
1085
    border:   0px;
1086
    margin:   0px;
1087
}
1088
1089
.iframeloginboxclass {
1090
    height:   250px;
1091
    width:    100%;
1092
    border:   0px;
1093
    margin:   0px;
1094
}
1095
1096
.iframeleftcolclass  { /* not used */ }
1097
.iframerightcolclass { /* not used */ }
1098
.iframefooterclass   { /* not used */ }
1099
1100
/**
1101
 *  set the size and alignment etc of the top-level layout table
1102
 */
1103
.templatetableclass {
1104
    width:   100%;
1105
    border:   0px;
1106
    padding:  0px;
1107
    margin:   0px;
1108
}
1109
1110
/**
1111
 *  set the style of the main content area and its contents
1112
 */
1113
.templatecontentareaclass {
1114
    border:   0px;
1115
    padding:  0px;
1116
    margin:   0px;
1117
}
1118
1119
/**
1120
 *  set the correct <td> sizes to accomodate the
1121
 *  header, footer, left and right iframes.
1122
 *  NOTE: these styles apply only to each
1123
 *  container frame, *NOT* to the document in
1124
 *  the iframe within it!
1125
 */
1126
.templateheaderrowclass {
1127 5569 leinfelder
    height:   100px;
1128 5566 leinfelder
    /*
1129
      no width allowed - uses same width as table class
1130
    */
1131
    border:   0px;
1132
    padding:  0px;
1133
    margin:   0px;
1134
}
1135
1136
.templateleftcolclass {
1137
    height:   100%;
1138
    width:    0px;
1139
    border:   0px;
1140
    padding:  0px;
1141
    margin:   0px;
1142
}
1143
1144
.templaterightcolclass {
1145
    height:   100%;
1146
    width:    0px;
1147
    border:   0px;
1148
    padding:  0px;
1149
    margin:   0px;
1150
}
1151
1152
.templatefooterrowclass {
1153
    height:   0px;
1154
    /*
1155
      no width allowed - uses same width as
1156
      table class
1157
    */
1158
    border:   0px;
1159
    padding:  0px;
1160
    margin:   0px;
1161 5569 leinfelder
}
1162
1163
.banner {
1164
	background-image: url("./images/banner_background.jpg");
1165
	background-repeat: repeat-x;
1166 5576 leinfelder
}
1167
.sectionheader {
1168
	font-weight: bold;
1169 5566 leinfelder
}