* { box-sizing: border-box; } body { margin: 0; background-color: #463C65; font-family: sans-serif; font-size: 14px; } h2, h3 { font-size: 120%; } h2:target, h3:target { background-color: #dfd; } h3 { padding-left: 1em; font-size: 110%; } address { color: white; text-align: center; margin: 1em; } .nav { width: 20%; position: absolute; top: 0; } .nav ul { list-style: none; margin: 0; padding: 1%; } .nav li { padding: 0 1em; border-radius: 4px; margin-bottom: .3em; background-color: #62548F; } .nav li a { display: block; width: 100%; } .nav h2 { color: white; text-align: center; font-size: 300%; font-weight: bold; text-transform: uppercase; font-family: serif; } ul.nav li.header { background-color: #463C65; } .content, h1 { padding: 2%; margin: 0 0 0 20%; background-color: #DDDAEC; } h1 { font-family: serif; color: #23457F; font-size: 400%; line-height: 2em; font-weight: bold; text-transform: uppercase; text-align: center; letter-spacing: .15em; } th.heading { color: #23457F; text-align: left; } td { background-color: white; line-height: 2em; font-size: 120%; padding-left: .5em; } td:hover { background-color: #eee; } tr.err td { background-color: #7E0202; color: white; } tr.err td:hover { background-color: #DA0404; } tr.warn td { background-color: orange; } tr.warn td:hover { background-color: #FFBB3E; } .nav a { font-size: 150%; line-height: 1.5em; text-decoration: none; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .warn a { color: orange; } .err a { color: #F06F74; } .nav li:hover { min-width: 100%; width: max-content; } .nav a:hover { color: white; } h2 small, h3 small { padding-left: .5em; visibility: hidden; } h2:hover small, h3:hover small { visibility: visible; }