/* 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 */

}