/**************************************************************************************************
 *  Reset all padding and margins to zero for browser consistency.  Without this there was a
 *  margin of about 20px around the h5 elements.  This caused the footer sections to expand in
 *  height.  This was undesired behavior!  I found info about this at:
 *
 *  http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
 *
 *  1-19-2009
 *
 **************************************************************************************************/

* {
  padding: 0;
  margin: 0;
}

body {
  color:#000000;
  background-color:#444444;
  padding: 10px;
}

h4, h5 {
  font-size: .75em;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

h4 {
  font-size: .9em;
}

/*****************************************************************************************************************************
 *  Make the entire wrapper "position: relative;".  This will force all absolute positioned elements to be measured from the
 *  wrapper instead of from the edge of the entire window.  I had the position set to absolute and absolute position images
 *  were offset from there.  This posed a problem when one resized the window because the wrapper would move closer or
 *  farther away from the side of the entire window, but the absolute offsets were the same.  The effect of this was that
 *  absolutely positioned images would move from where I wanted them.
 *
 *  The "auto" designation on the margin property centers the page in the window.  It will also re-center as the window is
 *  expanded or shrunk.
 *
 *  1-21-2010
 *****************************************************************************************************************************/

div#container {
  display: table;
  position: relative;
  padding: 0px;
  margin: 0 auto;
  wi-dth: 1130px;
  hei-ght: 800px;
  width: 1300px;
  height: 920px;
  border: 2px solid #000000;
  background-color: #9a9a9a;
  table-layout: fixed;
  wi-dth: 100%;
  hei-ght: 100%;
}

.RowTable {
  display: table;
  width: 100%;
}

/**************************************************************************************************
 *  There was a problem with aligning the <h4> text in two of the footer cells with an email image.
 *  The email image is 30 pixels high and the <h4> elements are 35 pixels.  Without the vertical-align
 *  property there was an extra line above the text and one below the image.  This default behavior is
 *  shown by vertical-align: none;.  Setting it to middle, top or bottom removes the text/image mismatch
 *  and aligns things as expected.
 *
 *  1-19-2009
 *
 **************************************************************************************************/

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#Header {
  width: 100%;
  height: 130px;
  height: 130px;
  bor-der-bottom: 2px solid #000000;
  background-color: ;
}

#HeaderLeft,  #HeaderRight {
  width: 15%;
  background-color: #f-4b953;
}

#HeaderCenter {
  padding: 5px;
  width: 70%;
  bo-rder-left: 2px solid #000000;
  bor-der-right: 2px solid #000000;
  background-color: #a-f8847;
}
#HeaderCenter img {
  width: 75%;
}

#MainMenuWrapper {
  hei-ght: 25px;
  width: 100%;
  background-color: ;
}

#MiddleLeft,  #MiddleRight {
  wid-th:  10%;
  width: 100px;
  font-size: .8em;
  text-align: left;
  padding: 5px;
  background-color: -salmon;
}

#MiddleLeft h2, #MiddleRight h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
}

#MiddleLeft a, #MiddleRight a {
  font-size: 1em;
  font-weight: bold;
  color: black;
}

#MiddleCenter {
  wi-dth: 80%;
  background-color: #e2e2e2;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
}

#Middle {
  width: 100%;
  height: 610px;
  height: 730px;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

.dividers {
  text-align: center;
  font-weight: bold;
  color: maroon;
  margin: 5px;
}

.centered {
  text-align: center;
}

#Footer img {
  margin: 0;
  padding: 0;
}

#Footer {
  width: 100%;
  background-color: yellow  height: 35px;
  he-ight: 35px;
}

#FooterLeft,  #FooterRight {
  width:  20%;
  background-color: ;
}

#FooterCenter {
  width: 60%;
  background-color: ;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
}

/********************************************************************************************************
 *
 *  Main Menu Navigation Bar - Implemented as a series of nested unordered lists using CSS.
 *
 *******************************************************************************************************/

/*  Main menu  --  display: table; and margin: 0 auto; are required to center the menu bar.  If the
 *  display: table-row; and/or the margin property are missing the menu bar will be left justified.
 *
 *  1-19-2010
 *
 */

/*  Wrapper for the entire menu.  */

#MainMenu {
  display: table;
  margin: 0 auto;
  margin-top: 2px;
  margin-bottom: 2px;
}

/*  This is the main menu.  Remove all styling and add back as needed.  Setting "display: table-row;"
 *  is suppose to keep the menu from wrapping to multiple lines and has to do with anonymous boxes.
 *  I got this from "Everything You Know About CSS Is Wrong" p 61.
 */

ul#navbar {
  display: table-row;
  list-style: none;
}

/*  This makes the maim menu horizontal.  Don't specify a height and let the list item expand to fit
 *  the size of the text.  The text is tagged as an anchor.
 */

