fix?

1 files changed, 1270 insertions, 0 deletions

diff --git a/site/public/assets/css/css.css b/site/public/assets/css/css.css
new file mode 100644
index 00000000..f59556f8
--- /dev/null
+++ b/site/public/assets/css/css.css
@@ -0,0 +1,1270 @@
+* { box-sizing: border-box; outline: 0; }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001s !important;
+    transition-duration: 0.001s !important;
+  }
+}
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-height: 100%;
+  /*font-family: 'Roboto Mono', sans-serif;*/
+  font-family: 'Roboto', sans-serif;
+  color: #eee;
+  overflow-x: hidden;
+}
+html {
+  background: #181818;
+}
+a { outline: none; }
+img { border: 0; }
+.content {
+  opacity: 0;
+  transition: opacity 0.1s cubic-bezier(0,1,1,1);
+}
+html.desktop .content,
+html.mobile .content {
+  opacity: 1;
+  margin-top: 50px;
+}
+html.mobile .content{
+}
+
+/* header */
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  z-index: 9999;
+  background: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 0 4px rgba(0,0,0,0.3);
+}
+header .slogan {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /*padding-left: 56px;*/
+  padding-left: 36px;
+  text-decoration: none;
+}
+header .logo {
+  background-image: url(../img/megapixels_logo_white.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-top: 0px;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+}
+header .site_name {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;;
+  color: #fff;
+  font-size: 11px;
+  line-height: 11px;
+  letter-spacing: 3px;
+}
+header .page_name {
+  font-size: 22px;
+  font-weight: 400;
+  color: #eee;
+  opacity: 0;
+  transition: 0.3s opacity cubic-bezier(0,0,1,1);
+  margin-left:18px;
+}
+.scrolled header .page_name {
+  opacity: 1;
+}
+header .links {
+  font-size: 18px;
+  line-height: 18px;
+}
+.home header .links a {
+  background-color: rgba(24,24,24,0.9);
+  border-bottom: 2px solid transparent;
+  padding: 3px;
+}
+header .sub {
+  margin-left: 4px;
+  margin-top: 2px;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+}
+.sub {
+  color: #666;
+  font-size: 10pt;
+}
+.desktop header .slogan:hover .site_name {
+  color: #fff;
+}
+.desktop header .slogan:hover .sub {
+  color: #666;
+}
+header .links {
+  display: flex;
+  flex-direction: row;
+  font-family: 'Roboto Mono', monospace;
+}
+header .links span,
+header .links a {
+  display: block;
+  color: #dedede;
+  text-decoration: none;
+  text-transform: uppercase;
+  margin-right: 32px;
+  transition: color 0.1s cubic-bezier(0,0,1,1), border-color 0.05s cubic-bezier(0,0,1,1);
+  border-bottom: 1px solid rgba(255,255,255,0);
+  padding-bottom: 3px;
+  padding-top: 2px;
+  font-weight: 400;
+}
+header .links a.active {
+  color: #fff;
+  border-bottom: 2px solid rgba(255,255,255,1);
+}
+.desktop header .links a:hover {
+  color: #fff;
+  border-bottom: 2px solid rgba(255,255,255,1);
+}
+.desktop header .links a.active:hover {
+  color: #fff;
+  border-bottom: 2px solid rgba(255,255,255,1);
+}
+.home header .links a {
+  margin-right: 26px;
+  margin-left: 0;
+}
+.home header .links a:last-child {
+  margin-right: 29px;
+}
+/* footer */
+
+footer {
+  width: 100%;
+  background: #000;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: #666;
+  font-size: 13px;
+  /*line-height: 17px;*/
+  padding: 15px;
+  font-family: "Roboto", sans-serif;
+}
+footer > div {
+  display: flex;
+  flex-direction: row;
+}
+footer > div:nth-child(1) {
+  padding-left: 75px;
+}
+footer > div:nth-child(2) {
+  padding-right: 75px;
+}
+footer a {
+  display: inline-block;
+  color: #aaa;
+  transition: all 0.1s cubic-bezier(0,0,1,1);
+  padding-bottom: 1px;
+  text-decoration: none;
+}
+.desktop footer a:hover {
+  color: #fff;
+  border-bottom:1px solid #999;
+}
+footer ul {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  color: #888;
+  font-size: 11px;
+}
+footer ul li {
+  margin-bottom: 0;
+  font-size: 11px;
+  font-weight: 400;
+  color:#666;
+}
+footer ul li:last-child {
+  margin-right: 0px;
+}
+footer ul:first-child li {
+  margin-right: 8px;
+}
+footer ul:last-child li {
+  margin-left: 8px;
+}
+.desktop footer a:hover {
+  color: #fff;
+}
+
+/* headings */
+
+h1 {
+  color: #eee;
+  font-weight: 400;
+  font-size: 34pt;
+  margin: 20px auto 10px auto;
+  padding: 0;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+h2 {
+  color: #eee;
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 43px;
+  margin: 20px auto 20px auto;
+  padding: 0;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+h3 {
+  margin: 20px auto 10px auto;
+  font-size: 28px;
+  font-weight: 400;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+h4 {
+  margin: 6px auto 10px auto;
+  padding: 0;
+  font-size: 18pt;
+  font-weight: 400;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+h5 {
+  margin: 6px auto 10px auto;
+  padding: 0;
+  font-size: 14pt;
+  font-weight: 400;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+.content h3 a {
+  color: #888;
+  text-decoration: none;
+}
+.desktop .content h3 a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+.right-sidebar h3 {
+  margin: 0;
+  padding: 0 0 10px 0;
+  font-family: 'Roboto Mono';
+  font-weight: 400;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+.right-sidebar ul li a {
+  border-bottom: 0;
+}
+th, .gray {
+  font-family: 'Roboto', monospace;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: .15rem;
+  color: #777;
+}
+th, .gray {
+  font-size: 9pt;
+}
+
+/* splash teaser */
+
+.teaser {
+  position: absolute;
+  top: 50%;
+  left: 100px;
+  transform: translateY(-50%);
+}
+.teaser b {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  color: #fff;
+  font-size: 40px;
+  background: #181818;
+  box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818;
+  box-decoration-break: clone;
+}
+.teaser tt {
+  font-family: 'Roboto Mono', monospace;
+  color: #ddd;
+  font-size: 16px;
+  line-height: 1.7;
+  display: block;
+  max-width: 340px;
+  margin: 10px 0 30px 0;
+}
+.teaser tt span {
+  background: #181818;
+  box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818;
+  box-decoration-break: clone;
+}
+.teaser .btn {
+  color: #ddd;
+  background: #444;
+  padding: 14px 20px;
+  font-size: 16px;
+  border-radius: 4px;
+  text-decoration: none;
+  box-shadow: 0 1px 2px #181818;
+  transition: all 0.1s;
+}
+.desktop .teaser .btn:hover {
+  color: #fff;
+  background: #666;
+}
+
+/* content */
+
+.content {
+  padding-top: 20px;
+  padding-bottom: 100px;
+  min-height: calc(100vh - 55px);
+  line-height: 1.8;
+}
+section {
+  width: 960px;
+  margin: 0 auto;
+}
+.home section {
+  width: 960px;
+}
+.content .first_paragraph {
+  font-weight: 300;
+  font-size: 16pt;
+  color: #ddd;
+  margin-bottom: 20px;
+  margin-top: 30px;
+  line-height: 36px;
+}
+section p {
+  margin: 10px auto 20px auto;
+  line-height: 1.9rem;
+  font-size: 17px;
+  font-weight: 400;
+  color: #cdcdcd;
+}
+section ul {
+  margin: 10px auto 20px auto;
+  max-width: 720px;
+}
+section h1, section h2, section h3, section h4, section h5, section h6, section p{
+  max-width: 720px;
+}
+
+.content-dataset section:nth-child(2) p:first-child{
+  font-size:19px;
+  color:red;
+}
+p.subp{
+  font-size: 14px;
+}
+.content a {
+  color: #dedede;
+  text-decoration: none;
+  border-bottom: 2px solid #666;
+  padding-bottom: 1px;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+}
+.desktop .content a:hover {
+  color: #fff;
+  border-bottom: 2px solid #ccc;
+}
+
+/* top of post metadata */
+
+.meta {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: 12px;
+  color: #ccc;
+  margin-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  margin-right: 20px;
+  line-height: 17px
+}
+.meta .gray {
+  font-size: 9pt;
+  padding-bottom: 5px;
+  line-height: 14px
+}
+.mobile .meta .gray {
+  font-size: 10px;
+  padding-bottom: 0px;
+}
+.right-sidebar {
+  float: right;
+  width: 200px;
+  margin: 0px 20px 20px 20px;
+  padding-top: 12px;
+  padding-left: 20px;
+  border-left: 1px solid #333;
+  font-family: 'Roboto';
+  font-size: 14px;
+  font-weight: 400;
+}
+.left-sidebar {
+  float: left;
+  width: 200px;
+  padding-top: 10px;
+  padding-right: 20px;
+  /*margin-right: 20px;*/
+  margin-bottom: 10px;
+  /*border-right: 1px solid #444;*/
+  font-family: 'Roboto';
+  font-size: 14px;
+  font-weight: 400;
+  clear:left;
+}
+.left-sidebar .meta, .right-sidebar .meta {
+  flex-direction: column;
+}
+.mobile .left-sidebar .meta, .right-sidebar .meta {
+  display: inline-block;
+  border-bottom: 1px solid #333;
+  padding:10px 10px 10px 0;
+  margin: 0 4px 4px 0;
+  color: #bbb;
+}
+.right-sidebar ul {
+  margin-bottom: 10px;
+  color: #aaa;
+}
+.left-sidebar ul {
+  margin-bottom: 10px;
+  color: #aaa;
+}
+.right-sidebar ul:first-child a {
+  text-decoration: none;
+  border-bottom: 1px solid;
+}
+.left-sidebar ul:first-child a {
+  text-decoration: none;
+  border-bottom: 1px solid;
+}
+.left-sidebar a, .right-sidebar a {
+  border-bottom: 1px solid #666;
+}
+.desktop .content .left-sidebar a:hover,
+.desktop .content .right-sidebar a:hover {
+  border-bottom: 1px solid #ccc;
+}
+
+/* lists */
+
+ul {
+  list-style-type: none;
+  margin: 0 0 30px 0;
+  padding: 0;
+}
+ul li {
+  margin-bottom: 8px;
+  color: #dedede;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+/* misc formatting */
+
+code {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 9pt;
+  padding: 2px 4px;
+  background: rgba(255,255,255,0.1);
+}
+pre {
+  margin: 0 auto 20px auto;
+  max-width: 720px;
+  border: 1px solid #666;
+  border-radius: 2px;
+  padding: 10px;
+  display: block;
+  background: #333;
+  overflow: auto
+}
+pre code {
+  display: block;
+  max-height: 400px;
+  max-width: 960px;
+  overflow: scroll;
+  padding: 4px 10px;
+}
+table {
+  margin-bottom: 40px;
+}
+table thead{
+  text-align: left;
+}
+table, tr, td, th {
+  border: none;
+  border-collapse:collapse;
+}
+.chart table tr{
+  width: auto;
+}
+table tr{
+  display:table;
+  table-layout: fixed;
+  width:100%;
+}
+table td, table th{
+  padding:10px;
+
+}
+table tr td{
+  font-size:12px;
+}
+table tbody tr:nth-child(odd){
+  background-color:#292929;
+}
+table tbody tr:nth-child(even){
+  background-color:#333;
+}
+
+hr {
+  height: 1px;
+  background: #888;
+  border: 0;
+  width: 80px;
+}
+hr.supp{
+  width:100%;
+  margin:70px 0 30px 0;
+}
+blockquote {
+  margin: 0 auto;
+  max-width: 720px;
+  padding: 0 0 0 10px;
+  border-left: 2px solid #555;
+}
+
+/* Buttons */
+
+.citation-opts {
+}
+.citation-opts li{
+  display: inline-block;
+  margin-right:10px;
+}
+.desktop .content a.btn{
+  display: inline-block;
+  background: #333;
+  padding: 6px 10px;
+  font-size: 10px;
+  border-radius: 6px;
+  font-weight: 400;
+  border:0px;
+}
+.desktop .content a.btn:hover{
+  background: #444;
+  border:0px;
+}
+
+/* footnotes */
+
+.footnotes hr {
+  display: none;
+}
+ul.footnotes {
+  max-width: 720px;
+  margin: 0 auto;
+  font-size: 12px;
+}
+ul.footnotes li {
+  font-size: 12px;
+  list-style-type: none;
+  margin-bottom: 12px;
+}
+ul.footnotes p {
+  font-size: 12px;
+}
+.footnotes ol:before {
+  content: 'Footnotes';
+  margin: 0 0 10px -40px;
+  padding-bottom: 0;
+  display: block;
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #666;
+  font-size: 11pt;
+}
+
+/* images */
+
+section img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+.image img {
+  cursor: pointer;
+}
+section .image {
+  margin-bottom: 20px;
+}
+section.images {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  clear: both;
+}
+.image:only-child {
+  width: 100%;
+}
+.image:first-child {
+  margin-left: 0;
+  /*margin-top:10px;*/
+}
+.image:nth-child(2),
+.image:nth-child(3) {
+  margin-left: 40px;
+}
+.image:nth-child(4) {
+  margin-left: 20px;
+}
+.image:first-child:nth-last-child(2),
+.image:first-child:nth-last-child(2) ~ .image {
+  width: 300px;
+}
+.image:first-child:nth-last-child(3),
+.image:first-child:nth-last-child(3) ~ .image {
+  width: 186px;
+}
+.image:first-child:nth-last-child(4) ~ .image {
+  width: 100px;
+}
+section.wide {
+  width: 960px;
+}
+section.wide .image {
+  max-width: 960px;
+}
+section.fullwidth {
+  width: 100%;
+}
+section.fullwidth .image {
+  max-width: 100%;
+}
+.image .caption{
+  text-align: center;
+}
+.image .caption.intro-caption{
+  text-align: center;
+}
+.caption {
+  text-align: center;
+  font-size: 10pt;
+  color: #999;
+  max-width: 960px;
+  margin: 10px auto 10px auto;
+  font-family: 'Roboto';
+}
+.caption a {
+  color: #ccc;
+  border: 0;
+}
+.desktop .caption a:hover {
+  color: #fff;
+  border: 0;
+}
+
+
+
+.sideimage {
+  margin: 0px 0 40px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.sideimage p{
+  margin-top:0px;
+  padding-top:0px;
+  font-size:14px;
+}
+.sideimage strong{
+  display: block;
+  font-size:26px;
+  line-height: 26px;
+  font-weight: 400;
+  font-family: 'Roboto';
+  margin-bottom: 16px;
+}
+.sideimage img {
+  margin-right: 40px;
+  width: 200px;
+  height: 200px;
+}
+
+/* blog index */
+
+.research_index {
+  margin-top: 40px;
+}
+.research_index a {
+  text-decoration: none;
+}
+.research_index h1 {
+  margin-top: 20px;
+  text-decoration: underline;
+}
+.desktop .research_index section:hover h1 {
+  color: #fff;
+}
+.research_index section:hover h2 {
+  color: #ddd;
+}
+
+/* home page */
+
+.hero {
+  width: 100%;
+  background: black; 
+  background: linear-gradient(#000,#222);
+  height: 50vw;
+  max-height: 70vh;
+}
+.hero .inner {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+}
+#face_container {
+  pointer-events: none;
+  position: absolute;
+  width: 66vw;
+  height: 50vw;
+  max-height: 70vh;
+  top: 0;
+  right: -16vw;
+  z-index: 0;
+  text-align: center;
+  perspective: 500px;
+  perspective-origin: 50% 80%;
+}
+.currentFace {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  left: 0;
+  text-align: center;
+  font-size: 26px;
+}
+.intro {
+  max-width: 960px;
+  padding: 75px 0 75px 10px;
+  z-index: 1;
+}
+.intro .headline {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 24pt;
+  line-height: 40pt;
+}
+.intro .buttons {
+  margin: 40px 0;
+}
+.intro button {
+  font-family: 'Roboto', sans-serif;
+  padding: 15px 20px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 12pt;
+  margin-right: 10px;
+  transition: color 0.1s cubic-bezier(0,0,1,1), background-color 0.1s cubic-bezier(0,0,1,1);
+}
+.intro button.normal {
+  background: #191919;
+  border-color: #444;
+  color: #ddd;
+}
+.intro button.important {
+  background: #444;
+  border-color: #444;
+  color: #ddd;
+}
+.desktop .intro button:hover {
+  background: #666;
+  border-color: #666;
+  color: #fff;
+}
+.intro .under {
+  font-size: 12px;
+  color: #888;
+}
+.intro .under a {
+  color: #bbb;
+}
+.desktop .intro .under a:hover {
+  color: #fff;
+}
+.dataset-intro h2 {
+  margin-top: 40px;
+}
+.content .dataset-intro .first_paragraph {
+  margin-top: 10px;
+  font-size: 18px;
+}
+
+/* intro - list of datasets */
+
+.dataset-heading {
+  /*background: #000;*/
+  width: 100%;
+  padding: 0 25px;
+}
+.dataset-heading p{
+  max-width: none;
+}
+.dataset-heading h1{
+  max-width: none;
+}
+.dataset-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 20px 0 0 0;
+}
+.dataset-list a {
+  text-decoration: none;
+  transition: border 0.1s cubic-bezier(0,0,1,1);
+  margin: 0 11px 22px 0;
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+.dataset-list .dataset {
+  width: 300px;
+  padding: 12px;
+  color: white;
+  font-weight: 400;
+  font-family: 'Roboto';
+  position: relative;
+}
+.dataset-list .dataset-image {
+  background-size: cover;
+  width: auto;
+  height: 178px;
+}
+.desktop .content .dataset-list a {
+  border: 1px solid #333;
+
+}
+.desktop .dataset-list a:hover {
+  border: 1px solid #666;
+}
+.dataset-list .fields {
+  font-size: 12px;
+  color: #ccc;
+}
+.dataset-list .dataset .title{
+  font-size: 16px;
+  line-height: 20px;
+  margin-bottom: 4px;
+  font-weight: 400;
+  display: block;
+}
+.dataset-list .fields div {
+  display: block;
+}
+.dataset-list .sort-options {
+  margin: 0;
+  padding: 0;
+}
+.dataset-list .sort-options:before {
+  content: 'Browse list by:';
+  opacity: 0.7;
+  display: block;
+  padding-bottom: 10px;
+}
+.dataset-list .sort-options li {
+  display: inline-block;
+  margin: 0;
+  cursor: pointer;
+  margin-right: 10px;
+  transition: background 0.2s;
+  background: #555;
+  color: #fff;
+  padding: 7px 11px;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}
+.dataset-list .sort-options li:last-child {
+  margin-right:0;
+}
+.dataset-list .sort-options li.active {
+  background: #fff;
+  color: #000;
+}
+.desktop .dataset-list .sort-options li:hover {
+  background: #888;
+}
+.desktop .dataset-list .sort-options li.active:hover {
+  background: #fff;
+}
+.dataset_list .applet {
+  margin-bottom: 15px;
+}
+
+
+
+/* intro section for datasets */
+
+section.intro_section {
+  font-family: 'Roboto Mono';
+  width: 100%;
+  background-size: cover;
+  background-position: center left;
+  /*padding: 50px 0;*/
+  min-height: 40vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #111111;
+  margin-bottom: 20px;
+  padding: 0;
+}
+.intro_section .inner {
+  max-width: 960px;
+  margin: 3rem auto;
+}
+.intro_section .hero_desc {
+  font-size: 38px;
+  line-height: 60px;
+  margin-bottom: 30px;
+  color: #ddd;
+  font-weight: 400;
+}
+.mobile .intro_section .hero_desc{
+  font-size: 16px;
+  line-height: 32px;
+  margin-bottom: 20px;
+}
+.intro_section .hero_desc .dataset-name{
+  color:#fff;
+}
+.intro_section .hero_subdesc {
+  font-size: 17px;
+  line-height: 36px;
+  max-width: 80%;
+  font-weight: 400;
+  color: #ddd;
+}
+.mobile .intro_section .hero_subdesc {
+  font-size: 14px;
+  line-height: 28px;
+}
+.intro_section .hero_desc .bgpad {
+  box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
+  background: #181818;
+}
+.intro_section .hero_subdesc .bgpad {
+  box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
+  background: #181818;
+}
+.mobile .intro_section .hero_desc .bgpad {
+  box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
+  background: #181818;
+}
+.mobile .intro_section .hero_subdesc .bgpad {
+  box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
+  background: #181818;
+}
+
+
+.firefox .intro_section div > span {
+  box-decoration-break: clone;
+}
+
+/* ----------------------------------------------------- 
+page-specific formatting 
+----------------------------------------------------- */
+
+/* Dataset */
+
+.leaflet-container{
+  margin-bottom: 10px
+}
+
+.hr-wave-holder {
+  /* Clip edges, as some of the lines don't terminate nicely. */
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 50px;
+    margin-top:50px;
+}
+
+.hr-wave-line1 {
+    background: linear-gradient(45deg, transparent, transparent 49%, #fff 49%, transparent 51%);
+}
+.hr-wave-line2 {
+    background: linear-gradient(-45deg, transparent, transparent 49%, #fff 49%, transparent 51%);
+}
+.hr-wave-line {
+    background-size: 20px 20px;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+}
+
+
+/* map */
+
+ul.map-legend{
+  display: inline-block;
+  margin: 0;
+  font-size: 14px;
+}
+ul.map-legend li {
+  margin-right: 10px;
+  padding-top: 4px;
+  display: inline-block;
+  cursor: pointer;
+}
+.desktop ul.map-legend li:hover {
+  text-decoration: underline;
+}
+ul.map-legend li:before {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
+ul.map-legend li.active {
+  text-decoration: underline;
+  color: #fff;
+}
+ul.map-legend li.edu:before {
+  background-color: #f2f293;
+}
+ul.map-legend li.com:before {
+  background-color: #3264f6;
+}
+ul.map-legend li.gov:before {
+  background-color: #f30000;
+}
+ul.map-legend li.source:before {
+  content: none;
+  display: inline-block;
+  width: 0px;
+  margin-right: 10px;
+}
+
+/* about */
+.desktop a.ahrefmoz{
+  color:#DE5825;
+}
+.desktop a.ahrefmoz:hover{
+  color:#EF6D3B;
+}
+
+.content-about {
+  color: #fff;
+}
+.content-about p {
+  font-size: 16px;
+}
+.content-about ul{
+ font-size: 14px;
+ font-weight: 300; 
+}
+.content-about section:first-of-type > p:first-of-type {
+  font-size: 22px;
+  line-height: 40px;
+}
+.content-about .about-menu ul li {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: uppercase;
+  margin-right: 15px;
+  font-family: 'Roboto';
+}
+.content-about .about-menu ul li a {
+  border-bottom: 0;
+  color: #aaa;
+}
+
+.content-about .about-menu ul li a.current {
+  border-bottom: 1px solid #ddd;
+  color: #ddd;
+}
+
+/* columns */
+
+.columns {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.content-about .columns .column{
+  /* on the about page use padding and bg color */
+  background: #202020;
+  padding: 20px;
+}
+.columns .column {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  margin: 10px;
+}
+.columns .column:first-of-type {
+  margin-left: 0;
+}
+.columns-2 .column {
+  width: 50%;
+}
+.columns-3 .column {
+  width: 33%;
+}
+.columns-4 .column {
+  width: 25%;
+}
+
+/* about page */
+
+
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  
+  -webkit-flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+.content-about .team-photos-container{
+  margin:40px 0;
+}
+.content-about .team-member {
+  height: auto;
+  margin-top: 10px;
+  color: white;
+  width: 400px;
+  font-weight: bold;
+  flex-grow: 1;
+  margin:0 40px 0 0;
+  padding:20px;
+  border-radius:6px;
+  background: #202020;
+}
+.content-about .team-member&:last-child{
+  margin:0 0 0 40px;
+}
+.content-about .team-member p{
+  font-size:16px;
+}
+.content-about .team-member img{
+  margin:0;
+  display: block;
+}
+.content-about .team-member h3{
+  font-size:20px;
+}
+
+
+
+/* footnotes */
+
+a.footnote {
+  font-size: 9px;
+  line-height: 0px;
+  position: relative;
+  /*display: inline-block;*/
+  bottom: 7px;
+  text-decoration: none;
+  color: #ff8;
+  border: 0;
+  left: -1px;
+  transition-duration: 0s;
+}
+a.footnote_shim {
+  /*display: inline-block;*/
+  width: 1px; height: 1px;
+  overflow: hidden;
+  position: relative;
+  top: -90px;
+  visibility: hidden;
+}
+.right-sidebar a.footnote {
+  bottom: 8px;
+}
+.desktop a.footnote:hover {
+  /*background-color: #ff8;*/
+  color: #fff;
+  border: 0;
+}
+.backlinks {
+  margin-right: 10px;
+}
+.content .backlinks a {
+  color: #ff8;
+  font-size: 10px;
+  text-decoration: none;
+  border: 0;
+  font-weight: bold;
+  position: relative;
+  bottom: 5px;
+  margin-right: 2px;
+}
+.content .footnotes .backlinks a {
+  bottom: 3px;
+}
+li p {
+  margin: 0; padding: 0;
+  display: inline;
+}
+
+/* citation browser */
+
+.citationHeader {
+  max-width: 720px;
+  margin: 10px auto;
+  padding-bottom: 10px
+}
+.download-btn {
+  display: inline-block;
+  font-size: 13px;
+  color: #ddd;
+  cursor: pointer;
+  background: #333;
+  padding: 8px 10px;
+  border-radius: 5px;
+  transition: all 0.1s;
+}