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

/* Color Scheme:
 *    dark blue:                  #003366     
 *    aqua blue:                  #0066CC
 *    aqua green:                 #006666
 *    white:                      #FFFFFF
 *    dark tan(kelp color):       #666600
 *    light tan:                  #CCCC99
 */

/* Shorthand for margins: TRBL
 * Shorthand for padding: TRBL
 * Sharthand for border: size style color
 */

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

html {
    height:               100%;
}

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

/* the Main Logo Class 
 * it is the only object placed absolutely */
.header-logo {
    position:           absolute;
    top:                5px;
    left:               10px;
    background:         transparent;  /* for advanced only */     
    width:              auto;
}

/* The Spacing Classes 
 * creates the left and right margins for all objects 
 * wrap all objects in a div */
 
div.spacing {
    margin:             0px 10px;
    text-align:         center;
    /* IE6 bug : do not set vertical-align */
}

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

/* The default settings for a table */
table {
    width:              100%;
    height:             100%;
    margin:             0px;
    padding:            0px;
    color:              #003366;
    background-color:   #FFFFFF;
 /* border:             2px solid red;   turn on for debugging in advanced */
}

/* The default settings for a table cell */
td {
    margin:             0px;
    padding:            0px;
    color:              #003366;
    background-color:   #FFFFFF;
    text-align:         left;
    vertical-align:     middle;
 /* border:             1px solid red;   turn on for debugging */ 
}

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

/* Header Title Classes
 * The Main Title in the left portion of the header */
td.header-title {
    vertical-align:     middle;
    text-align:         left;
}

div.header-title {
    color:              #003366;
    background-color:   #FFFFFF;
    padding:            1px 4px 1px 100px;
    font-size:          26px;
    font-family:        serif;
    font-style:         normal;
    font-weight:        800;    
}

/* Header Sub-Title Classes
 * The subtitle in the left portion of the header */
td.header-subtitle {
    vertical-align:     middle;
    text-align:         left;
}

div.header-subtitle {
    color:              #006666;
    background-color:   #FFFFFF;
    padding:            1px 4px 1px 110px;
    font-size:          12px;
}

/* Header Image Classes
 * displays an image on the right portion of the header */
td.header-image {
    text-align:         right;
    vertical-align:     middle;
    /*width:              223px;*/
}

img.header {
    text-align:         right;
    vertical-align:     bottom;
}

div.header-image {
    text-align:         right;
    vertical-align:     bottom;
  }

/* Header Menu Classes
 * the menu runs across the whole header */
td.header-menu {
    vertical-align:     middle;
    text-align:         left;
    color:              #666600;
    background-color:   #CCCC99;
}

div.header-menu {
    color:              #666600;
    background-color:   #CCCC99;
    padding:            2px 2px 2px 100px;
    font-size:          14px;
}

/* Header Sub-Menu Classes
 * the submenu runs across the whole header */
td.header-submenu {
    vertical-align:     middle;
    text-align:         left;
    color:              #003366; 
    background-color:   #FFFFFF;
}

div.header-submenu {
    color:              #003366;
    background-color:   #FFFFFF;
    padding:            2px 10px 2px 110px;
    font-size:          14px;
}

/* Content Area Classes
 * Set the default values for the entire content area
 */
td.content-area {
    vertical-align:     top;
    text-align:         left;
    color:              #003366;
    background-color:   #FFFFFF;
    height:             100%;
}

div.content-area {
    vertical-align:     top;
    text-align:         left;
    color:              #003366;
    background-color:   #FFFFFF;
    padding:            15px 40px 15px 40px;
}

/* Box Classes
 * Create left or right floating boxes where links or special notices can be
 * placed
 */
.box-header {
    color:              #003366;
    background-color:   #CCCC99;
}
div.l-box {
    vertical-align:     bottom;
    text-align:         left;
    color:              #003366;
    background-color:   #CCCC99;
    float:              left;
    padding:            6px;
    /* set border for NN4 only change in advanced.css */
    border:             0.1px solid #006666;
    margin:             8px;
    width:              400px;
    height:             20px;
    font-size:          12px;
}

div.r-box {
    vertical-align:     middle;
    text-align:         center;
    color:              #003366;
    background-color:   #CCCC99;
    float:              right; 
    padding:            6px 6px;
    /* set border for NN4 only change in advanced.css */
    border:             0.1px solid #006666; 
    margin:             0px;
    width:              50%;
 /*   height:             auto; */
    font-size:          12px;
 /*   clear:              both; */
}

/* Clear both left and right floats */
div.clear {
    clear:              both;
}

/* Center text within the div */
div.center {
    text-align:         center;
}

/* Centers the table within the div, but cells have text left-aligned */
div.center table {
    margin-left:        auto;
    margin-right:       auto;
    text-align:         left;
    height:             auto;
}

/* copy right Info Class
 * Place the copy right info under the picture image
 */ 
