html { overflow-y: scroll; /* Sticky vertical scrollbar to prevent horizontal shifts on navigation. */ } html.progress, html.progress * { cursor: progress !important; } body { margin: 0; color: #373737; background: #f2f2f2; font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; } body .ui-widget-header { color: #fff; background: #373737; text-shadow: none; } body .ui-widget-content a, body .ui-widget-content a code { color: #007edf; text-decoration: none; } body .ui-widget-content h3 a { color: inherit; } body .wrapped { max-width: 1200px; min-width: 480px; margin: 0 auto; border: 0; color: inherit; background: inherit; } h1, h2, h3, h4, h5, h6 { margin: .5em 0; font-weight: 700; color: #212121; font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif; letter-spacing: -.06em; } h2 { padding: .5em 0; font-size: 1.6em; border-bottom: 1px #ccc dashed; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } hr { margin: 2em 0; height: 1px; border: none; background-color: #ccc; } a img { border: 0; /* IE */ } ul { margin-bottom: 1em; padding-left: 1.5em; } blockquote { color: #666; margin-bottom: 1em; padding: 0 0 0 1em; border-left: .2em solid #bbb; } label.error { color: #c66; } input.error, select.error, textarea.error { background-color: #fee; } pre, code, .code { font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; letter-spacing: -.06em; } #header-wrapper { background: #212121; background: -moz-linear-gradient(top, #373737, #212121); background: -webkit-linear-gradient(top, #373737, #212121); background: -ms-linear-gradient(top, #373737, #212121); background: -o-linear-gradient(top, #373737, #212121); background: linear-gradient(top, #373737, #212121); } #header { padding: 50px 10px 30px; } #logo { float: left; margin-top: -1em; margin-right: 1em; } #header h1 { margin: 0; color: white; font-size: 2.4em; text-shadow: #111 0 0 .4em; line-height: 1em; } #header h2 { margin: 0; padding: 0; border: 0; font-size: 1.275em; font-weight: 300; color: white; text-shadow: #111 0 0 .3em; } #content-wrapper { padding: 1em 0; } #content { box-sizing: border-box; float: right; width: 72%; max-width: none; min-width: 0; } #content a:hover, #content a.active { text-decoration: underline; } #content pre, #content code, #content .code { width: 99%; padding: .2em; border-radius: .2em; box-shadow: 0 0 .5em rgba(0,0,0,.1); background-color: #fff; } #content pre { margin: 1em 0; padding: .5em; overflow: auto; overflow-y: hidden; word-wrap: normal; } #content pre code { width: auto; padding: 0; margin: 0; box-shadow: none; } #content .github { background-color: #373737; color: #fff; } #content .ui-panel-content { padding: .5em; } #content .ui-panel-content .block table tr:nth-child(odd) { background-color: #fafafa; } #content .ui-panel-content .block table tr:nth-child(even) { background-color: #eaeaea; } #content .ui-tabs { border: 0; } #content .ui-tabs .ui-tabs-nav { background: none; } #content .ui-tabs .ui-tabs-panel { padding: 0; } #content .ui-tabs .ui-tabs-nav .ui-state-default, #content .ui-button.ui-state-default { background: #ddd; } #contentTitle { margin-top: 0; padding-top: 0; } #menu { box-sizing: border-box; float: left; width: 27%; margin: 0; padding: .4em .2em; border: 0; background: none; } #menu .ui-panel, #content .ui-panel { margin: 6px 0; padding: 1px; border: 0; box-shadow: 0 0 .5em rgba(0,0,0,.1); } #menu .ui-panel-titlebar, #content .ui-panel-titlebar { padding: .1em .2em; border: 0; box-shadow: 0 0 .2em rgba(0,0,0,.5); } #menu .ui-panel-content { padding: 0 .2em; } #menu ul { margin: .2em 0 .1em 0; padding: 0; list-style-type: none; } #menu ul.group li { float: left; margin-right: 2px; } #menu a { display: block; color: #212121; border-radius: 3px; } #menu a.code { padding: 1px 0; } #menu a:link { background: inherit; box-shadow: inherit; transition: all .3s; } #menu a:hover, #menu a.active { background: #ddd; box-shadow: 0 0 .5em #ddd; transition: all .3s; } #footer-wrapper { background: #212121; } #footer { height: 500px; /* Just some spacing to avoid vertical page shifts when switching between source code tabs. */ text-align: center; } #footer .ui-widget-content { color: white; } #footer h3 { border: 0; font-size: 22px; font-weight: 300; color: white; } .messages { margin: 1em 0; padding: 0; } .messages li { list-style-type: none; padding: .3em; color: white; font-size: 1.4em; box-shadow: .1em .1em .2em #ccc; } .messages li:first-child { border-radius: .2em .2em 0 0; } .messages li:last-child { border-radius: 0 0 .2em .2em; } .messages li:only-child { border-radius: .2em; } .messages .info { background: yellowgreen; } .messages .warn { background: orange; } .messages .error { background: orangered; } .messages .fatal { background: maroon; } .snapshot { padding: 0 5px; background: #ff9; color: #373737; border-radius: 3px; box-shadow: 0 0 .5em #ff9; text-shadow: none; } .important { background: #ff9; } .ui-widget, .ui-widget .ui-widget { font: inherit; font-size: inherit; } /******************************************************************************* Large Device Styles *******************************************************************************/ @media screen { body { font-size: 120%; line-height: 160%; transition: all .3s; } body .showOnMobile { display: none; } pre, code, .code { font-size: 90%; line-height: 120%; transition: all .3s; } #logo img { width: 100px; height: 100px; transition: all .3s; } #hamburger, #hamburger+label { display: none; } } /******************************************************************************* Medium Device Styles *******************************************************************************/ @media screen and (max-width: 1023px) { body { font-size: 110%; transition: all .3s; } #header { padding-top: 40px; padding-bottom: 20px; transition: all .3s; } #logo img { width: 90px; height: 90px; transition: all .3s; } #menu a { font-size: 85%; line-height: 140%; transition: all .3s; } #menu a.code { font-size: 75%; transition: all .3s; } } /******************************************************************************* Small Device Styles *******************************************************************************/ @media screen and (max-width: 767px) { body { font-size: 100%; transition: all .3s; } body .hideOnMobile { display: none; } body .showOnMobile { display: block; } body span.showOnMobile { display: inline; } #header { position: fixed; z-index: 9997; width: 100%; padding-top: 30px; padding-bottom: 10px; border-bottom: 2px solid #f2f2f2; transition: all .3s; } #header .snapshot { position: fixed; top: .2em; right: .2em; } #logo img { width: 80px; height: 80px; cursor: pointer; transition: all .3s; } #hamburger { display: block; } #hamburger ~ #menu { font-size: 120%; position: fixed; z-index: 9996; width: auto; top: 100px; bottom: 100%; right: 0; left: 0; transition: bottom .4s; background: #f2f2f2; overflow: hidden; } #hamburger:checked ~ #menu { bottom: 0; overflow-y: scroll; } #menu a { font-size: 120%; line-height: 140%; } #menu a.code { font-size: 100%; } #menu>.ui-panel-content { padding-top: .5em; padding-bottom: 5em; } #content { float: none; width: auto; padding-top: 100px; } #contentTitle .separator { display: block; height: .5em; color: #f2f2f2; } }