From 1274164ddf1257e39d8314e9935151cf6056e510 Mon Sep 17 00:00:00 2001
From: shardul-gawande-enpointe <shardul.enpointe@gmail.com>
Date: Tue, 23 Jan 2024 14:12:01 +0530
Subject: [PATCH] Sister navigation fixes #1495

---
 offline-reference/extra/css/all.css | 3403 ++++++++++++++-------------
 src/assets/css/main.css             |  137 +-
 2 files changed, 1848 insertions(+), 1692 deletions(-)

diff --git a/offline-reference/extra/css/all.css b/offline-reference/extra/css/all.css
index 0ff22dbf36..1865aaacb7 100644
--- a/offline-reference/extra/css/all.css
+++ b/offline-reference/extra/css/all.css
@@ -66,9 +66,12 @@ audio:not([controls]) {
  */
 
 html {
-    font-size: 100%; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-    -ms-text-size-adjust: 100%; /* 2 */
+    font-size: 100%;
+    /* 1 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
+    -ms-text-size-adjust: 100%;
+    /* 2 */
 }
 
 /**
@@ -329,8 +332,10 @@ nav ol {
  */
 
 img {
-    border: 0; /* 1 */
-    -ms-interpolation-mode: bicubic; /* 2 */
+    border: 0;
+    /* 1 */
+    -ms-interpolation-mode: bicubic;
+    /* 2 */
 }
 
 /**
@@ -382,10 +387,13 @@ fieldset {
  */
 
 legend {
-    border: 0; /* 1 */
+    border: 0;
+    /* 1 */
     padding: 0;
-    white-space: normal; /* 2 */
-    *margin-left: -7px; /* 3 */
+    white-space: normal;
+    /* 2 */
+    *margin-left: -7px;
+    /* 3 */
 }
 
 /**
@@ -399,10 +407,14 @@ button,
 input,
 select,
 textarea {
-    font-size: 100%; /* 1 */
-    margin: 0; /* 2 */
-    vertical-align: baseline; /* 3 */
-    *vertical-align: middle; /* 3 */
+    font-size: 100%;
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    vertical-align: baseline;
+    /* 3 */
+    *vertical-align: middle;
+    /* 3 */
 }
 
 /**
@@ -438,12 +450,16 @@ select {
  */
 
 button,
-html input[type="button"], /* 1 */
+html input[type="button"],
+/* 1 */
 input[type="reset"],
 input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
-    *overflow: visible;  /* 4 */
+    -webkit-appearance: button;
+    /* 2 */
+    cursor: pointer;
+    /* 3 */
+    *overflow: visible;
+    /* 4 */
 }
 
 /**
@@ -464,10 +480,14 @@ html input[disabled] {
 
 input[type="checkbox"],
 input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-    *height: 13px; /* 3 */
-    *width: 13px; /* 3 */
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */
+    *height: 13px;
+    /* 3 */
+    *width: 13px;
+    /* 3 */
 }
 
 /**
@@ -477,9 +497,11 @@ input[type="radio"] {
  */
 
 input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+    -webkit-appearance: textfield;
+    /* 1 */
     -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
+    -webkit-box-sizing: content-box;
+    /* 2 */
     box-sizing: content-box;
 }
 
@@ -509,8 +531,10 @@ input::-moz-focus-inner {
  */
 
 textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
+    overflow: auto;
+    /* 1 */
+    vertical-align: top;
+    /* 2 */
 }
 
 /* ==========================================================================
@@ -525,6 +549,7 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }
+
 /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */
 
 /*
@@ -538,77 +563,78 @@ table {
 code[class*="language-"],
 pre[class*="language-"],
 textarea {
-  color: #222;
-  font-family:
-      'Inconsolata',
-      Consolas,
-      Monaco,
-      'Andale Mono',
-      monospace;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  font-size: 1em !important;
+    color: #222;
+    font-family: 'Inconsolata',
+        Consolas,
+        Monaco,
+        'Andale Mono',
+        monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    font-size: 1em !important;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-  position:relative;
-  padding: 0.5em 1.0em;
-  margin: 0.5em 0 0 -0.5em;
-  border-left: 0.5em solid #AFAFAF; /* coy og blue 10px solid  358ccb  */
-  background-color: #fff; /* coy og white #fdfdfd  */
-  /* lines */
-  background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
-  background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
-  background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
-  background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
-  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
-  background-size: 2.9em 2.9em; /* adjusts height of alternating lines */
-  background-origin:content-box;
-  /* set overflow to just let the code roll  */
-  overflow:auto;
-  /* or uncomment this to let an inner vertical scroll be triggered,
-    but be generous as to when
-  max-height:36em; */
-}
-
-code[class*="language"] {
-}
-
-
-:not(pre) > code[class*="language-"],
+    position: relative;
+    padding: 0.5em 1.0em;
+    margin: 0.5em 0 0 -0.5em;
+    border-left: 0.5em solid #AFAFAF;
+    /* coy og blue 10px solid  358ccb  */
+    background-color: #fff;
+    /* coy og white #fdfdfd  */
+    /* lines */
+    background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
+    background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
+    background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
+    background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
+    background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
+    background-size: 2.9em 2.9em;
+    /* adjusts height of alternating lines */
+    background-origin: content-box;
+    /* set overflow to just let the code roll  */
+    overflow: auto;
+    /* or uncomment this to let an inner vertical scroll be triggered,
+      but be generous as to when
+    max-height:36em; */
+}
+
+code[class*="language"] {}
+
+
+:not(pre)>code[class*="language-"],
 pre[class*="language-"] {
-  margin-bottom: 1em;
+    margin-bottom: 1em;
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-  position:relative;
-  padding: .2em;
-  -webkit-border-radius: 0.3em;
-  -moz-border-radius: 0.3em;
-  -ms-border-radius: 0.3em;
-  -o-border-radius: 0.3em;
-  border-radius: 0.3em;
-  color: #333;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+:not(pre)>code[class*="language-"] {
+    position: relative;
+    padding: .2em;
+    -webkit-border-radius: 0.3em;
+    -moz-border-radius: 0.3em;
+    -ms-border-radius: 0.3em;
+    -o-border-radius: 0.3em;
+    border-radius: 0.3em;
+    color: #333;
+    border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 
-:not(pre) > code[class*="language-"]:after,
+:not(pre)>code[class*="language-"]:after,
 pre[class*="language-"]:after {
-  right: 0.75em;
-  left: auto;
+    right: 0.75em;
+    left: auto;
 }
 
 /*  code colors */
@@ -617,11 +643,15 @@ pre[class*="language-"]:after {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */
+    color: #A0A0A0;
+    /* light gray */
+    /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */
 }
 
 .token.punctuation {
-  color: #666; /* darker gray */ /* og coy 5F6364 */
+    color: #666;
+    /* darker gray */
+    /* og coy 5F6364 */
 }
 
 .token.property,
@@ -631,7 +661,9 @@ pre[class*="language-"]:after {
 .token.function-name,
 .token.constant,
 .token.symbol {
-  color: #DC3787; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */
+    color: #DC3787;
+    /* not p5 pink, but related */
+    /* og coy c92c2c a reddish color */
 }
 
 .token.selector,
@@ -639,54 +671,64 @@ pre[class*="language-"]:after {
 .token.string,
 .token.function,
 .token.builtin {
-  color: #00A1D3; /* blue */ /* 877923  */  /* og coy 2f9c0a - green */
+    color: #00A1D3;
+    /* blue */
+    /* 877923  */
+    /* og coy 2f9c0a - green */
 }
 
 .token.operator,
 .token.entity,
 .token.url,
 .token.variable {
-  color: #a67f59; /* og coy a67f59 a light brown */
-  background: rgba(255, 255, 255, 0.5);
+    color: #a67f59;
+    /* og coy a67f59 a light brown */
+    background: rgba(255, 255, 255, 0.5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword,
 .token.class-name {
-  color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */
+    color: #704F21;
+    /* 9F944F brown */
+    /* og coy #1990b8 blue */
 }
 
 .token.regex,
 .token.important {
-  color: #e90; /* og coy e90 orange */
+    color: #e90;
+    /* og coy e90 orange */
 }
+
 .language-css .token.string,
 .style .token.string {
-  color: #a67f59; /* og coy a67f59 a light brown */
-  background: rgba(255, 255, 255, 0.5);
+    color: #a67f59;
+    /* og coy a67f59 a light brown */
+    background: rgba(255, 255, 255, 0.5);
 }
 
 .token.important {
-  font-weight: normal;
+    font-weight: normal;
 }
 
 .token.entity {
-  cursor: help;
+    cursor: help;
 }
 
 .namespace {
-  opacity: .7;
+    opacity: .7;
 }
 
-@media screen and (max-width:767px){
-  pre[class*="language-"]:before,
-  pre[class*="language-"]:after {
-    bottom:14px;
-    -webkit-box-shadow:none;
-    -moz-box-shadow:none;
-    box-shadow:none;
-  }
+@media screen and (max-width: 767px) {
+
+    pre[class*="language-"]:before,
+    pre[class*="language-"]:after {
+        bottom: 14px;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+    }
 
 }
 
@@ -694,49 +736,52 @@ pre[class*="language-"]:after {
 .token.tab:not(:empty):before,
 .token.cr:before,
 .token.lf:before {
-  color: #e0d7d1; /* og coy very light brown  */
+    color: #e0d7d1;
+    /* og coy very light brown  */
 }
 
 pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
 }
 
-pre.line-numbers > code {
-  position: relative;
+pre.line-numbers>code {
+    position: relative;
 }
 
 .line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em; /* works for line-numbers below 1000 lines */
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em;
+    /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
 }
 
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
+.line-numbers-rows>span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
 }
 
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: #999;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
+.line-numbers-rows>span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
 }
+
 /*
  * HTML5 Boilerplate
  *
@@ -753,18 +798,18 @@ html,
 button,
 input,
 select {
-  color: #222;
+    color: #222;
 }
 
 textarea {
-  line-height: 1.45em;
-  padding: 0.5em 1em 0.5em 1em;
-  border: none;
+    line-height: 1.45em;
+    padding: 0.5em 1em 0.5em 1em;
+    border: none;
 }
 
 body {
-  font-size: 1em;
-  line-height: 1.4;
+    font-size: 1em;
+    line-height: 1.4;
 }
 
 /*
@@ -774,13 +819,13 @@ body {
  */
 
 ::-moz-selection {
-  background: #b3d4fc;
-  text-shadow: none;
+    background: #b3d4fc;
+    text-shadow: none;
 }
 
 ::selection {
-  background: #b3d4fc;
-  text-shadow: none;
+    background: #b3d4fc;
+    text-shadow: none;
 }
 
 /*
@@ -788,12 +833,12 @@ body {
  */
 
 hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #ccc;
-  margin: 1em 0;
-  padding: 0;
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
 }
 
 /*
@@ -801,55 +846,55 @@ hr {
  */
 
 img {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 img.med_left {
-  width: 300px;
-  float: left;
+    width: 300px;
+    float: left;
 }
 
 img.med_right {
-  width: 300px;
-  float: right;
+    width: 300px;
+    float: right;
 }
 
 img.small_left {
-  width: 200px;
-  float: left;
+    width: 200px;
+    float: left;
 }
 
 img.smaller_left {
-  width: 140px;
-  float: left;
+    width: 140px;
+    float: left;
 }
 
 img.small_right {
-  width: 200px;
-  float: right;
+    width: 200px;
+    float: right;
 }
 
 img.smaller_right {
-  width: 140px;
-  float: right;
+    width: 140px;
+    float: right;
 }
 
 img.small_center {
-  width: 200px;
-  margin-left: 250px;
+    width: 200px;
+    margin-left: 250px;
 }
 
 img.small {
-  width: 160px;
+    width: 160px;
 }
 
 img.med {
-  width: 400px;
+    width: 400px;
 }
 
 img.med_center {
-  width: 400px;
-  margin-left: 150px;
+    width: 400px;
+    margin-left: 150px;
 }
 
 /*
@@ -857,9 +902,9 @@ img.med_center {
  */
 
 fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
+    border: 0;
+    margin: 0;
+    padding: 0;
 }
 
 /*
@@ -867,7 +912,7 @@ fieldset {
  */
 
 textarea {
-  resize: vertical;
+    resize: vertical;
 }
 
 /*
@@ -876,179 +921,179 @@ textarea {
   //////////////////////////////////////////////////
 */
 .tagline {
-  display: none;
+    display: none;
 }
 
 #home-page .home {
-  pointer-events: none;
+    pointer-events: none;
 }
 
 #home-page .home a {
-  pointer-events: all;
+    pointer-events: all;
 }
 
-#lockup > a {
-  position: relative;
-  display: block;
-  width: 200px;
-  height: 90px;
+#lockup>a {
+    position: relative;
+    display: block;
+    width: 200px;
+    height: 90px;
 }
 
 #logo_image {
-  position: absolute;
-  top: 0;
+    position: absolute;
+    top: 0;
 }
 
 #menu.top_menu,
 #menu {
-  list-style: none;
-  font-family: 'Montserrat', sans-serif;
-  width: 100%;
-  margin: 0 0 1em 0;
-  padding: 0;
-  height: 100%;
-  font-size: 1.3em;
+    list-style: none;
+    font-family: 'Montserrat', sans-serif;
+    width: 100%;
+    margin: 0 0 1em 0;
+    padding: 0;
+    height: 100%;
+    font-size: 1.3em;
 }
 
 #menu.top_menu li {
