@font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau.woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-italic.woff"); font-weight: 400; font-style: italic; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-medium.woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-mediumitalic.woff"); font-weight: 500; font-style: italic; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-bold.woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-bolditalic.woff"); font-weight: 600; font-style: italic; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-super.woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "bau"; src: url("http://storage.googleapis.com/urbit-extra/bau-superitalic.woff"); font-weight: 600; font-style: italic; } @font-face { font-family: "scp"; src: url("http://storage.googleapis.com/urbit-extra/scp-extralight.woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "scp"; src: url("http://storage.googleapis.com/urbit-extra/scp-light.woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "scp"; src: url("http://storage.googleapis.com/urbit-extra/scp-regular.woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "scp"; src: url("http://storage.googleapis.com/urbit-extra/scp-medium.woff"); font-weight: 500; font-style: normal; } body, html { font-family: "bau", "Helvetica Neue", helvetica, arial, sans-serif; } code, li:before, .spin, #bred a { font-family: "scp", "Courier New", courier, monospace; } body, html { font-size: 18px; font-weight: 400; line-height: 1.6rem; -webkit-text-size-adjust: none; } a { color: #000; text-decoration: none; border-bottom: 2px solid #000; display: inline-block; line-height: 0.8rem; } hr { display: inline-block; width: 6rem; border: 0; border-top: 2px solid #f4f4f4; } h2, h3 { margin: 0; margin-top: 1rem; } h1, h2, h3, h4, strong { font-weight: 500; } h4 { margin-bottom: 0.3rem; } h5 { font-style: italic; font-weight: 200; margin: 0; } h1 code, h2 code, h3 code { font-size: inherit; padding: 0.3rem; } pre { background-color: #f5f5f5; padding: 0.3rem; margin-left: -0.3rem; } code { font-size: 0.9rem; background-color: #f4f4f4; margin-top: -0.05rem; padding: 0.2rem; display: inline-block; } ul { list-style: none; padding: 0; } li:before { content: "+"; padding-right: 0.3rem; font-size: 0.8rem; font-weight: 600; } #nav, #cont { left: 50%; } #cont { width: 42rem; margin-left: -21rem; background-color: #fff; z-index: 1; } #nav { position: fixed; top: 0rem; width: 57rem; padding-top: 1rem; z-index: 0; margin-left: -32rem; overflow: hidden; opacity: 0; transition: opacity 1s ease-in-out; } #nav.moving { opacity: 1; transition: opacity 0.3s ease-in-out; } #nav:hover { opacity: 1; transition: opacity 0.3s ease-in-out; } #cont { position: absolute; top: 0; margin-bottom: 9rem; } .loading { display: inline-block; } .spin { color: #fff; padding: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1rem; z-index: 3; } .loading > .spin { background-color: #555; } #body .loading > .spin { background-color: #000; } .spin.state-0:before { content: "\2599"; } .spin.state-1:before { content: "\259B"; } .spin.state-2:before { content: "\259C"; } .spin.state-3:before { content: "\259F"; } #load.load { display: inline-block; font-weight: 500; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10,10,10,0.4); opacity: 1; transition: opacity 1s ease-in-out; z-index: 4; } #nav > div > div { display: inline-block; vertical-align: top; } #nav #sibs { width: 9rem; transition: margin-top 0.3s ease-in-out; } #nav #sibs > div { height: 20px; margin-bottom: 4px; } .focus #sibs { margin-top: 0 !important; transition: margin-top 0.3s ease-in-out; } #nav a, .list > li > a { text-transform: uppercase; font-size: 0.7rem; font-weight: 200; letter-spacing: 1px; } .list > li > a { border-bottom: none; } #nav a, .list > li > a h1 { border-bottom: 1px solid #000; } #nav .active a { font-weight: 500; text-decoration: none; } #up { padding-right: 1rem; margin-top: -0.3rem; } #sides { float: right; } #sides a { margin-right: 0.6rem; } #nav .arow-up, #nav .arow-next, #nav .arow-prev { width: 0; height: 0; border: 0.4rem solid transparent; } #nav .arow-up { border-bottom: 0.6rem solid #000; } #nav .arow-next { border-left: 0.6rem solid #000; } #nav .arow-prev { border-right: 0.6rem solid #000; } #bred { width: 5rem; padding-right: 1rem; text-align: right; font-size: 0.6rem; white-space: nowrap; overflow: hidden; } #bred a { text-transform: lowercase; vertical-align: top; } #bred > div { float: right; } #bred > div > div { display: inline-block; margin-top: -0.2rem; } #bred a, #kids a { margin-right: 0.3rem; } #bred a { margin-left: 0.3rem; } .short { width: 32rem; } .list h1, .list li a > div p { margin: 0; } .list li a > div p { display: inline; margin-left: 0.3rem; } .list li a > div p:first-child { margin-left: 0; } .list li a > div p code { font-size: 0.7rem; font-weight: 400; text-transform: none; } .list li a h1 code { text-transform: lowercase; border-bottom: 1px solid #000; } .list li a code { padding: 0.2rem; } .list h1, .list li a > div div { display: inline; } .list li a > div div { margin-left: 0.6rem; overflow: hidden; } .list h1 { font-size: 0.7rem; } @media only screen and (max-width: 1170px) { #nav, #nav > div, #nav.up, #nav.top, #nav > .focus { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } #nav { position: fixed; top: 0; opacity: 1; width: 42rem; margin-left: -21rem; background-color: #fff; z-index: 2; } #nav.m-down, #nav.m-up { position: absolute; } #nav.m-down.m-fixed { position: fixed; top: 0; } #nav > div { max-height: 1rem; overflow: hidden; transition: max-height 0.3s ease-in-out; } #nav > .focus { max-height: 40rem; transition: max-height 0.3s ease-in-out; } #cont { top: 3rem; } } @media only screen and (min-width: 320px) and (max-width: 1024px) { body, html { font-size: 21px; } #nav, #cont { width: 94%; padding-left: 3%; margin-left: 0; } #nav { position: fixed; padding-top: 0; opacity: 1; left: 0; background-color: #fff; z-index: 2; } #nav > div { max-height: 1.2rem; } #nav > div { padding-top: 0.6rem; } #nav #sibs > div { display: table-row; height: 20px; line-height: 20px; } #nav a { display: inline-block; font-size: 0.7rem; } #nav #sides { float: right; } #nav .arow-up, #nav .arow-next, #nav .arow-prev { margin-right: 0; border: 0.4rem solid transparent; } #nav .arow-up { border-bottom: 0.6rem solid #000; } #nav .arow-next { border-left: 0.6rem solid #000; } #nav .arow-prev { margin-right: 1rem; border-right: 0.6rem solid #000; } #cont { top: 3rem; left: 0; padding-bottom: 9rem; } #cont h1:first-child { margin-top: 0; } .short { width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { #nav > div { max-height: 1.6rem; } #nav a { font-size: 0.7rem; } #nav #sibs > div { height: 20px; line-height: 20px; } }