body { font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif; background: #dfe6e9; } #layout { display: flex; margin: 0 auto; } #menu { width: 15%; margin: 60px 5px; overflow: auto; } #menu p { margin: 0; } #menu>p { font-weight: bold; font-size: 110%; } #menu ul { padding-left: 20px; } #main { width: 80%; max-width: 1200px; position: relative; background: #fff; margin: 60px auto; box-shadow: 0px 2px 38px rgba(0, 0, 0, 0.2); padding: 25px; overflow: auto; } #parentLink { float: right; margin-top: 20px; } #title { margin: 0; padding-top: 10px; } img { max-width: 100%; } pre { white-space: pre-wrap; word-wrap: anywhere; } iframe.pdf-view { width: 100%; height: 800px; } #toggleMenuButton { display: none; position: fixed; top: 8px; left: 5px; width: 1.4em; border-radius: 5px; border: 1px solid #aaa; font-size: 2rem; z-index: 10; height: auto; color: black; cursor: pointer; } #childLinks.grid ul { list-style-type: none; display: flex; flex-wrap: wrap; padding: 0; } #childLinks.grid ul li { width: 180px; height: 140px; padding: 10px; } #childLinks.grid ul li a { display: flex; flex-direction: column; height: 100%; width: 100%; border: 1px solid #ddd; border-radius: 5px; justify-content: center; align-content: center; text-align: center; font-size: large; } #childLinks.grid ul li a:hover { background: #eee; } #childLinks.list ul { list-style-type: none; display: inline-flex; flex-wrap: wrap; padding: 0; margin-top: 5px; } #childLinks.list ul li { margin-right: 20px; } #noteClippedFrom { padding: 10px 0 10px 0; margin: 20px 0 20px 0; color: #666; border: 1px solid #ddd; border-left: 0; border-right: 0; } #toggleMenuButton::after { position: relative; top: -2px; left: 1px; } @media (max-width: 48em) { #layout.showMenu #menu { display: block; margin-top: 40px; } #toggleMenuButton { display: block; } #layout.showMenu #main { display: none; } #title { padding-left: 60px; } #layout.showMenu #toggleMenuButton::after { content: "«"; } #toggleMenuButton::after { content: "»"; } #menu { display: none; } }