/* Ben's Cascading Style Sheet */


/* main body font */
body
{
  font-family: 'serif';
}


/* Settings for table that fill screen */
table.main
{
  width: 100%;
  height: 90%;
  text-align: left;
  border: 0px;
  cellpadding: 0px;
  cellspacing: 0px
}


/* header bar of main table */
th.main
{
  background-color: black;
  height: 55px;
  vertical-align: middle;
  text-align: left;
}


/* Main Title (in th.main) */
span.Title
{ 
  color: white;
  font-size: 250%;
  padding-left: 80px;
}


/* Sub Title (after Main Title) */
span.subTitle
{
  color: white;
  /*font-size: 100%; */
  padding-left: 50px;
  vertical-align: bottom;
}


/* Right Side main body cell */
td.right_col
{
  /*padding-top: 5px;*/
  vertical-align: top;
}


/* Left navigation */
td.left_col
{
  vertical-align: top;
  width: 160px;
  padding-top: 5px;
}

/* Path navigation (top of right col)*/
td.path
{
  text-align: right;
  color: #A7A09A;
  font-size: 75%;
  padding-top: 5px;
  padding-right: 5px;
  vertical-align: top;
}


/* All paragraph text */
p
{
  text-indent: 20pt;
}

/* path hyperlinks */
td.path a         { text-decoration: none; color: #A7A09A; }
td.path a:link    {  }
td.path a:visited {  }
td.path a:active  {  }
td.path a:hover   { color: black; border-bottom: 1px solid; }

/* text hyperlinks in paragraph text */
td.right_col a         { font-weight: bold; text-decoration: none; color: Black; }
td.right_col a:link    { border-bottom: 1px solid; }
td.right_col a:visited { border-bottom: 1px dashed; }
td.right_col a:active  { border-bottom: 1px solid; color: White;  background-color: black; }
td.right_col a:hover   { border-bottom: 1px solid; }



/* Footer */
p.footer
{
  text-align: center;
  color: #A7A09A;
  text-indent: 0px;
}


/* this is a divider */
span.divider
{ 
  padding: 2px;
  padding-left: 3px;
  display: block;
  border-style: solid;
  border-width: 2px 0px 0px 6px;
  border-color: black;
  font-weight: bold;
  margin-top: 50px;
  /*margin-bottom: 0px; */
  margin-left: 0px;
  /*margin-right: 100px;*/
  text-indent: 0px;
  width: 300px;
  font-size: 150%;
}

img
{
  border: 0px solid;
}


/******************/
/***  For menu  ***/
/******************/
/* NOTE: For this to work in IE, you need this at the top of your html: */
/* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> */
/* This doesn't work: */
/* <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> */
/* Adapted from: http://meyerweb.com/eric/css/edge/menus/demo.html */
/* Which seems to be the simplest CSS popup menu that also works in IE. */

/* The main menu container. */
ul#topmenu
{
  padding: 0;  /* Remove default padding and margin so we can */
  margin: 0;   /* customize everything. */
  width: 150px;     /* width of root menu */
  position: fixed; /* Fix to screen, not page */
}

/* The style of the list items in the main menu and sub menus. */
/* Note that the sub menu overrides some of these parameters. */
ul#topmenu li
{
  list-style-type: none; /*remove default bullets */
  position: relative; /*positioned relative to its normal position.  Required for an 'absolute' below. */
  margin-bottom: 5px; /* some space between the items */
  border-style: solid;   /* these 3 lines put the main menu border style on */
  border-width: 0px 0px 2px 6px;
  border-color: #000000;
}

/* any link in the menu */
ul#topmenu a
{
  display: block; /* generate a block box */
  padding: 5px 7px;
  text-decoration: none; /* remove link underlines */
  color: black;
  font-size: 16px;  /* make text bigger */
  font-weight: bold; 
}

/* The sub menu */
ul#topmenu ul
{
  display: none; /* hide */
}

/* The sub menu when mouse over the main menu item */
ul#topmenu li:hover > ul
{
  padding: 0; /* This needs to be reset here */
  margin: 0;
  display: block; /* show */
  position: absolute; /*relative to the first parent element that has a position other than static*/
  top: 0px;  /* Even with top of main menu item */
  left: 155px; /* position the sub menu to the right of the main menu a little.  the empty space will be taken up later. */
  width: 160px; /* width of sub menu */
  border-style: solid;   /* put a border around the entire UL to create a line on the left. */
  border-width: 0px 0px 0px 6px;
  border-color: black;
  background: white; /* so text does not show through menu */
}

/* A sub menu list item when mouse over main menu item */
ul#topmenu > li:hover > ul > li
{
  border-width: 0px 0px 2px 0px; /* only bottom border */
}

/* Any hover on an 'a' under li under #topmenu */
/* This highlights the main and sub menu items on hover. */
ul#topmenu li a:hover
{
  background: black;
  color: white;
} 

/* Only direct decendants. */
/* This keeps the main menu item highlighted when hovering on the sub menu. */
ul#topmenu > li:hover > a
{
  background: black; /* highlight main menu item */
  color: white;
  text-align: right;
} 

/* Only direct decendants. */
/* This extends the black bar of the selected main menu item to remove white space between the menus */
ul#topmenu > li:hover
{
  margin-right: -11px;
} 

/* This keeps a constant black bar on the sub-menu header item */
ul#topmenu li:hover ul li:first-child a 
{
  background-color: black;
  color: black;
}




