/*******************************************************************************
 * Styles for web page layout template
 *
 * This style sheet contains global styles for the entire web site.  There are
 * styles designed to promote consistency within page content.  There are also
 * styles specifically designed for uniform layout and navigation.
 *
 * Consistency in content
 *   Various tags including body, header tags, hrefs, lists, etc. all have
 *   global, generic definitions here that then set the behaviour for all tags
 *   of that type.
 *
 * Uniform Layout and Navigation:
 *   header            -- what is displayed across the very top of the web page
 *     utility         -- links that provide utility functionality
 *     gui_bar         -- container for user interface
 *       site_nav_menu -- menu for web site navigation
 *       search        -- textbox and submit button for performing site searches
 *     page            -- container for the page specific content
 *       bread_crumb   -- trail marker from home page to current page
 *       page_title    -- logo, title and subtitle for page
 *       page_nav      -- side bar for within page navigation
 *       related_nav   -- side bar for related links
 *       content       -- specific content for the page
 *       footer        -- footer information (placed in content for appearance)
 ******************************************************************************/

/*******************************************************************************
 * Consistency Styles
 ******************************************************************************/

html,
body
{
  font-family      : Arial, sans-serif;
  line-height      : 1.166;
  margin           : 0;
  padding          : 0;
  background       : rgb(77,110,164) fixed;
}


/*******************************************************************************
 * Generic style classes that can apply to any tag
 ******************************************************************************/


a.debugclose
{
  background-color : rgb(175,0,0);
  border           : 1px solid rgb(0, 0, 0);
  color            : rgb(255, 255, 255);
  text-decoration  : none;
}

span.debug
{
  background-color : rgb(175,0,0);
  color            : rgb(255, 255, 255);
  padding          : 0;
  margin           : 0;
  text-decoration  : none;
  /*
  cursor           : help;
   */
}

span.glossary_note_web   { display          : inline; }
span.glossary_note_print { display          : none; }

span.debug a:link,
span.debug a:visited
{
  color            : rgb(255, 255, 255);
  text-decoration  : none;
  font-weight      : bold;
}

span.debug a:hover
{
  /*
  color            : rgb(255, 255, 255);
  cursor           : help;
  text-decoration  : underline;
  border-bottom    : 1px dashed rgb(0, 0, 0);
   */
}

div.debug
{
  background-color : rgb(255, 255, 204);
  border           : 0px solid rgb(0, 0, 0);
}

th.debug
{
  text-align       : right;
}

td.debug, th.debug
{
  white-space      : nowrap;
}

table.debug
{
  margin           : 10px;
  background-color : rgb(255, 255, 204);
}

.draft
{
  padding          : 16px 0 8px 40px;
  color            : rgb(200,200,0);
  font-size        : 0.8em;
  font-weight      : bold;
  font-style       : italic;
  font-variant     : small-caps;
}


/*******************************************************************************
 * Global styles for specific tags
 ******************************************************************************/

/******* table styles *******/

table
{
  border           : 0;
  margin-bottom    : 0;
  margin-left      : 0;
  margin-right     : 10px;
  margin-top       : 0;
  padding          : 0;
  border-collapse  : collapse;
}

td,
th
{
  border           : 0;
  margin           : 0;
  padding-bottom   : 0;
  padding-left     : 3px;
  padding-right    : 2px;
  padding-top      : 0;
  text-align       : left;
  vertical-align   : top;
}

th
{
  white-space      : nowrap;
}

/*************** No wrap **********************/
td.nw
{
  border           : 0;
  margin           : 0;
  padding-bottom   : 0;
  padding-left     : 3px;
  padding-right    : 2px;
  padding-top      : 0;
  vertical-align   : top;
  text-align       : left;
  white-space      : nowrap;
}

/******* hyperlink and anchor tag styles *******/

a:link,
a:visited
{
  color            : rgb(0,0,255);
}

/*
a:hover
{
  text-decoration  : underline;
}
 */

/************** header tag styles **************/

h1,
h2,
h3,
h4,
h5
{
  color            : rgb(0,0,100);
}

h1 { font : bold 114% Arial, sans-serif; }
h2 { font : bold 110% Arial, sans-serif; }
h3 { font : bold 105% Arial, sans-serif; }
h4 { font :      105% Arial, sans-serif; }
h5 { font :      105% Arial, sans-serif; }

