body{
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

/*******************************************************************************
 * header */
.header {
  background-color: SteelBlue;
  width: 100%;
  height: 100px;
  color: white;
}
.header td{
  color: white;
  padding: 8px;
}
.header h2 {
  margin: 0px;
}
.header #logo {
  max-height: 82px;
}

/*******************************************************************************
 * section-title is the horizontal header that declares the classname, methods, etc. */
.section-title {
  background-color: SteelBlue;
  color: white;
  margin-top: 0;
  padding: 5px;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 2px;
}
.section-title span {
  float: right;
  margin-top: -5px;
}
.section-title.methods {
  margin-top: 1em;
  background-color: #B5CDE1;
  font-size: .9em;
}
tr {
  vertical-align: top;
}

/*******************************************************************************
 * display the tags like author, date, description, params, return value, etc. */
.details {
  width: 100%;
}
.details th{
  background-color: whitesmoke;
  color: black;
  font-size: .7em;
  padding: 6px 3px;
  text-align: right;
}
.details th.paramHeader{
  background-color: white;
  color: black;
  text-align: left;
}
.details th.param{
  background-color: whitesmoke;
  color: black;
  padding-left: 10px;
}
.details td{
  font-size: .7em;
  width: 90%;
}
pre, code {
  font-size: 120%;
  white-space: pre-wrap;
}
pre {
  margin-left: 20px;
}

/*******************************************************************************
 * properties is used to display the table of class properties */
.properties {
  width: 100%;
}
.properties td {
  vertical-align: top;
  width: 90%;
}
.clsPropertyName {
  font-size: .7em;
  font-weight: bold;
  text-align: right;
}
.clsPropertyDeclaration {
  font: normal .7em Courier;
  color: SteelBlue;
}
.clsPropertyDescription {
  font-size: .7em;
  font-weight: normal;
}

/*******************************************************************************
 * constants is used to display the table of class constants */
.constants {
  width: 100%;
}
.constants td {
  vertical-align: top;
  width: 90%;
}
.clsConstantName {
  font-size: .7em;
  font-weight: bold;
  text-align: right;
}
.clsConstantDeclaration {
  font: normal .7em Courier;
  color: SteelBlue;
}
.clsConstantDescription {
  font-size: .7em;
  font-weight: normal;
}
.clsConstantValue {
  font-size: .7em;
  text-decoration: underline;
}

/*******************************************************************************
 * trigger is the set of styles to provide the expand/collapse bar */
h2.trigger {
  margin: 0 0 2 0;
  background-color: #ccc;
  font-size: .8em;
  font-weight: bold;
  padding: 2px;
}
h2.trigger a {
  color: #888;
  text-decoration: none;
}
h2.trigger a:hover {
  color: whitesmoke;
}
h2.trigger input {
  width: 24px;
}
h2.active {
  background-position: left bottom;
} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

/*******************************************************************************
 * section that gets shown/hidden when the trigger is expanded/collapsed */
.toggle_container {
  padding: 10px;
}
.toggle_container_subtitle {
  font: normal .8em Courier;
  color: SteelBlue;
  padding-bottom: 5px;
}

/*******************************************************************************
 * menu of class names */
.leftmenus {
  width: 20%;
  float: left;
}
.leftmenus ul {
  margin: 0 10px 0 0;
  padding: 0;
}
.leftmenus li {
  display: block;
  background-color: #e6e6e6;
  cursor: pointer;
}
.leftmenus a {
  color: black;
  padding: 8px;
  display: inline-block;
  width: calc(100% - 16px);
}
.leftmenus li:hover {
  font-weight: bold;
  background-color: whitesmoke;
}

div.page {
  float: left;
  width: 80%;
  max-height: 100%;
  overflow: auto;
}

/*******************************************************************************
 * footer */
#footer {
  font-size: 10px;
  width: 100%;
}