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;
}