Project

General

Profile

1
/*   '$RCSfile: basic-warm.css,v $'                                         */
2
/*     Purpose: Default style sheet for SBC LTER project web pages          */
3
/*              Using this stylesheet rather than placing styles directly   */
4
/*              into web documents allows us to globally change the         */
5
/*              formatting styles of the entire site in one easy place.     */
6
/*   Copyright: 2000 Regents of the University of California and the        */
7
/*              Santa Barbara Coastal Long-Term Ecological Network          */
8
/*     Authors: Wei-Yee Luan, Chris Jones, James Woods                      */
9
/*                                                                          */
10
/*    '$Author: jwoods $'                                                   */
11
/*      '$Date: 2003/05/14 00:23:30 $'                                      */
12
/*  '$Revision: 1.43 $'                                                      */
13
/*                                                                          */
14

    
15
/* Color Scheme:
16
 *    dark blue:                  #003366     
17
 *    aqua blue:                  #0066CC
18
 *    aqua green:                 #006666
19
 *    white:                      #FFFFFF
20
 *    dark tan(kelp color):       #666600
21
 *    light tan:                  #CCCC99
22
 */
23

    
24
/* Shorthand for margins: TRBL
25
 * Shorthand for padding: TRBL
26
 * Sharthand for border: size style color
27
 */
28

    
29
/* Set the default font family and size for all elements */
30
address, blockquote, body, caption, center, dd, dir, div, dl, dt, form, h1, h2,
31
h3, h4, h5, h6, menu, ol, p, table, td, th, ul {
32
    font-family:        Verdana, Arial, Helvetica, sans-serif;
33
    font-style:         normal;
34
    font-weight:        normal;
35
}
36

    
37
html {
38
    height:               100%;
39
}
40

    
41
body { 
42
    /* This is margin is for NN4 only - reset all to 0 in advanced.css*/
43
    margin:             -10px 0px 0px -10px;    
44
    height:             100%;
45
    background-color:   #003366;
46
    color:              #FFFFFF;
47
  }
48

    
49
/* the Main Logo Class 
50
 * it is the only object placed absolutely */
51
.header-logo {
52
    position:           absolute;
53
    top:                5px;
54
    left:               10px;
55
    background:         transparent;  /* for advanced only */     
56
    width:              auto;
57
}
58

    
59
/* The Spacing Classes 
60
 * creates the left and right margins for all objects 
61
 * wrap all objects in a div */
62
 
63
div.spacing {
64
    margin:             0px 10px;
65
    text-align:         center;
66
    /* IE6 bug : do not set vertical-align */
67
}
68

    
69
div.content-spacing {
70
    background-color:   #FFFFFF;
71
    color:              #003366;    
72
    margin:             0px 10px;
73
    /* vertical-align:     bottom;  IE 6 bug*/
74
    text-align:         center; 
75
/*    border:             1px solid purple;  turn on for debugging */ 
76
}
77

    
78
/* The default settings for a table */
79
table {
80
    width:              100%;
81
    height:             100%;
82
    margin:             0px;
83
    padding:            0px;
84
    color:              #003366;
85
    background-color:   #FFFFFF;
86
 /* border:             2px solid red;   turn on for debugging in advanced */
87
}
88

    
89
/* The default settings for a table cell */
90
td {
91
    margin:             0px;
92
    padding:            0px;
93
    color:              #003366;
94
    background-color:   #FFFFFF;
95
    text-align:         left;
96
    vertical-align:     middle;
97
 /* border:             1px solid red;   turn on for debugging */ 
98
}
99

    
100
/* Each Table Cell has a class associated with it to control style
101
 * and placement. The content of each cell should be wrapped
102
 * in a div class to control positioning */
103

    
104
/* Header Title Classes
105
 * The Main Title in the left portion of the header */
