body {
  font-family: Optima, Verdana, Geneva, Arial, sans-serif;
  font-size: 80%;
  color: #000000;
  background-color: #FFFAE7;
  background-image: url("");
  text-align: center;
  margin: 0px;
}


p {
  font-size: 1em;
  padding-top: 1em;
  line-height: 1.4em;
}


/* The primary partitioning is into 5 horizontal boxes: 
   banner, spacer, main, spacer, footer */

#banner {
  font-family: Arial, sans-serif;
  font-size: 150%;
  width: 100%;
  height: 120px;
}



.spacer {
  clear: left;
  width: 100%;
  height: 8px;
  overflow: hidden;
}



#main {
  width: 950px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}



.footer {
  text-align: center;
  width: 950px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}


.footer a:link, .footer a:visited {
  color: #663300;
}
.footer a:hover, .footer a:active {
  color: #008000;
}


.footer td {
  font-size: 76%;
}



/* The main box is partitioned vertically into 4 boxes:
   gutter, vmenu, topic, gutter */

.gutter {
  width: 1px;
  float: left;
}



.vmenu {
  width: 175px;
  height: auto;
  float: left;
  border-right: 2px solid #663300;
}



.topic {
  padding: 5px 20px 5px 15px;
  text-align: left;
  color: #000000;
  background-color: #FFFAE7;
  background-image: url("");
  float: left;
  width: 700px;
  height: auto;
  /* border settings - whether it actually appears is determined by border-style */
  border-width: 4px;
  border-color: #663300 #CCCCCC #FFFFFF #990000;
  border-style: none;
}



/* The vmenu consists of any number of boxes stacked vertically within
   the vmenu box.  Each menu item (box) should have a single table with
   a single row with a single cell containing a hyperlink.  The currently-
   selected vmenu item should be of class vmenusel; all of the others 
   should be of class vmenudim. */

.vmenudim {
  width: 100%;
}

.vmenudim td, .vmenusel td {
  text-align: right;
  padding: 0px;
}

.vmenudim td a {
  color: #663300;
  background-color: #FFFAE7;
  font-size: 85%;
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 0px;
}

.vmenudim td a:hover {
  background-color: #4CB859;
  color: #004000;
}

.vmenusel td a:hover {
  background-color: #663300;
  color: #FFFFFF;
}

.vmenusel {
  background-color: #663300;
  width: 100%;
}

.vmenusel td a {
  color: #FFFFFF;
  font-size: 85%;
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 0px;
}



/* Each topic consists of an overview box at the top, an hmenu of 1 to 3 tabs,
   and detailed information for each tab/example. */

.overview {
  width: 100%;
  height: auto;
}

.overview a:link, .overview a:visited {
  color: #663300;
}
.overview a:hover, .overview a:active {
  color: #008000;
}



.egspacer {
  clear: left;
  width: 100%;
  height: 15px;
  padding: 0px;
  overflow: hidden;
}



.eg {
  width: 100%;
  height: auto;
  padding: 0px;
  border-bottom: 2px solid #663300;
}



.hmenu {
  width: 100%;
  height: auto;
  float: left;
  border-width: 2px 0px;
  border-style: solid;
  border-color: #663300;
}



/* As for the vmenu, there are "dim" and "sel" versions of the boxes for the
   hmenu.  There need to be distinct classes for each tab-set, depending on the
   number of tabs (2 or 3, currently), because the width of the tabs is a 
   property of the box and needs to vary with the number of tabs. */

.hmenusel1 {
  background-color: #663300;
  width: 100%;
  float: left;
}

.hmenudim2 {
  width: 50%;
  float: left;
}

.hmenusel2 {
  background-color: #663300;
  width: 49%;
  float: left;
}

.hmenudim2r {
  width: 50%;
  float: right;
}

.hmenusel2r {
  background-color: #663300;
  width: 49%;
  float: right;
}

.hmenudim3 {
  width: 33%;
  float: left;
}

.hmenusel3 {
  background-color: #663300;
  width: 33%;
  float: left;
}

.hmenudim3r {
  width: 33%;
  float: right;
}

.hmenusel3r {
  background-color: #663300;
  width: 33%;
  float: right;
}

.hmenudim4 {
  width: 25%;
  float: left;
}

.hmenusel4 {
  background-color: #663300;
  width: 25%;
  float: left;
}

.hmenudim4r {
  width: 24%;
  float: right;
}

.hmenusel4r {
  background-color: #663300;
  width: 24%;
  float: right;
}

.hmenusel1 td, 
.hmenudim2 td, .hmenusel2 td, .hmenudim2r td, .hmenusel2r td, 
.hmenudim3 td, .hmenusel3 td, .hmenudim3r td, .hmenusel3r td, 
.hmenudim4 td, .hmenusel4 td, .hmenudim4r td, .hmenusel4r td {
  text-align: center;
  padding: 0px;
}

.hmenudim2 td a, .hmenudim2r td a, 
.hmenudim3 td a, .hmenudim3r td a, 
.hmenudim4 td a, .hmenudim4r td a {
  color: #663300;
  background-color: #FFFAE7;
  font-size: 85%;
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 0px;
}

.hmenudim2 td a:hover, .hmenudim2r td a:hover, 
.hmenudim3 td a:hover, .hmenudim3r td a:hover, 
.hmenudim4 td a:hover, .hmenudim4r td a:hover {
  background-color: #4CB859;
  color: #004000;
}

.hmenusel2 td a:hover, .hmenusel2r td a:hover, 
.hmenusel3 td a:hover, .hmenusel3r td a:hover, 
.hmenusel4 td a:hover, .hmenusel4r td a:hover {
  background-color: #663300;
  color: #FFFFFF;
}

.hmenusel1 td a, 
.hmenusel2 td a, .hmenusel2r td a, 
.hmenusel3 td a, .hmenusel3r td a, 
.hmenusel4 td a, .hmenusel4r td a {
  color: #FFFFFF;
  font-size: 85%;
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 0px;
}



/* The details for each tab */

.detspacetop {
  clear: left;
  background-color: #FFFAE7;
  background-image: url("");
  width: 100%;
  height: 10px;
  padding: 0px;
  overflow: hidden;
}
  


.detail {
  background-color: #FFFAE7;
  background-image: url("");
  width: 100%;
  height: auto;
  padding: 0px;
}

.detail a:link, .detail a:visited {
  color: #663300;
}
.detail a:hover, .detail a:active {
  color: #008000;
}



.detail td {
  color: #000000;
  font-size: 76%;
  padding: 0px;
}



.detfig {
  float: right;
  width: 260px;
  padding: 0px 0px 0px 10px;
  margin: 0px 0px 15px 15px;
  text-align: center;
}


.detcap {
  clear: right;
  text-align: center;
}


.detspacer {
  clear: both;
  background-color: #FFFAE7;
  background-image: url("");
  width: 100%;
  height: 20px;
  padding: 0px;
  overflow: hidden;
}


.rollover { display: block; }
.rollover img { width: 100%; height: 100%; border: 0; }
.rollover:hover { visibility: visible; }
.rollover:hover img { visibility: hidden; }


.thumbleft {
  float: left;
  padding-right: 10px;
}

.thumbright {
  float: right;
  padding-left: 10px;
}

.quipright {
  text-align: right;
}

.quipleft {
  text-align: left;
}



/* hide H1 headings - highlighted selected menu items provide same info
   visually to the user, but the headings are used by SOs to determine 
   page contents, so keep them in the page source for that purpose */

h1 {
  font-size: 0;
  color: #FFFAE7;
  margin: 0px;
}