h1.section,
h1.auto_section,
h2.section,
h2.auto_section,
h3.section
{
  color            : rgb(0,0,100);
  background-color : rgb(102,153,204);
/*  background-color : rgb(102, 153, 102); */
}

h1.footnote_section,
h2.footnote_section
{
  color            : rgb(0,0,100);
  font-variant     : small-caps;
  font-style       : italic;
  background-color : rgb(125,125,125);
}

/*************** list tag styles ***************/

ul       { list-style-type : disc;   }
ul ul    { list-style-type : circle; }
ul ul ul { list-style-type : none;   }

/********* form and related tag styles *********/

form
{
  margin           : 0;
  padding          : 0;
}

label
{
  font             : bold 1em Arial, sans-serif;
  color            : rgb(51, 77, 85);
}

input
{
  font-family      : Arial, sans-serif;
}


/*******************************************************************************
 * Layout Styles
 ******************************************************************************/

#popup
{
  background-color : rgb(187,204,221);
  margin           : 10px;
}


#splash
{
  position         : absolute;
  top              : 112px;
  left             : 2%;
  right            : 2%;
  width            : auto;
  z-index          : 5;
  background-color : rgb(187,204,221);
  border           : 0;
/*  margin           : 0 auto; */
/*  padding          : 5px; */
  text-align       : center;
}


#page
{
  position         : absolute;
  top              : 112px;
  left             : 2%;
  right            : 2%;
  width            : auto;
/*  margin-bottom    : 10px; */
/*  padding-bottom   : 10px; */
  background-color : rgb(102,153,204);
}

#page_top_curve_left
{
  position         : absolute;
  top              : -1px;
  left             : -1px;
  margin           : 0;
  padding          : 0;
  z-index          : 10;
  height           : 6px;
  width            : 6px;
  display          : none;
}

#page_top_curve_right
{
  position         : absolute;
  top              : -1px;
  right            : -1px;
  margin           : 0;
  padding          : 0;
  z-index          : 10;
  height           : 6px;
  width            : 6px;
  display          : none;
}

#header
{
  position         : absolute;
  top              : 0;
  left             : 2%;
  right            : 2%;
  width            : auto;
}

#page_nav_none
{
  width            : auto;
  padding          : 0;
  background-color : rgb(102,153,204);
  border-bottom    : 1px solid rgb(204, 204, 204);
  font             : 80% Arial, sans-serif;
  font-weight      : bold;
}

#page_nav
{
  float            : left;
  background-color : rgb(102,153,204);
  border-bottom    : 1px solid rgb(187,204,221);
  border-top       : 1px solid rgb(187,204,221);
  border-right     : 0px solid rgb(187,204,221);
  font             : 80% Arial, sans-serif;
  font-weight      : normal;
  min-width        : 128px;
  padding          : 0;
  width            : 128px;
}

#content
{
  background-color : rgb(187,204,221);
  border-left      : 1px solid rgb(136, 187, 187);
  border-top       : 1px solid rgb(136, 187, 187);
  margin-left      : 128px;
  margin-right     : 1px;
/*  min-width        : 640px; */
  padding          : 5px 10px 10px 10px;
}

#content_no_nav
{
  padding          : 5px 10px 10px 10px;
  border-top       : 1px solid rgb(136, 187, 187);
  background-color : rgb(187,204,221);
  margin           : 1px;
  min-width        : 640px;
}


/*******************************************************************************
 * Component Styles
 ******************************************************************************/

a.site_name
{
  color            : rgb(221,221,221);
  text-decoration  : none;
}

span.site_name
{
  margin           : 0;
  padding          : 0;
  color            : rgb(221,221,221);
  font-weight      : bold;
  font-size        : 18pt;
  vertical-align   : top;
  text-align       : center;
}

#site_name
{
  margin           : 0;
  padding          : 8px 0 8px 0;
  color            : rgb(221,221,221);
  font-weight      : bold;
  vertical-align   : middle;
}

#site_name a:link,
#site_name a:visited,
#site_name a:hover
{
  color            : rgb(221,221,221);
  text-decoration  : none;
  vertical-align   : middle;
}


/************** utility styles *****************/

#utility
{
  font             : 75% Verdana, sans-serif;
  position         : absolute;
  top              : 16px;
  right            : 0;
  color            : rgb(221,221,221);  /*  Vertical pipes between links */
}