106
td.header-title {
107
    vertical-align:     middle;
108
    text-align:         left;
109
}
110

    
111
div.header-title {
112
    color:              #003366;
113
    background-color:   #FFFFFF;
114
    padding:            1px 4px 1px 100px;
115
    font-size:          26px;
116
    font-family:        serif;
117
    font-style:         normal;
118
    font-weight:        800;    
119
}
120

    
121
/* Header Sub-Title Classes
122
 * The subtitle in the left portion of the header */
123
td.header-subtitle {
124
    vertical-align:     middle;
125
    text-align:         left;
126
}
127

    
128
div.header-subtitle {
129
    color:              #006666;
130
    background-color:   #FFFFFF;
131
    padding:            1px 4px 1px 110px;
132
    font-size:          12px;
133
}
134

    
135
/* Header Image Classes
136
 * displays an image on the right portion of the header */
137
td.header-image {
138
    text-align:         right;
139
    vertical-align:     bottom;
140
    /*width:              223px;*/
141
}
142

    
143
img.header {
144
    text-align:         right;
145
    vertical-align:     bottom;
146
}
147

    
148
div.header-image {
149
    text-align:         right;
150
    vertical-align:     bottom;
151
  }
152

    
153
/* Header Menu Classes
154
 * the menu runs across the whole header */
155
td.header-menu {
156
    vertical-align:     middle;
157
    text-align:         left;
158
    color:              #666600;
159
    background-color:   #CCCC99;
160
}
161

    
162
div.header-menu {
163
    color:              #666600;
164
    background-color:   #CCCC99;
165
    padding:            2px 2px 2px 100px;
166
    font-size:          14px;
167
}
168

    
169
/* Header Sub-Menu Classes
170
 * the submenu runs across the whole header */
171
td.header-submenu {
172
    vertical-align:     middle;
173
    text-align:         left;
174
    color:              #003366; 
175
    background-color:   #FFFFFF;
176
}
177

    
178
div.header-submenu {
179
    color:              #003366;
180
    background-color:   #FFFFFF;
181
    padding:            2px 10px 2px 110px;
182
    font-size:          14px;
183
}
184

    
185
/* Content Area Classes
186
 * Set the default values for the entire content area
187
 */
188
td.content-area {
189
    vertical-align:     top;
190
    text-align:         left;
191
    color:              #003366;
192
    background-color:   #FFFFFF;
193
    height:             100%;
194
}
195

    
196
div.content-area {
197
    vertical-align:     top;
198
    text-align:         left;
199
    color:              #003366;
200
    background-color:   #FFFFFF;
201
    padding:            15px 40px 15px 40px;
202
}
203

    
204
/* Box Classes
205
 * Create left or right floating boxes where links or special notices can be
206
 * placed
207
 */
208
.box-header {
209
    color:              #003366;
210
    background-color:   #CCCC99;
211
}
212
div.l-box {
213
    vertical-align:     bottom;
214
    text-align:         left;
215
    color:              #003366;
216
    background-color:   #CCCC99;
217
    float:              left;
218
    padding:            6px;
219
    /* set border for NN4 only change in advanced.css */
220
    border:             0.1px solid #006666;
221
    margin:             8px;
222
    width:              400px;
223
    height:             20px;
224
    font-size:          12px;
225
}
226

    
227
div.r-box {
228
    vertical-align:     middle;
229
    text-align:         center;
230
    color:              #003366;
231
    background-color:   #CCCC99;
232
    float:              right; 
233
    padding:            6px 6px;
234
    /* set border for NN4 only change in advanced.css */
235
    border:             0.1px solid #006666; 
236
    margin:             0px;
237
    width:              50%;
238
 /*   height:             auto; */
239
    font-size:          12px;
240
 /*   clear:              both; */
241
}
242

    
243
/* Clear both left and right floats */
244
div.clear {
245
    clear:              both;
246
}
247

    
248
/* Center text within the div */
249
div.center {
250
    text-align:         center;
251
}
252

    
253
/* Centers the table within the div, but cells have text left-aligned */
254
div.center table {
255
    margin-left:        auto;
256
    margin-right:       auto;
257
    text-align:         left;
258
    height:             auto;
259
}
260

    
261
/* copy right Info Class
262
 * Place the copy right info under the picture image
263
 */ 
