body {

margin: 0px;
padding: 0px;

}

/* Size of sections when dynamically hidden by controls (incl with a transition) */ .glossary-doc.hide-facts dd { max-height: 0px; margin-bottom: 0px; } .glossary-doc.hide-alternates .glossary-alternates { max-height: 0px; } .glossary-doc.hide-constraints .glossary-constraints { max-height: 0px; } .glossary-doc.hide-examples .glossary-example { max-height: 0px; }

.glossary {

position: relative;
height: 100%;
font-family: "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;

}

.glossary-compositions {

position: absolute;
left: 0px; right: 456px;        /* as main item with glossary on right */
margin-right: 0px;
overflow: auto;
height: 100%;

}

.glossary-doc {

position: absolute;
display: block;
background: #FFF;
overflow: auto;
top: 0px;
bottom: 0px;

}

.glossary-doc > * {

padding-left: 20px;

}

.glossary-doc.glossary-toc-right {

/* Table of contents at right */
left: 0px; right: 450px;
border-right: solid #EEE 3px;

}

.glossary-doc.glossary-toc-left {

/* Table of contents at right */
left: 450px; right: 0px;

}

.glossary-controls {

/* the glossary is the table of contents for something else */
width: 450px; right: 0px;
border-left: solid #DDD 3px;
border-right: solid #DDD 3px;   /* To here */

}

.glossary-doc.glossary-is-toc {

/* the glossary is the table of contents for something else */
width: 450px; right: 0px;
border-left: solid #DDD 3px;
border-right: solid #DDD 3px;   /* To here */
bottom: 25px;                   /* Leave room for the controls */

}

.glossary-toc {

position: absolute;
display: block;
height: 100%;
margin: 0;
border-left: solid #DDD 3px;
border-right: solid #DDD 3px;
background: #EEE;
font-family: "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;

}

.glossary-toc.glossary-toc-right {

right: 0px; width: 450px;       /* Sidebar at right */

}

.glossary-toc.glossary-toc-left {

left: 0px; width: 450px;        /* Sidebar at left */

}

.glossary-toc.glossary-is-toc {

right: 0px; width: 0px;         /* Hidden */

}

.glossary-toc-list {

position: absolute;
top: 0px;
bottom: 24px;
width: 100%;
overflow: auto;
margin: 0;
padding: 0 0;
list-style: none;

}

.glossary-controls {

position: absolute; bottom: 0px;
border: solid #DDD 3px;
background: #DDD;

}

.glossary-controls > * {

width: 24%;
padding: 0px;

}

.glossary-toc-list li {

padding: 0px 1em 0px 1em;

}

.glossary-toc-list li:hover {

background: #DDD;

}

.glossary-doc dl, .screenheight {

margin-bottom: 2400px;  /* ensure we can scroll any item to the top of the screen */

}

/* Hover controls: comment out to leave it under toggle button control */ .glossary-doc dt:hover + dd, /* When hovering over the head, show the contents */ .glossary-doc dd:hover, /* Keep showing the contents when we slide into it */ /* .glossary-doc dt:hover + dd .glossary-alternates, /* Show the alternates when you hover over the head */ /* .glossary-doc dt:hover + dd .glossary-constraints, /* Show the constraints when you hover over the head */ .glossary-doc dt:hover + dd .glossary-example, /* Show the examples when hovering over the head */ .glossary-doc dd:hover .glossary-example /* Keep showing the examples when we slide into the body */ { max-height: 2000px;

XXmargin-bottom: 30px;  /* ease-out works both ways if animating this :( */
background: #DDD;

}

/* After the hover moves away, wait a while before hiding */ .glossary-doc dd {

transition: max-height 1s;
transition-timing-function: ease-out;
overflow: hidden;
max-height: 2000px;   /* Animate this to zero to hide */
margin-bottom: 30px;  /* Some clearance from the next term */
margin-left: 40px;    /* Indent it from the head term */

}

.glossary-doc dd > * {

font-size: smaller;

}

.glossary-doc dt, .glossary-facttype > .glossary-reading, .glossary-objectification {

margin-left: 20px;
text-indent: -20px;

}

.glossary-alternates .glossary-reading, .glossary-objectification .glossary-reading {

display: inline;

}

.glossary-alternates {

font-size: smaller;
overflow: hidden;
text-indent: -10px;
padding-left: 10px;

}

.glossary-example {

overflow: hidden;

}

.glossary-doc dd .glossary-constraints {

margin-left: -40px;   /* Extend the highlight further left */
text-indent: 40px;

}

.glossary-constraints {

/* a block of constraints */
background: #EDC;
padding: 0px;
overflow: hidden;

} .glossary-constraint {

margin-left: 70px;  /* 30 added to the 40 from above */
text-indent: -10px; /* Ensure that wrap is indented */
font-size: smaller;

} .glossary-constraint .keyword {

background: #EDC;
font-style: italic;

}