| /* Global */ |
| body { |
| background: white; |
| color: black; |
| font-family: Arial, sans-serif; |
| } |
| h1, h2, h3, h4, h5 { |
| font-weight: normal; |
| } |
| p, li { |
| font-size: 10pt; |
| } |
| p { |
| line-height: 1.6em; |
| } |
| li, pre { |
| line-height: 1.3em; |
| } |
| pre, code { |
| font-size: 10pt; |
| font-family: Consolas, monospace; |
| } |
| a { |
| color: #5588aa; |
| text-decoration: none; |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| /* Layout */ |
| body { |
| text-align: center; |
| } |
| #container { |
| margin-left: auto; |
| margin-right: auto; |
| text-align: left; |
| width: 800px; |
| } |
| #content { |
| width: 550px; |
| } |
| #sidebar { |
| width: 220px; |
| float: right; |
| } |
| #footer { |
| clear: both; |
| padding-top: 20px; |
| text-align: center; |
| } |
| |
| /* Heading */ |
| #heading { |
| margin: 30px 0; |
| font-size: 150%; |
| font-weight: normal; |
| } |
| #heading a { |
| color: black; |
| } |
| #heading img { |
| margin-left: -30px; |
| margin-right: 10px; |
| margin-bottom: -15px; |
| } |
| |
| /* Sidebar */ |
| #sidebar h1 { |
| font-size: 100%; |
| } |
| #sidebar li { |
| list-style-type: none; |
| } |
| #sidebar ul { |
| list-style-type: none; |
| padding: 0; |
| } |
| |
| /* Content */ |
| #content h1.title { |
| font-size: 130%; |
| } |
| #content h1.title a { |
| color: inherit; |
| text-decoration: none; |
| } |
| #content h1.title a:hover { |
| color: #5588aa; |
| text-decoration: underline; |
| } |
| #content h1, #content h2, #content h3, #content h4, #content h4 { |
| font-size: 100%; |
| } |
| #content .date { |
| text-transform: uppercase; |
| color: #999; |
| letter-spacing: .2em; |
| font-size: 8pt; |
| } |
| #content .author { |
| font-style: italic; |
| } |
| #content .article { |
| margin-bottom: 50px; |
| } |
| #content img { |
| max-width: 550px; |
| } |
| |
| /* Code and playground */ |
| .code pre, .playground pre, .output pre { |
| margin: 0; |
| padding: 0; |
| background: none; |
| border: none; |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| } |
| .code, .playground, .output { |
| margin: 20px; |
| padding: 10px; |
| -webkit-border-radius: 5px; |
| -moz-border-radius: 5px; |
| border-radius: 5px; |
| } |
| .code, .playground { |
| background: #e9e9e9; |
| } |
| .output { |
| background: #202020; |
| } |
| .output .stdout, .output pre { |
| color: #e6e6e6; |
| } |
| .output .stderr, .output .error { |
| color: rgb(244, 74, 63); |
| } |
| .output .system, .output .exit { |
| color: rgb(255, 209, 77) |
| } |
| .buttons { |
| position: relative; |
| float: right; |
| top: -50px; |
| right: 30px; |
| } |
| .output .buttons { |
| top: -60px; |
| right: 0; |
| height: 0; |
| } |
| .buttons .kill { |
| display: none; |
| visibility: hidden; |
| } |
| |
| /* Index */ |
| .tags { |
| color: #ccc; |
| font-size: smaller; |
| } |