#utility a:link,
#utility a:visited
{
  color            : rgb(221,221,221);
  text-decoration  : none;
}

#utility a:hover
{
  text-decoration  : underline;
}

/************** page_title styles ****************/

#page_header
{
  padding          : 1px 1px 1px 1px;
  vertical-align   : middle;
}

#page_title
{
  padding          : 0 0 0 10px;
  margin           : 0;
  height           : 80px;
/*
  border    : 1px solid rgb(204, 210, 210);
*/
}

#page_title h1
{
  font             : bold 175% Arial, sans-serif;
  color            : rgb(0,0,100);
  margin           : 0;
  padding          : 0 40px 0 0;
  display          : inline;
}

#page_title h2
{
  font             : bold italic 135% Arial, sans-serif;
  color            : rgb(0,0,100);
  margin           : 0;
  padding          : 0;
  display          : inline;
}

#page_title h3
{
  font             : bold italic 125% Arial, sans-serif;
  color            : rgb(0,0,100);
  margin           : 0;
  padding          : 0;
  display          : inline;
}

#page_title h4
{
  font             : bold italic 115% Arial, sans-serif;
  color            : rgb(0,0,100);
  margin           : 0;
  padding          : 0;
  display          : inline;
}

#page_title img
{
  position         : absolute;
  top              : 0;
  right            : 6px;
  padding          : 0;
  margin           : 0;
}

/************* gui_bar styles ****************/

#gui_bar
{
  background-color : rgb(102,153,204);
  color            : rgb(0,0,51);
  min-width        : 800px;
  position         : relative;
  width            : 100%;
/*  height           : 32px; */
/*  margin           : 0; */
/*  padding          : 0; */
}

#gui_bar img
{
  margin-bottom    : -4px;
}

#gui_bar_img_left {
  display          : none;
  height           : 28;
  left             : 0;
  position         : absolute;
  top              : 0;
  width            : 4;
}
 
#gui_bar_img_right {
  display          : none;
  height           : 28;
  position         : absolute;
  right            : 0;
  top              : 0;
  width            : 4;
}

#site_nav_menu
{
  height           : 22px;
  left             : 10px;
  min-width        : 640px;
  padding          : 0;
  position         : absolute;
  margin           : 0;
  top              : 6px;
  z-index          : 9;
}

#print_page
{
  font-size        : 80%;
  height           : 20px;
  padding          : 3px;
  position         : absolute;
  right            : 0;
  top              : 84px;
  display          : inline;
}

#print_page a:link,
#print_page a:visited,
#print_page a:active
{
  color            : rgb(221,221,221);
  text-decoration  : none;
  display          : inline;
}

#print_page a:hover
{
  text-decoration  : underline;
}

a.site_nav,
a.site_nav:visited
{
/*  border-right     : 1px solid rgb(0,0,51); */
  color            : rgb(0,0,51);
  font-size        : small;
  font-weight      : bold;
  margin           : 0;
  padding          : 2px 5px 4px 5px;
  text-decoration  : none;
}

a.site_nav:hover
{
  background-color : rgb(77,110,164);
  color            : rgb(221,221,221);
  text-decoration  : none;
}

.skipLinks
{
  display          : none;
}

/************ sub_site_nav styles **************/

.sub_site_nav
{
  color            : rgb(221,221,221);
  height           : 20px;
  left             : 0;
  min-width        : 640px;
  padding          : 0 0 0 10px;
  position         : absolute;
  top              : 84px;
  visibility       : hidden;
}

.sub_site_nav a:link,
.sub_site_nav a:visited
{
  font-size        : 80%;
  font-weight      : bold;
  color            : rgb(221,221,221);
  text-decoration  : none;
}

.sub_site_nav a:hover
{
  background-color : rgb(102,153,204);
  color            : rgb(0,0,51);
  text-decoration  : none;
}

/*************** search styles *****************/

#search
{
  position         : absolute;
  right            : 10px;
  top              : 5px;
  z-index          : 10;
}

#search input
{
  font-size        : 70%;
  margin           : 0;
}

#search label
{
  color            : rgb(0,0,51);
  font-size        : 80%;
  margin           : 0;
}

#search a:link,
#search a:visited
{
  font-size        : 80%;
  font-weight      : bold;
}

#search a:hover
{
  margin           : 0;
}