-  display: inline;
+    display: inline;
 }
 
 #home-sketch {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -2;
 }
 
 /* <======== Styling for responsive menu bar ========> */
 
 @media screen and (max-width: 780px) {
-  .sidebar-menu {
-    clear: both;
-    max-height: 0;
-    transition: max-height 0.4s ease-out;
-    overflow: hidden;
-  }
-
-  .sidebar-menu-nav-element {
-    width: 91vw;
-  }
-
-  .sidebar-menu a {
-    display: block;
-    text-align: center;
-    padding-bottom: 0.11em;
-    border-bottom: 0.11em dashed transparent;
-  }
-
-  .sidebar-menu-icon {
-    top: 2rem;
-    cursor: pointer;
-    float: right;
-    padding: 28px 20px;
-    position: relative;
-    user-select: none;
-    margin-bottom: 5rem;
-  }
-
-  .sidebar-menu-icon .sidebar-nav-icon {
-    background: #ed225d;
-    display: block;
-    height: 2px;
-    position: relative;
-    transition: background 0.4s ease-out;
-    width: 18px;
-  }
-
-  .sidebar-menu-icon .sidebar-nav-icon:before,
-  .sidebar-menu-icon .sidebar-nav-icon:after {
-    background: #ed225d;
-    content: '';
-    display: block;
-    height: 100%;
-    position: absolute;
-    transition: all 0.4s ease-out;
-    width: 100%;
-  }
-
-  .sidebar-menu-icon .sidebar-nav-icon:before {
-    top: 5px;
-  }
-
-  .sidebar-menu-icon .sidebar-nav-icon:after {
-    top: -5px;
-  }
-
-  .sidebar-menu-btn {
-    display: none;
-  }
-
-  .sidebar-menu-btn:checked ~ .sidebar-menu {
-    max-height: 475px;
-  }
-
-  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon {
-    background: transparent;
-  }
-
-  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before {
-    transform: rotate(-45deg);
-    top: 0;
-  }
-
-  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after {
-    transform: rotate(45deg);
-    top: 0;
-  }
+    .sidebar-menu {
+        clear: both;
+        max-height: 0;
+        transition: max-height 0.4s ease-out;
+        overflow: hidden;
+    }
+
+    .sidebar-menu-nav-element {
+        width: 91vw;
+    }
+
+    .sidebar-menu a {
+        display: block;
+        text-align: center;
+        padding-bottom: 0.11em;
+        border-bottom: 0.11em dashed transparent;
+    }
+
+    .sidebar-menu-icon {
+        top: 2rem;
+        cursor: pointer;
+        float: right;
+        padding: 28px 20px;
+        position: relative;
+        user-select: none;
+        margin-bottom: 5rem;
+    }
+
+    .sidebar-menu-icon .sidebar-nav-icon {
+        background: #ed225d;
+        display: block;
+        height: 2px;
+        position: relative;
+        transition: background 0.4s ease-out;
+        width: 18px;
+    }
+
+    .sidebar-menu-icon .sidebar-nav-icon:before,
+    .sidebar-menu-icon .sidebar-nav-icon:after {
+        background: #ed225d;
+        content: '';
+        display: block;
+        height: 100%;
+        position: absolute;
+        transition: all 0.4s ease-out;
+        width: 100%;
+    }
+
+    .sidebar-menu-icon .sidebar-nav-icon:before {
+        top: 5px;
+    }
+
+    .sidebar-menu-icon .sidebar-nav-icon:after {
+        top: -5px;
+    }
+
+    .sidebar-menu-btn {
+        display: none;
+    }
+
+    .sidebar-menu-btn:checked~.sidebar-menu {
+        max-height: 475px;
+    }
+
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon {
+        background: transparent;
+    }
+
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:before {
+        transform: rotate(-45deg);
+        top: 0;
+    }
+
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:after {
+        transform: rotate(45deg);
+        top: 0;
+    }
 }
 
 .sidebar-menu-btn {
-  display: none;
+    display: none;
 }
 
 /* <=================================================> */
 
 #home-sketch-frame {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: -2;
-  overflow: hidden;
-  pointer-events: all;
-  border: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: -2;
+    overflow: hidden;
+    pointer-events: all;
+    border: 0;
 }
 
 #credits {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  padding: 1em;
-  font-size: 0.7em;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    padding: 1em;
+    font-size: 0.7em;
 }
 
 #skip-to-content {
-  position: absolute;
-  left: 0px;
-  top: 40px;
-  z-index: 5;
-  background-color: #ed225d;
-  color: white;
-  width: auto;
-  height: 50px;
-  border: none;
-  outline-style: none;
-  text-align: center;
-  font-size: 25px;
-  padding: 5px;
-  opacity: 0;
+    position: absolute;
+    left: 0px;
+    top: 40px;
+    z-index: 5;
+    background-color: #ed225d;
+    color: white;
+    width: auto;
+    height: 50px;
+    border: none;
+    outline-style: none;
+    text-align: center;
+    font-size: 25px;
+    padding: 5px;
+    opacity: 0;
 }
 
 #skip-to-content:focus {
-  opacity: 1;
+    opacity: 1;
 }
 
 /*
@@ -1058,121 +1103,121 @@ textarea {
 */
 
 .button_box {
-  border: 1px solid #ed225d;
-  padding: 0.4em 0.6em;
-  margin: 0.5em 0;
-  color: #333;
-  font-family: 'Montserrat', sans-serif;
-  display: inline-block;
+    border: 1px solid #ed225d;
+    padding: 0.4em 0.6em;
+    margin: 0.5em 0;
+    color: #333;
+    font-family: 'Montserrat', sans-serif;
+    display: inline-block;
 }
 
 .download_box {
-  border: 1px solid #ed225d;
-  padding: 0.4em;
-  margin: 0 1.75em 0 0;
-  width: 18.65em;
-  float: left;
-  color: #333;
-  height: 7.45em;
-  position: relative;
+    border: 1px solid #ed225d;
+    padding: 0.4em;
+    margin: 0 1.75em 0 0;
+    width: 18.65em;
+    float: left;
+    color: #333;
+    height: 7.45em;
+    position: relative;
 }
 
 .download_box:hover,
 .button_box:hover {
-  border: 1px solid #ed225d;
-  background: #ed225d;
-  color: #ffffff;
+    border: 1px solid #ed225d;
+    background: #ed225d;
+    color: #ffffff;
 }
 
 .download_box.half_box {
-  width: 10.83em;
-  margin-right: 1.75em;
-  float: left;
+    width: 10.83em;
+    margin-right: 1.75em;
+    float: left;
 }
 
 .download_box.half_box.last_box {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .download_box .download_name {
-  font-size: 1em;
-  margin: 0;
-  padding-bottom: 0.3em;
-  border-bottom: 0.09em dashed;
-  border-bottom-color: #ed225d;
-  line-height: 1.2;
-  font-family: 'Montserrat', sans-serif;
-  display: block;
+    font-size: 1em;
+    margin: 0;
+    padding-bottom: 0.3em;
+    border-bottom: 0.09em dashed;
+    border-bottom-color: #ed225d;
+    line-height: 1.2;
+    font-family: 'Montserrat', sans-serif;
+    display: block;
 }
 
 .download_box:hover .download_name {
-  -webkit-text-stroke-width: 0;
-  border-bottom-color: #fff;
+    -webkit-text-stroke-width: 0;
+    border-bottom-color: #fff;
 }
 
 .download_box p {
-  font-size: 0.65em;
-  margin: 0;
-  position: absolute;
-  bottom: 1em;
+    font-size: 0.65em;
+    margin: 0;
+    position: absolute;
+    bottom: 1em;
 }
 
 .download_box svg {
-  height: 0.65em;
-  width: 0.65em;
-  position: absolute;
-  bottom: 3.5em;
+    height: 0.65em;
+    width: 0.65em;
+    position: absolute;
+    bottom: 3.5em;
 }
 
 .download_box:hover svg {
-  fill: white;
+    fill: white;
 }
 
-.download_box h4 + p {
-  display: block;
+.download_box h4+p {
+    display: block;
 }
 
 #download-page .link_group {
-  width: 100%;
-  margin-bottom: 3em;
+    width: 100%;
+    margin-bottom: 3em;
 }
 
 .download_box {
-  margin-top: 1em;
+    margin-top: 1em;
 }
 
 .support div.download_box {
-  margin-top: 1em;
-  margin-bottom: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 #download-page .support p {
-  font-size: 0.8em;
-  position: static;
-  margin-top: 0.3em;
+    font-size: 0.8em;
+    position: static;
+    margin-top: 0.3em;
 }
 
 #slideshow {
-  margin: 1em 0;
+    margin: 1em 0;
 }
 
 #slideshow p {
-  font-size: 0.8em;
-  color: #ababab;
-  line-height: 1.2em;
-  margin-top: 0.5em;
+    font-size: 0.8em;
+    color: #ababab;
+    line-height: 1.2em;
+    margin-top: 0.5em;
 }
 
 .extra {
-  color: white;
-  position: absolute;
-  bottom: 0.65em;
-  right: 0.9em;
-  font-weight: bold;
-  -ms-transform: rotate(-12deg);
-  -webkit-transform: rotate(-12deg);
-  transform: rotate(-12deg);
-  font-size: 0.8em;
+    color: white;
+    position: absolute;
+    bottom: 0.65em;
+    right: 0.9em;
+    font-weight: bold;
+    -ms-transform: rotate(-12deg);
+    -webkit-transform: rotate(-12deg);
+    transform: rotate(-12deg);
+    font-size: 0.8em;
 }
 
 /*
@@ -1181,31 +1226,35 @@ textarea {
   //////////////////////////////////////////////////
 */
 #get-started-page .edit_space {
-  position: relative;
-  order: 3;
-}
-#get-started-page .edit_space .copy_button{
-  color: #2d7bb6;
-  border-color: rgba(45, 123, 182, 0.25);
-  float: right;
-  margin: 0.5em 0 0 0.5em;
-  background: rgba(255, 255, 255, 0.7);
-  position: absolute;
-  z-index: 2;
-  left: 31.33em;
-  top: -1.5em;
+    position: relative;
+    order: 3;
+}
+
+#get-started-page .edit_space .copy_button {
+    color: #2d7bb6;
+    border-color: rgba(45, 123, 182, 0.25);
+    float: right;
+    margin: 0.5em 0 0 0.5em;
+    background: rgba(255, 255, 255, 0.7);
+    position: absolute;
+    z-index: 2;
+    left: 31.33em;
+    top: -1.5em;
 }
+
 /* To make get-started-page responsive */
 @media (max-width: 780px) {
-  #get-started-page .edit_space .copy_button{
-    left: 6.44em;
-  }
+    #get-started-page .edit_space .copy_button {
+        left: 6.44em;
+    }
 }
+
 @media (max-width: 600px) {
-  #get-started-page .edit_space .copy_button{
-    left: 5.91em;
-  }
+    #get-started-page .edit_space .copy_button {
+        left: 5.91em;
+    }
 }
+
 /*
   //////////////////////////////////////////////////
     EXAMPLES
@@ -1213,7 +1262,7 @@ textarea {
 */
 
 #examples-page .column {
-  margin-bottom: 2em;
+    margin-bottom: 2em;
 }
 
 /*
@@ -1223,344 +1272,345 @@ textarea {
 */
 
 #reference-page main h1 {
-  float: left;
+    float: left;
 }
 
 .reference-group h2 {
-  font-size: 1.5em;
+    font-size: 1.5em;
 }
 
 .reference-group h3 {
-  font-size: 1em;
-  font-family: 'Montserrat', sans-serif;
-  margin-top: 0.5em;
+    font-size: 1em;
+    font-family: 'Montserrat', sans-serif;
+    margin-top: 0.5em;
 }
 
 div.reference-group {
-  display: inline-block;
+    display: inline-block;
 }
 
 div.reference-subgroups {
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
+
 div.reference-subgroup {
-  width: 11em;
-  margin-bottom: 1em;
+    width: 11em;
+    margin-bottom: 1em;
 }
 
 #reference-page .params table p {
-  /* Recently-added support for Markdown means that every parameter
-   * description is wrapped in a paragraph element. (Previously, they weren't
-   * wrapped in any kind of element.)
-   *
-   * We may eventually want to display paragraphs as blocks, so that we
-   * can have lengthy descriptions for parameters, but for now we'll
-   * keep our pre-existing behavior and essentially make paragraphs
-   * "invisible" by rendering them inline. */
-  display: inline;
-  font-size: inherit;
+    /* Recently-added support for Markdown means that every parameter
+     * description is wrapped in a paragraph element. (Previously, they weren't
+     * wrapped in any kind of element.)
+     *
+     * We may eventually want to display paragraphs as blocks, so that we
+     * can have lengthy descriptions for parameters, but for now we'll
+     * keep our pre-existing behavior and essentially make paragraphs
+     * "invisible" by rendering them inline. */
+    display: inline;
+    font-size: inherit;
 }
 
 #reference-page .param-optional {
-  color: #afafaf;
+    color: #afafaf;
 }
 
 #item {
-  width: 100%;
+    width: 100%;
 }
 
 #item h2 {
-  margin: 0.777em 0 0 0;
-  font-size: 1.444em;
-  font-weight: inherit;
-  font-family: 'Inconsolata', consolas, monospace;
-  color: #00a1d3;
+    margin: 0.777em 0 0 0;
+    font-size: 1.444em;
+    font-weight: inherit;
+    font-family: 'Inconsolata', consolas, monospace;
+    color: #00a1d3;
 }
 
 #item h3 {
-  font-size: 1.33em;
-  margin: 1em 0 0 0;
+    font-size: 1.33em;
+    margin: 1em 0 0 0;
 }
 
 #item ul {
-  margin-top: 0.5em;
+    margin-top: 0.5em;
 }
 
 #item li {
-  margin-bottom: 1em;
+    margin-bottom: 1em;
 }
 
 .description {
-  clear: both;
-  display: block;
-  width: 100%;
+    clear: both;
+    display: block;
+    width: 100%;
 }
 
 .syntax pre {
-  width: 100%;
+    width: 100%;
 }
 
 .item-wrapper,
 .list-wrapper {
-  float: left;
-  outline: none;
+    float: left;
+    outline: none;
 }
 
 .paramname {
-  display: inline-block;
-  min-width: 25%;
-  margin-right: 1%;
-  font-size: 1.2em;
+    display: inline-block;
+    min-width: 25%;
+    margin-right: 1%;
+    font-size: 1.2em;
 }
 
 .paramtype p {
-  display: inline;
-  font-size: 1em;
+    display: inline;
+    font-size: 1em;
 }
 
 .paramtype {
-  display: inline-block;
-  font-size: 1.2em;
-  width: 73%;
-  vertical-align: top;
+    display: inline-block;
+    font-size: 1.2em;
+    width: 73%;
+    vertical-align: top;
 }
 
 #library-page .group-name {
-  display: inline-block;
+    display: inline-block;
 }
 
 #library-page .group-name:hover {