ul#navbar li {
  float: left;
  position: relative;
  border: 1px solid #000;
}

/*  "display: block; causes the anchor to expand to fill the list item space. It also is needed to
 *  to make the sub-menu items be the same size.  Without this they will collapse to the size of the
 *  text.  The second declaration pertains to the sub-menus.  The result is that each menu item in the
 *  main menu and all the lower sub-menus will have the same color.
 */

ul#navbar li a, ul#navbar li ul li a {
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  text-align: left;
  display: block;
  font-size: 0.9em;
  background-color:#7f7f7f;
  color:#000000;
}

/*
 *  When hovering over a list element in the ul with id "navbar" change the color of the anchor and
 *  its background.  This has the effect of leaving the color changed while traversing sub-menus.
 *  The first declaration pertains to the main menu and the second one controls the sub-menus.
 *
 *  1-20-2010
 */

ul#navbar li:hover > a, ul#navbar li ul li a:hover {
  color:#ffffff;
  background-color:#5d5d5d;
}

/*  Sub-menus:  The z-index needs to be set to at least 1.  Otherwise the dropdown menu will be behind the "Welcome"
 *              page while viewing a project.
 */

ul#navbar li ul {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  z-index: 1;
}

ul#navbar li:hover > ul {
  display: block;
}

/*
 *  This sets a uniform width for the sub-menu item boxes.  Without the "width: 6em;" property each
 *  item box would be a different size based on the string in the box.  If "ul#navbar li a" was used
 *  the main menu bar would also have equal size boxes.  This is not the desired behavior.  I want
 *  the main menu items to be different size based on the text.  I think this looks nicer.  The desired
 *  behavior is to have the main menu boxes be of varied size and have all the sub-menus have equal
 *  size boxes.
 *
 *  1-19-2010
 */

ul#navbar li ul li a {
  width: 6em;
  pad-ding-right: 100px;
}

/*  2nd level sub menus.  */

ul#navbar li ul li ul {
  display: none;
  position: absolute;
  top: 0%;
  left: 100%;
}

ul#navbar li ul li:hover > ul {
  display: block;
}

/*
 *  Have an image displayed when hovering over a selectable item.  "position: absolute;" causes the
 *  image and the menu item to be aligned at the top.  Thus if the menu item is lower down the list
 *  the image will be displayed lower down the page.  There is an img tag in the list item together
 *  with the selectable anchor.  The "top" property moves the image down the specified number of pixels
 *  from the top of the selected menu item.
 *
 *  1-20-2010
 */

ul#navbar li img {
  display: none;
  width: 200px;
  border: 2px solid #000000;
  position: absolute;
  top: 20px;
  left: 120%;
}

ul#navbar li:hover > img {
  display: block;
}

/********************************************************************************************************
 *
 *  End Main Menu Navigation Bar - Implemented as a series of nested unordered lists using CSS.
 *
 *******************************************************************************************************/

/*
 *  These next items style the "Awards Menu."    The desired behavior is that when one hovers over the "Awards"
 *  main menu item the "Awards" choices appear.  Then when hovering over one of these choices an image along with
 *  a description will appear.  This is the same behavior as for the gallery except a description has been added.
 *  The words are governed by the span designation, but it seems the image is not.  I don't understand this
 *  because the image is included in the span.  By setting the width the height of the span box will grow as
 *  needed and the image will follow suit.  In addition the width setting sizes the image also.  Even though
 *  things look the way that I want, i.e. the picture is directly below the words and framed correctly, there is
 *  something wrong because I had to offset the image to get things to line up.  The extra offset is the
 *  thickness of the border, which currently is set to three.  The "top: 20%;" in the span moves the entire block
 *  down.  The "top: 100%;" in the image moves image to just below the span block.  This is important because the
 *  span block can get bigger if the words are longer.  This is the desired behavior.
 */

ul#navbar li span {
  display: none;
  position: absolute;
  width:  200px;
  left: 110%;
  top: 20%;
  border: 3px solid #000000;
  border-bottom: none;
  background-color: #5d5d5d;
  back-ground-color: darkgray;
  color: white;
}

ul#navbar li span img {
 left: -3px;
 top: 100%;
 border: 3px solid #000000;
}

#navbar li span h4 {
 padding-top: 5px;
 padding-bottom: 5px;
 font-size: 14pt;
}

#navbar li span h5 {
 padding-bottom: 2px;
 font-size: 8pt;
}

#navbar li:hover > span img, #navbar li:hover > span  {
 display: block;
}

/********************************************************************************************************
 *
 *  End Main Menu Navigation Bar - Implemented as a series of nested unordered lists using CSS.
 *
 *******************************************************************************************************/
.leftsidecontent, .rightsidecontent {
 overflow: hidden;
 height: 600px;
 height: 720px;
}

.rightsidecontent img {
border: medium double black;
height: 100px;
}

#xx {
bakcground-color: red;
}