/* Composition in the Treetable */
.mandatory {
  font-weight: bold;
}

/* Treetable */

div.tt-outer {			/* The wrapper for a Tree-Table structure */
  line-height: 1.7em;		/* Separate the lines by more than the height */
  margin: 10px;
}

.tt-node {			/* A node in a Tree-Table structure */
  line-height: 1.5em;
  background-color: #FFF;	/* Make the message stand out from the background */
  border: 3px ridge;            /* A nice border around each node */
  padding-left: 0.5em;          /* Start text a bit further inside the border */
  margin-left: 5px;		/* Indent each node this much further  */
  margin-right: -3px;		/* Overlay the right border of the outer object */
  margin-bottom: -3px;		/* Overlay the bottom border of the outer object */
}

.tt-list {			/* A node for an array or list of items */
  background: #DDF;		/* Make it stand out by colour */
  border: 4px ridge;		/* Use a slightly fatter border */
  margin-left: 1px;		/* Stand a little further to the left than our peers */
  margin-top: -3px;		/* Stand a little to upwards */
  margin-right: -3px;		/* Bring the right margin to the left as well */
  margin-bottom: 1px;		/* Leave room below for the shadow to show */
  box-shadow: 4px 4px 2px #888; /* Leave a shadow to the right and below */
}

.tt-list:before{
  content:'(N)  ';
  font-size: 8pt;
  vertical-align: top;
}

.tt-alt {
  border-radius: 10px 10px 0px 10px;  /* Use rounded corners */
  margin-top: 10px;		/* Leave a space above alternative items */
}
div:first-of-type.tt-alt {
  margin-top: 0px !important;	/* Don't leave a space above the first list item */
}
div:first-of-type.tt-alt:before {
  content:'either';
  font-size: 6pt;
}

.tt-alt:before{
  content:'or';
  font-size: 6pt;
}

.tt-desc {			/* Display the data item description */
  position: absolute;		/* Glue it to the right of the outer block */
  display: inline-block;
  border-left: 3px ridge;	/* Draw a vertical separator to the left */
  background: #FFF;		/* Ensure a long tt-type doesn't show through */
  right: 11px;			/* Fill the space to the far right, minus borders */
  left: 36em;			/* Start where the data type ends */
  padding: 0px 5px 4px 5px;	/* Leave room at the start and end */
  line-height: 1.5em;		/* Separate the lines by more than the height */
  height: 1.3em;		/* Clip the height to one line */
  overflow: hidden;		/* Don't attempt to show the whole text if it doesn't fit */
}

.tt-list > .tt-desc {
  background: #DDF;		/* Make it stand out by colour */
  padding-bottom: 6px;		/* -list has a bigger border, so the -desc needs to be taller */
}
.tt-type {			/* Display the data type */
  position: absolute;		/* Glue it just left of the description */
  display: inline-block;
  border-left: 3px ridge;	/* Draw a vertical separator to the left */
  left: 24em;			/* Start this far across */
  width: 12em;			/* Provide space for the type name */
  padding: 0px 5px 0px 5px;	/* Leave room at the start and end */
  line-height: 1.5em;		/* Separate the lines by more than the height */
  height: 1.4em;		/* Clip the height to one line */
  overflow: hidden;		/* Don't attempt to show the whole text if it doesn't fit */
}