div.copyright {
    color:              #CCCC99;
    background-color:   #FFFFFF;
    text-align:         center;
    vertical-align:     middle;
    font-size:          10px;
    padding:            10px 10px 4px 10px;
}

/* NSF Info Class
 * Place the NSF info on the bottom of the main page
 */ 
div.nsf {
    color:              #CCCC99;
    background-color:   #FFFFFF;
    text-align:         center;
    vertical-align:     middle;
    font-size:          10px;
    padding:            10px 10px 10px 10px;
}
    
/* Footer Menu Classes
 * setup the footer menu style
 */
td.footer-menu {
    text-align:         center;
    vertical-align:     middle;
    color:              #CCCC99;
    background-color:   #FFFFFF;
    padding:            0px;
}

div.footer-menu {
    text-align:         center;
    vertical-align:     middle;
    background:         #FFFFFF;
    color:              #CCCC99;
    font-size:          10px;
    padding:            4px;
}

/* Footer Left and Right Classes
 * set the reverse colors for the last portion of the footer
 */
td.footer-left {
    vertical-align:     middle;
    text-align:         left;
    color:              #FFFFFF;
    background-color:   #003366;
}

div.footer-left {
    text-align:         left;
    vertical-align:     middle;
    background:         #003366;
    color:              #FFFFFF;
    font-size:          10px;
    padding:            2px;
}

td.footer-right {
    vertical-align:     middle;
    text-align:         right;
    color:              #FFFFFF;
    background-color:   #003366;
}
div.footer-right {
    text-align:         right;
    vertical-align:     middle;
    background:         #003366;
    color:              #FFFFFF;
    font-size:          10px;
    padding:            2px;
}


/* Default link properties
 * currently set the links to the dark tan
 * with no additional decorations
 * except underline on hover
*/
a:link {
    color:                      #666600;
    background:                 transparent;
/*    background-color:           #FFFFFF; */
    text-decoration:            none;
  }
a:visited {
    color:                      #666600;
    background:                  transparent;
/*    background-color:           #FFFFFF; */
    text-decoration:            none;
  }
a:hover {
    color:                      #666600;
    background:                 transparent;
/*    background-color:           #FFFFFF; */
    text-decoration:            underline;
  }
a:active { 
    color:                      #666600;
    background:                 transparent;
/*    background-color:           #FFFFFF; */
    text-decoration:            none;
  }

/* Menu Link properties
 * the Menu is currently identical to the dafault
 * but this may change so it is defined here
 */
a.menu:link {
    color:                      #666600;
    background:                 transparent;
    /*background-color:           #CCCC9A;*/
    text-decoration:            none;
  }
a.menu:visited {
    color:                      #666600;
    background:                 transparent;
    /*background-color:           #CCCC9A;*/
    text-decoration:            none;
  }
a.menu:hover {
    color:                      #666600;
    background:                 transparent;
   /* background-color:           #CCCC9A;*/
    text-decoration:            underline;
  }
a.menu:active { 
    color:                      #666600;
    background:                 transparent;
   /* background-color:           #CCCC9A; */
    text-decoration:            none;
  }

/* SubMenu Link Properties
 * Set the color to dark tan with underline on hover
 */
a.submenu:link {
    color:                      #666600;
/*  color:                      #003366; */  	
    background:                 transparent;
    /*background-color:           #CCCC9A;*/
    text-decoration:            none;
  }
a.submenu:visited {
    color:                      #666600;
/*  color:                      #003366; */  	
    background:                 transparent;
    /*background-color:           #CCCC9A;*/
    text-decoration:            none;
  }
a.submenu:hover {
    color:                      #666600;
/*  color:                      #003366; */  	
    background:                 transparent;
   /* background-color:           #CCCC9A;*/
    text-decoration:            underline;
  }
a.submenu:active { 
    color:                      #666600;
/*  color:                      #003366; */  	
    background:                 transparent;
   /* background-color:           #CCCC9A; */
    text-decoration:            none;
  }
  
/* The footer menu currently is set to use the Menu style */

/* Footer white on blue portion
 * set the color to white with underline on hover
 */
a.footer-link:link {
    color:                      #FFFFFF;
    background:                 transparent;
    text-decoration:            none;
  }

a.footer-link:visited {
    color:                      #FFFFFF;
    background:                 transparent;
    text-decoration:            none;
  }
  
a.footer-link:hover {
    color:                      #FFFFFF;
    background:                 transparent;
    text-decoration:            underline;
  }
  
a.footer-link:active {
    color:                      #FFFFFF;
    background:                 transparent;
    text-decoration:            none;
  }
  
/* These classes will be removed in favor of the wrapper divs in advanced.css
 * so that images will have captions associated with them
 */

img.img-content {
    color:              #003366;
    background-color:   #FFFFFF;
/*  border:             2px solid #003366; */
}

div.img-right {
    float:              right;
    padding:            4px 4px 4px 10px;
}

