/*   '$RCSfile$'                                              */
/*     Purpose: Default style sheet for PISCO project web pages             */
/*              Using this stylesheet rather than placing styles directly   */
/*              into PISCO web documents allows us to globally change the   */
/*              formatting styles of the entire site in one easy place.     */
/*              Versioning information for this document can be found at    */
/*              cvs.piscoweb.org.                                           */
/*   Copyright: 2000 Regents of the University of California and the        */
/*              Partnership for Interdisciplinary Studies of Coastal Oceans */
/*     Authors: Chris Jones, James Woods                                    */
/*                                                                          */
/*    '$Author$'                                                   */
/*      '$Date$'                                      */
/*  '$Revision$'                                                      */
/*                                                                          */

/*
*  import eml css:
*/

body { 
    margin:                     0px;          /* No NN4 */
    padding:                    0px;
    border:                     0px;
    background-image:           url('images/bg.gif');
    background-position:        top left;     /* No NN4 */
    background-repeat:          repeat-y;     /* No NN4 */
    background-color:           #ffffff;
    color:                      #006699;
    font-style:                 normal;
    font-weight:                normal;
    font-size:                  85%;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

body>div img {
    padding:                    0px 0px 0px 0px;
    }

#header {
    margin:                     0px 0px 0px 0px; /* T R B L */
    padding:                    0px;
    border:                     0px;
    background-image:           url('images/data_catalog_header_bg.jpg');
    background-position:        top left;     /* No NN4 */
    background-repeat:          repeat-x;     /* No NN4 */
    height:                     100px; /* begin hack for ie5win */
    width:                      100%;
    voice-family:               "\"}\"";
    voice-family:               inherit;
    height:                     78px;
    width:                      100%;
    }

html>body #header {
    width:                      100%;
    height:                     78px; /* end hack for ie5win */
    }

#left_logo {
    position:                   absolute;
    top:                        0px;
    left:                       0px; /* we want the logo on the left */
    margin:                     0px 0px 0px 0px; /* T R B L */
    padding:                    0px;
    border:                     0px;
    background-image:           url('images/data_catalog_logo.jpg');
    background-position:        top left;     /* No NN4 */
    background-repeat:          no-repeat;         /* No NN4 */
    width:                      167px; /* begin hack for 1e5win */
    height:                     100px; 
    voice-family:               "\"}\"";
    voice-family:               inherit;
    width:                      167px;
    height:                     78px;
    }

html>body #left_logo {
    width:                      167px;
    height:                     78px; /* end hack for ie5win */
    }

#right_logo {
    position:                   absolute;
    top:                        0px;
    right:                      0px; /* we want the logo near the right */
    margin:                     0px 0px 0px 0px; /* T R B L */
    padding:                    0px;
    border:                     0px;
    background-image:           url('images/data_catalog_header_corner.jpg');
    background-position:        top right;     /* No NN4 */
    background-repeat:          no-repeat;         /* No NN4 */
    height:                     100px; /* begin hack for 1e5win */
    width:                      78px;
    voice-family:               "\"}\"";
    voice-family:               inherit;
    height:                     78px;
    width:                      78px;
    }

html>body #right_logo {
    width:                      78px;
    height:                     78px; /* end hack for ie5win */
    }

#banner {
    margin:                     0px 0px 0px 167px; /* T R B L */
    padding:                    0px;
    border:                     0px;
    background-image:           url('images/data_catalog_header_search.jpg');
    background-position:        top left;     /* No NN4 */
    background-repeat:          no-repeat;         /* No NN4 */
    height:                     100px; /* begin hack for 1e5win */
    width:                      400px;
    voice-family:               "\"}\"";
    voice-family:               inherit;
    height:                     78px;
    width:                      393px;
    }

html>body #banner {
    height:                     78px; /* end hack for ie5win */
    width:                      393px;
    }

#left_sidebar {
    position:                   absolute;
    top:                        78px;
    left:                       0px;
    margin:                     0px;
    padding:                    0px;
    border:                     0px;
    width:                      180px; /* begin hack for 1e5win */
    voice-family:               "\"}\"";
    voice-family:               inherit;
    width:                      167px;
    }

html>body #left_sidebar {
    width:                      167px; /* end hack for ie5win */
    }

#right_sidebar {
    position:                   absolute;
    top:                        78px;
    right:                      0px;
    margin:                     0px;
    padding:                    0px;
    border:                     0px;
    width:                      180px; /* begin hack for 1e5win */
    voice-family:               "\"}\"";
    voice-family:               inherit;
    width:                      0px;
    }

html>body #right_sidebar {
    width:                      0px; /* end hack for ie5win */
    }

#content {
    border:                     0px;
    margin:                     20px 20px 0px 187px;
    }

#loginbox {
    border:                     0px;
    position:                   absolute;
    top:                        55px;
    right:                      65px;
    }

#footer {
    position:                   absolute;
    right:                      10px;
    bottom:                     0;
    left:                       167px;
    margin:                     0px 10px 10px 177px;
    }

