From a4e2d625a3532ff234ce8e4e572bcee451051a15 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Sun, 14 Mar 2021 15:49:58 -0500 Subject: [PATCH] Start migrating templates --- go.mod | 9 + go.sum | 24 + public/style.css | 9610 ++++++++++++++++- public/themes/dark/theme.css | 370 +- public/themes/light/theme.css | 387 +- .../color.go => ansicolor/ansicolor.go} | 0 src/buildscss/buildscss.go | 20 +- src/logging/logging.go | 10 +- src/rawdata/bgdark.png | Bin 0 -> 2129 bytes src/rawdata/bglight.png | Bin 0 -> 2125 bytes src/rawdata/scss/_showcase.scss | 2 +- src/templates/src/include/footer.html | 1 + src/templates/src/include/header.html | 1 + src/templates/src/index.html | 5 + src/templates/src/layouts/base.html | 73 + src/templates/src/layouts/staticpage.html | 13 + src/templates/src/project.css | 128 + src/templates/templates.go | 104 + src/templates/types.go | 22 + src/website/routes.go | 88 + src/website/website.go | 26 +- 21 files changed, 10868 insertions(+), 25 deletions(-) rename src/{color/color.go => ansicolor/ansicolor.go} (100%) create mode 100644 src/rawdata/bgdark.png create mode 100644 src/rawdata/bglight.png create mode 100644 src/templates/src/include/footer.html create mode 100644 src/templates/src/include/header.html create mode 100644 src/templates/src/index.html create mode 100644 src/templates/src/layouts/base.html create mode 100644 src/templates/src/layouts/staticpage.html create mode 100644 src/templates/src/project.css create mode 100644 src/templates/templates.go create mode 100644 src/templates/types.go create mode 100644 src/website/routes.go diff --git a/go.mod b/go.mod index cdd26923..134e3a7b 100644 --- a/go.mod +++ b/go.mod @@ -3,10 +3,19 @@ module git.handmade.network/hmn/hmn go 1.16 require ( + github.com/Masterminds/goutils v1.1.1 // indirect + github.com/Masterminds/semver v1.5.0 // indirect + github.com/Masterminds/sprig v2.22.0+incompatible // indirect github.com/go-stack/stack v1.8.0 + github.com/google/uuid v1.2.0 // indirect + github.com/huandu/xstrings v1.3.2 // indirect + github.com/imdario/mergo v0.3.12 // indirect github.com/jackc/pgx/v4 v4.10.1 github.com/julienschmidt/httprouter v1.3.0 + github.com/mitchellh/copystructure v1.1.1 // indirect github.com/rs/zerolog v1.20.0 github.com/spf13/cobra v1.1.3 + github.com/stretchr/testify v1.7.0 // indirect + github.com/teacat/noire v1.1.0 // indirect github.com/wellington/go-libsass v0.9.2 ) diff --git a/go.sum b/go.sum index 11f943b4..1b92dda0 100644 --- a/go.sum +++ b/go.sum @@ -13,6 +13,12 @@ cloud.google.com/go/storage v1.0.0/go.mod h1:IhtSnM/ZTZV8YYJWCY8RULGVqBDmpoyjwiy dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU= github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU= github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo= +github.com/Masterminds/goutils v1.1.1 h1:5nUrii3FMTL5diU80unEVvNevw1nH4+ZV4DSLVJLSYI= +github.com/Masterminds/goutils v1.1.1/go.mod h1:8cTjp+g8YejhMuvIA5y2vz3BpJxksy863GQaJW2MFNU= +github.com/Masterminds/semver v1.5.0 h1:H65muMkzWKEuNDnfl9d70GUjFniHKHRbFPGBuZ3QEww= +github.com/Masterminds/semver v1.5.0/go.mod h1:MB6lktGJrhw8PrUyiEoblNEGEQ+RzHPF078ddwwvV3Y= +github.com/Masterminds/sprig v2.22.0+incompatible h1:z4yfnGrZ7netVz+0EDJ0Wi+5VZCSYp4Z0m2dk6cEM60= +github.com/Masterminds/sprig v2.22.0+incompatible/go.mod h1:y6hNFY5UBTIWBxnzTeuNhlNS5hqE0NB0E6fgfo2Br3o= github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU= github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc= github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0= @@ -69,6 +75,8 @@ github.com/google/martian v2.1.0+incompatible/go.mod h1:9I4somxYTbIHy5NJKHRl3wXi github.com/google/pprof v0.0.0-20181206194817-3ea8567a2e57/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc= github.com/google/pprof v0.0.0-20190515194954-54271f7e092f/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc= github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI= +github.com/google/uuid v1.2.0 h1:qJYtXnJRWmpe7m/3XlyhrsLrEURqHRM2kxzoxXqyUDs= +github.com/google/uuid v1.2.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo= github.com/googleapis/gax-go/v2 v2.0.4/go.mod h1:0Wqv26UfaUD9n4G6kQubkQ+KchISgw+vpHVxEJEs9eg= github.com/googleapis/gax-go/v2 v2.0.5/go.mod h1:DWXyrwAJ9X0FpwwEdw+IPEYBICEFu5mhpdKc/us6bOk= github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY= @@ -96,6 +104,10 @@ github.com/hashicorp/logutils v1.0.0/go.mod h1:QIAnNjmIWmVIIkWDTG1z5v++HQmx9WQRO github.com/hashicorp/mdns v1.0.0/go.mod h1:tL+uN++7HEJ6SQLQ2/p+z2pH24WQKWjBPkE0mNTz8vQ= github.com/hashicorp/memberlist v0.1.3/go.mod h1:ajVTdAv/9Im8oMAAj5G31PhhMCZJV2pPBoIllUwCN7I= github.com/hashicorp/serf v0.8.2/go.mod h1:6hOLApaqBFA1NXqRQAsxw9QxuDEvNxSQRwA/JwenrHc= +github.com/huandu/xstrings v1.3.2 h1:L18LIDzqlW6xN2rEkpdV8+oL/IXWJ1APd+vsdYy4Wdw= +github.com/huandu/xstrings v1.3.2/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE= +github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU= +github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA= github.com/inconshreveable/mousetrap v1.0.0 h1:Z8tu5sraLXCXIcARxBp/8cbvlwVa7Z1NHg9XEKhtSvM= github.com/inconshreveable/mousetrap v1.0.0/go.mod h1:PxqpIevigyE2G7u3NXJIT2ANytuPF1OarO4DADm73n8= github.com/jackc/chunkreader v1.0.0 h1:4s39bBR8ByfqH+DKm8rQA3E1LHZWB9XWcrz8fqaZbe0= @@ -186,6 +198,8 @@ github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Ky github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0= github.com/miekg/dns v1.0.14/go.mod h1:W1PPwlIAgtquWBMBEV9nkV9Cazfe8ScdGz/Lj7v3Nrg= github.com/mitchellh/cli v1.0.0/go.mod h1:hNIlj7HEI86fIcpObd7a0FcrxTWetlwJDGcceTlRvqc= +github.com/mitchellh/copystructure v1.1.1 h1:Bp6x9R1Wn16SIz3OfeDr0b7RnCG2OB66Y7PQyC/cvq4= +github.com/mitchellh/copystructure v1.1.1/go.mod h1:EBArHfARyrSWO/+Wyr9zwEkc6XMFB9XyNgFNmRkZZU4= github.com/mitchellh/go-homedir v1.0.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0= github.com/mitchellh/go-homedir v1.1.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0= github.com/mitchellh/go-testing-interface v1.0.0/go.mod h1:kRemZodwjscx+RGhAo8eIhFbs2+BFgRtFPeD/KE+zxI= @@ -193,6 +207,8 @@ github.com/mitchellh/gox v0.4.0/go.mod h1:Sd9lOJ0+aimLBi73mGofS1ycjY8lL3uZM3JPS4 github.com/mitchellh/iochan v1.0.0/go.mod h1:JwYml1nuB7xOzsp52dPpHFffvOCDupsG0QubkSMEySY= github.com/mitchellh/mapstructure v0.0.0-20160808181253-ca63d7c062ee/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y= github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y= +github.com/mitchellh/reflectwalk v1.0.1 h1:FVzMWA5RllMAKIdUSC8mdWo3XtwoecrH79BY70sEEpE= +github.com/mitchellh/reflectwalk v1.0.1/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw= github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q= github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0= github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U= @@ -253,7 +269,12 @@ github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UV github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4= github.com/stretchr/testify v1.5.1 h1:nOGnQDM7FYENwehXlg/kFVnos3rEvtKTjRvOWSzb6H4= github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA= +github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg= +github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY= +github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg= github.com/subosito/gotenv v1.2.0/go.mod h1:N0PQaV/YGNqwC0u51sEeR/aUtSLEXKX9iv69rRypqCw= +github.com/teacat/noire v1.1.0 h1:5IgJ1H8jodiSSYnrVadV2JjbAnEgCCjYUQxSUuaQ7Sg= +github.com/teacat/noire v1.1.0/go.mod h1:cetGlnqr+9yKJcFgRgYXOWJY66XIrrjUsGBwNlNNtAk= github.com/tmc/grpc-websocket-proxy v0.0.0-20190109142713-0ad062ec5ee5/go.mod h1:ncp9v5uamzpCO7NfCPTXjqaC+bZgJeR0sMTm6dMHP7U= github.com/wellington/go-libsass v0.9.2 h1:6Ims04UDdBs6/CGSVK5JC8FNikR5ssrsMMKE/uaO5Q8= github.com/wellington/go-libsass v0.9.2/go.mod h1:mxgxgam0N0E+NAUMHLcu20Ccfc3mVpDkyrLDayqfiTs= @@ -409,8 +430,11 @@ gopkg.in/yaml.v2 v2.0.0-20170812160011-eb3733d160e7/go.mod h1:JAlM8MvJe8wmxCU4Bl gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI= gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI= gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI= +gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI= gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY= gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ= +gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c h1:dUUwHk2QECo/6vqA44rthZ8ie2QXMNeKRTHCNY2nXvo= +gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM= honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4= honnef.co/go/tools v0.0.0-20190106161140-3f1c8253044a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4= honnef.co/go/tools v0.0.0-20190418001031-e561f6794a2a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4= diff --git a/public/style.css b/public/style.css index 4c48fa35..e88c6ddc 100644 --- a/public/style.css +++ b/public/style.css @@ -1 +1,9609 @@ -/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}.debug *{outline:1px solid gold}.debug-white *{outline:1px solid white}.debug-black *{outline:1px solid black}.debug-grid{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left}.debug-grid-16{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left}.debug-grid-8-solid{background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left}.debug-grid-16-solid{background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left}html,body,div,article,section,main,footer,header,form,fieldset,legend,pre,code,a,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,textarea,table,td,th,tr,input[type="email"],input[type="number"],input[type="password"],input[type="tel"],input[type="text"],input[type="url"],.border-box{box-sizing:border-box}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--9x16{padding-bottom:177.77%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--3x4{padding-bottom:133.33%}.aspect-ratio--6x4{padding-bottom:66.6%}.aspect-ratio--4x6{padding-bottom:150%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--5x8{padding-bottom:160%}.aspect-ratio--7x5{padding-bottom:71.42%}.aspect-ratio--5x7{padding-bottom:140%}.aspect-ratio--1x1{padding-bottom:100%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}@media screen and (min-width: 30em){.aspect-ratio-ns{height:0;position:relative}.aspect-ratio--16x9-ns{padding-bottom:56.25%}.aspect-ratio--9x16-ns{padding-bottom:177.77%}.aspect-ratio--4x3-ns{padding-bottom:75%}.aspect-ratio--3x4-ns{padding-bottom:133.33%}.aspect-ratio--6x4-ns{padding-bottom:66.6%}.aspect-ratio--4x6-ns{padding-bottom:150%}.aspect-ratio--8x5-ns{padding-bottom:62.5%}.aspect-ratio--5x8-ns{padding-bottom:160%}.aspect-ratio--7x5-ns{padding-bottom:71.42%}.aspect-ratio--5x7-ns{padding-bottom:140%}.aspect-ratio--1x1-ns{padding-bottom:100%}.aspect-ratio--object-ns{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}@media screen and (min-width: 30em) and (max-width: 60em){.aspect-ratio-m{height:0;position:relative}.aspect-ratio--16x9-m{padding-bottom:56.25%}.aspect-ratio--9x16-m{padding-bottom:177.77%}.aspect-ratio--4x3-m{padding-bottom:75%}.aspect-ratio--3x4-m{padding-bottom:133.33%}.aspect-ratio--6x4-m{padding-bottom:66.6%}.aspect-ratio--4x6-m{padding-bottom:150%}.aspect-ratio--8x5-m{padding-bottom:62.5%}.aspect-ratio--5x8-m{padding-bottom:160%}.aspect-ratio--7x5-m{padding-bottom:71.42%}.aspect-ratio--5x7-m{padding-bottom:140%}.aspect-ratio--1x1-m{padding-bottom:100%}.aspect-ratio--object-m{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}@media screen and (min-width: 60em){.aspect-ratio-l{height:0;position:relative}.aspect-ratio--16x9-l{padding-bottom:56.25%}.aspect-ratio--9x16-l{padding-bottom:177.77%}.aspect-ratio--4x3-l{padding-bottom:75%}.aspect-ratio--3x4-l{padding-bottom:133.33%}.aspect-ratio--6x4-l{padding-bottom:66.6%}.aspect-ratio--4x6-l{padding-bottom:150%}.aspect-ratio--8x5-l{padding-bottom:62.5%}.aspect-ratio--5x8-l{padding-bottom:160%}.aspect-ratio--7x5-l{padding-bottom:71.42%}.aspect-ratio--5x7-l{padding-bottom:140%}.aspect-ratio--1x1-l{padding-bottom:100%}.aspect-ratio--object-l{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}img,video{max-width:100%}.cover{background-size:cover !important}.contain{background-size:contain !important}@media screen and (min-width: 30em){.cover-ns{background-size:cover !important}.contain-ns{background-size:contain !important}}@media screen and (min-width: 30em) and (max-width: 60em){.cover-m{background-size:cover !important}.contain-m{background-size:contain !important}}@media screen and (min-width: 60em){.cover-l{background-size:cover !important}.contain-l{background-size:contain !important}}.bg-center{background-repeat:no-repeat;background-position:center center}.bg-top{background-repeat:no-repeat;background-position:top center}.bg-right{background-repeat:no-repeat;background-position:center right}.bg-bottom{background-repeat:no-repeat;background-position:bottom center}.bg-left{background-repeat:no-repeat;background-position:center left}@media screen and (min-width: 30em){.bg-center-ns{background-repeat:no-repeat;background-position:center center}.bg-top-ns{background-repeat:no-repeat;background-position:top center}.bg-right-ns{background-repeat:no-repeat;background-position:center right}.bg-bottom-ns{background-repeat:no-repeat;background-position:bottom center}.bg-left-ns{background-repeat:no-repeat;background-position:center left}}@media screen and (min-width: 30em) and (max-width: 60em){.bg-center-m{background-repeat:no-repeat;background-position:center center}.bg-top-m{background-repeat:no-repeat;background-position:top center}.bg-right-m{background-repeat:no-repeat;background-position:center right}.bg-bottom-m{background-repeat:no-repeat;background-position:bottom center}.bg-left-m{background-repeat:no-repeat;background-position:center left}}@media screen and (min-width: 60em){.bg-center-l{background-repeat:no-repeat;background-position:center center}.bg-top-l{background-repeat:no-repeat;background-position:top center}.bg-right-l{background-repeat:no-repeat;background-position:center right}.bg-bottom-l{background-repeat:no-repeat;background-position:bottom center}.bg-left-l{background-repeat:no-repeat;background-position:center left}}.outline{outline:1px solid}.outline-transparent{outline:1px solid transparent}.outline-0{outline:0}@media screen and (min-width: 30em){.outline-ns{outline:1px solid}.outline-transparent-ns{outline:1px solid transparent}.outline-0-ns{outline:0}}@media screen and (min-width: 30em) and (max-width: 60em){.outline-m{outline:1px solid}.outline-transparent-m{outline:1px solid transparent}.outline-0-m{outline:0}}@media screen and (min-width: 60em){.outline-l{outline:1px solid}.outline-transparent-l{outline:1px solid transparent}.outline-0-l{outline:0}}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}@media screen and (min-width: 30em){.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}}@media screen and (min-width: 30em) and (max-width: 60em){.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}}@media screen and (min-width: 60em){.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--moon-gray{border-color:#ccc}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:rgba(255,255,255,0.9)}.b--white-80{border-color:rgba(255,255,255,0.8)}.b--white-70{border-color:rgba(255,255,255,0.7)}.b--white-60{border-color:rgba(255,255,255,0.6)}.b--white-50{border-color:rgba(255,255,255,0.5)}.b--white-40{border-color:rgba(255,255,255,0.4)}.b--white-30{border-color:rgba(255,255,255,0.3)}.b--white-20{border-color:rgba(255,255,255,0.2)}.b--white-10{border-color:rgba(255,255,255,0.1)}.b--white-05{border-color:rgba(255,255,255,0.05)}.b--white-025{border-color:rgba(255,255,255,0.025)}.b--white-0125{border-color:rgba(255,255,255,0.0125)}.b--black-90{border-color:rgba(0,0,0,0.9)}.b--black-80{border-color:rgba(0,0,0,0.8)}.b--black-70{border-color:rgba(0,0,0,0.7)}.b--black-60{border-color:rgba(0,0,0,0.6)}.b--black-50{border-color:rgba(0,0,0,0.5)}.b--black-40{border-color:rgba(0,0,0,0.4)}.b--black-30{border-color:rgba(0,0,0,0.3)}.b--black-20{border-color:rgba(0,0,0,0.2)}.b--black-10{border-color:rgba(0,0,0,0.1)}.b--black-05{border-color:rgba(0,0,0,0.05)}.b--black-025{border-color:rgba(0,0,0,0.025)}.b--black-0125{border-color:rgba(0,0,0,0.0125)}.b--dark-red{border-color:#e7040f}.b--red{border-color:#ff4136}.b--light-red{border-color:#ff725c}.b--orange{border-color:#ff6300}.b--gold{border-color:#ffb700}.b--yellow{border-color:gold}.b--light-yellow{border-color:#fbf1a9}.b--purple{border-color:#5e2ca5}.b--light-purple{border-color:#a463f2}.b--dark-pink{border-color:#d5008f}.b--hot-pink{border-color:#ff41b4}.b--pink{border-color:#ff80cc}.b--light-pink{border-color:#ffa3d7}.b--dark-green{border-color:#137752}.b--green{border-color:#19a974}.b--light-green{border-color:#9eebcf}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fffceb}.b--washed-red{border-color:#ffdfdf}.b--transparent{border-color:rgba(0,0,0,0)}.b--inherit{border-color:inherit}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br-pill{border-radius:9999px}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-left-radius:0;border-bottom-right-radius:0}.br--right{border-top-left-radius:0;border-bottom-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 30em){.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br-pill-ns{border-radius:9999px}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-left-radius:0;border-bottom-right-radius:0}.br--right-ns{border-top-left-radius:0;border-bottom-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}}@media screen and (min-width: 30em) and (max-width: 60em){.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br-pill-m{border-radius:9999px}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-left-radius:0;border-bottom-right-radius:0}.br--right-m{border-top-left-radius:0;border-bottom-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}}@media screen and (min-width: 60em){.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br-pill-l{border-radius:9999px}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-left-radius:0;border-bottom-right-radius:0}.br--right-l{border-top-left-radius:0;border-bottom-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}@media screen and (min-width: 30em){.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}}@media screen and (min-width: 30em) and (max-width: 60em){.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}}@media screen and (min-width: 60em){.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}@media screen and (min-width: 30em){.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}}@media screen and (min-width: 30em) and (max-width: 60em){.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}}@media screen and (min-width: 60em){.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}}.shadow-1{box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2)}.shadow-2{box-shadow:0px 0px 8px 2px rgba(0,0,0,0.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,0.2)}.shadow-4{box-shadow:2px 2px 8px 0px rgba(0,0,0,0.2)}.shadow-5{box-shadow:4px 4px 8px 0px rgba(0,0,0,0.2)}@media screen and (min-width: 30em){.shadow-1-ns{box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2)}.shadow-2-ns{box-shadow:0px 0px 8px 2px rgba(0,0,0,0.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,0.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0px rgba(0,0,0,0.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0px rgba(0,0,0,0.2)}}@media screen and (min-width: 30em) and (max-width: 60em){.shadow-1-m{box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2)}.shadow-2-m{box-shadow:0px 0px 8px 2px rgba(0,0,0,0.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,0.2)}.shadow-4-m{box-shadow:2px 2px 8px 0px rgba(0,0,0,0.2)}.shadow-5-m{box-shadow:4px 4px 8px 0px rgba(0,0,0,0.2)}}@media screen and (min-width: 60em){.shadow-1-l{box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2)}.shadow-2-l{box-shadow:0px 0px 8px 2px rgba(0,0,0,0.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,0.2)}.shadow-4-l{box-shadow:2px 2px 8px 0px rgba(0,0,0,0.2)}.shadow-5-l{box-shadow:4px 4px 8px 0px rgba(0,0,0,0.2)}}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}@media screen and (min-width: 30em){.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}}@media screen and (min-width: 30em) and (max-width: 60em){.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}}@media screen and (min-width: 60em){.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}@media screen and (min-width: 30em){.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}}@media screen and (min-width: 30em) and (max-width: 60em){.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}}@media screen and (min-width: 60em){.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}@media screen and (min-width: 30em){.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}}@media screen and (min-width: 30em) and (max-width: 60em){.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}}@media screen and (min-width: 60em){.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}}.flex{display:flex}.inline-flex{display:inline-flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}@media screen and (min-width: 30em){.flex-ns{display:flex}.inline-flex-ns{display:inline-flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-row-ns{flex-direction:row}.flex-wrap-ns{flex-wrap:wrap}.flex-nowrap-ns{flex-wrap:nowrap}.flex-wrap-reverse-ns{flex-wrap:wrap-reverse}.flex-column-reverse-ns{flex-direction:column-reverse}.flex-row-reverse-ns{flex-direction:row-reverse}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.flex-grow-0-ns{flex-grow:0}.flex-grow-1-ns{flex-grow:1}.flex-shrink-0-ns{flex-shrink:0}.flex-shrink-1-ns{flex-shrink:1}}@media screen and (min-width: 30em) and (max-width: 60em){.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}}@media screen and (min-width: 60em){.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}}.fl{float:left;_display:inline}.fr{float:right;_display:inline}.fn{float:none}@media screen and (min-width: 30em){.fl-ns{float:left;_display:inline}.fr-ns{float:right;_display:inline}.fn-ns{float:none}}@media screen and (min-width: 30em) and (max-width: 60em){.fl-m{float:left;_display:inline}.fr-m{float:right;_display:inline}.fn-m{float:none}}@media screen and (min-width: 60em){.fl-l{float:left;_display:inline}.fr-l{float:right;_display:inline}.fn-l{float:none}}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif}.serif{font-family:georgia,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}code,.code{font-family:Consolas, monaco, monospace}.courier{font-family:'Courier Next', courier, monospace}.helvetica{font-family:'helvetica neue', helvetica, sans-serif}.avenir{font-family:'avenir next', avenir, sans-serif}.athelas{font-family:athelas, georgia, serif}.georgia{font-family:georgia, serif}.times{font-family:times, serif}.bodoni{font-family:"Bodoni MT", serif}.calisto{font-family:"Calisto MT", serif}.garamond{font-family:garamond, serif}.baskerville{font-family:baskerville, serif}.i{font-style:italic}.fs-normal{font-style:normal}@media screen and (min-width: 30em){.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}}@media screen and (min-width: 30em) and (max-width: 60em){.i-m{font-style:italic}.fs-normal-m{font-style:normal}}@media screen and (min-width: 60em){.i-l{font-style:italic}.fs-normal-l{font-style:normal}}.normal{font-weight:normal}.b{font-weight:bold}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}@media screen and (min-width: 30em){.normal-ns{font-weight:normal}.b-ns{font-weight:bold}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}}@media screen and (min-width: 30em) and (max-width: 60em){.normal-m{font-weight:normal}.b-m{font-weight:bold}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}}@media screen and (min-width: 60em){.normal-l{font-weight:normal}.b-l{font-weight:bold}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}}.input-reset{-webkit-appearance:none;-moz-appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}@media screen and (min-width: 30em){.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.min-h-100-ns{min-height:100%}.vh-25-ns{height:25vh}.vh-50-ns{height:50vh}.vh-75-ns{height:75vh}.vh-100-ns{height:100vh}.min-vh-100-ns{min-height:100vh}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}}@media screen and (min-width: 30em) and (max-width: 60em){.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}}@media screen and (min-width: 60em){.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}}.tracked{letter-spacing:.1em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.25em}@media screen and (min-width: 30em){.tracked-ns{letter-spacing:.1em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.25em}}@media screen and (min-width: 30em) and (max-width: 60em){.tracked-m{letter-spacing:.1em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.25em}}@media screen and (min-width: 60em){.tracked-l{letter-spacing:.1em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.25em}}.lh-solid{line-height:1}.lh-title{line-height:1.25}.lh-copy{line-height:1.5}@media screen and (min-width: 30em){.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.25}.lh-copy-ns{line-height:1.5}}@media screen and (min-width: 30em) and (max-width: 60em){.lh-solid-m{line-height:1}.lh-title-m{line-height:1.25}.lh-copy-m{line-height:1.5}}@media screen and (min-width: 60em){.lh-solid-l{line-height:1}.lh-title-l{line-height:1.25}.lh-copy-l{line-height:1.5}}.link{text-decoration:none;transition:color .15s ease-in}.link:link,.link:visited{transition:color .15s ease-in}.link:hover{transition:color .15s ease-in}.link:active{transition:color .15s ease-in}.link:focus{transition:color .15s ease-in;outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}@media screen and (min-width: 30em){.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}}@media screen and (min-width: 30em) and (max-width: 60em){.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}}@media screen and (min-width: 60em){.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}}.w1{width:1rem}.w2,.project-carousel-container .project-carousel-button.active{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@media screen and (min-width: 30em){.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}}@media screen and (min-width: 30em) and (max-width: 60em){.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}}@media screen and (min-width: 60em){.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}@media screen and (min-width: 30em){.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}}@media screen and (min-width: 30em) and (max-width: 60em){.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}}@media screen and (min-width: 60em){.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}@media screen and (min-width: 30em){.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}}@media screen and (min-width: 30em) and (max-width: 60em){.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}}@media screen and (min-width: 60em){.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-135{transform:rotate(135deg)}.rotate-180{transform:rotate(180deg)}.rotate-225{transform:rotate(225deg)}.rotate-270{transform:rotate(270deg)}.rotate-315{transform:rotate(315deg)}@media screen and (min-width: 30em){.rotate-45-ns{transform:rotate(45deg)}.rotate-90-ns{transform:rotate(90deg)}.rotate-135-ns{transform:rotate(135deg)}.rotate-180-ns{transform:rotate(180deg)}.rotate-225-ns{transform:rotate(225deg)}.rotate-270-ns{transform:rotate(270deg)}.rotate-315-ns{transform:rotate(315deg)}}@media screen and (min-width: 30em) and (max-width: 60em){.rotate-45-m{transform:rotate(45deg)}.rotate-90-m{transform:rotate(90deg)}.rotate-135-m{transform:rotate(135deg)}.rotate-180-m{transform:rotate(180deg)}.rotate-225-m{transform:rotate(225deg)}.rotate-270-m{transform:rotate(270deg)}.rotate-315-m{transform:rotate(315deg)}}@media screen and (min-width: 60em){.rotate-45-l{transform:rotate(45deg)}.rotate-90-l{transform:rotate(90deg)}.rotate-135-l{transform:rotate(135deg)}.rotate-180-l{transform:rotate(180deg)}.rotate-225-l{transform:rotate(225deg)}.rotate-270-l{transform:rotate(270deg)}.rotate-315-l{transform:rotate(315deg)}}.black-90{color:rgba(0,0,0,0.9)}.black-80{color:rgba(0,0,0,0.8)}.black-70{color:rgba(0,0,0,0.7)}.black-60{color:rgba(0,0,0,0.6)}.black-50{color:rgba(0,0,0,0.5)}.black-40{color:rgba(0,0,0,0.4)}.black-30{color:rgba(0,0,0,0.3)}.black-20{color:rgba(0,0,0,0.2)}.black-10{color:rgba(0,0,0,0.1)}.black-05{color:rgba(0,0,0,0.05)}.white-90{color:rgba(255,255,255,0.9)}.white-80{color:rgba(255,255,255,0.8)}.white-70{color:rgba(255,255,255,0.7)}.white-60{color:rgba(255,255,255,0.6)}.white-50{color:rgba(255,255,255,0.5)}.white-40{color:rgba(255,255,255,0.4)}.white-30{color:rgba(255,255,255,0.3)}.white-20{color:rgba(255,255,255,0.2)}.white-10{color:rgba(255,255,255,0.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#e7040f}.red{color:#ff4136}.light-red{color:#ff725c}.orange{color:#ff6300}.gold{color:#ffb700}.yellow{color:gold}.light-yellow{color:#fbf1a9}.purple{color:#5e2ca5}.light-purple{color:#a463f2}.dark-pink{color:#d5008f}.hot-pink{color:#ff41b4}.pink{color:#ff80cc}.light-pink{color:#ffa3d7}.dark-green{color:#137752}.green{color:#19a974}.light-green{color:#9eebcf}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fffceb}.washed-red{color:#ffdfdf}.color-inherit{color:inherit}.bg-black-90{background-color:rgba(0,0,0,0.9)}.bg-black-80{background-color:rgba(0,0,0,0.8)}.bg-black-70{background-color:rgba(0,0,0,0.7)}.bg-black-60{background-color:rgba(0,0,0,0.6)}.bg-black-50{background-color:rgba(0,0,0,0.5)}.bg-black-40{background-color:rgba(0,0,0,0.4)}.bg-black-30{background-color:rgba(0,0,0,0.3)}.bg-black-20{background-color:rgba(0,0,0,0.2)}.bg-black-10{background-color:rgba(0,0,0,0.1)}.bg-black-05{background-color:rgba(0,0,0,0.05)}.bg-white-90{background-color:rgba(255,255,255,0.9)}.bg-white-80{background-color:rgba(255,255,255,0.8)}.bg-white-70{background-color:rgba(255,255,255,0.7)}.bg-white-60{background-color:rgba(255,255,255,0.6)}.bg-white-50{background-color:rgba(255,255,255,0.5)}.bg-white-40{background-color:rgba(255,255,255,0.4)}.bg-white-30{background-color:rgba(255,255,255,0.3)}.bg-white-20{background-color:rgba(255,255,255,0.2)}.bg-white-10{background-color:rgba(255,255,255,0.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:rgba(0,0,0,0)}.bg-dark-red{background-color:#e7040f}.bg-red{background-color:#ff4136}.bg-light-red{background-color:#ff725c}.bg-orange{background-color:#ff6300}.bg-gold{background-color:#ffb700}.bg-yellow{background-color:gold}.bg-light-yellow{background-color:#fbf1a9}.bg-purple{background-color:#5e2ca5}.bg-light-purple{background-color:#a463f2}.bg-dark-pink{background-color:#d5008f}.bg-hot-pink{background-color:#ff41b4}.bg-pink{background-color:#ff80cc}.bg-light-pink{background-color:#ffa3d7}.bg-dark-green{background-color:#137752}.bg-green{background-color:#19a974}.bg-light-green{background-color:#9eebcf}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fffceb}.bg-washed-red{background-color:#ffdfdf}.bg-inherit{background-color:inherit}.hover-black:hover,.hover-black:focus{color:#000}.hover-near-black:hover,.hover-near-black:focus{color:#111}.hover-dark-gray:hover,.hover-dark-gray:focus{color:#333}.hover-mid-gray:hover,.hover-mid-gray:focus{color:#555}.hover-gray:hover,.hover-gray:focus{color:#777}.hover-silver:hover,.hover-silver:focus{color:#999}.hover-light-silver:hover,.hover-light-silver:focus{color:#aaa}.hover-moon-gray:hover,.hover-moon-gray:focus{color:#ccc}.hover-light-gray:hover,.hover-light-gray:focus{color:#eee}.hover-near-white:hover,.hover-near-white:focus{color:#f4f4f4}.hover-white:hover,.hover-white:focus{color:#fff}.hover-black-90:hover,.hover-black-90:focus{color:rgba(0,0,0,0.9)}.hover-black-80:hover,.hover-black-80:focus{color:rgba(0,0,0,0.8)}.hover-black-70:hover,.hover-black-70:focus{color:rgba(0,0,0,0.7)}.hover-black-60:hover,.hover-black-60:focus{color:rgba(0,0,0,0.6)}.hover-black-50:hover,.hover-black-50:focus{color:rgba(0,0,0,0.5)}.hover-black-40:hover,.hover-black-40:focus{color:rgba(0,0,0,0.4)}.hover-black-30:hover,.hover-black-30:focus{color:rgba(0,0,0,0.3)}.hover-black-20:hover,.hover-black-20:focus{color:rgba(0,0,0,0.2)}.hover-black-10:hover,.hover-black-10:focus{color:rgba(0,0,0,0.1)}.hover-white-90:hover,.hover-white-90:focus{color:rgba(255,255,255,0.9)}.hover-white-80:hover,.hover-white-80:focus{color:rgba(255,255,255,0.8)}.hover-white-70:hover,.hover-white-70:focus{color:rgba(255,255,255,0.7)}.hover-white-60:hover,.hover-white-60:focus{color:rgba(255,255,255,0.6)}.hover-white-50:hover,.hover-white-50:focus{color:rgba(255,255,255,0.5)}.hover-white-40:hover,.hover-white-40:focus{color:rgba(255,255,255,0.4)}.hover-white-30:hover,.hover-white-30:focus{color:rgba(255,255,255,0.3)}.hover-white-20:hover,.hover-white-20:focus{color:rgba(255,255,255,0.2)}.hover-white-10:hover,.hover-white-10:focus{color:rgba(255,255,255,0.1)}.hover-inherit:hover,.hover-inherit:focus{color:inherit}.hover-bg-black:hover,.hover-bg-black:focus{background-color:#000}.hover-bg-near-black:hover,.hover-bg-near-black:focus{background-color:#111}.hover-bg-dark-gray:hover,.hover-bg-dark-gray:focus{background-color:#333}.hover-bg-mid-gray:hover,.hover-bg-mid-gray:focus{background-color:#555}.hover-bg-gray:hover,.hover-bg-gray:focus{background-color:#777}.hover-bg-silver:hover,.hover-bg-silver:focus{background-color:#999}.hover-bg-light-silver:hover,.hover-bg-light-silver:focus{background-color:#aaa}.hover-bg-moon-gray:hover,.hover-bg-moon-gray:focus{background-color:#ccc}.hover-bg-light-gray:hover,.hover-bg-light-gray:focus{background-color:#eee}.hover-bg-near-white:hover,.hover-bg-near-white:focus{background-color:#f4f4f4}.hover-bg-white:hover,.hover-bg-white:focus{background-color:#fff}.hover-bg-transparent:hover,.hover-bg-transparent:focus{background-color:rgba(0,0,0,0)}.hover-bg-black-90:hover,.hover-bg-black-90:focus{background-color:rgba(0,0,0,0.9)}.hover-bg-black-80:hover,.hover-bg-black-80:focus{background-color:rgba(0,0,0,0.8)}.hover-bg-black-70:hover,.hover-bg-black-70:focus{background-color:rgba(0,0,0,0.7)}.hover-bg-black-60:hover,.hover-bg-black-60:focus{background-color:rgba(0,0,0,0.6)}.hover-bg-black-50:hover,.hover-bg-black-50:focus{background-color:rgba(0,0,0,0.5)}.hover-bg-black-40:hover,.hover-bg-black-40:focus{background-color:rgba(0,0,0,0.4)}.hover-bg-black-30:hover,.hover-bg-black-30:focus{background-color:rgba(0,0,0,0.3)}.hover-bg-black-20:hover,.hover-bg-black-20:focus{background-color:rgba(0,0,0,0.2)}.hover-bg-black-10:hover,.hover-bg-black-10:focus{background-color:rgba(0,0,0,0.1)}.hover-bg-white-90:hover,.hover-bg-white-90:focus{background-color:rgba(255,255,255,0.9)}.hover-bg-white-80:hover,.hover-bg-white-80:focus{background-color:rgba(255,255,255,0.8)}.hover-bg-white-70:hover,.hover-bg-white-70:focus{background-color:rgba(255,255,255,0.7)}.hover-bg-white-60:hover,.hover-bg-white-60:focus{background-color:rgba(255,255,255,0.6)}.hover-bg-white-50:hover,.hover-bg-white-50:focus{background-color:rgba(255,255,255,0.5)}.hover-bg-white-40:hover,.hover-bg-white-40:focus{background-color:rgba(255,255,255,0.4)}.hover-bg-white-30:hover,.hover-bg-white-30:focus{background-color:rgba(255,255,255,0.3)}.hover-bg-white-20:hover,.hover-bg-white-20:focus{background-color:rgba(255,255,255,0.2)}.hover-bg-white-10:hover,.hover-bg-white-10:focus{background-color:rgba(255,255,255,0.1)}.hover-dark-red:hover,.hover-dark-red:focus{color:#e7040f}.hover-red:hover,.hover-red:focus{color:#ff4136}.hover-light-red:hover,.hover-light-red:focus{color:#ff725c}.hover-orange:hover,.hover-orange:focus{color:#ff6300}.hover-gold:hover,.hover-gold:focus{color:#ffb700}.hover-yellow:hover,.hover-yellow:focus{color:gold}.hover-light-yellow:hover,.hover-light-yellow:focus{color:#fbf1a9}.hover-purple:hover,.hover-purple:focus{color:#5e2ca5}.hover-light-purple:hover,.hover-light-purple:focus{color:#a463f2}.hover-dark-pink:hover,.hover-dark-pink:focus{color:#d5008f}.hover-hot-pink:hover,.hover-hot-pink:focus{color:#ff41b4}.hover-pink:hover,.hover-pink:focus{color:#ff80cc}.hover-light-pink:hover,.hover-light-pink:focus{color:#ffa3d7}.hover-dark-green:hover,.hover-dark-green:focus{color:#137752}.hover-green:hover,.hover-green:focus{color:#19a974}.hover-light-green:hover,.hover-light-green:focus{color:#9eebcf}.hover-navy:hover,.hover-navy:focus{color:#001b44}.hover-dark-blue:hover,.hover-dark-blue:focus{color:#00449e}.hover-blue:hover,.hover-blue:focus{color:#357edd}.hover-light-blue:hover,.hover-light-blue:focus{color:#96ccff}.hover-lightest-blue:hover,.hover-lightest-blue:focus{color:#cdecff}.hover-washed-blue:hover,.hover-washed-blue:focus{color:#f6fffe}.hover-washed-green:hover,.hover-washed-green:focus{color:#e8fdf5}.hover-washed-yellow:hover,.hover-washed-yellow:focus{color:#fffceb}.hover-washed-red:hover,.hover-washed-red:focus{color:#ffdfdf}.hover-bg-dark-red:hover,.hover-bg-dark-red:focus{background-color:#e7040f}.hover-bg-red:hover,.hover-bg-red:focus{background-color:#ff4136}.hover-bg-light-red:hover,.hover-bg-light-red:focus{background-color:#ff725c}.hover-bg-orange:hover,.hover-bg-orange:focus{background-color:#ff6300}.hover-bg-gold:hover,.hover-bg-gold:focus{background-color:#ffb700}.hover-bg-yellow:hover,.hover-bg-yellow:focus{background-color:gold}.hover-bg-light-yellow:hover,.hover-bg-light-yellow:focus{background-color:#fbf1a9}.hover-bg-purple:hover,.hover-bg-purple:focus{background-color:#5e2ca5}.hover-bg-light-purple:hover,.hover-bg-light-purple:focus{background-color:#a463f2}.hover-bg-dark-pink:hover,.hover-bg-dark-pink:focus{background-color:#d5008f}.hover-bg-hot-pink:hover,.hover-bg-hot-pink:focus{background-color:#ff41b4}.hover-bg-pink:hover,.hover-bg-pink:focus{background-color:#ff80cc}.hover-bg-light-pink:hover,.hover-bg-light-pink:focus{background-color:#ffa3d7}.hover-bg-dark-green:hover,.hover-bg-dark-green:focus{background-color:#137752}.hover-bg-green:hover,.hover-bg-green:focus{background-color:#19a974}.hover-bg-light-green:hover,.hover-bg-light-green:focus{background-color:#9eebcf}.hover-bg-navy:hover,.hover-bg-navy:focus{background-color:#001b44}.hover-bg-dark-blue:hover,.hover-bg-dark-blue:focus{background-color:#00449e}.hover-bg-blue:hover,.hover-bg-blue:focus{background-color:#357edd}.hover-bg-light-blue:hover,.hover-bg-light-blue:focus{background-color:#96ccff}.hover-bg-lightest-blue:hover,.hover-bg-lightest-blue:focus{background-color:#cdecff}.hover-bg-washed-blue:hover,.hover-bg-washed-blue:focus{background-color:#f6fffe}.hover-bg-washed-green:hover,.hover-bg-washed-green:focus{background-color:#e8fdf5}.hover-bg-washed-yellow:hover,.hover-bg-washed-yellow:focus{background-color:#fffceb}.hover-bg-washed-red:hover,.hover-bg-washed-red:focus{background-color:#ffdfdf}.hover-bg-inherit:hover,.hover-bg-inherit:focus{background-color:inherit}.pa0{padding:0}.pa1{padding:.25rem}.pa2,header .menu-bar .items a,header .user-options a,.tab{padding:.5rem}.pa3,header #login-popup{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0,.pagination .button{padding-top:0;padding-bottom:0}.pv1,.optionbar .options>*{padding-top:.25rem;padding-bottom:.25rem}.pv2,header .menu-bar .items a.project-logo,button,.button,input[type=button],input[type=submit]{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2,.optionbar .options>*,.pagination .button{padding-left:.5rem;padding-right:.5rem}.ph3,button,.button,input[type=button],input[type=submit]{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0,.thread{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3,hr{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}@media screen and (min-width: 30em){.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns,.optionbar .options>*{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns,header .menu-bar .items a{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns,header .menu-bar .items a:first-child{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}}@media screen and (min-width: 30em) and (max-width: 60em){.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}}@media screen and (min-width: 60em){.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l,header .menu-bar .items a{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l,header .menu-bar .items a:first-child{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}}.na1{margin:-.25rem}.na2{margin:-.5rem}.na3{margin:-1rem}.na4{margin:-2rem}.na5{margin:-4rem}.na6{margin:-8rem}.na7{margin:-16rem}.nl1{margin-left:-.25rem}.nl2{margin-left:-.5rem}.nl3{margin-left:-1rem}.nl4{margin-left:-2rem}.nl5{margin-left:-4rem}.nl6{margin-left:-8rem}.nl7{margin-left:-16rem}.nr1{margin-right:-.25rem}.nr2{margin-right:-.5rem}.nr3{margin-right:-1rem}.nr4{margin-right:-2rem}.nr5{margin-right:-4rem}.nr6{margin-right:-8rem}.nr7{margin-right:-16rem}.nb1{margin-bottom:-.25rem}.nb2{margin-bottom:-.5rem}.nb3{margin-bottom:-1rem}.nb4{margin-bottom:-2rem}.nb5{margin-bottom:-4rem}.nb6{margin-bottom:-8rem}.nb7{margin-bottom:-16rem}.nt1{margin-top:-.25rem}.nt2{margin-top:-.5rem}.nt3{margin-top:-1rem}.nt4{margin-top:-2rem}.nt5{margin-top:-4rem}.nt6{margin-top:-8rem}.nt7{margin-top:-16rem}@media screen and (min-width: 30em){.na1-ns{margin:-.25rem}.na2-ns{margin:-.5rem}.na3-ns{margin:-1rem}.na4-ns{margin:-2rem}.na5-ns{margin:-4rem}.na6-ns{margin:-8rem}.na7-ns{margin:-16rem}.nl1-ns{margin-left:-.25rem}.nl2-ns{margin-left:-.5rem}.nl3-ns{margin-left:-1rem}.nl4-ns{margin-left:-2rem}.nl5-ns{margin-left:-4rem}.nl6-ns{margin-left:-8rem}.nl7-ns{margin-left:-16rem}.nr1-ns{margin-right:-.25rem}.nr2-ns{margin-right:-.5rem}.nr3-ns{margin-right:-1rem}.nr4-ns{margin-right:-2rem}.nr5-ns{margin-right:-4rem}.nr6-ns{margin-right:-8rem}.nr7-ns{margin-right:-16rem}.nb1-ns{margin-bottom:-.25rem}.nb2-ns{margin-bottom:-.5rem}.nb3-ns{margin-bottom:-1rem}.nb4-ns{margin-bottom:-2rem}.nb5-ns{margin-bottom:-4rem}.nb6-ns{margin-bottom:-8rem}.nb7-ns{margin-bottom:-16rem}.nt1-ns{margin-top:-.25rem}.nt2-ns{margin-top:-.5rem}.nt3-ns{margin-top:-1rem}.nt4-ns{margin-top:-2rem}.nt5-ns{margin-top:-4rem}.nt6-ns{margin-top:-8rem}.nt7-ns{margin-top:-16rem}}@media screen and (min-width: 30em) and (max-width: 60em){.na1-m{margin:-.25rem}.na2-m{margin:-.5rem}.na3-m{margin:-1rem}.na4-m{margin:-2rem}.na5-m{margin:-4rem}.na6-m{margin:-8rem}.na7-m{margin:-16rem}.nl1-m{margin-left:-.25rem}.nl2-m{margin-left:-.5rem}.nl3-m{margin-left:-1rem}.nl4-m{margin-left:-2rem}.nl5-m{margin-left:-4rem}.nl6-m{margin-left:-8rem}.nl7-m{margin-left:-16rem}.nr1-m{margin-right:-.25rem}.nr2-m{margin-right:-.5rem}.nr3-m{margin-right:-1rem}.nr4-m{margin-right:-2rem}.nr5-m{margin-right:-4rem}.nr6-m{margin-right:-8rem}.nr7-m{margin-right:-16rem}.nb1-m{margin-bottom:-.25rem}.nb2-m{margin-bottom:-.5rem}.nb3-m{margin-bottom:-1rem}.nb4-m{margin-bottom:-2rem}.nb5-m{margin-bottom:-4rem}.nb6-m{margin-bottom:-8rem}.nb7-m{margin-bottom:-16rem}.nt1-m{margin-top:-.25rem}.nt2-m{margin-top:-.5rem}.nt3-m{margin-top:-1rem}.nt4-m{margin-top:-2rem}.nt5-m{margin-top:-4rem}.nt6-m{margin-top:-8rem}.nt7-m{margin-top:-16rem}}@media screen and (min-width: 60em){.na1-l{margin:-.25rem}.na2-l{margin:-.5rem}.na3-l{margin:-1rem}.na4-l{margin:-2rem}.na5-l{margin:-4rem}.na6-l{margin:-8rem}.na7-l{margin:-16rem}.nl1-l{margin-left:-.25rem}.nl2-l{margin-left:-.5rem}.nl3-l{margin-left:-1rem}.nl4-l{margin-left:-2rem}.nl5-l{margin-left:-4rem}.nl6-l{margin-left:-8rem}.nl7-l{margin-left:-16rem}.nr1-l{margin-right:-.25rem}.nr2-l{margin-right:-.5rem}.nr3-l{margin-right:-1rem}.nr4-l{margin-right:-2rem}.nr5-l{margin-right:-4rem}.nr6-l{margin-right:-8rem}.nr7-l{margin-right:-16rem}.nb1-l{margin-bottom:-.25rem}.nb2-l{margin-bottom:-.5rem}.nb3-l{margin-bottom:-1rem}.nb4-l{margin-bottom:-2rem}.nb5-l{margin-bottom:-4rem}.nb6-l{margin-bottom:-8rem}.nb7-l{margin-bottom:-16rem}.nt1-l{margin-top:-.25rem}.nt2-l{margin-top:-.5rem}.nt3-l{margin-top:-1rem}.nt4-l{margin-top:-2rem}.nt5-l{margin-top:-4rem}.nt6-l{margin-top:-8rem}.nt7-l{margin-top:-16rem}}.collapse{border-collapse:collapse;border-spacing:0}.striped--light-silver:nth-child(odd){background-color:#aaa}.striped--moon-gray:nth-child(odd){background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.stripe-light:nth-child(odd){background-color:rgba(255,255,255,0.1)}.stripe-dark:nth-child(odd){background-color:rgba(0,0,0,0.1)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}@media screen and (min-width: 30em){.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}}@media screen and (min-width: 30em) and (max-width: 60em){.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}}@media screen and (min-width: 60em){.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}@media screen and (min-width: 30em){.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.tj-ns{text-align:justify}}@media screen and (min-width: 30em) and (max-width: 60em){.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}}@media screen and (min-width: 60em){.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}@media screen and (min-width: 30em){.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}}@media screen and (min-width: 30em) and (max-width: 60em){.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}}@media screen and (min-width: 60em){.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.f7{font-size:.75rem}@media screen and (min-width: 30em){.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.f7-ns{font-size:.75rem}}@media screen and (min-width: 30em) and (max-width: 60em){.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.f7-m{font-size:.75rem}}@media screen and (min-width: 60em){.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.f7-l{font-size:.75rem}}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 30em){.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width: 30em) and (max-width: 60em){.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width: 60em){.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.overflow-container{overflow-y:scroll}.center{margin-right:auto;margin-left:auto}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}@media screen and (min-width: 30em){.center-ns{margin-right:auto;margin-left:auto}.mr-auto-ns{margin-right:auto}.ml-auto-ns{margin-left:auto}}@media screen and (min-width: 30em) and (max-width: 60em){.center-m{margin-right:auto;margin-left:auto}.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}}@media screen and (min-width: 60em){.center-l{margin-right:auto;margin-left:auto}.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}}.clip{position:fixed !important;_position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}@media screen and (min-width: 30em){.clip-ns{position:fixed !important;_position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 30em) and (max-width: 60em){.clip-m{position:fixed !important;_position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 60em){.clip-l{position:fixed !important;_position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}@media screen and (min-width: 30em){.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}}@media screen and (min-width: 30em) and (max-width: 60em){.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}}@media screen and (min-width: 60em){.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}@media screen and (min-width: 30em){.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width: 30em) and (max-width: 60em){.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width: 60em){.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}.dim{opacity:1;transition:opacity .15s ease-in}.dim:hover,.dim:focus{opacity:.5;transition:opacity .15s ease-in}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow{transition:opacity .15s ease-in}.glow:hover,.glow:focus{opacity:1;transition:opacity .15s ease-in}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:hover .child,.hide-child:focus .child,.hide-child:active .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:hover,.underline-hover:focus{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;transform:translateZ(0);transition:transform 0.25s ease-out}.grow:hover,.grow:focus{transform:scale(1.05)}.grow:active{transform:scale(0.9)}.grow-large{-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;transform:translateZ(0);transition:transform .25s ease-in-out}.grow-large:hover,.grow-large:focus{transform:scale(1.2)}.grow-large:active{transform:scale(0.95)}.pointer:hover{cursor:pointer}.shadow-hover{cursor:pointer;position:relative;transition:all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)}.shadow-hover::after{content:'';box-shadow:0px 0px 16px 2px rgba(0,0,0,0.2);border-radius:inherit;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)}.shadow-hover:hover::after,.shadow-hover:focus::after{opacity:1}.bg-animate,.bg-animate:hover,.bg-animate:focus{transition:background-color .15s ease-in-out}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:999}.z-9999{z-index:9999}.z-max{z-index:2147483647}.z-inherit{z-index:inherit}.z-initial{z-index:initial}.z-unset{z-index:unset}.nested-copy-line-height p,.nested-copy-line-height ul,.nested-copy-line-height ol{line-height:1.5}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:1.25}.nested-list-reset ul,.nested-list-reset ol{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:.1em;margin-top:0;margin-bottom:0}.nested-copy-seperator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:#357edd;transition:color .15s ease-in}.nested-links a:hover,.nested-links a:focus{color:#96ccff;transition:color .15s ease-in}.codeblock .hll{background-color:#ffffcc}.codeblock .c{color:#60a0b0;font-style:italic}.codeblock .err{color:#FF0000}.codeblock .k{color:#007020;font-weight:bold}.codeblock .o{color:#666666}.codeblock .cm{color:#60a0b0;font-style:italic}.codeblock .cp{color:#007020}.codeblock .c1{color:#60a0b0;font-style:italic}.codeblock .cs{color:#60a0b0;background-color:#fff0f0}.codeblock .gd{color:#A00000}.codeblock .ge{font-style:italic}.codeblock .gr{color:#FF0000}.codeblock .gh{color:#000080;font-weight:bold}.codeblock .gi{color:#00A000}.codeblock .go{color:#808080}.codeblock .gp{color:#c65d09;font-weight:bold}.codeblock .gs{font-weight:bold}.codeblock .gu{color:#800080;font-weight:bold}.codeblock .gt{color:#0040D0}.codeblock .kc{color:#007020;font-weight:bold}.codeblock .kd{color:#007020;font-weight:bold}.codeblock .kn{color:#007020;font-weight:bold}.codeblock .kp{color:#007020}.codeblock .kr{color:#007020;font-weight:bold}.codeblock .kt{color:#902000}.codeblock .m{color:#40a070}.codeblock .s{color:#4070a0}.codeblock .na{color:#4070a0}.codeblock .nb{color:#007020}.codeblock .nc{color:#0e84b5;font-weight:bold}.codeblock .no{color:#60add5}.codeblock .nd{color:#555555;font-weight:bold}.codeblock .ni{color:#d55537;font-weight:bold}.codeblock .ne{color:#007020}.codeblock .nf{color:#06287e}.codeblock .nl{color:#002070;font-weight:bold}.codeblock .nn{color:#0e84b5;font-weight:bold}.codeblock .nt{color:#062873;font-weight:bold}.codeblock .nv{color:#bb60d5}.codeblock .ow{color:#007020;font-weight:bold}.codeblock .w{color:#bbbbbb}.codeblock .mf{color:#40a070}.codeblock .mh{color:#40a070}.codeblock .mi{color:#40a070}.codeblock .mo{color:#40a070}.codeblock .sb{color:#4070a0}.codeblock .sc{color:#4070a0}.codeblock .sd{color:#4070a0;font-style:italic}.codeblock .s2{color:#4070a0}.codeblock .se{color:#4070a0;font-weight:bold}.codeblock .sh{color:#4070a0}.codeblock .si{color:#70a0d0;font-style:italic}.codeblock .sx{color:#c65d09}.codeblock .sr{color:#235388}.codeblock .s1{color:#4070a0}.codeblock .ss{color:#517918}.codeblock .bp{color:#007020}.codeblock .vc{color:#bb60d5}.codeblock .vg{color:#bb60d5}.codeblock .vi{color:#bb60d5}.codeblock .il{color:#40a070}.dark{background-color:#222;color:#bbb}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{box-sizing:border-box}br{border-style:none}body{background-color:#fff;background-color:var(--main-background-color);color:#000;color:var(--main-color);font-family:"Fira Sans", sans-serif;background-size:cover;min-height:100vh;box-sizing:border-box;font-size:.875rem;line-height:1.5em;font-weight:400}a{color:#666;color:var(--link-color);border-bottom-color:#666;border-bottom-color:var(--link-border-color);border-bottom:none;text-decoration:none}a.external::after{font-family:"icons";content:" 1";vertical-align:middle}ol{list-style-type:decimal}ul{list-style-type:circle;padding:0px;margin:0px}.list-none{list-style-type:none}li{padding:0px;margin:0px;padding-left:5px;margin-left:15px}h1,h2{font-weight:500}h1,h2,h3,h4{margin:0px;margin-bottom:5px;font-size:1.5rem;line-height:1.25em}strong{font-weight:600}em{font-style:italic}p{box-sizing:border-box;margin:0px;padding:0px}.p-spaced p:not(:first-child){margin-top:.6em}.p-spaced p:not(:last-child){margin-bottom:.6em}table{border-collapse:collapse;table-layout:fixed}th,td{color:#000;color:var(--fg-font-color)}td{vertical-align:baseline}tr.line-above th,tr.line-above td{border-top-color:#444;border-top-color:var(--table-border-color);border-top-width:1px;border-top-style:solid;padding-top:20px}hr{border-top-color:#444;border-top-color:var(--hr-color);border-width:1px 0 0;border-top-style:solid;max-width:300px}article code{font-family:"Fira Mono", monospace}.big{font-size:120%}.title{font-weight:bold}.clear{width:0}.full{width:100%}.hidden{display:none}.empty{padding-left:20px}.column h2{text-align:center;margin-bottom:20px}.margin-center{margin-left:auto;margin-right:auto}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.b--theme{border-color:#666;border-color:var(--theme-color)}.c--dim{color:#333;color:var(--dim-color)}.c--theme-dim{color:#aaa;color:var(--theme-color-dim)}.b--dim{border-color:#333;border-color:var(--dim-color)}.b--theme-dim{border-color:#aaa;border-color:var(--theme-color-dim)}.c--dimmer,footer .list li:not(:last-child)::after{color:#999;color:var(--dimmer-color)}.c--theme-dimmer{color:#bbb;color:var(--theme-color-dimmer)}.b--dimmer,.contents div.code{border-color:#999;border-color:var(--dimmer-color)}.b--theme-dimmer{border-color:#bbb;border-color:var(--theme-color-dimmer)}.c--dimmest{color:#bbb;color:var(--dimmest-color)}.c--theme-dimmest{color:#ccc;color:var(--theme-color-dimmest)}.b--dimmest,header #login-popup,.optionbar,.post .contents blockquote{border-color:#bbb;border-color:var(--dimmest-color)}.b--theme-dimmest{border-color:#ccc;border-color:var(--theme-color-dimmest)}.bg--dim{background-color:#f0f0f0;background-color:var(--dim-background)}.bg--content{background-color:#f8f8f8;background-color:var(--content-background)}.f8{font-size:0.65rem}.mw-site{max-width:80rem}.mh-100{max-height:100%}.mh-50vh{max-height:50vh}.mh-60vh{max-height:60vh}.mh-70vh{max-height:70vh}.mh-80vh{max-height:80vh}.fira{font-family:"Fira Sans", sans-serif}.bi-avoid{break-inside:avoid}.cc-auto{column-count:auto}.cc1{column-count:1}.cc2{column-count:2}.cc3{column-count:3}.cg0{column-gap:0}.cg1{column-gap:.25rem}.cg2{column-gap:.5rem}.cg3{column-gap:1rem}.cg4{column-gap:2rem}.cg5{column-gap:4rem}@media screen and (min-width: 30em){.bi-avoid-ns{break-inside:avoid}.cc-auto-ns{column-count:auto}.cc1-ns{column-count:1}.cc2-ns{column-count:2}.cc3-ns{column-count:3}.cg0-ns{column-gap:0}.cg1-ns{column-gap:.25rem}.cg2-ns{column-gap:.5rem}.cg3-ns{column-gap:1rem}.cg4-ns{column-gap:2rem}.cg5-ns{column-gap:4rem}.bg--dim-ns{background-color:#f0f0f0;background-color:var(--dim-background)}}@media screen and (min-width: 30em) and (max-width: 60em){.bi-avoid-m{break-inside:avoid}.cc-auto-m{column-count:auto}.cc1-m{column-count:1}.cc2-m{column-count:2}.cc3-m{column-count:3}.cg1-m{column-gap:.25rem}.cg2-m{column-gap:.5rem}.cg3-m{column-gap:1rem}.cg4-m{column-gap:2rem}.cg5-m{column-gap:4rem}.bg--dim-m{background-color:#f0f0f0;background-color:var(--dim-background)}}@media screen and (min-width: 60em){.bi-avoid-l{break-inside:avoid}.cc-auto-l{column-count:auto}.cc1-l{column-count:1}.cc2-l{column-count:2}.cc3-l{column-count:3}.cg1-l{column-gap:.25rem}.cg2-l{column-gap:.5rem}.cg3-l{column-gap:1rem}.cg4-l{column-gap:2rem}.cg5-l{column-gap:4rem}.bg--dim-l{background-color:#f0f0f0;background-color:var(--dim-background)}}.not-first:first-child{display:none}.not-first-of-type:first-of-type{display:none}.not-last:last-child{display:none}.not-last-of-type:last-of-type{display:none}.svgicon svg{fill:currentColor;width:1em;height:1em}.svgicon:not(.svgicon-nofix) svg{transform:translate(0px, 0.1em)}.center-layout{margin-right:auto;margin-left:auto}header{border-bottom:2px solid #333}header .menu-bar{width:100%;z-index:10}header .menu-bar .items a{font-weight:bold}header .menu-bar .items a.patreon{float:right;height:30px;padding-top:18px;display:inline-block}header .menu-bar .items a h1{display:inline}header .menu-bar .hmdev-logo{width:100%}@media screen and (min-width: 30em){header .menu-bar .hmdev-logo{width:11.25rem}}header .menu-bar .hmdev-logo.project{width:70px}@keyframes logo-blink{from{opacity:0.0}to{opacity:1.0}}@-webkit-keyframes logo-blink{from{opacity:0.0}to{opacity:1.0}}header .menu-bar .logo{height:3.75rem;background-color:#333;margin:0px;padding:0px}header .menu-bar .underscore{width:100%;height:100%;animation:logo-blink 1s infinite alternate;-webkit-animation:logo-blink 1s infinite alternate ease-in-out}header .menu-bar .logo,header .menu-bar .underscore{background-size:8.75rem;background-repeat:no-repeat;background-position:center center}header .user-options{position:relative}header .login,header .register{text-align:center}header #login-popup{background-color:#fbfbfb;background-color:var(--login-popup-background);color:#000;color:var(--fg-font-color);border-width:1px;border-style:dashed;visibility:hidden;position:absolute;z-index:12;margin-top:10px;right:0px;top:20px;width:290px;max-height:0px;overflow:hidden;opacity:0;transition:all 0.2s}header #login-popup.open{max-height:170px;opacity:1;visibility:visible}header #login-popup label{padding-right:10px}@media screen and (min-width: 30em){footer .list li:not(:last-child)::after{content:' / '}}.content{background-color:#f8f8f8;background-color:var(--content-background);text-align:center;margin:auto}.content p{-moz-text-size-adjust:auto;-webkit-text-size-adjust:auto;text-size-adjust:auto}.content .description{line-height:1.42em;text-align:left;margin:auto}.content .description p{margin-bottom:.5rem;text-align:left}.content>.top-bar{text-align:left}.content-block{background-repeat:repeat-x;border-radius:2px;text-align:left;width:100%;position:relative;box-sizing:border-box}.content-block.top-bar{background-image:none}.content-block.language-desc{padding:10px}.content-block.language-desc h3{margin-left:10px}.content-block .no-bg{background-image:none;background-color:transparent;box-shadow:none}.sidebar .content-block.single{padding:0px;margin-top:20px}.sidebar .content-block.top-bar{width:80%;display:block;margin:10px auto}.sidebar br.sidebar-filler{line-height:20px}.sidebar .projectlist{background-color:transparent}.content-block .bottom-padding,.sidebar .bottom-padding{margin-top:1rem}.breadcrumb:hover{text-decoration:underline}.breadcrumb.current{text-overflow:clip ellipsis}.breadcrumb-before:nth-of-type(n+2)::before{content:'≫'}.optionbar{width:100%;display:flex;flex-direction:column;justify-content:space-between;text-align:center;border-style:dashed;border-width:0px;border-bottom-width:1px}@media screen and (min-width: 30em){.optionbar{flex-direction:row;text-align:left}}.optionbar.bottom{border-bottom-width:0px;border-top-width:1px}.optionbar.center{text-align:center}.optionbar .options{display:flex;flex-direction:column}@media screen and (min-width: 30em){.optionbar .options{flex-direction:row}}.optionbar button,.optionbar .button,.optionbar input[type=button],.optionbar input[type=submit]{border:none;background:none;font-weight:normal}.optionbar .group{display:inline-block;height:100%;margin:auto}.tab{background-color:#fff;background-color:var(--tab-background)}.tab-bar{border-color:#d8d8d8;border-color:var(--tab-border-color);width:100%;border-bottom-width:1px;border-bottom-style:solid;box-sizing:border-box}.tab-bar .tab-button{background-color:#dfdfdf;background-color:var(--tab-button-background);border-color:#d8d8d8;border-color:var(--tab-border-color);height:100%;display:inline-block;padding:10px 15px;line-height:100%;cursor:pointer;border-width:1px;border-style:solid;box-sizing:border-box}.tab-bar .tab-button:hover{background-color:#efefef;background-color:var(--tab-button-background-hover)}.tab-bar .tab-button.current{background-color:#fff;background-color:var(--tab-button-background-current);border-bottom-color:transparent;font-weight:bold;height:105%}.pagination .page.current{cursor:default;font-weight:600}.pagination .page.current:hover{text-decoration:none}.user-link{position:relative}.user-popup{opacity:0;max-height:0px;width:340px;text-align:center;transition:max-height 0.2s, opacity 0.1s;box-shadow:0px 2px 5px rgba(0,0,0,0.3);overflow:hidden;position:absolute;bottom:0px}.user-popup.expanded{visibility:visible;max-height:250px;opacity:1}.user-popup table{width:100%;position:relative;border-radius:3px;z-index:10}.user-popup td{vertical-align:top;padding:15px 9px}.user-popup #avatar{width:100px;height:100px;background-size:contain;background-position:center center;background-repeat:no-repeat;border-radius:3px;margin:0px auto}.user-popup .username{font-weight:bold}.user-popup .bottom{border-top:1px solid transparent;padding:15px}.user-popup .bottom .bio{vertical-align:top;width:90%}.site-search{width:100%}.site-search:focus{width:200%}.site-search[type=text].lite{transition:border-bottom-color 60ms ease-in-out, width 300ms ease}#search_button_homepage{margin:0px;height:100%;height:calc(100% - 2px);border-radius:0px;display:inline-block;display:none}.background-even:nth-of-type(even){background-color:#f8f8f8;background-color:var(--background-even-background)}.userlist{text-align:center;width:100%;margin:0px auto;padding-top:30px;position:relative;line-height:0em}.userlist .user{margin:5px;display:inline-block;height:200px;max-height:180px;text-align:left;position:relative;width:296px;border-radius:3px;line-height:1.4em;overflow:hidden;box-shadow:0px 2px 5px rgba(0,0,0,0.2);top:0px;transition:box-shadow 0.2s, background-color 0.2s}.userlist .user:hover{box-shadow:0px 3px 7px rgba(0,0,0,0.2)}.userlist .user table{border:1px solid transparent;width:100%;height:100%}.userlist .user .bottom{transition:background-color 0.2s}.userlist .user td{vertical-align:top}.userlist .user td.avatar{width:100px;height:80px}.userlist .user .name{text-align:left}.userlist .user .name .username{vertical-align:middle}.userlist .user .avatar .image{display:block;float:left;width:80px;height:80px;background-size:cover;margin-right:10px}.userlist .user .bio{padding:5px}.text{background-color:#f9f9f9;background-color:var(--text-background)}.underline{text-decoration:underline}.monospace{font-family:"Fira Mono", monospace;background-color:rgba(0,0,0,0.1);padding:0.2em 0 0.05em;border-radius:3px}.monospace::before,.monospace::after{content:"\00a0";letter-spacing:-0.2em}.center{text-align:center}.right{text-align:right}.left{text-align:left}.justify{text-align:justify;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}.spoiler{border-color:#aaa;border-color:var(--spoiler-border);border-width:1px;border-style:dashed;color:transparent}.spoiler::selection{color:white;background-color:black}pre{font-family:monospace}.post-edit{width:90%;margin:auto}.toolbar{background-color:#fff;background-color:var(--editor-toolbar-background);border-color:rgba(0,0,0,0);border-color:var(--editor-toolbar-border-color);border-radius:3px;height:2.2em;overflow-y:scroll;transition:all 0.3s;border:1px solid transparent}.toolbar .button,.toolbar input[type=button]{background-color:rgba(0,0,0,0);background-color:var(--editor-toolbar-button-background);border-color:#ccc;border-color:var(--editor-toolbar-button-border-color);line-height:2.2em;box-shadow:none;border:0px;border-right:1px solid transparent;border-radius:0px;margin:0px;padding:0px 10px;height:100%;vertical-align:bottom;text-transform:none;font-weight:300}.toolbar .button:hover,.toolbar input[type=button]:hover{background-color:#ddd;background-color:var(--editor-toolbar-button-background-hover)}.toolbar input[type="text"]{height:2.2em;border:0px solid transparent}.actionbar{text-align:center}.editor .body{width:100%;font-size:13pt;height:25em}.editor .title-edit{width:100%}.editor .title-edit label{font-weight:bold}.editor .title-edit input{width:100%}.editor .editreason label{font-weight:bold}.editor .editreason input{width:100%}.editor .toolbar{width:95%;margin:10px auto}.editor .toolbar select{font-size:10pt;border:0px}.editor .toolbar select:hover{border:0px}.editor .toolbar select:focus{border:0px}.editor .toolbar #bold{font-weight:bold}.editor .toolbar #italic{font-style:italic}.editor .toolbar #underline{text-decoration:underline}.editor .toolbar #monospace{font-family:monospace}.editor .toolbar #url{text-decoration:underline;font-style:italic}.editor .actionbar input[type=button]{margin-left:10px;margin-right:10px}.edit-form .error{margin-left:5em;padding:10px;color:red}.edit-form input[type=text]{min-width:20em}.edit-form textarea{font-size:13pt}.edit-form .note{margin-bottom:5px;font-style:italic;font-size:90%}.edit-form .links{width:80%;min-height:200px;height:15vh}.edit-form .half{padding:10px;text-align:center}.edit-form table{width:95%;margin:auto;border-collapse:separate;border-spacing:0px 10px}.edit-form table td{padding-bottom:15px;width:90%}.edit-form table td.half{width:50%}.edit-form table td table{width:100%}.edit-form th{text-align:right;font-weight:bold;padding-right:10px;padding-bottom:15px;vertical-align:top;max-width:5em}.edit-form td table th{text-align:left}.edit-form .page-options label{font-weight:bold;margin-right:20px}.edit-form.profile-edit .longbio{width:100%;min-height:400px;height:30vh}.edit-form.profile-edit .avatar-preview{border:1px solid transparent;margin:10px;margin-bottom:0px}.edit-form.profile-edit textarea.shortbio,.edit-form.profile-edit textarea.signature{min-width:300px;width:50%;min-height:100px;height:4em}.edit-form.profile-edit .logo-preview{border-color:#999;border-color:var(--project-edit-logo-previw-border-color);width:200px;border-width:1px}.edit-form.project-edit .project_description{width:100%;min-height:400px;height:30vh}.edit-form.project-edit input.project_blurb,.edit-form.project-edit input.project_name{min-width:300px;width:50%}.edit-form.project-edit .quota-bar{border-color:#999;border-color:var(--project-edit-quota-bar-border-color);width:500px;border-width:1px;margin-bottom:10px}.edit-form.project-edit .quota-bar .quota-filled{background-color:#444;background-color:var(--project-edit-quota-bar-filled-background);height:100%}.episode-list .description p{line-height:1.42em}.episode-list h2,.episode-list h3{font-size:1em;font-weight:bold}.episode-list ul{margin-bottom:30px;list-style-type:none;margin-top:-2px}#outer_holder .back{margin:0px auto 20px auto}#outer_holder .back .outer{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;align-items:flex-start;-webkit-justify-content:center;justify-content:center}#outer_holder .back .outer>.sidebar{max-width:260px}#outer_holder .back .outer>.sidebar>div{margin:6px;background-color:#ddd;width:200px;margin-bottom:12px}#outer_holder .back article{-webkit-box-flex:1 1 40%;-moz-box-flex:1 1 40%;-webkit-flex:1 1 40%;-ms-flex:1 1 40%;flex:1 1 40%}#player-wrapper{display:inline-block;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;box-shadow:0px 0px 4px #000}@media screen{#player-wrapper #player{width:320px;height:210px}}@media screen and (min-width: 500px){#player-wrapper #player{width:480px;height:300px}}@media screen and (min-width: 670px){#player-wrapper #player{width:640px;height:390px}}@media screen and (min-width: 890px){#player-wrapper #player{width:854px;height:510px}}@media screen and (min-width: 1320px){#player-wrapper #player{width:1280px;height:750px}}.annotation{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;align-items:flex-start}.annotation .navigation{width:450px;display:inline-block}.annotation .notes{display:inline-block}nav.timecodes{margin:0px;max-width:450px;min-height:700px;overflow-y:auto;-webkit-box-flex:0 0 auto;-moz-box-flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}nav.timecodes a{color:#ccc}nav.timecodes ul[name=markers]{margin:0px;padding:0px;list-style-type:none;font-size:15px}nav.timecodes ul[name=markers]>li{padding:4px;display:block;border-bottom:1px solid #333}nav.timecodes ul[name=markers]>li:hover{background-color:rgba(0,90,0,0.3)}nav.timecodes ul[name=markers]>li a{display:block;text-decoration:none}nav.timecodes ul[name=markers]>li a span.timecode{color:#777777;float:left;font-size:86%;margin-right:.5em;text-align:right;width:42px}#video-notes{min-height:700px;margin-top:0px}#video-notes pre{margin-top:1.5em;margin-left:10px;margin-right:30px;margin-bottom:1.5em;padding:10px;overflow:auto}#game_icon{background-position:0px 0px;background-repeat:no-repeat;background-image:url("/images/hero_home_200x114.png");background-size:cover;height:113px;margin:0px 0px 4px 0px}.sidebar-heading{margin:0px 0px 16px;font-size:18px;line-height:24px;font-weight:bold;color:#00547c;white-space:nowrap;text-shadow:1px 1px 2px rgba(0,0,0,0.25);text-align:center}.queryContainer{width:1000px;margin:15px auto;display:flex;flex-direction:horizontal}.queryContainer label{flex-grow:0;flex-shrink:0;padding-right:15px}#query{flex-grow:1}#results{width:800px;margin:0 auto}.dayContainer:nth-child(2n){background-color:rgba(0,0,0,0.05)}.dayName{width:200px;display:inline-block;vertical-align:top;line-height:16px;box-sizing:border-box;padding:5px}.markerList{display:inline-block;width:600px;box-sizing:border-box;vertical-align:top}.marker{cursor:pointer;border-top:1px solid rgba(255,255,255,0.1);display:block;text-decoration:none}.marker:first-child{border:none}.marker:hover{background-color:rgba(0,0,0,0.1)}.marker b{color:black;background-color:#ff9b00}#resultsSummary{text-align:center;margin:10px 0}.radio,.checkbox{position:relative;display:flex;flex-direction:column;padding-left:1.8rem}.radio input,.checkbox input{visibility:hidden;position:absolute}.radio label::before,.checkbox label::before{color:#000;color:var(--fg-font-color);background-color:#fafafc;background-color:var(--form-check-background);border-color:#999;border-color:var(--form-check-border-color);position:absolute;left:0;display:flex;justify-content:center;align-items:center;border-width:1px;border-style:solid;content:"";width:1.3rem;height:1.3rem;transition:border-color 0.2s}.radio label::before:hover,.checkbox label::before:hover{border-color:#4c9ed9;border-color:var(--form-check-border-color-hover)}.radio input:disabled ~ *,.checkbox input:disabled ~ *{opacity:0.5}.radio label:before{border-radius:50px}.radio input:checked+label:before{content:"\25cf"}.checkbox label:before{border-radius:0.1cm}.checkbox input:checked+label:before{content:"\2713"}input[type=text],input[type=password],textarea,select{color:#000;color:var(--fg-font-color);background-color:#fff;background-color:var(--form-text-background);border-color:#999;border-color:var(--form-text-border-color);border-width:1px;border-radius:2px;transition:border-color 0.3s, background-color 0.3s;outline:none}input[type=text].lite,input[type=password].lite,textarea.lite,select.lite{background-color:transparent;border-radius:0;border-width:2px 0 2px;border-style:solid;border-color:transparent;transition:border-bottom-color 60ms ease-in-out}input[type=text].lite:focus,input[type=text].lite:active,input[type=password].lite:focus,input[type=password].lite:active,textarea.lite:focus,textarea.lite:active,select.lite:focus,select.lite:active{background-color:transparent;border-top-color:transparent;border-bottom-color:var(--input-lite-border)}input[type=text]:active,input[type=text]:focus,input[type=password]:active,input[type=password]:focus,textarea:active,textarea:focus,select:active,select:focus{background-color:#fafafc;background-color:var(--form-text-background-active);border-color:#4c9ed9;border-color:var(--form-text-border-color-active)}input[type=text]:not(.lite),input[type=password]:not(.lite){padding:5px}form .note{font-style:italic}select{padding:5px 10px}option[selected]{font-weight:bold}input[disabled],select[disabled],textarea[disabled]{opacity:0.5}button,.button,input[type=button],input[type=submit]{color:#000;color:var(--form-button-color);background-color:#fff;background-color:var(--form-button-background);border-color:#ccc;border-color:var(--form-button-border-color);border-width:1px;border-style:solid;display:inline-block;border-radius:2px;transition:background-color 0.1s, border-color 0.1s;cursor:pointer;font-weight:600}button:hover,.button:hover,input[type=button]:hover,input[type=submit]:hover{color:#4c9ed9;color:var(--form-button-color-active);background-color:#f2f2f2;background-color:var(--form-button-background-active)}button.lite,.button.lite,input[type=button].lite,input[type=submit].lite{border:none;background:none;font-weight:normal}button.inline-button,.button.inline-button,input[type=button].inline-button,input[type=submit].inline-button{border-color:#999;border-color:var(--form-button-inline-border-color);margin:5px;box-shadow:none;border-width:1px;border-style:solid;padding:5px 7px}.tabbar{height:40px;padding-left:50px;margin-bottom:20px}.tabbar .tab{padding:10px;border-bottom:none}.tabbar .tab.current{border-bottom:2px solid transparent}.generic-form{width:60%;max-width:50em;margin:auto;margin-top:50px;padding:50px;border:1px solid transparent;border-bottom-width:0px;border-top-left-radius:3px;border-top-right-radius:3px}.generic-form table{border-collapse:separate;border-spacing:4px}.generic-form th{padding-right:10px;text-align:right}.generic-form th.error{color:red;text-align:center}#search_form_input_homepage{background-color:#f8f8f8;background-color:var(--landing-search-background)}#search_form_input_homepage:hover,#search_form_input_homepage:focus{background-color:#fefeff;background-color:var(--landing-search-background-hover)}.display-options{height:100%;padding:0px 20px 0px 20px}.display-options>*{display:inline-block;vertical-align:middle}.forum h3{margin:0px 80px 0px 20px;font-weight:bold}.forum-narrow .forum-narrow-hide{display:none}.thread{color:#000;color:var(--fg-font-color)}.forum .thread:nth-of-type(odd),.feed .thread:nth-of-type(odd){background-color:#f0f0f0;background-color:var(--forum-even-background)}.profile .thread{padding-left:15px}.thread .title{font-weight:bold;transition:border-bottom-color 0.1s;border-bottom-color:transparent}.thread .title:hover{border-bottom-color:initial}.thread.read{color:#555;color:var(--forum-thread-read-color)}.thread.read td{color:#555;color:var(--forum-thread-read-color)}.thread.read a{color:#888;color:var(--forum-thread-read-link-color)}.thread.read .title{font-weight:500}.thread .goto{font-size:200%;width:30px}.thread .goto a{display:block;padding:0px 10px;box-sizing:border-box;position:relative;line-height:100%;background-color:transparent}.forum .thread .info th{width:50px}.avatar-icon{width:40px;height:40px;flex-shrink:0;border-radius:100%;overflow:hidden;background-color:#bbb;background-color:var(--dimmest-color)}.thread .avatar-icon:not(.lite){left:30px;bottom:10px}.thread .info .avatar-icon:not(.lite){bottom:0px;left:0px}.feed .avatar-icon:not(.lite){left:-50px;bottom:-10px}.project .box .avatar-icon:not(.lite){left:0px;bottom:-10px}.badge{display:inline-block;border-radius:1000em;padding:0 0.8em;font-size:0.9em;line-height:1.8em;font-weight:bold}.badge.staff{background-color:#17b2c6;color:white}.badge.staff::before{content:'Staff'}.contents div.code{max-width:100%;max-height:20em;max-height:80vh;overflow:auto;-moz-tab-size:4;tab-size:4;border-width:1px;border-style:solid}.contents div+br,.contents blockquote+br,.contents ul+br,.contents ol+br{display:none}.codeblocktable{font-family:"Fira Mono", monospace;font-size:14px;overflow:auto;line-height:1.5em}.codeblocktable tbody{width:100%}.codeblocktable .linenos{color:#777;color:var(--code-line-number-color);font-weight:500;padding:5px;background:rgba(0,0,0,0.15)}.codeblocktable .code{padding-right:20px;padding-left:10px;max-width:80em}.wiki .post{padding:0;margin:auto;max-width:70em}.post .contents h1,.post .contents h2{margin:20px 0px}.post .contents h2{font-size:20px}.post .contents h5,.post .contents h6{margin:10px 0px}.post .contents strong{font-weight:500}.post .contents blockquote{display:block;margin-top:0;margin-bottom:0;padding:10px 18px;padding-top:0;padding-bottom:0;margin-left:20px;margin-right:20px;border-left-width:1px;border-left-style:solid}.post .contents blockquote .quotewho{line-height:2em}.post .contents blockquote .quotewho::after{content:" said:"}.post .contents img{max-width:100%}.post.bbcode .contents h1,.post.bbcode .contents h2,.post.bbcode .contents h3{display:inline}.project .post .contents h3,.post .contents h4{display:block;font-size:18px;margin:10px 0px}.post .action.button{padding:0px 10px;margin-top:0px;margin-right:4px;background-color:transparent;font-size:130%;border-radius:0px;border-width:0px;border-bottom-width:2px;transition:border-bottom-width 0.1s}.post .action.button:hover{border-bottom-width:4px}.post hr{max-width:90%}.post .signature hr{width:80%}.post .body .size1,.post-preview .size1{font-size:12px}.post .body .size2,.post-preview .size2{font-size:13px}.post .body .size3,.post-preview .size3{font-size:14px}.post .body .size4,.post-preview .size4{font-size:15px}.post .body .size5,.post-preview .size5{font-size:16px}.blog .post .meta{position:relative}.blog .post.op .meta{margin-bottom:10px}.blog .post .badges{width:40px;font-size:0.7em;text-align:center}.blog .post.op .body{padding-top:6px}.blog .post.op .body .contents{text-align:left}.blog .post.op .body p{margin-top:8px;margin-bottom:8px;text-align:left}.blog .sidebar .post>.author{padding:15px;text-align:center}.blog .sidebar .recent-posts{text-align:center;padding:15px}.blog .sidebar .recent-posts h2{display:inline}.blog .sidebar .archive ul{list-style-type:none;text-align:left}.blog .post-list .post:nth-child(even){background-color:transparent}.wiki .post p{margin:10px 0px}.wiki .toc{border-color:#aaa;border-color:var(--wiki-border-color);border-left-width:1px}.wiki .toc .toc-number{color:#333;color:var(--wiki-toc-number-color)}.wiki .toc ul{list-style-type:none;margin-left:10px;margin-bottom:5px}.wiki .toc li{margin-left:0px}.wiki .aside{border-color:#aaa;border-color:var(--wiki-border-color);border-left-width:1px;margin-left:20px}.wiki .aside::before{margin-left:-20px;margin-right:15px;display:inline-block;width:10px;content:"\21b4 "}.wiki .aside .aside-heading{padding:2px;margin:1px;border-radius:3px;border-width:0px;cursor:pointer;display:inline;background-color:transparent}.wiki .aside>.aside-body{overflow:hidden;padding-left:10px}.wiki .aside.folded::before{content:"\2192 "}.wiki .aside.folded>.aside-body{max-height:0px}.featured-post .meta .avatar-icon{left:-60px;bottom:-5px}.blog .body blockquote,.wiki .body blockquote{padding-top:1px;padding-bottom:1px}.content-block.blog p.title{font-weight:bold}.content-block.blog p.title a{border-bottom-width:0px}.content-block.blog p.title a:hover{border-bottom-width:1px}a.mark_as_read{float:right}.mark_as_read_toplevel_forum{margin-left:auto;margin-right:auto;width:100%;text-align:center}.mark_as_read_toplevel_forum a{text-decoration:underline}div.mark_as_read_toplevel_blog{margin-left:auto;margin-right:auto;width:100%;text-align:center}div.mark_as_read_toplevel_blog a{text-decoration:none}.mark_as_read_toplevel_blog div.mark_as_read_site{margin-left:auto;margin-right:auto;width:100%;text-align:center}.mark_as_read_toplevel_blog div.mark_as_read_site a{text-decoration:none}.mark_as_read_site li.post-entry{margin-left:0px;margin-bottom:3px}.diff{width:100%;max-height:100vh;overflow-y:scroll;margin-top:20px}.diff>.post-source{color:#000;color:var(--fg-font-color);background-color:#fff;background-color:var(--forum-diff-source-background);border-color:#999;border-color:var(--forum-diff-source-border-color);border-width:1px;border-radius:2px;font-family:"Fira Mono", monospace;width:49%;box-sizing:border-box;padding:4px;display:inline-block;vertical-align:top}.diff .diff-replace,.diff .diff-delete,.diff .diff-insert{border-width:1px;border-radius:2px;padding:1px}.diff .diff-replace{background-color:#adcef4;background-color:var(--forum-diff-replace-background);border-color:#4787d1;border-color:var(--forum-diff-replace-border-color)}.diff .diff-delete{background-color:#e57979;background-color:var(--forum-diff-delete-background);border-color:#c12626;border-color:var(--forum-diff-delete-border-color)}.diff .diff-insert{background-color:#96e579;background-color:var(--forum-diff-insert-background);border-color:#5baa3f;border-color:var(--forum-diff-insert-border-color)}.index{list-style-type:none;-webkit-column-count:3;-moz-column-count:3;column-count:3;margin-top:20px}.index .index-category{margin-bottom:20px;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid-column}.bbtable{width:100%;border:1px solid}.bbtable td,.bbtable th{border:1px solid;padding:4px}.bbtable th{background:rgba(0,0,0,0.15);font-weight:bold;border-bottom-width:2px}.bbtable tbody tr:nth-child(even){background:rgba(0,0,0,0.05)}@font-face{font-family:icons;src:url("/static/icon/icons.ttf?v=4")}span.icon{font-family:"icons"}span.icon-settings::before{font-family:"icons";content:"0"}span.icon-link::before{font-family:"icons";content:"1"}span.icon-logout::before{font-family:"icons";content:"2"}span.icon-twitter::before{font-family:"icons";content:"#"}span.icon-twitch::before{font-family:"icons";content:"$"}span.icon-github::before{font-family:"icons";content:"%"}span.icon-patreon::before{font-family:"icons";content:"&"}span.icon-youtube::before{font-family:"icons";content:"'"}span.icon-soundcloud::before{font-family:"icons";content:"*"}span.icon-web::before{font-family:"icons";content:"3"}span.icon-itchio::before{font-family:"icons";content:"+"}span.icon-hitbox::before{font-family:"icons";content:","}span.icon-rss::before{font-family:"icons";content:"4"}.chat{border-color:#ddd;border-color:var(--irc-border-color);margin:auto;width:100%;border:1px solid transparent;position:relative;overflow:hidden;padding-right:8px;box-sizing:border-box}.chat #tabs{overflow-y:scroll;box-sizing:border-box}.chat #tabs .hidden{display:none}.chat #tabs .current{box-shadow:0px 0px 5px #bbb inset;box-shadow:var(--irc-tab-current-shadow)}.chat #tabs .button{padding-left:10px;padding-right:3px;transition:width 0.2s;text-transform:none;vertical-align:top}.chat #tabs .button .close-btn{visibility:hidden;opacity:0;transition:opacity 0.2s;display:inline-block;font-size:9pt;vertical-align:middle;height:13px;line-height:11px;width:13px;margin-left:5px;padding-left:2px;padding-right:3px;border-radius:3px;border:1px solid transparent;position:relative;top:-2px}.chat #tabs .button:hover .close-btn{color:#fff;color:var(--irc-tab-close-button-color);background-color:#aaa;background-color:var(--irc-tab-close-button-background);visibility:visible;opacity:1}.chat #tabs .new-tab{padding:0px;padding-left:10px}.chat #history{width:100%;min-height:300px;height:50vh;overflow-y:auto;padding-top:3px;box-sizing:border-box}.chat #history .channel{width:100%;display:none}.chat #history .channel.current{display:table}.chat #history .channel.hidden{display:none}.chat #history .entry{display:table-row;width:100%;font-size:11pt}.chat #history .entry.minor{color:#777;font-size:10pt}.chat #history .entry.alert{color:#dd683b}.chat #history .entry.error{color:#880000;font-style:italic}.chat #history .entry.action{font-style:italic}.chat #history .entry.action .msg .action-name{font-weight:bold}.chat #history .entry .nick,.chat #history .entry .msg{display:table-cell;padding:0px 4px}.chat #history .entry .nick{border-color:#ccc;border-color:var(--irc-nick-border-color);font-weight:bold;text-align:right;border-right-width:1px;border-right-style:solid}.chat #history .entry .msg{width:100%}.chat #history .entry .msg .highlight{background-color:#dd683b;color:#fff;padding:0px 5px}.chat #history .entry .msg .emote{height:1.6em;vertical-align:middle}.chat #chatbox{width:100%}.chat #users{color:#000;color:var(--irc-users-color);background-color:#fff;background-color:var(--irc-users-background);border-color:#ccc;border-color:var(--irc-users-border-color);position:absolute;border-left-width:1px;border-left-style:solid;padding:5px;right:0px;top:0px;color:#333;height:100%;max-width:20%;width:20%;transition:right 0.2s;max-height:100%;overflow-y:auto;box-sizing:border-box}.chat #users.collapsed{right:-20%}.chat #users .popout{background-color:#fff;background-color:var(--irc-users-popout-background);border-left-color:#bbb;border-left-color:var(--irc-users-popout-border-color-left);border-right-color:#ccc;border-right-color:var(--irc-users-popout-border-color-right);width:8px;font-size:7pt;height:100%;border-radius:2px;border:0px solid transparent;border-left-width:1px;border-left-style:solid;border-right-width:1px;border-right-style:solid;position:absolute;top:0px;left:-8px;box-shadow:0px 0px 0px transparent;text-align:center;margin:0px;cursor:pointer}.chat #users .op{font-weight:bold}.chat #users .user{cursor:pointer}.landing .breadcrumb{padding:0px 3px}.landing .breadcrumb:first-child{padding-left:0px}.landing .more{display:block;margin-top:10px}.landing .contents{margin-bottom:20px}.landing .showcase .arrow-container{width:60px;position:absolute;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center}.landing .showcase .arrow-container.left{left:0;background-image:linear-gradient(to right, #f8f8f8 , rgba(0, 0, 0, 0));background-image:linear-gradient(to right, var(--content-background) , rgba(0, 0, 0, 0))}.landing .showcase .arrow-container.left svg{transform:translateX(-.05rem)}.landing .showcase .arrow-container.right{right:0;background-image:linear-gradient(to left, #f8f8f8 , rgba(0, 0, 0, 0));background-image:linear-gradient(to left, var(--content-background) , rgba(0, 0, 0, 0))}.landing .showcase .arrow-container.right svg{transform:translateX(.05rem)}.landing .showcase .arrow-container.hide{opacity:0;pointer-events:none}.landing .showcase .arrow-container .arrow{background-color:#f8f8f8;background-color:var(--content-background);border-radius:100%;width:2.4rem;height:2.4rem;font-size:1rem;transition:opacity 40ms ease-in-out;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.2);display:flex;justify-content:center;align-items:center}.landing #showcase-items{transition:transform 200ms ease-in-out}.landing .showcase-item{width:7rem;height:7rem}@media screen and (min-width: 30em){.landing .showcase-item{width:10rem;height:10rem}}.star-btn{border-bottom-width:2px;background-color:#fff;background-color:var(--library-star-btn-background);border-color:#999;border-color:var(--library-star-btn-border-color)}.star-btn a{border-color:#aaa;border-color:var(--library-star-btn-a-border-color)}.star-btn a:hover{background-color:#fafafa;background-color:var(--library-star-btn-a-hover-background)}.library-dropcap{width:1em;height:1.1em;padding-top:0.19em;text-align:center;font-size:2rem}.profile .content .description{margin:0px auto;max-width:40em}.profile .content h2{margin-bottom:10px}.profile ul.recent-posts,.profile ul.recent-comments{list-style-type:none}.profile ul .entry{margin-left:20px}.profile .entry .context{font-weight:bold;border-bottom:0px}.profile .content-block.projects{background-image:none;overflow-y:visible}.profile .content-block.avatar,.project .content-block.logo{background-color:transparent;background-image:none;box-shadow:none;min-height:200px}.project .content-block.screenshots,.profile .content-block.projects{padding:0px;min-height:0em}.project .notice{color:#fff;color:var(--project-notice-text-color)}.project .notice a{color:#fff;color:var(--project-notice-text-color);border-bottom-color:#fff;border-bottom-color:var(--project-notice-text-color)}.project .pair{display:flex;align-items:flex-start}.project .pair .key{font-weight:bold;flex-shrink:0}.project .pair .value{text-align:right;flex-grow:1}.project .settings-icon{z-index:10;position:absolute;width:25px;height:25px;right:5px;top:5px;margin:0px;text-align:center;padding:3px;border-radius:5px;line-height:100%;box-sizing:border-box}.project .screenshots .slideshow{background-color:black}.project .tags{text-align:center}.project .tags h2{margin-bottom:5px}.project .tags li{display:inline-block}.project .button-bar{border:none}.project .forum h3{margin:0}.project .forum .thread-entry-right{display:none}.notice-unapproved{background-color:#b42222;background-color:var(--notice-unapproved-color)}.notice-hidden{background-color:#b6b6b6;background-color:var(--notice-hidden-color)}.notice-hiatus{background-color:#aa7d30;background-color:var(--notice-hiatus-color)}.notice-dead{background-color:#b42222;background-color:var(--notice-dead-color)}.notice-lts{background-color:#43a52f;background-color:var(--notice-lts-color)}.notice-lts-reqd{background-color:#aa7d30;background-color:var(--notice-lts-reqd-color)}.project-carousel-container{width:50rem}.project-carousel-container .project-carousel{box-sizing:content-box;position:relative;height:12rem}@media screen and (min-width: 60em){.project-carousel-container .project-carousel{height:16rem}}.project-carousel-container .project-carousel-item{position:absolute;top:0;left:0}.project-carousel-container .project-carousel-item:not(.active){display:none}.project-carousel-container .project-carousel-item br{line-height:0.6em}.project-carousel-container .project-carousel-description{max-height:14rem;overflow:hidden}.project-carousel-container .project-carousel-fade{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient( rgba(240,240,240,0) , #f0f0f0 );background:linear-gradient( var(--dim-background-transparent) , var(--dim-background) )}.project-carousel-container .project-carousel-item-small:not(.active){display:none}.project-carousel-container .project-carousel-button{border:1px solid;border-color:#999;border-color:var(--dimmer-color);cursor:pointer;transition:all 100ms ease-in-out}.project-carousel-container .project-carousel-button:hover{background-color:#bbb;background-color:var(--dimmest-color)}.project-carousel-container .project-carousel-button.active{border-color:#666;border-color:var(--theme-color)}.project-carousel-container .project-carousel-button.active:hover{background-color:#ccc;background-color:var(--theme-color-dimmest)}.project-card{color:#000;color:var(--fg-font-color);background-color:#e8e8e8;background-color:var(--card-background);border-color:#aaa;border-color:var(--project-card-border-color);transition:box-shadow 0.2s, background-color 0.2s}.slideshow .project-card{margin-top:8px}.project-card:hover{background-color:#f0f0f0;background-color:var(--card-background-hover)}.project-card:hover>.title{text-decoration:underline}.project-card .image-container{width:8rem;min-height:8rem}.project-card .image-container .image{position:absolute;width:8rem;top:0;bottom:0}.project-card .details{transition:background-color 0.2s}.project-card .badges:empty{display:none}.project-card .badge{color:white;border-radius:5px}.sidebar .projectlist{padding:0px;width:340px}.sidebar .projectlist .project-card.more{height:40px;width:326px;padding-top:5px}.screenshots .slide{max-width:100%}.slideshow{position:relative;background-image:none;overflow:hidden}.slideshow .optionbar{height:30px;text-align:center}.slideshow .buttons{display:inline-block;height:100%}.slideshow .button{line-height:100%;padding:5px 8px;font-weight:400}.slideshow .button.current{font-weight:600}.slideshow #slide-deck{width:100%;position:relative;transition:left 0.3s;left:0px;text-align:center;display:flex;flex-direction:horizontal;justify-content:space-around;align-items:center}.slideshow .slide{flex:1 1 100%;position:relative}.slideshow .slide img{margin:auto;max-height:60vh;max-width:100%}.slideshow.cards #slide-deck{justify-content:flex-start}.slideshow.cards .slide{flex:0 1 auto}#project_owner_suggestions{max-height:300px;overflow:auto;position:absolute;border:1px solid transparent}#project_owner_suggestions #user_template{display:none}.user_suggestions{background-color:#fff;background-color:var(--project-user-suggestions-background);padding-top:5px;padding-bottom:5px}.user_suggestions#project_owner_suggestions .user{border-color:#ddd;border-color:var(--project-user-suggestions-border-color);border-bottom-width:1px;width:200px;box-sizing:border-box;cursor:pointer}.user_suggestions .user{position:relative;margin-left:50px;display:inline-block;margin-right:10px}.user_suggestions .user .avatar-icon{left:-50px;bottom:0px;border-radius:50%;border:2px solid transparent}#project_owners{min-width:50%}.showcase-item .gradient{width:100%;height:114px;background-image:linear-gradient(rgba(0,0,0,0.82), #0000)}.streams-container #empty-message{display:none}.streams-container .streams:empty{display:none}.streams-container .streams:empty+#empty-message{display:block}.streams-container .stream .live{position:absolute;left:.5rem;top:.5rem;color:white;background-color:#e91916;font-weight:bold}.streams-container .stream .viewers{position:absolute;left:.5rem;bottom:.5rem;color:white;background-color:rgba(0,0,0,0.7)}.streams-container .stream .avatar{padding:1.5rem}.streams-container .twitch-embed-container{padding-bottom:0%;transition:padding-bottom 400ms ease-in-out}.streams-container .twitch-embed-container.open{padding-bottom:150%}@media screen and (min-width: 713px){.streams-container .twitch-embed-container.open{padding-bottom:40.6%}}.timeline.no-forums .forums{display:none}.timeline.no-blogs .blogs{display:none}.timeline.no-wiki .wiki{display:none}.timeline.no-library .library{display:none}.timeline.no-snippets .snippets{display:none}.timeline .timeline-item{background-color:#e8e8e8;background-color:var(--card-background);color:#000;color:var(--main-color)}.timeline-item .avatar-icon{border:2px solid;border-color:#666;border-color:var(--theme-color)}.timeline-item .avatar-icon.big{width:62px;height:62px}.timeline-item .timeline-content-box>*{display:block;max-width:100%;max-height:80vh}.timeline-item .timeline-content-box.youtube{position:relative;width:100%;height:0;padding-bottom:56.25%}.timeline-item .timeline-content-box.youtube>iframe{position:absolute;top:0;left:0;width:100%;height:100%}.timeline-modal .container{max-height:100vh}@media screen and (min-width: 30em){.timeline-modal .container{width:auto;max-height:calc(100vh - 2rem)}} +@charset "UTF-8"; +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + /* 1 */ + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } + +/* + + VARIABLES + +*/ +/* + + DEBUG CHILDREN + Docs: http://tachyons.io/docs/debug/ + + Just add the debug class to any element to see outlines on its + children. + +*/ +.debug * { + outline: 1px solid gold; } + +.debug-white * { + outline: 1px solid white; } + +.debug-black * { + outline: 1px solid black; } + +/* + + DEBUG GRID + http://tachyons.io/docs/debug-grid/ + + Can be useful for debugging layout issues + or helping to make sure things line up perfectly. + Just tack one of these classes onto a parent element. + +*/ +.debug-grid { + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } + +.debug-grid-16 { + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; } + +.debug-grid-8-solid { + background: white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; } + +.debug-grid-16-solid { + background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; } + +/* + + BOX SIZING + +*/ +html, +body, +div, +article, +section, +main, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1, h2, h3, h4, h5, h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; } + +/* + + ASPECT RATIOS + +*/ +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ +.aspect-ratio { + height: 0; + position: relative; } + +.aspect-ratio--16x9 { + padding-bottom: 56.25%; } + +.aspect-ratio--9x16 { + padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { + padding-bottom: 75%; } + +.aspect-ratio--3x4 { + padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { + padding-bottom: 66.6%; } + +.aspect-ratio--4x6 { + padding-bottom: 150%; } + +.aspect-ratio--8x5 { + padding-bottom: 62.5%; } + +.aspect-ratio--5x8 { + padding-bottom: 160%; } + +.aspect-ratio--7x5 { + padding-bottom: 71.42%; } + +.aspect-ratio--5x7 { + padding-bottom: 140%; } + +.aspect-ratio--1x1 { + padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } + +@media screen and (min-width: 30em) { + .aspect-ratio-ns { + height: 0; + position: relative; } + .aspect-ratio--16x9-ns { + padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { + padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { + padding-bottom: 75%; } + .aspect-ratio--3x4-ns { + padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { + padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { + padding-bottom: 150%; } + .aspect-ratio--8x5-ns { + padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { + padding-bottom: 160%; } + .aspect-ratio--7x5-ns { + padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { + padding-bottom: 140%; } + .aspect-ratio--1x1-ns { + padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .aspect-ratio-m { + height: 0; + position: relative; } + .aspect-ratio--16x9-m { + padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { + padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { + padding-bottom: 75%; } + .aspect-ratio--3x4-m { + padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { + padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { + padding-bottom: 150%; } + .aspect-ratio--8x5-m { + padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { + padding-bottom: 160%; } + .aspect-ratio--7x5-m { + padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { + padding-bottom: 140%; } + .aspect-ratio--1x1-m { + padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } } + +@media screen and (min-width: 60em) { + .aspect-ratio-l { + height: 0; + position: relative; } + .aspect-ratio--16x9-l { + padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { + padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { + padding-bottom: 75%; } + .aspect-ratio--3x4-l { + padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { + padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { + padding-bottom: 150%; } + .aspect-ratio--8x5-l { + padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { + padding-bottom: 160%; } + .aspect-ratio--7x5-l { + padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { + padding-bottom: 140%; } + .aspect-ratio--1x1-l { + padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } } + +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ +/* Responsive images! */ +img, video { + max-width: 100%; } + +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* + Often used in combination with background image set as an inline style + on an html element. +*/ +.cover { + background-size: cover !important; } + +.contain { + background-size: contain !important; } + +@media screen and (min-width: 30em) { + .cover-ns { + background-size: cover !important; } + .contain-ns { + background-size: contain !important; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cover-m { + background-size: cover !important; } + .contain-m { + background-size: contain !important; } } + +@media screen and (min-width: 60em) { + .cover-l { + background-size: cover !important; } + .contain-l { + background-size: contain !important; } } + +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.bg-center { + background-repeat: no-repeat; + background-position: center center; } + +.bg-top { + background-repeat: no-repeat; + background-position: top center; } + +.bg-right { + background-repeat: no-repeat; + background-position: center right; } + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; } + +.bg-left { + background-repeat: no-repeat; + background-position: center left; } + +@media screen and (min-width: 30em) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; } + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; } + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; } + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; } + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; } + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; } + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; } + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; } + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; } } + +@media screen and (min-width: 60em) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; } + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; } + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; } + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; } + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; } } + +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.outline { + outline: 1px solid; } + +.outline-transparent { + outline: 1px solid transparent; } + +.outline-0 { + outline: 0; } + +@media screen and (min-width: 30em) { + .outline-ns { + outline: 1px solid; } + .outline-transparent-ns { + outline: 1px solid transparent; } + .outline-0-ns { + outline: 0; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .outline-m { + outline: 1px solid; } + .outline-transparent-m { + outline: 1px solid transparent; } + .outline-0-m { + outline: 0; } } + +@media screen and (min-width: 60em) { + .outline-l { + outline: 1px solid; } + .outline-transparent-l { + outline: 1px solid transparent; } + .outline-0-l { + outline: 0; } } + +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.ba { + border-style: solid; + border-width: 1px; } + +.bt { + border-top-style: solid; + border-top-width: 1px; } + +.br { + border-right-style: solid; + border-right-width: 1px; } + +.bb { + border-bottom-style: solid; + border-bottom-width: 1px; } + +.bl { + border-left-style: solid; + border-left-width: 1px; } + +.bn { + border-style: none; + border-width: 0; } + +@media screen and (min-width: 30em) { + .ba-ns { + border-style: solid; + border-width: 1px; } + .bt-ns { + border-top-style: solid; + border-top-width: 1px; } + .br-ns { + border-right-style: solid; + border-right-width: 1px; } + .bb-ns { + border-bottom-style: solid; + border-bottom-width: 1px; } + .bl-ns { + border-left-style: solid; + border-left-width: 1px; } + .bn-ns { + border-style: none; + border-width: 0; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ba-m { + border-style: solid; + border-width: 1px; } + .bt-m { + border-top-style: solid; + border-top-width: 1px; } + .br-m { + border-right-style: solid; + border-right-width: 1px; } + .bb-m { + border-bottom-style: solid; + border-bottom-width: 1px; } + .bl-m { + border-left-style: solid; + border-left-width: 1px; } + .bn-m { + border-style: none; + border-width: 0; } } + +@media screen and (min-width: 60em) { + .ba-l { + border-style: solid; + border-width: 1px; } + .bt-l { + border-top-style: solid; + border-top-width: 1px; } + .br-l { + border-right-style: solid; + border-right-width: 1px; } + .bb-l { + border-bottom-style: solid; + border-bottom-width: 1px; } + .bl-l { + border-left-style: solid; + border-left-width: 1px; } + .bn-l { + border-style: none; + border-width: 0; } } + +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ +.b--black { + border-color: #000; } + +.b--near-black { + border-color: #111; } + +.b--dark-gray { + border-color: #333; } + +.b--mid-gray { + border-color: #555; } + +.b--gray { + border-color: #777; } + +.b--silver { + border-color: #999; } + +.b--light-silver { + border-color: #aaa; } + +.b--moon-gray { + border-color: #ccc; } + +.b--light-gray { + border-color: #eee; } + +.b--near-white { + border-color: #f4f4f4; } + +.b--white { + border-color: #fff; } + +.b--white-90 { + border-color: rgba(255, 255, 255, 0.9); } + +.b--white-80 { + border-color: rgba(255, 255, 255, 0.8); } + +.b--white-70 { + border-color: rgba(255, 255, 255, 0.7); } + +.b--white-60 { + border-color: rgba(255, 255, 255, 0.6); } + +.b--white-50 { + border-color: rgba(255, 255, 255, 0.5); } + +.b--white-40 { + border-color: rgba(255, 255, 255, 0.4); } + +.b--white-30 { + border-color: rgba(255, 255, 255, 0.3); } + +.b--white-20 { + border-color: rgba(255, 255, 255, 0.2); } + +.b--white-10 { + border-color: rgba(255, 255, 255, 0.1); } + +.b--white-05 { + border-color: rgba(255, 255, 255, 0.05); } + +.b--white-025 { + border-color: rgba(255, 255, 255, 0.025); } + +.b--white-0125 { + border-color: rgba(255, 255, 255, 0.0125); } + +.b--black-90 { + border-color: rgba(0, 0, 0, 0.9); } + +.b--black-80 { + border-color: rgba(0, 0, 0, 0.8); } + +.b--black-70 { + border-color: rgba(0, 0, 0, 0.7); } + +.b--black-60 { + border-color: rgba(0, 0, 0, 0.6); } + +.b--black-50 { + border-color: rgba(0, 0, 0, 0.5); } + +.b--black-40 { + border-color: rgba(0, 0, 0, 0.4); } + +.b--black-30 { + border-color: rgba(0, 0, 0, 0.3); } + +.b--black-20 { + border-color: rgba(0, 0, 0, 0.2); } + +.b--black-10 { + border-color: rgba(0, 0, 0, 0.1); } + +.b--black-05 { + border-color: rgba(0, 0, 0, 0.05); } + +.b--black-025 { + border-color: rgba(0, 0, 0, 0.025); } + +.b--black-0125 { + border-color: rgba(0, 0, 0, 0.0125); } + +.b--dark-red { + border-color: #e7040f; } + +.b--red { + border-color: #ff4136; } + +.b--light-red { + border-color: #ff725c; } + +.b--orange { + border-color: #ff6300; } + +.b--gold { + border-color: #ffb700; } + +.b--yellow { + border-color: #ffd700; } + +.b--light-yellow { + border-color: #fbf1a9; } + +.b--purple { + border-color: #5e2ca5; } + +.b--light-purple { + border-color: #a463f2; } + +.b--dark-pink { + border-color: #d5008f; } + +.b--hot-pink { + border-color: #ff41b4; } + +.b--pink { + border-color: #ff80cc; } + +.b--light-pink { + border-color: #ffa3d7; } + +.b--dark-green { + border-color: #137752; } + +.b--green { + border-color: #19a974; } + +.b--light-green { + border-color: #9eebcf; } + +.b--navy { + border-color: #001b44; } + +.b--dark-blue { + border-color: #00449e; } + +.b--blue { + border-color: #357edd; } + +.b--light-blue { + border-color: #96ccff; } + +.b--lightest-blue { + border-color: #cdecff; } + +.b--washed-blue { + border-color: #f6fffe; } + +.b--washed-green { + border-color: #e8fdf5; } + +.b--washed-yellow { + border-color: #fffceb; } + +.b--washed-red { + border-color: #ffdfdf; } + +.b--transparent { + border-color: transparent; } + +.b--inherit { + border-color: inherit; } + +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.br0 { + border-radius: 0; } + +.br1 { + border-radius: 0.125rem; } + +.br2 { + border-radius: 0.25rem; } + +.br3 { + border-radius: 0.5rem; } + +.br4 { + border-radius: 1rem; } + +.br-100 { + border-radius: 100%; } + +.br-pill { + border-radius: 9999px; } + +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; } + +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +@media screen and (min-width: 30em) { + .br0-ns { + border-radius: 0; } + .br1-ns { + border-radius: 0.125rem; } + .br2-ns { + border-radius: 0.25rem; } + .br3-ns { + border-radius: 0.5rem; } + .br4-ns { + border-radius: 1rem; } + .br-100-ns { + border-radius: 100%; } + .br-pill-ns { + border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .br0-m { + border-radius: 0; } + .br1-m { + border-radius: 0.125rem; } + .br2-m { + border-radius: 0.25rem; } + .br3-m { + border-radius: 0.5rem; } + .br4-m { + border-radius: 1rem; } + .br-100-m { + border-radius: 100%; } + .br-pill-m { + border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } } + +@media screen and (min-width: 60em) { + .br0-l { + border-radius: 0; } + .br1-l { + border-radius: 0.125rem; } + .br2-l { + border-radius: 0.25rem; } + .br3-l { + border-radius: 0.5rem; } + .br4-l { + border-radius: 1rem; } + .br-100-l { + border-radius: 100%; } + .br-pill-l { + border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } } + +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.b--dotted { + border-style: dotted; } + +.b--dashed { + border-style: dashed; } + +.b--solid { + border-style: solid; } + +.b--none { + border-style: none; } + +@media screen and (min-width: 30em) { + .b--dotted-ns { + border-style: dotted; } + .b--dashed-ns { + border-style: dashed; } + .b--solid-ns { + border-style: solid; } + .b--none-ns { + border-style: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .b--dotted-m { + border-style: dotted; } + .b--dashed-m { + border-style: dashed; } + .b--solid-m { + border-style: solid; } + .b--none-m { + border-style: none; } } + +@media screen and (min-width: 60em) { + .b--dotted-l { + border-style: dotted; } + .b--dashed-l { + border-style: dashed; } + .b--solid-l { + border-style: solid; } + .b--none-l { + border-style: none; } } + +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.bw0 { + border-width: 0; } + +.bw1 { + border-width: 0.125rem; } + +.bw2 { + border-width: 0.25rem; } + +.bw3 { + border-width: 0.5rem; } + +.bw4 { + border-width: 1rem; } + +.bw5 { + border-width: 2rem; } + +/* Resets */ +.bt-0 { + border-top-width: 0; } + +.br-0 { + border-right-width: 0; } + +.bb-0 { + border-bottom-width: 0; } + +.bl-0 { + border-left-width: 0; } + +@media screen and (min-width: 30em) { + .bw0-ns { + border-width: 0; } + .bw1-ns { + border-width: 0.125rem; } + .bw2-ns { + border-width: 0.25rem; } + .bw3-ns { + border-width: 0.5rem; } + .bw4-ns { + border-width: 1rem; } + .bw5-ns { + border-width: 2rem; } + .bt-0-ns { + border-top-width: 0; } + .br-0-ns { + border-right-width: 0; } + .bb-0-ns { + border-bottom-width: 0; } + .bl-0-ns { + border-left-width: 0; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bw0-m { + border-width: 0; } + .bw1-m { + border-width: 0.125rem; } + .bw2-m { + border-width: 0.25rem; } + .bw3-m { + border-width: 0.5rem; } + .bw4-m { + border-width: 1rem; } + .bw5-m { + border-width: 2rem; } + .bt-0-m { + border-top-width: 0; } + .br-0-m { + border-right-width: 0; } + .bb-0-m { + border-bottom-width: 0; } + .bl-0-m { + border-left-width: 0; } } + +@media screen and (min-width: 60em) { + .bw0-l { + border-width: 0; } + .bw1-l { + border-width: 0.125rem; } + .bw2-l { + border-width: 0.25rem; } + .bw3-l { + border-width: 0.5rem; } + .bw4-l { + border-width: 1rem; } + .bw5-l { + border-width: 2rem; } + .bt-0-l { + border-top-width: 0; } + .br-0-l { + border-right-width: 0; } + .bb-0-l { + border-bottom-width: 0; } + .bl-0-l { + border-left-width: 0; } } + +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.shadow-1 { + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + +.shadow-2 { + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + +.shadow-3 { + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + +.shadow-4 { + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + +.shadow-5 { + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } + +@media screen and (min-width: 30em) { + .shadow-1-ns { + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-2-ns { + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + .shadow-3-ns { + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-4-ns { + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + .shadow-5-ns { + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .shadow-1-m { + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-2-m { + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + .shadow-3-m { + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-4-m { + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + .shadow-5-m { + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + +@media screen and (min-width: 60em) { + .shadow-1-l { + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-2-l { + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); } + .shadow-3-l { + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } + .shadow-4-l { + box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); } + .shadow-5-l { + box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } } + +/* + + CODE + +*/ +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; } + +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.top-0 { + top: 0; } + +.right-0 { + right: 0; } + +.bottom-0 { + bottom: 0; } + +.left-0 { + left: 0; } + +.top-1 { + top: 1rem; } + +.right-1 { + right: 1rem; } + +.bottom-1 { + bottom: 1rem; } + +.left-1 { + left: 1rem; } + +.top-2 { + top: 2rem; } + +.right-2 { + right: 2rem; } + +.bottom-2 { + bottom: 2rem; } + +.left-2 { + left: 2rem; } + +.top--1 { + top: -1rem; } + +.right--1 { + right: -1rem; } + +.bottom--1 { + bottom: -1rem; } + +.left--1 { + left: -1rem; } + +.top--2 { + top: -2rem; } + +.right--2 { + right: -2rem; } + +.bottom--2 { + bottom: -2rem; } + +.left--2 { + left: -2rem; } + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; } + +@media screen and (min-width: 30em) { + .top-0-ns { + top: 0; } + .left-0-ns { + left: 0; } + .right-0-ns { + right: 0; } + .bottom-0-ns { + bottom: 0; } + .top-1-ns { + top: 1rem; } + .left-1-ns { + left: 1rem; } + .right-1-ns { + right: 1rem; } + .bottom-1-ns { + bottom: 1rem; } + .top-2-ns { + top: 2rem; } + .left-2-ns { + left: 2rem; } + .right-2-ns { + right: 2rem; } + .bottom-2-ns { + bottom: 2rem; } + .top--1-ns { + top: -1rem; } + .right--1-ns { + right: -1rem; } + .bottom--1-ns { + bottom: -1rem; } + .left--1-ns { + left: -1rem; } + .top--2-ns { + top: -2rem; } + .right--2-ns { + right: -2rem; } + .bottom--2-ns { + bottom: -2rem; } + .left--2-ns { + left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .top-0-m { + top: 0; } + .left-0-m { + left: 0; } + .right-0-m { + right: 0; } + .bottom-0-m { + bottom: 0; } + .top-1-m { + top: 1rem; } + .left-1-m { + left: 1rem; } + .right-1-m { + right: 1rem; } + .bottom-1-m { + bottom: 1rem; } + .top-2-m { + top: 2rem; } + .left-2-m { + left: 2rem; } + .right-2-m { + right: 2rem; } + .bottom-2-m { + bottom: 2rem; } + .top--1-m { + top: -1rem; } + .right--1-m { + right: -1rem; } + .bottom--1-m { + bottom: -1rem; } + .left--1-m { + left: -1rem; } + .top--2-m { + top: -2rem; } + .right--2-m { + right: -2rem; } + .bottom--2-m { + bottom: -2rem; } + .left--2-m { + left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; } } + +@media screen and (min-width: 60em) { + .top-0-l { + top: 0; } + .left-0-l { + left: 0; } + .right-0-l { + right: 0; } + .bottom-0-l { + bottom: 0; } + .top-1-l { + top: 1rem; } + .left-1-l { + left: 1rem; } + .right-1-l { + right: 1rem; } + .bottom-1-l { + bottom: 1rem; } + .top-2-l { + top: 2rem; } + .left-2-l { + left: 2rem; } + .right-2-l { + right: 2rem; } + .bottom-2-l { + bottom: 2rem; } + .top--1-l { + top: -1rem; } + .right--1-l { + right: -1rem; } + .bottom--1-l { + bottom: -1rem; } + .left--1-l { + left: -1rem; } + .top--2-l { + top: -2rem; } + .right--2-l { + right: -2rem; } + .bottom--2-l { + bottom: -2rem; } + .left--2-l { + left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; } } + +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ +.cf:before, +.cf:after { + content: " "; + display: table; } + +.cf:after { + clear: both; } + +.cf { + *zoom: 1; } + +.cl { + clear: left; } + +.cr { + clear: right; } + +.cb { + clear: both; } + +.cn { + clear: none; } + +@media screen and (min-width: 30em) { + .cl-ns { + clear: left; } + .cr-ns { + clear: right; } + .cb-ns { + clear: both; } + .cn-ns { + clear: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cl-m { + clear: left; } + .cr-m { + clear: right; } + .cb-m { + clear: both; } + .cn-m { + clear: none; } } + +@media screen and (min-width: 60em) { + .cl-l { + clear: left; } + .cr-l { + clear: right; } + .cb-l { + clear: both; } + .cn-l { + clear: none; } } + +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + tr = table-row + tcol = table-column + tcolg = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.dn { + display: none; } + +.di { + display: inline; } + +.db { + display: block; } + +.dib { + display: inline-block; } + +.dit { + display: inline-table; } + +.dt { + display: table; } + +.dtc { + display: table-cell; } + +.dt-row { + display: table-row; } + +.dt-row-group { + display: table-row-group; } + +.dt-column { + display: table-column; } + +.dt-column-group { + display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { + table-layout: fixed; + width: 100%; } + +@media screen and (min-width: 30em) { + .dn-ns { + display: none; } + .di-ns { + display: inline; } + .db-ns { + display: block; } + .dib-ns { + display: inline-block; } + .dit-ns { + display: inline-table; } + .dt-ns { + display: table; } + .dtc-ns { + display: table-cell; } + .dt-row-ns { + display: table-row; } + .dt-row-group-ns { + display: table-row-group; } + .dt-column-ns { + display: table-column; } + .dt-column-group-ns { + display: table-column-group; } + .dt--fixed-ns { + table-layout: fixed; + width: 100%; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .dn-m { + display: none; } + .di-m { + display: inline; } + .db-m { + display: block; } + .dib-m { + display: inline-block; } + .dit-m { + display: inline-table; } + .dt-m { + display: table; } + .dtc-m { + display: table-cell; } + .dt-row-m { + display: table-row; } + .dt-row-group-m { + display: table-row-group; } + .dt-column-m { + display: table-column; } + .dt-column-group-m { + display: table-column-group; } + .dt--fixed-m { + table-layout: fixed; + width: 100%; } } + +@media screen and (min-width: 60em) { + .dn-l { + display: none; } + .di-l { + display: inline; } + .db-l { + display: block; } + .dib-l { + display: inline-block; } + .dit-l { + display: inline-table; } + .dt-l { + display: table; } + .dtc-l { + display: table-cell; } + .dt-row-l { + display: table-row; } + .dt-row-group-l { + display: table-row-group; } + .dt-column-l { + display: table-column; } + .dt-column-group-l { + display: table-column-group; } + .dt--fixed-l { + table-layout: fixed; + width: 100%; } } + +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.flex { + display: flex; } + +.inline-flex { + display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + flex: 1 1 auto; + min-width: 0; + /* 1 */ + min-height: 0; + /* 1 */ } + +.flex-none { + flex: none; } + +.flex-column { + flex-direction: column; } + +.flex-row { + flex-direction: row; } + +.flex-wrap { + flex-wrap: wrap; } + +.flex-nowrap { + flex-wrap: nowrap; } + +.flex-wrap-reverse { + flex-wrap: wrap-reverse; } + +.flex-column-reverse { + flex-direction: column-reverse; } + +.flex-row-reverse { + flex-direction: row-reverse; } + +.items-start { + align-items: flex-start; } + +.items-end { + align-items: flex-end; } + +.items-center { + align-items: center; } + +.items-baseline { + align-items: baseline; } + +.items-stretch { + align-items: stretch; } + +.self-start { + align-self: flex-start; } + +.self-end { + align-self: flex-end; } + +.self-center { + align-self: center; } + +.self-baseline { + align-self: baseline; } + +.self-stretch { + align-self: stretch; } + +.justify-start { + justify-content: flex-start; } + +.justify-end { + justify-content: flex-end; } + +.justify-center { + justify-content: center; } + +.justify-between { + justify-content: space-between; } + +.justify-around { + justify-content: space-around; } + +.content-start { + align-content: flex-start; } + +.content-end { + align-content: flex-end; } + +.content-center { + align-content: center; } + +.content-between { + align-content: space-between; } + +.content-around { + align-content: space-around; } + +.content-stretch { + align-content: stretch; } + +.order-0 { + order: 0; } + +.order-1 { + order: 1; } + +.order-2 { + order: 2; } + +.order-3 { + order: 3; } + +.order-4 { + order: 4; } + +.order-5 { + order: 5; } + +.order-6 { + order: 6; } + +.order-7 { + order: 7; } + +.order-8 { + order: 8; } + +.order-last { + order: 99999; } + +.flex-grow-0 { + flex-grow: 0; } + +.flex-grow-1 { + flex-grow: 1; } + +.flex-shrink-0 { + flex-shrink: 0; } + +.flex-shrink-1 { + flex-shrink: 1; } + +@media screen and (min-width: 30em) { + .flex-ns { + display: flex; } + .inline-flex-ns { + display: inline-flex; } + .flex-auto-ns { + flex: 1 1 auto; + min-width: 0; + /* 1 */ + min-height: 0; + /* 1 */ } + .flex-none-ns { + flex: none; } + .flex-column-ns { + flex-direction: column; } + .flex-row-ns { + flex-direction: row; } + .flex-wrap-ns { + flex-wrap: wrap; } + .flex-nowrap-ns { + flex-wrap: nowrap; } + .flex-wrap-reverse-ns { + flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { + flex-direction: column-reverse; } + .flex-row-reverse-ns { + flex-direction: row-reverse; } + .items-start-ns { + align-items: flex-start; } + .items-end-ns { + align-items: flex-end; } + .items-center-ns { + align-items: center; } + .items-baseline-ns { + align-items: baseline; } + .items-stretch-ns { + align-items: stretch; } + .self-start-ns { + align-self: flex-start; } + .self-end-ns { + align-self: flex-end; } + .self-center-ns { + align-self: center; } + .self-baseline-ns { + align-self: baseline; } + .self-stretch-ns { + align-self: stretch; } + .justify-start-ns { + justify-content: flex-start; } + .justify-end-ns { + justify-content: flex-end; } + .justify-center-ns { + justify-content: center; } + .justify-between-ns { + justify-content: space-between; } + .justify-around-ns { + justify-content: space-around; } + .content-start-ns { + align-content: flex-start; } + .content-end-ns { + align-content: flex-end; } + .content-center-ns { + align-content: center; } + .content-between-ns { + align-content: space-between; } + .content-around-ns { + align-content: space-around; } + .content-stretch-ns { + align-content: stretch; } + .order-0-ns { + order: 0; } + .order-1-ns { + order: 1; } + .order-2-ns { + order: 2; } + .order-3-ns { + order: 3; } + .order-4-ns { + order: 4; } + .order-5-ns { + order: 5; } + .order-6-ns { + order: 6; } + .order-7-ns { + order: 7; } + .order-8-ns { + order: 8; } + .order-last-ns { + order: 99999; } + .flex-grow-0-ns { + flex-grow: 0; } + .flex-grow-1-ns { + flex-grow: 1; } + .flex-shrink-0-ns { + flex-shrink: 0; } + .flex-shrink-1-ns { + flex-shrink: 1; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .flex-m { + display: flex; } + .inline-flex-m { + display: inline-flex; } + .flex-auto-m { + flex: 1 1 auto; + min-width: 0; + /* 1 */ + min-height: 0; + /* 1 */ } + .flex-none-m { + flex: none; } + .flex-column-m { + flex-direction: column; } + .flex-row-m { + flex-direction: row; } + .flex-wrap-m { + flex-wrap: wrap; } + .flex-nowrap-m { + flex-wrap: nowrap; } + .flex-wrap-reverse-m { + flex-wrap: wrap-reverse; } + .flex-column-reverse-m { + flex-direction: column-reverse; } + .flex-row-reverse-m { + flex-direction: row-reverse; } + .items-start-m { + align-items: flex-start; } + .items-end-m { + align-items: flex-end; } + .items-center-m { + align-items: center; } + .items-baseline-m { + align-items: baseline; } + .items-stretch-m { + align-items: stretch; } + .self-start-m { + align-self: flex-start; } + .self-end-m { + align-self: flex-end; } + .self-center-m { + align-self: center; } + .self-baseline-m { + align-self: baseline; } + .self-stretch-m { + align-self: stretch; } + .justify-start-m { + justify-content: flex-start; } + .justify-end-m { + justify-content: flex-end; } + .justify-center-m { + justify-content: center; } + .justify-between-m { + justify-content: space-between; } + .justify-around-m { + justify-content: space-around; } + .content-start-m { + align-content: flex-start; } + .content-end-m { + align-content: flex-end; } + .content-center-m { + align-content: center; } + .content-between-m { + align-content: space-between; } + .content-around-m { + align-content: space-around; } + .content-stretch-m { + align-content: stretch; } + .order-0-m { + order: 0; } + .order-1-m { + order: 1; } + .order-2-m { + order: 2; } + .order-3-m { + order: 3; } + .order-4-m { + order: 4; } + .order-5-m { + order: 5; } + .order-6-m { + order: 6; } + .order-7-m { + order: 7; } + .order-8-m { + order: 8; } + .order-last-m { + order: 99999; } + .flex-grow-0-m { + flex-grow: 0; } + .flex-grow-1-m { + flex-grow: 1; } + .flex-shrink-0-m { + flex-shrink: 0; } + .flex-shrink-1-m { + flex-shrink: 1; } } + +@media screen and (min-width: 60em) { + .flex-l { + display: flex; } + .inline-flex-l { + display: inline-flex; } + .flex-auto-l { + flex: 1 1 auto; + min-width: 0; + /* 1 */ + min-height: 0; + /* 1 */ } + .flex-none-l { + flex: none; } + .flex-column-l { + flex-direction: column; } + .flex-row-l { + flex-direction: row; } + .flex-wrap-l { + flex-wrap: wrap; } + .flex-nowrap-l { + flex-wrap: nowrap; } + .flex-wrap-reverse-l { + flex-wrap: wrap-reverse; } + .flex-column-reverse-l { + flex-direction: column-reverse; } + .flex-row-reverse-l { + flex-direction: row-reverse; } + .items-start-l { + align-items: flex-start; } + .items-end-l { + align-items: flex-end; } + .items-center-l { + align-items: center; } + .items-baseline-l { + align-items: baseline; } + .items-stretch-l { + align-items: stretch; } + .self-start-l { + align-self: flex-start; } + .self-end-l { + align-self: flex-end; } + .self-center-l { + align-self: center; } + .self-baseline-l { + align-self: baseline; } + .self-stretch-l { + align-self: stretch; } + .justify-start-l { + justify-content: flex-start; } + .justify-end-l { + justify-content: flex-end; } + .justify-center-l { + justify-content: center; } + .justify-between-l { + justify-content: space-between; } + .justify-around-l { + justify-content: space-around; } + .content-start-l { + align-content: flex-start; } + .content-end-l { + align-content: flex-end; } + .content-center-l { + align-content: center; } + .content-between-l { + align-content: space-between; } + .content-around-l { + align-content: space-around; } + .content-stretch-l { + align-content: stretch; } + .order-0-l { + order: 0; } + .order-1-l { + order: 1; } + .order-2-l { + order: 2; } + .order-3-l { + order: 3; } + .order-4-l { + order: 4; } + .order-5-l { + order: 5; } + .order-6-l { + order: 6; } + .order-7-l { + order: 7; } + .order-8-l { + order: 8; } + .order-last-l { + order: 99999; } + .flex-grow-0-l { + flex-grow: 0; } + .flex-grow-1-l { + flex-grow: 1; } + .flex-shrink-0-l { + flex-shrink: 0; } + .flex-shrink-1-l { + flex-shrink: 1; } } + +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.fl { + float: left; + _display: inline; } + +.fr { + float: right; + _display: inline; } + +.fn { + float: none; } + +@media screen and (min-width: 30em) { + .fl-ns { + float: left; + _display: inline; } + .fr-ns { + float: right; + _display: inline; } + .fn-ns { + float: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .fl-m { + float: left; + _display: inline; } + .fr-m { + float: right; + _display: inline; } + .fn-m { + float: none; } } + +@media screen and (min-width: 60em) { + .fl-l { + float: left; + _display: inline; } + .fr-l { + float: right; + _display: inline; } + .fn-l { + float: none; } } + +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + +*/ +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; } + +.serif { + font-family: georgia, serif; } + +.system-sans-serif { + font-family: sans-serif; } + +.system-serif { + font-family: serif; } + +/* Monospaced Typefaces (for code) */ +/* From http://cssfontstack.com */ +code, .code { + font-family: Consolas, monaco, monospace; } + +.courier { + font-family: 'Courier Next', courier, monospace; } + +/* Sans-Serif Typefaces */ +.helvetica { + font-family: 'helvetica neue', helvetica, sans-serif; } + +.avenir { + font-family: 'avenir next', avenir, sans-serif; } + +/* Serif Typefaces */ +.athelas { + font-family: athelas, georgia, serif; } + +.georgia { + font-family: georgia, serif; } + +.times { + font-family: times, serif; } + +.bodoni { + font-family: "Bodoni MT", serif; } + +.calisto { + font-family: "Calisto MT", serif; } + +.garamond { + font-family: garamond, serif; } + +.baskerville { + font-family: baskerville, serif; } + +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.i { + font-style: italic; } + +.fs-normal { + font-style: normal; } + +@media screen and (min-width: 30em) { + .i-ns { + font-style: italic; } + .fs-normal-ns { + font-style: normal; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .i-m { + font-style: italic; } + .fs-normal-m { + font-style: normal; } } + +@media screen and (min-width: 60em) { + .i-l { + font-style: italic; } + .fs-normal-l { + font-style: normal; } } + +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.normal { + font-weight: normal; } + +.b { + font-weight: bold; } + +.fw1 { + font-weight: 100; } + +.fw2 { + font-weight: 200; } + +.fw3 { + font-weight: 300; } + +.fw4 { + font-weight: 400; } + +.fw5 { + font-weight: 500; } + +.fw6 { + font-weight: 600; } + +.fw7 { + font-weight: 700; } + +.fw8 { + font-weight: 800; } + +.fw9 { + font-weight: 900; } + +@media screen and (min-width: 30em) { + .normal-ns { + font-weight: normal; } + .b-ns { + font-weight: bold; } + .fw1-ns { + font-weight: 100; } + .fw2-ns { + font-weight: 200; } + .fw3-ns { + font-weight: 300; } + .fw4-ns { + font-weight: 400; } + .fw5-ns { + font-weight: 500; } + .fw6-ns { + font-weight: 600; } + .fw7-ns { + font-weight: 700; } + .fw8-ns { + font-weight: 800; } + .fw9-ns { + font-weight: 900; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .normal-m { + font-weight: normal; } + .b-m { + font-weight: bold; } + .fw1-m { + font-weight: 100; } + .fw2-m { + font-weight: 200; } + .fw3-m { + font-weight: 300; } + .fw4-m { + font-weight: 400; } + .fw5-m { + font-weight: 500; } + .fw6-m { + font-weight: 600; } + .fw7-m { + font-weight: 700; } + .fw8-m { + font-weight: 800; } + .fw9-m { + font-weight: 900; } } + +@media screen and (min-width: 60em) { + .normal-l { + font-weight: normal; } + .b-l { + font-weight: bold; } + .fw1-l { + font-weight: 100; } + .fw2-l { + font-weight: 200; } + .fw3-l { + font-weight: 300; } + .fw4-l { + font-weight: 400; } + .fw5-l { + font-weight: 500; } + .fw6-l { + font-weight: 600; } + .fw7-l { + font-weight: 700; } + .fw8-l { + font-weight: 800; } + .fw9-l { + font-weight: 900; } } + +/* + + FORMS + +*/ +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; } + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; } + +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Height Scale */ +.h1 { + height: 1rem; } + +.h2 { + height: 2rem; } + +.h3 { + height: 4rem; } + +.h4 { + height: 8rem; } + +.h5 { + height: 16rem; } + +/* Height Percentages - Based off of height of parent */ +.h-25 { + height: 25%; } + +.h-50 { + height: 50%; } + +.h-75 { + height: 75%; } + +.h-100 { + height: 100%; } + +.min-h-100 { + min-height: 100%; } + +/* Screen Height Percentage */ +.vh-25 { + height: 25vh; } + +.vh-50 { + height: 50vh; } + +.vh-75 { + height: 75vh; } + +.vh-100 { + height: 100vh; } + +.min-vh-100 { + min-height: 100vh; } + +/* String Properties */ +.h-auto { + height: auto; } + +.h-inherit { + height: inherit; } + +@media screen and (min-width: 30em) { + .h1-ns { + height: 1rem; } + .h2-ns { + height: 2rem; } + .h3-ns { + height: 4rem; } + .h4-ns { + height: 8rem; } + .h5-ns { + height: 16rem; } + .h-25-ns { + height: 25%; } + .h-50-ns { + height: 50%; } + .h-75-ns { + height: 75%; } + .h-100-ns { + height: 100%; } + .min-h-100-ns { + min-height: 100%; } + .vh-25-ns { + height: 25vh; } + .vh-50-ns { + height: 50vh; } + .vh-75-ns { + height: 75vh; } + .vh-100-ns { + height: 100vh; } + .min-vh-100-ns { + min-height: 100vh; } + .h-auto-ns { + height: auto; } + .h-inherit-ns { + height: inherit; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .h1-m { + height: 1rem; } + .h2-m { + height: 2rem; } + .h3-m { + height: 4rem; } + .h4-m { + height: 8rem; } + .h5-m { + height: 16rem; } + .h-25-m { + height: 25%; } + .h-50-m { + height: 50%; } + .h-75-m { + height: 75%; } + .h-100-m { + height: 100%; } + .min-h-100-m { + min-height: 100%; } + .vh-25-m { + height: 25vh; } + .vh-50-m { + height: 50vh; } + .vh-75-m { + height: 75vh; } + .vh-100-m { + height: 100vh; } + .min-vh-100-m { + min-height: 100vh; } + .h-auto-m { + height: auto; } + .h-inherit-m { + height: inherit; } } + +@media screen and (min-width: 60em) { + .h1-l { + height: 1rem; } + .h2-l { + height: 2rem; } + .h3-l { + height: 4rem; } + .h4-l { + height: 8rem; } + .h5-l { + height: 16rem; } + .h-25-l { + height: 25%; } + .h-50-l { + height: 50%; } + .h-75-l { + height: 75%; } + .h-100-l { + height: 100%; } + .min-h-100-l { + min-height: 100%; } + .vh-25-l { + height: 25vh; } + .vh-50-l { + height: 50vh; } + .vh-75-l { + height: 75vh; } + .vh-100-l { + height: 100vh; } + .min-vh-100-l { + min-height: 100vh; } + .h-auto-l { + height: auto; } + .h-inherit-l { + height: inherit; } } + +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.tracked { + letter-spacing: 0.1em; } + +.tracked-tight { + letter-spacing: -0.05em; } + +.tracked-mega { + letter-spacing: 0.25em; } + +@media screen and (min-width: 30em) { + .tracked-ns { + letter-spacing: 0.1em; } + .tracked-tight-ns { + letter-spacing: -0.05em; } + .tracked-mega-ns { + letter-spacing: 0.25em; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tracked-m { + letter-spacing: 0.1em; } + .tracked-tight-m { + letter-spacing: -0.05em; } + .tracked-mega-m { + letter-spacing: 0.25em; } } + +@media screen and (min-width: 60em) { + .tracked-l { + letter-spacing: 0.1em; } + .tracked-tight-l { + letter-spacing: -0.05em; } + .tracked-mega-l { + letter-spacing: 0.25em; } } + +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.lh-solid { + line-height: 1; } + +.lh-title { + line-height: 1.25; } + +.lh-copy { + line-height: 1.5; } + +@media screen and (min-width: 30em) { + .lh-solid-ns { + line-height: 1; } + .lh-title-ns { + line-height: 1.25; } + .lh-copy-ns { + line-height: 1.5; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .lh-solid-m { + line-height: 1; } + .lh-title-m { + line-height: 1.25; } + .lh-copy-m { + line-height: 1.5; } } + +@media screen and (min-width: 60em) { + .lh-solid-l { + line-height: 1; } + .lh-title-l { + line-height: 1.25; } + .lh-copy-l { + line-height: 1.5; } } + +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ +.link { + text-decoration: none; + transition: color .15s ease-in; } + +.link:link, +.link:visited { + transition: color .15s ease-in; } + +.link:hover { + transition: color .15s ease-in; } + +.link:active { + transition: color .15s ease-in; } + +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; } + +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + +*/ +.list { + list-style-type: none; } + +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Max Width Percentages */ +.mw-100 { + max-width: 100%; } + +/* Max Width Scale */ +.mw1 { + max-width: 1rem; } + +.mw2 { + max-width: 2rem; } + +.mw3 { + max-width: 4rem; } + +.mw4 { + max-width: 8rem; } + +.mw5 { + max-width: 16rem; } + +.mw6 { + max-width: 32rem; } + +.mw7 { + max-width: 48rem; } + +.mw8 { + max-width: 64rem; } + +.mw9 { + max-width: 96rem; } + +/* Max Width String Properties */ +.mw-none { + max-width: none; } + +@media screen and (min-width: 30em) { + .mw-100-ns { + max-width: 100%; } + .mw1-ns { + max-width: 1rem; } + .mw2-ns { + max-width: 2rem; } + .mw3-ns { + max-width: 4rem; } + .mw4-ns { + max-width: 8rem; } + .mw5-ns { + max-width: 16rem; } + .mw6-ns { + max-width: 32rem; } + .mw7-ns { + max-width: 48rem; } + .mw8-ns { + max-width: 64rem; } + .mw9-ns { + max-width: 96rem; } + .mw-none-ns { + max-width: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .mw-100-m { + max-width: 100%; } + .mw1-m { + max-width: 1rem; } + .mw2-m { + max-width: 2rem; } + .mw3-m { + max-width: 4rem; } + .mw4-m { + max-width: 8rem; } + .mw5-m { + max-width: 16rem; } + .mw6-m { + max-width: 32rem; } + .mw7-m { + max-width: 48rem; } + .mw8-m { + max-width: 64rem; } + .mw9-m { + max-width: 96rem; } + .mw-none-m { + max-width: none; } } + +@media screen and (min-width: 60em) { + .mw-100-l { + max-width: 100%; } + .mw1-l { + max-width: 1rem; } + .mw2-l { + max-width: 2rem; } + .mw3-l { + max-width: 4rem; } + .mw4-l { + max-width: 8rem; } + .mw5-l { + max-width: 16rem; } + .mw6-l { + max-width: 32rem; } + .mw7-l { + max-width: 48rem; } + .mw8-l { + max-width: 64rem; } + .mw9-l { + max-width: 96rem; } + .mw-none-l { + max-width: none; } } + +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +/* Width Scale */ +.w1 { + width: 1rem; } + +.w2, .project-carousel-container .project-carousel-button.active { + width: 2rem; } + +.w3 { + width: 4rem; } + +.w4 { + width: 8rem; } + +.w5 { + width: 16rem; } + +.w-10 { + width: 10%; } + +.w-20 { + width: 20%; } + +.w-25 { + width: 25%; } + +.w-30 { + width: 30%; } + +.w-33 { + width: 33%; } + +.w-34 { + width: 34%; } + +.w-40 { + width: 40%; } + +.w-50 { + width: 50%; } + +.w-60 { + width: 60%; } + +.w-70 { + width: 70%; } + +.w-75 { + width: 75%; } + +.w-80 { + width: 80%; } + +.w-90 { + width: 90%; } + +.w-100 { + width: 100%; } + +.w-third { + width: 33.33333%; } + +.w-two-thirds { + width: 66.66667%; } + +.w-auto { + width: auto; } + +@media screen and (min-width: 30em) { + .w1-ns { + width: 1rem; } + .w2-ns { + width: 2rem; } + .w3-ns { + width: 4rem; } + .w4-ns { + width: 8rem; } + .w5-ns { + width: 16rem; } + .w-10-ns { + width: 10%; } + .w-20-ns { + width: 20%; } + .w-25-ns { + width: 25%; } + .w-30-ns { + width: 30%; } + .w-33-ns { + width: 33%; } + .w-34-ns { + width: 34%; } + .w-40-ns { + width: 40%; } + .w-50-ns { + width: 50%; } + .w-60-ns { + width: 60%; } + .w-70-ns { + width: 70%; } + .w-75-ns { + width: 75%; } + .w-80-ns { + width: 80%; } + .w-90-ns { + width: 90%; } + .w-100-ns { + width: 100%; } + .w-third-ns { + width: 33.33333%; } + .w-two-thirds-ns { + width: 66.66667%; } + .w-auto-ns { + width: auto; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .w1-m { + width: 1rem; } + .w2-m { + width: 2rem; } + .w3-m { + width: 4rem; } + .w4-m { + width: 8rem; } + .w5-m { + width: 16rem; } + .w-10-m { + width: 10%; } + .w-20-m { + width: 20%; } + .w-25-m { + width: 25%; } + .w-30-m { + width: 30%; } + .w-33-m { + width: 33%; } + .w-34-m { + width: 34%; } + .w-40-m { + width: 40%; } + .w-50-m { + width: 50%; } + .w-60-m { + width: 60%; } + .w-70-m { + width: 70%; } + .w-75-m { + width: 75%; } + .w-80-m { + width: 80%; } + .w-90-m { + width: 90%; } + .w-100-m { + width: 100%; } + .w-third-m { + width: 33.33333%; } + .w-two-thirds-m { + width: 66.66667%; } + .w-auto-m { + width: auto; } } + +@media screen and (min-width: 60em) { + .w1-l { + width: 1rem; } + .w2-l { + width: 2rem; } + .w3-l { + width: 4rem; } + .w4-l { + width: 8rem; } + .w5-l { + width: 16rem; } + .w-10-l { + width: 10%; } + .w-20-l { + width: 20%; } + .w-25-l { + width: 25%; } + .w-30-l { + width: 30%; } + .w-33-l { + width: 33%; } + .w-34-l { + width: 34%; } + .w-40-l { + width: 40%; } + .w-50-l { + width: 50%; } + .w-60-l { + width: 60%; } + .w-70-l { + width: 70%; } + .w-75-l { + width: 75%; } + .w-80-l { + width: 80%; } + .w-90-l { + width: 90%; } + .w-100-l { + width: 100%; } + .w-third-l { + width: 33.33333%; } + .w-two-thirds-l { + width: 66.66667%; } + .w-auto-l { + width: auto; } } + +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.overflow-visible { + overflow: visible; } + +.overflow-hidden { + overflow: hidden; } + +.overflow-scroll { + overflow: scroll; } + +.overflow-auto { + overflow: auto; } + +.overflow-x-visible { + overflow-x: visible; } + +.overflow-x-hidden { + overflow-x: hidden; } + +.overflow-x-scroll { + overflow-x: scroll; } + +.overflow-x-auto { + overflow-x: auto; } + +.overflow-y-visible { + overflow-y: visible; } + +.overflow-y-hidden { + overflow-y: hidden; } + +.overflow-y-scroll { + overflow-y: scroll; } + +.overflow-y-auto { + overflow-y: auto; } + +@media screen and (min-width: 30em) { + .overflow-visible-ns { + overflow: visible; } + .overflow-hidden-ns { + overflow: hidden; } + .overflow-scroll-ns { + overflow: scroll; } + .overflow-auto-ns { + overflow: auto; } + .overflow-x-visible-ns { + overflow-x: visible; } + .overflow-x-hidden-ns { + overflow-x: hidden; } + .overflow-x-scroll-ns { + overflow-x: scroll; } + .overflow-x-auto-ns { + overflow-x: auto; } + .overflow-y-visible-ns { + overflow-y: visible; } + .overflow-y-hidden-ns { + overflow-y: hidden; } + .overflow-y-scroll-ns { + overflow-y: scroll; } + .overflow-y-auto-ns { + overflow-y: auto; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .overflow-visible-m { + overflow: visible; } + .overflow-hidden-m { + overflow: hidden; } + .overflow-scroll-m { + overflow: scroll; } + .overflow-auto-m { + overflow: auto; } + .overflow-x-visible-m { + overflow-x: visible; } + .overflow-x-hidden-m { + overflow-x: hidden; } + .overflow-x-scroll-m { + overflow-x: scroll; } + .overflow-x-auto-m { + overflow-x: auto; } + .overflow-y-visible-m { + overflow-y: visible; } + .overflow-y-hidden-m { + overflow-y: hidden; } + .overflow-y-scroll-m { + overflow-y: scroll; } + .overflow-y-auto-m { + overflow-y: auto; } } + +@media screen and (min-width: 60em) { + .overflow-visible-l { + overflow: visible; } + .overflow-hidden-l { + overflow: hidden; } + .overflow-scroll-l { + overflow: scroll; } + .overflow-auto-l { + overflow: auto; } + .overflow-x-visible-l { + overflow-x: visible; } + .overflow-x-hidden-l { + overflow-x: hidden; } + .overflow-x-scroll-l { + overflow-x: scroll; } + .overflow-x-auto-l { + overflow-x: auto; } + .overflow-y-visible-l { + overflow-y: visible; } + .overflow-y-hidden-l { + overflow-y: hidden; } + .overflow-y-scroll-l { + overflow-y: scroll; } + .overflow-y-auto-l { + overflow-y: auto; } } + +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.static { + position: static; } + +.relative { + position: relative; } + +.absolute { + position: absolute; } + +.fixed { + position: fixed; } + +@media screen and (min-width: 30em) { + .static-ns { + position: static; } + .relative-ns { + position: relative; } + .absolute-ns { + position: absolute; } + .fixed-ns { + position: fixed; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .static-m { + position: static; } + .relative-m { + position: relative; } + .absolute-m { + position: absolute; } + .fixed-m { + position: fixed; } } + +@media screen and (min-width: 60em) { + .static-l { + position: static; } + .relative-l { + position: relative; } + .absolute-l { + position: absolute; } + .fixed-l { + position: fixed; } } + +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ +.o-100 { + opacity: 1; } + +.o-90 { + opacity: .9; } + +.o-80 { + opacity: .8; } + +.o-70 { + opacity: .7; } + +.o-60 { + opacity: .6; } + +.o-50 { + opacity: .5; } + +.o-40 { + opacity: .4; } + +.o-30 { + opacity: .3; } + +.o-20 { + opacity: .2; } + +.o-10 { + opacity: .1; } + +.o-05 { + opacity: .05; } + +.o-025 { + opacity: .025; } + +.o-0 { + opacity: 0; } + +/* + + ROTATIONS + +*/ +.rotate-45 { + transform: rotate(45deg); } + +.rotate-90 { + transform: rotate(90deg); } + +.rotate-135 { + transform: rotate(135deg); } + +.rotate-180 { + transform: rotate(180deg); } + +.rotate-225 { + transform: rotate(225deg); } + +.rotate-270 { + transform: rotate(270deg); } + +.rotate-315 { + transform: rotate(315deg); } + +@media screen and (min-width: 30em) { + .rotate-45-ns { + transform: rotate(45deg); } + .rotate-90-ns { + transform: rotate(90deg); } + .rotate-135-ns { + transform: rotate(135deg); } + .rotate-180-ns { + transform: rotate(180deg); } + .rotate-225-ns { + transform: rotate(225deg); } + .rotate-270-ns { + transform: rotate(270deg); } + .rotate-315-ns { + transform: rotate(315deg); } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .rotate-45-m { + transform: rotate(45deg); } + .rotate-90-m { + transform: rotate(90deg); } + .rotate-135-m { + transform: rotate(135deg); } + .rotate-180-m { + transform: rotate(180deg); } + .rotate-225-m { + transform: rotate(225deg); } + .rotate-270-m { + transform: rotate(270deg); } + .rotate-315-m { + transform: rotate(315deg); } } + +@media screen and (min-width: 60em) { + .rotate-45-l { + transform: rotate(45deg); } + .rotate-90-l { + transform: rotate(90deg); } + .rotate-135-l { + transform: rotate(135deg); } + .rotate-180-l { + transform: rotate(180deg); } + .rotate-225-l { + transform: rotate(225deg); } + .rotate-270-l { + transform: rotate(270deg); } + .rotate-315-l { + transform: rotate(315deg); } } + +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + +*/ +/* Text colors */ +.black-90 { + color: rgba(0, 0, 0, 0.9); } + +.black-80 { + color: rgba(0, 0, 0, 0.8); } + +.black-70 { + color: rgba(0, 0, 0, 0.7); } + +.black-60 { + color: rgba(0, 0, 0, 0.6); } + +.black-50 { + color: rgba(0, 0, 0, 0.5); } + +.black-40 { + color: rgba(0, 0, 0, 0.4); } + +.black-30 { + color: rgba(0, 0, 0, 0.3); } + +.black-20 { + color: rgba(0, 0, 0, 0.2); } + +.black-10 { + color: rgba(0, 0, 0, 0.1); } + +.black-05 { + color: rgba(0, 0, 0, 0.05); } + +.white-90 { + color: rgba(255, 255, 255, 0.9); } + +.white-80 { + color: rgba(255, 255, 255, 0.8); } + +.white-70 { + color: rgba(255, 255, 255, 0.7); } + +.white-60 { + color: rgba(255, 255, 255, 0.6); } + +.white-50 { + color: rgba(255, 255, 255, 0.5); } + +.white-40 { + color: rgba(255, 255, 255, 0.4); } + +.white-30 { + color: rgba(255, 255, 255, 0.3); } + +.white-20 { + color: rgba(255, 255, 255, 0.2); } + +.white-10 { + color: rgba(255, 255, 255, 0.1); } + +.black { + color: #000; } + +.near-black { + color: #111; } + +.dark-gray { + color: #333; } + +.mid-gray { + color: #555; } + +.gray { + color: #777; } + +.silver { + color: #999; } + +.light-silver { + color: #aaa; } + +.moon-gray { + color: #ccc; } + +.light-gray { + color: #eee; } + +.near-white { + color: #f4f4f4; } + +.white { + color: #fff; } + +.dark-red { + color: #e7040f; } + +.red { + color: #ff4136; } + +.light-red { + color: #ff725c; } + +.orange { + color: #ff6300; } + +.gold { + color: #ffb700; } + +.yellow { + color: #ffd700; } + +.light-yellow { + color: #fbf1a9; } + +.purple { + color: #5e2ca5; } + +.light-purple { + color: #a463f2; } + +.dark-pink { + color: #d5008f; } + +.hot-pink { + color: #ff41b4; } + +.pink { + color: #ff80cc; } + +.light-pink { + color: #ffa3d7; } + +.dark-green { + color: #137752; } + +.green { + color: #19a974; } + +.light-green { + color: #9eebcf; } + +.navy { + color: #001b44; } + +.dark-blue { + color: #00449e; } + +.blue { + color: #357edd; } + +.light-blue { + color: #96ccff; } + +.lightest-blue { + color: #cdecff; } + +.washed-blue { + color: #f6fffe; } + +.washed-green { + color: #e8fdf5; } + +.washed-yellow { + color: #fffceb; } + +.washed-red { + color: #ffdfdf; } + +.color-inherit { + color: inherit; } + +.bg-black-90 { + background-color: rgba(0, 0, 0, 0.9); } + +.bg-black-80 { + background-color: rgba(0, 0, 0, 0.8); } + +.bg-black-70 { + background-color: rgba(0, 0, 0, 0.7); } + +.bg-black-60 { + background-color: rgba(0, 0, 0, 0.6); } + +.bg-black-50 { + background-color: rgba(0, 0, 0, 0.5); } + +.bg-black-40 { + background-color: rgba(0, 0, 0, 0.4); } + +.bg-black-30 { + background-color: rgba(0, 0, 0, 0.3); } + +.bg-black-20 { + background-color: rgba(0, 0, 0, 0.2); } + +.bg-black-10 { + background-color: rgba(0, 0, 0, 0.1); } + +.bg-black-05 { + background-color: rgba(0, 0, 0, 0.05); } + +.bg-white-90 { + background-color: rgba(255, 255, 255, 0.9); } + +.bg-white-80 { + background-color: rgba(255, 255, 255, 0.8); } + +.bg-white-70 { + background-color: rgba(255, 255, 255, 0.7); } + +.bg-white-60 { + background-color: rgba(255, 255, 255, 0.6); } + +.bg-white-50 { + background-color: rgba(255, 255, 255, 0.5); } + +.bg-white-40 { + background-color: rgba(255, 255, 255, 0.4); } + +.bg-white-30 { + background-color: rgba(255, 255, 255, 0.3); } + +.bg-white-20 { + background-color: rgba(255, 255, 255, 0.2); } + +.bg-white-10 { + background-color: rgba(255, 255, 255, 0.1); } + +/* Background colors */ +.bg-black { + background-color: #000; } + +.bg-near-black { + background-color: #111; } + +.bg-dark-gray { + background-color: #333; } + +.bg-mid-gray { + background-color: #555; } + +.bg-gray { + background-color: #777; } + +.bg-silver { + background-color: #999; } + +.bg-light-silver { + background-color: #aaa; } + +.bg-moon-gray { + background-color: #ccc; } + +.bg-light-gray { + background-color: #eee; } + +.bg-near-white { + background-color: #f4f4f4; } + +.bg-white { + background-color: #fff; } + +.bg-transparent { + background-color: transparent; } + +.bg-dark-red { + background-color: #e7040f; } + +.bg-red { + background-color: #ff4136; } + +.bg-light-red { + background-color: #ff725c; } + +.bg-orange { + background-color: #ff6300; } + +.bg-gold { + background-color: #ffb700; } + +.bg-yellow { + background-color: #ffd700; } + +.bg-light-yellow { + background-color: #fbf1a9; } + +.bg-purple { + background-color: #5e2ca5; } + +.bg-light-purple { + background-color: #a463f2; } + +.bg-dark-pink { + background-color: #d5008f; } + +.bg-hot-pink { + background-color: #ff41b4; } + +.bg-pink { + background-color: #ff80cc; } + +.bg-light-pink { + background-color: #ffa3d7; } + +.bg-dark-green { + background-color: #137752; } + +.bg-green { + background-color: #19a974; } + +.bg-light-green { + background-color: #9eebcf; } + +.bg-navy { + background-color: #001b44; } + +.bg-dark-blue { + background-color: #00449e; } + +.bg-blue { + background-color: #357edd; } + +.bg-light-blue { + background-color: #96ccff; } + +.bg-lightest-blue { + background-color: #cdecff; } + +.bg-washed-blue { + background-color: #f6fffe; } + +.bg-washed-green { + background-color: #e8fdf5; } + +.bg-washed-yellow { + background-color: #fffceb; } + +.bg-washed-red { + background-color: #ffdfdf; } + +.bg-inherit { + background-color: inherit; } + +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ +.hover-black:hover, +.hover-black:focus { + color: #000; } + +.hover-near-black:hover, +.hover-near-black:focus { + color: #111; } + +.hover-dark-gray:hover, +.hover-dark-gray:focus { + color: #333; } + +.hover-mid-gray:hover, +.hover-mid-gray:focus { + color: #555; } + +.hover-gray:hover, +.hover-gray:focus { + color: #777; } + +.hover-silver:hover, +.hover-silver:focus { + color: #999; } + +.hover-light-silver:hover, +.hover-light-silver:focus { + color: #aaa; } + +.hover-moon-gray:hover, +.hover-moon-gray:focus { + color: #ccc; } + +.hover-light-gray:hover, +.hover-light-gray:focus { + color: #eee; } + +.hover-near-white:hover, +.hover-near-white:focus { + color: #f4f4f4; } + +.hover-white:hover, +.hover-white:focus { + color: #fff; } + +.hover-black-90:hover, +.hover-black-90:focus { + color: rgba(0, 0, 0, 0.9); } + +.hover-black-80:hover, +.hover-black-80:focus { + color: rgba(0, 0, 0, 0.8); } + +.hover-black-70:hover, +.hover-black-70:focus { + color: rgba(0, 0, 0, 0.7); } + +.hover-black-60:hover, +.hover-black-60:focus { + color: rgba(0, 0, 0, 0.6); } + +.hover-black-50:hover, +.hover-black-50:focus { + color: rgba(0, 0, 0, 0.5); } + +.hover-black-40:hover, +.hover-black-40:focus { + color: rgba(0, 0, 0, 0.4); } + +.hover-black-30:hover, +.hover-black-30:focus { + color: rgba(0, 0, 0, 0.3); } + +.hover-black-20:hover, +.hover-black-20:focus { + color: rgba(0, 0, 0, 0.2); } + +.hover-black-10:hover, +.hover-black-10:focus { + color: rgba(0, 0, 0, 0.1); } + +.hover-white-90:hover, +.hover-white-90:focus { + color: rgba(255, 255, 255, 0.9); } + +.hover-white-80:hover, +.hover-white-80:focus { + color: rgba(255, 255, 255, 0.8); } + +.hover-white-70:hover, +.hover-white-70:focus { + color: rgba(255, 255, 255, 0.7); } + +.hover-white-60:hover, +.hover-white-60:focus { + color: rgba(255, 255, 255, 0.6); } + +.hover-white-50:hover, +.hover-white-50:focus { + color: rgba(255, 255, 255, 0.5); } + +.hover-white-40:hover, +.hover-white-40:focus { + color: rgba(255, 255, 255, 0.4); } + +.hover-white-30:hover, +.hover-white-30:focus { + color: rgba(255, 255, 255, 0.3); } + +.hover-white-20:hover, +.hover-white-20:focus { + color: rgba(255, 255, 255, 0.2); } + +.hover-white-10:hover, +.hover-white-10:focus { + color: rgba(255, 255, 255, 0.1); } + +.hover-inherit:hover, +.hover-inherit:focus { + color: inherit; } + +.hover-bg-black:hover, +.hover-bg-black:focus { + background-color: #000; } + +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { + background-color: #111; } + +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { + background-color: #333; } + +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { + background-color: #555; } + +.hover-bg-gray:hover, +.hover-bg-gray:focus { + background-color: #777; } + +.hover-bg-silver:hover, +.hover-bg-silver:focus { + background-color: #999; } + +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { + background-color: #aaa; } + +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { + background-color: #ccc; } + +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { + background-color: #eee; } + +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { + background-color: #f4f4f4; } + +.hover-bg-white:hover, +.hover-bg-white:focus { + background-color: #fff; } + +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { + background-color: transparent; } + +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { + background-color: rgba(0, 0, 0, 0.9); } + +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { + background-color: rgba(0, 0, 0, 0.8); } + +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { + background-color: rgba(0, 0, 0, 0.7); } + +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { + background-color: rgba(0, 0, 0, 0.6); } + +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { + background-color: rgba(0, 0, 0, 0.5); } + +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { + background-color: rgba(0, 0, 0, 0.4); } + +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { + background-color: rgba(0, 0, 0, 0.3); } + +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { + background-color: rgba(0, 0, 0, 0.2); } + +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { + background-color: rgba(0, 0, 0, 0.1); } + +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { + background-color: rgba(255, 255, 255, 0.9); } + +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { + background-color: rgba(255, 255, 255, 0.8); } + +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { + background-color: rgba(255, 255, 255, 0.7); } + +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { + background-color: rgba(255, 255, 255, 0.6); } + +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { + background-color: rgba(255, 255, 255, 0.5); } + +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { + background-color: rgba(255, 255, 255, 0.4); } + +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { + background-color: rgba(255, 255, 255, 0.3); } + +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { + background-color: rgba(255, 255, 255, 0.2); } + +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { + background-color: rgba(255, 255, 255, 0.1); } + +.hover-dark-red:hover, +.hover-dark-red:focus { + color: #e7040f; } + +.hover-red:hover, +.hover-red:focus { + color: #ff4136; } + +.hover-light-red:hover, +.hover-light-red:focus { + color: #ff725c; } + +.hover-orange:hover, +.hover-orange:focus { + color: #ff6300; } + +.hover-gold:hover, +.hover-gold:focus { + color: #ffb700; } + +.hover-yellow:hover, +.hover-yellow:focus { + color: #ffd700; } + +.hover-light-yellow:hover, +.hover-light-yellow:focus { + color: #fbf1a9; } + +.hover-purple:hover, +.hover-purple:focus { + color: #5e2ca5; } + +.hover-light-purple:hover, +.hover-light-purple:focus { + color: #a463f2; } + +.hover-dark-pink:hover, +.hover-dark-pink:focus { + color: #d5008f; } + +.hover-hot-pink:hover, +.hover-hot-pink:focus { + color: #ff41b4; } + +.hover-pink:hover, +.hover-pink:focus { + color: #ff80cc; } + +.hover-light-pink:hover, +.hover-light-pink:focus { + color: #ffa3d7; } + +.hover-dark-green:hover, +.hover-dark-green:focus { + color: #137752; } + +.hover-green:hover, +.hover-green:focus { + color: #19a974; } + +.hover-light-green:hover, +.hover-light-green:focus { + color: #9eebcf; } + +.hover-navy:hover, +.hover-navy:focus { + color: #001b44; } + +.hover-dark-blue:hover, +.hover-dark-blue:focus { + color: #00449e; } + +.hover-blue:hover, +.hover-blue:focus { + color: #357edd; } + +.hover-light-blue:hover, +.hover-light-blue:focus { + color: #96ccff; } + +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { + color: #cdecff; } + +.hover-washed-blue:hover, +.hover-washed-blue:focus { + color: #f6fffe; } + +.hover-washed-green:hover, +.hover-washed-green:focus { + color: #e8fdf5; } + +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { + color: #fffceb; } + +.hover-washed-red:hover, +.hover-washed-red:focus { + color: #ffdfdf; } + +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { + background-color: #e7040f; } + +.hover-bg-red:hover, +.hover-bg-red:focus { + background-color: #ff4136; } + +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { + background-color: #ff725c; } + +.hover-bg-orange:hover, +.hover-bg-orange:focus { + background-color: #ff6300; } + +.hover-bg-gold:hover, +.hover-bg-gold:focus { + background-color: #ffb700; } + +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { + background-color: #ffd700; } + +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { + background-color: #fbf1a9; } + +.hover-bg-purple:hover, +.hover-bg-purple:focus { + background-color: #5e2ca5; } + +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { + background-color: #a463f2; } + +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { + background-color: #d5008f; } + +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { + background-color: #ff41b4; } + +.hover-bg-pink:hover, +.hover-bg-pink:focus { + background-color: #ff80cc; } + +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { + background-color: #ffa3d7; } + +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { + background-color: #137752; } + +.hover-bg-green:hover, +.hover-bg-green:focus { + background-color: #19a974; } + +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { + background-color: #9eebcf; } + +.hover-bg-navy:hover, +.hover-bg-navy:focus { + background-color: #001b44; } + +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { + background-color: #00449e; } + +.hover-bg-blue:hover, +.hover-bg-blue:focus { + background-color: #357edd; } + +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { + background-color: #96ccff; } + +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { + background-color: #cdecff; } + +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { + background-color: #f6fffe; } + +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { + background-color: #e8fdf5; } + +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { + background-color: #fffceb; } + +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { + background-color: #ffdfdf; } + +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { + background-color: inherit; } + +/* Variables */ +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.pa0 { + padding: 0; } + +.pa1 { + padding: 0.25rem; } + +.pa2, header .menu-bar .items a, header .user-options a, .tab { + padding: 0.5rem; } + +.pa3, header #login-popup { + padding: 1rem; } + +.pa4 { + padding: 2rem; } + +.pa5 { + padding: 4rem; } + +.pa6 { + padding: 8rem; } + +.pa7 { + padding: 16rem; } + +.pl0 { + padding-left: 0; } + +.pl1 { + padding-left: 0.25rem; } + +.pl2 { + padding-left: 0.5rem; } + +.pl3 { + padding-left: 1rem; } + +.pl4 { + padding-left: 2rem; } + +.pl5 { + padding-left: 4rem; } + +.pl6 { + padding-left: 8rem; } + +.pl7 { + padding-left: 16rem; } + +.pr0 { + padding-right: 0; } + +.pr1 { + padding-right: 0.25rem; } + +.pr2 { + padding-right: 0.5rem; } + +.pr3 { + padding-right: 1rem; } + +.pr4 { + padding-right: 2rem; } + +.pr5 { + padding-right: 4rem; } + +.pr6 { + padding-right: 8rem; } + +.pr7 { + padding-right: 16rem; } + +.pb0 { + padding-bottom: 0; } + +.pb1 { + padding-bottom: 0.25rem; } + +.pb2 { + padding-bottom: 0.5rem; } + +.pb3 { + padding-bottom: 1rem; } + +.pb4 { + padding-bottom: 2rem; } + +.pb5 { + padding-bottom: 4rem; } + +.pb6 { + padding-bottom: 8rem; } + +.pb7 { + padding-bottom: 16rem; } + +.pt0 { + padding-top: 0; } + +.pt1 { + padding-top: 0.25rem; } + +.pt2 { + padding-top: 0.5rem; } + +.pt3 { + padding-top: 1rem; } + +.pt4 { + padding-top: 2rem; } + +.pt5 { + padding-top: 4rem; } + +.pt6 { + padding-top: 8rem; } + +.pt7 { + padding-top: 16rem; } + +.pv0, .pagination .button { + padding-top: 0; + padding-bottom: 0; } + +.pv1, .optionbar .options > * { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } + +.pv2, header .menu-bar .items a.project-logo, +button, +.button, +input[type=button], +input[type=submit] { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } + +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; } + +.pv4 { + padding-top: 2rem; + padding-bottom: 2rem; } + +.pv5 { + padding-top: 4rem; + padding-bottom: 4rem; } + +.pv6 { + padding-top: 8rem; + padding-bottom: 8rem; } + +.pv7 { + padding-top: 16rem; + padding-bottom: 16rem; } + +.ph0 { + padding-left: 0; + padding-right: 0; } + +.ph1 { + padding-left: 0.25rem; + padding-right: 0.25rem; } + +.ph2, .optionbar .options > *, .pagination .button { + padding-left: 0.5rem; + padding-right: 0.5rem; } + +.ph3, +button, +.button, +input[type=button], +input[type=submit] { + padding-left: 1rem; + padding-right: 1rem; } + +.ph4 { + padding-left: 2rem; + padding-right: 2rem; } + +.ph5 { + padding-left: 4rem; + padding-right: 4rem; } + +.ph6 { + padding-left: 8rem; + padding-right: 8rem; } + +.ph7 { + padding-left: 16rem; + padding-right: 16rem; } + +.ma0, .thread { + margin: 0; } + +.ma1 { + margin: 0.25rem; } + +.ma2 { + margin: 0.5rem; } + +.ma3 { + margin: 1rem; } + +.ma4 { + margin: 2rem; } + +.ma5 { + margin: 4rem; } + +.ma6 { + margin: 8rem; } + +.ma7 { + margin: 16rem; } + +.ml0 { + margin-left: 0; } + +.ml1 { + margin-left: 0.25rem; } + +.ml2 { + margin-left: 0.5rem; } + +.ml3 { + margin-left: 1rem; } + +.ml4 { + margin-left: 2rem; } + +.ml5 { + margin-left: 4rem; } + +.ml6 { + margin-left: 8rem; } + +.ml7 { + margin-left: 16rem; } + +.mr0 { + margin-right: 0; } + +.mr1 { + margin-right: 0.25rem; } + +.mr2 { + margin-right: 0.5rem; } + +.mr3 { + margin-right: 1rem; } + +.mr4 { + margin-right: 2rem; } + +.mr5 { + margin-right: 4rem; } + +.mr6 { + margin-right: 8rem; } + +.mr7 { + margin-right: 16rem; } + +.mb0 { + margin-bottom: 0; } + +.mb1 { + margin-bottom: 0.25rem; } + +.mb2 { + margin-bottom: 0.5rem; } + +.mb3 { + margin-bottom: 1rem; } + +.mb4 { + margin-bottom: 2rem; } + +.mb5 { + margin-bottom: 4rem; } + +.mb6 { + margin-bottom: 8rem; } + +.mb7 { + margin-bottom: 16rem; } + +.mt0 { + margin-top: 0; } + +.mt1 { + margin-top: 0.25rem; } + +.mt2 { + margin-top: 0.5rem; } + +.mt3 { + margin-top: 1rem; } + +.mt4 { + margin-top: 2rem; } + +.mt5 { + margin-top: 4rem; } + +.mt6 { + margin-top: 8rem; } + +.mt7 { + margin-top: 16rem; } + +.mv0 { + margin-top: 0; + margin-bottom: 0; } + +.mv1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } + +.mv2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } + +.mv3, hr { + margin-top: 1rem; + margin-bottom: 1rem; } + +.mv4 { + margin-top: 2rem; + margin-bottom: 2rem; } + +.mv5 { + margin-top: 4rem; + margin-bottom: 4rem; } + +.mv6 { + margin-top: 8rem; + margin-bottom: 8rem; } + +.mv7 { + margin-top: 16rem; + margin-bottom: 16rem; } + +.mh0 { + margin-left: 0; + margin-right: 0; } + +.mh1 { + margin-left: 0.25rem; + margin-right: 0.25rem; } + +.mh2 { + margin-left: 0.5rem; + margin-right: 0.5rem; } + +.mh3 { + margin-left: 1rem; + margin-right: 1rem; } + +.mh4 { + margin-left: 2rem; + margin-right: 2rem; } + +.mh5 { + margin-left: 4rem; + margin-right: 4rem; } + +.mh6 { + margin-left: 8rem; + margin-right: 8rem; } + +.mh7 { + margin-left: 16rem; + margin-right: 16rem; } + +@media screen and (min-width: 30em) { + .pa0-ns { + padding: 0; } + .pa1-ns { + padding: 0.25rem; } + .pa2-ns { + padding: 0.5rem; } + .pa3-ns { + padding: 1rem; } + .pa4-ns { + padding: 2rem; } + .pa5-ns { + padding: 4rem; } + .pa6-ns { + padding: 8rem; } + .pa7-ns { + padding: 16rem; } + .pl0-ns { + padding-left: 0; } + .pl1-ns { + padding-left: 0.25rem; } + .pl2-ns { + padding-left: 0.5rem; } + .pl3-ns { + padding-left: 1rem; } + .pl4-ns { + padding-left: 2rem; } + .pl5-ns { + padding-left: 4rem; } + .pl6-ns { + padding-left: 8rem; } + .pl7-ns { + padding-left: 16rem; } + .pr0-ns { + padding-right: 0; } + .pr1-ns { + padding-right: 0.25rem; } + .pr2-ns { + padding-right: 0.5rem; } + .pr3-ns { + padding-right: 1rem; } + .pr4-ns { + padding-right: 2rem; } + .pr5-ns { + padding-right: 4rem; } + .pr6-ns { + padding-right: 8rem; } + .pr7-ns { + padding-right: 16rem; } + .pb0-ns { + padding-bottom: 0; } + .pb1-ns { + padding-bottom: 0.25rem; } + .pb2-ns { + padding-bottom: 0.5rem; } + .pb3-ns { + padding-bottom: 1rem; } + .pb4-ns { + padding-bottom: 2rem; } + .pb5-ns { + padding-bottom: 4rem; } + .pb6-ns { + padding-bottom: 8rem; } + .pb7-ns { + padding-bottom: 16rem; } + .pt0-ns { + padding-top: 0; } + .pt1-ns { + padding-top: 0.25rem; } + .pt2-ns { + padding-top: 0.5rem; } + .pt3-ns { + padding-top: 1rem; } + .pt4-ns { + padding-top: 2rem; } + .pt5-ns { + padding-top: 4rem; } + .pt6-ns { + padding-top: 8rem; } + .pt7-ns { + padding-top: 16rem; } + .pv0-ns { + padding-top: 0; + padding-bottom: 0; } + .pv1-ns { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } + .pv2-ns, .optionbar .options > * { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } + .pv3-ns, header .menu-bar .items a { + padding-top: 1rem; + padding-bottom: 1rem; } + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; } + .pv5-ns { + padding-top: 4rem; + padding-bottom: 4rem; } + .pv6-ns { + padding-top: 8rem; + padding-bottom: 8rem; } + .pv7-ns { + padding-top: 16rem; + padding-bottom: 16rem; } + .ph0-ns { + padding-left: 0; + padding-right: 0; } + .ph1-ns { + padding-left: 0.25rem; + padding-right: 0.25rem; } + .ph2-ns { + padding-left: 0.5rem; + padding-right: 0.5rem; } + .ph3-ns { + padding-left: 1rem; + padding-right: 1rem; } + .ph4-ns { + padding-left: 2rem; + padding-right: 2rem; } + .ph5-ns { + padding-left: 4rem; + padding-right: 4rem; } + .ph6-ns { + padding-left: 8rem; + padding-right: 8rem; } + .ph7-ns { + padding-left: 16rem; + padding-right: 16rem; } + .ma0-ns { + margin: 0; } + .ma1-ns { + margin: 0.25rem; } + .ma2-ns { + margin: 0.5rem; } + .ma3-ns { + margin: 1rem; } + .ma4-ns { + margin: 2rem; } + .ma5-ns { + margin: 4rem; } + .ma6-ns { + margin: 8rem; } + .ma7-ns { + margin: 16rem; } + .ml0-ns { + margin-left: 0; } + .ml1-ns { + margin-left: 0.25rem; } + .ml2-ns, header .menu-bar .items a:first-child { + margin-left: 0.5rem; } + .ml3-ns { + margin-left: 1rem; } + .ml4-ns { + margin-left: 2rem; } + .ml5-ns { + margin-left: 4rem; } + .ml6-ns { + margin-left: 8rem; } + .ml7-ns { + margin-left: 16rem; } + .mr0-ns { + margin-right: 0; } + .mr1-ns { + margin-right: 0.25rem; } + .mr2-ns { + margin-right: 0.5rem; } + .mr3-ns { + margin-right: 1rem; } + .mr4-ns { + margin-right: 2rem; } + .mr5-ns { + margin-right: 4rem; } + .mr6-ns { + margin-right: 8rem; } + .mr7-ns { + margin-right: 16rem; } + .mb0-ns { + margin-bottom: 0; } + .mb1-ns { + margin-bottom: 0.25rem; } + .mb2-ns { + margin-bottom: 0.5rem; } + .mb3-ns { + margin-bottom: 1rem; } + .mb4-ns { + margin-bottom: 2rem; } + .mb5-ns { + margin-bottom: 4rem; } + .mb6-ns { + margin-bottom: 8rem; } + .mb7-ns { + margin-bottom: 16rem; } + .mt0-ns { + margin-top: 0; } + .mt1-ns { + margin-top: 0.25rem; } + .mt2-ns { + margin-top: 0.5rem; } + .mt3-ns { + margin-top: 1rem; } + .mt4-ns { + margin-top: 2rem; } + .mt5-ns { + margin-top: 4rem; } + .mt6-ns { + margin-top: 8rem; } + .mt7-ns { + margin-top: 16rem; } + .mv0-ns { + margin-top: 0; + margin-bottom: 0; } + .mv1-ns { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } + .mv2-ns { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } + .mv3-ns { + margin-top: 1rem; + margin-bottom: 1rem; } + .mv4-ns { + margin-top: 2rem; + margin-bottom: 2rem; } + .mv5-ns { + margin-top: 4rem; + margin-bottom: 4rem; } + .mv6-ns { + margin-top: 8rem; + margin-bottom: 8rem; } + .mv7-ns { + margin-top: 16rem; + margin-bottom: 16rem; } + .mh0-ns { + margin-left: 0; + margin-right: 0; } + .mh1-ns { + margin-left: 0.25rem; + margin-right: 0.25rem; } + .mh2-ns { + margin-left: 0.5rem; + margin-right: 0.5rem; } + .mh3-ns { + margin-left: 1rem; + margin-right: 1rem; } + .mh4-ns { + margin-left: 2rem; + margin-right: 2rem; } + .mh5-ns { + margin-left: 4rem; + margin-right: 4rem; } + .mh6-ns { + margin-left: 8rem; + margin-right: 8rem; } + .mh7-ns { + margin-left: 16rem; + margin-right: 16rem; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .pa0-m { + padding: 0; } + .pa1-m { + padding: 0.25rem; } + .pa2-m { + padding: 0.5rem; } + .pa3-m { + padding: 1rem; } + .pa4-m { + padding: 2rem; } + .pa5-m { + padding: 4rem; } + .pa6-m { + padding: 8rem; } + .pa7-m { + padding: 16rem; } + .pl0-m { + padding-left: 0; } + .pl1-m { + padding-left: 0.25rem; } + .pl2-m { + padding-left: 0.5rem; } + .pl3-m { + padding-left: 1rem; } + .pl4-m { + padding-left: 2rem; } + .pl5-m { + padding-left: 4rem; } + .pl6-m { + padding-left: 8rem; } + .pl7-m { + padding-left: 16rem; } + .pr0-m { + padding-right: 0; } + .pr1-m { + padding-right: 0.25rem; } + .pr2-m { + padding-right: 0.5rem; } + .pr3-m { + padding-right: 1rem; } + .pr4-m { + padding-right: 2rem; } + .pr5-m { + padding-right: 4rem; } + .pr6-m { + padding-right: 8rem; } + .pr7-m { + padding-right: 16rem; } + .pb0-m { + padding-bottom: 0; } + .pb1-m { + padding-bottom: 0.25rem; } + .pb2-m { + padding-bottom: 0.5rem; } + .pb3-m { + padding-bottom: 1rem; } + .pb4-m { + padding-bottom: 2rem; } + .pb5-m { + padding-bottom: 4rem; } + .pb6-m { + padding-bottom: 8rem; } + .pb7-m { + padding-bottom: 16rem; } + .pt0-m { + padding-top: 0; } + .pt1-m { + padding-top: 0.25rem; } + .pt2-m { + padding-top: 0.5rem; } + .pt3-m { + padding-top: 1rem; } + .pt4-m { + padding-top: 2rem; } + .pt5-m { + padding-top: 4rem; } + .pt6-m { + padding-top: 8rem; } + .pt7-m { + padding-top: 16rem; } + .pv0-m { + padding-top: 0; + padding-bottom: 0; } + .pv1-m { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } + .pv2-m { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } + .pv3-m { + padding-top: 1rem; + padding-bottom: 1rem; } + .pv4-m { + padding-top: 2rem; + padding-bottom: 2rem; } + .pv5-m { + padding-top: 4rem; + padding-bottom: 4rem; } + .pv6-m { + padding-top: 8rem; + padding-bottom: 8rem; } + .pv7-m { + padding-top: 16rem; + padding-bottom: 16rem; } + .ph0-m { + padding-left: 0; + padding-right: 0; } + .ph1-m { + padding-left: 0.25rem; + padding-right: 0.25rem; } + .ph2-m { + padding-left: 0.5rem; + padding-right: 0.5rem; } + .ph3-m { + padding-left: 1rem; + padding-right: 1rem; } + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; } + .ph5-m { + padding-left: 4rem; + padding-right: 4rem; } + .ph6-m { + padding-left: 8rem; + padding-right: 8rem; } + .ph7-m { + padding-left: 16rem; + padding-right: 16rem; } + .ma0-m { + margin: 0; } + .ma1-m { + margin: 0.25rem; } + .ma2-m { + margin: 0.5rem; } + .ma3-m { + margin: 1rem; } + .ma4-m { + margin: 2rem; } + .ma5-m { + margin: 4rem; } + .ma6-m { + margin: 8rem; } + .ma7-m { + margin: 16rem; } + .ml0-m { + margin-left: 0; } + .ml1-m { + margin-left: 0.25rem; } + .ml2-m { + margin-left: 0.5rem; } + .ml3-m { + margin-left: 1rem; } + .ml4-m { + margin-left: 2rem; } + .ml5-m { + margin-left: 4rem; } + .ml6-m { + margin-left: 8rem; } + .ml7-m { + margin-left: 16rem; } + .mr0-m { + margin-right: 0; } + .mr1-m { + margin-right: 0.25rem; } + .mr2-m { + margin-right: 0.5rem; } + .mr3-m { + margin-right: 1rem; } + .mr4-m { + margin-right: 2rem; } + .mr5-m { + margin-right: 4rem; } + .mr6-m { + margin-right: 8rem; } + .mr7-m { + margin-right: 16rem; } + .mb0-m { + margin-bottom: 0; } + .mb1-m { + margin-bottom: 0.25rem; } + .mb2-m { + margin-bottom: 0.5rem; } + .mb3-m { + margin-bottom: 1rem; } + .mb4-m { + margin-bottom: 2rem; } + .mb5-m { + margin-bottom: 4rem; } + .mb6-m { + margin-bottom: 8rem; } + .mb7-m { + margin-bottom: 16rem; } + .mt0-m { + margin-top: 0; } + .mt1-m { + margin-top: 0.25rem; } + .mt2-m { + margin-top: 0.5rem; } + .mt3-m { + margin-top: 1rem; } + .mt4-m { + margin-top: 2rem; } + .mt5-m { + margin-top: 4rem; } + .mt6-m { + margin-top: 8rem; } + .mt7-m { + margin-top: 16rem; } + .mv0-m { + margin-top: 0; + margin-bottom: 0; } + .mv1-m { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } + .mv2-m { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } + .mv3-m { + margin-top: 1rem; + margin-bottom: 1rem; } + .mv4-m { + margin-top: 2rem; + margin-bottom: 2rem; } + .mv5-m { + margin-top: 4rem; + margin-bottom: 4rem; } + .mv6-m { + margin-top: 8rem; + margin-bottom: 8rem; } + .mv7-m { + margin-top: 16rem; + margin-bottom: 16rem; } + .mh0-m { + margin-left: 0; + margin-right: 0; } + .mh1-m { + margin-left: 0.25rem; + margin-right: 0.25rem; } + .mh2-m { + margin-left: 0.5rem; + margin-right: 0.5rem; } + .mh3-m { + margin-left: 1rem; + margin-right: 1rem; } + .mh4-m { + margin-left: 2rem; + margin-right: 2rem; } + .mh5-m { + margin-left: 4rem; + margin-right: 4rem; } + .mh6-m { + margin-left: 8rem; + margin-right: 8rem; } + .mh7-m { + margin-left: 16rem; + margin-right: 16rem; } } + +@media screen and (min-width: 60em) { + .pa0-l { + padding: 0; } + .pa1-l { + padding: 0.25rem; } + .pa2-l { + padding: 0.5rem; } + .pa3-l { + padding: 1rem; } + .pa4-l { + padding: 2rem; } + .pa5-l { + padding: 4rem; } + .pa6-l { + padding: 8rem; } + .pa7-l { + padding: 16rem; } + .pl0-l { + padding-left: 0; } + .pl1-l { + padding-left: 0.25rem; } + .pl2-l { + padding-left: 0.5rem; } + .pl3-l { + padding-left: 1rem; } + .pl4-l { + padding-left: 2rem; } + .pl5-l { + padding-left: 4rem; } + .pl6-l { + padding-left: 8rem; } + .pl7-l { + padding-left: 16rem; } + .pr0-l { + padding-right: 0; } + .pr1-l { + padding-right: 0.25rem; } + .pr2-l { + padding-right: 0.5rem; } + .pr3-l { + padding-right: 1rem; } + .pr4-l { + padding-right: 2rem; } + .pr5-l { + padding-right: 4rem; } + .pr6-l { + padding-right: 8rem; } + .pr7-l { + padding-right: 16rem; } + .pb0-l { + padding-bottom: 0; } + .pb1-l { + padding-bottom: 0.25rem; } + .pb2-l { + padding-bottom: 0.5rem; } + .pb3-l { + padding-bottom: 1rem; } + .pb4-l { + padding-bottom: 2rem; } + .pb5-l { + padding-bottom: 4rem; } + .pb6-l { + padding-bottom: 8rem; } + .pb7-l { + padding-bottom: 16rem; } + .pt0-l { + padding-top: 0; } + .pt1-l { + padding-top: 0.25rem; } + .pt2-l { + padding-top: 0.5rem; } + .pt3-l { + padding-top: 1rem; } + .pt4-l { + padding-top: 2rem; } + .pt5-l { + padding-top: 4rem; } + .pt6-l { + padding-top: 8rem; } + .pt7-l { + padding-top: 16rem; } + .pv0-l { + padding-top: 0; + padding-bottom: 0; } + .pv1-l { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } + .pv2-l { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } + .pv3-l { + padding-top: 1rem; + padding-bottom: 1rem; } + .pv4-l { + padding-top: 2rem; + padding-bottom: 2rem; } + .pv5-l { + padding-top: 4rem; + padding-bottom: 4rem; } + .pv6-l { + padding-top: 8rem; + padding-bottom: 8rem; } + .pv7-l { + padding-top: 16rem; + padding-bottom: 16rem; } + .ph0-l { + padding-left: 0; + padding-right: 0; } + .ph1-l { + padding-left: 0.25rem; + padding-right: 0.25rem; } + .ph2-l { + padding-left: 0.5rem; + padding-right: 0.5rem; } + .ph3-l, header .menu-bar .items a { + padding-left: 1rem; + padding-right: 1rem; } + .ph4-l { + padding-left: 2rem; + padding-right: 2rem; } + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; } + .ph6-l { + padding-left: 8rem; + padding-right: 8rem; } + .ph7-l { + padding-left: 16rem; + padding-right: 16rem; } + .ma0-l { + margin: 0; } + .ma1-l { + margin: 0.25rem; } + .ma2-l { + margin: 0.5rem; } + .ma3-l { + margin: 1rem; } + .ma4-l { + margin: 2rem; } + .ma5-l { + margin: 4rem; } + .ma6-l { + margin: 8rem; } + .ma7-l { + margin: 16rem; } + .ml0-l { + margin-left: 0; } + .ml1-l { + margin-left: 0.25rem; } + .ml2-l { + margin-left: 0.5rem; } + .ml3-l, header .menu-bar .items a:first-child { + margin-left: 1rem; } + .ml4-l { + margin-left: 2rem; } + .ml5-l { + margin-left: 4rem; } + .ml6-l { + margin-left: 8rem; } + .ml7-l { + margin-left: 16rem; } + .mr0-l { + margin-right: 0; } + .mr1-l { + margin-right: 0.25rem; } + .mr2-l { + margin-right: 0.5rem; } + .mr3-l { + margin-right: 1rem; } + .mr4-l { + margin-right: 2rem; } + .mr5-l { + margin-right: 4rem; } + .mr6-l { + margin-right: 8rem; } + .mr7-l { + margin-right: 16rem; } + .mb0-l { + margin-bottom: 0; } + .mb1-l { + margin-bottom: 0.25rem; } + .mb2-l { + margin-bottom: 0.5rem; } + .mb3-l { + margin-bottom: 1rem; } + .mb4-l { + margin-bottom: 2rem; } + .mb5-l { + margin-bottom: 4rem; } + .mb6-l { + margin-bottom: 8rem; } + .mb7-l { + margin-bottom: 16rem; } + .mt0-l { + margin-top: 0; } + .mt1-l { + margin-top: 0.25rem; } + .mt2-l { + margin-top: 0.5rem; } + .mt3-l { + margin-top: 1rem; } + .mt4-l { + margin-top: 2rem; } + .mt5-l { + margin-top: 4rem; } + .mt6-l { + margin-top: 8rem; } + .mt7-l { + margin-top: 16rem; } + .mv0-l { + margin-top: 0; + margin-bottom: 0; } + .mv1-l { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } + .mv2-l { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } + .mv3-l { + margin-top: 1rem; + margin-bottom: 1rem; } + .mv4-l { + margin-top: 2rem; + margin-bottom: 2rem; } + .mv5-l { + margin-top: 4rem; + margin-bottom: 4rem; } + .mv6-l { + margin-top: 8rem; + margin-bottom: 8rem; } + .mv7-l { + margin-top: 16rem; + margin-bottom: 16rem; } + .mh0-l { + margin-left: 0; + margin-right: 0; } + .mh1-l { + margin-left: 0.25rem; + margin-right: 0.25rem; } + .mh2-l { + margin-left: 0.5rem; + margin-right: 0.5rem; } + .mh3-l { + margin-left: 1rem; + margin-right: 1rem; } + .mh4-l { + margin-left: 2rem; + margin-right: 2rem; } + .mh5-l { + margin-left: 4rem; + margin-right: 4rem; } + .mh6-l { + margin-left: 8rem; + margin-right: 8rem; } + .mh7-l { + margin-left: 16rem; + margin-right: 16rem; } } + +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.na1 { + margin: -0.25rem; } + +.na2 { + margin: -0.5rem; } + +.na3 { + margin: -1rem; } + +.na4 { + margin: -2rem; } + +.na5 { + margin: -4rem; } + +.na6 { + margin: -8rem; } + +.na7 { + margin: -16rem; } + +.nl1 { + margin-left: -0.25rem; } + +.nl2 { + margin-left: -0.5rem; } + +.nl3 { + margin-left: -1rem; } + +.nl4 { + margin-left: -2rem; } + +.nl5 { + margin-left: -4rem; } + +.nl6 { + margin-left: -8rem; } + +.nl7 { + margin-left: -16rem; } + +.nr1 { + margin-right: -0.25rem; } + +.nr2 { + margin-right: -0.5rem; } + +.nr3 { + margin-right: -1rem; } + +.nr4 { + margin-right: -2rem; } + +.nr5 { + margin-right: -4rem; } + +.nr6 { + margin-right: -8rem; } + +.nr7 { + margin-right: -16rem; } + +.nb1 { + margin-bottom: -0.25rem; } + +.nb2 { + margin-bottom: -0.5rem; } + +.nb3 { + margin-bottom: -1rem; } + +.nb4 { + margin-bottom: -2rem; } + +.nb5 { + margin-bottom: -4rem; } + +.nb6 { + margin-bottom: -8rem; } + +.nb7 { + margin-bottom: -16rem; } + +.nt1 { + margin-top: -0.25rem; } + +.nt2 { + margin-top: -0.5rem; } + +.nt3 { + margin-top: -1rem; } + +.nt4 { + margin-top: -2rem; } + +.nt5 { + margin-top: -4rem; } + +.nt6 { + margin-top: -8rem; } + +.nt7 { + margin-top: -16rem; } + +@media screen and (min-width: 30em) { + .na1-ns { + margin: -0.25rem; } + .na2-ns { + margin: -0.5rem; } + .na3-ns { + margin: -1rem; } + .na4-ns { + margin: -2rem; } + .na5-ns { + margin: -4rem; } + .na6-ns { + margin: -8rem; } + .na7-ns { + margin: -16rem; } + .nl1-ns { + margin-left: -0.25rem; } + .nl2-ns { + margin-left: -0.5rem; } + .nl3-ns { + margin-left: -1rem; } + .nl4-ns { + margin-left: -2rem; } + .nl5-ns { + margin-left: -4rem; } + .nl6-ns { + margin-left: -8rem; } + .nl7-ns { + margin-left: -16rem; } + .nr1-ns { + margin-right: -0.25rem; } + .nr2-ns { + margin-right: -0.5rem; } + .nr3-ns { + margin-right: -1rem; } + .nr4-ns { + margin-right: -2rem; } + .nr5-ns { + margin-right: -4rem; } + .nr6-ns { + margin-right: -8rem; } + .nr7-ns { + margin-right: -16rem; } + .nb1-ns { + margin-bottom: -0.25rem; } + .nb2-ns { + margin-bottom: -0.5rem; } + .nb3-ns { + margin-bottom: -1rem; } + .nb4-ns { + margin-bottom: -2rem; } + .nb5-ns { + margin-bottom: -4rem; } + .nb6-ns { + margin-bottom: -8rem; } + .nb7-ns { + margin-bottom: -16rem; } + .nt1-ns { + margin-top: -0.25rem; } + .nt2-ns { + margin-top: -0.5rem; } + .nt3-ns { + margin-top: -1rem; } + .nt4-ns { + margin-top: -2rem; } + .nt5-ns { + margin-top: -4rem; } + .nt6-ns { + margin-top: -8rem; } + .nt7-ns { + margin-top: -16rem; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .na1-m { + margin: -0.25rem; } + .na2-m { + margin: -0.5rem; } + .na3-m { + margin: -1rem; } + .na4-m { + margin: -2rem; } + .na5-m { + margin: -4rem; } + .na6-m { + margin: -8rem; } + .na7-m { + margin: -16rem; } + .nl1-m { + margin-left: -0.25rem; } + .nl2-m { + margin-left: -0.5rem; } + .nl3-m { + margin-left: -1rem; } + .nl4-m { + margin-left: -2rem; } + .nl5-m { + margin-left: -4rem; } + .nl6-m { + margin-left: -8rem; } + .nl7-m { + margin-left: -16rem; } + .nr1-m { + margin-right: -0.25rem; } + .nr2-m { + margin-right: -0.5rem; } + .nr3-m { + margin-right: -1rem; } + .nr4-m { + margin-right: -2rem; } + .nr5-m { + margin-right: -4rem; } + .nr6-m { + margin-right: -8rem; } + .nr7-m { + margin-right: -16rem; } + .nb1-m { + margin-bottom: -0.25rem; } + .nb2-m { + margin-bottom: -0.5rem; } + .nb3-m { + margin-bottom: -1rem; } + .nb4-m { + margin-bottom: -2rem; } + .nb5-m { + margin-bottom: -4rem; } + .nb6-m { + margin-bottom: -8rem; } + .nb7-m { + margin-bottom: -16rem; } + .nt1-m { + margin-top: -0.25rem; } + .nt2-m { + margin-top: -0.5rem; } + .nt3-m { + margin-top: -1rem; } + .nt4-m { + margin-top: -2rem; } + .nt5-m { + margin-top: -4rem; } + .nt6-m { + margin-top: -8rem; } + .nt7-m { + margin-top: -16rem; } } + +@media screen and (min-width: 60em) { + .na1-l { + margin: -0.25rem; } + .na2-l { + margin: -0.5rem; } + .na3-l { + margin: -1rem; } + .na4-l { + margin: -2rem; } + .na5-l { + margin: -4rem; } + .na6-l { + margin: -8rem; } + .na7-l { + margin: -16rem; } + .nl1-l { + margin-left: -0.25rem; } + .nl2-l { + margin-left: -0.5rem; } + .nl3-l { + margin-left: -1rem; } + .nl4-l { + margin-left: -2rem; } + .nl5-l { + margin-left: -4rem; } + .nl6-l { + margin-left: -8rem; } + .nl7-l { + margin-left: -16rem; } + .nr1-l { + margin-right: -0.25rem; } + .nr2-l { + margin-right: -0.5rem; } + .nr3-l { + margin-right: -1rem; } + .nr4-l { + margin-right: -2rem; } + .nr5-l { + margin-right: -4rem; } + .nr6-l { + margin-right: -8rem; } + .nr7-l { + margin-right: -16rem; } + .nb1-l { + margin-bottom: -0.25rem; } + .nb2-l { + margin-bottom: -0.5rem; } + .nb3-l { + margin-bottom: -1rem; } + .nb4-l { + margin-bottom: -2rem; } + .nb5-l { + margin-bottom: -4rem; } + .nb6-l { + margin-bottom: -8rem; } + .nb7-l { + margin-bottom: -16rem; } + .nt1-l { + margin-top: -0.25rem; } + .nt2-l { + margin-top: -0.5rem; } + .nt3-l { + margin-top: -1rem; } + .nt4-l { + margin-top: -2rem; } + .nt5-l { + margin-top: -4rem; } + .nt6-l { + margin-top: -8rem; } + .nt7-l { + margin-top: -16rem; } } + +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ +.collapse { + border-collapse: collapse; + border-spacing: 0; } + +.striped--light-silver:nth-child(odd) { + background-color: #aaa; } + +.striped--moon-gray:nth-child(odd) { + background-color: #ccc; } + +.striped--light-gray:nth-child(odd) { + background-color: #eee; } + +.striped--near-white:nth-child(odd) { + background-color: #f4f4f4; } + +.stripe-light:nth-child(odd) { + background-color: rgba(255, 255, 255, 0.1); } + +.stripe-dark:nth-child(odd) { + background-color: rgba(0, 0, 0, 0.1); } + +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.strike { + text-decoration: line-through; } + +.underline { + text-decoration: underline; } + +.no-underline { + text-decoration: none; } + +@media screen and (min-width: 30em) { + .strike-ns { + text-decoration: line-through; } + .underline-ns { + text-decoration: underline; } + .no-underline-ns { + text-decoration: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .strike-m { + text-decoration: line-through; } + .underline-m { + text-decoration: underline; } + .no-underline-m { + text-decoration: none; } } + +@media screen and (min-width: 60em) { + .strike-l { + text-decoration: line-through; } + .underline-l { + text-decoration: underline; } + .no-underline-l { + text-decoration: none; } } + +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.tl { + text-align: left; } + +.tr { + text-align: right; } + +.tc { + text-align: center; } + +.tj { + text-align: justify; } + +@media screen and (min-width: 30em) { + .tl-ns { + text-align: left; } + .tr-ns { + text-align: right; } + .tc-ns { + text-align: center; } + .tj-ns { + text-align: justify; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tl-m { + text-align: left; } + .tr-m { + text-align: right; } + .tc-m { + text-align: center; } + .tj-m { + text-align: justify; } } + +@media screen and (min-width: 60em) { + .tl-l { + text-align: left; } + .tr-l { + text-align: right; } + .tc-l { + text-align: center; } + .tj-l { + text-align: justify; } } + +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.ttc { + text-transform: capitalize; } + +.ttl { + text-transform: lowercase; } + +.ttu { + text-transform: uppercase; } + +.ttn { + text-transform: none; } + +@media screen and (min-width: 30em) { + .ttc-ns { + text-transform: capitalize; } + .ttl-ns { + text-transform: lowercase; } + .ttu-ns { + text-transform: uppercase; } + .ttn-ns { + text-transform: none; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ttc-m { + text-transform: capitalize; } + .ttl-m { + text-transform: lowercase; } + .ttu-m { + text-transform: uppercase; } + .ttn-m { + text-transform: none; } } + +@media screen and (min-width: 60em) { + .ttc-l { + text-transform: capitalize; } + .ttl-l { + text-transform: lowercase; } + .ttu-l { + text-transform: uppercase; } + .ttn-l { + text-transform: none; } } + +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ +.f-6, +.f-headline { + font-size: 6rem; } + +.f-5, +.f-subheadline { + font-size: 5rem; } + +/* Type Scale */ +.f1 { + font-size: 3rem; } + +.f2 { + font-size: 2.25rem; } + +.f3 { + font-size: 1.5rem; } + +.f4 { + font-size: 1.25rem; } + +.f5 { + font-size: 1rem; } + +.f6 { + font-size: 0.875rem; } + +.f7 { + font-size: 0.75rem; } + +@media screen and (min-width: 30em) { + .f-6-ns, + .f-headline-ns { + font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { + font-size: 5rem; } + .f1-ns { + font-size: 3rem; } + .f2-ns { + font-size: 2.25rem; } + .f3-ns { + font-size: 1.5rem; } + .f4-ns { + font-size: 1.25rem; } + .f5-ns { + font-size: 1rem; } + .f6-ns { + font-size: 0.875rem; } + .f7-ns { + font-size: 0.75rem; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .f-6-m, + .f-headline-m { + font-size: 6rem; } + .f-5-m, + .f-subheadline-m { + font-size: 5rem; } + .f1-m { + font-size: 3rem; } + .f2-m { + font-size: 2.25rem; } + .f3-m { + font-size: 1.5rem; } + .f4-m { + font-size: 1.25rem; } + .f5-m { + font-size: 1rem; } + .f6-m { + font-size: 0.875rem; } + .f7-m { + font-size: 0.75rem; } } + +@media screen and (min-width: 60em) { + .f-6-l, + .f-headline-l { + font-size: 6rem; } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; } + .f1-l { + font-size: 3rem; } + .f2-l { + font-size: 2.25rem; } + .f3-l { + font-size: 1.5rem; } + .f4-l { + font-size: 1.25rem; } + .f5-l { + font-size: 1rem; } + .f6-l { + font-size: 0.875rem; } + .f7-l { + font-size: 0.75rem; } } + +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Measure is limited to ~66 characters */ +.measure { + max-width: 30em; } + +/* Measure is limited to ~80 characters */ +.measure-wide { + max-width: 34em; } + +/* Measure is limited to ~45 characters */ +.measure-narrow { + max-width: 20em; } + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; } + +.small-caps { + font-variant: small-caps; } + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + +@media screen and (min-width: 30em) { + .measure-ns { + max-width: 30em; } + .measure-wide-ns { + max-width: 34em; } + .measure-narrow-ns { + max-width: 20em; } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; } + .small-caps-ns { + font-variant: small-caps; } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .measure-m { + max-width: 30em; } + .measure-wide-m { + max-width: 34em; } + .measure-narrow-m { + max-width: 20em; } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; } + .small-caps-m { + font-variant: small-caps; } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } + +@media screen and (min-width: 60em) { + .measure-l { + max-width: 30em; } + .measure-wide-l { + max-width: 34em; } + .measure-narrow-l { + max-width: 20em; } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; } + .small-caps-l { + font-variant: small-caps; } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } + +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* Equivalent to .overflow-y-scroll */ +.overflow-container { + overflow-y: scroll; } + +.center { + margin-right: auto; + margin-left: auto; } + +.mr-auto { + margin-right: auto; } + +.ml-auto { + margin-left: auto; } + +@media screen and (min-width: 30em) { + .center-ns { + margin-right: auto; + margin-left: auto; } + .mr-auto-ns { + margin-right: auto; } + .ml-auto-ns { + margin-left: auto; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .center-m { + margin-right: auto; + margin-left: auto; } + .mr-auto-m { + margin-right: auto; } + .ml-auto-m { + margin-left: auto; } } + +@media screen and (min-width: 60em) { + .center-l { + margin-right: auto; + margin-left: auto; } + .mr-auto-l { + margin-right: auto; } + .ml-auto-l { + margin-left: auto; } } + +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } + +@media screen and (min-width: 30em) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } + +@media screen and (min-width: 60em) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } + +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.ws-normal { + white-space: normal; } + +.nowrap { + white-space: nowrap; } + +.pre { + white-space: pre; } + +@media screen and (min-width: 30em) { + .ws-normal-ns { + white-space: normal; } + .nowrap-ns { + white-space: nowrap; } + .pre-ns { + white-space: pre; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ws-normal-m { + white-space: normal; } + .nowrap-m { + white-space: nowrap; } + .pre-m { + white-space: pre; } } + +@media screen and (min-width: 60em) { + .ws-normal-l { + white-space: normal; } + .nowrap-l { + white-space: nowrap; } + .pre-l { + white-space: pre; } } + +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.v-base { + vertical-align: baseline; } + +.v-mid { + vertical-align: middle; } + +.v-top { + vertical-align: top; } + +.v-btm { + vertical-align: bottom; } + +@media screen and (min-width: 30em) { + .v-base-ns { + vertical-align: baseline; } + .v-mid-ns { + vertical-align: middle; } + .v-top-ns { + vertical-align: top; } + .v-btm-ns { + vertical-align: bottom; } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .v-base-m { + vertical-align: baseline; } + .v-mid-m { + vertical-align: middle; } + .v-top-m { + vertical-align: top; } + .v-btm-m { + vertical-align: bottom; } } + +@media screen and (min-width: 60em) { + .v-base-l { + vertical-align: baseline; } + .v-mid-l { + vertical-align: middle; } + .v-top-l { + vertical-align: top; } + .v-btm-l { + vertical-align: bottom; } } + +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + +*/ +/* + + Dim element on hover by adding the dim class. + +*/ +.dim { + opacity: 1; + transition: opacity .15s ease-in; } + +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity .15s ease-in; } + +.dim:active { + opacity: .8; + transition: opacity .15s ease-out; } + +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ +.glow { + transition: opacity .15s ease-in; } + +.glow:hover, +.glow:focus { + opacity: 1; + transition: opacity .15s ease-in; } + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ +.hide-child .child { + opacity: 0; + transition: opacity .15s ease-in; } + +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: opacity .15s ease-in; } + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; } + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ +.grow { + -moz-osx-font-smoothing: grayscale; + backface-visibility: hidden; + transform: translateZ(0); + transition: transform 0.25s ease-out; } + +.grow:hover, +.grow:focus { + transform: scale(1.05); } + +.grow:active { + transform: scale(0.9); } + +.grow-large { + -moz-osx-font-smoothing: grayscale; + backface-visibility: hidden; + transform: translateZ(0); + transition: transform .25s ease-in-out; } + +.grow-large:hover, +.grow-large:focus { + transform: scale(1.2); } + +.grow-large:active { + transform: scale(0.95); } + +/* Add pointer on hover */ +.pointer:hover { + cursor: pointer; } + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ +.shadow-hover { + cursor: pointer; + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } + +.shadow-hover::after { + content: ''; + box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.2); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; } + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; } + +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ +.z-0 { + z-index: 0; } + +.z-1 { + z-index: 1; } + +.z-2 { + z-index: 2; } + +.z-3 { + z-index: 3; } + +.z-4 { + z-index: 4; } + +.z-5 { + z-index: 5; } + +.z-999 { + z-index: 999; } + +.z-9999 { + z-index: 9999; } + +.z-max { + z-index: 2147483647; } + +.z-inherit { + z-index: inherit; } + +.z-initial { + z-index: initial; } + +.z-unset { + z-index: unset; } + +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; } + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; } + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; } + +.nested-copy-indent p + p { + text-indent: 0.1em; + margin-top: 0; + margin-bottom: 0; } + +.nested-copy-seperator p + p { + margin-top: 1.5em; } + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; } + +.nested-links a { + color: #357edd; + transition: color .15s ease-in; } + +.nested-links a:hover, +.nested-links a:focus { + color: #96ccff; + transition: color .15s ease-in; } + +/* + + STYLES + + Add custom styles here. + +*/ +/* +Inserts a CSS expression with one or more custom variables. +You can provide an arbitrary number of strings in the second +argument, separated by spaces. Any strings corresponding to +variable names will be replaced by the correct values, while +other strings are left untouched. + +Example usage: + +@include usevar(border-color, dimmer-color); +@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); + +For clarity and to avoid syntax issues, you are encouraged to +use unquoted strings for variables and quoted strings for +everything else. + +For convenience in common cases, if only a single argument +is provided and it does not match an existing variable, this +will throw an error. +*/ +/* bbcode [code] -- see: https://github.com/richleland/pygments-css/blob/master/friendly.css */ +.codeblock .hll { + background-color: #ffffcc; } + +.codeblock .c { + color: #60a0b0; + font-style: italic; } + +/* Comment */ +.codeblock .err { + color: #FF0000; } + +/* Error */ +.codeblock .k { + color: #007020; + font-weight: bold; } + +/* Keyword */ +.codeblock .o { + color: #666666; } + +/* Operator */ +.codeblock .cm { + color: #60a0b0; + font-style: italic; } + +/* Comment.Multiline */ +.codeblock .cp { + color: #007020; } + +/* Comment.Preproc */ +.codeblock .c1 { + color: #60a0b0; + font-style: italic; } + +/* Comment.Single */ +.codeblock .cs { + color: #60a0b0; + background-color: #fff0f0; } + +/* Comment.Special */ +.codeblock .gd { + color: #A00000; } + +/* Generic.Deleted */ +.codeblock .ge { + font-style: italic; } + +/* Generic.Emph */ +.codeblock .gr { + color: #FF0000; } + +/* Generic.Error */ +.codeblock .gh { + color: #000080; + font-weight: bold; } + +/* Generic.Heading */ +.codeblock .gi { + color: #00A000; } + +/* Generic.Inserted */ +.codeblock .go { + color: #808080; } + +/* Generic.Output */ +.codeblock .gp { + color: #c65d09; + font-weight: bold; } + +/* Generic.Prompt */ +.codeblock .gs { + font-weight: bold; } + +/* Generic.Strong */ +.codeblock .gu { + color: #800080; + font-weight: bold; } + +/* Generic.Subheading */ +.codeblock .gt { + color: #0040D0; } + +/* Generic.Traceback */ +.codeblock .kc { + color: #007020; + font-weight: bold; } + +/* Keyword.Constant */ +.codeblock .kd { + color: #007020; + font-weight: bold; } + +/* Keyword.Declaration */ +.codeblock .kn { + color: #007020; + font-weight: bold; } + +/* Keyword.Namespace */ +.codeblock .kp { + color: #007020; } + +/* Keyword.Pseudo */ +.codeblock .kr { + color: #007020; + font-weight: bold; } + +/* Keyword.Reserved */ +.codeblock .kt { + color: #902000; } + +/* Keyword.Type */ +.codeblock .m { + color: #40a070; } + +/* Literal.Number */ +.codeblock .s { + color: #4070a0; } + +/* Literal.String */ +.codeblock .na { + color: #4070a0; } + +/* Name.Attribute */ +.codeblock .nb { + color: #007020; } + +/* Name.Builtin */ +.codeblock .nc { + color: #0e84b5; + font-weight: bold; } + +/* Name.Class */ +.codeblock .no { + color: #60add5; } + +/* Name.Constant */ +.codeblock .nd { + color: #555555; + font-weight: bold; } + +/* Name.Decorator */ +.codeblock .ni { + color: #d55537; + font-weight: bold; } + +/* Name.Entity */ +.codeblock .ne { + color: #007020; } + +/* Name.Exception */ +.codeblock .nf { + color: #06287e; } + +/* Name.Function */ +.codeblock .nl { + color: #002070; + font-weight: bold; } + +/* Name.Label */ +.codeblock .nn { + color: #0e84b5; + font-weight: bold; } + +/* Name.Namespace */ +.codeblock .nt { + color: #062873; + font-weight: bold; } + +/* Name.Tag */ +.codeblock .nv { + color: #bb60d5; } + +/* Name.Variable */ +.codeblock .ow { + color: #007020; + font-weight: bold; } + +/* Operator.Word */ +.codeblock .w { + color: #bbbbbb; } + +/* Text.Whitespace */ +.codeblock .mf { + color: #40a070; } + +/* Literal.Number.Float */ +.codeblock .mh { + color: #40a070; } + +/* Literal.Number.Hex */ +.codeblock .mi { + color: #40a070; } + +/* Literal.Number.Integer */ +.codeblock .mo { + color: #40a070; } + +/* Literal.Number.Oct */ +.codeblock .sb { + color: #4070a0; } + +/* Literal.String.Backtick */ +.codeblock .sc { + color: #4070a0; } + +/* Literal.String.Char */ +.codeblock .sd { + color: #4070a0; + font-style: italic; } + +/* Literal.String.Doc */ +.codeblock .s2 { + color: #4070a0; } + +/* Literal.String.Double */ +.codeblock .se { + color: #4070a0; + font-weight: bold; } + +/* Literal.String.Escape */ +.codeblock .sh { + color: #4070a0; } + +/* Literal.String.Heredoc */ +.codeblock .si { + color: #70a0d0; + font-style: italic; } + +/* Literal.String.Interpol */ +.codeblock .sx { + color: #c65d09; } + +/* Literal.String.Other */ +.codeblock .sr { + color: #235388; } + +/* Literal.String.Regex */ +.codeblock .s1 { + color: #4070a0; } + +/* Literal.String.Single */ +.codeblock .ss { + color: #517918; } + +/* Literal.String.Symbol */ +.codeblock .bp { + color: #007020; } + +/* Name.Builtin.Pseudo */ +.codeblock .vc { + color: #bb60d5; } + +/* Name.Variable.Class */ +.codeblock .vg { + color: #bb60d5; } + +/* Name.Variable.Global */ +.codeblock .vi { + color: #bb60d5; } + +/* Name.Variable.Instance */ +.codeblock .il { + color: #40a070; } + +/* Literal.Number.Integer.Long */ +.dark { + background-color: #222; + color: #bbb; } + +.noselect { + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Chrome/Safari/Opera */ + -khtml-user-select: none; + /* Konqueror */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE/Edge */ + user-select: none; + /* non-prefixed version, currently */ } + +* { + box-sizing: border-box; } + +br { + border-style: none; } + +body { + background-color: #fff; + background-color: var(--main-background-color); + color: black; + color: var(--main-color); + font-family: "Fira Sans", sans-serif; + background-size: cover; + min-height: 100vh; + box-sizing: border-box; + font-size: 0.875rem; + line-height: 1.5em; + font-weight: 400; + background-image: url("data:image/png;iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAEGGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjcyIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNzIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iNzIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjcyIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni4wIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni4wIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjcuMSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+87tjqAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG/S0JRFMc/amGUYZBDQ4NENVmUgdTSoJQF1WAG/Vr05Y9A7fGeEdIatAoFUUu/hvoLag2ag6AogmgLmotaSl7n+QQl8l7OOZ/7vfcc7j0X7NGMktUbBiCby2uRcNA7v7Dodb7iwCXmwRNTdHV6djxK3fH1gM2Md31mrfrn/h0tKwldAVuT8KiiannhCeGpjbxq8q6wR0nHVoTPhX2aXFD43tTjFr+ZnLL4x2QtGgmBvU3Ym6rheA0raS0rLC+nO5tZVyr3MV/iSuTmZiV2iXWiEyFMEC+TjBEiwCAj4gP04adfVtTJHyjnz7AmuYp4lQIaq6RIk8cn6rpUT0hMip6QmaFg9v9vX/XkkN+q7gpC44thfPSAcwdKRcP4PjaM0gk4nuEqV81fO4LhT9GLVa37ENxbcHFd1eJ7cLkNHU9qTIuVJYeYPZmE9zNoXYD2W2hesnpW2ef0EaKb8lU3sH8AvXLevfwLEU5nv19tQRgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJSSURBVHic7ZvBbsMgDIaTHKbtnNO0vf/bcW7VS3uoFlWhgAEb//bwrVrzyxjHhq/euu/7fam0z4+v5Xq7JD970llbApQT9aaz5b7A4QyXTghh1fAnm0FouxpC6M74Wn+iDHqN8PV2IUU85QSHzmvm7Pt+p2QSpz9RgM4Pty6OS+cclNYgtfpzBCj3cM3iuHRyQakJUq8/R4BKD1MXx6VTCgo1SL3+REUP7WxyLsythbrVn1mDCpbcjdnin5Y8KFIjXNpNqk7pO9TMKenU+tO1K1q7OlJn6znAnYtnrzN/n5F0NoudZaTO24NizkrBqTnA5RZVczCV1Nne/TFllOBQMomyKIo/I3TWn+/f+3zN0jqzBhV0utu091bfRRQpwbFOJk0RRY1rCzxR1CaT8Ld5bSoASxRRyCQsUUQhk/BEUZtMzhpUMDNEUYtMdhNFboInrVNLJruuCWjZAUUU0UmgKlFE61BQRNEKCeTSqSKKlkggl04zUbTweqgRRfRFQRFF5BbNoZM8KGrNBKLpZDPIO2+mWJRB2jOBaDpRgLTncdB0jgChzASi6RwBQpkJRNOJivB/+tWUojNrUMGS2TFb/NOSB0WtmcBeHe6ZSVdEUSLr3RBFqZlJF7d5yc5rnihKz0yaJoojZibdEEWp12zWoII/7ogid6sX/6/nkWRSYmZyyIyi5WuL2IyiFzIpNh/khQqwzyh6I5PsM4reyKTYjKIXMjlrUMHEZxQtt/hlGTCjaJVMuiSKEjpuiKKUjovbvKSOeaIorWOaKI7QcUMUpXQe+31Pc6xeN0AAAAAASUVORK5CYII="); } + +a { + color: #666; + color: var(--link-color); + border-bottom-color: #666; + border-bottom-color: var(--link-border-color); + border-bottom: none; + text-decoration: none; } + a:hover { + /* text-decoration:underline; */ } + a.external::after { + font-family: "icons"; + content: " 1"; + vertical-align: middle; } + +ol { + list-style-type: decimal; } + +ul { + list-style-type: circle; + padding: 0px; + margin: 0px; } + +.list-none { + list-style-type: none; } + +li { + padding: 0px; + margin: 0px; + padding-left: 5px; + margin-left: 15px; } + +h1, h2 { + font-weight: 500; } + +h1, h2, h3, h4 { + margin: 0px; + margin-bottom: 5px; + font-size: 1.5rem; + line-height: 1.25em; } + +strong { + font-weight: 600; } + +em { + font-style: italic; } + +p { + box-sizing: border-box; + margin: 0px; + padding: 0px; } + +.p-spaced p:not(:first-child) { + margin-top: 0.6em; } + +.p-spaced p:not(:last-child) { + margin-bottom: 0.6em; } + +table { + border-collapse: collapse; + table-layout: fixed; } + +th, td { + color: black; + color: var(--fg-font-color); } + +td { + vertical-align: baseline; } + +tr.line-above th, tr.line-above td { + border-top-color: #444; + border-top-color: var(--table-border-color); + border-top-width: 1px; + border-top-style: solid; + padding-top: 20px; } + +hr { + border-top-color: #444; + border-top-color: var(--hr-color); + border-width: 1px 0 0; + border-top-style: solid; + max-width: 300px; } + +article code { + font-family: "Fira Mono", monospace; } + +.big { + font-size: 120%; } + +.title { + font-weight: bold; } + +.clear { + width: 0; } + +.full { + width: 100%; } + +.hidden { + display: none; } + +.empty { + padding-left: 20px; } + +.column h2 { + text-align: center; + margin-bottom: 20px; } + +.margin-center { + margin-left: auto; + margin-right: auto; } + +.flex-shrink-0 { + flex-shrink: 0; } + +.flex-grow-1 { + flex-grow: 1; } + +.b--theme { + border-color: #666; + border-color: var(--theme-color); } + +.c--dim { + color: #333; + color: var(--dim-color); } + +.c--theme-dim { + color: #aaa; + color: var(--theme-color-dim); } + +.b--dim { + border-color: #333; + border-color: var(--dim-color); } + +.b--theme-dim { + border-color: #aaa; + border-color: var(--theme-color-dim); } + +.c--dimmer, footer .list li:not(:last-child)::after { + color: #999; + color: var(--dimmer-color); } + +.c--theme-dimmer { + color: #bbb; + color: var(--theme-color-dimmer); } + +.b--dimmer, .contents div.code { + border-color: #999; + border-color: var(--dimmer-color); } + +.b--theme-dimmer { + border-color: #bbb; + border-color: var(--theme-color-dimmer); } + +.c--dimmest { + color: #bbb; + color: var(--dimmest-color); } + +.c--theme-dimmest { + color: #ccc; + color: var(--theme-color-dimmest); } + +.b--dimmest, header #login-popup, .optionbar, .post .contents blockquote { + border-color: #bbb; + border-color: var(--dimmest-color); } + +.b--theme-dimmest { + border-color: #ccc; + border-color: var(--theme-color-dimmest); } + +.bg--dim { + background-color: #f0f0f0; + background-color: var(--dim-background); } + +.bg--content { + background-color: #f8f8f8; + background-color: var(--content-background); } + +.f8 { + font-size: 0.65rem; } + +.mw-site { + max-width: 80rem; } + +.mh-100 { + max-height: 100%; } + +.mh-50vh { + max-height: 50vh; } + +.mh-60vh { + max-height: 60vh; } + +.mh-70vh { + max-height: 70vh; } + +.mh-80vh { + max-height: 80vh; } + +.fira { + font-family: "Fira Sans", sans-serif; } + +.bi-avoid { + break-inside: avoid; } + +.cc-auto { + column-count: auto; } + +.cc1 { + column-count: 1; } + +.cc2 { + column-count: 2; } + +.cc3 { + column-count: 3; } + +.cg0 { + column-gap: 0; } + +.cg1 { + column-gap: 0.25rem; } + +.cg2 { + column-gap: 0.5rem; } + +.cg3 { + column-gap: 1rem; } + +.cg4 { + column-gap: 2rem; } + +.cg5 { + column-gap: 4rem; } + +@media screen and (min-width: 30em) { + .bi-avoid-ns { + break-inside: avoid; } + .cc-auto-ns { + column-count: auto; } + .cc1-ns { + column-count: 1; } + .cc2-ns { + column-count: 2; } + .cc3-ns { + column-count: 3; } + .cg0-ns { + column-gap: 0; } + .cg1-ns { + column-gap: 0.25rem; } + .cg2-ns { + column-gap: 0.5rem; } + .cg3-ns { + column-gap: 1rem; } + .cg4-ns { + column-gap: 2rem; } + .cg5-ns { + column-gap: 4rem; } + .bg--dim-ns { + background-color: #f0f0f0; + background-color: var(--dim-background); } } + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bi-avoid-m { + break-inside: avoid; } + .cc-auto-m { + column-count: auto; } + .cc1-m { + column-count: 1; } + .cc2-m { + column-count: 2; } + .cc3-m { + column-count: 3; } + .cg1-m { + column-gap: 0.25rem; } + .cg2-m { + column-gap: 0.5rem; } + .cg3-m { + column-gap: 1rem; } + .cg4-m { + column-gap: 2rem; } + .cg5-m { + column-gap: 4rem; } + .bg--dim-m { + background-color: #f0f0f0; + background-color: var(--dim-background); } } + +@media screen and (min-width: 60em) { + .bi-avoid-l { + break-inside: avoid; } + .cc-auto-l { + column-count: auto; } + .cc1-l { + column-count: 1; } + .cc2-l { + column-count: 2; } + .cc3-l { + column-count: 3; } + .cg1-l { + column-gap: 0.25rem; } + .cg2-l { + column-gap: 0.5rem; } + .cg3-l { + column-gap: 1rem; } + .cg4-l { + column-gap: 2rem; } + .cg5-l { + column-gap: 4rem; } + .bg--dim-l { + background-color: #f0f0f0; + background-color: var(--dim-background); } } + +.not-first:first-child { + display: none; } + +.not-first-of-type:first-of-type { + display: none; } + +.not-last:last-child { + display: none; } + +.not-last-of-type:last-of-type { + display: none; } + +.svgicon svg { + fill: currentColor; + width: 1em; + height: 1em; } + +.svgicon:not(.svgicon-nofix) svg { + transform: translate(0px, 0.1em); } + +.center-layout { + margin-right: auto; + margin-left: auto; } + +header { + border-bottom: 2px solid #333; } + header .menu-bar { + width: 100%; + z-index: 10; } + header .menu-bar .items a { + font-weight: bold; } + header .menu-bar .items a.patreon { + float: right; + height: 30px; + padding-top: 18px; + display: inline-block; } + header .menu-bar .items a h1 { + display: inline; } + header .menu-bar .hmdev-logo { + width: 100%; } + @media screen and (min-width: 30em) { + header .menu-bar .hmdev-logo { + width: 11.25rem; } } + header .menu-bar .hmdev-logo.project { + width: 70px; } + +@keyframes logo-blink { + from { + opacity: 0.0; } + to { + opacity: 1.0; } } + +@-webkit-keyframes logo-blink { + from { + opacity: 0.0; } + to { + opacity: 1.0; } } + header .menu-bar .logo { + height: 3.75rem; + background-color: #333; + margin: 0px; + padding: 0px; } + header .menu-bar .underscore { + width: 100%; + height: 100%; + animation: logo-blink 1s infinite alternate; + -webkit-animation: logo-blink 1s infinite alternate ease-in-out; } + header .menu-bar .logo, header .menu-bar .underscore { + background-size: 8.75rem; + background-repeat: no-repeat; + background-position: center center; } + header .user-options { + position: relative; } + header .login, header .register { + text-align: center; } + header #login-popup { + background-color: #fbfbfb; + background-color: var(--login-popup-background); + color: black; + color: var(--fg-font-color); + border-width: 1px; + border-style: dashed; + visibility: hidden; + position: absolute; + z-index: 12; + margin-top: 10px; + right: 0px; + top: 20px; + width: 290px; + max-height: 0px; + overflow: hidden; + opacity: 0; + transition: all 0.2s; } + header #login-popup.open { + max-height: 170px; + opacity: 1; + visibility: visible; } + header #login-popup label { + padding-right: 10px; } + +@media screen and (min-width: 30em) { + footer .list li:not(:last-child)::after { + content: ' / '; } } + +.content { + background-color: #f8f8f8; + background-color: var(--content-background); + text-align: center; + margin: auto; } + .content p { + -moz-text-size-adjust: auto; + -webkit-text-size-adjust: auto; + text-size-adjust: auto; } + .content .description { + line-height: 1.42em; + text-align: left; + margin: auto; } + .content .description p { + margin-bottom: 0.5rem; + text-align: left; } + .content > .top-bar { + text-align: left; } + +.content-block { + /* Background color given by theme */ + background-repeat: repeat-x; + border-radius: 2px; + text-align: left; + width: 100%; + /* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */ + position: relative; + box-sizing: border-box; } + .content-block.top-bar { + background-image: none; } + .content-block.language-desc { + padding: 10px; } + .content-block.language-desc h3 { + margin-left: 10px; } + .content-block .no-bg { + background-image: none; + background-color: transparent; + box-shadow: none; } + +.sidebar .content-block.single { + padding: 0px; + /* for project list, TODO */ + margin-top: 20px; } + +.sidebar .content-block.top-bar { + /* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */ + width: 80%; + display: block; + margin: 10px auto; } + +.sidebar br.sidebar-filler { + line-height: 20px; } + +.sidebar .projectlist { + background-color: transparent; } + +.content-block .bottom-padding, .sidebar .bottom-padding { + margin-top: 1rem; } + +.breadcrumb:hover { + text-decoration: underline; } + +.breadcrumb.current { + text-overflow: clip ellipsis; } + +.breadcrumb-before:nth-of-type(n+2)::before { + content: '≫'; } + +.optionbar { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + border-style: dashed; + border-width: 0px; + border-bottom-width: 1px; } + @media screen and (min-width: 30em) { + .optionbar { + flex-direction: row; + text-align: left; } } + .optionbar.bottom { + border-bottom-width: 0px; + border-top-width: 1px; } + .optionbar.center { + text-align: center; } + .optionbar .options { + display: flex; + flex-direction: column; } + @media screen and (min-width: 30em) { + .optionbar .options { + flex-direction: row; } } + + .optionbar button, + .optionbar .button, + .optionbar input[type=button], + .optionbar input[type=submit] { + border: none; + background: none; + font-weight: normal; } + .optionbar .group { + display: inline-block; + height: 100%; + margin: auto; } + +.tab { + background-color: #fff; + background-color: var(--tab-background); } + +.tab-bar { + border-color: #d8d8d8; + border-color: var(--tab-border-color); + width: 100%; + border-bottom-width: 1px; + border-bottom-style: solid; + box-sizing: border-box; } + .tab-bar .tab-button { + background-color: #dfdfdf; + background-color: var(--tab-button-background); + border-color: #d8d8d8; + border-color: var(--tab-border-color); + height: 100%; + display: inline-block; + padding: 10px 15px; + line-height: 100%; + cursor: pointer; + border-width: 1px; + border-style: solid; + box-sizing: border-box; } + .tab-bar .tab-button:hover { + background-color: #efefef; + background-color: var(--tab-button-background-hover); } + .tab-bar .tab-button.current { + background-color: #fff; + background-color: var(--tab-button-background-current); + border-bottom-color: transparent; + font-weight: bold; + height: 105%; } + +.pagination .page.current { + cursor: default; + font-weight: 600; } + .pagination .page.current:hover { + text-decoration: none; } + +.user-link { + position: relative; } + +.user-popup { + opacity: 0; + max-height: 0px; + width: 340px; + text-align: center; + transition: max-height 0.2s, opacity 0.1s; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); + overflow: hidden; + position: absolute; + bottom: 0px; } + .user-popup.expanded { + visibility: visible; + max-height: 250px; + opacity: 1; } + .user-popup table { + /* Background color given by theme */ + width: 100%; + position: relative; + border-radius: 3px; + z-index: 10; } + .user-popup td { + vertical-align: top; + padding: 15px 9px; } + .user-popup #avatar { + width: 100px; + height: 100px; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + border-radius: 3px; + margin: 0px auto; } + .user-popup .username { + font-weight: bold; } + .user-popup .bottom { + /* Border color given by theme */ + border-top: 1px solid transparent; + padding: 15px; } + .user-popup .bottom .bio { + vertical-align: top; + width: 90%; } + +.site-search { + width: 100%; } + .site-search:focus { + width: 200%; } + .site-search[type=text].lite { + transition: border-bottom-color 60ms ease-in-out, width 300ms ease; } + +#search_button_homepage { + margin: 0px; + height: 100%; + height: calc(100% - 2px); + border-radius: 0px; + display: inline-block; + display: none; } + +.background-even:nth-of-type(even) { + background-color: #f8f8f8; + background-color: var(--background-even-background); } + +.userlist { + text-align: center; + width: 100%; + margin: 0px auto; + padding-top: 30px; + position: relative; + line-height: 0em; } + .userlist .user { + margin: 5px; + display: inline-block; + height: 200px; + max-height: 180px; + text-align: left; + position: relative; + width: 296px; + border-radius: 3px; + line-height: 1.4em; + overflow: hidden; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); + top: 0px; + transition: box-shadow 0.2s, background-color 0.2s; } + .userlist .user:hover { + box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2); } + .userlist .user table { + /* Border and background color given by theme */ + border: 1px solid transparent; + width: 100%; + height: 100%; } + .userlist .user .bottom { + transition: background-color 0.2s; } + .userlist .user td { + vertical-align: top; } + .userlist .user td.avatar { + width: 100px; + height: 80px; } + .userlist .user .name { + text-align: left; } + .userlist .user .name .username { + vertical-align: middle; } + .userlist .user .avatar .image { + display: block; + float: left; + width: 80px; + height: 80px; + background-size: cover; + margin-right: 10px; } + .userlist .user .bio { + padding: 5px; } + +.text { + background-color: #f9f9f9; + background-color: var(--text-background); } + +.underline { + text-decoration: underline; } + +.monospace { + font-family: "Fira Mono", monospace; + background-color: rgba(0, 0, 0, 0.1); + padding: 0.2em 0 0.05em; + border-radius: 3px; } + .monospace::before, .monospace::after { + content: "\00a0"; + letter-spacing: -0.2em; } + +.center { + text-align: center; } + +.right { + text-align: right; } + +.left { + text-align: left; } + +.justify { + text-align: justify; + -webkit-hyphens: manual; + -moz-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; } + +.spoiler { + border-color: #aaa; + border-color: var(--spoiler-border); + border-width: 1px; + border-style: dashed; + color: transparent; } + .spoiler::selection { + color: white; + background-color: black; } + +pre { + font-family: monospace; } + +.post-edit { + width: 90%; + margin: auto; } + +.toolbar { + background-color: #fff; + background-color: var(--editor-toolbar-background); + border-color: transparent; + border-color: var(--editor-toolbar-border-color); + border-radius: 3px; + height: 2.2em; + overflow-y: scroll; + transition: all 0.3s; + border: 1px solid transparent; } + .toolbar .button, .toolbar input[type=button] { + background-color: transparent; + background-color: var(--editor-toolbar-button-background); + border-color: #ccc; + border-color: var(--editor-toolbar-button-border-color); + line-height: 2.2em; + box-shadow: none; + border: 0px; + border-right: 1px solid transparent; + border-radius: 0px; + margin: 0px; + padding: 0px 10px; + height: 100%; + vertical-align: bottom; + text-transform: none; + font-weight: 300; } + .toolbar .button:hover, .toolbar input[type=button]:hover { + background-color: #ddd; + background-color: var(--editor-toolbar-button-background-hover); } + .toolbar input[type="text"] { + height: 2.2em; + border: 0px solid transparent; + /* Not themed */ } + +.actionbar { + text-align: center; } + +.editor .body { + width: 100%; + font-size: 13pt; + height: 25em; } + +.editor .title-edit { + width: 100%; } + .editor .title-edit label { + font-weight: bold; } + .editor .title-edit input { + width: 100%; } + +.editor .editreason label { + font-weight: bold; } + +.editor .editreason input { + width: 100%; } + +.editor .toolbar { + width: 95%; + margin: 10px auto; } + .editor .toolbar select { + font-size: 10pt; + border: 0px; } + .editor .toolbar select:hover { + border: 0px; } + .editor .toolbar select:focus { + border: 0px; } + .editor .toolbar #bold { + font-weight: bold; } + .editor .toolbar #italic { + font-style: italic; } + .editor .toolbar #underline { + text-decoration: underline; } + .editor .toolbar #monospace { + font-family: monospace; } + .editor .toolbar #url { + text-decoration: underline; + font-style: italic; } + +.editor .actionbar input[type=button] { + margin-left: 10px; + margin-right: 10px; } + +.edit-form .error { + margin-left: 5em; + padding: 10px; + color: red; } + +.edit-form input[type=text] { + min-width: 20em; } + +.edit-form textarea { + font-size: 13pt; } + +.edit-form .note { + margin-bottom: 5px; + font-style: italic; + font-size: 90%; } + +.edit-form .links { + width: 80%; + min-height: 200px; + height: 15vh; } + +.edit-form .half { + padding: 10px; + text-align: center; } + +.edit-form table { + width: 95%; + margin: auto; + border-collapse: separate; + border-spacing: 0px 10px; } + .edit-form table td { + padding-bottom: 15px; + width: 90%; } + .edit-form table td.half { + width: 50%; } + .edit-form table td table { + width: 100%; } + +.edit-form th { + text-align: right; + font-weight: bold; + padding-right: 10px; + padding-bottom: 15px; + vertical-align: top; + max-width: 5em; } + +.edit-form td table th { + text-align: left; } + +.edit-form .page-options label { + font-weight: bold; + margin-right: 20px; } + +.edit-form.profile-edit .longbio { + width: 100%; + min-height: 400px; + height: 30vh; } + +.edit-form.profile-edit .avatar-preview { + border: 1px solid transparent; + margin: 10px; + margin-bottom: 0px; } + +.edit-form.profile-edit textarea.shortbio, +.edit-form.profile-edit textarea.signature { + min-width: 300px; + width: 50%; + min-height: 100px; + height: 4em; } + +.edit-form.profile-edit .logo-preview { + border-color: #999; + border-color: var(--project-edit-logo-previw-border-color); + width: 200px; + border-width: 1px; } + +.edit-form.project-edit .project_description { + width: 100%; + min-height: 400px; + height: 30vh; } + +.edit-form.project-edit input.project_blurb, +.edit-form.project-edit input.project_name { + min-width: 300px; + width: 50%; } + +.edit-form.project-edit .quota-bar { + border-color: #999; + border-color: var(--project-edit-quota-bar-border-color); + width: 500px; + border-width: 1px; + margin-bottom: 10px; } + .edit-form.project-edit .quota-bar .quota-filled { + background-color: #444; + background-color: var(--project-edit-quota-bar-filled-background); + height: 100%; } + +.episode-list .description p { + line-height: 1.42em; } + +.episode-list h2, .episode-list h3 { + font-size: 1em; + font-weight: bold; } + +.episode-list ul { + margin-bottom: 30px; + list-style-type: none; + margin-top: -2px; } + +#outer_holder .back { + margin: 0px auto 20px auto; } + #outer_holder .back .outer { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + align-items: flex-start; + -webkit-justify-content: center; + justify-content: center; } + #outer_holder .back .outer > .sidebar { + max-width: 260px; } + #outer_holder .back .outer > .sidebar > div { + margin: 6px; + background-color: #ddd; + width: 200px; + margin-bottom: 12px; } + #outer_holder .back article { + -webkit-box-flex: 1 1 40%; + -moz-box-flex: 1 1 40%; + -webkit-flex: 1 1 40%; + -ms-flex: 1 1 40%; + flex: 1 1 40%; } + +#player-wrapper { + display: inline-block; + -webkit-box-flex: 0 1 auto; + -moz-box-flex: 0 1 auto; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + box-shadow: 0px 0px 4px #000; } + +@media screen { + #player-wrapper #player { + width: 320px; + height: 210px; } } + +@media screen and (min-width: 500px) { + #player-wrapper #player { + width: 480px; + height: 300px; } } + +@media screen and (min-width: 670px) { + #player-wrapper #player { + width: 640px; + height: 390px; } } + +@media screen and (min-width: 890px) { + #player-wrapper #player { + width: 854px; + height: 510px; } } + +@media screen and (min-width: 1320px) { + #player-wrapper #player { + width: 1280px; + height: 750px; } } + +.annotation { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + align-items: flex-start; } + .annotation .navigation { + width: 450px; + display: inline-block; } + .annotation .notes { + display: inline-block; } + +nav.timecodes { + margin: 0px; + max-width: 450px; + min-height: 700px; + overflow-y: auto; + -webkit-box-flex: 0 0 auto; + -moz-box-flex: 0 0 auto; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + nav.timecodes a { + color: #ccc; } + nav.timecodes ul[name=markers] { + margin: 0px; + padding: 0px; + list-style-type: none; + font-size: 15px; } + nav.timecodes ul[name=markers] > li { + padding: 4px; + display: block; + border-bottom: 1px solid #333; } + nav.timecodes ul[name=markers] > li:hover { + background-color: rgba(0, 90, 0, 0.3); } + nav.timecodes ul[name=markers] > li a { + display: block; + text-decoration: none; } + nav.timecodes ul[name=markers] > li a span.timecode { + color: #777777; + float: left; + font-size: 86%; + margin-right: .5em; + text-align: right; + width: 42px; } + +#video-notes { + min-height: 700px; + margin-top: 0px; } + #video-notes pre { + margin-top: 1.5em; + margin-left: 10px; + margin-right: 30px; + margin-bottom: 1.5em; + padding: 10px; + overflow: auto; } + +#game_icon { + background-position: 0px 0px; + background-repeat: no-repeat; + background-image: url("/images/hero_home_200x114.png"); + background-size: cover; + height: 113px; + margin: 0px 0px 4px 0px; } + +.sidebar-heading { + margin: 0px 0px 16px; + font-size: 18px; + line-height: 24px; + font-weight: bold; + color: #00547c; + white-space: nowrap; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); + text-align: center; } + +.queryContainer { + width: 1000px; + margin: 15px auto; + display: flex; + flex-direction: horizontal; } + .queryContainer label { + flex-grow: 0; + flex-shrink: 0; + padding-right: 15px; } + +#query { + flex-grow: 1; } + +#results { + width: 800px; + margin: 0 auto; } + +.dayContainer:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.05); } + +.dayName { + width: 200px; + display: inline-block; + vertical-align: top; + line-height: 16px; + box-sizing: border-box; + padding: 5px; } + +.markerList { + display: inline-block; + width: 600px; + box-sizing: border-box; + vertical-align: top; } + +.marker { + cursor: pointer; + border-top: 1px solid rgba(255, 255, 255, 0.1); + display: block; + text-decoration: none; } + .marker:first-child { + border: none; } + .marker:hover { + background-color: rgba(0, 0, 0, 0.1); } + .marker b { + color: black; + background-color: #ff9b00; } + +#resultsSummary { + text-align: center; + margin: 10px 0; } + +.radio, .checkbox { + position: relative; + display: flex; + flex-direction: column; + padding-left: 1.8rem; } + .radio input, .checkbox input { + visibility: hidden; + position: absolute; } + .radio label::before, .checkbox label::before { + color: black; + color: var(--fg-font-color); + background-color: #fafafc; + background-color: var(--form-check-background); + border-color: #999; + border-color: var(--form-check-border-color); + position: absolute; + left: 0; + display: flex; + justify-content: center; + align-items: center; + border-width: 1px; + border-style: solid; + content: ""; + width: 1.3rem; + height: 1.3rem; + transition: border-color 0.2s; } + .radio label::before:hover, .checkbox label::before:hover { + border-color: #4c9ed9; + border-color: var(--form-check-border-color-hover); } + .radio input:disabled ~ *, .checkbox input:disabled ~ * { + opacity: 0.5; } + +.radio label:before { + border-radius: 50px; } + +.radio input:checked + label:before { + content: "\25cf"; } + +.checkbox label:before { + border-radius: 0.1cm; } + +.checkbox input:checked + label:before { + content: "\2713"; } + +input[type=text], +input[type=password], +textarea, +select { + color: black; + color: var(--fg-font-color); + background-color: #fff; + background-color: var(--form-text-background); + border-color: #999; + border-color: var(--form-text-border-color); + border-width: 1px; + border-radius: 2px; + transition: border-color 0.3s, background-color 0.3s; + outline: none; } + input[type=text].lite, + input[type=password].lite, + textarea.lite, + select.lite { + background-color: transparent; + border-radius: 0; + border-width: 2px 0 2px; + border-style: solid; + border-color: transparent; + transition: border-bottom-color 60ms ease-in-out; } + input[type=text].lite:focus, input[type=text].lite:active, + input[type=password].lite:focus, + input[type=password].lite:active, + textarea.lite:focus, + textarea.lite:active, + select.lite:focus, + select.lite:active { + background-color: transparent; + border-top-color: transparent; + border-bottom-color: var(--input-lite-border); } + input[type=text]:active, input[type=text]:focus, + input[type=password]:active, + input[type=password]:focus, + textarea:active, + textarea:focus, + select:active, + select:focus { + background-color: #fafafc; + background-color: var(--form-text-background-active); + border-color: #4c9ed9; + border-color: var(--form-text-border-color-active); } + +input[type=text]:not(.lite), input[type=password]:not(.lite) { + padding: 5px; } + +form .note { + font-style: italic; } + +select { + padding: 5px 10px; } + +option[selected] { + font-weight: bold; } + +input[disabled], select[disabled], textarea[disabled] { + opacity: 0.5; } + + +button, +.button, +input[type=button], +input[type=submit] { + color: black; + color: var(--form-button-color); + background-color: #fff; + background-color: var(--form-button-background); + border-color: #ccc; + border-color: var(--form-button-border-color); + border-width: 1px; + border-style: solid; + display: inline-block; + border-radius: 2px; + transition: background-color 0.1s, border-color 0.1s; + cursor: pointer; + font-weight: 600; } + + button:hover, + .button:hover, + input[type=button]:hover, + input[type=submit]:hover { + color: #4c9ed9; + color: var(--form-button-color-active); + background-color: #f2f2f2; + background-color: var(--form-button-background-active); } + + button.lite, + .button.lite, + input[type=button].lite, + input[type=submit].lite { + border: none; + background: none; + font-weight: normal; } + + button.inline-button, + .button.inline-button, + input[type=button].inline-button, + input[type=submit].inline-button { + border-color: #999; + border-color: var(--form-button-inline-border-color); + margin: 5px; + box-shadow: none; + border-width: 1px; + border-style: solid; + padding: 5px 7px; } + +.tabbar { + height: 40px; + padding-left: 50px; + margin-bottom: 20px; } + .tabbar .tab { + padding: 10px; + border-bottom: none; } + .tabbar .tab.current { + /* Border color given by theme */ + border-bottom: 2px solid transparent; } + +.generic-form { + width: 60%; + max-width: 50em; + margin: auto; + margin-top: 50px; + padding: 50px; + border: 1px solid transparent; + border-bottom-width: 0px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } + .generic-form table { + border-collapse: separate; + border-spacing: 4px; } + .generic-form th { + padding-right: 10px; + text-align: right; } + .generic-form th.error { + color: red; + text-align: center; } + +#search_form_input_homepage { + background-color: #f8f8f8; + background-color: var(--landing-search-background); } + #search_form_input_homepage:hover, #search_form_input_homepage:focus { + background-color: #fefeff; + background-color: var(--landing-search-background-hover); } + +.display-options { + height: 100%; + padding: 0px 20px 0px 20px; } + .display-options > * { + display: inline-block; + vertical-align: middle; } + +.forum h3 { + margin: 0px 80px 0px 20px; + font-weight: bold; } + +.forum-narrow .forum-narrow-hide { + display: none; } + +.thread { + color: black; + color: var(--fg-font-color); } + .forum .thread:nth-of-type(odd), + .feed .thread:nth-of-type(odd) { + background-color: #f0f0f0; + background-color: var(--forum-even-background); } + .profile .thread { + padding-left: 15px; } + .thread .title { + font-weight: bold; + transition: border-bottom-color 0.1s; + border-bottom-color: transparent; } + .thread .title:hover { + border-bottom-color: initial; } + .thread.read { + color: #555; + color: var(--forum-thread-read-color); } + .thread.read td { + color: #555; + color: var(--forum-thread-read-color); } + .thread.read a { + color: #888; + color: var(--forum-thread-read-link-color); } + .thread.read .title { + font-weight: 500; } + .thread .goto { + font-size: 200%; + width: 30px; } + .thread .goto a { + display: block; + padding: 0px 10px; + box-sizing: border-box; + position: relative; + line-height: 100%; + background-color: transparent; } + .forum .thread .info th { + width: 50px; } + +.avatar-icon { + width: 40px; + height: 40px; + flex-shrink: 0; + border-radius: 100%; + overflow: hidden; + background-color: #bbb; + background-color: var(--dimmest-color); } + .thread .avatar-icon:not(.lite) { + left: 30px; + bottom: 10px; } + .thread .info .avatar-icon:not(.lite) { + bottom: 0px; + left: 0px; } + .feed .avatar-icon:not(.lite) { + left: -50px; + bottom: -10px; } + .project .box .avatar-icon:not(.lite) { + left: 0px; + bottom: -10px; } + +.badge { + display: inline-block; + border-radius: 1000em; + padding: 0 0.8em; + font-size: 0.9em; + line-height: 1.8em; + font-weight: bold; } + .badge.staff { + background-color: #17b2c6; + color: white; } + .badge.staff::before { + content: 'Staff'; } + +.contents div.code { + max-width: 100%; + max-height: 20em; + max-height: 80vh; + overflow: auto; + -moz-tab-size: 4; + tab-size: 4; + border-width: 1px; + border-style: solid; } + +.contents div + br, +.contents blockquote + br, +.contents ul + br, +.contents ol + br { + display: none; } + +.codeblocktable { + font-family: "Fira Mono", monospace; + font-size: 14px; + overflow: auto; + line-height: 1.5em; } + .codeblocktable tbody { + width: 100%; } + .codeblocktable .linenos { + color: #777; + color: var(--code-line-number-color); + font-weight: 500; + padding: 5px; + background: rgba(0, 0, 0, 0.15); } + .codeblocktable .code { + /* Background color given by theme */ + padding-right: 20px; + padding-left: 10px; + max-width: 80em; } + +.wiki .post { + padding: 0; + margin: auto; + max-width: 70em; } + +.post .contents h1, .post .contents h2 { + margin: 20px 0px; } + +.post .contents h2 { + font-size: 20px; } + +.post .contents h5, .post .contents h6 { + margin: 10px 0px; } + +.post .contents strong { + font-weight: 500; } + +.post .contents blockquote { + display: block; + margin-top: 0; + margin-bottom: 0; + padding: 10px 18px; + padding-top: 0; + padding-bottom: 0; + margin-left: 20px; + margin-right: 20px; + border-left-width: 1px; + border-left-style: solid; } + .post .contents blockquote .quotewho { + line-height: 2em; } + .post .contents blockquote .quotewho::after { + content: " said:"; } + +.post .contents img { + max-width: 100%; } + +.post.bbcode .contents h1, .post.bbcode .contents h2, .post.bbcode .contents h3 { + display: inline; } + +.project .post .contents h3, +.post .contents h4 { + display: block; + font-size: 18px; + margin: 10px 0px; } + +.post .action.button { + padding: 0px 10px; + margin-top: 0px; + margin-right: 4px; + background-color: transparent; + font-size: 130%; + border-radius: 0px; + border-width: 0px; + border-bottom-width: 2px; + transition: border-bottom-width 0.1s; } + .post .action.button:hover { + border-bottom-width: 4px; } + +.post hr { + max-width: 90%; } + +.post .signature hr { + width: 80%; } + +.post .body .size1, .post-preview .size1 { + font-size: 12px; } + +.post .body .size2, .post-preview .size2 { + font-size: 13px; } + +.post .body .size3, .post-preview .size3 { + font-size: 14px; } + +.post .body .size4, .post-preview .size4 { + font-size: 15px; } + +.post .body .size5, .post-preview .size5 { + font-size: 16px; } + +.blog .post .meta { + position: relative; } + +.blog .post.op .meta { + margin-bottom: 10px; } + +.blog .post .badges { + width: 40px; + font-size: 0.7em; + text-align: center; } + +.blog .post.op .body { + padding-top: 6px; } + .blog .post.op .body .contents { + text-align: left; } + .blog .post.op .body p { + margin-top: 8px; + margin-bottom: 8px; + text-align: left; } + +.blog .sidebar .post > .author { + padding: 15px; + text-align: center; } + +.blog .sidebar .recent-posts { + text-align: center; + padding: 15px; } + .blog .sidebar .recent-posts h2 { + display: inline; } + +.blog .sidebar .archive ul { + list-style-type: none; + text-align: left; } + +.blog .post-list .post:nth-child(even) { + background-color: transparent; } + +.wiki .post p { + margin: 10px 0px; } + +.wiki .toc { + border-color: #aaa; + border-color: var(--wiki-border-color); + border-left-width: 1px; } + .wiki .toc .toc-number { + color: #333; + color: var(--wiki-toc-number-color); } + .wiki .toc ul { + list-style-type: none; + margin-left: 10px; + margin-bottom: 5px; } + .wiki .toc li { + margin-left: 0px; } + +.wiki .aside { + border-color: #aaa; + border-color: var(--wiki-border-color); + border-left-width: 1px; + margin-left: 20px; } + .wiki .aside::before { + margin-left: -20px; + margin-right: 15px; + display: inline-block; + width: 10px; + content: "\21b4 "; } + .wiki .aside .aside-heading { + padding: 2px; + margin: 1px; + border-radius: 3px; + border-width: 0px; + cursor: pointer; + display: inline; + background-color: transparent; } + .wiki .aside > .aside-body { + overflow: hidden; + padding-left: 10px; } + .wiki .aside.folded::before { + content: "\2192 "; } + .wiki .aside.folded > .aside-body { + max-height: 0px; } + +.featured-post .meta .avatar-icon { + left: -60px; + bottom: -5px; } + +.blog .body blockquote, +.wiki .body blockquote { + padding-top: 1px; + padding-bottom: 1px; } + +.content-block.blog p.title { + font-weight: bold; } + .content-block.blog p.title a { + border-bottom-width: 0px; } + .content-block.blog p.title a:hover { + border-bottom-width: 1px; } + +a.mark_as_read { + float: right; } + +.mark_as_read_toplevel_forum { + margin-left: auto; + margin-right: auto; + width: 100%; + text-align: center; } + .mark_as_read_toplevel_forum a { + text-decoration: underline; } + +div.mark_as_read_toplevel_blog { + margin-left: auto; + margin-right: auto; + width: 100%; + text-align: center; } + div.mark_as_read_toplevel_blog a { + text-decoration: none; } + +.mark_as_read_toplevel_blog div.mark_as_read_site { + margin-left: auto; + margin-right: auto; + width: 100%; + text-align: center; } + .mark_as_read_toplevel_blog div.mark_as_read_site a { + text-decoration: none; } + +.mark_as_read_site li.post-entry { + margin-left: 0px; + margin-bottom: 3px; } + +.diff { + width: 100%; + max-height: 100vh; + overflow-y: scroll; + margin-top: 20px; } + .diff > .post-source { + color: black; + color: var(--fg-font-color); + background-color: #fff; + background-color: var(--forum-diff-source-background); + border-color: #999; + border-color: var(--forum-diff-source-border-color); + border-width: 1px; + border-radius: 2px; + font-family: "Fira Mono", monospace; + width: 49%; + box-sizing: border-box; + padding: 4px; + display: inline-block; + vertical-align: top; } + .diff .diff-replace, + .diff .diff-delete, + .diff .diff-insert { + border-width: 1px; + border-radius: 2px; + padding: 1px; } + .diff .diff-replace { + background-color: #adcef4; + background-color: var(--forum-diff-replace-background); + border-color: #4787d1; + border-color: var(--forum-diff-replace-border-color); } + .diff .diff-delete { + background-color: #e57979; + background-color: var(--forum-diff-delete-background); + border-color: #c12626; + border-color: var(--forum-diff-delete-border-color); } + .diff .diff-insert { + background-color: #96e579; + background-color: var(--forum-diff-insert-background); + border-color: #5baa3f; + border-color: var(--forum-diff-insert-border-color); } + +.index { + list-style-type: none; + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + margin-top: 20px; } + .index .index-category { + margin-bottom: 20px; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid-column; } + +.bbtable { + width: 100%; + border: 1px solid; } + .bbtable td, .bbtable th { + border: 1px solid; + padding: 4px; } + .bbtable th { + background: rgba(0, 0, 0, 0.15); + font-weight: bold; + border-bottom-width: 2px; } + .bbtable tbody tr:nth-child(even) { + background: rgba(0, 0, 0, 0.05); } + +@font-face { + font-family: icons; + src: url("/static/icon/icons.ttf?v=4"); } + +span.icon { + font-family: "icons"; } + +span.icon-settings::before { + font-family: "icons"; + content: "0"; } + +span.icon-link::before { + font-family: "icons"; + content: "1"; } + +span.icon-logout::before { + font-family: "icons"; + content: "2"; } + +span.icon-twitter::before { + font-family: "icons"; + content: "#"; } + +span.icon-twitch::before { + font-family: "icons"; + content: "$"; } + +span.icon-github::before { + font-family: "icons"; + content: "%"; } + +span.icon-patreon::before { + font-family: "icons"; + content: "&"; } + +span.icon-youtube::before { + font-family: "icons"; + content: "'"; } + +span.icon-soundcloud::before { + font-family: "icons"; + content: "*"; } + +span.icon-web::before { + font-family: "icons"; + content: "3"; } + +span.icon-itchio::before { + font-family: "icons"; + content: "+"; } + +span.icon-hitbox::before { + font-family: "icons"; + content: ","; } + +span.icon-rss::before { + font-family: "icons"; + content: "4"; } + +.chat { + border-color: #ddd; + border-color: var(--irc-border-color); + margin: auto; + width: 100%; + border: 1px solid transparent; + position: relative; + overflow: hidden; + padding-right: 8px; + box-sizing: border-box; } + .chat #tabs { + overflow-y: scroll; + box-sizing: border-box; } + .chat #tabs .hidden { + display: none; } + .chat #tabs .current { + box-shadow: 0px 0px 5px #bbb inset; + box-shadow: var(--irc-tab-current-shadow); } + .chat #tabs .button { + padding-left: 10px; + padding-right: 3px; + transition: width 0.2s; + text-transform: none; + vertical-align: top; } + .chat #tabs .button .close-btn { + visibility: hidden; + opacity: 0; + transition: opacity 0.2s; + display: inline-block; + font-size: 9pt; + vertical-align: middle; + height: 13px; + line-height: 11px; + width: 13px; + margin-left: 5px; + padding-left: 2px; + padding-right: 3px; + border-radius: 3px; + border: 1px solid transparent; + /* Not themed */ + position: relative; + top: -2px; } + .chat #tabs .button:hover .close-btn { + color: #fff; + color: var(--irc-tab-close-button-color); + background-color: #aaa; + background-color: var(--irc-tab-close-button-background); + visibility: visible; + opacity: 1; } + .chat #tabs .new-tab { + padding: 0px; + padding-left: 10px; } + .chat #history { + width: 100%; + min-height: 300px; + height: 50vh; + overflow-y: auto; + padding-top: 3px; + box-sizing: border-box; } + .chat #history .channel { + width: 100%; + display: none; } + .chat #history .channel.current { + display: table; } + .chat #history .channel.hidden { + display: none; } + .chat #history .entry { + display: table-row; + width: 100%; + font-size: 11pt; } + .chat #history .entry.minor { + color: #777; + font-size: 10pt; } + .chat #history .entry.alert { + color: #dd683b; } + .chat #history .entry.error { + color: #880000; + font-style: italic; } + .chat #history .entry.action { + font-style: italic; } + .chat #history .entry.action .msg .action-name { + font-weight: bold; } + .chat #history .entry .nick, .chat #history .entry .msg { + display: table-cell; + padding: 0px 4px; } + .chat #history .entry .nick { + border-color: #ccc; + border-color: var(--irc-nick-border-color); + font-weight: bold; + text-align: right; + border-right-width: 1px; + border-right-style: solid; } + .chat #history .entry .msg { + width: 100%; } + .chat #history .entry .msg .highlight { + background-color: #dd683b; + color: #fff; + padding: 0px 5px; } + .chat #history .entry .msg .emote { + height: 1.6em; + vertical-align: middle; } + .chat #chatbox { + width: 100%; } + .chat #users { + color: black; + color: var(--irc-users-color); + background-color: #fff; + background-color: var(--irc-users-background); + border-color: #ccc; + border-color: var(--irc-users-border-color); + position: absolute; + border-left-width: 1px; + border-left-style: solid; + padding: 5px; + right: 0px; + top: 0px; + color: #333; + height: 100%; + max-width: 20%; + width: 20%; + transition: right 0.2s; + max-height: 100%; + overflow-y: auto; + box-sizing: border-box; } + .chat #users.collapsed { + right: -20%; } + .chat #users .popout { + background-color: #fff; + background-color: var(--irc-users-popout-background); + border-left-color: #bbb; + border-left-color: var(--irc-users-popout-border-color-left); + border-right-color: #ccc; + border-right-color: var(--irc-users-popout-border-color-right); + width: 8px; + font-size: 7pt; + height: 100%; + border-radius: 2px; + border: 0px solid transparent; + /* Not themed */ + border-left-width: 1px; + border-left-style: solid; + border-right-width: 1px; + border-right-style: solid; + position: absolute; + top: 0px; + left: -8px; + box-shadow: 0px 0px 0px transparent; + /* Not themed */ + text-align: center; + margin: 0px; + cursor: pointer; } + .chat #users .op { + font-weight: bold; } + .chat #users .user { + cursor: pointer; } + +.landing .breadcrumb { + padding: 0px 3px; } + .landing .breadcrumb:first-child { + padding-left: 0px; } + +.landing .more { + display: block; + margin-top: 10px; } + +.landing .contents { + margin-bottom: 20px; } + +.landing .showcase .arrow-container { + width: 60px; + position: absolute; + top: 0; + bottom: 0; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } + .landing .showcase .arrow-container.left { + left: 0; + background-image: linear-gradient(to right, #f8f8f8 , rgba(0, 0, 0, 0)); + background-image: linear-gradient(to right, var(--content-background) , rgba(0, 0, 0, 0)); } + .landing .showcase .arrow-container.left svg { + transform: translateX(-0.05rem); } + .landing .showcase .arrow-container.right { + right: 0; + background-image: linear-gradient(to left, #f8f8f8 , rgba(0, 0, 0, 0)); + background-image: linear-gradient(to left, var(--content-background) , rgba(0, 0, 0, 0)); } + .landing .showcase .arrow-container.right svg { + transform: translateX(0.05rem); } + .landing .showcase .arrow-container.hide { + opacity: 0; + pointer-events: none; } + .landing .showcase .arrow-container .arrow { + background-color: #f8f8f8; + background-color: var(--content-background); + border-radius: 100%; + width: 2.4rem; + height: 2.4rem; + font-size: 1rem; + transition: opacity 40ms ease-in-out; + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); + display: flex; + justify-content: center; + align-items: center; } + +.landing #showcase-items { + transition: transform 200ms ease-in-out; } + +.landing .showcase-item { + width: 7rem; + height: 7rem; } + @media screen and (min-width: 30em) { + .landing .showcase-item { + width: 10rem; + height: 10rem; } } + +.star-btn { + border-bottom-width: 2px; + background-color: #fff; + background-color: var(--library-star-btn-background); + border-color: #999; + border-color: var(--library-star-btn-border-color); } + .star-btn a { + border-color: #aaa; + border-color: var(--library-star-btn-a-border-color); } + .star-btn a:hover { + background-color: #fafafa; + background-color: var(--library-star-btn-a-hover-background); } + +.library-dropcap { + width: 1em; + height: 1.1em; + padding-top: 0.19em; + text-align: center; + font-size: 2rem; } + +.profile .content .description { + margin: 0px auto; + max-width: 40em; } + +.profile .content h2 { + margin-bottom: 10px; } + +.profile ul.recent-posts, .profile ul.recent-comments { + list-style-type: none; } + +.profile ul .entry { + margin-left: 20px; } + +.profile .entry .context { + font-weight: bold; + border-bottom: 0px; } + +.profile .content-block.projects { + background-image: none; + overflow-y: visible; } + +.profile .content-block.avatar, +.project .content-block.logo { + background-color: transparent; + background-image: none; + box-shadow: none; + min-height: 200px; } + +.project .content-block.screenshots, +.profile .content-block.projects { + padding: 0px; + min-height: 0em; } + +.project .notice { + color: #fff; + color: var(--project-notice-text-color); } + .project .notice a { + color: #fff; + color: var(--project-notice-text-color); + border-bottom-color: #fff; + border-bottom-color: var(--project-notice-text-color); } + +.project .pair { + display: flex; + align-items: flex-start; } + .project .pair .key { + font-weight: bold; + flex-shrink: 0; } + .project .pair .value { + text-align: right; + flex-grow: 1; } + +.project .settings-icon { + z-index: 10; + position: absolute; + width: 25px; + height: 25px; + right: 5px; + top: 5px; + margin: 0px; + text-align: center; + padding: 3px; + border-radius: 5px; + line-height: 100%; + box-sizing: border-box; } + +.project .screenshots .slideshow { + background-color: black; } + +.project .tags { + text-align: center; } + .project .tags h2 { + margin-bottom: 5px; } + .project .tags li { + display: inline-block; } + +.project .button-bar { + border: none; } + +.project .forum h3 { + margin: 0; } + +.project .forum .thread-entry-right { + display: none; } + +.notice-unapproved { + background-color: #b42222; + background-color: var(--notice-unapproved-color); } + +.notice-hidden { + background-color: #b6b6b6; + background-color: var(--notice-hidden-color); } + +.notice-hiatus { + background-color: #aa7d30; + background-color: var(--notice-hiatus-color); } + +.notice-dead { + background-color: #b42222; + background-color: var(--notice-dead-color); } + +.notice-lts { + background-color: #43a52f; + background-color: var(--notice-lts-color); } + +.notice-lts-reqd { + background-color: #aa7d30; + background-color: var(--notice-lts-reqd-color); } + +.project-carousel-container { + width: 50rem; } + .project-carousel-container .project-carousel { + box-sizing: content-box; + position: relative; + height: 12rem; } + @media screen and (min-width: 60em) { + .project-carousel-container .project-carousel { + height: 16rem; } } + .project-carousel-container .project-carousel-item { + position: absolute; + top: 0; + left: 0; } + .project-carousel-container .project-carousel-item:not(.active) { + display: none; } + .project-carousel-container .project-carousel-item br { + line-height: 0.6em; } + .project-carousel-container .project-carousel-description { + max-height: 14rem; + overflow: hidden; } + .project-carousel-container .project-carousel-fade { + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 30px; + background: linear-gradient( rgba(240, 240, 240, 0) , #f0f0f0 ); + background: linear-gradient( var(--dim-background-transparent) , var(--dim-background) ); } + .project-carousel-container .project-carousel-item-small:not(.active) { + display: none; } + .project-carousel-container .project-carousel-button { + border: 1px solid; + border-color: #999; + border-color: var(--dimmer-color); + cursor: pointer; + transition: all 100ms ease-in-out; } + .project-carousel-container .project-carousel-button:hover { + background-color: #bbb; + background-color: var(--dimmest-color); } + .project-carousel-container .project-carousel-button.active { + border-color: #666; + border-color: var(--theme-color); } + .project-carousel-container .project-carousel-button.active:hover { + background-color: #ccc; + background-color: var(--theme-color-dimmest); } + +.project-card { + color: black; + color: var(--fg-font-color); + background-color: #e8e8e8; + background-color: var(--card-background); + border-color: #aaa; + border-color: var(--project-card-border-color); + transition: box-shadow 0.2s, background-color 0.2s; } + .slideshow .project-card { + margin-top: 8px; } + .project-card:hover { + background-color: #f0f0f0; + background-color: var(--card-background-hover); } + .project-card:hover > .title { + text-decoration: underline; } + .project-card .image-container { + width: 8rem; + min-height: 8rem; } + .project-card .image-container .image { + position: absolute; + width: 8rem; + top: 0; + bottom: 0; } + .project-card .details { + /* Background color given by theme */ + transition: background-color 0.2s; } + .project-card .badges:empty { + display: none; } + .project-card .badge { + color: white; + border-radius: 5px; } + +.sidebar .projectlist { + padding: 0px; + width: 340px; } + .sidebar .projectlist .project-card.more { + height: 40px; + width: 326px; + padding-top: 5px; } + +.screenshots .slide { + max-width: 100%; } + +.slideshow { + /* Background color and color given by theme */ + position: relative; + background-image: none; + overflow: hidden; } + .slideshow .optionbar { + height: 30px; + text-align: center; } + .slideshow .buttons { + display: inline-block; + height: 100%; } + .slideshow .button { + line-height: 100%; + padding: 5px 8px; + font-weight: 400; } + .slideshow .button.current { + font-weight: 600; } + .slideshow #slide-deck { + width: 100%; + position: relative; + transition: left 0.3s; + left: 0px; + text-align: center; + display: flex; + flex-direction: horizontal; + justify-content: space-around; + align-items: center; } + .slideshow .slide { + flex: 1 1 100%; + position: relative; } + .slideshow .slide img { + margin: auto; + max-height: 60vh; + max-width: 100%; } + .slideshow.cards #slide-deck { + justify-content: flex-start; } + .slideshow.cards .slide { + flex: 0 1 auto; } + +#project_owner_suggestions { + max-height: 300px; + overflow: auto; + position: absolute; + border: 1px solid transparent; } + #project_owner_suggestions #user_template { + display: none; } + +.user_suggestions { + background-color: #fff; + background-color: var(--project-user-suggestions-background); + padding-top: 5px; + padding-bottom: 5px; } + .user_suggestions#project_owner_suggestions .user { + border-color: #ddd; + border-color: var(--project-user-suggestions-border-color); + border-bottom-width: 1px; + width: 200px; + box-sizing: border-box; + cursor: pointer; } + .user_suggestions .user { + position: relative; + margin-left: 50px; + display: inline-block; + margin-right: 10px; } + .user_suggestions .user .avatar-icon { + left: -50px; + bottom: 0px; + border-radius: 50%; + border: 2px solid transparent; } + +#project_owners { + min-width: 50%; } + +.showcase-item .gradient { + width: 100%; + height: 114px; + background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); } + +.streams-container #empty-message { + display: none; } + +.streams-container .streams:empty { + display: none; } + .streams-container .streams:empty + #empty-message { + display: block; } + +.streams-container .stream .live { + position: absolute; + left: 0.5rem; + top: 0.5rem; + color: white; + background-color: #e91916; + font-weight: bold; } + +.streams-container .stream .viewers { + position: absolute; + left: 0.5rem; + bottom: 0.5rem; + color: white; + background-color: rgba(0, 0, 0, 0.7); } + +.streams-container .stream .avatar { + padding: 1.5rem; } + +.streams-container .twitch-embed-container { + padding-bottom: 0%; + transition: padding-bottom 400ms ease-in-out; } + .streams-container .twitch-embed-container.open { + padding-bottom: 150%; } + @media screen and (min-width: 713px) { + .streams-container .twitch-embed-container.open { + padding-bottom: 40.6%; } } + +.timeline.no-forums .forums { + display: none; } + +.timeline.no-blogs .blogs { + display: none; } + +.timeline.no-wiki .wiki { + display: none; } + +.timeline.no-library .library { + display: none; } + +.timeline.no-snippets .snippets { + display: none; } + +.timeline .timeline-item { + background-color: #e8e8e8; + background-color: var(--card-background); + color: black; + color: var(--main-color); } + +.timeline-item { + /* + &:hover { + @include usevar(background-color, card-background-hover); + } + */ } + .timeline-item .avatar-icon { + border: 2px solid; + border-color: #666; + border-color: var(--theme-color); } + .timeline-item .avatar-icon.big { + width: 62px; + height: 62px; } + .timeline-item .timeline-content-box > * { + display: block; + max-width: 100%; + max-height: 80vh; } + .timeline-item .timeline-content-box.youtube { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; } + .timeline-item .timeline-content-box.youtube > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +.timeline-modal .container { + max-height: 100vh; } + @media screen and (min-width: 30em) { + .timeline-modal .container { + width: auto; + max-height: calc(100vh - 2rem); } } diff --git a/public/themes/dark/theme.css b/public/themes/dark/theme.css index bf42550d..d1815213 100644 --- a/public/themes/dark/theme.css +++ b/public/themes/dark/theme.css @@ -1 +1,369 @@ -.codeblock .hll{background-color:#49483e}.codeblock .c{color:#75715e}.codeblock .err{color:#ff0000}.codeblock .k{color:#66d9ef}.codeblock .l{color:#ae81ff}.codeblock .n{color:#f8f8f2}.codeblock .o{color:#f92672}.codeblock .p{color:#f8f8f2}.codeblock .cm{color:#75715e}.codeblock .cp{color:#75715e}.codeblock .c1{color:#75715e}.codeblock .cs{color:#75715e}.codeblock .ge{font-style:italic}.codeblock .gs{font-weight:bold}.codeblock .kc{color:#66d9ef}.codeblock .kd{color:#66d9ef}.codeblock .kn{color:#f92672}.codeblock .kp{color:#66d9ef}.codeblock .kr{color:#66d9ef}.codeblock .kt{color:#66d9ef}.codeblock .ld{color:#e6db74}.codeblock .m{color:#ae81ff}.codeblock .s{color:#e6db74}.codeblock .na{color:#a6e22e}.codeblock .nb{color:#f8f8f2}.codeblock .nc{color:#a6e22e}.codeblock .no{color:#66d9ef}.codeblock .nd{color:#a6e22e}.codeblock .ni{color:#f8f8f2}.codeblock .ne{color:#a6e22e}.codeblock .nf{color:#a6e22e}.codeblock .nl{color:#f8f8f2}.codeblock .nn{color:#f8f8f2}.codeblock .nx{color:#a6e22e}.codeblock .py{color:#f8f8f2}.codeblock .nt{color:#f92672}.codeblock .nv{color:#f8f8f2}.codeblock .ow{color:#f92672}.codeblock .w{color:#f8f8f2}.codeblock .mf{color:#ae81ff}.codeblock .mh{color:#ae81ff}.codeblock .mi{color:#ae81ff}.codeblock .mo{color:#ae81ff}.codeblock .sb{color:#e6db74}.codeblock .sc{color:#e6db74}.codeblock .sd{color:#e6db74}.codeblock .s2{color:#e6db74}.codeblock .se{color:#ae81ff}.codeblock .sh{color:#e6db74}.codeblock .si{color:#e6db74}.codeblock .sx{color:#e6db74}.codeblock .sr{color:#e6db74}.codeblock .s1{color:#e6db74}.codeblock .ss{color:#e6db74}.codeblock .bp{color:#f8f8f2}.codeblock .vc{color:#f8f8f2}.codeblock .vg{color:#f8f8f2}.codeblock .vi{color:#f8f8f2}.codeblock .il{color:#ae81ff}.codeblock .gu{color:#75715e}.codeblock .gd{color:#f92672}.codeblock .gi{color:#a6e22e}.light{background-color:#fff;color:#000}:root{--fg-font-color: #eee;--theme-color: #666;--theme-color-dim: #444;--theme-color-dimmer: #383838;--theme-color-dimmest: #333;--link-color: #aaa;--link-border-color: #aaa;--table-border-color: #aaa;--hr-color: #aaa;--main-background-color: #202020;--main-color: #eee;--dim-color: #bbb;--dimmer-color: #999;--dimmest-color: #777;--menu-bottom-border-color: #444;--login-popup-background: #181818;--content-background: #202020;--content-background-transparent: rgba(32,32,32,0);--dim-background: #252525;--dim-background-transparent: rgba(37,37,37,0);--text-background: #181818;--spoiler-border: #777;--background-even-background: #242424;--project-notice-text-color: #eee;--project-card-border-color: #333;--project-user-suggestions-background: #222;--project-user-suggestions-border-color: #444;--project-edit-logo-previw-border-color: #444;--project-edit-quota-bar-border-color: #444;--project-edit-quota-bar-filled-background: #888;--notice-unapproved-color: #7a2020;--notice-hidden-color: #494949;--notice-hiatus-color: #876327;--notice-dead-color: #7a2020;--notice-lts-color: #2a681d;--notice-lts-reqd-color: #876327;--optionbar-border-color: #333;--tab-background: #181818;--tab-border-color: #3f3f3f;--tab-button-background: #303030;--tab-button-background-hover: #383838;--tab-button-background-current: #181818;--form-check-background: #252527;--form-check-border-color: #666;--form-check-border-color-hover: #084068;--form-text-background: #181818;--form-text-background-active: #252527;--form-text-border-color: #444;--form-text-border-color-active: #084068;--form-button-color: #999;--form-button-color-active: #4c9ed9;--form-button-background: #383838;--form-button-background-active: #303840;--form-button-border-color: rgba(0,0,0,0);--form-button-inline-border-color: rgba(0,0,0,0);--landing-search-background: #282828;--landing-search-background-hover: #181818;--editor-toolbar-background: #282828;--editor-toolbar-border-color: #333;--editor-toolbar-button-background: 282828;--editor-toolbar-button-background-hover: #333;--editor-toolbar-button-border-color: #333;--post-blockquote-border-color: #555;--forum-even-background: #242424;--forum-thread-read-color: #777;--forum-thread-read-link-color: #999;--forum-post-author-color: #999;--forum-diff-source-background: #181818;--forum-diff-source-border-color: #444;--forum-diff-replace-background: #18283a;--forum-diff-replace-border-color: #223d5b;--forum-diff-delete-background: #3a1818;--forum-diff-delete-border-color: #6b1e1c;--forum-diff-insert-background: #233a18;--forum-diff-insert-border-color: #30591b;--card-background: #222;--card-background-hover: #282828;--irc-border-color: #333;--irc-tab-current-shadow: 0px 0px 5px #000 inset;--irc-tab-close-button-color: #bbb;--irc-tab-close-button-background: #444;--irc-nick-border-color: #444;--irc-users-color: #aaa;--irc-users-background: #181818;--irc-users-border-color: rgba(0,0,0,0);--irc-users-popout-background: #181818;--irc-users-popout-border-color-left: #444;--irc-users-popout-border-color-right: #333;--wiki-border-color: #444;--wiki-toc-number-color: #bbb;--code-line-number-color: #444;--library-star-btn-background: #252525;--library-star-btn-border-color: #bbb;--library-star-btn-a-border-color: #999;--library-star-btn-a-hover-background: #333} +/* +Inserts a CSS expression with one or more custom variables. +You can provide an arbitrary number of strings in the second +argument, separated by spaces. Any strings corresponding to +variable names will be replaced by the correct values, while +other strings are left untouched. + +Example usage: + +@include usevar(border-color, dimmer-color); +@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); + +For clarity and to avoid syntax issues, you are encouraged to +use unquoted strings for variables and quoted strings for +everything else. + +For convenience in common cases, if only a single argument +is provided and it does not match an existing variable, this +will throw an error. +*/ +/* bbcode [code] -- see: https://github.com/richleland/pygments-css/blob/master/monokai.css */ +.codeblock .hll { + background-color: #49483e; } + +.codeblock .c { + color: #75715e; } + +/* Comment */ +.codeblock .err { + color: #ff0000; } + +/* Error */ +.codeblock .k { + color: #66d9ef; } + +/* Keyword */ +.codeblock .l { + color: #ae81ff; } + +/* Literal */ +.codeblock .n { + color: #f8f8f2; } + +/* Name */ +.codeblock .o { + color: #f92672; } + +/* Operator */ +.codeblock .p { + color: #f8f8f2; } + +/* Punctuation */ +.codeblock .cm { + color: #75715e; } + +/* Comment.Multiline */ +.codeblock .cp { + color: #75715e; } + +/* Comment.Preproc */ +.codeblock .c1 { + color: #75715e; } + +/* Comment.Single */ +.codeblock .cs { + color: #75715e; } + +/* Comment.Special */ +.codeblock .ge { + font-style: italic; } + +/* Generic.Emph */ +.codeblock .gs { + font-weight: bold; } + +/* Generic.Strong */ +.codeblock .kc { + color: #66d9ef; } + +/* Keyword.Constant */ +.codeblock .kd { + color: #66d9ef; } + +/* Keyword.Declaration */ +.codeblock .kn { + color: #f92672; } + +/* Keyword.Namespace */ +.codeblock .kp { + color: #66d9ef; } + +/* Keyword.Pseudo */ +.codeblock .kr { + color: #66d9ef; } + +/* Keyword.Reserved */ +.codeblock .kt { + color: #66d9ef; } + +/* Keyword.Type */ +.codeblock .ld { + color: #e6db74; } + +/* Literal.Date */ +.codeblock .m { + color: #ae81ff; } + +/* Literal.Number */ +.codeblock .s { + color: #e6db74; } + +/* Literal.String */ +.codeblock .na { + color: #a6e22e; } + +/* Name.Attribute */ +.codeblock .nb { + color: #f8f8f2; } + +/* Name.Builtin */ +.codeblock .nc { + color: #a6e22e; } + +/* Name.Class */ +.codeblock .no { + color: #66d9ef; } + +/* Name.Constant */ +.codeblock .nd { + color: #a6e22e; } + +/* Name.Decorator */ +.codeblock .ni { + color: #f8f8f2; } + +/* Name.Entity */ +.codeblock .ne { + color: #a6e22e; } + +/* Name.Exception */ +.codeblock .nf { + color: #a6e22e; } + +/* Name.Function */ +.codeblock .nl { + color: #f8f8f2; } + +/* Name.Label */ +.codeblock .nn { + color: #f8f8f2; } + +/* Name.Namespace */ +.codeblock .nx { + color: #a6e22e; } + +/* Name.Other */ +.codeblock .py { + color: #f8f8f2; } + +/* Name.Property */ +.codeblock .nt { + color: #f92672; } + +/* Name.Tag */ +.codeblock .nv { + color: #f8f8f2; } + +/* Name.Variable */ +.codeblock .ow { + color: #f92672; } + +/* Operator.Word */ +.codeblock .w { + color: #f8f8f2; } + +/* Text.Whitespace */ +.codeblock .mf { + color: #ae81ff; } + +/* Literal.Number.Float */ +.codeblock .mh { + color: #ae81ff; } + +/* Literal.Number.Hex */ +.codeblock .mi { + color: #ae81ff; } + +/* Literal.Number.Integer */ +.codeblock .mo { + color: #ae81ff; } + +/* Literal.Number.Oct */ +.codeblock .sb { + color: #e6db74; } + +/* Literal.String.Backtick */ +.codeblock .sc { + color: #e6db74; } + +/* Literal.String.Char */ +.codeblock .sd { + color: #e6db74; } + +/* Literal.String.Doc */ +.codeblock .s2 { + color: #e6db74; } + +/* Literal.String.Double */ +.codeblock .se { + color: #ae81ff; } + +/* Literal.String.Escape */ +.codeblock .sh { + color: #e6db74; } + +/* Literal.String.Heredoc */ +.codeblock .si { + color: #e6db74; } + +/* Literal.String.Interpol */ +.codeblock .sx { + color: #e6db74; } + +/* Literal.String.Other */ +.codeblock .sr { + color: #e6db74; } + +/* Literal.String.Regex */ +.codeblock .s1 { + color: #e6db74; } + +/* Literal.String.Single */ +.codeblock .ss { + color: #e6db74; } + +/* Literal.String.Symbol */ +.codeblock .bp { + color: #f8f8f2; } + +/* Name.Builtin.Pseudo */ +.codeblock .vc { + color: #f8f8f2; } + +/* Name.Variable.Class */ +.codeblock .vg { + color: #f8f8f2; } + +/* Name.Variable.Global */ +.codeblock .vi { + color: #f8f8f2; } + +/* Name.Variable.Instance */ +.codeblock .il { + color: #ae81ff; } + +/* Literal.Number.Integer.Long */ +/* Generic Heading & Diff Header */ +.codeblock .gu { + color: #75715e; } + +/* Generic.Subheading & Diff Unified/Comment? */ +.codeblock .gd { + color: #f92672; } + +/* Generic.Deleted & Diff Deleted */ +.codeblock .gi { + color: #a6e22e; } + +/* Generic.Inserted & Diff Inserted */ +.light { + background-color: #fff; + color: #000; } + +:root { + --fg-font-color: #eee; + --theme-color: #666; + --theme-color-dim: #444; + --theme-color-dimmer: #383838; + --theme-color-dimmest: #333; + --link-color: #aaa; + --link-border-color: #aaa; + --table-border-color: #aaa; + --hr-color: #aaa; + --main-background-color: #202020; + --main-color: #eee; + --dim-color: #bbb; + --dimmer-color: #999; + --dimmest-color: #777; + --menu-bottom-border-color: #444; + --login-popup-background: #181818; + --content-background: #202020; + --content-background-transparent: rgba(32, 32, 32, 0); + --dim-background: #252525; + --dim-background-transparent: rgba(37, 37, 37, 0); + --text-background: #181818; + --spoiler-border: #777; + --background-even-background: #242424; + --project-notice-text-color: #eee; + --project-card-border-color: #333; + --project-user-suggestions-background: #222; + --project-user-suggestions-border-color: #444; + --project-edit-logo-previw-border-color: #444; + --project-edit-quota-bar-border-color: #444; + --project-edit-quota-bar-filled-background: #888; + --notice-unapproved-color: #7a2020; + --notice-hidden-color: #494949; + --notice-hiatus-color: #876327; + --notice-dead-color: #7a2020; + --notice-lts-color: #2a681d; + --notice-lts-reqd-color: #876327; + --optionbar-border-color: #333; + --tab-background: #181818; + --tab-border-color: #3f3f3f; + --tab-button-background: #303030; + --tab-button-background-hover: #383838; + --tab-button-background-current: #181818; + --form-check-background: #252527; + --form-check-border-color: #666; + --form-check-border-color-hover: #084068; + --form-text-background: #181818; + --form-text-background-active: #252527; + --form-text-border-color: #444; + --form-text-border-color-active: #084068; + --form-button-color: #999; + --form-button-color-active: #4c9ed9; + --form-button-background: #383838; + --form-button-background-active: #303840; + --form-button-border-color: transparent; + --form-button-inline-border-color: transparent; + --landing-search-background: #282828; + --landing-search-background-hover: #181818; + --editor-toolbar-background: #282828; + --editor-toolbar-border-color: #333; + --editor-toolbar-button-background: 282828; + --editor-toolbar-button-background-hover: #333; + --editor-toolbar-button-border-color: #333; + --post-blockquote-border-color: #555; + --forum-even-background: #242424; + --forum-thread-read-color: #777; + --forum-thread-read-link-color: #999; + --forum-post-author-color: #999; + --forum-diff-source-background: #181818; + --forum-diff-source-border-color: #444; + --forum-diff-replace-background: #18283a; + --forum-diff-replace-border-color: #223d5b; + --forum-diff-delete-background: #3a1818; + --forum-diff-delete-border-color: #6b1e1c; + --forum-diff-insert-background: #233a18; + --forum-diff-insert-border-color: #30591b; + --card-background: #222; + --card-background-hover: #282828; + --irc-border-color: #333; + --irc-tab-current-shadow: 0px 0px 5px #000 inset; + --irc-tab-close-button-color: #bbb; + --irc-tab-close-button-background: #444; + --irc-nick-border-color: #444; + --irc-users-color: #aaa; + --irc-users-background: #181818; + --irc-users-border-color: transparent; + --irc-users-popout-background: #181818; + --irc-users-popout-border-color-left: #444; + --irc-users-popout-border-color-right: #333; + --wiki-border-color: #444; + --wiki-toc-number-color: #bbb; + --code-line-number-color: #444; + --library-star-btn-background: #252525; + --library-star-btn-border-color: #bbb; + --library-star-btn-a-border-color: #999; + --library-star-btn-a-hover-background: #333; } diff --git a/public/themes/light/theme.css b/public/themes/light/theme.css index 87f651ea..bb2db0e6 100644 --- a/public/themes/light/theme.css +++ b/public/themes/light/theme.css @@ -1 +1,386 @@ -.codeblock .hll{background-color:#ffffcc}.codeblock .c{color:#60a0b0;font-style:italic}.codeblock .err{color:#FF0000}.codeblock .k{color:#007020;font-weight:bold}.codeblock .o{color:#666666}.codeblock .cm{color:#60a0b0;font-style:italic}.codeblock .cp{color:#007020}.codeblock .c1{color:#60a0b0;font-style:italic}.codeblock .cs{color:#60a0b0;background-color:#fff0f0}.codeblock .gd{color:#A00000}.codeblock .ge{font-style:italic}.codeblock .gr{color:#FF0000}.codeblock .gh{color:#000080;font-weight:bold}.codeblock .gi{color:#00A000}.codeblock .go{color:#808080}.codeblock .gp{color:#c65d09;font-weight:bold}.codeblock .gs{font-weight:bold}.codeblock .gu{color:#800080;font-weight:bold}.codeblock .gt{color:#0040D0}.codeblock .kc{color:#007020;font-weight:bold}.codeblock .kd{color:#007020;font-weight:bold}.codeblock .kn{color:#007020;font-weight:bold}.codeblock .kp{color:#007020}.codeblock .kr{color:#007020;font-weight:bold}.codeblock .kt{color:#902000}.codeblock .m{color:#40a070}.codeblock .s{color:#4070a0}.codeblock .na{color:#4070a0}.codeblock .nb{color:#007020}.codeblock .nc{color:#0e84b5;font-weight:bold}.codeblock .no{color:#60add5}.codeblock .nd{color:#555555;font-weight:bold}.codeblock .ni{color:#d55537;font-weight:bold}.codeblock .ne{color:#007020}.codeblock .nf{color:#06287e}.codeblock .nl{color:#002070;font-weight:bold}.codeblock .nn{color:#0e84b5;font-weight:bold}.codeblock .nt{color:#062873;font-weight:bold}.codeblock .nv{color:#bb60d5}.codeblock .ow{color:#007020;font-weight:bold}.codeblock .w{color:#bbbbbb}.codeblock .mf{color:#40a070}.codeblock .mh{color:#40a070}.codeblock .mi{color:#40a070}.codeblock .mo{color:#40a070}.codeblock .sb{color:#4070a0}.codeblock .sc{color:#4070a0}.codeblock .sd{color:#4070a0;font-style:italic}.codeblock .s2{color:#4070a0}.codeblock .se{color:#4070a0;font-weight:bold}.codeblock .sh{color:#4070a0}.codeblock .si{color:#70a0d0;font-style:italic}.codeblock .sx{color:#c65d09}.codeblock .sr{color:#235388}.codeblock .s1{color:#4070a0}.codeblock .ss{color:#517918}.codeblock .bp{color:#007020}.codeblock .vc{color:#bb60d5}.codeblock .vg{color:#bb60d5}.codeblock .vi{color:#bb60d5}.codeblock .il{color:#40a070}.dark{background-color:#222;color:#bbb}:root{--fg-font-color: #000;--theme-color: #666;--theme-color-dim: #aaa;--theme-color-dimmer: #bbb;--theme-color-dimmest: #ccc;--link-color: #666;--link-border-color: #666;--table-border-color: #444;--hr-color: #444;--main-background-color: #fff;--main-color: #000;--dim-color: #333;--dimmer-color: #999;--dimmest-color: #bbb;--menu-bottom-border-color: #000;--login-popup-background: #fbfbfb;--content-background: #f8f8f8;--content-background-transparent: rgba(248,248,248,0);--dim-background: #f0f0f0;--dim-background-transparent: rgba(240,240,240,0);--text-background: #f9f9f9;--spoiler-border: #aaa;--background-even-background: #f8f8f8;--project-notice-text-color: #fff;--project-card-border-color: #aaa;--project-user-suggestions-background: #fff;--project-user-suggestions-border-color: #ddd;--project-edit-logo-previw-border-color: #999;--project-edit-quota-bar-border-color: #999;--project-edit-quota-bar-filled-background: #444;--notice-unapproved-color: #b42222;--notice-hidden-color: #b6b6b6;--notice-hiatus-color: #aa7d30;--notice-dead-color: #b42222;--notice-lts-color: #43a52f;--notice-lts-reqd-color: #aa7d30;--optionbar-border-color: #ccc;--tab-background: #fff;--tab-border-color: #d8d8d8;--tab-button-background: #dfdfdf;--tab-button-background-hover: #efefef;--tab-button-background-current: #fff;--form-check-background: #fafafc;--form-check-border-color: #999;--form-check-border-color-hover: #4c9ed9;--form-text-background: #fff;--form-text-background-active: #fafafc;--form-text-border-color: #999;--form-text-border-color-active: #4c9ed9;--form-button-color: #000;--form-button-color-active: #4c9ed9;--form-button-background: #fff;--form-button-background-active: #f2f2f2;--form-button-border-color: #ccc;--form-button-inline-border-color: #999;--landing-search-background: #f8f8f8;--landing-search-background-hover: #fefeff;--editor-toolbar-background: #fff;--editor-toolbar-border-color: rgba(0,0,0,0);--editor-toolbar-button-background: rgba(0,0,0,0);--editor-toolbar-button-background-hover: #ddd;--editor-toolbar-button-border-color: #ccc;--post-blockquote-border-color: #ddd;--forum-even-background: #f0f0f0;--forum-thread-read-color: #555;--forum-thread-read-link-color: #888;--forum-post-author-color: #333;--forum-diff-source-background: #fff;--forum-diff-source-border-color: #999;--forum-diff-replace-background: #adcef4;--forum-diff-replace-border-color: #4787d1;--forum-diff-delete-background: #e57979;--forum-diff-delete-border-color: #c12626;--forum-diff-insert-background: #96e579;--forum-diff-insert-border-color: #5baa3f;--card-background: #e8e8e8;--card-background-hover: #f0f0f0;--irc-border-color: #ddd;--irc-tab-current-shadow: 0px 0px 5px #bbb inset;--irc-tab-close-button-color: #fff;--irc-tab-close-button-background: #aaa;--irc-nick-border-color: #ccc;--irc-users-color: #000;--irc-users-background: #fff;--irc-users-border-color: #ccc;--irc-users-popout-background: #fff;--irc-users-popout-border-color-left: #bbb;--irc-users-popout-border-color-right: #ccc;--wiki-border-color: #aaa;--wiki-toc-number-color: #333;--code-line-number-color: #777;--library-star-btn-background: #fff;--library-star-btn-border-color: #999;--library-star-btn-a-border-color: #aaa;--library-star-btn-a-hover-background: #fafafa} +/* +Inserts a CSS expression with one or more custom variables. +You can provide an arbitrary number of strings in the second +argument, separated by spaces. Any strings corresponding to +variable names will be replaced by the correct values, while +other strings are left untouched. + +Example usage: + +@include usevar(border-color, dimmer-color); +@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); + +For clarity and to avoid syntax issues, you are encouraged to +use unquoted strings for variables and quoted strings for +everything else. + +For convenience in common cases, if only a single argument +is provided and it does not match an existing variable, this +will throw an error. +*/ +/* bbcode [code] -- see: https://github.com/richleland/pygments-css/blob/master/friendly.css */ +.codeblock .hll { + background-color: #ffffcc; } + +.codeblock .c { + color: #60a0b0; + font-style: italic; } + +/* Comment */ +.codeblock .err { + color: #FF0000; } + +/* Error */ +.codeblock .k { + color: #007020; + font-weight: bold; } + +/* Keyword */ +.codeblock .o { + color: #666666; } + +/* Operator */ +.codeblock .cm { + color: #60a0b0; + font-style: italic; } + +/* Comment.Multiline */ +.codeblock .cp { + color: #007020; } + +/* Comment.Preproc */ +.codeblock .c1 { + color: #60a0b0; + font-style: italic; } + +/* Comment.Single */ +.codeblock .cs { + color: #60a0b0; + background-color: #fff0f0; } + +/* Comment.Special */ +.codeblock .gd { + color: #A00000; } + +/* Generic.Deleted */ +.codeblock .ge { + font-style: italic; } + +/* Generic.Emph */ +.codeblock .gr { + color: #FF0000; } + +/* Generic.Error */ +.codeblock .gh { + color: #000080; + font-weight: bold; } + +/* Generic.Heading */ +.codeblock .gi { + color: #00A000; } + +/* Generic.Inserted */ +.codeblock .go { + color: #808080; } + +/* Generic.Output */ +.codeblock .gp { + color: #c65d09; + font-weight: bold; } + +/* Generic.Prompt */ +.codeblock .gs { + font-weight: bold; } + +/* Generic.Strong */ +.codeblock .gu { + color: #800080; + font-weight: bold; } + +/* Generic.Subheading */ +.codeblock .gt { + color: #0040D0; } + +/* Generic.Traceback */ +.codeblock .kc { + color: #007020; + font-weight: bold; } + +/* Keyword.Constant */ +.codeblock .kd { + color: #007020; + font-weight: bold; } + +/* Keyword.Declaration */ +.codeblock .kn { + color: #007020; + font-weight: bold; } + +/* Keyword.Namespace */ +.codeblock .kp { + color: #007020; } + +/* Keyword.Pseudo */ +.codeblock .kr { + color: #007020; + font-weight: bold; } + +/* Keyword.Reserved */ +.codeblock .kt { + color: #902000; } + +/* Keyword.Type */ +.codeblock .m { + color: #40a070; } + +/* Literal.Number */ +.codeblock .s { + color: #4070a0; } + +/* Literal.String */ +.codeblock .na { + color: #4070a0; } + +/* Name.Attribute */ +.codeblock .nb { + color: #007020; } + +/* Name.Builtin */ +.codeblock .nc { + color: #0e84b5; + font-weight: bold; } + +/* Name.Class */ +.codeblock .no { + color: #60add5; } + +/* Name.Constant */ +.codeblock .nd { + color: #555555; + font-weight: bold; } + +/* Name.Decorator */ +.codeblock .ni { + color: #d55537; + font-weight: bold; } + +/* Name.Entity */ +.codeblock .ne { + color: #007020; } + +/* Name.Exception */ +.codeblock .nf { + color: #06287e; } + +/* Name.Function */ +.codeblock .nl { + color: #002070; + font-weight: bold; } + +/* Name.Label */ +.codeblock .nn { + color: #0e84b5; + font-weight: bold; } + +/* Name.Namespace */ +.codeblock .nt { + color: #062873; + font-weight: bold; } + +/* Name.Tag */ +.codeblock .nv { + color: #bb60d5; } + +/* Name.Variable */ +.codeblock .ow { + color: #007020; + font-weight: bold; } + +/* Operator.Word */ +.codeblock .w { + color: #bbbbbb; } + +/* Text.Whitespace */ +.codeblock .mf { + color: #40a070; } + +/* Literal.Number.Float */ +.codeblock .mh { + color: #40a070; } + +/* Literal.Number.Hex */ +.codeblock .mi { + color: #40a070; } + +/* Literal.Number.Integer */ +.codeblock .mo { + color: #40a070; } + +/* Literal.Number.Oct */ +.codeblock .sb { + color: #4070a0; } + +/* Literal.String.Backtick */ +.codeblock .sc { + color: #4070a0; } + +/* Literal.String.Char */ +.codeblock .sd { + color: #4070a0; + font-style: italic; } + +/* Literal.String.Doc */ +.codeblock .s2 { + color: #4070a0; } + +/* Literal.String.Double */ +.codeblock .se { + color: #4070a0; + font-weight: bold; } + +/* Literal.String.Escape */ +.codeblock .sh { + color: #4070a0; } + +/* Literal.String.Heredoc */ +.codeblock .si { + color: #70a0d0; + font-style: italic; } + +/* Literal.String.Interpol */ +.codeblock .sx { + color: #c65d09; } + +/* Literal.String.Other */ +.codeblock .sr { + color: #235388; } + +/* Literal.String.Regex */ +.codeblock .s1 { + color: #4070a0; } + +/* Literal.String.Single */ +.codeblock .ss { + color: #517918; } + +/* Literal.String.Symbol */ +.codeblock .bp { + color: #007020; } + +/* Name.Builtin.Pseudo */ +.codeblock .vc { + color: #bb60d5; } + +/* Name.Variable.Class */ +.codeblock .vg { + color: #bb60d5; } + +/* Name.Variable.Global */ +.codeblock .vi { + color: #bb60d5; } + +/* Name.Variable.Instance */ +.codeblock .il { + color: #40a070; } + +/* Literal.Number.Integer.Long */ +.dark { + background-color: #222; + color: #bbb; } + +:root { + --fg-font-color: black; + --theme-color: #666; + --theme-color-dim: #aaa; + --theme-color-dimmer: #bbb; + --theme-color-dimmest: #ccc; + --link-color: #666; + --link-border-color: #666; + --table-border-color: #444; + --hr-color: #444; + --main-background-color: #fff; + --main-color: black; + --dim-color: #333; + --dimmer-color: #999; + --dimmest-color: #bbb; + --menu-bottom-border-color: black; + --login-popup-background: #fbfbfb; + --content-background: #f8f8f8; + --content-background-transparent: rgba(248, 248, 248, 0); + --dim-background: #f0f0f0; + --dim-background-transparent: rgba(240, 240, 240, 0); + --text-background: #f9f9f9; + --spoiler-border: #aaa; + --background-even-background: #f8f8f8; + --project-notice-text-color: #fff; + --project-card-border-color: #aaa; + --project-user-suggestions-background: #fff; + --project-user-suggestions-border-color: #ddd; + --project-edit-logo-previw-border-color: #999; + --project-edit-quota-bar-border-color: #999; + --project-edit-quota-bar-filled-background: #444; + --notice-unapproved-color: #b42222; + --notice-hidden-color: #b6b6b6; + --notice-hiatus-color: #aa7d30; + --notice-dead-color: #b42222; + --notice-lts-color: #43a52f; + --notice-lts-reqd-color: #aa7d30; + --optionbar-border-color: #ccc; + --tab-background: #fff; + --tab-border-color: #d8d8d8; + --tab-button-background: #dfdfdf; + --tab-button-background-hover: #efefef; + --tab-button-background-current: #fff; + --form-check-background: #fafafc; + --form-check-border-color: #999; + --form-check-border-color-hover: #4c9ed9; + --form-text-background: #fff; + --form-text-background-active: #fafafc; + --form-text-border-color: #999; + --form-text-border-color-active: #4c9ed9; + --form-button-color: black; + --form-button-color-active: #4c9ed9; + --form-button-background: #fff; + --form-button-background-active: #f2f2f2; + --form-button-border-color: #ccc; + --form-button-inline-border-color: #999; + --landing-search-background: #f8f8f8; + --landing-search-background-hover: #fefeff; + --editor-toolbar-background: #fff; + --editor-toolbar-border-color: transparent; + --editor-toolbar-button-background: transparent; + --editor-toolbar-button-background-hover: #ddd; + --editor-toolbar-button-border-color: #ccc; + --post-blockquote-border-color: #ddd; + --forum-even-background: #f0f0f0; + --forum-thread-read-color: #555; + --forum-thread-read-link-color: #888; + --forum-post-author-color: #333; + --forum-diff-source-background: #fff; + --forum-diff-source-border-color: #999; + --forum-diff-replace-background: #adcef4; + --forum-diff-replace-border-color: #4787d1; + --forum-diff-delete-background: #e57979; + --forum-diff-delete-border-color: #c12626; + --forum-diff-insert-background: #96e579; + --forum-diff-insert-border-color: #5baa3f; + --card-background: #e8e8e8; + --card-background-hover: #f0f0f0; + --irc-border-color: #ddd; + --irc-tab-current-shadow: 0px 0px 5px #bbb inset; + --irc-tab-close-button-color: #fff; + --irc-tab-close-button-background: #aaa; + --irc-nick-border-color: #ccc; + --irc-users-color: black; + --irc-users-background: #fff; + --irc-users-border-color: #ccc; + --irc-users-popout-background: #fff; + --irc-users-popout-border-color-left: #bbb; + --irc-users-popout-border-color-right: #ccc; + --wiki-border-color: #aaa; + --wiki-toc-number-color: #333; + --code-line-number-color: #777; + --library-star-btn-background: #fff; + --library-star-btn-border-color: #999; + --library-star-btn-a-border-color: #aaa; + --library-star-btn-a-hover-background: #fafafa; } diff --git a/src/color/color.go b/src/ansicolor/ansicolor.go similarity index 100% rename from src/color/color.go rename to src/ansicolor/ansicolor.go diff --git a/src/buildscss/buildscss.go b/src/buildscss/buildscss.go index 3ee4d862..884354ce 100644 --- a/src/buildscss/buildscss.go +++ b/src/buildscss/buildscss.go @@ -1,11 +1,13 @@ package buildscss import ( + "context" + "encoding/base64" "fmt" "os" "path/filepath" - "git.handmade.network/hmn/hmn/src/color" + color "git.handmade.network/hmn/hmn/src/ansicolor" "git.handmade.network/hmn/hmn/src/oops" "git.handmade.network/hmn/hmn/src/website" "github.com/spf13/cobra" @@ -15,6 +17,22 @@ import ( var compressed bool func init() { + libsass.RegisterSassFunc("base64($filename)", func(ctx context.Context, in libsass.SassValue) (*libsass.SassValue, error) { + var filename string + err := libsass.Unmarshal(in, &filename) + if err != nil { + return nil, err + } + + fileBytes, err := os.ReadFile(filename) + if err != nil { + return nil, err + } + + encoded, _ := libsass.Marshal(base64.StdEncoding.EncodeToString(fileBytes)) + return &encoded, nil + }) + buildCommand := &cobra.Command{ Use: "buildscss", Short: "Build the website CSS", diff --git a/src/logging/logging.go b/src/logging/logging.go index 7a5a1a0c..7a4f6927 100644 --- a/src/logging/logging.go +++ b/src/logging/logging.go @@ -7,7 +7,7 @@ import ( "strconv" "strings" - "git.handmade.network/hmn/hmn/src/color" + color "git.handmade.network/hmn/hmn/src/ansicolor" "git.handmade.network/hmn/hmn/src/oops" "github.com/rs/zerolog" "github.com/rs/zerolog/log" @@ -38,6 +38,14 @@ func Error() *zerolog.Event { return log.Error().Timestamp().Stack() } +func Panic() *zerolog.Event { + return log.Panic().Timestamp().Stack() +} + +func Fatal() *zerolog.Event { + return log.Fatal().Timestamp().Stack() +} + type PrettyZerologWriter struct { wd string } diff --git a/src/rawdata/bgdark.png b/src/rawdata/bgdark.png new file mode 100644 index 0000000000000000000000000000000000000000..52fe9688eeeed483b47e5553650587297d12e39c GIT binary patch literal 2129 zcmai0e^^uX8b26Wo05_whI%_56sNS`4|sRjBw)L2u;Dg9ekC}zv+XeUgPj9xGp~qg z$&f^b1(@hE6${}iJ>DP!o_ZeaNk9=SvM>lFucBlq1eKjLNHeYb$NBMnKcDyWec$){ zzUMi+<#EwI)Bq{~06r42P)R(+#2Mj zOb8eeTm{;U*(MCO2_TOyOuUn3CIosYxIq9V%j95`*@}Q6j1UG3T2BS}R*e=`3ja0h zOsoWu9>*;(lbN5N&&cO8%vK$f&ExTyEDn>yp%V-`W;fv~8{LEjk`gl-LIhJ=Q45Zm zO(3bM$~5QV0tg~-a8?|#p%2te*lhYlA($k>WHVUIKhkkj`xkT)d4x_>;eO~3iQ80` z$B|{Szo#3G4@HCFqC6s>+1fmI11!OAL6}MeGv`{>h$s&+;enon$n;=2YD2Pj`r92iQ$_mTO8dPf+s&ItRVsY4X7MIRuCvey>hYPbq=&VqfH6!F<6HTX4 z;i~_~CtC;P6CN@dEJiWhY_)q#GyN2g)Q6^YOhM<9SAv|5y?gB_IX&A1t4GuAQK4?E=R5kl;*Q)A8s#w0uY_sICn zM`GuD2!9v_!f(b#j2JPi%=^PiEbfmxVj^bTN(}RlP3q$S;I$o%ijrf>=txi^iV9`( zLPO~s1{(lqrMaaov5^YD_V6r~OSLyDYKJf+#kIYs`;hC&-pzA=NgW@4gnc*Wj6)>H!c+K>s>k*toqzg zYB?X)QvZGK$Ahh_uC^_T$8#Nd{FrZkxKq$koWE6DJ2mp_a(XajlUG{V*l~B3eSk7h zv*)9%+b8RzCG8tu?b^Au@@4sCf6sS|TPhBmnrzq511Q^@WnWgE7_j*Sqx9exna9Ga zQj*qAurmf@hOTN?C;a+HujB- z`?{-cC$6jC1~gmyn}43?8>ef@Fh(pPzRDDfI0XZMXFeq_ukzq$mIA;Wr9>E!U^_5c z)n@txoWHAV+0oGh7aN-IUCuG}#%?*jIPq|S*V21;$7)l5{Cr9KuDbrlThm)>8oJ)7 z8+J6U4Byh7k~YV+=+4p8!ymT}%zrcPX;tso>Z%BRQ$XbRos+5C-18lK#_r^;5b=k- zU+Xkny)pgoW144=g)0g=7o1^~#EvX;T>?Lt!n|n{mX5*y;?{^7in1;|x*%pjynp+< z@l%7*tow_>iw(3$m)cH1Yr1SEQ%+8p$8eZ%0;zW#9-qY9r3mb8LE9dM!MJoyq z#4lCfx-$JrM>l+W?sItK<%WrkS44hm+Wr$4B=Z&RG0fvDdVfmlDq*_AIU zge%I%go-L@XFvjrD^xh8d5c7*!qv6$u|Z8IDf&Jyk>3T$p|uL(b-7%4fl3+bu7Qg7 zi@`VJxQd1`$8lfLxG2I`G_<(ma2cPL)#2^Frs19qGapTMMSR8Gu7?!`4I??{@e<(h zIRabe6ngXZTtGzX+K}w_mrr%qBVW_%?e49Pyt>4W}&F2LgIhM z{#mEtAT6d#S{YOns0|{`Uu0i8R2Y8qbtwNm|9f>Kr5a_X)_S(sJ#27(S?u=btOy+O@aYg5-lbX2uVzkQ&bGeCM=MHWCKa8qo|b{ zupVGFL=h;Stqc`w)vB}}Lv2BYf~_+a2T%s|zcmJ9v+G;4CSM#Rj8+`0(y?lQv==%(P=Tqs2>1$jCH3bN^JIs=;H4RQ=h6%x;%KjKWR zxKJjJ>k$~v&(EjlhthQhHO!2Nh=3U^n8l(I44ToR#pPz2);P^2F|5HyjS2&%$1$B2 zbZN>nbS9h&K?Dwth@)ogg}T-_l0H!g*oDAMIs^VY9miDvLU$pr(1|KM5B()^vt0i= zvRM4zbdBbvXpFcZkH}}FHm}{lm|)SPa6D?%nG6b4kcVpVY3_tv=^;|gjOL{9F%7CU z5=G)d;jDjvsjq^rOp#cPT#Y7UN<8zq(+j%@)vEsqxI)M=xsD=HixEK&Z{+q#d4X}E zh%llFTnFTaQeO)ZWktj~C8o0QAv3Nf2sFs*<12N2Ovfv8<7*&Arcv540^gJ+DzzbtW zgoV*qbS3~$H=8!s$IX-ZH_XkFm&!Nscx(9V)Y5|1mWt9bZOc5LEb6Z#Y z!`@?LarNsSjmz>WTT?+@ojItEGWoWDYK@R9Rr5G{nXWK>$o-F;PAmJU+K z{tYLx?$^{t$2KIbz4+0Jvc=ND_SUYq>+L%Z4K^rgfuw?y;$IvGI?O&H7%gNbyf@O3 znml8GncgY9-mRkKtv6MTpDOZ$ONz|13VD-@g=oD){uLYiIPF(bJt zJ#ux&g65*cgF}8-)AYGZ+B%o(kNE^G$PyK8r4(-G+Sd+*W-eLvFfDWGA#2hVXCJxB zaX&GW>N9CW|PhBf6EMcPO(@u!y5^2r~GPLCI8SP|LM z?;8CCG}aZd|1nbeVF}INb3C{L9qTXSPcJyYCm-ZRkp&^|ZHn7#qb`C979&mk=F@j7 z=leHL7$flCoHnaaa=&69d;G_HN}9mmPuMdyzS&Yv;{Rmvh*>^mtk~)8_k##5yAS}D z+CP}JGn)K#ce?m}q|P&7rah?cTs_SqZ7n19v~`r*ae+VOP`i(;w9Jm@I=1zk=w4sd z*I12J&CXD@5N2zW%4f!4*C$lN*VcQ_tW#oxDXQSYM(UzdM?P+%TBnv|JcwGl4;U)0 z3TK_4^V!V}BAeSx>?QheezTz{{nJsQwxsjbaaGjHu60!5t)oYq;%;xBZfimItnc&+ d3g^p&&bL?ruz~9Yq^`e!Sb>CJGjG}IKLJnbEIt4L literal 0 HcmV?d00001 diff --git a/src/rawdata/scss/_showcase.scss b/src/rawdata/scss/_showcase.scss index 1ff1e650..dedef966 100644 --- a/src/rawdata/scss/_showcase.scss +++ b/src/rawdata/scss/_showcase.scss @@ -2,6 +2,6 @@ .gradient { width: 100%; height: 114px; - background-image: linear-gradient(rgba(0, 0, 0, 0.82), #0000); + background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)); } } diff --git a/src/templates/src/include/footer.html b/src/templates/src/include/footer.html new file mode 100644 index 00000000..cebc1028 --- /dev/null +++ b/src/templates/src/include/footer.html @@ -0,0 +1 @@ +I'm a footer~! \ No newline at end of file diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html new file mode 100644 index 00000000..7e685d8d --- /dev/null +++ b/src/templates/src/include/header.html @@ -0,0 +1 @@ +I'm a header! \ No newline at end of file diff --git a/src/templates/src/index.html b/src/templates/src/index.html new file mode 100644 index 00000000..abddc79f --- /dev/null +++ b/src/templates/src/index.html @@ -0,0 +1,5 @@ +{{ template "base.html" . }} + +{{ define "content" }} + This is the index page. +{{ end }} diff --git a/src/templates/src/layouts/base.html b/src/templates/src/layouts/base.html new file mode 100644 index 00000000..cbd07daa --- /dev/null +++ b/src/templates/src/layouts/base.html @@ -0,0 +1,73 @@ + + + + + + {{ if .CanonicalLink }}{{ end }} + {{ range .OpenGraphItems }} + {{ if .Property }} + + {{ else }} + + {{ end }} + {{ end }} + {{ if .Title }} + {{ .Title }} | Handmade Network + {{ else }} + Handmade Network + {{ end }} + + + + {{/* TODO: These are the base64 encodings of bglight.png and bgdark.png. Rather than manually putting the encoding here, it would be nice to automatically calculate it when the server starts up and pass it in. */}} + {{ $bglight := "iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAEGGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjcyIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNzIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iNzIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjcyIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni4wIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni4wIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjcuMSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMS0wMy0xMVQyMToyMjozMC0wNjowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+NRFFrAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG/S0JRFMc/amGUYZBDQ4NENVmUgdTSoJQF1WAG/Vr05Y9A7fGeEdIatAoFUUu/hvoLag2ag6AogmgLmotaSl7n+QQl8l7OOZ/7vfcc7j0X7NGMktUbBiCby2uRcNA7v7Dodb7iwCXmwRNTdHV6djxK3fH1gM2Md31mrfrn/h0tKwldAVuT8KiiannhCeGpjbxq8q6wR0nHVoTPhX2aXFD43tTjFr+ZnLL4x2QtGgmBvU3Ym6rheA0raS0rLC+nO5tZVyr3MV/iSuTmZiV2iXWiEyFMEC+TjBEiwCAj4gP04adfVtTJHyjnz7AmuYp4lQIaq6RIk8cn6rpUT0hMip6QmaFg9v9vX/XkkN+q7gpC44thfPSAcwdKRcP4PjaM0gk4nuEqV81fO4LhT9GLVa37ENxbcHFd1eJ7cLkNHU9qTIuVJYeYPZmE9zNoXYD2W2hesnpW2ef0EaKb8lU3sH8AvXLevfwLEU5nv19tQRgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJOSURBVHic7ZtRksMgCIaTPOcI3v9MPYBHyHv2obOZTlIVFeSHyltnm38QCehXdo0xnkulHcex7Pue/OxJZ20JUE7Um86W+wKHM1w6IYRVw59sBqHtagihO+Nr/Xlk0GeE930nRTzlBIfOZ+bEGE9KJnH68wjQ/eHWxXHp3IPSGqRWf64A5R6uWRyXTi4oNUHq9ecKUOlh6uK4dEpBoQap159H0UM7m9wLc2uhbvVn1qCCJXdjtvi3JQ+K1AiXdpOqU/oONXNKOrX+dO2K1q6O1Nl6DnD34tnrzP9nJJ3NYmcZqfP1oJizUnBqDnC5RdUcTCV1tm9/TBklOJRMoiyK4s8InfX1ep3zNUvrzBpU0Olu095bfRdRpATHOpk0RRQ1ri3wRFGbTMLf5rWpACxRRCGTsEQRhUzCE0VtMjlrUMHMEEUtMtlNFLkJnrROLZnsuiagZQcUUUQngapEEa1DQRFFKySQS6eKKFoigVw6zUTRwuuhRhTRFwVFFJFbNIdO8qCoNROIppPNIO+8mWKPDNKeCUTTeQRIex4HTecKEMpMIJrOFSCUmUA0nUcR/qVfTSk6swYVLJkds8W/LXlQ1JoJ7NXhnpl0RRQlst4NUZSamXRxm5fsvOaJovTMpGmiOGJm0g1RlHrNZg0q+OOOKHK3evH/eh5JJiVmJofMKFq+tojNKHohk2LzQV6oAPuMojcyyT6j6I1Mis0oeiGTswYVTHxG0XKLX5YBM4pWyaRLoiih44YoSum4uM1L6pgnitI6poniCB03RFFK5w8yFS9yPecAUAAAAABJRU5ErkJggg==" }} + {{ $bgdark := "iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAEGGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjcyIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNzIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iNzIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjcyIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni4wIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni4wIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjcuMSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMS0wMy0xMVQyMToyMzoxNS0wNjowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+87tjqAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG/S0JRFMc/amGUYZBDQ4NENVmUgdTSoJQF1WAG/Vr05Y9A7fGeEdIatAoFUUu/hvoLag2ag6AogmgLmotaSl7n+QQl8l7OOZ/7vfcc7j0X7NGMktUbBiCby2uRcNA7v7Dodb7iwCXmwRNTdHV6djxK3fH1gM2Md31mrfrn/h0tKwldAVuT8KiiannhCeGpjbxq8q6wR0nHVoTPhX2aXFD43tTjFr+ZnLL4x2QtGgmBvU3Ym6rheA0raS0rLC+nO5tZVyr3MV/iSuTmZiV2iXWiEyFMEC+TjBEiwCAj4gP04adfVtTJHyjnz7AmuYp4lQIaq6RIk8cn6rpUT0hMip6QmaFg9v9vX/XkkN+q7gpC44thfPSAcwdKRcP4PjaM0gk4nuEqV81fO4LhT9GLVa37ENxbcHFd1eJ7cLkNHU9qTIuVJYeYPZmE9zNoXYD2W2hesnpW2ef0EaKb8lU3sH8AvXLevfwLEU5nv19tQRgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJSSURBVHic7ZvBbsMgDIaTHKbtnNO0vf/bcW7VS3uoFlWhgAEb//bwrVrzyxjHhq/euu/7fam0z4+v5Xq7JD970llbApQT9aaz5b7A4QyXTghh1fAnm0FouxpC6M74Wn+iDHqN8PV2IUU85QSHzmvm7Pt+p2QSpz9RgM4Pty6OS+cclNYgtfpzBCj3cM3iuHRyQakJUq8/R4BKD1MXx6VTCgo1SL3+REUP7WxyLsythbrVn1mDCpbcjdnin5Y8KFIjXNpNqk7pO9TMKenU+tO1K1q7OlJn6znAnYtnrzN/n5F0NoudZaTO24NizkrBqTnA5RZVczCV1Nne/TFllOBQMomyKIo/I3TWn+/f+3zN0jqzBhV0utu091bfRRQpwbFOJk0RRY1rCzxR1CaT8Ld5bSoASxRRyCQsUUQhk/BEUZtMzhpUMDNEUYtMdhNFboInrVNLJruuCWjZAUUU0UmgKlFE61BQRNEKCeTSqSKKlkggl04zUbTweqgRRfRFQRFF5BbNoZM8KGrNBKLpZDPIO2+mWJRB2jOBaDpRgLTncdB0jgChzASi6RwBQpkJRNOJivB/+tWUojNrUMGS2TFb/NOSB0WtmcBeHe6ZSVdEUSLr3RBFqZlJF7d5yc5rnihKz0yaJoojZibdEEWp12zWoII/7ogid6sX/6/nkWRSYmZyyIyi5WuL2IyiFzIpNh/khQqwzyh6I5PsM4reyKTYjKIXMjlrUMHEZxQtt/hlGTCjaJVMuiSKEjpuiKKUjovbvKSOeaIorWOaKI7QcUMUpXQe+31Pc6xeN0AAAAAASUVORK5CYII=" }} + + {{ block "extrahead" . }}{{ end }} + + + + + + + + + + + + + + + + + + + + + + +
+ {{ template "header.html" }} + based + {{ template "footer.html" }} +
+ + + diff --git a/src/templates/src/layouts/staticpage.html b/src/templates/src/layouts/staticpage.html new file mode 100644 index 00000000..e503afa1 --- /dev/null +++ b/src/templates/src/layouts/staticpage.html @@ -0,0 +1,13 @@ + + + + + {{ block "title" . }}Handmade Network{{ end }} + + + + {{ block "content" . }}{{ end }} + {{ template "footer.html" . }} + + + diff --git a/src/templates/src/project.css b/src/templates/src/project.css new file mode 100644 index 00000000..ce071e73 --- /dev/null +++ b/src/templates/src/project.css @@ -0,0 +1,128 @@ +{{ $themeDim := eq .Theme "dark" | ternary (darken .Color 0.5) (brighten .Color 0.2) }} +{{ $themeDimmer := eq .Theme "dark" | ternary (darken .Color 0.65) (brighten .Color 0.4) }} +{{ $themeDimmest := eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.6) }} + +{{ $linkColor := eq .Theme "dark" | ternary (brighten .Color 0.1) (darken .Color 0.2) }} +{{ $linkHoverColor := eq .Theme "dark" | ternary (brighten .Color 0.2) (darken .Color 0.1) }} + +:root { + --theme-color: #{{ .Color }}; + --theme-color-dim: #{{ $themeDim }}; + --theme-color-dimmer: #{{ $themeDimmer }}; + --theme-color-dimmest: #{{ $themeDimmest }}; + + --link-color: #{{ $linkColor }}; + --link-color-hover: #{{ $linkHoverColor }}; +} + +.accent { + background-color: #{{ $themeDim }}; + background-color: var(--theme-dim); +} +.user-bar { + border-bottom-color: #{{ $themeDim }}; + border-bottom-color: var(--theme-dim); +} +header .content-title .subtitle { + border-top-color: #{{ $themeDim }}; + border-top-color: var(--theme-dim); +} + +a, .thread:before, button, .button, input[type=button], input[type=submit] { + color: #{{ $linkColor }}; + color: var(--link-color); +} +a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover { + color: #{{ $linkHoverColor }}; + color: var(--link-hover-color); +} +.unread .avatar-icon { + border: 2px solid #{{ $linkColor }}; + border: 2px solid var(--link-color); +} + +/* +TODO: Manually apply sensible tachyons classes to the elements styled below, then delete +all of this CSS. +*/ + +/* {% if theme == "dark" %} + #search_form_input_homepage { color: #{% rgb_accent accent 0.65 %}; } + #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.65 %}; } + #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; } + #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; } + #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.65 %}; } +{% else %} + #search_form_input_homepage { color: #{% rgb_accent accent 0.25 %}; } + #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.25 %}; } + #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; } + #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; } + #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.25 %}; } +{% endif %} */ + +/* {% if theme == "dark" %} + header .menu-bar .logo { background-color: #{% rgb_accent accent 0.23 %}; } + header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.27 %}; } + header { border-bottom-color:#{% rgb_accent accent 0.33 %}; } + .post .action.button { border-bottom-color:#{% rgb_accent accent 0.33 %}; } + :root { + --input-lite-border: #{% rgb_accent accent 0.33 %}; + } + + header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.23 %}; } + header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.21 %}; } + + .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.14 False 0.03%}; } + .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.14 False 0.03 %}; } +{% else %} + header .menu-bar .logo { background-color: #{% rgb_accent accent 0.25 True %}; } + header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.28 True %}; } + header { border-bottom-color:#{% rgb_accent accent 0.18 %}; } + .post .action.button { border-bottom-color:#{% rgb_accent accent 0.25 True %}; } + :root { + --input-lite-border: #{% rgb_accent accent 0.25 True %}; + } + + header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.20 %}; } + header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.16 %}; } + + .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; } + .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; } +{% endif %} */ + +:root { + --background-even-background: #{{ eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.9) }}; +} + +/* Assets */ + +header .menu-bar .hmdev-logo { + background-image:url("{{ static "logo_nounder.svg" }}"); +} +header .menu-bar .hmdev-logo .underscore { + background-image:url("{{ static "logo_underscore.svg" }}"); +} + +header .menu-bar .hmdev-logo.project { + background-image:url("{{ static "logo_net.svg" }}"); +} + +.links .thing#projects { + background-image:url("{{ statictheme .Theme "project_thing.svg" }}"); +} + +.links .thing#discussion { + background-image:url("{{ statictheme .Theme "discuss_thing.svg" }}"); +} + +.links .thing#blogs { + background-image:url("{{ statictheme .Theme "blog_thing.svg" }}"); +} + +.half.light { + background-image:url("{{ statictheme "light" "accent_top_a.svg" }}"); +} + +.half.dark { + background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}"); +} diff --git a/src/templates/templates.go b/src/templates/templates.go new file mode 100644 index 00000000..b3bdd819 --- /dev/null +++ b/src/templates/templates.go @@ -0,0 +1,104 @@ +package templates + +import ( + "embed" + "fmt" + "html/template" + "strings" + "time" + + "git.handmade.network/hmn/hmn/src/logging" + "github.com/Masterminds/sprig" + "github.com/teacat/noire" +) + +//go:embed src +var templateFs embed.FS +var Templates map[string]*template.Template + +var cachebust string + +func Init() { + cachebust = fmt.Sprint(time.Now().Unix()) + + Templates = make(map[string]*template.Template) + + files, _ := templateFs.ReadDir("src") + for _, f := range files { + if strings.HasSuffix(f.Name(), ".html") { + t := template.New(f.Name()) + t = t.Funcs(sprig.FuncMap()) + t = t.Funcs(HMNTemplateFuncs) + t, err := t.ParseFS(templateFs, "src/layouts/*.html", "src/include/*.html", "src/"+f.Name()) + if err != nil { + logging.Fatal().Str("filename", f.Name()).Err(err).Msg("failed to parse template") + } + + Templates[f.Name()] = t + } else if strings.HasSuffix(f.Name(), ".css") { + t := template.New(f.Name()) + t = t.Funcs(sprig.FuncMap()) + t = t.Funcs(HMNTemplateFuncs) + t, err := t.ParseFS(templateFs, "src/"+f.Name()) + if err != nil { + logging.Fatal().Str("filename", f.Name()).Err(err).Msg("failed to parse template") + } + + Templates[f.Name()] = t + } + } + + for name, t := range Templates { + fmt.Printf("%s: %v\n", name, names(t.Templates())) + } +} + +func names(ts []*template.Template) []string { + result := make([]string, len(ts)) + for i, t := range ts { + result[i] = t.Name() + } + return result +} + +var HMNTemplateFuncs = template.FuncMap{ + "brighten": func(hexColor string, amount float64) (string, error) { + if len(hexColor) < 6 { + return "", fmt.Errorf("couldn't brighten invalid hex color: %v", hexColor) + } + return noire.NewHex(hexColor).Tint(amount).Hex(), nil + }, + "cachebust": func() string { + return cachebust + }, + "darken": func(hexColor string, amount float64) (string, error) { + if len(hexColor) < 6 { + return "", fmt.Errorf("couldn't darken invalid hex color: %v", hexColor) + } + return noire.NewHex(hexColor).Shade(amount).Hex(), nil + }, + // TODO: Actually put paths in here, duh + "static": func(filepath string) string { + return fmt.Sprintf("A static file at %v, busted with %v", filepath, cachebust) + }, + "staticnobust": func(filepath string) string { + return fmt.Sprintf("A static file at %v", filepath) + }, + "statictheme": func(theme string, filepath string) string { + return fmt.Sprintf("A static file for the current theme at %v, busted with %v", filepath, cachebust) + }, + "staticthemenobust": func(theme string, filepath string) string { + return fmt.Sprintf("A static file for the current theme at %v", filepath) + }, + "url": func(url string) string { + return "/" + url + }, +} + +type ErrInvalidHexColor struct { + color string +} + +func (e ErrInvalidHexColor) Error() string { + return fmt.Sprintf("invalid hex color: %s", e.color) +} diff --git a/src/templates/types.go b/src/templates/types.go new file mode 100644 index 00000000..4a5144b9 --- /dev/null +++ b/src/templates/types.go @@ -0,0 +1,22 @@ +package templates + +type BaseData struct { + Title string + CanonicalLink string + OpenGraphItems []OpenGraphItem + BackgroundImage BackgroundImage + ProjectColor string + Theme string + BodyClasses []string +} + +type OpenGraphItem struct { + Property string + Name string + Value string +} + +type BackgroundImage struct { + Url string + Size string // A valid CSS background-size value +} diff --git a/src/website/routes.go b/src/website/routes.go new file mode 100644 index 00000000..5faab949 --- /dev/null +++ b/src/website/routes.go @@ -0,0 +1,88 @@ +package website + +import ( + "context" + _ "embed" + "fmt" + "net/http" + + "git.handmade.network/hmn/hmn/src/logging" + "git.handmade.network/hmn/hmn/src/templates" + _ "git.handmade.network/hmn/hmn/src/templates" + "github.com/jackc/pgx/v4/pgxpool" + "github.com/julienschmidt/httprouter" +) + +type websiteRoutes struct { + *httprouter.Router + + conn *pgxpool.Pool +} + +func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler { + routes := &websiteRoutes{ + Router: httprouter.New(), + conn: conn, + } + + routes.GET("/", routes.Index) + routes.GET("/project/:id", routes.Project) + routes.GET("/assets/project.css", routes.ProjectCSS) + + return routes +} + +/* +TODO: Make a custom context thing so that routes won't directly use a response writer. + +This should store up a body, desired headers, status codes, etc. Doing this allows us to +make middleware that can write headers after an aborted request. + +This context should also provide a sub-logger with request fields so we can easily see +which URLs are having problems. +*/ + +func (s *websiteRoutes) Index(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { + err := templates.Templates["index.html"].Execute(rw, templates.BaseData{ + ProjectColor: "cd4e31", + Theme: "dark", + }) + if err != nil { + panic(err) + } +} + +func (s *websiteRoutes) Project(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { + id := p.ByName("id") + row := s.conn.QueryRow(context.Background(), "SELECT name FROM handmade_project WHERE id = $1", p.ByName("id")) + var name string + err := row.Scan(&name) + if err != nil { + panic(err) + } + + rw.Write([]byte(fmt.Sprintf("(%s) %s\n", id, name))) +} + +func (s *websiteRoutes) ProjectCSS(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { + color := r.URL.Query().Get("color") + if color == "" { + rw.WriteHeader(http.StatusBadRequest) + rw.Write([]byte("You must provide a 'color' parameter.\n")) + return + } + + templateData := struct { + Color string + Theme string + }{ + Color: color, + Theme: "dark", + } + + err := templates.Templates["project.css"].Execute(rw, templateData) + if err != nil { + logging.Error().Err(err).Msg("failed to generate project CSS") + return + } +} diff --git a/src/website/website.go b/src/website/website.go index 2b7d9de2..c091d853 100644 --- a/src/website/website.go +++ b/src/website/website.go @@ -3,7 +3,6 @@ package website import ( "context" "errors" - "fmt" "net/http" "os" "os/signal" @@ -12,6 +11,7 @@ import ( "git.handmade.network/hmn/hmn/src/config" "git.handmade.network/hmn/hmn/src/db" "git.handmade.network/hmn/hmn/src/logging" + "git.handmade.network/hmn/hmn/src/templates" "github.com/julienschmidt/httprouter" "github.com/spf13/cobra" ) @@ -19,31 +19,17 @@ import ( var WebsiteCommand = &cobra.Command{ Short: "Run the HMN website", Run: func(cmd *cobra.Command, args []string) { + templates.Init() + defer logging.LogPanics() logging.Info().Msg("Hello, HMN!") conn := db.NewConnPool(4, 8) - router := httprouter.New() - router.GET("/", WithRequestLogger(func(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { - rw.Write([]byte(fmt.Sprintf("Hello, HMN! The time is: %v\n", time.Now()))) - })) - router.GET("/project/:id", func(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { - id := p.ByName("id") - row := conn.QueryRow(context.Background(), "SELECT name FROM handmade_project WHERE id = $1", p.ByName("id")) - var name string - err := row.Scan(&name) - if err != nil { - panic(err) - } - - rw.Write([]byte(fmt.Sprintf("(%s) %s\n", id, name))) - }) - server := http.Server{ Addr: config.Config.Addr, - Handler: router, + Handler: NewWebsiteRoutes(conn), } signals := make(chan os.Signal, 1) @@ -67,7 +53,7 @@ var WebsiteCommand = &cobra.Command{ }, } -func WithRequestLogger(h httprouter.Handle) httprouter.Handle { +func withRequestLogger(h httprouter.Handle) httprouter.Handle { return func(rw http.ResponseWriter, r *http.Request, p httprouter.Params) { defer logging.LogPanics() @@ -80,3 +66,5 @@ func WithRequestLogger(h httprouter.Handle) httprouter.Handle { h(rw, r, p) } } + +// func handleRequestResults