-  color: #ed225d;
+    color: #ed225d;
 }
 
 /* EXAMPLES IN REF */
 
 .example div {
-  position: relative;
+    position: relative;
 }
 
 .example-content .example_code {
-  position: relative;
-  left: 1em;
-  padding-top: 0;
-  margin-top: 1rem;
-  border: none;
-  width: 30.5em;
-  max-width: 100%;
+    position: relative;
+    left: 1em;
+    padding-top: 0;
+    margin-top: 1rem;
+    border: none;
+    width: 30.5em;
+    max-width: 100%;
 }
 
 .example-content .example_code.norender {
-  left: 0px;
-  margin-left: 0;
+    left: 0px;
+    margin-left: 0;
 }
 
 .example-content .edit_space {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin-top: -0.5em;
-  width: 100%;
-  pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: -0.5em;
+    width: 100%;
+    pointer-events: none;
 }
 
 .example-content .edit_space * {
-  pointer-events: auto;
+    pointer-events: auto;
 }
 
 .example-content .edit_space ul {
-  display: flex;
-  flex-direction: row-reverse;
-  position: relative;
-  pointer-events: none;
+    display: flex;
+    flex-direction: row-reverse;
+    position: relative;
+    pointer-events: none;
 }
 
 .example-content .edit_space ul li button {
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1em;
-  color: #ccc;
-  border: 1px solid rgba(200, 200, 200, 0.15);
-  background: transparent;
-  outline: none;
-  margin-top: 0.25em;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1em;
+    color: #ccc;
+    border: 1px solid rgba(200, 200, 200, 0.15);
+    background: transparent;
+    outline: none;
+    margin-top: 0.25em;
 }
 
 .example-content .edit_space ul li button:hover,
 .example_container.editing ul li button {
-  color: #2d7bb6;
-  border-color: rgba(45, 123, 182, 0.25);
+    color: #2d7bb6;
+    border-color: rgba(45, 123, 182, 0.25);
 }
 
 .example-content .edit_space .edit_area {
-  position: absolute;
-  top: 0.5em;
-  left: 120px;
-  width: 30.5em;
-  padding-top: 1.5rem;
-  display: none;
+    position: absolute;
+    top: 0.5em;
+    left: 120px;
+    width: 30.5em;
+    padding-top: 1.5rem;
+    display: none;
 }
 
 .display_button {
-  margin-bottom: 2em;
-  font-family: 'Montserrat', sans-serif;
-  font-size: 1em;
-  color: #2d7bb6;
-  border: 1px solid rgba(45, 123, 182, 0.25);
-  background: transparent;
-  outline: none;
+    margin-bottom: 2em;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1em;
+    color: #2d7bb6;
+    border: 1px solid rgba(45, 123, 182, 0.25);
+    background: transparent;
+    outline: none;
 }
 
 .example-content .example_container {
-  width: 36em;
-  max-width: 100%;
-  border-top: 0.09em dashed;
-  border-top-color: #333;
-  padding-top: 0.5em;
-  margin-top: 2em;
-  min-height: 120px;
-  height: calc(100% * 1.1 + 20px);
-  display: flex;
+    width: 36em;
+    max-width: 100%;
+    border-top: 0.09em dashed;
+    border-top-color: #333;
+    padding-top: 0.5em;
+    margin-top: 2em;
+    min-height: 120px;
+    height: calc(100% * 1.1 + 20px);
+    display: flex;
 }
 
 .example-content .example_container:first-of-type {
-  margin-top: 1em;
+    margin-top: 1em;
 }
 
 /*to make ref example responsive*/
 @media (max-width: 600px) {
-  .example-content .example_code {
-    margin-top: 0.2rem;
-    left: 0.5rem;
-  }
-
-  .example-content .example_container {
-    width: 100%;
-    min-height: 220px;
-    height: calc(100% * 1.1 + 120px);
-    display: block;
-  }
-
-  .example-content .edit_space .edit_area {
-    top: calc(120px + 1em);
-    left: 0;
-    width: 100%;
-    padding: 0.5em;
-  }
-
-  .example_container button {
-    top: 124px;
-  }
-
-  .description {
-    margin-top: 3rem;
-  }
-
-  .edit_button {
-    left: 0;
-  }
-
-  .reset_button {
-    left: 2.58em;
-  }
-
-  .copy_button {
-    left: 5.91em;
-  }
+    .example-content .example_code {
+        margin-top: 0.2rem;
+        left: 0.5rem;
+    }
+
+    .example-content .example_container {
+        width: 100%;
+        min-height: 220px;
+        height: calc(100% * 1.1 + 120px);
+        display: block;
+    }
+
+    .example-content .edit_space .edit_area {
+        top: calc(120px + 1em);
+        left: 0;
+        width: 100%;
+        padding: 0.5em;
+    }
+
+    .example_container button {
+        top: 124px;
+    }
+
+    .description {
+        margin-top: 3rem;
+    }
+
+    .edit_button {
+        left: 0;
+    }
+
+    .reset_button {
+        left: 2.58em;
+    }
+
+    .copy_button {
+        left: 5.91em;
+    }
 }
 
 form {
-  pointer-events: all;
+    pointer-events: all;
 }
 
 #search_button {
-  background: url(../img/search.png) 100% no-repeat;
+    background: url(../img/search.png) 100% no-repeat;
 }
 
 #search input[type='text'],
 #search input[type='search'] {
-  border: 1px solid rgba(200, 200, 200, 0.5);
-  font-family: 'Montserrat', sans-serif;
-  font-size: 2.25em;
-  width: 9.75em;
+    border: 1px solid rgba(200, 200, 200, 0.5);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 2.25em;
+    width: 9.75em;
 }
 
 #search ::-webkit-input-placeholder,
 #search .twitter-typeahead .tt-hint {
-  color: #ccc;
+    color: #ccc;
 }
 
 :-moz-placeholder,
 ::-moz-placeholder,
 :-ms-input-placeholder {
-  color: #ccc;
+    color: #ccc;
 }
 
 #search input[type='text']:focus {
-  color: #2d7bb6;
-  outline-color: #2d7bb6;
-  outline-width: 1px;
-  outline-style: solid;
+    color: #2d7bb6;
+    outline-color: #2d7bb6;
+    outline-width: 1px;
+    outline-style: solid;
 }
 
 #search .twitter-typeahead .tt-dropdown-menu {
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  overflow-y: auto;
-  font-size: 1em;
-  line-height: 1.4em;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    overflow-y: auto;
+    font-size: 1em;
+    line-height: 1.4em;
 }
 
 #search .twitter-typeahead .tt-suggestion.tt-cursor {
-  color: #333;
-  background-color: #eee;
+    color: #333;
+    background-color: #eee;
 }
 
 #search .twitter-typeahead .tt-suggestion p {
-  margin: 0;
+    margin: 0;
 }
 
 #search .twitter-typeahead .tt-suggestion p .small {
-  font-size: 12px;
-  color: #666;
+    font-size: 12px;
+    color: #666;
 }
 
 #search {
-  float: right;
+    float: right;
 }
 
 #search .twitter-typeahead .tt-dropdown-menu {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 0.5em;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: 1em;
-  line-height: 1.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 0.5em;
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 1em;
+    line-height: 1.4em;
 }
 
 #search .twitter-typeahead .tt-suggestion {
-  padding: 3px 20px;
-  line-height: 24px;
-  cursor: pointer;
+    padding: 3px 20px;
+    line-height: 24px;
+    cursor: pointer;
 }
 
 #search .twitter-typeahead .empty-message {
-  padding: 8px 20px 1px 20px;
-  font-size: 14px;
-  line-height: 24px;
+    padding: 8px 20px 1px 20px;
+    font-size: 14px;
+    line-height: 24px;
 }
 
 #search_button {
-  float: right;
+    float: right;
 }
 
 a.code.core {
-  color: #333;
+    color: #333;
 }
 
 a.code.addon {
-  color: #704f21;
+    color: #704f21;
 }
 
 /*
@@ -1576,51 +1626,52 @@ a.code.addon {
 */
 
 #contribute-item {
-  font-size: 0.75em;
-  text-align: left;
-  display: inline-block;
-  width: 320px;
-  height: 250px;
-  float: left;
-  border: 1px solid #ed225d;
-  margin: 0 25px 25px 0;
-  position: relative;
+    font-size: 0.75em;
+    text-align: left;
+    display: inline-block;
+    width: 320px;
+    height: 250px;
+    float: left;
+    border: 1px solid #ed225d;
+    margin: 0 25px 25px 0;
+    position: relative;
 }
 
 .contribute-item-container {
-  position: absolute;
-  z-index: 20;
-  margin: 0;
-  padding: 10px;
+    position: absolute;
+    z-index: 20;
+    margin: 0;
+    padding: 10px;
 }
 
 .container {
-  /* width: 100px;*/
-  height: 100px;
-  position: relative;
-  background: white;
-  margin-top: 1.5em; /* temp promo */
+    /* width: 100px;*/
+    height: 100px;
+    position: relative;
+    background: white;
+    margin-top: 1.5em;
+    /* temp promo */
 }
 
 #navi,
 #infoi {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 #infoi {
-  z-index: 10;
+    z-index: 10;
 }
 
 h3.contribute-title {
-  font-size: 1.33em;
-  margin: 0 0 27px 0;
-  padding-bottom: 0.3em;
-  border-bottom: 0.09em dashed;
-  border-bottom-color: #ed225d;
+    font-size: 1.33em;
+    margin: 0 0 27px 0;
+    padding-bottom: 0.3em;
+    border-bottom: 0.09em dashed;
+    border-bottom-color: #ed225d;
 }
 
 /*
@@ -1630,136 +1681,136 @@ h3.contribute-title {
 */
 
 .label {
-  position: relative;
+    position: relative;
 }
 
 .label .nounderline img {
-  margin: 0.5em 0 0 0;
+    margin: 0.5em 0 0 0;
 }
 
 .label h3 {
-  color: white;
-  position: absolute;
-  top: 0;
-  margin: 1em;
+    color: white;
+    position: absolute;
+    top: 0;
+    margin: 1em;
 }
 
 .label:hover h3 {
-  color: #ed225d;
+    color: #ed225d;
 }
 
 h3 {
-  font-size: 1.33em;
-  margin: 1em 0 0 0;
+    font-size: 1.33em;
+    margin: 1em 0 0 0;
 }
 
 .bullet-list {
-  padding: 0 0 0 40px;
-  list-style: disc;
+    padding: 0 0 0 40px;
+    list-style: disc;
 }
 
 #learn-page .label .nounderline img {
-  height: fit-content;
+    height: fit-content;
 }
 
 #learn-page .info {
-  display: inline-block;
+    display: inline-block;
 }
 
 #exampleDisplay,
 #exampleFrame,
 #exampleEditor {
-  width: 36em;
-  border: none;
+    width: 36em;
+    border: none;
 }
 
 #exampleDisplay {
-  display: flex;
-  flex-flow: column;
+    display: flex;
+    flex-flow: column;
 }
 
 #popupExampleFrame {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  border: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    border: none;
 }
 
 #exampleDisplay button {
-  color: #2d7bb6;
-  border-color: rgba(45, 123, 182, 0.25);
-  float: right;
-  margin: 0.5em 0 0 0.5em;
-  background: rgba(255, 255, 255, 0.7);
-  position: absolute;
-  left: 0;
-  z-index: 2;
-}
+    color: #2d7bb6;
+    border-color: rgba(45, 123, 182, 0.25);
+    float: right;
+    margin: 0.5em 0 0 0.5em;
+    background: rgba(255, 255, 255, 0.7);
+    position: absolute;
+    left: 0;
+    z-index: 2;
+}
 
 #exampleDisplay .edit_button {
-  left: 25.42em;
-  top: -2.5em;
+    left: 25.42em;
+    top: -2.5em;
 }
 
 #exampleDisplay .reset_button {
-  left: 28em;
-  top: -2.5em;
+    left: 28em;
+    top: -2.5em;
 }
 
 #exampleDisplay .copy_button {
-  left: 31.33em;
-  top: -2.5em;
+    left: 31.33em;
+    top: -2.5em;
 }
 
 #exampleDisplay button:hover {
-  background: #fff;
+    background: #fff;
 }
 
 #exampleDisplay .edit_space {
-  position: relative;
-  order: 3;
+    position: relative;
+    order: 3;
 }
 
 #exampleDisplay #exampleFrame {
-  height: 22em;
-  order: 2;
+    height: 22em;
+    order: 2;
 }
 
 #exampleDisplay #exampleEditor {
-  height: 500em;
-  width: 710px;
-  overflow: hidden;
-  margin-top: 0.5em;
-  color: #222;
-  font-family: 'Inconsolata', consolas, monospace;
-  font-size: 1em;
-  background-color: #fff;
-  line-height: 1em;
-  order: 4;
+    height: 500em;
+    width: 710px;
+    overflow: hidden;
+    margin-top: 0.5em;
+    color: #222;
+    font-family: 'Inconsolata', consolas, monospace;
+    font-size: 1em;
+    background-color: #fff;
+    line-height: 1em;
+    order: 4;
 }
 
 #exampleDisplay #exampleEditor .ace_gutter-cell {
-  background-image: none;
-  padding-left: 10px;
-  overflow: hidden;
-  background-color: #afafaf;
+    background-image: none;
+    padding-left: 10px;
+    overflow: hidden;
+    background-color: #afafaf;
 }
 
 #exampleDisplay #exampleEditor .ace_gutter-cell.ace_info {
-  background-color: #d7e5f5;
+    background-color: #d7e5f5;
 }
 
 #exampleDisplay #exampleEditor .ace_gutter-cell.ace_warning {
-  background-color: #ffd700;
-  color: #ffffff;
+    background-color: #ffd700;
+    color: #ffffff;
 }
 
 #exampleDisplay #exampleEditor .ace_gutter-cell.ace_error {
