/* Minimal Reset */ body, hr, nav, article, figure, h1 { margin: 0; padding: 0; } html { font-family: "Atkinson Hyperlegible","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; font-size: 16px; line-height: 1.6; color: #222; text-rendering: optimizeLegibility; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* requires */ } @media (max-width: 1080px) { html { font-size: 125%; } article { font-size: 2em; } } a { color: #00B; } a:hover, a:focus, h1 a:hover { color: #00B !important; /* !important for the h1 only */ text-decoration: underline; } a:visited { color: #007; } h1 a, h1 a:visited { text-decoration: none; color: inherit; } h1, h2 { text-shadow: 2px 2px 2px #EEE; } /* Sometimes headers need to clear, sometimes they don't. */ .clearboth { clear: both; } h1,h2 { margin-top: 0.2rem } h2 { font-size: 120%; } h3 { margin-bottom: 0.2em; } aside { max-width: 15rem; margin-right: 0; float: right; clear: both; } aside.left { float: left; } aside, table, figure, footer, pre code { font-size: 80%; } aside, table, figure, img, code { margin: 0; background-color: #EEE; box-shadow: 0px 0px 1px 1px #EEE; } aside code { /* since the aside itself is #EEE backgrounded, make code a little darker */ background-color: #DDD; box-shadow: 0px 0px 1px 1px #DDD; } pre, code, kbd, samp { font-family: "Menlo","Courier","Consolas","Courier New",monospace; font-size: 90%; } code { background-color: #EEE; padding: 1px; overflow: auto; } pre { margin-top: 0.5em; } pre code { display: block; /* this block content doesn't really need to be backgrounded */ background-color: inherit; box-shadow: inherit; padding-left: 1em; border-left: 0.25em solid #EEE; } figure img, img.noshadow { /* undo above for img inside figure */ box-shadow: none; } figure { text-align: center; /* center images inside the figure, and caption text too */ float: right; max-width: 45rem; margin-bottom: 0.5em; padding: 1px; } figcaption { /* adjust the caption up a little */ position: relative; top: -0.18em; font-size: 85%; } aside, table { padding: 0.5em; margin: 0.5em; margin-top: 0; } blockquote { border-left: 0.25em solid #EEE; margin-left: 0; padding-left: 1em; } abbr { border-bottom: 1px dotted black; } nav, #content { display: inline-block; padding: 0.5rem 1rem; } nav { width: 15rem; margin-right: 10vw; vertical-align: top; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAASklEQVQYlY2QOw7AMAhDuf9VWd7C7EyRaGLaDpb42oYABCgzteOOqhKgcE2H6FsnyzX4hm0pzsKUfzLaY5y3B+P0ml/So0cn22sLC9Z8++wzv38AAAAASUVORK5CYII=) repeat; border-right: 1px solid #B7B7B7; border-bottom: 1px solid #B7B7B7; /* height: 300vh; */ } nav ul { padding: 0; } nav ul li { list-style-type: none; margin-bottom: 1em; } #content { min-height: 100vh; width: 45rem; word-wrap: break-word; } article { max-width: 45em; } article header p { color: #999; margin: 0; } article img, article object { max-width: 100%; } hr { border: 0; height: 1px; margin: 2em 0; } ul li { list-style-type: circle; } table { border-collapse: collapse; } /* TODO: grab a better table styling from somewhere */ thead { border-bottom: 3px solid #B7B7B7; /* same as nav border-right */ } tr { background-color: #DDE8F4; } th, td { border-right: 3px solid #B7B7B7; padding: 0.2em 0.5em; } span.keywords { float: right; } .keywords { font-size: 80%; margin-right: 1em; } /* CSS Tooltip. Nice and easy. Downside: No HTML markup inside */ .tooltip { /* Tooltip anchor */ display: inline; position: relative; border-bottom: 1px dotted black; } .tooltip:hover:after { /* Tooltip popup */ font-family: "Helvetica Neue",sans-serif; /* Don't inherit, for tooltips inside code/pre */ font-size: 80%; background: rgba(0, 0, 0, 0.8); border-radius: 5px; bottom: 26px; color: #DDD; content: attr(data-tooltip); left: -50%; padding: 0.2rem 0.5rem; position: absolute; z-index: 98; width: 30rem; } .tooltip:hover:before { /* Tooltip triangle */ border: solid; border-color: rgba(0, 0, 0, 0.8) transparent; border-width: 10px 10px 0 10px; z-index: 99; content: ""; position: absolute; bottom: 16px; left: 0; } .notice { background: rgba(0,0,0, 0.8); color: #DDD; padding: 0.5rem 1rem; box-shadow: 0px 0px 1px 1px #333; } .notice a, .notice a:hover { color: #DDF !important; } .nowrap { white-space: nowrap; } .todo { color: white; background-color: red; }