From 2fe16409f3607165e1cd291e2527d887357a30ad Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Wed, 28 Feb 2018 17:48:02 -0800
Subject: [PATCH] Update Portal styles & templates

Officially renames it the "XRP Ledger Developer Portal" and
adapts the Ripple Client Portal templates to the XRP Dev Portal:

- Table-of-Contents-like landing page
- Accordion-style side nav except on landing page
- Breadcrumbs except on landing page
- floating (right-side) in-page nav on doc pages
- Adds "Edit on GitHub" link
- Slight modifications to API tool styles
---
 assets/css/api-tools.css                      |  40 +-
 assets/css/devportal.css                      | 532 ++++++++++++------
 assets/css/landing.css                        | 112 ----
 assets/css/pdf.css                            |   7 -
 assets/css/ripple.css                         | 152 ++---
 assets/js/jump-to-top.js                      |  15 +
 .../GitHub-Mark-Light-120px-plus.png          | Bin 0 -> 4044 bytes
 .../github-marks/GitHub-Mark-Light-32px.png   | Bin 0 -> 1571 bytes
 .../github-marks/GitHub-Mark-Light-64px.png   | Bin 0 -> 2330 bytes
 tool/template-base.html                       |  60 +-
 tool/template-doc.html                        |  37 +-
 tool/template-footer.html                     |   6 +-
 tool/template-index.html                      |  81 ++-
 tool/template-ripple-api-tool.html            |   4 +-
 tool/template-sidebar_nav.html                |  33 ++
 15 files changed, 564 insertions(+), 515 deletions(-)
 delete mode 100644 assets/css/landing.css
 create mode 100644 assets/js/jump-to-top.js
 create mode 100644 assets/vendor/github-marks/GitHub-Mark-Light-120px-plus.png
 create mode 100644 assets/vendor/github-marks/GitHub-Mark-Light-32px.png
 create mode 100644 assets/vendor/github-marks/GitHub-Mark-Light-64px.png
 create mode 100644 tool/template-sidebar_nav.html

diff --git a/assets/css/api-tools.css b/assets/css/api-tools.css
index f664bd15a2..360f2f22bc 100644
--- a/assets/css/api-tools.css
+++ b/assets/css/api-tools.css
@@ -10,11 +10,8 @@
   display:table-cell;
 }
 #command_list {
-  display:table-cell;
   list-style-type:none;
-  padding:36px 0 0 0;
-  margin:0;
-  height:100%;
+  padding:0 0 0 0;
 }
 
 aside.sidebar {
@@ -40,37 +37,6 @@ aside.sidebar {
     font-weight: bold;
     margin-top: 10px;
 }
-
-#command_table {
-  height:100%;
-}
-#io_wrapper {
-  float:right;
-  display:table;
-  height:500px;
-  padding:0;
-  table-layout:fixed;
-  border-spacing:24px 0;
-  width:96%;
-  height: 100%;
-  margin-top: 30px;
-}
-#io_wrapper > div {
-  width:100%;
-  margin:0;
-  padding:0;
-}
-#response, #response_body {
-  min-height:100px;
-  border-top-left-radius:0px !important;
-  border-top-right-radius:0px !important;
-}
-#input {
-  width: 30%;
-}
-#output {
-  width: 60%;
-}
 h3 {
   margin:16px 0;
   font-family:'open sans';
@@ -149,7 +115,6 @@ h3 {
   cursor:pointer;
 }
 #online_state {
-  position:absolute;
   top:10px;
   line-height:30px;
   font-size:14px;
@@ -378,8 +343,7 @@ span.cm-atom {
     margin: 0 !important;
 }
 
-#rest_url div label, 
+#rest_url div label,
 #rest_url div input {
     display: block;
 }
-
diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index c51398cb02..6005915b9b 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -1,3 +1,7 @@
+.no-sidebar aside.sidebar {
+    display: none;
+}
+
 .devportal-callout {
     border-style: solid;
     border-radius: 5px;
@@ -70,9 +74,9 @@
     float: right;
 }
 
-/* Images should occupy the full main column width if possible */
-.page-template-template-dev-portal-php .content img {
-  width: 100%;
+/* Images should not exceed the main column */
+.xrp-ledger-dev-portal .content img {
+  max-width: 100%;
   height: auto;
 }
 
@@ -81,24 +85,58 @@
     width: initial;
 }
 
-/* dev portal content h5 should stand out from paragraph text */
+.no-1st-head h1:first-child,
+.no-1st-head h2:first-child,
+.no-1st-head h3:first-child,
+.no-1st-head h4:first-child,
+.no-1st-head h5:first-child,
+.no-1st-head h6:first-child {
+  display: none;
+}
+.content p {
+  line-height: 1.8;
+}
+
+.content h1 {
+  margin-top: 32px;
+  line-height: 1.2;
+}
+.content h2 {
+  margin-top: 28px;
+  line-height: 1.2;
+}
+.content h3 {
+  margin-top: 24px;
+  line-height: 1.2;
+}
+.content h4 {
+  margin-top: 20px;
+  line-height: 1.2;
+}
 .content h5 {
-    font-weight: bold;
+  margin-top: 16px;
+  line-height: 1.2;
+  font-weight: bold;
+}
+.content h6 {
+  margin-top: 12px
+  line-height: 1.2;
+  font-weight: bold;
 }
 
 /* Underline links in Dev Portal content */