-  background-color: #ff6347;
-  color: #ffffff;
+    background-color: #ff6347;
+    color: #ffffff;
 }
 
 /* property, tag, boolean,
@@ -1768,8 +1819,8 @@ h3 {
 
 #exampleDisplay #exampleEditor .ace_numeric,
 #exampleDisplay #exampleEditor .ace_tag {
-  color: #dc3787;
-  /* not p5 pink, but related */
+    color: #dc3787;
+    /* not p5 pink, but related */
 }
 
 /* atrule, attr-value, keyword,
@@ -1778,8 +1829,8 @@ h3 {
 #exampleDisplay #exampleEditor .ace_type,
 #exampleDisplay #exampleEditor .ace_class,
 #exampleDisplay #exampleEditor .ace_attribute-name {
-  color: #704f21;
-  /* darker brown */
+    color: #704f21;
+    /* darker brown */
 }
 
 /* selector, attr-name,
@@ -1788,55 +1839,55 @@ function, builtin */
 #exampleDisplay #exampleEditor .ace_function,
 #exampleDisplay #exampleEditor .ace_keyword,
 #exampleDisplay #exampleEditor .ace_support {
-  color: #00a1d3;
-  /* not p5 blue, but related */
+    color: #00a1d3;
+    /* not p5 blue, but related */
 }
 
 /* comment, block-comment, prolog,
    doctype, cdata */
 
 #exampleDisplay #exampleEditor .ace_comment {
-  color: #a0a0a0;
-  /* light gray */
+    color: #a0a0a0;
+    /* light gray */
 }
 
 /* operator, entity, url,
 variable */
 
 #exampleDisplay #exampleEditor .ace_string {
-  color: #a67f59;
-  /* og coy a67f59 a light brown */
+    color: #a67f59;
+    /* og coy a67f59 a light brown */
 }
 
 #exampleDisplay #exampleEditor .ace_operator {
-  color: #333;
+    color: #333;
 }
 
 /* regex, important */
 
 #exampleDisplay #exampleEditor .ace_regexp {
-  color: #e90;
-  /* og coy e90 orange */
+    color: #e90;
+    /* og coy e90 orange */
 }
 
 #exampleDisplay #exampleEditor .ace-gutter {
-  color: #333;
+    color: #333;
 }
 
 #exampleDisplay #exampleEditor .ace-gutter-layer {
-  color: #333;
+    color: #333;
 }
 
 #exampleDisplay #exampleEditor .ace_folding-enabled {
-  width: 10px !important;
-  color: #333;
+    width: 10px !important;
+    color: #333;
 }
 
 .attribution {
-  background-color: #eee;
-  font-size: 15px;
-  padding: 10px;
-  margin: 30px 0px 30px 0px;
+    background-color: #eee;
+    font-size: 15px;
+    padding: 10px;
+    margin: 30px 0px 30px 0px;
 }
 
 /*
@@ -1845,149 +1896,162 @@ variable */
   //////////////////////////////////////////////////
 */
 #featuring {
-  margin-bottom: 1em;
+    margin-bottom: 1em;
 }
 
 #showcase-page .showcase-intro h1 {
-  font: italic 900 14.5vw 'Montserrat', sans-serif;
-  color: #ed225d;
-  text-align: left;
-  text-transform: uppercase;
+    font: italic 900 14.5vw 'Montserrat', sans-serif;
+    color: #ed225d;
+    text-align: left;
+    text-transform: uppercase;
 }
 
 #showcase-page .showcase-intro p {
-  font: 400 1.4rem 'Montserrat', sans-serif;
-  line-height: 1.5em;
+    font: 400 1.4rem 'Montserrat', sans-serif;
+    line-height: 1.5em;
 }
 
 #showcase-page .showcase-featured h2,
 #showcase-page .project-page h2 {
-  font: italic 900 2rem 'Montserrat', sans-serif;
-  color: #ed225d;
-  letter-spacing: 0.05rem;
+    font: italic 900 2rem 'Montserrat', sans-serif;
+    color: #ed225d;
+    letter-spacing: 0.05rem;
 }
 
 #showcase-page ul.left-column,
 #showcase-page ul.right-column,
 #showcase-page ul.project-tags,
 #showcase-page ul.links {
-  list-style: none;
+    list-style: none;
 }
 
 #showcase-page img[alt] {
-  font-size: 0.9rem;
+    font-size: 0.9rem;
 }
 
 #showcase-page .showcase-featured {
-  margin-top: 15%;
+    margin-top: 15%;
 }
 
 #showcase-page .showcase-featured h3.title {
-  font: italic 900 1rem 'Montserrat', sans-serif;
+    font: italic 900 1rem 'Montserrat', sans-serif;
 }
 
 #showcase-page .showcase-featured p.credit {
-  font: 500 1rem 'Montserrat', sans-serif;
+    font: 500 1rem 'Montserrat', sans-serif;
 }
 
 #showcase-page .showcase-featured p.description {
-  font-size: 1em;
-  margin-bottom: 0.5rem;
+    font-size: 1em;
+    margin-bottom: 0.5rem;
 }
 
 #showcase-page .nominate {
-  margin-top: 1.5em;
-  display: inline-block;
+    margin-top: 1.5em;
+    display: inline-block;
 }
 
 #showcase-page .nominate a,
 #showcase-page .nominate a:visited {
-  padding: 0.4em 0.5em;
-  position: relative;
-  top: 0px;
-  left: 0px;
-  border: solid #ed225d 2px;
-  box-shadow: 4px 4px 0 #ed225d;
+    padding: 0.4em 0.5em;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    border: solid #ed225d 2px;
+    box-shadow: 4px 4px 0 #ed225d;
 
-  font: 1.5rem 'Montserrat', sans-serif;
-  color: #ed225d;
-  letter-spacing: 0.02rem;
-  transition: all 0.3s;
+    font: 1.5rem 'Montserrat', sans-serif;
+    color: #ed225d;
+    letter-spacing: 0.02rem;
+    transition: all 0.3s;
 }
 
 @media (max-width: 500px) {
-  #showcase-page .nominate a,
-  #showcase-page .nominate a:visited {
-    padding: 0.4em 0.3em;
-    font: 1.3rem 'Montserrat', sans-serif;
-  }
+
+    #showcase-page .nominate a,
+    #showcase-page .nominate a:visited {
+        padding: 0.4em 0.3em;
+        font: 1.3rem 'Montserrat', sans-serif;
+    }
+
+    #processing-sites li:last-child {
+        display: none;
+    }
 }
 
 #showcase-page .nominate a:hover {
-  top: 4px;
-  left: 4px;
-  box-shadow: none;
+    top: 4px;
+    left: 4px;
+    box-shadow: none;
 }
 
 #showcase-page .showcase-featured a,
 #showcase-page .showcase-featured a:visited {
-  font-size: 1.2rem;
-  color: #ed225d;
-  letter-spacing: 0.02rem;
-  line-height: 1.5;
+    font-size: 1.2rem;
+    color: #ed225d;
+    letter-spacing: 0.02rem;
+    line-height: 1.5;
 }
 
 #showcase-page .showcase-featured a::after {
-  content: ' →';
+    content: ' →';
 }
+
 #showcase-page .showcase-featured a.tag::after {
-  content: '';
+    content: '';
 }
+
 #showcase-page .showcase-featured .no-arrow-link::after {
-  content: ' ';
+    content: ' ';
 }
 
 #showcase-page .showcase-featured .no-arrow-link:hover {
-  text-decoration: none;
-  padding: none;
-  border: none;
+    text-decoration: none;
+    padding: none;
+    border: none;
 }
 
 .project-info {
-  margin-top: 1em;
+    margin-top: 1em;
 }
 
 ul.project-tags a {
-  line-height: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-  font-size: 0.5em;
-  margin: 0px;
+    line-height: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    font-size: 0.5em;
+    margin: 0px;
 }
+
 h3.title {
-  margin-top: 3em;
+    margin-top: 3em;
 }
+
 #showcase-page ul.project-tags li {
-  margin: 5px;
-  display: inline-block;
+    margin: 5px;
+    display: inline-block;
 }
+
 h2.featuring {
-  margin-top: 0px;
+    margin-top: 0px;
 }
+
 #showcase-page a.tag {
-  display: inline-block;
-  padding: 6px 14px;
-  background-color: #ffe8e8;
-  border-radius: 27px;
-  font: 0.7rem 'Montserrat', sans-serif;
-  color: #333;
+    display: inline-block;
+    padding: 6px 14px;
+    background-color: #ffe8e8;
+    border-radius: 27px;
+    font: 0.7rem 'Montserrat', sans-serif;
+    color: #333;
 }
+
 #showcase-page ul.project-tags li {
-  margin: 0px;
+    margin: 0px;
 }
+
 /*
   //////////////////////////////////////////////////
     SHOWCASE - FEATURED PROJECT PAGE
@@ -2008,99 +2072,99 @@ h2.featuring {
 }
 */
 
-#showcase-page{
-  margin-top: 3em;
+#showcase-page {
+    margin-top: 3em;
 }
 
 #showcase-page .project-page h2 {
-  line-height: 1.4;
+    line-height: 1.4;
 }
 
 @media (min-width: 720px) {
-  /* for desktop/tablet:
-   *   - two columns, one each for resources & authors
-   *   - indent answer paragraphs in q & a
-   */
 
-  #showcase-page .showcase-intro h1 {
-    font: italic 900 6.35vw 'Montserrat', sans-serif;
-  }
+    /* for desktop/tablet:
+     *   - two columns, one each for resources & authors
+     *   - indent answer paragraphs in q & a
+     */
+    #showcase-page .showcase-intro h1 {
+        font: italic 900 6.35vw 'Montserrat', sans-serif;
+    }
 
-  #showcase-page .showcase-intro p {
-    line-height: 1.75em;
-    font-size: 1em;
-  }
+    #showcase-page .showcase-intro p {
+        line-height: 1.75em;
+        font-size: 1em;
+    }
 
-  #showcase-page .project-metadata {
-    display: flex;
-  }
+    #showcase-page .project-metadata {
+        display: flex;
+    }
 
-  #showcase-page .project-resources {
-    margin-left: 3rem;
-  }
+    #showcase-page .project-resources {
+        margin-left: 3rem;
+    }
 
-  #showcase-page .project-a {
-    width: 90%;
-    float: right;
-    display: inline-block;
-    clear: both;
-  }
+    #showcase-page .project-a {
+        width: 90%;
+        float: right;
+        display: inline-block;
+        clear: both;
+    }
 
-  #showcase-page .half-image {
-    width: 48%;
-  }
+    #showcase-page .half-image {
+        width: 48%;
+    }
 }
 
 #showcase-page .project-metadata {
-  margin-top: 3%;
+    margin-top: 3%;
 }
 
 #showcase-page .project-metadata section h3 {
-  color: #ed225d;
-  font: bold italic 1rem 'Montserrat', sans-serif;
+    color: #ed225d;
+    font: bold italic 1rem 'Montserrat', sans-serif;
 }
 
 #showcase-page .project-resources ul.links {
-  font: 500 0.7rem 'Montserrat', sans-serif;
-  letter-spacing: 0.01rem;
-  line-height: 1.5;
-  margin: 0.5rem 0;
+    font: 500 0.7rem 'Montserrat', sans-serif;
+    letter-spacing: 0.01rem;
+    line-height: 1.5;
+    margin: 0.5rem 0;
 }
 
 #showcase-page .project-credit {
-  font: italic bold 1.25rem 'Montserrat', sans-serif;
+    font: italic bold 1.25rem 'Montserrat', sans-serif;
 }
 
 #showcase-page .project-credit p {
-  margin: 0.5rem 0;
+    margin: 0.5rem 0;
 }
 
 #showcase-page .note {
-  font-size: 0.7rem;
+    font-size: 0.7rem;
 }
 
 #showcase-page .creator-from {
-  font-size: 0.7rem;
+    font-size: 0.7rem;
 }
 
-#showcase-page .qa-group{
-  margin-bottom: 2em;
+#showcase-page .qa-group {
+    margin-bottom: 2em;
 }
 
 #showcase-page .project-q {
-  margin-left: 0%;
-  display: inline-block;
-  clear: both;
-  /*
-  font-size: 1.2rem;
-  font-weight: 900;
-  */
-  font: 900 1.2rem 'Montserrat', sans-serif;
-  line-height: 1.5;
+    margin-left: 0%;
+    display: inline-block;
+    clear: both;
+    /*
+    font-size: 1.2rem;
+    font-weight: 900;
+    */
+    font: 900 1.2rem 'Montserrat', sans-serif;
+    line-height: 1.5;
 }
 
 #showcase-page code {
-  font-size: 1.1rem;
+    font-size: 1.1rem;
 }
 
 
@@ -2109,85 +2173,83 @@ h2.featuring {
    ========================================================================== */
 
 #teach-page .case-list a:hover {
-  border-bottom: none;
+    border-bottom: none;
 }
 
 #teach-page .heading {
-  font: 400 1.4rem "Montserrat", sans-serif;
-  color: black;
-  line-height: 1.2em;
-  padding-bottom: .4em;
-  border-bottom: 4px dotted #ed225d;
+    font: 400 1.4rem "Montserrat", sans-serif;
+    color: black;
+    line-height: 1.2em;
+    padding-bottom: .4em;
+    border-bottom: 4px dotted #ed225d;
 }
 
-#teach-page h3.title{
-  margin-top: 3em;
+#teach-page h3.title {
+    margin-top: 3em;
 }
 
 /*search-filter label*/
 
 #teach-page .search-filter {
-  display: inline;
+    display: inline;
 }
 
 #teach-page .search-filter label {
-  display: inline-block;
-  font: italic 900 1rem "Montserrat", sans-serif;
-  padding: 6px 12px;
-  text-align: left;
-  white-space: nowrap;
-  color: #ed225d;
-  /*transition: .2s; */
-  margin-bottom: .6em;
-  margin-top: 1.2em;
-  border: 1px solid #ed225d;
+    display: inline-block;
+    font: italic 900 1rem "Montserrat", sans-serif;
+    padding: 6px 12px;
+    text-align: left;
+    white-space: nowrap;
+    color: #ed225d;
+    /*transition: .2s; */
+    margin-bottom: .6em;
+    margin-top: 1.2em;
+    border: 1px solid #ed225d;
 
 
 }
 
 #teach-page .search-filter label {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 
 #teach-page .search-filter label:hover {
-  color: white;
-  background-color: #ed225d;
+    color: white;
+    background-color: #ed225d;
 }
 
 
 #teach-page .search-filter input[type="checkbox"] {
-  display: absolute;
+    display: absolute;
 }
 
 
 #teach-page .search-filter input[type="checkbox"] {
-  position: absolute;
-  opacity: 0;
+    position: absolute;
+    opacity: 0;
 }
 
 
 #teach-page ul.filters p.filter-title {