264
div.copyright {
265
    color:              #CCCC99;
266
    background-color:   #FFFFFF;
267
    text-align:         center;
268
    vertical-align:     middle;
269
    font-size:          10px;
270
    padding:            10px 10px 4px 10px;
271
}
272

    
273
/* NSF Info Class
274
 * Place the NSF info on the bottom of the main page
275
 */ 
276
div.nsf {
277
    color:              #CCCC99;
278
    background-color:   #FFFFFF;
279
    text-align:         center;
280
    vertical-align:     middle;
281
    font-size:          10px;
282
    padding:            10px 10px 10px 10px;
283
}
284
    
285
/* Footer Menu Classes
286
 * setup the footer menu style
287
 */
288
td.footer-menu {
289
    text-align:         center;
290
    vertical-align:     middle;
291
    color:              #CCCC99;
292
    background-color:   #FFFFFF;
293
    padding:            0px;
294
}
295

    
296
div.footer-menu {
297
    text-align:         center;
298
    vertical-align:     middle;
299
    background:         #FFFFFF;
300
    color:              #CCCC99;
301
    font-size:          10px;
302
    padding:            4px;
303
}
304

    
305
/* Footer Left and Right Classes
306
 * set the reverse colors for the last portion of the footer
307
 */
308
td.footer-left {
309
    vertical-align:     middle;
310
    text-align:         left;
311
    color:              #FFFFFF;
312
    background-color:   #003366;
313
}
314

    
315
div.footer-left {
316
    text-align:         left;
317
    vertical-align:     middle;
318
    background:         #003366;
319
    color:              #FFFFFF;
320
    font-size:          10px;
321
    padding:            2px;
322
}
323

    
324
td.footer-right {
325
    vertical-align:     middle;
326
    text-align:         right;
327
    color:              #FFFFFF;
328
    background-color:   #003366;
329
}
330
div.footer-right {
331
    text-align:         right;
332
    vertical-align:     middle;
333
    background:         #003366;
334
    color:              #FFFFFF;
335
    font-size:          10px;
336
    padding:            2px;
337
}
338

    
339

    
340
/* Default link properties
341
 * currently set the links to the dark tan
342
 * with no additional decorations
343
 * except underline on hover
344
*/
345
a:link {
346
    color:                      #666600;
347
    background:                 transparent;
348
/*    background-color:           #FFFFFF; */
349
    text-decoration:            none;
350
  }
351
a:visited {
352
    color:                      #666600;
353
    background:                  transparent;
354
/*    background-color:           #FFFFFF; */
355
    text-decoration:            none;
356
  }
357
a:hover {
358
    color:                      #666600;
359
    background:                 transparent;
360
/*    background-color:           #FFFFFF; */
361
    text-decoration:            underline;
362
  }
363
a:active { 
364
    color:                      #666600;
365
    background:                 transparent;
366
/*    background-color:           #FFFFFF; */
367
    text-decoration:            none;
368
  }
369

    
370
/* Menu Link properties
371
 * the Menu is currently identical to the dafault
372
 * but this may change so it is defined here
373
 */
374
a.menu:link {
375
    color:                      #666600;
376
    background:                 transparent;
377
    /*background-color:           #CCCC9A;*/
378
    text-decoration:            none;
379
  }
380
a.menu:visited {
381
    color:                      #666600;
382
    background:                 transparent;
383
    /*background-color:           #CCCC9A;*/
384
    text-decoration:            none;
385
  }
386
a.menu:hover {
387
    color:                      #666600;
388
    background:                 transparent;
389
   /* background-color:           #CCCC9A;*/
390
    text-decoration:            underline;
391
  }
392
a.menu:active { 
393
    color:                      #666600;
394
    background:                 transparent;
395
   /* background-color:           #CCCC9A; */
396
    text-decoration:            none;
397
  }
