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