body { max-width: 800px; font-family: sans-serif; margin: 80px auto; padding: 20px; } h2,h3,h4 { padding-top: 3ex; } h3 b { font-size: 2em; } nav { position: fixed; z-index: 2; background: #222; left: 0; right: 0; top: 0; width: 100%; text-align: center; line-height: 2em; } nav a { padding: .5em .25em; color: #FFF; text-decoration: none; } dt { font-weight: lighter; margin: .5em 0 } dd span { display: block; color: #33F; margin-top: .5em; } table { width: 100%; } td { text-align: center; font-size: 0.9em; } h3 + table { margin-top: -4em; } tr.rotate>th>div { width: 0px; height: 9em; word-break: keep-all; } tr.rotate>th { transform-origin: 0 100%; transform: translateX(50%) translateX(9em) translateX(-1ex) rotate(-90deg); padding-left: .5em; } .home { display: inline-block; background: url(./home.svg) no-repeat; width: 1em; margin-bottom: -2px; } .red { color: #A00; font-weight: bold; } .small { font-size: 0.9em; } .m0, .m1, .m2, .m3, .m4, .m5 { color: #000; } .m6, .m7, .m8, .m9, .m10, .m11, .m12, .m13, .m14, .m15 { color: #FFF; } .m0 { background: #ffffff; } .m1 { background: #e5e5ff; } .m2 { background: #ccccff; } .m3 { background: #b2b2ff; } .m4 { background: #9999ff; } .m5 { background: #7f7fff; } .m6 { background: #6666ff; } .m7 { background: #4c4cff; } .m8 { background: #3232ff; } .m9 { background: #1919ff; } .m10 { background: #0000ff; } .m11 { background: #0000e5; } .m12 { background: #0000cc; } .m13 { background: #0000b2; } .m14 { background: #000099; } .m15 { background: #000033; } .tabwidth>div { display: inline-block; width: 5em; text-align: left; } .tabwidth>div>div { display: inline-block; width: 3em; text-align: right; } .runelist>div { display: inline-block; padding-right: 2px; } .ioc-list>div { display: inline-block; padding: 2px 5px; text-align: center; } .ioc-list.one>div { width: .5em; } .ioc-list.two>div { width: 1em; } .ioc-list.four>div { width: 2em; } .link-list a { background: #222; color: #FFF; padding: 6px 10px; line-height: 2em; text-decoration: none; border-radius: 5px; }