-  font: 400 0.83rem "Montserrat", sans-serif;
-  color: #ed225d;
-  height: 50px;
-  padding-top:20px;
-  background: none;
-  background-color: none;
-  box-shadow: none;
-  display: inline-block;
-  border: none;
-  clear: both;
+    font: 400 0.83rem "Montserrat", sans-serif;
+    color: #ed225d;
+    height: 50px;
+    padding-top: 20px;
+    background: none;
+    background-color: none;
+    box-shadow: none;
+    display: inline-block;
+    border: none;
+    clear: both;
 
 }
 
 
-
-
 #teach-page ul.filters li {
-  display: inline;
-  list-style: none;
-  width: 100%;
+    display: inline;
+    list-style: none;
+    width: 100%;
 }
 
 #teach-page ul.filters li label {
@@ -2213,7 +2275,8 @@ h2.featuring {
 
 #teach-page ul.filters li label::before {
     display: inline-block;
-    padding: 2px 2px 2px 2px; /*padding among labels*/
+    padding: 2px 2px 2px 2px;
+    /*padding among labels*/
 }
 
 #teach-page ul.filters li label:hover {
@@ -2221,24 +2284,24 @@ h2.featuring {
     background: #ffe8e8;
     /*transform: translateY(2px);*/
 
- }
+}
 
-#teach-page ul.filters li input[type="checkbox"]:checked + label {
+#teach-page ul.filters li input[type="checkbox"]:checked+label {
     color: white;
     background: #ed225d;
 
 }
 
 #teach-page ul.filters li input[type="checkbox"] {
-  display: absolute;
-  position: absolute;
-  opacity: 0;
+    display: absolute;
+    position: absolute;
+    opacity: 0;
 }
 
 
-#teach-page ul.filters li.clear{
-  display: block;
-  clear: both;
+#teach-page ul.filters li.clear {
+    display: block;
+    clear: both;
 
 }
 
@@ -2246,189 +2309,190 @@ h2.featuring {
 /*Filter Panel*/
 
 #teach-page .filter-panel {
-  padding: 0px;
-  background-color: white;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
-  margin-bottom: 0.8em;
-  padding-bottom: .4em;
+    padding: 0px;
+    background-color: white;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    margin-bottom: 0.8em;
+    padding-bottom: .4em;
 
 }
 
 
-
 #teach-page .filter-panel p {
-  margin: 0;
-  color: #333;
-  font-size: .83em;
-  height: 50px;
-  padding-top:20px;
-  transition: all 0.5s ease-in-out;
+    margin: 0;
+    color: #333;
+    font-size: .83em;
+    height: 50px;
+    padding-top: 20px;
+    transition: all 0.5s ease-in-out;
 }
 
 
- /*p5 workshop and class title*/
+/*p5 workshop and class title*/
 #teach-page .teach-intro p {
-  font: 400 1.2rem "Times", sans-serif;
-  line-height: 1.5em;
+    font: 400 1.2rem "Times", sans-serif;
+    line-height: 1.5em;
 }
 
 
 /*modal box*/
 
-#teach-page .modal-title{
+#teach-page .modal-title {
 
-  margin-left: 1em;
-  margin-right: 1em;
+    margin-left: 1em;
+    margin-right: 1em;
 
-  font: 400 1rem "Montserrat", sans-serif;
-  color: #ed225d;
-  line-height: 1.2em;
+    font: 400 1rem "Montserrat", sans-serif;
+    color: #ed225d;
+    line-height: 1.2em;
 
 }
 
-#teach-page ul.cases li.clear{
-  display: block;
-  clear: both;
-  margin-top: 1em;
-  margin-bottom: 1.2em;
+#teach-page ul.cases li.clear {
+    display: block;
+    clear: both;
+    margin-top: 1em;
+    margin-bottom: 1.2em;
 }
 
 
-#teach-page img{
-  margin-bottom: 1.4em;
+#teach-page img {
+    margin-bottom: 1.4em;
 }
 
-#teach-page img[alt]{
-  font: 0.6rem "Montserrat", sans-serif;
-  color: #bababa;
+#teach-page img[alt] {
+    font: 0.6rem "Montserrat", sans-serif;
+    color: #bababa;
 
 }
 
 #teach-page .close {
-  position: relative;
-  color: #ffc7c7;
-  float: right;
-  font-size: 40px;
-  font-weight: bold;
-  margin-right: .4em;
-  margin-top: .4em;
-  cursor:pointer;
-}
-
-#teach-page .close:hover, .close:focus {
-  color: #ed225d;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-#teach-page .case label{
-  margin-left: 1em;
-  margin-right: 1em;
-  margin: 2px 2px;
-  padding: 5px 8px;
-  display: inline-block;
-  border-radius: 25px;
-  font: 0.7rem "Montserrat", sans-serif;
-  color: #aaaaaa;
-  white-space: nowrap;
-  color: white;
-  background: #ed225d;
+    position: relative;
+    color: #ffc7c7;
+    float: right;
+    font-size: 40px;
+    font-weight: bold;
+    margin-right: .4em;
+    margin-top: .4em;
+    cursor: pointer;
+}
+
+#teach-page .close:hover,
+.close:focus {
+    color: #ed225d;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#teach-page .case label {
+    margin-left: 1em;
+    margin-right: 1em;
+    margin: 2px 2px;
+    padding: 5px 8px;
+    display: inline-block;
+    border-radius: 25px;
+    font: 0.7rem "Montserrat", sans-serif;
+    color: #aaaaaa;
+    white-space: nowrap;
+    color: white;
+    background: #ed225d;
 }
 
 /*modal scrollbar*/
 
 #teach-page .modal-body::-webkit-scrollbar {
 
-  width: 5px;
-  height: 5px;
-  border-radius: 10px;
+    width: 5px;
+    height: 5px;
+    border-radius: 10px;
 }
 
 #teach-page .modal-body::-webkit-scrollbar-track {
-  background: #f1f1f1;
+    background: #f1f1f1;
 }
 
 #teach-page .modal-body::-webkit-scrollbar-thumb {
-  background: #ffe8e8;
+    background: #ffe8e8;
 }
 
 /*modal contents*/
 
-#teach-page .case{
-  margin-left: 2em;
-  margin-right:2em;
+#teach-page .case {
+    margin-left: 2em;
+    margin-right: 2em;
 }
 
 #teach-page .case span {
-  color: #ed225d;
-  font: 900 1.4rem "Montserrat", sans-serif;
+    color: #ed225d;
+    font: 900 1.4rem "Montserrat", sans-serif;
 }
 
 
-#teach-page .case p.lead-name{
-  font: 900 Italic 1.2rem "Montserrat", sans-serif;
-  color: #ed225d;
-  line-height: 1.4em;
-  border-bottom: 1.4em;
+#teach-page .case p.lead-name {
+    font: 900 Italic 1.2rem "Montserrat", sans-serif;
+    color: #ed225d;
+    line-height: 1.4em;
+    border-bottom: 1.4em;
 }
 
-#teach-page .case .speech{
+#teach-page .case .speech {
 
-  position: relative;
-  font: 200 Italic .8rem "Montserrat", sans-serif;
-  color: black; /*#aaaaaa; */
-  background: #ffe8e8;
-  padding: 0.5em 1.2em;
-  border-radius: .4em;
-  border-bottom: none;
-  margin-bottom: 2em;
-  margin-top: 1em;
+    position: relative;
+    font: 200 Italic .8rem "Montserrat", sans-serif;
+    color: black;
+    /*#aaaaaa; */
+    background: #ffe8e8;
+    padding: 0.5em 1.2em;
+    border-radius: .4em;
+    border-bottom: none;
+    margin-bottom: 2em;
+    margin-top: 1em;
 
 
 }
 
 #teach-page .case .speech::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 8%;
-  width: 0;
-  height: 0;
-  border: 10px solid transparent;
-  border-bottom-color: #ffe8e8;
-  border-top: 0;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-
-#teach-page .case p.subtitle{
-
-  font: 400 1rem "Montserrat", sans-serif;
-  color: #ed225d;
-  line-height: 1.4em;
-  border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 8%;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    border-bottom-color: #ffe8e8;
+    border-top: 0;
+    margin-left: -10px;
+    margin-top: -10px;
 }
 
-#teach-page .case p{
-  font: 400 1rem "Times", sans-serif;
-  color: black;
-  line-height: 1.4em;
+#teach-page .case p.subtitle {
 
-  border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
+    font: 400 1rem "Montserrat", sans-serif;
+    color: #ed225d;
+    line-height: 1.4em;
+    border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
+}
+
+#teach-page .case p {
+    font: 400 1rem "Times", sans-serif;
+    color: black;
+    line-height: 1.4em;
+
+    border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
 
 }
 
-#teach-page .modal-header{
+#teach-page .modal-header {
 
-  margin-bottom: 0.8em;
+    margin-bottom: 0.8em;
 }
 
 
-#teach-page .modal-footer{
+#teach-page .modal-footer {
 
-  margin-bottom: 0.8em;
+    margin-bottom: 0.8em;
 }
 
 /*#teach-page .modal-body p{
@@ -2436,83 +2500,87 @@ h2.featuring {
 
 }*/
 
-#teach-page .modal-body:-webkit-scrollbar{
-  display: none;
+#teach-page .modal-body:-webkit-scrollbar {
+    display: none;
 }
 
 
 #teach-page .modal {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-  top:0;
-  left:0;
-  right:0;
-  overflow: auto;
-  box-sizing: border-box;
-  background-color: rgba(255, 232, 232, 0.5); /* Fallback color */
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
+    box-sizing: border-box;
+    background-color: rgba(255, 232, 232, 0.5);
+    /* Fallback color */
 
 }
 
-#teach-page .modal-content{
-  position: fixed;
-  background: white;
-  top: 2%;
-  left: 2%;
-  right: 2%;
-  bottom: 2%;
-  margin: auto; /*keep centered*/
-  border: 1.2px solid #ffe8e8;
-  max-width: 740px;
-  box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
-  box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5);
-  box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);
+#teach-page .modal-content {
+    position: fixed;
+    background: white;
+    top: 2%;
+    left: 2%;
+    right: 2%;
+    bottom: 2%;
+    margin: auto;
+    /*keep centered*/
+    border: 1.2px solid #ffe8e8;
+    max-width: 740px;
+    box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
+    box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5);
+    box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);
 }
 
-#teach-page .modal-body{
+#teach-page .modal-body {
 
-  margin: auto;
-  height: 85%;
-  width: 95%;
-  overflow-y: auto;
+    margin: auto;
+    height: 85%;
+    width: 95%;
+    overflow-y: auto;
 
 }
 
-#teach-page .results-wrapper{
-  width: 100%;
-  outline: none;
-  background: white;
-  /*background: white;
-  background: #fafafa;*/
-  /*border: solid white 1px;*/
-  /*background: -webkit-linear-gradient(to bottom, white, #fafafa);
-  background: linear-gradient(to bottom, white, #fafafa);*/
-  /*border: 1px solid #ffe8e8;*/
-  /*box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
-  box-shadow: 10px 100px 20px -17px rgba(255, 232, 232, 0.5);
-  box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);*/
+#teach-page .results-wrapper {
+    width: 100%;
+    outline: none;
+    background: white;
+    /*background: white;
+    background: #fafafa;*/
+    /*border: solid white 1px;*/
+    /*background: -webkit-linear-gradient(to bottom, white, #fafafa);
+    background: linear-gradient(to bottom, white, #fafafa);*/
+    /*border: 1px solid #ffe8e8;*/
+    /*box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
+    box-shadow: 10px 100px 20px -17px rgba(255, 232, 232, 0.5);
+    box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);*/
 
 
 }
 
 #teach-page .results-wrapper ul li.case-list a.myBtn {
 
-  overflow: hidden;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
 }
 
-#teach-page .case-list{
+#teach-page .case-list {
 
-  margin-bottom: 0.8em;
-  padding-bottom: .4em;
+    margin-bottom: 0.8em;
+    padding-bottom: .4em;
 
-  font: 400 1.0rem "Times", sans-serif;
-  line-height: 1.2em;
+    font: 400 1.0rem "Times", sans-serif;
+    line-height: 1.2em;
 
-  border-bottom: 0.1em dashed #ffe8e8;
+    border-bottom: 0.1em dashed #ffe8e8;
 
 }
 