#debug {
    position:                   absolute;
    right:                      20px;
    bottom:                     0;
    left:                       167px;
    margin:                     0px 10px 10px 177px;
    }

p,ul,ol,dl,li,dt {
    color:                      #006699;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }
  
p ol,p ul, p dl, ol ul {
    color:                      #006699;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none; 
  } 

ul,ol {
    padding:                    0px;
    margin:                     0px 0px 0px 15px;
    }

div {
    color:                      #006699;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

  
/* NN 4.xx needs the font weight reset for b and strong tags */ 
strong, b {
    font-weight:                800;
  }

/* to emphasize words, use it inline with a <span> class*/ 
big {
    font-size:                  larger;
  }

/* to shrink words, use it inline with a <span> class*/
small {
    font-size:                  smaller;
  }
  
/* for pre-formated text: adds a small padding around it
 * font is set to the default style, 
 * but could be changed for different effect
 */
pre {
    color:                      #006699;
    padding:                    10px;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* for creating block quotes. 
 * set off with a slight indent to the left & right margins
 * font is set to default style,
 * but could be changed for different effect
 */
blockquote {
    color:                      #006699;
    padding:                    0;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* 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:                      #006699;
    padding:                    0;
    font-size:                  200%;
    font-style:                 normal;
    font-weight:                bold;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* large font, set bold */
h2 {
    color:                      #006699;
    padding:                    0;
    font-size:                  150%;
    font-style:                 normal;
    font-weight:                bold;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* slightly larger font, set bold 
h3 {
    color:                      #006699;
    padding:                    0;
    font-size:                  120%;
    font-style:                 normal;
    font-weight:                400;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }
*/

/* Style headings */
h3 {
  border-bottom:                #94c1d4 solid 1px;
  color:                        #006699;
  padding:                      0;
  margin:                       3px;
  text-align:                   left;
  font-style:                   italic;
  font-weight:                  200;
  }

/* same size font as default, no bold */  
h4 {
    color:                      #006699;
    padding:                    0;
    font-style:                 normal;
    font-weight:                700;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

/* slightly smaller font */  
h5 {
    color:                      #006699;
    padding:                    0;
    font-size:                  90%;
    font-style:                 normal;
    font-weight:                700;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

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

/* Old style hr command - will be depreciated
 * Netscape 4.x does not like this
 * should use new style below
 */
hr {
    border-top:                 #006699 0px solid;
    width:                      450px;
    height:                     2px;
    color:                      #006699;
    background-color:           #006699;
    /*border-width:               none;
    border-color:               #006699; */
  }

/* New horizontal rule. Netscape 4.x should render this fine.
 * apply this class to a <div> tag for the desired effect.
 * the rule is 1px wide, blue with a slight margin on the left and right.
 */
.rule {
    border-top-width:           2px;
    border-top-style:           solid;
    border-color:               #006699; 
    margin:                     4px 4px
  }
  
/* check all link properties
 * make links orange
 * without decorations (underlines, etc)
 * and same size relative to parent
*/
a:link {
    color:                      #CC6633;
    text-decoration:            none;
  }
a:visited {
    color:                      #CC6633;
    text-decoration:            none;
  }
a:hover {
    color:                      #CC6633;
    text-decoration:            underline;
  }
a:active { 
    color:                      #CC6633;
    text-decoration:            underline;
  }
  
/* image styles */
/* no padding or border around images by default */
img {
    border:                     0px; 
    border-style:               none;
    border-width:               0px;
    padding:                    0px;
    text-decoration:            none;
  }

/* this class is needed to remove some extra space along the top of images
 * this attribute can not be put into default img class because it prevents
 * text from wrapping correctly
 */
img.vtop {  
    vertical-align:             top;
  }

/* Add a blue border around an image */

img.border {
    border:                     medium;
    border-style:               solid;
    border-color:               #006699;
    padding:                    0px;
  }

/* Format the headshot images in the who section */

img.headshot {
    margin-right:               20px;
    margin-bottom:              40px;
  }

/* Format the headshot images in the who section 
 * that have alot of text aligned to the right */
img.headshot_long {
    margin-right:               20px;
    margin-bottom:              80px;
  }
  
/* Format inline images justified to the left in the text*/

img.inlineleft {
    border:                     medium;
    border-style:               solid;
    border-color:               #006699;
    margin-right:               8px;
    margin-top:                 8px;
    margin-bottom:              8px;
  }

/* Format inline images justified to the right in the text*/

img.inlineright {
    border:                     medium;
    border-style:               solid;
    border-color:               #006699;
    margin-left:                8px;
    margin-top:                 8px;
    margin-bottom:              8px;
  }
  
/* Default behavior for linked images 
 * no border, no padding, aligned to the top
 */

a img {
    border:                     0px; 
    border-style:               none;
    border-width:               0px;
    padding:                    0px;
    vertical-align:             top;
    text-decoration:            none;
  }

/* Default for table cells. 
 * No border or padding. 
 * Keep the relative font size and set color to blue
 */

 td {
    color:                      #006699;
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;    
    border:                     0px;
    padding:                    0px;
    vertical-align:             top; 
  }
  
/* Classes for the footer area */
  
/* Basic footer class to get the correct font size
 * default footer style.
 * colors are the same, but font size is smaller
 */
.footer {
    color:                      #006699;
    background-color:           #FFFFFF;
    margin-top:                 20px;
    margin-bottom:              20px;
    margin-left:                5px;
    margin-right:               0px;
    font-size:                  75%;      /* No EM in NN4 */
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
    text-align:                 center;
  }
/* extra class to handle the small table in the footer */ 
.tblfooter {
    color:                      #006699;
    background-color:           #FFFFFF;
    font-size:                  75%;      /* No EM in NN4 */
    font-style:                 normal;
    font-weight:                normal;
    font-family:                Arial, Helvetica, sans-serif;
    text-decoration:            none;
  }

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

.indent2 {
    padding-left:               15px;
}

.indent3 {
    padding-left:               50px;
}

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

.italics {
    font-style:                 italic;
    font-weight:                normal;
  }

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

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

/* Additions for the data catalog pages */

/* Define a border for groups of elements.  This uses the 
   -moz-border-radius (Mozilla, Netscape, Opera only) 
   attribute for the time being.  Once
   browsers support the CSS3 border-radius attribute, this 
   should be switched.*/
.group {
    padding:                    0;
    color:                      #006699;
    min-width:                  800px;
    voice-family:               "\"}\""; /* begin ie5win hack */
    voice-family:               inherit;
    -moz-border-radius:         10px; /* end ie5win hack */
    }
/* Children of the group get some padding */
.group * {
    padding:                    2px;
    }
 
.group_border {
    /* orange-ish border */
    border:                     #cc9900 solid 1px;
    }

.subGroup {
    padding:                    3px;
    color:                      #006699;
    voice-family:               "\"}\""; /* begin ie5win hack */
    voice-family:               inherit;
    -moz-border-radius:         10px; /* end ie5win hack */
    }
 
.subGroup_border {
    /* blue-ish border */
    border:                     #94c1d4 solid 1px;
    }

/* This selector causes the 'section' tables to indent under the overarching div
 * tags */
div>table.subGroup {
    padding-left:               15px;
    padding-right:              15px;
    }

div.left {
    position:                   absolute;
    left:                       20px;
    clear:                      right;
    }

div.right {
    position:                   absolute;
    right:                      20px;
    clear:                      left;
    }

table.left {
    position:                   absolute;
    left:                       20px;
    }

table.right {
    float:                      right;
    margin-right:               10px;
    clear:                      left;
    }

th {
    border-bottom:              #94c1d4 solid 1px;
    color:                      #94c1d4;
    padding:                    0;
    margin:                     0;
    text-align:                 left;
    font-style:                 italic;
    font-weight:                700;
} 

th.rowheader {
    background:                 #e5f5fd;
    border-right:               #94c1d4 solid 1px;
    }

.rowodd {
    border-bottom:              #94c1d4 dotted 1px;
    border-top:                 #94c1d4 dotted 1px;
    background-color:           #e5f5fd;
    padding:                    0;
    margin:                     0;
} 

.roweven {
    padding:                    0;
    margin:                     0;
} 

.coleven {
    border-left:                #94c1d4 dotted 1px;
    border-right:               #94c1d4 dotted 1px;
    background-color:           #e5f5fd;
    padding-left:               2px;
    padding-right:              2px;
    text-align: left;
}

.colodd {
    padding-left:               2px;
    padding-right:              2px;
    text-align:                 left;
}

.innercolodd {
    border:                     solid #94c1d4 1px;
    font-size:                  .75em;
    padding-left:               2px;
    padding-right:              2px;
    text-align:                 left;
}

.innercoleven {
    border:                     solid #94c1d4 1px;
    background-color:           #e5f5fd;
    font-size:                  .75em;
    padding-left:               2px;
    padding-right:              2px;
    text-align:                 left;
}    

.onehundred_percent {
    width:                      100%;
    }

.seventyfive_percent {
    width:                      75%;
    }

.fifty_percent {
    width:                      50%;
    }

.fortyfive_percent {
    width:                      45%;
    }

.forty_percent {
    width:                      40%;
    }

.twentyfive_percent {
    width:                      25%;
    }

.fifteen_percent {
    width:                      15%;
    }

input, select, textarea {
    color:                      #006699;
    border:                     1px solid #94c1d4;
    margin:                     5px;
    }
    
input.submit {
    margin-left:                5px;
    border:                     #94c1d4 dotted 1px;
    background-color:           #e5f5fd;
    font-size:                  85%;
    }

label {
    text-align:                 right;
    vertical-align:             middle;
    color:                      #94c1d4;
    }

.login {
    font-size:                  85%;
    width:                      6em;
    }