.note-latest { background-color: #FFFF9F; padding: 16px 24px 16px 24px; display: inline-block; border-radius: 8px; font-weight: 900; } body { margin:0; padding: 0; font-family: 'Open Sans', sans-serif; } #header {width: 100%; } #main { max-width:960px; margin: 0 auto 0 auto; } .example { width:100%; height: 540px;; margin: 0; padding:0; } .example iframe {width: 100%; height: 540px; margin: 0; padding:0; border: none; } #main .example { width:100%; height: 400px; } #main .example iframe {width: 100%; height: 400px; } h1 { font-family: 'Fredericka the Great', cursive; font-weight: normal; font-size: 4em; line-height: 1.5em; margin: 32px 0px 0px 0px; padding: 0; } h2 { font-family: 'Amatic SC', cursive; font-weight: bold; font-size: 2em; line-height: 1.5em; margin: 64px 0px 12px 0px; padding: 0; } h3 {font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 1em; line-height: 1.5em; margin: 24px 0px 12px 0px; padding: 0; } p {font-size: 1em; line-height: 1.7em; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #222222; margin: 24px 0px 24px 0px; } dt, dd {font-size: 0.9em; line-height: 1.7em; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #222222; } a { color: #024997; text-decoration: none; border-bottom: dotted 1px #024997; padding: 2px; } a:hover { color: #2962ff; border-bottom: dashed 1px #2962ff; } li { margin: 4px 0 8px 0; } .example-footer { display: flex; flex-direction: row; flex-wrap: wrap; margin: 8px 0px 12px 0px; } .example-footer .note { display: block; flex-grow: 1; flex-shrink: 1; vertical-align: middle; font-size: 0.7em; line-height: 1.2em; color: #888888; margin: 4px 0px 4px 0px; } .button-container { flex-grow: 1; flex-shrink: 1; text-align: right; } a.button { display: inline-block; line-height: 1.5em; font-size: 1.3em; font-weight: bold; text-align:right; font-family: 'Amatic SC', cursive; white-space: nowrap; min-width: 80px; text-align: center; margin: 4px 0px 0px 8px; } a.button { border: dashed 1px #024997; border-radius: 4px; padding: 2px 4px 2px 4px; } a.button:hover { border: dashed 1px #2962ff; } a.button:first-child { margin-left: 0; } .hidden { display: none; } #index { margin-left: 32px; list-style-type: upper-roman; } #index a { border: none; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.2em; color: #222222; } #index li { padding: 8px 24px 8px 32px; } #index li.disabled, #index li.disabled a { color: #AAAAAA; } .code-block { border-top: dashed 1px #eeeeee; border-bottom: dashed 1px #eeeeee; } code { font-family: 'Roboto Mono', cursive; line-height: 1.7em; font-size: 0.8em; margin: 24px 0px 24px 0px; } div.math-wrapper { overflow:auto; } div.math-wrapper p { display: inline-block; margin: 0px 16px 24px 16px; } span.math-wrapper { display: inline-block; margin: 0 4px 0 4px; } footer { font-size: 0.8em; line-height: 1.5em; text-align:right; font-family: 'Open Sans', sans-serif; font-weight: 300; margin:64px 0px 24px 0px; padding-top: 12px; border-top: solid 1px #DDDDDD; } .row { display: flex; flex-direction: row; } .row div:first-child { flex: 1 1; } .row div { flex: 3 3; } .index-link { margin-top: 64px; } @media (max-width: 540px) { .example {height: 400px; } .example iframe { height: 400px; } } @media (max-width: 960px) { h1, h2, h3, p, pre, footer, dl, div.example-footer { padding-left: 16px; padding-right: 16px; } .math p { font-size: 0.8em; } }