@@ -2525,31 +2593,31 @@ h2.featuring {
 *,
 *:before,
 *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 html {
-  font-size: 1.25em;
+    font-size: 1.25em;
 }
 
 body {
-  margin: 0;
-  background-color: #fff;
-  font-family: 'Times';
-  font-weight: 400;
-  line-height: 1.45;
-  color: #333;
+    margin: 0;
+    background-color: #fff;
+    font-family: 'Times';
+    font-weight: 400;
+    line-height: 1.45;
+    color: #333;
 }
 
 p {
-  font-size: 1.2em;
-  margin: 0.5em 0;
+    font-size: 1.2em;
+    margin: 0.5em 0;
 }
 
 .freeze {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 /* menu links  */
@@ -2558,58 +2626,58 @@ p {
 #menu li a:visited,
 #menu li a:focus:active,
 #menu li a:focus:hover {
-  color: #ed225d;
-  /* gray #333;
-    og p5 pink #ED225D;
-    blue #2D7BB6 (a lighter Processing blue — it's our take on it) */
-  /*outline: none !important; keep on for accessibility */
-  background: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    color: #ed225d;
+    /* gray #333;
+      og p5 pink #ED225D;
+      blue #2D7BB6 (a lighter Processing blue — it's our take on it) */
+    /*outline: none !important; keep on for accessibility */
+    background: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 /* body links  */
 
 a:link,
 a:visited {
-  color: #2d7bb6;
-  text-decoration: none;
-  /*outline: none !important; keep on for accessibility */
+    color: #2d7bb6;
+    text-decoration: none;
+    /*outline: none !important; keep on for accessibility */
 }
 
 a:active,
 a:hover,
 #reference a:hover {
-  color: #ed225d;
-  text-decoration: none;
-  padding-bottom: 0.11em;
-  border-bottom: 0.11em dashed;
-  border-bottom-color: #ed225d;
-  transition: border-bottom 30ms linear;
+    color: #ed225d;
+    text-decoration: none;
+    padding-bottom: 0.11em;
+    border-bottom: 0.11em dashed;
+    border-bottom-color: #ed225d;
+    transition: border-bottom 30ms linear;
 }
 
 a.nounderline:hover {
-  border: none;
+    border: none;
 }
 
 a.here {
-  color: #ed225d;
-  text-decoration: none;
-  padding-bottom: 0.1em;
-  border-bottom: transparent;
-  border-bottom-color: #ed225d;
+    color: #ed225d;
+    text-decoration: none;
+    padding-bottom: 0.1em;
+    border-bottom: transparent;
+    border-bottom-color: #ed225d;
 }
 
 .highlight {
-  background-color: rgba(237, 34, 93, 0.15);
+    background-color: rgba(237, 34, 93, 0.15);
 }
 
-.container > div:first-of-type {
-  margin-top: 2em;
+.container>div:first-of-type {
+    margin-top: 2em;
 }
 
 h1,
@@ -2617,41 +2685,41 @@ h2,
 h3,
 h4,
 h5 {
-  margin: 1.414em 0 0.5em 0;
-  font-weight: inherit;
-  line-height: 1.2;
-  font-family: 'Montserrat', sans-serif;
+    margin: 1.414em 0 0.5em 0;
+    font-weight: inherit;
+    line-height: 1.2;
+    font-family: 'Montserrat', sans-serif;
 }
 
 h1 {
-  font-size: 2.25em;
-  /* 2.369em  */
-  margin: 0;
+    font-size: 2.25em;
+    /* 2.369em  */
+    margin: 0;
 }
 
 h2 {
-  font-size: 1.5em;
-  /* 1.777em */
-  margin: 1em 0 0 0;
+    font-size: 1.5em;
+    /* 1.777em */
+    margin: 1em 0 0 0;
 }
 
 .code {
-  font-family: 'Inconsolata', consolas, monospace;
+    font-family: 'Inconsolata', consolas, monospace;
 }
 
 #backlink {
-  margin: 1.2em 0.444em 0 0;
-  font-family: 'Montserrat', sans-serif;
-  float: right;
+    margin: 1.2em 0.444em 0 0;
+    font-family: 'Montserrat', sans-serif;
+    float: right;
 }
 
 #backlink a {
-  color: #afafaf;
+    color: #afafaf;
 }
 
 #backlink a:hover {
-  color: #ed225d;
-  border-bottom: none;
+    color: #ed225d;
+    border-bottom: none;
 }
 
 /*
@@ -2662,241 +2730,241 @@ h2 {
 
 #promo,
 #promo:visited {
-  width: 100%;
-  background: palegreen;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  padding: 0.4em 0;
-  background: rgb(116, 255, 183);
-  background: radial-gradient(
-    circle,
-    rgba(116, 255, 183, 1) 0%,
-    rgba(138, 255, 242, 1) 100%
-  );
-  font-family: 'Montserrat', sans-serif;
-  color: #ed225d !important;
+    width: 100%;
+    background: palegreen;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    padding: 0.4em 0;
+    background: rgb(116, 255, 183);
+    background: radial-gradient(circle,
+            rgba(116, 255, 183, 1) 0%,
+            rgba(138, 255, 242, 1) 100%);
+    font-family: 'Montserrat', sans-serif;
+    color: #ed225d !important;
 }
 
 #promo:hover {
-  background: #ed225d;
-  color: white !important;
+    background: #ed225d;
+    color: white !important;
 }
 
 #promo-link {
-  margin: 0 !important;
-  padding: 0;
+    margin: 0 !important;
+    padding: 0;
 }
 
 #family a:link,
 #family a:visited {
-  margin: 0.4em;
+    margin: 0.4em;
 }
 
 #family a:hover,
 #family a:active {
-  margin: 0.4em;
-  border: none;
+    margin: 0.4em;
+    border: none;
 }
 
 #family {
-  position: absolute;
-  z-index: 9999;
-  top: 0;
-  left: 0;
-  /*padding: 0.5em 2em;*/
-  width: 100%;
-  /* 96, 100% if fixed*/
-  border-bottom: 1px solid;
-  overflow: none;
-  margin: 0;
-  border-bottom-color: rgba(51, 51, 51, 0.5);
-  -webkit-box-shadow: 0px 0px 10px #333;
-  -moz-box-shadow: 0px 0px 10px #333;
-  box-shadow: 0px 0px 10px #333;
-  background-color: rgba(255, 255, 255, 0.85);
-  /* */
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    /*padding: 0.5em 2em;*/
+    width: 100%;
+    /* 96, 100% if fixed*/
+    border-bottom: 1px solid;
+    overflow: none;
+    margin: 0;
+    border-bottom-color: rgba(51, 51, 51, 0.5);
+    -webkit-box-shadow: 0px 0px 10px #333;
+    -moz-box-shadow: 0px 0px 10px #333;
+    box-shadow: 0px 0px 10px #333;
+    background-color: rgba(255, 255, 255, 0.85);
+    /* */
 }
 
 #processing-sites {
-  margin: 0.375em 0;
+    margin: 0.375em 0;
 }
 
 #processing-sites li {
-  list-style: none;
-  display: inline-block;
-  margin: 0;
+    list-style: none;
+    display: inline-block;
+    margin: 0;
 }
 
 #processing-sites li:first-child {
-  margin-left: 2em;
+    margin-left: 2em;
 }
 
 #processing-sites li:last-child {
-  float: right;
-  margin-right: 2em;
+    float: right;
+    margin-right: 2em;
 }
 
 .code-snippet {
-  margin: 0 0 0 1em;
-  width: 90%;
-  clear: both;
+    margin: 0 0 0 1em;
+    width: 90%;
+    clear: both;
 }
 
 .column-span {
-  margin: 0 0 0 1em;
-  padding: 0;
-  float: left;
-  max-width: 100%;
+    margin: 0 0 0 1em;
+    padding: 0;
+    float: left;
+    max-width: 100%;
 }
 
 .method_description p {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 main {
-  padding: 0;
+    padding: 0;
 }
 
 .spacer {
-  clear: both;
+    clear: both;
 }
 
 ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 ol {
-  font-size: 1.2em;
+    font-size: 1.2em;
 }
 
 li {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 ul.list_view {
-  margin: 0.5em 0 0 1em;
-  padding: 0;
-  list-style: disc;
-  list-style-position: outside;
-  font-size: 1.2em;
+    margin: 0.5em 0 0 1em;
+    padding: 0;
+    list-style: disc;
+    list-style-position: outside;
+    font-size: 1.2em;
 }
 
 ol ul.list_view {
-  font-size: 1em;
+    font-size: 1em;
 }
 
 ul.inside {
-  margin: 0 0 0 2em;
-  padding: 0;
-  list-style: disc;
-  list-style-position: inside;
+    margin: 0 0 0 2em;
+    padding: 0;
+    list-style: disc;
+    list-style-position: inside;
 }
 
 .image-row img {
-  width: 48%;
-  height: 14.3%;
+    width: 48%;
+    height: 14.3%;
 }
 
-.image-row img + img {
-  float: right;
-  margin-right: 0;
-  margin-bottom: 0.25em;
+.image-row img+img {
+    float: right;
+    margin-right: 0;
+    margin-bottom: 0.25em;
 }
 
 img,
 main div img {
-  margin: 0.5em 0.5em 0 0;
-  width: 100%;
+    margin: 0.5em 0.5em 0 0;
+    width: 100%;
 }
 
-p + img {
-  margin-top: 0;
+p+img {
+    margin-top: 0;
 }
 
 .video {
-  width: 100%;
+    width: 100%;
 }
 
 #lockup {
-  position: absolute;
-  top: -5.75em;
-  left: 1.25em;
-  height: 0px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    position: absolute;
+    top: -5.75em;
+    left: 1.25em;
+    height: 0px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 #lockup object {
-  margin: 0;
-  padding: 0;
-  border: none;
+    margin: 0;
+    padding: 0;
+    border: none;
 }
 
 #lockup a:focus {
-  outline: 0;
+    outline: 0;
 }
 
 .logo {
-  margin: 0;
-  padding: 0;
-  border: none;
-  margin-bottom: 0.4em;
-  height: 4.5em;
-  width: 9.75em;
+    margin: 0;
+    padding: 0;
+    border: none;
+    margin-bottom: 0.4em;
+    height: 4.5em;
+    width: 9.75em;
 }
 
 #lockup p {
-  color: #ed225d;
-  font-size: 0.7em;
-  font-family: 'Montserrat', sans-serif;
-  margin: 0.5em 0 0 8.5em;
+    color: #ed225d;
+    font-size: 0.7em;
+    font-family: 'Montserrat', sans-serif;
+    margin: 0.5em 0 0 8.5em;
 }
 
 #lockup a:link {
-  border: transparent;
-  height: 4.5em;
-  width: 9.75em;
+    border: transparent;
+    height: 4.5em;
+    width: 9.75em;
 }
 
 .caption {
-  margin-bottom: 2.5em;
+    margin-bottom: 2.5em;
 }
 
 .caption span,
 .caption p {
-  text-align: right;
-  font-size: 0.7em;
-  font-family: 'Montserrat', sans-serif;
-  padding-top: 0.25em;
+    text-align: right;
+    font-size: 0.7em;
+    font-family: 'Montserrat', sans-serif;
+    padding-top: 0.25em;
 }
 
 footer {
-  clear: both;
-  border-top: 0.1em dashed;
-  border-top-color: #ed225d;
-  margin: 2em 0;
+    clear: both;
+    border-top: 0.1em dashed;
+    border-top-color: #ed225d;
+    margin: 2em 0;
 }
 
 .videoWrapper {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 */
-  height: 0;
-  margin-top: 0.5em;
+    position: relative;
+    padding-bottom: 56.25%;
+    /* 16:9 */
+    height: 0;
+    margin-top: 0.5em;
 }
+
 .videoWrapper iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 /* ==========================================================================
@@ -2908,18 +2976,18 @@ footer {
  */
 
 .ir {
-  background-color: transparent;
-  border: 0;
-  overflow: hidden;
-  /* IE 6/7 fallback */
-  *text-indent: -9999px;
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
 }
 
 .ir:before {
-  content: '';
-  display: block;
-  width: 0;
-  height: 150%;
+    content: '';
+    display: block;
+    width: 0;
+    height: 150%;
 }
 
 /*
@@ -2927,8 +2995,8 @@ footer {
  */
 
 .hidden {
-  display: none !important;
-  visibility: hidden;
+    display: none !important;
+    visibility: hidden;
 }
 
 /*
@@ -2936,14 +3004,14 @@ footer {
  */
 
 .sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
 }
 
 /*
@@ -2953,12 +3021,12 @@ footer {
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
 }
 
 /*
@@ -2966,7 +3034,7 @@ footer {
  */
 
 .invisible {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 /*
@@ -2983,14 +3051,14 @@ footer {
 
 .clearfix:before,
 .clearfix:after {
-  content: ' ';
-  /* 1 */
-  display: table;
-  /* 2 */
+    content: ' ';
+    /* 1 */
+    display: table;
+    /* 2 */
 }
 
 .clearfix:after {
-  clear: both;
+    clear: both;
 }
 
 /*
@@ -2999,7 +3067,7 @@ footer {
  */
 
 .clearfix {
-  *zoom: 1;
+    *zoom: 1;
 }
 
 /* ==========================================================================
@@ -3007,348 +3075,409 @@ footer {
    ========================================================================== */
 
 #notMobile-message {
-  display: none;
-  order: 1;
+    display: none;
+    order: 1;
 }
 
 #isMobile-displayButton {
-  display: none;
+    display: none;
 }
 
 #asterisk-design-element,
 .separator-design-element {
-  display: none;
+    display: none;
 }
 
 .pointerevents #asterisk-design-element,
 .pointerevents .separator-design-element {
-  pointer-events: none;
-  display: inline-block;
+    pointer-events: none;
+    display: inline-block;
 }
 
 @media (min-width: 780px) {
-  .container {
-    width: 49em !important;
-    margin: 11.5em auto; /* temp promo, 10.0em */
-  }
-  main {
-    width: 36em;
-    padding: 0 !important;
-  }
-  footer {
-    width: 48em;
-  }
-}
+    .container {
+        width: 49em !important;
+        margin: 11.5em auto;
+        /* temp promo, 10.0em */
+    }
 
-@media (min-width: 780px) {
-  .container {
-    margin: 11.5em auto; /* temp promo, 10.0em */
-    width: 100%;
-    padding: 0.8em 0 0 0;
-    height: auto;
-    min-height: 100%;
-  }
-  #home-page {
-    display: flex;
-    flex-wrap: row;
-  }
-  main {
-    padding: 0 1em 0 0;
-  }
-  small,
-  .small,
-  footer,
-  #family {
-    font-size: 0.7em;
-  }
-  footer {
-    clear: both;
-    /*margin: 4em 0 2em -.75em;*/
-  }
-  #i18n-btn {
-    position: absolute;
-    top: 4.0em; /* temp promo, 2.5em */
-    right: 1em;
-  }
-  #i18n-btn a {
-    font-family: 'Montserrat', sans-serif;
-  }
-  #menu {
-    list-style: none;
-    font-family: 'Montserrat', sans-serif;
-    margin: 0 0.75em 0 -1.85em;
-    /* margin-right: 0.75em;  */
-    width: 7.3em;
-    height: 100%;
-    /*float:left;*/
-    border-top: transparent;
-    border-bottom: transparent;
-    padding: 0;
-    font-size: 0.83em;
-    z-index: 100;
-    position: relative;
-    top: 0;
-  }
-  #menu li {
-    float: none;
-    margin: 0 0 1em 0;
-    text-align: right;
-  }
-  /* #menu li:last-child {
-     margin: 0;
-  } */
-  /* #menu .other-link::after {
-    content:"\2192";
-     margin-right: -0.98em;
-    content:" »";
-  } */
-  #menu li:nth-child(11) {
-    margin-top: 3em;
-    padding-top: 0.5em;
-    /*border-top: 0.06em solid rgba(51,51,51,0.25);*/
-  }
-  .left-column {
-    width: 48%;
-    float: left;
-    margin-bottom: 40px;
-  }
-  .right-column {
-    width: 48%;
-    float: right;
-    margin-right: 0;
-    margin-bottom: 0.25em;
-  }
-  .narrow-left-column {
-    width: 32%;
-    float: left;
-  }
-  .wide-right-column {
-    width: 64%;
-    float: right;
-    margin-right: 0;
-    margin-bottom: 0.25em;
-  }
-  .book {
-    font-size: 0.7em;
-  }
-  .column_0,
-  .column_1,
-  .column_2 {
-    float: left;
-    width: 11.333em;
-  }
-  .column_0,
-  .column_1 {
-    margin-right: 1em;
-  }
-  #collection-list-nav {
-    width: 100%;
-    clear: both;
-    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
-  }
+    main {
+        width: 36em;
+        padding: 0 !important;
+    }
 
