ecmarkup.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909
  1. body {
  2. display: flex;
  3. font-size: 18px;
  4. line-height: 1.5;
  5. font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
  6. padding: 0;
  7. margin: 0;
  8. color: #111;
  9. }
  10. #spec-container {
  11. padding: 0 20px;
  12. flex-grow: 1;
  13. flex-basis: 66%;
  14. box-sizing: border-box;
  15. overflow: hidden;
  16. }
  17. body.oldtoc {
  18. margin: 0 auto;
  19. }
  20. a {
  21. text-decoration: none;
  22. color: #206ca7;
  23. }
  24. a:visited {
  25. color: #206ca7;
  26. }
  27. a:hover {
  28. text-decoration: underline;
  29. color: #239dee;
  30. }
  31. code {
  32. font-weight: bold;
  33. font-family: Consolas, Monaco, monospace;
  34. white-space: pre;
  35. }
  36. pre code {
  37. font-weight: inherit;
  38. }
  39. pre code.hljs {
  40. background-color: #fff;
  41. margin: 0;
  42. padding: 0;
  43. }
  44. ol.toc {
  45. list-style: none;
  46. padding-left: 0;
  47. }
  48. ol.toc ol.toc {
  49. padding-left: 2ex;
  50. list-style: none;
  51. }
  52. var {
  53. color: #2aa198;
  54. transition: background-color 0.25s ease;
  55. cursor: pointer;
  56. }
  57. var.referenced {
  58. background-color: #ffff33;
  59. }
  60. emu-const {
  61. font-family: sans-serif;
  62. }
  63. emu-val {
  64. font-weight: bold;
  65. }
  66. emu-alg ol, emu-alg ol ol ol ol {
  67. list-style-type: decimal;
  68. }
  69. emu-alg ol ol, emu-alg ol ol ol ol ol {
  70. list-style-type: lower-alpha;
  71. }
  72. emu-alg ol ol ol, ol ol ol ol ol ol {
  73. list-style-type: lower-roman;
  74. }
  75. emu-eqn {
  76. display: block;
  77. margin-left: 4em;
  78. }
  79. emu-eqn.inline {
  80. display: inline;
  81. margin: 0;
  82. }
  83. emu-eqn div:first-child {
  84. margin-left: -2em;
  85. }
  86. emu-note {
  87. margin: 1em 0;
  88. color: #666;
  89. border-left: 5px solid #ccc;
  90. display: flex;
  91. flex-direction: row;
  92. }
  93. emu-note > span.note {
  94. flex-basis: 100px;
  95. min-width: 100px;
  96. flex-grow: 0;
  97. flex-shrink: 1;
  98. text-transform: uppercase;
  99. padding-left: 5px;
  100. }
  101. emu-note[type=editor] {
  102. border-left-color: #faa;
  103. }
  104. emu-note > div.note-contents {
  105. flex-grow: 1;
  106. flex-shrink: 1;
  107. }
  108. emu-note > div.note-contents > p:first-of-type {
  109. margin-top: 0;
  110. }
  111. emu-note > div.note-contents > p:last-of-type {
  112. margin-bottom: 0;
  113. }
  114. emu-figure {
  115. display: block;
  116. }
  117. emu-example {
  118. display: block;
  119. margin: 1em 3em;
  120. }
  121. emu-example figure figcaption {
  122. margin-top: 0.5em;
  123. text-align: left;
  124. }
  125. emu-figure figure,
  126. emu-example figure,
  127. emu-table figure {
  128. display: flex;
  129. flex-direction: column;
  130. align-items: center;
  131. }
  132. emu-production {
  133. display: block;
  134. margin-top: 1em;
  135. margin-bottom: 1em;
  136. margin-left: 5ex;
  137. }
  138. emu-grammar.inline, emu-production.inline,
  139. emu-grammar.inline emu-production emu-rhs, emu-production.inline emu-rhs,
  140. emu-grammar[collapsed] emu-production emu-rhs, emu-production[collapsed] emu-rhs {
  141. display: inline;
  142. padding-left: 1ex;
  143. margin-left: 0;
  144. }
  145. emu-grammar[collapsed] emu-production, emu-production[collapsed] {
  146. margin: 0;
  147. }
  148. emu-constraints {
  149. font-size: .75em;
  150. margin-right: 1ex;
  151. }
  152. emu-gann {
  153. margin-right: 1ex;
  154. }
  155. emu-gann emu-t:last-child,
  156. emu-gann emu-nt:last-child {
  157. margin-right: 0;
  158. }
  159. emu-geq {
  160. margin-left: 1ex;
  161. font-weight: bold;
  162. }
  163. emu-oneof {
  164. font-weight: bold;
  165. margin-left: 1ex;
  166. }
  167. emu-nt {
  168. display: inline-block;
  169. font-style: italic;
  170. white-space: nowrap;
  171. text-indent: 0;
  172. }
  173. emu-nt a, emu-nt a:visited {
  174. color: #333;
  175. }
  176. emu-rhs emu-nt {
  177. margin-right: 1ex;
  178. }
  179. emu-t {
  180. display: inline-block;
  181. font-family: monospace;
  182. font-weight: bold;
  183. white-space: nowrap;
  184. text-indent: 0;
  185. }
  186. emu-production emu-t {
  187. margin-right: 1ex;
  188. }
  189. emu-rhs {
  190. display: block;
  191. padding-left: 75px;
  192. text-indent: -25px;
  193. }
  194. emu-mods {
  195. font-size: .85em;
  196. vertical-align: sub;
  197. font-style: normal;
  198. font-weight: normal;
  199. }
  200. emu-production[collapsed] emu-mods {
  201. display: none;
  202. }
  203. emu-params, emu-opt {
  204. margin-right: 1ex;
  205. font-family: monospace;
  206. }
  207. emu-params, emu-constraints {
  208. color: #2aa198;
  209. }
  210. emu-opt {
  211. color: #b58900;
  212. }
  213. emu-gprose {
  214. font-size: 0.9em;
  215. font-family: Helvetica, Arial, sans-serif;
  216. }
  217. h1.shortname {
  218. color: #f60;
  219. font-size: 1.5em;
  220. margin: 0;
  221. }
  222. h1.version {
  223. color: #f60;
  224. font-size: 1.5em;
  225. margin: 0;
  226. }
  227. h1.title {
  228. margin-top: 0;
  229. color: #f60;
  230. }
  231. h1.first {
  232. margin-top: 0;
  233. }
  234. h1, h2, h3, h4, h5, h6 {
  235. position: relative;
  236. }
  237. h1 .secnum {
  238. text-decoration: none;
  239. margin-right: 10px;
  240. }
  241. h1 span.title {
  242. order: 2;
  243. }
  244. h1 { font-size: 2.67em; margin-top: 2em; margin-bottom: 0; line-height: 1em;}
  245. h2 { font-size: 2em; }
  246. h3 { font-size: 1.56em; }
  247. h4 { font-size: 1.25em; }
  248. h5 { font-size: 1.11em; }
  249. h6 { font-size: 1em; }
  250. h1:hover span.utils {
  251. display: block;
  252. }
  253. span.utils {
  254. font-size: 18px;
  255. line-height: 18px;
  256. display: none;
  257. position: absolute;
  258. top: 100%;
  259. left: 0;
  260. right: 0;
  261. font-weight: normal;
  262. }
  263. span.utils:before {
  264. content: "⤷";
  265. display: inline-block;
  266. padding: 0 5px;
  267. }
  268. span.utils > * {
  269. display: inline-block;
  270. margin-right: 20px;
  271. }
  272. h1 span.utils span.anchor a,
  273. h2 span.utils span.anchor a,
  274. h3 span.utils span.anchor a,
  275. h4 span.utils span.anchor a,
  276. h5 span.utils span.anchor a,
  277. h6 span.utils span.anchor a {
  278. text-decoration: none;
  279. font-variant: small-caps;
  280. }
  281. h1 span.utils span.anchor a:hover,
  282. h2 span.utils span.anchor a:hover,
  283. h3 span.utils span.anchor a:hover,
  284. h4 span.utils span.anchor a:hover,
  285. h5 span.utils span.anchor a:hover,
  286. h6 span.utils span.anchor a:hover {
  287. color: #333;
  288. }
  289. emu-intro h1, emu-clause h1, emu-annex h1 { font-size: 2em; }
  290. emu-intro h2, emu-clause h2, emu-annex h2 { font-size: 1.56em; }
  291. emu-intro h3, emu-clause h3, emu-annex h3 { font-size: 1.25em; }
  292. emu-intro h4, emu-clause h4, emu-annex h4 { font-size: 1.11em; }
  293. emu-intro h5, emu-clause h5, emu-annex h5 { font-size: 1em; }
  294. emu-intro h6, emu-clause h6, emu-annex h6 { font-size: 0.9em; }
  295. emu-intro emu-intro h1, emu-clause emu-clause h1, emu-annex emu-annex h1 { font-size: 1.56em; }
  296. emu-intro emu-intro h2, emu-clause emu-clause h2, emu-annex emu-annex h2 { font-size: 1.25em; }
  297. emu-intro emu-intro h3, emu-clause emu-clause h3, emu-annex emu-annex h3 { font-size: 1.11em; }
  298. emu-intro emu-intro h4, emu-clause emu-clause h4, emu-annex emu-annex h4 { font-size: 1em; }
  299. emu-intro emu-intro h5, emu-clause emu-clause h5, emu-annex emu-annex h5 { font-size: 0.9em; }
  300. emu-intro emu-intro emu-intro h1, emu-clause emu-clause emu-clause h1, emu-annex emu-annex emu-annex h1 { font-size: 1.25em; }
  301. emu-intro emu-intro emu-intro h2, emu-clause emu-clause emu-clause h2, emu-annex emu-annex emu-annex h2 { font-size: 1.11em; }
  302. emu-intro emu-intro emu-intro h3, emu-clause emu-clause emu-clause h3, emu-annex emu-annex emu-annex h3 { font-size: 1em; }
  303. emu-intro emu-intro emu-intro h4, emu-clause emu-clause emu-clause h4, emu-annex emu-annex emu-annex h4 { font-size: 0.9em; }
  304. emu-intro emu-intro emu-intro emu-intro h1, emu-clause emu-clause emu-clause emu-clause h1, emu-annex emu-annex emu-annex emu-annex h1 { font-size: 1.11em; }
  305. emu-intro emu-intro emu-intro emu-intro h2, emu-clause emu-clause emu-clause emu-clause h2, emu-annex emu-annex emu-annex emu-annex h2 { font-size: 1em; }
  306. emu-intro emu-intro emu-intro emu-intro h3, emu-clause emu-clause emu-clause emu-clause h3, emu-annex emu-annex emu-annex emu-annex h3 { font-size: 0.9em; }
  307. emu-intro emu-intro emu-intro emu-intro emu-intro h1, emu-clause emu-clause emu-clause emu-clause emu-clause h1, emu-annex emu-annex emu-annex emu-annex emu-annex h1 { font-size: 1em; }
  308. emu-intro emu-intro emu-intro emu-intro emu-intro h2, emu-clause emu-clause emu-clause emu-clause emu-clause h2, emu-annex emu-annex emu-annex emu-annex emu-annex h2 { font-size: 0.9em; }
  309. emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro h1, emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1, emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 { font-size: 0.9em }
  310. emu-clause, emu-intro, emu-annex {
  311. display: block;
  312. }
  313. /* Figures and tables */
  314. figure { display: block; margin: 1em 0 3em 0; }
  315. figure object { display: block; margin: 0 auto; }
  316. figure table.real-table { margin: 0 auto; }
  317. figure figcaption {
  318. display: block;
  319. color: #555555;
  320. font-weight: bold;
  321. text-align: center;
  322. }
  323. emu-table table {
  324. margin: 0 auto;
  325. }
  326. emu-table table, table.real-table {
  327. border-collapse: collapse;
  328. }
  329. emu-table td, emu-table th, table.real-table td, table.real-table th {
  330. border: 1px solid black;
  331. padding: 0.4em;
  332. vertical-align: baseline;
  333. }
  334. emu-table th, emu-table thead td, table.real-table th {
  335. background-color: #eeeeee;
  336. }
  337. /* Note: the left content edges of table.lightweight-table >tbody >tr >td
  338. and div.display line up. */
  339. table.lightweight-table {
  340. border-collapse: collapse;
  341. margin: 0 0 0 1.5em;
  342. }
  343. table.lightweight-table td, table.lightweight-table th {
  344. border: none;
  345. padding: 0 0.5em;
  346. vertical-align: baseline;
  347. }
  348. /* diff styles */
  349. ins {
  350. background-color: #e0f8e0;
  351. text-decoration: none;
  352. border-bottom: 1px solid #396;
  353. }
  354. del {
  355. background-color: #fee;
  356. }
  357. ins.block, del.block,
  358. emu-production > ins, emu-production > del,
  359. emu-grammar > ins, emu-grammar > del {
  360. display: block;
  361. }
  362. emu-rhs > ins, emu-rhs > del {
  363. display: inline;
  364. }
  365. tr.ins > td > ins {
  366. border-bottom: none;
  367. }
  368. tr.ins > td {
  369. background-color: #e0f8e0;
  370. }
  371. tr.del > td {
  372. background-color: #fee;
  373. }
  374. /* Menu Styles */
  375. #menu-toggle {
  376. font-size: 2em;
  377. position: fixed;
  378. top: 0;
  379. left: 0;
  380. width: 1.5em;
  381. height: 1.5em;
  382. z-index: 3;
  383. visibility: hidden;
  384. color: #1567a2;
  385. background-color: #fff;
  386. line-height: 1.5em;
  387. text-align: center;
  388. -webkit-touch-callout: none;
  389. -webkit-user-select: none;
  390. -khtml-user-select: none;
  391. -moz-user-select: none;
  392. -ms-user-select: none;
  393. user-select: none;;
  394. cursor: pointer;
  395. }
  396. #menu {
  397. display: flex;
  398. flex-direction: column;
  399. width: 33%; height: 100vh;
  400. max-width: 500px;
  401. box-sizing: border-box;
  402. background-color: #ddd;
  403. overflow: hidden;
  404. transition: opacity 0.1s linear;
  405. padding: 0 5px;
  406. position: fixed;
  407. left: 0; top: 0;
  408. border-right: 2px solid #bbb;
  409. z-index: 2;
  410. }
  411. #menu-spacer {
  412. flex-basis: 33%;
  413. max-width: 500px;
  414. flex-grow: 0;
  415. flex-shrink: 0;
  416. }
  417. #menu a {
  418. color: #1567a2;
  419. }
  420. #menu.active {
  421. display: flex;
  422. opacity: 1;
  423. z-index: 2;
  424. }
  425. #menu-pins {
  426. flex-grow: 1;
  427. display: none;
  428. }
  429. #menu-pins.active {
  430. display: block;
  431. }
  432. #menu-pins-list {
  433. margin: 0;
  434. padding: 0;
  435. counter-reset: pins-counter;
  436. }
  437. #menu-pins-list > li:before {
  438. content: counter(pins-counter);
  439. counter-increment: pins-counter;
  440. display: inline-block;
  441. width: 25px;
  442. text-align: center;
  443. border: 1px solid #bbb;
  444. padding: 2px;
  445. margin: 4px;
  446. box-sizing: border-box;
  447. line-height: 1em;
  448. background-color: #ccc;
  449. border-radius: 4px;
  450. }
  451. #menu-toc > ol {
  452. padding: 0;
  453. flex-grow: 1;
  454. }
  455. #menu-toc > ol li {
  456. padding: 0;
  457. }
  458. #menu-toc > ol , #menu-toc > ol ol {
  459. list-style-type: none;
  460. margin: 0;
  461. padding: 0;
  462. }
  463. #menu-toc > ol ol {
  464. padding-left: 0.75em;
  465. }
  466. #menu-toc li {
  467. text-overflow: ellipsis;
  468. overflow: hidden;
  469. white-space: nowrap;
  470. }
  471. #menu-toc .item-toggle {
  472. display: inline-block;
  473. transform: rotate(-45deg) translate(-5px, -5px);
  474. transition: transform 0.1s ease;
  475. text-align: center;
  476. width: 20px;
  477. color: #aab;
  478. -webkit-touch-callout: none;
  479. -webkit-user-select: none;
  480. -khtml-user-select: none;
  481. -moz-user-select: none;
  482. -ms-user-select: none;
  483. user-select: none;;
  484. cursor: pointer;
  485. }
  486. #menu-toc .item-toggle-none {
  487. display: inline-block;
  488. width: 20px;
  489. }
  490. #menu-toc li.active > .item-toggle {
  491. transform: rotate(45deg) translate(-5px, -5px);
  492. }
  493. #menu-toc li > ol {
  494. display: none;
  495. }
  496. #menu-toc li.active > ol {
  497. display: block;
  498. }
  499. #menu-toc li.revealed > a {
  500. background-color: #bbb;
  501. font-weight: bold;
  502. /*
  503. background-color: #222;
  504. color: #c6d8e4;
  505. */
  506. }
  507. #menu-toc li.revealed-leaf> a {
  508. color: #206ca7;
  509. /*
  510. background-color: #222;
  511. color: #c6d8e4;
  512. */
  513. }
  514. #menu-toc li.revealed > .item-toggle {
  515. transform: rotate(45deg) translate(-5px, -5px);
  516. }
  517. #menu-toc li.revealed > ol {
  518. display: block;
  519. }
  520. #menu-toc li > a {
  521. padding: 2px 5px;
  522. }
  523. #menu > * {
  524. margin-bottom: 5px;
  525. }
  526. .menu-pane-header {
  527. padding: 0 5px;
  528. text-transform: uppercase;
  529. background-color: #aaa;
  530. color: #335;
  531. font-weight: bold;
  532. letter-spacing: 2px;
  533. flex-grow: 0;
  534. flex-shrink: 0;
  535. font-size: 0.8em;
  536. }
  537. #menu-toc {
  538. display: flex;
  539. flex-direction: column;
  540. width: 100%;
  541. overflow: hidden;
  542. flex-grow: 1;
  543. }
  544. #menu-toc ol.toc {
  545. overflow-x: hidden;
  546. overflow-y: auto;
  547. }
  548. #menu-search {
  549. position: relative;
  550. flex-grow: 0;
  551. flex-shrink: 0;
  552. width: 100%;
  553. display: flex;
  554. flex-direction: column;
  555. max-height: 300px;
  556. }
  557. #menu-trace-list {
  558. display: none;
  559. }
  560. #menu-search-box {
  561. box-sizing: border-box;
  562. display: block;
  563. width: 100%;
  564. margin: 5px 0 0 0;
  565. font-size: 1em;
  566. padding: 2px;
  567. background-color: #bbb;
  568. border: 1px solid #999;
  569. }
  570. #menu-search-results {
  571. overflow-x: hidden;
  572. overflow-y: auto;
  573. }
  574. li.menu-search-result-clause:before {
  575. content: 'clause';
  576. width: 40px;
  577. display: inline-block;
  578. text-align: right;
  579. padding-right: 1ex;
  580. color: #666;
  581. font-size: 75%;
  582. }
  583. li.menu-search-result-op:before {
  584. content: 'op';
  585. width: 40px;
  586. display: inline-block;
  587. text-align: right;
  588. padding-right: 1ex;
  589. color: #666;
  590. font-size: 75%;
  591. }
  592. li.menu-search-result-prod:before {
  593. content: 'prod';
  594. width: 40px;
  595. display: inline-block;
  596. text-align: right;
  597. padding-right: 1ex;
  598. color: #666;
  599. font-size: 75%
  600. }
  601. li.menu-search-result-term:before {
  602. content: 'term';
  603. width: 40px;
  604. display: inline-block;
  605. text-align: right;
  606. padding-right: 1ex;
  607. color: #666;
  608. font-size: 75%
  609. }
  610. #menu-search-results ul {
  611. padding: 0 5px;
  612. margin: 0;
  613. }
  614. #menu-search-results li {
  615. white-space: nowrap;
  616. text-overflow: ellipsis;
  617. }
  618. #menu-trace-list {
  619. counter-reset: item;
  620. margin: 0 0 0 20px;
  621. padding: 0;
  622. }
  623. #menu-trace-list li {
  624. display: block;
  625. white-space: nowrap;
  626. }
  627. #menu-trace-list li .secnum:after {
  628. content: " ";
  629. }
  630. #menu-trace-list li:before {
  631. content: counter(item) " ";
  632. background-color: #222;
  633. counter-increment: item;
  634. color: #999;
  635. width: 20px;
  636. height: 20px;
  637. line-height: 20px;
  638. display: inline-block;
  639. text-align: center;
  640. margin: 2px 4px 2px 0;
  641. }
  642. @media (max-width: 1000px) {
  643. body {
  644. margin: 0;
  645. display: block;
  646. }
  647. #menu {
  648. display: none;
  649. padding-top: 3em;
  650. width: 450px;
  651. }
  652. #menu.active {
  653. position: fixed;
  654. height: 100%;
  655. left: 0;
  656. top: 0;
  657. right: 300px;
  658. }
  659. #menu-toggle {
  660. visibility: visible;
  661. }
  662. #spec-container {
  663. padding: 0 5px;
  664. }
  665. #references-pane-spacer {
  666. display: none;
  667. }
  668. }
  669. @media only screen and (max-width: 800px) {
  670. #menu {
  671. width: 100%;
  672. }
  673. h1 .secnum:empty {
  674. margin: 0; padding: 0;
  675. }
  676. }
  677. /* Toolbox */
  678. .toolbox {
  679. position: absolute;
  680. background: #ddd;
  681. border: 1px solid #aaa;
  682. display: none;
  683. color: #eee;
  684. padding: 5px;
  685. border-radius: 3px;
  686. }
  687. .toolbox.active {
  688. display: inline-block;
  689. }
  690. .toolbox a {
  691. text-decoration: none;
  692. padding: 0 5px;
  693. }
  694. .toolbox a:hover {
  695. text-decoration: underline;
  696. }
  697. .toolbox:after, .toolbox:before {
  698. top: 100%;
  699. left: 15px;
  700. border: solid transparent;
  701. content: " ";
  702. height: 0;
  703. width: 0;
  704. position: absolute;
  705. pointer-events: none;
  706. }
  707. .toolbox:after {
  708. border-color: rgba(0, 0, 0, 0);
  709. border-top-color: #ddd;
  710. border-width: 10px;
  711. margin-left: -10px;
  712. }
  713. .toolbox:before {
  714. border-color: rgba(204, 204, 204, 0);
  715. border-top-color: #aaa;
  716. border-width: 12px;
  717. margin-left: -12px;
  718. }
  719. #references-pane-container {
  720. position: fixed;
  721. bottom: 0;
  722. left: 0;
  723. right: 0;
  724. height: 250px;
  725. display: none;
  726. background-color: #ddd;
  727. z-index: 1;
  728. }
  729. #references-pane-table-container {
  730. overflow-x: hidden;
  731. overflow-y: auto;
  732. }
  733. #references-pane-spacer {
  734. flex-basis: 33%;
  735. max-width: 500px;
  736. }
  737. #references-pane {
  738. flex-grow: 1;
  739. overflow: hidden;
  740. display: flex;
  741. flex-direction: column;
  742. }
  743. #references-pane-container.active {
  744. display: flex;
  745. }
  746. #references-pane-close:after {
  747. content: '✖';
  748. float: right;
  749. cursor: pointer;
  750. }
  751. #references-pane table tr td:first-child {
  752. text-align: right;
  753. padding-right: 5px;
  754. }
  755. @media print {
  756. #menu-toggle {
  757. display: none;
  758. }
  759. }