398

    
399
/* SubMenu Link Properties
400
 * Set the color to dark tan with underline on hover
401
 */
402
a.submenu:link {
403
    color:                      #666600;
404
/*  color:                      #003366; */  	
405
    background:                 transparent;
406
    /*background-color:           #CCCC9A;*/
407
    text-decoration:            none;
408
  }
409
a.submenu:visited {
410
    color:                      #666600;
411
/*  color:                      #003366; */  	
412
    background:                 transparent;
413
    /*background-color:           #CCCC9A;*/
414
    text-decoration:            none;
415
  }
416
a.submenu:hover {
417
    color:                      #666600;
418
/*  color:                      #003366; */  	
419
    background:                 transparent;
420
   /* background-color:           #CCCC9A;*/
421
    text-decoration:            underline;
422
  }
423
a.submenu:active { 
424
    color:                      #666600;
425
/*  color:                      #003366; */  	
426
    background:                 transparent;
427
   /* background-color:           #CCCC9A; */
428
    text-decoration:            none;
429
  }
430
  
431
/* The footer menu currently is set to use the Menu style */
432

    
433
/* Footer white on blue portion
434
 * set the color to white with underline on hover
435
 */
436
a.footer-link:link {
437
    color:                      #FFFFFF;
438
    background:                 transparent;
439
    text-decoration:            none;
440
  }
441

    
442
a.footer-link:visited {
443
    color:                      #FFFFFF;
444
    background:                 transparent;
445
    text-decoration:            none;
446
  }
447
  
448
a.footer-link:hover {
449
    color:                      #FFFFFF;
450
    background:                 transparent;
451
    text-decoration:            underline;
452
  }
453
  
454
a.footer-link:active {
455
    color:                      #FFFFFF;
456
    background:                 transparent;
457
    text-decoration:            none;
458
  }
459
  
460
/* These classes will be removed in favor of the wrapper divs in advanced.css
461
 * so that images will have captions associated with them
462
 */
463

    
464
img.img-content {
465
    color:              #003366;
466
    background-color:   #FFFFFF;
467
/*  border:             2px solid #003366; */
468
}
469

    
470
div.img-right {
471
    float:              right;
472
    padding:            4px 4px 4px 10px;
473
}
474

    
475
div.img-left {
476
    float:              left;
477
    padding:             4px 10px 4px 4px;
478
}
479

    
480
div.img-center {
481
    padding:             4px 4px 4px 4px;
482
    margin-left:         auto;
483
    margin-right:        auto;
484
    text-align:          center;
485
}
486

    
487
div.caption {
488
    font-size:          .8em;
489
    padding:            2px 2px 0px 4px;
490
    text-align:         left;
491
    margin-left:        auto;
492
    margin-right:       auto;
493
}
494

    
495
/* These are the original img classes for floating left and right.
496
 * Some images that do not have captions still use these classes.
497
 * At some point they should be depreciated and removed once all images 
498
 * are using the div wrapper classes above.
499
 */
500
img.middle {
501
    text-align:         center;  
502
    color:              #003366;
503
    background-color:   #FFFFFF;
504
}
505

    
506
img.right {
507
    float:              right;
508
    color:              #003366;
509
    background-color:   #FFFFFF;
510
}
511

    
512
img.left {
513
    float:              left;
514
    color:              #003366;
515
    background-color:   #FFFFFF;
516
}
517

    
518
/* set the default margin and padding for divs */
519
div {  
520
    padding:              0px;
521
    margin:               0px;
522
}
523

    
524
/* here to prevent the incredible shrinking text*/
525
p ol, p ul, p dl, ol ul {
526
    font-size:      1em;
527
    text-align:     left;
528
}
529

    
530
/* A fix for NN4 */
531
string, b {
532
    font-weight:        800;
533
}
534

    
535
/* Headings Tags :
536
 * Headings are used to break up straight text.
537
 * They are used to present topics, or subsections, chapters, etc.
538
 * There are 6 headings tag which can be styled as we wish.
539
 * All of our headings will be rendered in the same font and color as the
540
 * default settings.
541
 */