-  #collection-list-categories {
-    font-family: 'Montserrat', sans-serif;
-    display: flex;
-    flex-direction: row;
-    margin: 1em 0 1.5em 0;
-  }
-  #collection-list-categories ul {
-    flex: 1;
-  }
-  #collection-list {
-    margin: 0;
-  }
-  .group-name.first {
-    margin-top: 0 !important;
-  }
-  .column.group-name {
-    margin-bottom: 1em;
-  }
+    footer {
+        width: 48em;
+    }
+}
 
-  #library-page .group-name {
-    margin: 2em 0 0.5em 0;
-  }
-  #library-page .column {
-    margin-top: 1em;
-  }
-  #list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 1em;
-  }
+@media (min-width: 780px) {
+    .container {
+        margin: 11.5em auto;
+        /* temp promo, 10.0em */
+        width: 100%;
+        padding: 0.8em 0 0 0;
+        height: auto;
+        min-height: 100%;
+    }
+
+    #home-page {
+        display: flex;
+        flex-wrap: row;
+    }
+
+    main {
+        padding: 0 1em 0 0;
+    }
+
+    small,
+    .small,
+    footer,
+    #family {
+        font-size: 0.7em;
+    }
+
+    footer {
+        clear: both;
+        /*margin: 4em 0 2em -.75em;*/
+    }
+
+    #i18n-btn {
+        position: absolute;
+        top: 4.0em;
+        /* temp promo, 2.5em */
+        right: 1em;
+    }
+
+    #i18n-btn a {
+        font-family: 'Montserrat', sans-serif;
+    }
+
+    #menu {
+        list-style: none;
+        font-family: 'Montserrat', sans-serif;
+        margin: 0 0.75em 0 -1.85em;
+        /* margin-right: 0.75em;  */
+        width: 7.3em;
+        height: 100%;
+        /*float:left;*/
+        border-top: transparent;
+        border-bottom: transparent;
+        padding: 0;
+        font-size: 0.83em;
+        z-index: 100;
+        position: relative;
+        top: 0;
+    }
+
+    #menu li {
+        float: none;
+        margin: 0 0 1em 0;
+        text-align: right;
+    }
+
+    /* #menu li:last-child {
+       margin: 0;
+    } */
+    /* #menu .other-link::after {
+      content:"\2192";
+       margin-right: -0.98em;
+      content:" »";
+    } */
+    #menu li:nth-child(11) {
+        margin-top: 3em;
+        padding-top: 0.5em;
+        /*border-top: 0.06em solid rgba(51,51,51,0.25);*/
+    }
+
+    .left-column {
+        width: 48%;
+        float: left;
+        margin-bottom: 40px;
+    }
+
+    .right-column {
+        width: 48%;
+        float: right;
+        margin-right: 0;
+        margin-bottom: 0.25em;
+    }
+
+    .narrow-left-column {
+        width: 32%;
+        float: left;
+    }
+
+    .wide-right-column {
+        width: 64%;
+        float: right;
+        margin-right: 0;
+        margin-bottom: 0.25em;
+    }
+
+    .book {
+        font-size: 0.7em;
+    }
+
+    .column_0,
+    .column_1,
+    .column_2 {
+        float: left;
+        width: 11.333em;
+    }
+
+    .column_0,
+    .column_1 {
+        margin-right: 1em;
+    }
+
+    #collection-list-nav {
+        width: 100%;
+        clear: both;
+        border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
+    }
+
+    #collection-list-categories {
+        font-family: 'Montserrat', sans-serif;
+        display: flex;
+        flex-direction: row;
+        margin: 1em 0 1.5em 0;
+    }
+
+    #collection-list-categories ul {
+        flex: 1;
+    }
+
+    #collection-list {
+        margin: 0;
+    }
+
+    .group-name.first {
+        margin-top: 0 !important;
+    }
+
+    .column.group-name {
+        margin-bottom: 1em;
+    }
+
+    #library-page .group-name {
+        margin: 2em 0 0.5em 0;
+    }
+
+    #library-page .column {
+        margin-top: 1em;
+    }
+
+    #list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 1em;
+    }
 }
 
 @media (max-width: 780px) {
-  .tagline {
-    display: none !important;
-  }
-
-  #family {
-    display: none;
-  }
-
-  #i18n-btn {
-    position: absolute;
-    top: 0.5em;
-    right: 0.7em;
-    z-index: 10;
-  }
-
-  #search {
-    width: 100%;
-    float: left;
-    margin-bottom: 1em;
-  }
-
-  #search input[type='text'] {
-    width: 100%;
-  }
-
-  #search input[type='text'],
-  #search input[type='search'] {
-    font-size: 1.5em;
-  }
-
-  #lockup {
-    position: absolute;
-    top: 2em;
-    left: 1em;
-  }
-  .column-span {
-    margin:0;
-    padding: 0 1em;
-    float: left;
-  }
-  #menu.top_menu,
-  #menu {
-    margin: 6em 0 0.5em 0;
-    font-size: 1.3em;
-  }
-  #menu li {
-    display: inline-block;
-  }
-
-  #menu li:nth-last-child(1) a::after {
-    content: '';
-  }
-
-  #menu li a::after {
-    content: ',';
-  }
-
-  #contribute-item:first-child {
-    margin-left: 0px;
-  }
-  .download_box {
-    width: 96%;
-  }
-  .download_box.half_box {
-    width: 46%;
-    margin-right: 4%;
-    float: left;
-  }
-  #etc_list {
-    font-size: 1.2em;
-    margin-top: 1em;
-  }
-  #asterisk-design-element,
-  .separator-design-element {
-    display: none !important;
-    pointer-events: none;
-  }
-  pre[class*='language-'] {
-    padding: 0.5em 0.5em;
-    width: 100%;
-  }
-
-  code {
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-  #credits {
-    position: relative !important;
-    z-index: 2;
-    margin-top: -7em;
-    padding: 0 2em 3em 1em;
-    font-size: 0.5em;
-    float: right;
-    width: 100%;
-    text-align: right;
-    display: none;
-    /* HIDDEN SKETCH */
-  }
-  #home-sketch-frame {
-    display: none;
-    /* HIDDEN SKETCH */
-  }
-  #exampleDisplay,
-  #exampleFrame,
-  #exampleDisplay #exampleEditor {
-    width: 100%;
-  }
-  #exampleDisplay .edit_button {
-    left: -0.58em;
-  }
-  #exampleDisplay .reset_button {
-    left: 3em;
-  }
-  #exampleDisplay .copy_button {
-    left: 6.44em;
-  }
-  #exampleEditor {
-    margin-top: 3em;
-  }
-  small,
-  .small,
-  footer {
-    font-size: 0.5em;
-  }
-  .paramtype {
-    width: 96%;
-  }
+    .tagline {
+        display: none !important;
+    }
+
+    #family {
+        height: 20px;
+    }
+
+    #processing-sites {
+        font-size: 10px;
+    }
+
+    #processing-sites li:last-child {
+        margin-right: 4rem;
+    }
+
+    #i18n-btn {
+        margin-top: 1rem
+    }
+
+    /*  #family {*/
+    /*    display: none;*/
+    /*  }*/
+    #i18n-btn {
+        position: absolute;
+        top: 0.5em;
+        right: 0.7em;
+        z-index: 10;
+    }
+
+    #search {
+        width: 100%;
+        float: left;
+        margin-bottom: 1em;
+    }
+
+    #search input[type='text'] {
+        width: 100%;
+    }
+
+    #search input[type='text'],
+    #search input[type='search'] {
+        font-size: 1.5em;
+    }
+
+    #lockup {
+        position: absolute;
+        top: 2em;
+        left: 1em;
+    }
+
+    .column-span {
+        margin: 0;
+        padding: 0 1em;
+        float: left;
+    }
+
+    #menu.top_menu,
+    #menu {
+        margin: 6em 0 0.5em 0;
+        font-size: 1.3em;
+    }
+
+    #menu li {
+        display: inline-block;
+    }
+
+    #menu li:nth-last-child(1) a::after {
+        content: '';
+    }
+
+    #menu li a::after {
+        content: ',';
+    }
+
+    #contribute-item:first-child {
+        margin-left: 0px;
+    }
+
+    .download_box {
+        width: 96%;
+    }
+
+    .download_box.half_box {
+        width: 46%;
+        margin-right: 4%;
+        float: left;
+    }
+
+    #etc_list {
+        font-size: 1.2em;
+        margin-top: 1em;
+    }
+
+    #asterisk-design-element,
+    .separator-design-element {
+        display: none !important;
+        pointer-events: none;
+    }
+
+    pre[class*='language-'] {
+        padding: 0.5em 0.5em;
+        width: 100%;
+    }
+
+    code {
+        word-wrap: break-word;
+        word-break: break-all;
+    }
+
+    #credits {
+        position: relative !important;
+        z-index: 2;
+        margin-top: -7em;
+        padding: 0 2em 3em 1em;
+        font-size: 0.5em;
+        float: right;
+        width: 100%;
+        text-align: right;
+        display: none;
+        /* HIDDEN SKETCH */
+    }
+
+    #home-sketch-frame {
+        display: none;
+        /* HIDDEN SKETCH */
+    }
+
+    #exampleDisplay,
+    #exampleFrame,
+    #exampleDisplay #exampleEditor {
+        width: 100%;
+    }
+
+    #exampleDisplay .edit_button {
+        left: -0.58em;
+    }
+
+    #exampleDisplay .reset_button {
+        left: 3em;
+    }
+
+    #exampleDisplay .copy_button {
+        left: 6.44em;
+    }
+
+    #exampleEditor {
+        margin-top: 3em;
+    }
+
+    small,
+    .small,
+    footer {
+        font-size: 0.5em;
+    }
+
+    .paramtype {
+        width: 96%;
+    }
 }
 
 @media (max-width: 400px) {
-  #i18n {
-    margin-top: 0.75em !important;
-  }
-  body {
-    margin-top: -0.75em !important;
-  }
+    #i18n {
+        margin-top: 0.75em !important;
+    }
+
+    body {
+        margin-top: -0.75em !important;
+    }
 }
 
 iframe {
-  border: none;
-  width: 100%;
+    border: none;
+    width: 100%;
 }
 
 .iframe-container {
-  overflow: hidden;
-  position: relative;
+    overflow: hidden;
+    position: relative;
 }
 
 .iframe-container iframe {
-  border: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
+    border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
 }
 
 .cnv_div {
-  /* This ensures that all canvases and additional html elements (if any) from
-   * the example code snippets are only 100px wide rather than covering the
-   * entire page, which potentially obscures the example code. */
-  display: inline-flex;
-  flex-direction: column;
+    /* This ensures that all canvases and additional html elements (if any) from
+     * the example code snippets are only 100px wide rather than covering the
+     * entire page, which potentially obscures the example code. */
+    display: inline-flex;
+    flex-direction: column;
 }
 
-.cnv_div > * {
-  width: 100px;
-  height: auto;
+.cnv_div>* {
+    width: 100px;
+    height: auto;
 }
 
 /*
@@ -3358,31 +3487,31 @@ iframe {
 */
 
 #i18n-buttons {
-  margin: 0;
-  background: white;
+    margin: 0;
+    background: white;
 }
 
 #i18n-buttons li {
-  list-style: none;
-  display: inline-block;
-  margin-left: 0.5em;
+    list-style: none;
+    display: inline-block;
+    margin-left: 0.5em;
 }
 
 #i18n-btn a {
-  border: none;
-  outline: none;
-  font-size: 0.7em;
-  color: #696969;
-  z-index: 5;
+    border: none;
+    outline: none;
+    font-size: 0.7em;
+    color: #696969;
+    z-index: 5;
 }
 
 #i18n-btn a:hover {
-  color: #ed225d;
+    color: #ed225d;
 }
 
 #i18n-btn a.disabled {
-  color: #ed225d;
-  cursor: default;
+    color: #ed225d;
+    cursor: default;
 }
 
 /*
@@ -3394,139 +3523,141 @@ iframe {
 /* constants for the asterisk */
 
 #asterisk-design-element {
-  position: fixed;
-  z-index: -1;
-  opacity: 0.6;
-  pointer-events: none;
+    position: fixed;
+    z-index: -1;
+    opacity: 0.6;
+    pointer-events: none;
 }
 
 /*  variations for asterisks on pages */
 
 .separator-design-element {
-  width: 0.33em;
-  height: 0.33em;
-  margin: 0 0.09em 0.18em 0.09em;
-  display: inline-block;
-  overflow: hidden;
-  text-indent: -100%;
-  background: transparent
-    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=');
-  background-size: 0.33em;
+    width: 0.33em;
+    height: 0.33em;
+    margin: 0 0.09em 0.18em 0.09em;
+    display: inline-block;
+    overflow: hidden;
+    text-indent: -100%;
+    background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=');
+    background-size: 0.33em;
 }
 
 #home-page #asterisk-design-element {
-  bottom: -8%;
-  right: 20%;
-  height: 12em;
-  width: 12em;
-  opacity: 1;
+    bottom: -8%;
+    right: 20%;
+    height: 12em;
+    width: 12em;
+    opacity: 1;
 }
 
 #learn-page #asterisk-design-element,
 #examples-page #asterisk-design-element,
 #other-content-types-page #asterisk-design-element {
-  bottom: -14%;
-  left: -20%;
-  height: 25em;
-  width: 25em;
-  -webkit-transform: rotate(-1deg);
-  -moz-transform: rotate(-1deg);
-  -ms-transform: rotate(-1deg);
-  -o-transform: rotate(-1deg);
-  transform: rotate(-1deg);
+    bottom: -14%;
+    left: -20%;
+    height: 25em;
+    width: 25em;
+    -webkit-transform: rotate(-1deg);
+    -moz-transform: rotate(-1deg);
+    -ms-transform: rotate(-1deg);
+    -o-transform: rotate(-1deg);
+    transform: rotate(-1deg);
 }
 
 #libraries-page #asterisk-design-element,
 #books-page #asterisk-design-element {
