8 files changed, 111 insertions, 104 deletions
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index a5e36542..48816fef 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -1,4 +1,10 @@
 * { box-sizing: border-box; outline: 0; }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001s !important;
+    transition-duration: 0.001s !important;
+  }
+}
 html, body {
   margin: 0;
   padding: 0;
@@ -227,7 +233,7 @@ h5 {
   text-transform: uppercase;
   letter-spacing: 2px;
 }
-.right-sidebar ul li a{
+.right-sidebar ul li a {
   border-bottom: 0;
 }
 th, .gray {
@@ -796,30 +802,29 @@ section.fullwidth .image {
   padding: 0;
 }
 .dataset-list .sort-options:before {
-  content: 'Browse list by ';
+  content: 'Browse list by:';
   opacity: 0.7;
-  margin-right: 0px;
+  display: block;
+  padding-bottom: 10px;
 }
 .dataset-list .sort-options li {
   display: inline-block;
   margin: 0;
-  padding: 0;
   cursor: pointer;
   margin-right: 20px;
   font-size: 16px;
-}
-.dataset-list .sort-options li:before {
-  content: '_';
-  opacity: 0;
-  margin-right: 10px;
+  transition: background 0.2s;
+  background: #888;
+  color: #fff;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
 }
 .dataset-list .sort-options li.active {
-  border-bottom: 1px solid;
-}
-.dataset-list .sort-options li.active:before {
-  content: '>';
-  opacity: 1;
-  margin-right: 10px;
+  background: #fff;
+  color: #222;
 }
 .dataset_list .applet {
   margin-bottom: 15px;
@@ -1131,92 +1136,3 @@ li p {
   border-radius: 5px;
   transition: all 0.1s;
 }
-
-/* iphone/ipad css */
-@media all and (max-device-width: 1024px) {
-  /* header / footer */
-  .slogan {
-    padding-left: 10px;
-  }
-  header .splash {
-    display: none;
-  }
-  header .links a {
-    margin-right: 10px;
-  }
-
-  /* content */
-
-  .intro_section {
-    padding: 50px 0 20px 0;
-  }
-  .intro_section .hero_desc {
-    font-size: 28px;
-    line-height: 50px;
-    margin-bottom: 20px;
-  }
-  .intro_section .inner {
-    margin: 0;
-    max-width: 100%;
-    padding: 20px;
-  }
-  .intro_section .hero_subdesc {
-    max-width: 100%;
-  }
-  section h1, section h2, section h3, section h4, section h5, section h6, section p {
-    max-width: 100%;
-  }
-  section {
-    width: 100%;
-    padding: 0 10px;
-  }
-  .meta {
-    margin-right: 0px;
-    margin-bottom: 10px;
-  }
-  .modal img {
-    max-width: 100%;
-  }
-  th {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .citationHeader {
-
-  }
-  section.wide {
-    width: 100%;
-  }
-  .map, .map .applet {
-    height: 360px;
-  }
-}
-
-/* iphone-specific */
-@media all and (max-device-width: 640px) {
-  .right-sidebar {
-    float: none;
-    width: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0 2px;
-    border-bottom: 1px solid #333;
-  }
-  .map, .map .applet {
-    height: 360px;
-  }
-  .citationBrowser input.q {
-    max-width: 180px;
-  }
-  .columns {
-    flex-direction: column;
-  }
-  .columns .column {
-    margin: 0;
-  }
-  .columns-2 .column,
-  .columns-3 .column,
-  .columns-4 .column {
-    width: 100%;
-  }
-}
-\ No newline at end of file
diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css
new file mode 100644
index 00000000..6a742277
--- /dev/null
+++ b/site/assets/css/mobile.css
@@ -0,0 +1,91 @@
+/* MOBILE - iphone/ipad css */
+
+@media all and (max-device-width: 1024px) {
+  /* header / footer */
+  .slogan {
+    padding-left: 10px;
+  }
+  header .splash {
+    display: none;
+  }
+  header .links a {
+    margin-right: 14px;
+    font-size: 14px;
+  }
+
+  /* MOBILE content */
+
+  .intro_section {
+    padding: 50px 0 20px 0;
+  }
+  .intro_section .hero_desc {
+    font-size: 28px;
+    line-height: 50px;
+    margin-bottom: 20px;
+  }
+  .intro_section .inner {
+    margin: 0;
+    max-width: 100%;
+    padding: 20px;
+  }
+  .intro_section .hero_subdesc {
+    max-width: 100%;
+  }
+  section h1, section h2, section h3, section h4, section h5, section h6, section p {
+    max-width: 100%;
+  }
+  section {
+    width: 100%;
+    padding: 0 10px;
+  }
+  .meta {
+    margin-right: 0px;
+    margin-bottom: 10px;
+  }
+  .modal img {
+    max-width: 100%;
+  }
+  th {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .citationHeader {
+
+  }
+  section.wide {
+    width: 100%;
+  }
+  .map, .map .applet {
+    height: 360px;
+  }
+
+  /* MOBILE datasets page */
+}
+
+/* iphone-specific */
+@media all and (max-device-width: 640px) {
+  .right-sidebar {
+    float: none;
+    width: 100%;
+    border: 0;
+    margin: 0 0 14px 0;
+    padding: 0 2px;
+  }
+  .map, .map .applet {
+    height: 360px;
+  }
+  .citationBrowser input.q {
+    max-width: 180px;
+  }
+  .columns {
+    flex-direction: column;
+  }
+  .columns .column {
+    margin: 0;
+  }
+  .columns-2 .column,
+  .columns-3 .column,
+  .columns-4 .column {
+    width: 100%;
+  }
+}
+\ No newline at end of file
diff --git a/site/assets/img/arrow-left-black.png b/site/assets/img/arrow-left-black.png
new file mode 100644
index 00000000..377a696f
--- /dev/null
+++ b/site/assets/img/arrow-left-black.png
diff --git a/site/assets/img/arrow-left.png b/site/assets/img/arrow-left.png
new file mode 100644
index 00000000..3ddd4781
--- /dev/null
+++ b/site/assets/img/arrow-left.png
diff --git a/site/assets/img/arrow-right-black.png b/site/assets/img/arrow-right-black.png
new file mode 100644
index 00000000..12dbe37c
--- /dev/null
+++ b/site/assets/img/arrow-right-black.png
diff --git a/site/assets/img/arrow-right.png b/site/assets/img/arrow-right.png
new file mode 100644
index 00000000..0cb2588f
--- /dev/null
+++ b/site/assets/img/arrow-right.png
diff --git a/site/assets/img/close-black.png b/site/assets/img/close-black.png
new file mode 100644
index 00000000..191442ac
--- /dev/null
+++ b/site/assets/img/close-black.png
diff --git a/site/assets/img/close.png b/site/assets/img/close.png
new file mode 100644
index 00000000..529d7302
--- /dev/null
+++ b/site/assets/img/close.png