542

    
543
/* h1: very large font, set bold */
544
h1 {
545
    color:                      #003366;
546
    background-color:           #FFFFFF;
547
    padding:                    0;
548
    font-size:                  2.25em;
549
    font-style:                 normal;
550
    font-weight:                bold;
551
    font-family:                Arial, Helvetica, sans-serif;
552
    text-decoration:            none;
553
  }
554

    
555
/* large font, set bold */
556
h2 {
557
    color:                      #003366;
558
    background-color:           #FFFFFF;
559
    padding:                    0;
560
    font-size:                  2em;
561
    font-style:                 normal;
562
    font-weight:                bold;
563
    font-family:                Arial, Helvetica, sans-serif;
564
    text-decoration:            none;
565
  }
566

    
567
/* slightly larger font, set bold */
568
h3 {
569
    color:                      #003366;
570
    background-color:           #FFFFFF;
571
    padding:                    0;
572
    font-size:                  1.75em;
573
    font-style:                 normal;
574
    font-weight:                400;
575
    font-family:                Arial, Helvetica, sans-serif;
576
    text-decoration:            none;
577
  }
578

    
579
/* same size font as default, no bold */
580
h4 {
581
    color:                      #003366;
582
    background-color:           #FFFFFF;
583
    padding:                    6px 0px 0px 0px;
584
    margin:                     20px 0px 0px 0px ;
585
    font-size:                  1.75em;
586
    font-style:                 normal;
587
    font-weight:                700;
588
    font-family:                Arial, Helvetica, sans-serif;
589
    text-decoration:            none;
590
    clear:                      both;
591
  }
592

    
593
/* slightly smaller font */
594
h5 {
595
    color:                      #003366;
596
    background-color:           #FFFFFF;
597
    padding:                    0;
598
    margin:                     10px 0px 0px 0px ;
599
    font-size:                  1.25em;
600
    font-style:                 normal;
601
    font-weight:                400;
602
    font-family:                Arial, Helvetica, sans-serif;
603
    text-decoration:            none;
604
  }
605

    
606
/* very small font */
607
h6 {
608
    color:                      #003366;
609
    background-color:           #FFFFFF;
610
    padding:                    0;
611
    font-size:                  0.5em;
612
    font-style:                 normal;
613
    font-weight:                normal;
614
    font-family:                Arial, Helvetica, sans-serif;
615
    text-decoration:            none;
616
  }
617

    
618
/* Add a little space between list items */
619
li {
620
    margin:           10px 0px;
621
}
622

    
623
/* Classes for positioning: use with div tags for desired effect */
624
.indent10 {
625
    white-space:                nowrap;
626
    padding-left:               10px;
627
}
628

    
629
.indent15 {
630
    padding-left:               15px;
631
}
632

    
633
.indent50 {
634
    padding-left:               50px;
635
}
636

    
637
/* Classes for the <em> tag (emphasis) */
638
.italic {
639
    font-style:                 italic;
640
    font-weight:                normal;
641
  }
642

    
643
.bold {
644
    font-style:                 normal;
645
    font-weight:                bold;
646
  }
647

    
648
.waybold {
649
    font-style:                 italic;
650
    font-weight:                bolder;
651
  }
652

    
653
/* Class for the People Page table headers 
654
 * The headers of this table are the same settings as an h4 header
655
 */
656
th.people {
657
    width:                      100%;
658
    color:                      #003366;
659
    background-color:           #FFFFFF;
660
    text-align:                 left;
661
    vertical-align:             middle;
662
    padding:                    10px 0px;
663
    font-size:                  1.5em;
664
    font-style:                 normal;
665
    font-weight:                700;
666
    font-family:                Arial, Helvetica, sans-serif;
667
    text-decoration:            none;
668
}
669

    
670
/* Classes for table data width */
671
td.left-col {
672
    width:                      30%;
673
    text-align:                 left;
674
  }