-  bottom: -19%;
-  right: -16%;
-  height: 28em;
-  width: 28em;
-  -webkit-transform: rotate(2deg);
-  -moz-transform: rotate(2deg);
-  -ms-transform: rotate(2deg);
-  -o-transform: rotate(2deg);
-  transform: rotate(2deg);
+    bottom: -19%;
+    right: -16%;
+    height: 28em;
+    width: 28em;
+    -webkit-transform: rotate(2deg);
+    -moz-transform: rotate(2deg);
+    -ms-transform: rotate(2deg);
+    -o-transform: rotate(2deg);
+    transform: rotate(2deg);
 }
 
 #get-started-page #asterisk-design-element,
 #community-page #asterisk-design-element {
-  top: 10%;
-  right: -20%;
-  height: 30em;
-  width: 30em;
-  -webkit-transform: rotate(2deg);
-  -moz-transform: rotate(2deg);
-  -ms-transform: rotate(2deg);
-  -o-transform: rotate(2deg);
-  transform: rotate(2deg);
+    top: 10%;
+    right: -20%;
+    height: 30em;
+    width: 30em;
+    -webkit-transform: rotate(2deg);
+    -moz-transform: rotate(2deg);
+    -ms-transform: rotate(2deg);
+    -o-transform: rotate(2deg);
+    transform: rotate(2deg);
 }
 
 #reference-page #asterisk-design-element,
 #download-page #asterisk-design-element {
-  top: 7%;
-  left: 1%;
-  height: 10em;
-  width: 10em;
-  -webkit-transform: rotate(-21deg);
-  -moz-transform: rotate(-21deg);
-  -ms-transform: rotate(-21deg);
-  -o-transform: rotate(-21deg);
-  transform: rotate(-21deg);
+    top: 7%;
+    left: 1%;
+    height: 10em;
+    width: 10em;
+    -webkit-transform: rotate(-21deg);
+    -moz-transform: rotate(-21deg);
+    -ms-transform: rotate(-21deg);
+    -o-transform: rotate(-21deg);
+    transform: rotate(-21deg);
 }
 
 .email-octopus-email-address {
-  color: #ed225d;
-  text-decoration: none;
-  padding-bottom: 0.11em;
-  outline: none;
-  border: none;
-  border-bottom: 0.11em dashed;
-  border-bottom-color: #ed225d;
-  transition: border-bottom 30ms linear;
-  width: 13em;
+    color: #ed225d;
+    text-decoration: none;
+    padding-bottom: 0.11em;
+    outline: none;
+    border: none;
+    border-bottom: 0.11em dashed;
+    border-bottom-color: #ed225d;
+    transition: border-bottom 30ms linear;
+    width: 13em;
 }
 
 .email-octopus-form-row-hp {
-  position: absolute;
-  left: -5000px;
+    position: absolute;
+    left: -5000px;
 }
 
 .email-octopus-form-row button {
-  border: 1px solid #ed225d;
-  color: #ed225d;
-  padding: 0.4em 0.6em;
-  margin: 1em 0 0 0;
-  font-family: 'Montserrat', sans-serif;
-  display: block;
+    border: 1px solid #ed225d;
+    color: #ed225d;
+    padding: 0.4em 0.6em;
+    margin: 1em 0 0 0;
+    font-family: 'Montserrat', sans-serif;
+    display: block;
 }
 
 .email-octopus-form-row button:hover {
-  background-color: #ed225d;
-  color: white;
+    background-color: #ed225d;
+    color: white;
 }
 
 .email-octopus-email-address::-webkit-input-placeholder {
-  color: #ababab;
+    color: #ababab;
 }
+
 .email-octopus-email-address::-moz-placeholder {
-  color: #ababab;
+    color: #ababab;
 }
+
 .email-octopus-email-address:-moz-placeholder {
-  color: #ababab;
+    color: #ababab;
 }
+
 .email-octopus-email-address:-ms-input-placeholder {
-  color: #ababab;
+    color: #ababab;
 }
 
 @media (min-width: 720px) {
-  .email-octopus-email-address {
-    width: 16em;
-  }
-
-  .email-octopus-form-row button {
-    margin: 0;
-    margin-left: 0.5em;
-    display: inline;
-  }
-}
+    .email-octopus-email-address {
+        width: 16em;
+    }
+
+    .email-octopus-form-row button {
+        margin: 0;
+        margin-left: 0.5em;
+        display: inline;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d45b7776c6..f4cde5251a 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -148,7 +148,7 @@ textarea {
     pointer-events: all;
 }
 
-#lockup > a {
+#lockup>a {
     position: relative;
     display: block;
     width: 200px;
@@ -157,7 +157,7 @@ textarea {
 
 #logo_image {
     position: absolute;
-    top: 0;         
+    top: 0;
 }
 
 #menu.top_menu,
@@ -245,20 +245,20 @@ textarea {
         display: none;
     }
 
-    .sidebar-menu-btn:checked ~ .sidebar-menu {
+    .sidebar-menu-btn:checked~.sidebar-menu {
         max-height: 475px;
     }
 
-    .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon {
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon {
         background: transparent;
     }
 
-    .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before {
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:before {
         transform: rotate(-45deg);
         top: 0;
     }
 
-    .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after {
+    .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:after {
         transform: rotate(45deg);
         top: 0;
     }
@@ -270,7 +270,7 @@ textarea {
 
 /* <======== Styling for footer menu bar ========> */
 #footer-menu {
-    display: flex;   
+    display: flex;
     flex-wrap: wrap;
     list-style: none;
     font-family: 'Montserrat', sans-serif;
@@ -280,16 +280,16 @@ textarea {
 }
 
 #footer-menu li {
-   margin-right: 1em;
+    margin-right: 1em;
 }
 
-#footer-menu a{
+#footer-menu a {
     color: #ed225d;
-    
-  }
 
-  #footer-menu-socials {
-    display: flex;   
+}
+
+#footer-menu-socials {
+    display: flex;
     flex-wrap: wrap;
     list-style: none;
     font-family: 'Montserrat', sans-serif;
@@ -299,12 +299,13 @@ textarea {
 }
 
 #footer-menu-socials li {
-   margin-right: 1em;
+    margin-right: 1em;
 }
-#footer-menu-socials a{
+
+#footer-menu-socials a {
     color: #ed225d;
-    
-  }
+
+}
 
 /* <=================================================> */
 
@@ -428,7 +429,7 @@ textarea {
     fill: white;
 }
 
-.download_box h4 + p {
+.download_box h4+p {
     display: block;
 }
 
@@ -714,7 +715,7 @@ div.reference-subgroup {
     flex-direction: row-reverse;
     position: relative;
     pointer-events: none;
-    color: #333; 
+    color: #333;
 }
 
 .example-content .edit_space ul li button {
@@ -739,8 +740,8 @@ div.reference-subgroup {
     border-color: rgba(45, 123, 182, 0.25);
 }
 
-.example-content .edit_space ul li button:hover{
-    background:white;
+.example-content .edit_space ul li button:hover {
+    background: white;
 }
 
 .example-content .edit_space .edit_area {
@@ -754,6 +755,7 @@ div.reference-subgroup {
     padding: 1.5em 0.5em 0.5em 0.5em;
     font-size: 15pt;
 }
+
 .display_button {
     margin-bottom: 2em;
     font-family: 'Montserrat', sans-serif;
@@ -1292,6 +1294,10 @@ variable */
         padding: 0.4em 0.3em;
         font: 1.3rem 'Montserrat', sans-serif;
     }
+
+    #processing-sites li:last-child {
+        display: none;
+    }
 }
 
 #showcase-page .nominate a:hover {
@@ -1396,11 +1402,11 @@ h2.featuring {
 }
 
 @media (min-width: 720px) {
+
     /* for desktop/tablet:
    *   - two columns, one each for resources & authors
    *   - indent answer paragraphs in q & a
    */
-
     #showcase-page .showcase-intro h1 {
         font: italic 900 6.35vw 'Montserrat', sans-serif;
     }
@@ -1486,9 +1492,9 @@ h2.featuring {
     COMMUNITY PAGE
    ========================================================================== */
 
-   .email-octopus-form-wrapper label {
+.email-octopus-form-wrapper label {
     font-size: 1.2em;
-  }
+}
 
 
 /* ==========================================================================
@@ -1514,21 +1520,21 @@ h2.featuring {
 
 /*workshop contents*/
 
-#teach-page section.workshopS{
+#teach-page section.workshopS {
     overflow: auto;
 }
 
-#teach-page .workshop-content{
+#teach-page .workshop-content {
     padding: 0.6em;
 }
 
-#teach-page ul.workshops{
+#teach-page ul.workshops {
     padding-top: .4em;
     width: 41%;
     float: left;
 }
 
-#teach-page .btn{
+#teach-page .btn {
     margin-bottom: 0.8em;
     padding-bottom: .4em;
 
@@ -1538,7 +1544,8 @@ h2.featuring {
     border-bottom: 0.1em dashed #ffe8e8;
 }
 
-#teach-page li.workshop .active,li.workshop p:hover{
+#teach-page li.workshop .active,
+li.workshop p:hover {
     margin-bottom: 0.8em;
     padding-bottom: .4em;
 
@@ -1551,7 +1558,7 @@ h2.featuring {
 
 /*workshop banners*/
 
-#teach-page .upcoming-banners{
+#teach-page .upcoming-banners {
     width: 59%;
     float: right;
     padding-top: 0.8em;
@@ -1560,28 +1567,33 @@ h2.featuring {
 
 }
 
-#teach-page .banner2, .banner3, .time2, .time3{
+#teach-page .banner2,
+.banner3,
+.time2,
+.time3 {
     display: none;
 }
 
-#teach-page .banner1:hover, .banner2:hover, .banner3:hover{
+#teach-page .banner1:hover,
+.banner2:hover,
+.banner3:hover {
     border: none;
 }
 
-#teach-page .banner-img{
+#teach-page .banner-img {
     float: left;
     box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     border: none;
 }
 
-#teach-page .banner-img:hover{
+#teach-page .banner-img:hover {
     box-shadow: 0px 0px 5px 2px #e088a1;
     border-radius: 5px;
     border: none;
 }
 
-#teach-page .upcoming-time p{
+#teach-page .upcoming-time p {
     float: right;
     margin-bottom: 0.8em;
     padding-bottom: .4em;
@@ -1648,8 +1660,6 @@ h2.featuring {
 }
 
 
-
-
 #teach-page ul.filters li {
     display: inline;
     list-style: none;
@@ -1690,7 +1700,7 @@ h2.featuring {
 
 }
 
-#teach-page ul.filters li input[type="checkbox"]:checked + label {
+#teach-page ul.filters li input[type="checkbox"]:checked+label {
     color: white;
     background: #ed225d;
 
@@ -1724,7 +1734,6 @@ h2.featuring {
 }
 
 
-
 #teach-page .filter-panel p {
     margin: 0;
     color: #333;
@@ -1980,7 +1989,7 @@ h2.featuring {
 #teach-page .case-list {
     margin-bottom: 0.8em;
     padding-bottom: .4em;
-    display:flex;
+    display: flex;
 
     font: 400 1.0rem "Times", sans-serif;
     line-height: 1.2em;
@@ -1993,7 +2002,7 @@ h2.featuring {
     width: 40%;
 }
 
-#teach-page .tags.selected{
+#teach-page .tags.selected {
     display: inline-block;
     margin-left: 2em;
     margin-right: 2em;
@@ -2008,9 +2017,9 @@ h2.featuring {
 
 #teach-page .caseBtn {
     padding-top: 0.2em;
-    padding-bottom:0.2em;
+    padding-bottom: 0.2em;
     width: 60%;
-    height:max-content;
+    height: max-content;
     float: left;
 }
 
@@ -2119,7 +2128,7 @@ a.here {
     background-color: rgba(237, 34, 93, 0.15);
 }
 
-.container > div:first-of-type {
+.container>div:first-of-type {
     margin-top: 2em;
 }
 
@@ -2310,7 +2319,7 @@ ul.inside {
     height: 14.3%;
 }
 
-.image-row img + img {
+.image-row img+img {
     float: right;
     margin-right: 0;
     margin-bottom: 0.25em;
@@ -2322,7 +2331,7 @@ main div img {
     width: 100%;
 }
 
-p + img {
+p+img {
     margin-top: 0;
 }
 
@@ -2726,9 +2735,24 @@ footer {
     }
 
     #family {
-        display: none;
+        height: 20px;
+    }
+
+    #processing-sites {
+        font-size: 10px;
+    }
+
+    #i18n-btn {
+        margin-top: 1rem
     }
 
+    #processing-sites li:last-child {
+        margin-right: 4rem;
+    }
+
+    /*    #family {*/
+    /*        display: none;*/
+    /*    }*/
     #i18n-btn {
         position: absolute;
         top: 0.5em;
@@ -2904,19 +2928,20 @@ iframe {
     flex-direction: column;
 }
 
-.cnv_div > * {
+.cnv_div>* {
     width: 100px;
     height: auto;
 }
+
 /* teach page */
 
 @media (max-width: 780px) {
- 
-    #teach-page ul.workshops{
+
+    #teach-page ul.workshops {
         width: 100%;
     }
-    
-     #teach-page .upcoming-banners{
+
+    #teach-page .upcoming-banners {
         width: 100%;
         float: left;
         padding-top: 0em;
@@ -2925,9 +2950,9 @@ iframe {
     }
 
     #teach-page .case-list {
-        display:block;
+        display: block;
     }
-    
+
     #teach-page .labels {
         min-width: 100%;
     }
@@ -3068,7 +3093,7 @@ iframe {
     transform: rotate(-21deg);
 }
 
-@media(max-width:1352px) {
+@media (max-width: 1352px) {
 
     #reference-page #asterisk-design-element,
     #download-page #asterisk-design-element {
@@ -3143,4 +3168,4 @@ iframe {
         margin-left: 0.5em;
         display: inline;
     }
-}
+}
\ No newline at end of file