div.img-left {
    float:              left;
    padding:             4px 10px 4px 4px;
}

div.img-center {
    padding:             4px 4px 4px 4px;
    margin-left:         auto;
    margin-right:        auto;
    text-align:          center;
}

div.caption {
    font-size:          .8em;
    padding:            2px 2px 0px 4px;
    text-align:         left;
    margin-left:        auto;
    margin-right:       auto;
}

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

img.right {
    float:              right;
    color:              #003366;
    background-color:   #FFFFFF;
}

img.left {
    float:              left;
    color:              #003366;
    background-color:   #FFFFFF;
}

/* set the default margin and padding for divs */
div {  
    padding:              0px;
    margin:               0px;
}

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

/* A fix for NN4 */
string, b {
    font-weight:        800;
}

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

/* h1: very large font, set bold */
h1 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    0;
    font-size:                  2.25em;
    font-style:                 normal;
    font-weight:                bold;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* large font, set bold */
h2 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    0;
    font-size:                  2em;
    font-style:                 normal;
    font-weight:                bold;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* slightly larger font, set bold */
h3 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    0;
    font-size:                  2em;
    font-style:                 normal;
    font-weight:                400;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* same size font as default, no bold */
h4 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    6px 0px 0px 0px;
    margin:                     20px 0px 0px 0px ;
    font-size:                  1.75em;
    font-style:                 normal;
    font-weight:                700;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
    clear:                      both;
  }

/* slightly smaller font */
h5 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    0;
    margin:                     10px 0px 0px 0px ;
    font-size:                  1.25em;
    font-style:                 normal;
    font-weight:                400;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* very small font */
h6 {
    color:                      #003366;
    background-color:           #FFFFFF;
    padding:                    0;
    font-size:                  0.5em;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* Add a little space between list items */
li {
    margin:           10px 0px;
}

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

.indent15 {
    padding-left:               15px;
}

.indent50 {
    padding-left:               50px;
}

/* Classes for the <em> tag (emphasis) */
.italic {
    font-style:                 italic;
    font-weight:                normal;
  }

.bold {
    font-style:                 normal;
    font-weight:                bold;
  }

.waybold {
    font-style:                 italic;
    font-weight:                bolder;
  }

/* Class for the People Page table headers 
 * The headers of this table are the same settings as an h4 header
 */
th.people {
    width:                      100%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 left;
    vertical-align:             middle;
    padding:                    10px 0px;
    font-size:                  1.5em;
    font-style:                 normal;
    font-weight:                700;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}

/* Classes for table data width */
td.left-col {
    width:                      30%;
    text-align:                 left;
  }

td.right-col {
    width:                      70%;
    text-align:                 left;
 }
/* Class for the site map table headers 
 * The headers of this table are the same settings as an h4 header
 */
th.sitemapdata {
    width:                      100%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 left;
    vertical-align:             middle;
    padding:                    10px 0px;
    font-size:                  1.5em;
    font-style:                 normal;
    font-weight:                700;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}
th.sitemapdata_watershed1 {
    width:                      6%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 center;
    vertical-align:             top;
    padding:                    10px 0px;
    font-size:                  .75em;
    font-style:                 normal;
    font-weight:                600;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}
th.sitemapdata_watershed_5% {
    width:                      6%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 center;
    vertical-align:             top;
    padding:                    10px 0px;
    font-size:                  .75em;
    font-style:                 normal;
    font-weight:                600;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}
/*
th.sitemapdata_watershed_5% {
    width:                      5%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 center;
    vertical-align:             top;
    padding:                    10px 0px;
    font-size:                  .75em;
    font-style:                 normal;
    font-weight:                600;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}
*/
th.sitemapdata_watershed_65% {
    width:                      65%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 center;
    vertical-align:             top;
    padding:                    10px 0px;
    font-size:                  .75em;
    font-style:                 normal;
    font-weight:                600;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}
caption.sitemapdata_watershed1 {
    width:                      100%;
    color:                      #003366;
    background-color:           #FFFFFF;
    text-align:                 center;
    vertical-align:             middle;
    padding:                    10px 0px;
    font-size:                  1.20em;
    font-style:                 normal;
    font-weight:                600;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
}

td.data_Watershed_1 {
    width:                      6%;
    text-align:                 center;
    font-style:                 normal;
    font-weight:                600;
    vertical-align:             middle;
  }
/* Classes for table data width */
td.left-col-sitemapdata-subtitle {
    width:                      70%;
    text-align:                 left;
    font-weight:                600;
    font-style:                 italic;
 }
td.right-col-sitemapdata-subtitle {
    width:                      30%;
    text-align:                 left;
    font-weight:                600;
    font-style:                 italic;
 }
td. left-col-sitemapdata {
    width:                      70%;
    text-align:                 left;
  }

td.right-col-sitemapdata {
    width:                      30%;
    text-align:                 left;
 }
td.watershedmap_data {
    text-align:                 center;
 }