675

    
676
td.right-col {
677
    width:                      70%;
678
    text-align:                 left;
679
 }
680
/* Class for the site map table headers 
681
 * The headers of this table are the same settings as an h4 header
682
 */
683
th.sitemapdata {
684
    width:                      100%;
685
    color:                      #003366;
686
    background-color:           #FFFFFF;
687
    text-align:                 left;
688
    vertical-align:             middle;
689
    padding:                    10px 0px;
690
    font-size:                  1.5em;
691
    font-style:                 normal;
692
    font-weight:                700;
693
    font-family:                Arial, Helvetica, sans-serif;
694
    text-decoration:            none;
695
}
696
th.sitemapdata_watershed1 {
697
    width:                      6%;
698
    color:                      #003366;
699
    background-color:           #FFFFFF;
700
    text-align:                 center;
701
    vertical-align:             top;
702
    padding:                    10px 0px;
703
    font-size:                  .75em;
704
    font-style:                 normal;
705
    font-weight:                600;
706
    font-family:                Arial, Helvetica, sans-serif;
707
    text-decoration:            none;
708
}
709
th.sitemapdata_watershed_5% {
710
    width:                      6%;
711
    color:                      #003366;
712
    background-color:           #FFFFFF;
713
    text-align:                 center;
714
    vertical-align:             top;
715
    padding:                    10px 0px;
716
    font-size:                  .75em;
717
    font-style:                 normal;
718
    font-weight:                600;
719
    font-family:                Arial, Helvetica, sans-serif;
720
    text-decoration:            none;
721
}
722
/*
723
th.sitemapdata_watershed_5% {
724
    width:                      5%;
725
    color:                      #003366;
726
    background-color:           #FFFFFF;
727
    text-align:                 center;
728
    vertical-align:             top;
729
    padding:                    10px 0px;
730
    font-size:                  .75em;
731
    font-style:                 normal;
732
    font-weight:                600;
733
    font-family:                Arial, Helvetica, sans-serif;
734
    text-decoration:            none;
735
}
736
*/
737
th.sitemapdata_watershed_65% {
738
    width:                      65%;
739
    color:                      #003366;
740
    background-color:           #FFFFFF;
741
    text-align:                 center;
742
    vertical-align:             top;
743
    padding:                    10px 0px;
744
    font-size:                  .75em;
745
    font-style:                 normal;
746
    font-weight:                600;
747
    font-family:                Arial, Helvetica, sans-serif;
748
    text-decoration:            none;
749
}
750
caption.sitemapdata_watershed1 {
751
    width:                      100%;
752
    color:                      #003366;
753
    background-color:           #FFFFFF;
754
    text-align:                 center;
755
    vertical-align:             middle;
756
    padding:                    10px 0px;
757
    font-size:                  1.20em;
758
    font-style:                 normal;
759
    font-weight:                600;
760
    font-family:                Arial, Helvetica, sans-serif;
761
    text-decoration:            none;
762
}
763

    
764
td.data_Watershed_1 {
765
    width:                      6%;
766
    text-align:                 center;
767
    font-style:                 normal;
768
    font-weight:                600;
769
    vertical-align:             middle;
770
  }
771
/* Classes for table data width */
772
td.left-col-sitemapdata-subtitle {
773
    width:                      70%;
774
    text-align:                 left;
775
    font-weight:                600;
776
    font-style:                 italic;
777
 }
778
td.right-col-sitemapdata-subtitle {
779
    width:                      30%;
780
    text-align:                 left;
781
    font-weight:                600;
782
    font-style:                 italic;
783
 }
784
td. left-col-sitemapdata {
785
    width:                      70%;
786
    text-align:                 left;
787
  }
788

    
789
td.right-col-sitemapdata {
790
    width:                      30%;
791
    text-align:                 left;
792
 }
793
td.watershedmap_data {
794
    text-align:                 center;
795
 }
(1-1/13)