-.page-template-template-dev-portal-php .main a {
+.xrp-ledger-dev-portal .main a {
   text-decoration: underline !important;
 }
 
 /* "Button-style" links should look like buttons, not links */
-.page-template-template-dev-portal-php a.button {
+.xrp-ledger-dev-portal a.button {
   cursor: pointer;
   text-decoration: none !important;
 }
 
 /* Code Tabs stuff */
-.page-template-template-dev-portal-php .multicode {
+.xrp-ledger-dev-portal .multicode {
   color: #000;
   margin: 12px 0px 0px 0px;
   padding: 0 0 0 0;
@@ -106,15 +144,15 @@
   padding-left: 10px;
   position: relative;
 }
-.page-template-template-dev-portal-php .multicode ul {
+.xrp-ledger-dev-portal .multicode ul {
   margin: 0 !important;
   padding: 0;
 }
-.page-template-template-dev-portal-php .multicode pre {
+.xrp-ledger-dev-portal .multicode pre {
   padding-top: 0;
   clear: both;
 }
-.page-template-template-dev-portal-php .multicode li {
+.xrp-ledger-dev-portal .multicode li {
   display: block;
   float: left;
   overflow: hidden;
@@ -122,12 +160,12 @@
   margin-right: 5px;
   border-top: 1px solid #DBDDE2;
 }
-.page-template-template-dev-portal-php .multicode ul > li:before {
+.xrp-ledger-dev-portal .multicode ul > li:before {
   background: none;
   border: none;
 }
-.page-template-template-dev-portal-php .multicode a,
-.page-template-template-dev-portal-php a.current {
+.xrp-ledger-dev-portal .multicode a,
+.xrp-ledger-dev-portal a.current {
   color: black;
   background: #DFE2E7;
   border: 1px solid #DBDDE2;
@@ -135,18 +173,18 @@
   margin: 0px;
   text-decoration: none;
 }
-.page-template-template-dev-portal-php .multicode a.current {
+.xrp-ledger-dev-portal .multicode a.current {
   background: #fff;
   border-bottom: 1px solid #fff;
   color: black;
 }
-.page-template-template-dev-portal-php .multicode a:hover {
+.xrp-ledger-dev-portal .multicode a:hover {
   color: black;
   background: white;
 }
 /* End of code tabs stuff */
 
-.page-template-template-dev-portal-php .button {
+.xrp-ledger-dev-portal .button {
   border-radius: 5px;
   background-color: #27a2db;
   padding: 5px 20px;
@@ -164,152 +202,169 @@
   -webkit-transition: .5s;
   transition: .5s;
 }
-.page-template-template-dev-portal-php .button:hover {
+.xrp-ledger-dev-portal .button:hover {
   background-color: #43bded;
   -o-transition: .5s;
   -webkit-transition: .5s;
   transition: .5s;
 }
-.page-template-template-dev-portal-php pre {
+.xrp-ledger-dev-portal pre {
   overflow: visible;
   word-wrap: normal;
 }
-.page-template-template-dev-portal-php pre code {
+.xrp-ledger-dev-portal pre code {
   white-space: pre;
 }
-.page-template-template-dev-portal-php .code_sample pre {
+.xrp-ledger-dev-portal .code_sample pre {
   background: none;
   border: none;
   border-radius: 0;
 }
-.page-template-template-dev-portal-php .code_sample pre code {
+.xrp-ledger-dev-portal .code_sample pre code {
   overflow: auto;
   max-height: 14em;
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
   border-radius: 4px;
 }
-.page-template-template-dev-portal-php .code_sample pre code.expanded {
+.xrp-ledger-dev-portal .code_sample pre code.expanded {
   overflow: visible;
   max-height: none;
   position: absolute;
   min-width: 661px;
 }
-.page-template-template-dev-portal-php .code_sample .code_toggler {
+.xrp-ledger-dev-portal .code_sample .code_toggler {
   position: absolute;
   bottom: 0;
   right: 0;
 }
-.page-template-template-dev-portal-php .navbar-default {
+.xrp-ledger-dev-portal .navbar-default {
   border-bottom: none;
 }
-.page-template-template-dev-portal-php .wrap.container {
-  margin-top: 110px;
+.xrp-ledger-dev-portal .wrap.container {
+  margin-top: 106px;
 }
-.page-template-template-dev-portal-php .main {
+.xrp-ledger-dev-portal.sidebar-primary .main {
   z-index: 5;
   border-left: 1px solid #cccccc;
   padding-left: 40px;
 }
-.page-template-template-dev-portal-php .content {
+.xrp-ledger-dev-portal .content {
   padding-bottom: 50px;
 }
-.page-template-template-dev-portal-php .level-1 {
-  margin: 10px 0 3px 0;
-  text-transform: uppercase;
+.xrp-ledger-dev-portal .level-1 {
+  padding-left: 15px;
 }
-.page-template-template-dev-portal-php .level-1 a {
-  color: #000000;
-  font-family: 'open_sansbold', sans-serif;
-  letter-spacing: .04em;
+.xrp-ledger-dev-portal .level-2 {
+  padding-left: 30px;
 }
-.page-template-template-dev-portal-php .level-2 {
-  margin-left: 2em;
+.xrp-ledger-dev-portal .level-3 {
+  padding-left: 45px;
 }
-.page-template-template-dev-portal-php .level-3 {
-  margin-left: 4em;
+
+.xrp-ledger-dev-portal #page-toc-wrapper {
+  max-width: 200px;
+  float: right;
+  position: absolute;
+  right: -210px;
 }
-.page-template-template-dev-portal-php .level-3 a {
-  color: #999999;
-}
-.page-template-template-dev-portal-php .level-3 a:hover {
-  color: #666;
-}
-.page-template-template-dev-portal-php .dev_nav_sidebar {
+
+.xrp-ledger-dev-portal .dev_nav_sidebar {
   padding-left: 5px;
   list-style-type: none;
   max-width: 370px;
 }
-.page-template-template-dev-portal-php .dev_nav_wrapper {
+.xrp-ledger-dev-portal .dev_nav_sidebar li:before {
+  content: "\f105"; /* fontawesome angle-right */
+  font-family: FontAwesome;
+  position: relative;
+  left: -15px;
+  margin-right: -5px;
+}
+
+.xrp-ledger-dev-portal .dev_nav_wrapper {
   position: fixed;
   width: 100%;
   overflow-y: scroll;
   top: 130px;
 }
-.page-template-template-dev-portal-php td {
+.xrp-ledger-dev-portal td {
   border: 1px solid #dbdde2;
   padding: 0.2em;
+  vertical-align: text-top;
 }
-.page-template-template-dev-portal-php th {
+.xrp-ledger-dev-portal th {
   padding: 0.2em;
 }
-.page-template-template-dev-portal-php .content a[title="Source"] {
+.xrp-ledger-dev-portal .content a[title="Source"] {
   float: right;
   padding-left: 20px;
 }
-.page-template-template-dev-portal-php .content table {
+.xrp-ledger-dev-portal .content table {
   clear: right;
 }
-.page-template-template-dev-portal-php h1:before,
-.page-template-template-dev-portal-php h2:before,
-.page-template-template-dev-portal-php h3:before {
+.xrp-ledger-dev-portal .main h1:before,
+.xrp-ledger-dev-portal .main h2:before,
+.xrp-ledger-dev-portal .main h3:before,
+.xrp-ledger-dev-portal .main h4:before,
+.xrp-ledger-dev-portal .main h5:before,
+.xrp-ledger-dev-portal .main h6:before,
+#main_content_wrapper:before {
   display: block;
   content: " ";
-  margin-top: -130px;
-  height: 130px;
+  margin-top: -67px;
+  height: 67px;
   visibility: hidden;
 }
 @media (max-width: 1200px) {
-  .page-template-template-dev-portal-php .dev_nav_wrapper {
+  .xrp-ledger-dev-portal .dev_nav_wrapper {
     max-width: 290px;
   }
+  .xrp-ledger-dev-portal #page-toc-wrapper {
+    position: static;
+    float: none;
+    max-width: none;
+  }
+  .sidebar-primary .wrap.container {
+    width: inherit;
+    margin-right: 0;
+  }
 }
 @media (max-width: 992px) {
-  .page-template-template-dev-portal-php .dev_nav_wrapper {
+  .xrp-ledger-dev-portal .dev_nav_wrapper {
     max-width: 230px;
   }
 }
 @media (max-width: 768px) {
-  .page-template-template-dev-portal-php .dev_nav_wrapper,
-  .page-template-template-dev-portal-php .sidebar {
+  .xrp-ledger-dev-portal .dev_nav_wrapper,
+  .xrp-ledger-dev-portal .sidebar {
     display: block;
     clear: both;
     overflow-y: inherit;
     position: static;
     max-width: 100%;
   }
-  .page-template-template-dev-portal-php .main {
+  .xrp-ledger-dev-portal .main {
     position: static;
     clear: both;
     border-left: none;
-    padding-left: 0px;
     overflow-wrap: break-word;
     word-wrap: break-word;
     overflow: hidden;
   }
 }
 @media (min-width: 768px) {
-  .page-template-template-dev-portal-php .main {
+  .xrp-ledger-dev-portal .main {
     float: right;
   }
 }
 @media (max-width: 480px) {
-  .page-template-template-dev-portal-php html {
+  .xrp-ledger-dev-portal html {
     overflow-x: hidden !important;
   }
 }
 @media print {
-  .page-template-template-dev-portal-php {
+  .xrp-ledger-dev-portal {
     /* undo code tabs */
     /* wrap code, not scroll */
     /* Source URLs are too big to float */
@@ -319,61 +374,58 @@
     /* better margins on main content */
     /* crazy print-section-numbering idea */
   }
-  .page-template-template-dev-portal-php .multicode > div {
+  .xrp-ledger-dev-portal .multicode > div {
     display: block !important;
   }
-  .page-template-template-dev-portal-php .multicode > ul {
+  .xrp-ledger-dev-portal .multicode > ul {
     display: none !important;
   }
-  .page-template-template-dev-portal-php .multicode > em,
-  .page-template-template-dev-portal-php .multicode > p > em {
+  .xrp-ledger-dev-portal .multicode > em,
+  .xrp-ledger-dev-portal .multicode > p > em {
     display: block !important;
     page-break-after: avoid;
   }
-  .page-template-template-dev-portal-php .multicode > p {
+  .xrp-ledger-dev-portal .multicode > p {
     display: block !important;
   }
-  .page-template-template-dev-portal-php pre {
+  .xrp-ledger-dev-portal pre {
     white-space: pre-wrap;
     max-height: none !important;
     overflow: visible;
     page-break-inside: auto;
     word-wrap: break-word;
   }
-  .page-template-template-dev-portal-php pre code {
+  .xrp-ledger-dev-portal pre code {
     white-space: pre-wrap !important;
   }
-  .page-template-template-dev-portal-php .content a[title="Source"] {
+  .xrp-ledger-dev-portal .content a[title="Source"] {
     float: none;
   }
-  .page-template-template-dev-portal-php .main a:after {
-    content: " (" attr(href) ")";
-  }
-  .page-template-template-dev-portal-php header,
-  .page-template-template-dev-portal-php footer {
+  .xrp-ledger-dev-portal header,
+  .xrp-ledger-dev-portal footer {
     display: none;
   }
-  .page-template-template-dev-portal-php #goog-gt-tt {
+  .xrp-ledger-dev-portal #goog-gt-tt {
     display: none;
   }
-  .page-template-template-dev-portal-php .wrap.container {
+  .xrp-ledger-dev-portal .wrap.container {
     margin-top: 0 !important;
   }
-  .page-template-template-dev-portal-php .dev_nav_wrapper {
+  .xrp-ledger-dev-portal .dev_nav_wrapper {
     position: static !important;
   }
-  .page-template-template-dev-portal-php .sidebar:before {
+  .xrp-ledger-dev-portal .sidebar:before {
     display: none !important;
   }
-  .page-template-template-dev-portal-php .sidebar {
+  .xrp-ledger-dev-portal .sidebar {
     padding-top: 0 !important;
     display: block !important;
     float: none !important;
   }
-  .page-template-template-dev-portal-php h1 {
+  .xrp-ledger-dev-portal h1 {
     page-break-before: always;
   }
-  .page-template-template-dev-portal-php .main {
+  .xrp-ledger-dev-portal .main {
     float: none !important;
     width: 85% !important;
     border-left: 0 !important;
@@ -382,78 +434,6 @@
     display: block !important;
     overflow: visible !important;
   }
-  .page-template-template-dev-portal-php .main {
-    counter-reset: level1;
-    counter-reset: level2;
-    counter-reset: level3;
-  }
-  .page-template-template-dev-portal-php .main h1 {
-    counter-increment: level1;
-    counter-reset: level2;
-  }
-  .page-template-template-dev-portal-php .main h1:before {
-    content: counter(level1) ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-    visibility: visible !important;
-  }
-  .page-template-template-dev-portal-php .main h2 {
-    counter-reset: level3;
-  }
-  .page-template-template-dev-portal-php .main h2:before {
-    counter-increment: level2;
-    content: counter(level1) "." counter(level2) ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-    visibility: visible !important;
-  }
-  .page-template-template-dev-portal-php .main h3:before {
-    counter-increment: level3;
-    content: counter(level1) "." counter(level2) "." counter(level3) ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-    visibility: visible !important;
-  }
-  .page-template-template-dev-portal-php .menubar,
-  .page-template-template-dev-portal-php .dev_nav_wrapper {
-    counter-reset: toclevel1;
-  }
-  .page-template-template-dev-portal-php .level-1 {
-    counter-reset: toclevel2;
-  }
-  .page-template-template-dev-portal-php .level-1:before {
-    counter-increment: toclevel1;
-    content: counters(toclevel1, ".") ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-  }
-  .page-template-template-dev-portal-php .level-2 {
-    counter-reset: toclevel3;
-  }
-  .page-template-template-dev-portal-php .level-2:before {
-    counter-increment: toclevel2;
-    content: counters(toclevel1, ".") "." counters(toclevel2, ".") ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-  }
-  .page-template-template-dev-portal-php .level-3:before {
-    counter-increment: toclevel3;
-    content: counters(toclevel1, ".") "." counters(toclevel2, ".") "." counters(toclevel3, ".") ". " !important;
-    display: inline !important;
-    background: none !important;
-    position: static !important;
-    box-shadow: none !important;
-  }
 }
 
 /*------------- Code Tabs -----------------------------------------*/
@@ -504,4 +484,238 @@
 	background: white;
 }
 
-.multicode a.current:hover {}
+.navbar-default {
+    background-color: #fff;
+    border-bottom: 1px solid #27a2db;
+}
+
+.navbar-brand {
+  vertical-align: middle;
+  text-decoration: none;
+}
+
+.navbar-default .logo {
+    float: left;
+    margin-right: 0.5em;
+}
+
+.navbar-default .navbar-brand .brand-text {
+  font-family: open_sansbold, sans-serif;
+  font-weight: bold;
+  line-height: 40px;
+}
+
+.navbar-default .navbar-nav > li > a {
+    font-size: 14px;
+    line-height: 30px;
+    color: #777;
+}
+
+.navbar-default a.active {
+    color: #27a2db !important;
+}
+
+.dev_nav .breadcrumb {
+  margin-bottom: 0;
+}
+
+.wrap-container {
+  margin-top: 106px;
+}
+
+.no-sidebar main .container {
+  padding-left: 0;
+}
+
+#main_content_wrapper {
+  margin-top: 67px;
+  padding-left: 0;
+}
+
+.jump-to-top {
+  display: none;
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  background-color: #333;
+  font-weight: bolder;
+  z-index: 1000;
+  color: white;
+}
+@media screen and (max-width: 767px) {
+  .jump-to-top {
+    bottom: 40px;
+    right: 40px;
+  }
+}
+
+.xrp-ledger-dev-portal .breadcrumb li {
+  margin: 0;
+}
+.xrp-ledger-dev-portal .breadcrumb > li + li:before {
+    content: "\f105"; /* fontawesome angle-right */
+    font-family: FontAwesome;
+    padding-right: 5px;
+}
+.xrp-ledger-dev-portal .breadcrumb > li.active {
+  color: #666;
+}
+
+/* "← Back to guide" link in sidebar */
+.back_to_guide a {
+  display: block;
+  font-size: 14px;
+  padding: 27px 0 14px 15px;
+  color: #666;
+  border-bottom: 1px solid #eee;
+}
+.back_to_guide a:before {
+    content: "\f100"; /* fontawesome angle-double-left */
+    font-family: FontAwesome;
+    padding-right: 15px;
+    color: #666;
+}
+
+/* Accordion styling for sidebar navigation */
+.sidebar_cat_pagelist {
+  margin-left: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+#sidenav_accordion a {
+  text-decoration: none;
+}
+#sidenav_accordion .panel-body a:hover {
+  text-decoration: underline;
+}
+
+#sidenav_accordion .panel + .panel {
+  margin: 0;
+}
+
+#sidenav_accordion .panel-default {
+  border-width: 0;
+  border-color: #eee;
+}
+
+#sidenav_accordion .panel-body {
+  padding: 0;
+}
+
+#sidenav_accordion .collapse {
+  padding-bottom: 0;
+}
+
+#sidenav_accordion .panel.active {
+  background-color: #f8f8f8;
+}
+#sidenav_accordion .panel:hover {
+  background-color: #f6f6f6;
+}
+
+#sidenav_accordion .panel-heading {
+  padding: 0;
+  background-color: transparent;
+}
+
+#sidenav_accordion .panel {
+  padding: 0;
+  border-radius: 0;
+}
+
+#sidenav_accordion .panel-heading h5 {
+  margin-bottom: 0;
+  text-transform: none;
+}
+
+#sidenav_accordion .panel-heading h5 a {
+  display: block;
+  padding: 16px 15px;
+  font-family: "open_sansregular", sans-serif;
+  color: #666;
+}
+
+#sidenav_accordion .panel-heading a:before {
+    content: "\f106"; /* fontawesome angle-up */
+    font-family: FontAwesome;
+    margin-left: -20px;
+    padding-right: 5px;
+    float: right;
+}
+#sidenav_accordion .panel-heading a.collapsed:before {
+    content: "\f107"; /* fontawesome angle-down */
+}
+
+
+#sidenav_accordion .panel .sidebar_cat_pagelist li a {
+  display: block;
+  margin-top: 5px;
+  padding: 4px 15px 4px 55px;
+  text-indent: -20px;
+  font-size: 14px;
+  color: #27a2db;
+}
+
+#sidenav_accordion .panel .sidebar_cat_pagelist a.active {
+  color: black;
+  font-weight: bold;
+}
+
+#sidenav_accordion .panel .sidebar_cat_pagelist a:hover {
+  color: #333;
+}
+
+/* Edit on GitHub link --------- */
+.github-edit-wrap .github-edit {
+  background-color: black;
+  background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
+  background-position: left center;
+  background-repeat: no-repeat;
+  color: white;
+  border-radius: 8px;
+  margin: 10px;
+  float: right;
+  padding: 10px 20px 10px 38px;
+  text-decoration: none;
+}
+.github-edit-wrap .github-edit:hover {
+  text-decoration: underline;
+}
+
+.build-index .top {
+    text-indent: -20px;
+}
+
+.build-index ul {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    padding: 0;
+}
+
+.build-index ul li {
+    font-size: 14px;
+    list-style: outside none none;
+    padding: 5px;
+    padding-left: 25px;
+}
+
+.build-index .dev_heading {
+    font-family: "Open Sans",sans-serif;
+    letter-spacing: 0.04em;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #202020;
+}
+.build-index a.dev_heading:hover {
+  color: #27a2db;
+  text-decoration: underline;
+}
+
+.build-disclaimer {
+  font-size: 10pt;
+  margin: 2em 0;
+  padding-top: 2em;
+  border-top: 1px solid #777;
+}
diff --git a/assets/css/landing.css b/assets/css/landing.css
deleted file mode 100644
index cc92820e7d..0000000000
--- a/assets/css/landing.css
+++ /dev/null
@@ -1,112 +0,0 @@
-.page-template-template-dev-portal-php .main {
-    border-left: 0;
-}
-
-/************
-  jumbotron
-*********** */
-
-.jumbotron {
- 	margin-top: 50px;
- 	margin-bottom: 0;
-}
-
-.jumbotron p {
- 	font-size: 14px;
-	font-weight: 400; 	
-}
-
-.main_callout {
-	padding-top:10px;
-}
-
-.join {
-	font-weight: 500 !important;
-}
-
-img.large_logo {
-	padding: 10px 20px 10px 10px;
-	width: 100%;
-}
-
-
-.jumbotron p.api_btn {
-	/* text-align: center; 
-	padding: 20px;*/
-}
-
-.jumbotron h4 {
-	font-weight: 800;
-}
-
-@media (min-width: 992px) {
-
-	.jumbotron .col-md-6 {
-		padding-left: 60px;
-	}
-	
-}
-
-/************
-Main content
-*********** */
-
-.main_title {
-	font-size: 30px;
-	font-weight: 300;
-	margin-top:10px;
-}
-
-.description h2{
-	font-size: 24px;
-	font-weight: 600;
-	margin: 20px 0 15px 0;
-}
-
-.build-index .top {
-    background: #f4f6f7 none repeat scroll 0 0;
-}
-
-.build-index ul {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    padding: 0;
-}
-
-.build-index ul li {
-    border: 1px solid #ccc;
-    border-top-width: 0;
-    font-size: 14px;
-    list-style: outside none none;
-    padding: 5px;
-}
-
-.build-index ul li.top {
-    border-top-width: 1px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-}
-
-.build-index .dev_heading {
-    font-family: "Open Sans",sans-serif;
-    letter-spacing: 0.04em;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.last {
-	margin-bottom: 40px;
-}
-
-.description.highlight {
-	background: #f5f5f5;
-	padding-bottom: 15px;
-	margin: 22px 0;
-}
-
-@media (max-width: 992px) {
-	.description.highlight {
-		padding-top: 10px;
-	}
-}
-
diff --git a/assets/css/pdf.css b/assets/css/pdf.css
index faae58fb97..19dbe0d8a1 100755
--- a/assets/css/pdf.css
+++ b/assets/css/pdf.css
@@ -14,10 +14,3 @@ a[href^="#"]:after {
   background: transparent;
   box-decoration-break: slice;
 }
-
-/* Disable header numbering */
-.page-template-template-dev-portal.page-template-template-dev-portal-php h1:before,
-.page-template-template-dev-portal.page-template-template-dev-portal-php h2:before,
-.page-template-template-dev-portal.page-template-template-dev-portal-php h3:before {
-   content: none !important;
-}
diff --git a/assets/css/ripple.css b/assets/css/ripple.css
index a70d9b8d41..7dcd97e827 100755
--- a/assets/css/ripple.css
+++ b/assets/css/ripple.css
@@ -286,13 +286,11 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #346aa9;
-  text-decoration: none !important;
+  color: #27a2db;
 }
 a:hover,
 a:focus {
   color: #22456e;
-  text-decoration: underline;
 }
 a:focus {
   outline: thin dotted;
@@ -529,7 +527,7 @@ mark,
   color: #777777;
 }
 .text-primary {
-  color: #346aa9;
+  color: #27a2db;
 }
 a.text-primary:hover {
   color: #285282;
@@ -560,7 +558,7 @@ a.text-danger:hover {
 }
 .bg-primary {
   color: #fff;
-  background-color: #346aa9;
+  background-color: #27a2db;
 }
 a.bg-primary:hover {
   background-color: #285282;
@@ -2184,7 +2182,7 @@ fieldset[disabled] .btn-default.active {
 }
 .btn-primary {
   color: #ffffff;
-  background-color: #346aa9;
+  background-color: #27a2db;
   border-color: #2e5e96;
 }
 .btn-primary:hover,
@@ -2216,11 +2214,11 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
-  background-color: #346aa9;
+  background-color: #27a2db;
   border-color: #2e5e96;
 }
 .btn-primary .badge {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .btn-success {
@@ -2388,7 +2386,7 @@ fieldset[disabled] .btn-danger.active {
   background-color: #ffffff;
 }
 .btn-link {
-  color: #346aa9;
+  color: #27a2db;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
@@ -2539,12 +2537,12 @@ tbody.collapse.in {
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #346aa9;
+  color: #27a2db;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   text-decoration: none;
   outline: 0;
 }
@@ -2975,7 +2973,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #346aa9;
+  border-color: #27a2db;
 }
 .nav .nav-divider {
   height: 1px;
@@ -3068,7 +3066,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #346aa9;
+  background-color: #27a2db;
 }
 .nav-stacked > li {
   float: none;
@@ -3482,7 +3480,7 @@ ul#menu-primary-navigation {
 .home .navbar-default .navbar-nav > .active > a,
 .home .navbar-default .navbar-nav > .active > a:hover,
 .home .navbar-default .navbar-nav > .active > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .home .navbar-default .navbar-nav > .disabled > a,
@@ -3555,7 +3553,7 @@ fieldset[disabled] .home .navbar-default .btn-link:focus {
 .navbar-default {
   z-index: 99999;
   background-color: #ffffff;
-  border-bottom: 1px solid #346aa9;
+  border-bottom: 1px solid #27a2db;
 }
 .navbar-default .navbar-brand {
   color: #777777;
@@ -3573,13 +3571,13 @@ fieldset[disabled] .home .navbar-default .btn-link:focus {
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .navbar-default .navbar-nav > .disabled > a,
@@ -3596,7 +3594,7 @@ fieldset[disabled] .home .navbar-default .btn-link:focus {
   background-color: transparent;
 }
 .navbar-default .navbar-toggle .icon-bar {
-  background-color: #346aa9;
+  background-color: #27a2db;
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
@@ -3652,7 +3650,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-default.scrolled {
   z-index: 99999;
   background-color: #ffffff !important;
-  border-bottom: 1px solid #346aa9;
+  border-bottom: 1px solid #27a2db;
   -o-transition: .3s;
   -ms-transition: .3s;
   -moz-transition: .3s;
@@ -3680,7 +3678,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 }
 .navbar-default.scrolled .navbar-nav > li > a:hover,
 .navbar-default.scrolled .navbar-nav > li > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   background-color: transparent;
   -o-transition: 1s;
   -ms-transition: 1s;
@@ -3691,7 +3689,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-default.scrolled .navbar-nav > .active > a,
 .navbar-default.scrolled .navbar-nav > .active > a:hover,
 .navbar-default.scrolled .navbar-nav > .active > a:focus {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .navbar-default.scrolled .navbar-nav > .disabled > a,
@@ -3705,7 +3703,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: transparent;
 }
 .navbar-default.scrolled .navbar-toggle .icon-bar {
-  background-color: #346aa9;
+  background-color: #27a2db;
 }
 .navbar-default.scrolled .navbar-collapse,
 .navbar-default.scrolled .navbar-form {
@@ -3894,7 +3892,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   margin-left: -1px;
@@ -3926,8 +3924,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #346aa9;
-  border-color: #346aa9;
+  background-color: #27a2db;
+  border-color: #27a2db;
   cursor: default;
 }
 .pagination > .disabled > span,
@@ -4043,7 +4041,7 @@ a.label:focus {
   background-color: #5e5e5e;
 }
 .label-primary {
-  background-color: #346aa9;
+  background-color: #27a2db;
 }
 .label-primary[href]:hover,
 .label-primary[href]:focus {
@@ -4110,7 +4108,7 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
@@ -4174,7 +4172,7 @@ a.list-group-item.active > .badge,
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #346aa9;
+  border-color: #27a2db;
 }
 .thumbnail .caption {
   padding: 9px;
@@ -4288,7 +4286,7 @@ a.thumbnail.active {
   line-height: 20px;
   color: #ffffff;
   text-align: center;
-  background-color: #346aa9;
+  background-color: #27a2db;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
@@ -4439,8 +4437,8 @@ a.list-group-item:focus {
 .list-group-item.active:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #346aa9;
-  border-color: #346aa9;
+  background-color: #27a2db;
+  border-color: #27a2db;
 }
 .list-group-item.active .list-group-item-heading,
 .list-group-item.active:hover .list-group-item-heading,
@@ -4772,22 +4770,22 @@ a.list-group-item-danger.active:focus {
   border-bottom-color: #dddddd;
 }
 .panel-primary {
-  border-color: #346aa9;
+  border-color: #27a2db;
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #346aa9;
-  border-color: #346aa9;
+  background-color: #27a2db;
+  border-color: #27a2db;
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #346aa9;
+  border-top-color: #27a2db;
 }
 .panel-primary > .panel-heading .badge {
-  color: #346aa9;
+  color: #27a2db;
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #346aa9;
+  border-bottom-color: #27a2db;
 }
 .panel-success {
   border-color: #d6e9c6;
@@ -5652,7 +5650,7 @@ Dev subnav
 .banner .dev_nav {
   background: #f4f6f7;
   padding: 5px;
-  border-top: 1px solid #346aa9;
+  border-top: 1px solid #27a2db;
   border-bottom: 1px solid #cccccc;
 }
 .banner .dev_nav li {
@@ -5697,7 +5695,7 @@ Style subnav
 .style_nav {
   background: #f4f6f7;
   padding: 5px;
-  border-top: 1px solid #346aa9;
+  border-top: 1px solid #27a2db;
   border-bottom: 1px solid #cccccc;
 }
 .style_nav li {
@@ -5717,7 +5715,7 @@ Company subnav
 .company_nav {
   background: #f4f6f7;
   padding: 5px;
-  border-top: 1px solid #346aa9;
+  border-top: 1px solid #27a2db;
   border-bottom: 1px solid #cccccc;
 }
 .company_nav li {
@@ -5737,7 +5735,7 @@ News subnav
 .news_nav {
   background: #f4f6f7;
   padding: 5px;
-  border-top: 1px solid #346aa9;
+  border-top: 1px solid #27a2db;
   border-bottom: 1px solid #cccccc;
 }
 .news_nav li {
@@ -5964,7 +5962,7 @@ i.fa.fa-share {
   display: none;
 }
 .scrolled .nav_x {
-  color: #346aa9;
+  color: #27a2db;
 }
 .white_x {
   display: none;
@@ -5972,7 +5970,7 @@ i.fa.fa-share {
 .nav_x {
   margin-top: -4px;
   display: none;
-  color: #346aa9;
+  color: #27a2db;
   width: 20px;
 }
 .page-header {
@@ -6016,14 +6014,14 @@ img.ripple_stack {
   font-size: 21px;
 }
 .title_border hr {
-  border-bottom: 1px solid #346aa9;
+  border-bottom: 1px solid #27a2db;
   width: 100px;
 }
 .top_border_section {
   border-top: 1px solid #cccccc;
 }
 .ripple_page_heading h3 hr {
-  border-top: 1px solid #346aa9;
+  border-top: 1px solid #27a2db;
   width: 200px;
   margin-top: 30px;
 }
@@ -6352,7 +6350,7 @@ Thank You page
 }
 .error404 h1 {
   font-size: 48px;
-  color: #346aa9;
+  color: #27a2db;
 }
 .error404 ul {
   list-style-type: none;
@@ -6562,7 +6560,7 @@ Media Queries
   .dev_nav {
     background: #f4f6f7;
     padding: 5px;
-    border-top: 1px solid #346aa9;
+    border-top: 1px solid #27a2db;
     border-bottom: 1px solid #cccccc;
   }
   .dev_nav li {
@@ -6594,12 +6592,6 @@ Media Queries
     display: none !important;
   }
 }
-@media (min-width: 768px) {
-  .sidebar {
-    padding-top: 75px;
-    padding-left: 30px !important;
-  }
-}
 @media (max-width: 1024px) {
   .hidden-ipad {
     display: none !important;
@@ -6613,55 +6605,7 @@ Media Queries
     display: block !important;
   }
 }
-/*
-******************
-Transifex
-******************
-*/
-#translation {
-  display: inline-block;
-}
-#tx-live-lang-toggle {
-  display: none;
-}
-.txlive-langselector-list {
-  position: absolute;
-  margin: 50px 0 0 0 !important;
-  padding: 0 !important;
-  display: inline-block !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-  color: #999999 !important;
-  width: auto !important;
-  top: 0 !important;
-  left: 0;
-}
-.txlive-langselector-list > li {
-  padding: 0 16px;
-  display: inline-block !important;
-  width: auto !important;
-  -o-transition: .5s;
-  -ms-transition: .5s;
-  -moz-transition: 5s;
-  -webkit-transition: .5s;
-  transition: .5s;
-}
-.txlive-langselector-list > li:hover {
-  background-color: transparent !important;
-  -o-transition: .5s;
-  -ms-transition: .5s;
-  -moz-transition: 5s;
-  -webkit-transition: .5s;
-  transition: .5s;
-}
-@media (max-width: 480px) {
-  .txlive-langselector-list {
-    position: relative !important;
-  }
-  .txlive-langselector-list > li {
-    padding: 0 5px 0 !important;
-  }
-}
+
 .aligncenter {
   display: block;
   margin: 10px auto;
@@ -6710,7 +6654,7 @@ figure.alignnone {
   }
 }
 .banner .main_nav_wrapper {
-  border-bottom: 1px solid #346aa9;
+  border-bottom: 1px solid #27a2db;
   height: 60px;
 }
 .banner ul#menu-primary-navigation li:hover {
@@ -6930,7 +6874,7 @@ figure.alignnone {
 }
 .content-info .absolute_bottom_footer .social-iconer a:hover,
 .content-info .absolute_bottom_footer .social-iconer a:focus {
-  color: #346aa9;
+  color: #27a2db;
   -o-transition: .5s;
   -ms-transition: .5s;
   -moz-transition: .5s;
diff --git a/assets/js/jump-to-top.js b/assets/js/jump-to-top.js
new file mode 100644
index 0000000000..7d5d67c553
--- /dev/null
+++ b/assets/js/jump-to-top.js
@@ -0,0 +1,15 @@
+$(document).ready(function() {
+  var TO_TOP_MIN = 50;
+  var TO_TOP_SPEED = 500;
+  var TO_TOP_POS = 0;
+  $(window).scroll(function () {
+    if ($(this).scrollTop() > TO_TOP_MIN) {
+       $('.jump-to-top').fadeIn();
+    } else {
+       $('.jump-to-top').fadeOut();
+    }
+  });
+  $(".jump-to-top").click(function() {
+    $("body").animate({scrollTop: TO_TOP_POS}, TO_TOP_SPEED)
+  });
+});
diff --git a/assets/vendor/github-marks/GitHub-Mark-Light-120px-plus.png b/assets/vendor/github-marks/GitHub-Mark-Light-120px-plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..192846a12085914cc0e38d9b48036b11d2a4d7c4
GIT binary patch
literal 4044
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
ZsK8ky_?39l4gAjkwLQ)WTW#Z?@NW_mBhUZ<

literal 0
HcmV?d00001

diff --git a/assets/vendor/github-marks/GitHub-Mark-Light-32px.png b/assets/vendor/github-marks/GitHub-Mark-Light-32px.png
new file mode 100644
index 0000000000000000000000000000000000000000..628da97c70890c73e59204f5b140c4e67671e92d
GIT binary patch
literal 1571
zcmaJ>c~BE~6izDPQq)#Nu*KOf(n^(VHY9;fiINM65``pc+9*v(mL$bw<L=UgNab<{
z#iQ041Ze@ON0An#j)HfCN>fCjbc%v9V{8r9iX|O%>Nr%pLD2qT{mty}c=LVleeamv
znz3SOSm@kP8jThvOOq(56Yzh*fz(booe!uZij=BJC6+_lbvQ~B8nA2>kXdv_RDtRY
z`5QXWWEySCe6vbTs^#f?J!WC*{1~RgVx!nJTJjQyO{dRANgx|FnymtG<jnUVU^WQA
zHC#DMZWE&>bD9%JmCh9^y)##j7{Dcqfn*1ta$rG89pJF6w-S7Z037$rr|y0;1Onp_
zGFJdT6Q!1C0AdVB0WOmpuV=AgAQ550Tn+-mivTtYPJmz*#75#_n9oV%!#rSOfmAfy
zki%C<QYT_jF9B#GNgE%6>~=fTp1{O#BLpJ|0<qW-n;lOf;)#4KsdL0ziI_<b5|q&6
zW*ce7tbpI6E*r}u1t6vLSqc`LT>jj#m6#|LRWit-vq3PE1z9ZqyvET4sX$-Icqy7t
z<=aq5ff86AuBZBu6EjJsYWM0uejufWFTwPA7Su}0Bm$7KFb!q{Um_8~A{LUG#1l(l
zSehUda@kU8LIRg9fkk2tZ;~ss5~R+mM<==F7hLHpxqLB>>PQS%Vc7b~?q!%T5+h8Q
z4G=4Nzyi5WZ?^gkasJ{?Xhm`JC#WG6$1K2jb@=9&D3EgD#3UhGh#*21rJjulVXjCF
zvp76q62jt0zzMG5C7DlfMgPl%C^3+~wf|}Lq=}jz|MmIcQjh1Ok6NjD$Em^Iv26D>
z8tt_TnM9~^Tt8mflRGPOrrX|HtT3gG4LEuuk{g2Rn}QgJIa?gZo))!!=o_l9bvD%A
zZ`aHajl8#~u?!4f7F#*b*->A<IiN87Qp@Ex4*smYI^qhb?b+LvGs^ZA8-}{BBtj$i
zH{M&Cc{}#_Z`#oGl5N_6Y54HF4aIDA5Y(3SRpb19Vf#ICCP_zA8?yiYA8rQW2{EPK
zZR+6SHKBmF@5h=|CkA#^&k;tRYTcFV4vieiB$Ss<zT*jQ_#otlN4hNY?K@V@levFC
zUg_GMahvCU+{Sry`3ZkPY1pAF=eM}iiJflldd)G$TE(XJs^*05;uQ7!bocP=C5L`F
zRGa1ctQ7IWy~a;xv~Bz;{0ANq(Q^3KUV$uyKBx#>=R2L)6!>saz?h>#wTXT-I(XmQ
zx{84skS>k=i~i`(6k4C7;Zpfx%dCPVjPayMf8pugtGM=~s=Id1l#8MZJ1-73wV#Q3
zR3>v3%}jbQs1f_Z0xo;%=LILlA+nTpKI4ha%xWW}uqHrNao~&T4AY6m`P$_n-6h*g
zhoX+e4n%~gl_lhe#s+AMb7d{5WzvYTa%6Q~si@@4{;s(0zU|H&P3fE+t{7X`S#Cj@
zC#vd}^4pcBD*77Ny5=j$h8EL2_t$O38$SQiJ6fPjJMimypr~MB2(&P0aI|h}$64<0
z>_~duqNjaT=DM^6+N{&B_lED;F2wrl?!4Lk*2((x!fmrcsw+=cI^qttuZ9C}-m~5E
z-ryYVpL%^xR#&(0YI5hz<(}F7-p)?FPcyJO-zVO>%9ZDXJH8pnY;GJYFDQ>vd#j_*
zRrd}L(r=!g+1#nQwsO?kpS`Qq8`NxE+Zy{gf7*_7J*U2V_|NpLo{iasj7VCg_V9&|
ShohtYzipXxh2)4xTk<dWx?vyy

literal 0
HcmV?d00001

diff --git a/assets/vendor/github-marks/GitHub-Mark-Light-64px.png b/assets/vendor/github-marks/GitHub-Mark-Light-64px.png
new file mode 100644
index 0000000000000000000000000000000000000000..73db1f61f3aa55fcaecbca896dbea067706bb7bd
GIT binary patch
literal 2330
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
MKo6o-Qerdz3wwRZj{pDw

literal 0
HcmV?d00001

diff --git a/tool/template-base.html b/tool/template-base.html
index 8edd46bd71..b9fdac1933 100644
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -5,7 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
 
-    <title>{{ currentpage.name }} - {{ target.display_name }}</title>
+    <title>{{ currentpage.name }} - XRP Ledger Developer Portal</title>
+
+    <!--[if lt IE 9]>
+      <script src="/dist/js/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="/dist/js/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
 
     <!-- favicon -->
     <link rel="icon" href="favicon.ico" type="image/x-icon">
@@ -21,54 +27,56 @@
     <!-- Bootstrap JS -->
     <script src="assets/vendor/bootstrap.min.js"></script>
 
+    <!-- fontawesome icons -->
+    <link rel="stylesheet" href="assets/vendor/fontawesome/css/font-awesome.min.css" />
+    
     {% block head %}
 
     {% endblock %}
 
 </head>
 
-<body class="page page-template page-template-template-dev-portal page-template-template-dev-portal-php {% if currentpage.sidebar != 'off' %}sidebar-primary{% endif %} wpb-js-composer js-comp-ver-3.6.2 vc_responsive">
+<body class="{% block bodyclasses %} xrp-ledger-dev-portal sidebar-primary{% endblock %}">
   <header role="banner" class="banner navbar navbar-default navbar-fixed-top initial_header">
     <div class="container">
       <div class="navbar-header">
-          <a href="index.html" class="navbar-brand"><img src="assets/img/ripple-logo-color.png" class="logo"></a>
+          <a href="index.html" class="navbar-brand">
+            <img src="assets/img/ripple-logo-color.png" class="logo">
+            <span class="brand-text">XRP Ledger Developer Portal</span>
+          </a>
       </div><!-- /.navbar-header -->
       <div class="nav">
         <div class="draft-warning">DRAFT PAGE</div>
+        <div class="github-edit-wrap">
+          {% if currentpage.md is defined %}
+            {% set githuburl = "https://github.com/ripple/ripple-dev-portal/edit/master/content/" + currentpage.md %}
+          {% elif currentpage.template is defined %}
+            {% set githuburl = "https://github.com/ripple/ripple-dev-portal/edit/master/tool/" + currentpage.template %}
+          {% else %}
+            {% set githuburl = "https://github.com/ripple/ripple-dev-portal/" %}
+          {% endif %}
+          <a href="{{githuburl}}" class="github-edit">Edit on GitHub</a>
+        </div><!-- /.github-edit -->
       </div><!-- /.nav -->
 
     </div><!-- /.container -->
 
-    <div class="subnav dev_nav">
-      <div class="container">
-        <ul id="menu-dev-menu" class="menu">
-          {% for cat in categories %}
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{cat}} <span class="caret"></span></a>
-            <ul class="dropdown-menu" role="menu">
-            {% for page in pages %}
-    	       {% if page.category == cat %}
-                  <li><a href="{{ page.html }}">{{ page.name }}</a></li>
-                  {% endif %}
-            {% endfor %}
-            </ul>
-          </li>
-          {% endfor %}
-
-          <li><a href="https://github.com/ripple/ripple-dev-portal" title="GitHub">Site Source</a></li>
-        </ul><!-- /#dev-menu -->
-      </div><!-- /.subnav .container -->
-    </div><!-- /.subnav -->
   </header>
 
 
-  <div class="wrap container" role="document">
-      {% if currentpage.sidebar != 'off' %}
+  <div class="wrap container" role="document" id="main_content_wrapper">
       <aside class="sidebar" role="complementary">
           {% block sidebar %}{% endblock %}
       </aside>
-      {% endif %}
       <main class="main" role="main">
+          {% block breadcrumbs %}
+              <ul class="breadcrumb">
+                <li><a href="index.html">XRP Ledger Documentation</a></li>
+                {% if currentpage.category %}
+                <li class="active">{{ currentpage.category }}</li>
+                {% endif %}
+              </ul>
+          {% endblock %}
           {% block main %}{% endblock %}
       </main>
   </div>
diff --git a/tool/template-doc.html b/tool/template-doc.html
index 232f02d1ca..81457ebc19 100644
--- a/tool/template-doc.html
+++ b/tool/template-doc.html
@@ -18,35 +18,26 @@
     <script src="assets/js/expandcode.js"></script>
     <script src="assets/js/fixsidebarscroll.js"></script>
 
-    <!-- fontawesome icons -->
-    <link rel="stylesheet" href="assets/vendor/fontawesome/css/font-awesome.min.css" />
 {% endblock %}
 
 {% block sidebar %}
-  {% if currentpage.sidebar != 'off' %}
-    <div class="dev_nav_wrapper">
-        <div id="cont">
-            <h5>In this category:</h5>
-            <ul class="dev_nav_sidebar">
-                <li class="level-1"><a href="index.html">Category: {{ currentpage.category }}</a></li>
-            {% for page in pages %}
-	          {% if page.category == currentpage.category %}
-                <li class="level-2"><a href="{{ page.html }}">{{ page.name }}</a></li>
-              {% endif %}
-            {% endfor %}
-            </ul>
-            <hr />
-            <h5>In this page:</h5>
-            <ul class="dev_nav_sidebar" id="dactyl_toc_sidebar">
-                {{ page_toc }}
-            </ul>
-        </div>
-    </div>
-  {% endif %}
+{% if currentpage.sidebar != "disabled" %}
+
+  {% include "template-sidebar_nav.html" %}
+
+{% endif %}
 {% endblock %}
 
 {% block main %}
-    <div class='content'>
+    <h1 class="main-page-header">{{ currentpage.name }}</h1>
+
+    <div id="page-toc-wrapper" class="panel panel-default">
+      <p class="in-this-doc panel-heading">In this document:</p>
+      <ul class="dev_nav_sidebar panel-body" id="dactyl_toc_sidebar">
+        {{ sidebar_content }}
+      </ul>
+    </div>
+    <div class='content no-1st-head'>
         {{ content }}
     </div>
 {% endblock %}
diff --git a/tool/template-footer.html b/tool/template-footer.html
index 41d0b3b526..5cd7481a22 100644
--- a/tool/template-footer.html
+++ b/tool/template-footer.html
@@ -3,7 +3,7 @@
         <div class="row">
        		<div class="col-sm-12 absolute_bottom_footer">
        			<div class="col-sm-8">
-                    <span>&copy; 2013 - 2017 Ripple Labs, Inc. All Rights Reserved.</span>
+                    <span>&copy; 2013 - 2018 Ripple. All Rights Reserved.</span>
                     <span><a href="/terms-of-use/">Terms</a></span>
                     <span><a href="/privacy-policy/">Privacy</a></span>
                 </div>
@@ -12,3 +12,7 @@
         </div><!-- /.row -->
     </div><!-- /.container -->
 </footer>
+
+<!-- Jump to top button -->
+<a href="#main_content_wrapper" class="jump-to-top btn btn-primary btn-lg" role="button" title="Jump to top of page">Top</span></a>
+<script type="text/javascript" src="assets/js/jump-to-top.js"></script>
diff --git a/tool/template-index.html b/tool/template-index.html
index 29dbd1958f..f465d1e611 100644
--- a/tool/template-index.html
+++ b/tool/template-index.html
@@ -7,50 +7,45 @@
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-    
-    
-    <link href="assets/css/landing.css" rel="stylesheet">
-    
-{% endblock %}
-    
-{% block main %}
 
-    <!-- jumbotron -->
-	<!-- <div class="container theme-showcase" role="main"> -->
-    <div class="jumbotron">
-      <div class="container">
-      	<div class="row">
-      		<div class="col-md-12">
-       		 <div class="col-md-3">
-       		 	<img class="large_logo" src="assets/img/dev-logo.png" />
-       		 </div>
-       		 <div class="col-md-9">
-       		 	<h4>Welcome to the Developer Center</h4>
-        		<p class="main_callout">
-Ripple’s distributed settlement network is built on open-source technology that anyone can use. Here are the tools developers can use to build solutions around the open-source platform.</p>
-      		 </div>
-      		</div>
-      	</div>
+
+    <link href="assets/css/landing.css" rel="stylesheet">
+
+{% endblock %}
+
+{% block bodyclasses %}client-portal-docs page-build no-sidebar{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+  <div class="container">
+    <h2>XRP Ledger Documentation Table of Contents</h2>
+  </div>
+  <div class="container build-index">
+    <div class="row">
+      <div class="col-md-8">
+        {% for cat in categories %}
+          <ul>
+          <li class="top"><h5><a class="dev_heading" href="{{ (pages|selectattr('category', 'equalto', cat)|first).html }}">{{ cat }}</a></h5></li>
+            {% for page in pages %}
+              {% if page.category == cat and page.name != category and not page.toc_omit %}
+                <li><a href="{{ page.html }}">{{ page.name }}</a></li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        {% endfor %}
       </div>
     </div>
-   <!--  </div> -->
-    
-    <!-- main container -->
-	<div class="container build-index">
-		 <div class="row">
-            {% for cat in categories %}
-			<div class="col-md-3">
-		        <ul>
-		        <li class="top"><h5 class="dev_heading">{{ cat }}</h5></li>
-                {% for page in pages %}
-    		        {% if page.category == cat %}
-                    <li><a href="{{ page.html }}">{{ page.name }}</a></li>
-                    {% endif %}
-                {% endfor %}
-			    </ul>
-			</div>
-            {% endfor %}
-		</div>
-	</div>
-	
+  </div>
+
+  <!-- Disclaimer block -->
+  <div class="container build-disclaimer">
+    <p>
+      These resources are provided for informational purposes only, as illustrative references for your independent development of products or services designed to interface with Ripple’s open-source technologies. These resources are not intended to direct or influence how you or any other person interacts with Ripple’s open-source technologies. Ripple <strong><em>does not</em></strong> endorse any specific resource and makes no representations or warranties with respect to the resources listed.
+    </p>
+    <p>
+      Note that anti-money laundering and counter-terrorism financing laws and regulations, such as the U.S. Bank Secrecy Act and regulations issued by the Financial Crimes Enforcement Network (FinCEN), require certain parties to take certain precautions against financial crime. In particular, you may be interested in the 2013 <a href="https://www.fincen.gov/statutes_regs/guidance/html/FIN-2013-G001.html">guidance issued by FinCEN</a> in response to questions concerning the regulatory treatment of persons who use or make a business of exchanging, accepting, or transmitting certain virtual currencies. Additional FinCEN references are available at <a href="https://www.fincen.gov">https://www.fincen.gov</a>.
+    </p>
+</div>
+
 {% endblock %}
diff --git a/tool/template-ripple-api-tool.html b/tool/template-ripple-api-tool.html
index 07a9ec6c1a..1f8593e05d 100644
--- a/tool/template-ripple-api-tool.html
+++ b/tool/template-ripple-api-tool.html
@@ -1,6 +1,7 @@
 {% extends "template-base.html" %}
 
 {% block sidebar %}
+    <h2>API Methods</h2>
     <ul id='command_list'>
         <li class='selected'><a href='#server_info'>server_info</a></li>
         <li><a href='#server_state'>server_state</a></li>
@@ -78,7 +79,7 @@
     </div>
     </div>
 {% endblock %}
-  
+
 {% block endbody %}
   <link rel='stylesheet' type='text/css' href='assets/css/api-tools.css'/>
   <link rel='stylesheet' type='text/css' href='assets/vendor/codemirror.css'/>
@@ -88,4 +89,3 @@
   <script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script>
   <script type='text/javascript' src='assets/js/apitool-websocket.js'></script>
 {% endblock %}
-
diff --git a/tool/template-sidebar_nav.html b/tool/template-sidebar_nav.html
new file mode 100644
index 0000000000..ff721ca104
--- /dev/null
+++ b/tool/template-sidebar_nav.html
@@ -0,0 +1,33 @@
+<div class="guide_toc">
+  <div id="sidenav_accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+    {% for cat in categories %}
+    <div class="panel panel-default{% if currentpage.category == cat %} active{% endif %}">
+      <div class="panel-heading" role="tab" id="sidenav_cat_head_{{loop.index}}">
+        <h5 class="panel-title">
+          <a {% if currentpage.category != cat %}class="collapsed"{% endif %} role="button" data-toggle="collapse" data-parent="#sidenav_accordion" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">
+            {{ cat }}
+          </a>
+        </h5>
+      </div><!-- /.panel-heading -->
+
+      <div id="sidenav_collapse_{{loop.index}}" class="collapse{% if currentpage.category == cat %} in{% endif %}" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
+        <div class="panel-body">
+          <ul class="sidebar_cat_pagelist">
+          {% for page in pages %}
+            {% if page.category == cat %}
+              {% if page == currentpage %}
+              <li><a class="active" href="{{ page.html }}">{{ page.name }}</a></li>
+              {% else %}
+              <li><a href="{{ page.html }}">{{ page.name }}</a></li>
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+          </ul>
+        </div><!-- /.panel-body -->
+      </div><!-- /#sidenav_collapse{{loop.index}} -->
+
+    </div><!-- /.panel -->
+    {% endfor %}
+
+  </div><!-- /#sidenav_accordion -->
+</div><!-- /.guide_toc -->