/************* bread_crumb styles ***************/

#bread_crumb
{
  color            : rgb(204,204,238);
  font             : small Verdana, sans-serif;
  padding          : 5px 0 5px 10px;
  position         : relative;
  height           : 10px;
}

#bread_crumb a
{
  color            : rgb(102, 102, 102);
}

#bread_crumb a:hover
{
  color            : rgb(0, 80, 9);
  text-decoration  : underline;
}


/************** footer styles ****************/

.footer_left,
.footer_center,
.footer_right
{
  white-space      : nowrap;
  width            : 33%;
}

.footer_left
{
  text-align       : left;
  vertical-align   : top;
}

.footer,
.footer_center,
.footer_bottom
{
  text-align       : center;
  vertical-align   : middle;
}

.footer_right
{
  text-align       : right;
  vertical-align   : top;
}

.footer_bottom
{
  width            : 100%;
}

.footer
{
  color            : rgb(0,0,100);
}


table.footer_no_nav,
table.footer_splash
{
  width : 100%;
}

#footer_no_nav
{
  display          : table;
  vertical-align   : top;
  text-align       : center;
  white-space      : nowrap;
  clear            : both;
  color            : rgb(0,0,100);
  background-color : rgb(102,153,204);

  margin-left      : 0;
/*  margin-right     : 0; */
  width            : 98%;

/*  margin-left      : auto; */
/*  margin-right     : auto; */
/*  margin-top       : 1px; */
/*  margin-bottom    : 1px; */

/*  width            : auto; */
  padding          : 5px;
}

#footer_splash
{
  display          : table;
  vertical-align   : top;
  text-align       : center;
  white-space      : nowrap;
  clear            : both;
  color            : rgb(0,0,51);
  background-color : rgb(187,204,221);
  border-top       : 1px solid rgb(0, 0, 0);

  margin-left      : 0;
/*  margin-right     : 0; */
  width            : 98%;

/*  margin-left      : auto; */
/*  margin-right     : auto; */
/*  margin-top       : 1px; */
/*  margin-bottom    : 1px; */

/*  width            : auto; */
  padding          : 5px;
}

#footer
{
  display          : table;
  vertical-align   : top;
  text-align       : center;
  white-space      : nowrap;
  clear            : both;
  color            : rgb(0,0,100);
  background-color : rgb(102,153,204);

  margin-top       : 1px;
  margin-bottom    : 1px;
  margin-left      : 64px;

/*  margin-left      : 128px; */
/*  margin-right     : auto; */
/*   width            : auto; */
  padding          : 0;
}

#footer_no_nav td,
#footer_splash td,
#footer td
{
  font-size        : 9pt;
}

#footer img
{
  padding          : 4px 4px 4px 0;
  vertical-align   : middle;
}


/************ section_nav styles **************/

#section_nav
{
  margin           : 0;
  padding          : 0;

}

#section_nav h3
{
  font-size        : smaller;
  color            : rgb(0,0,100);
  padding          : 0;
  margin           : 5px 0 0 0;
/*  padding          : 10px 0 2px 10px; */
/*  border-bottom    : 1px solid rgb(204, 204, 204); */
}

#section_nav a:link,
#section_nav a:visited
{
  display          : block;
  border-top       : 0 solid rgb(255, 255, 255);
  border-bottom    : 0 solid rgb(204, 204, 204);
  background-color : rgb(102,153,204);
  color            : rgb(0,0,100);
  font-size        : smaller;
  font-weight      : bold;
  padding          : 3px 0 3px 3px;
  text-decoration  : none;
}

#section_nav a:hover
{
  font-size        : smaller;
  border-top       : 0 solid rgb(204, 204, 204);
  background-color : rgb(77,110,164);
  color            : rgb(221,221,221);
  background-image : none;
  font-weight      : bold;
  text-decoration  : none;
}


/************* related_nav styles **************/

.related_nav
{
  margin           : 0;
  padding          : 0 0 10px 10px;
  border-bottom    : 1px solid rgb(204, 204, 204);
}

.related_nav h3
{
  font-size        : smaller;
  color            : rgb(0,0,51);
  padding          : 0;
  margin           : 5px 0 0 0;
}

.related_nav a
{
  display          : block;
  font-size        : smaller;
  color            : rgb(0,0,51);
  background-color : rgb(102,153,204);
}