diff --git a/static/css/chopsui-normal.css b/static/css/chopsui-normal.css
new file mode 100644
index 0000000..981d12e
--- /dev/null
+++ b/static/css/chopsui-normal.css
@@ -0,0 +1,164 @@
+:root {
+  /* Subset of https://material.io/design/color/the-color-system.html */
+  --chops-red-50: #ffebee;
+  --chops-red-700: #d32f2f;
+  --chops-purple-50: #f3e5f5;
+  --chops-purple-700: #7b1fa2;
+  --chops-blue-50: #e3f2fd;
+  /*
+    Additional blue added on top of the 2014 Material Design palette because
+    blue 50 is too low contrast for backgrounds. Made from mixing blue 50
+    and blue 100.
+  */
+  --chops-blue-75: #d9edfc;
+  --chops-blue-100: #bbdefb;
+  --chops-blue-300: #64b5f6;
+  --chops-blue-700: #1976d2;
+  --chops-blue-900: #01579b;
+  --chops-green-50: #e8f5e9;
+  --chops-green-800: #2e7d32;
+  --chops-light-green-10: #f6fff5;
+  --chops-light-green-50: #f1f8e9;
+  --chops-yellow-50: #fffde7;
+  --chops-orange-50: #fff3e0;
+  --chops-orange-200: #ffcc80;
+  --chops-gray-50: #fafafa;
+  --chops-gray-200: #eee;
+  --chops-gray-300: #e0e0e0;
+  --chops-gray-400: #bdbdbd;
+  --chops-gray-500: #9e9e9e;
+  --chops-gray-600: #757575;
+  --chops-gray-700: #616161;
+  --chops-gray-800: #424242;
+  --chops-gray-850: #303030;
+  --chops-gray-900: #212121;
+  /* Making these variables makes it easier to add user-side scripts in a reasonable way. */
+  --chops-white: #ffffff;
+  --chops-black: #000000;
+
+  /* To make grays used for font styles and icons maintain consistent
+   * contrast ratios across colored backgrounds, we repesent them as pure black
+   * with opacity set. */
+  --chops-gray-700-alpha: hsla(0, 0%, 0%, 0.62);
+  --chops-gray-800-alpha: hsla(0, 0%, 0%, 0.74);
+  --chops-gray-900-alpha: hsla(0, 0%, 0%, 0.87);
+
+  --chops-blue-gray-25: #f1f3f4;
+  --chops-blue-gray-50: #eceff1;  /* Similar to grimoire. */
+
+  --chops-primary-header-bg: var(--chops-white);
+  --chops-secondary-header-bg: var(--chops-blue-gray-25);
+  --chops-sidebar-bg: var(--chops-blue-gray-25);
+  --chops-page-bg: var(--chops-white);
+  --chops-footer-bg: transparent;
+  --chops-primary-icon-color: var(--chops-gray-700-alpha);
+
+  --chops-normal-border: 1px solid hsl(0, 0%, 85%);
+  /* Border color for situations when contrast is important. */
+  --chops-accessible-border: 1px solid var(--chops-gray-400);
+  --chops-radius: 6px;
+  --chops-shadow: none;
+
+  --chops-primary-font-color: var(--chops-gray-900-alpha);
+  --chops-font-family: 'Roboto', 'Noto', sans-serif;
+  --chops-link-color: var(--chops-primary-accent-color);
+  --chops-link-font-weight: 500;
+  --chops-light-accent-color: var(--chops-blue-300);
+  --chops-primary-accent-color: var(--chops-blue-700);
+  --chops-primary-accent-bg: var(--chops-blue-50);
+  --chops-primary-button-bg: var(--chops-primary-accent-color);
+  --chops-primary-button-color: var(--chops-white);
+  --chops-button-bg: var(--chops-gray-200);
+  --chops-button-color: var(--chops-black);
+  --chops-button-disabled-bg: var(--chops-gray-300);
+  --chops-button-disabled-color: var(--chops-gray-600);
+  --chops-button-border: none;
+  --chops-button-radius: 4px;
+  --chops-choice-bg: var(--chops-blue-gray-50);
+  --chops-choice-color: var(--chops-gray-600);
+  --chops-active-choice-bg: var(--chops-blue-75);
+  --chops-active-choice-color: var(--chops-primary-accent-color);
+  --chops-transition-time: 0.1s;
+
+  --chops-error-bubble-bg: var(--chops-red-50);
+  --chops-notice-bubble-bg: var(--chops-orange-50);
+  --chops-notice-border: 1px solid var(--chops-orange-200);
+  --chops-help-bubble-bg: var(--chops-blue-50);
+  --chops-field-error-color: var(--chops-red-700);
+  --chops-selected-bg: var(--chops-yellow-50);
+
+  --chops-card-heading-bg: var(--chops-secondary-header-bg);
+  --chops-card-details-bg: var(--chops-gray-50);
+  --chops-card-border: var(--chops-normal-border);
+  --chops-card-content-bg: var(--chops-white);
+
+  --chops-table-header-bg: var(--chops-secondary-header-bg);
+  --chops-table-row-bg: var(--chops-white);
+  --chops-table-divider: var(--chops-normal-border);
+
+  --chops-main-font-size: 13px;
+  --chops-large-font-size: 15px;
+  --chops-icon-font-size: 20px;
+
+  /* A few Monorail-specific CSS variables. */
+  --monorail-header-height: 44px;
+  --monorail-metadata-open-bg: var(--chops-light-green-10);
+  --monorail-metadata-closed-bg: var(--chops-sidebar-bg);
+}
+
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: var(--chops-font-family);
+  line-height: 1.4;
+  font-size: var(--chops-main-font-size);
+  min-width: 300px;
+  background: var(--chops-page-bg);
+  color: var(--chops-primary-font-color);
+}
+
+/* Global styles for the EZT pages. */
+a {
+  color: var(--chops-link-color);
+  text-decoration: none;
+  font-weight: var(--chops-link-font-weight);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Legacy CSS used by both the SPA and the EZT pages. */
+#footer {
+  clear: both;
+  text-align: right;
+  padding-top: 1em;
+  margin: 3.5em 0em;
+  color: var(--chops-gray-500);
+  background: var(--chops-footer-bg);
+}
+
+#footer a,
+#footer a:visited {
+  text-decoration: none;
+  margin-right: 2em;
+}
+
+#ac-list {
+  border: 1px solid var(--chops-gray-400);
+  background: var(--chops-white);
+  color: var(--chops-link-color);
+  padding: 2px;
+  z-index: 999;
+  max-height: 18em;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+#ac-list { font-size: 95%; }
+#ac-list tr { margin: 1px; cursor: pointer; padding: 0 10px; }
+#ac-list th { color: var(--chops-gray-850); text-align: left; }
+#ac-list .selected,
+#ac-list .selected td { background: var(--chops-active-choice-bg); }
+#ac-list td, #ac-list th { white-space: nowrap; padding-right: 22px}
diff --git a/static/css/d_sb.css b/static/css/d_sb.css
new file mode 100644
index 0000000..099d121
--- /dev/null
+++ b/static/css/d_sb.css
@@ -0,0 +1,181 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+/* Style sheet for issue attachment source browsing pages. */
+
+/* List */
+#resultstable {table-layout:fixed}
+#resultstable div {white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
+
+/* Diffs */
+.diff pre {
+ margin:0;
+ padding:0;
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ white-space: -pre-wrap;
+ white-space: -o-pre-wrap;
+ word-wrap: break-word;
+}
+.diff th {padding:0 .6em; text-align:right; font-weight:normal; color:#666}
+.diff b {font-weight: normal}
+.diff .noline {background: #eee; border: 1px solid #888; border-width: 0 1px 0 1px}
+.diff .oldbackrm {background: #f88; border: 1px solid #a33; border-width: 0 1px 0 1px}
+.diff .oldbackeq {background: #ffd8d8; border: 1px solid #a33; border-width: 0 1px 0 1px}
+.diff .newbackadd {background: #9f9; border: 1px solid #3a3; border-width: 0 1px 0 1px}
+.diff .newbackeq {background: #ddf8cc; border: 1px solid #3a3; border-width: 0 1px 0 1px}
+.diff .oldrm {background: #f88;}
+.diff .oldeq {background: #ffd8d8;}
+.diff .newadd {background: #9f9;}
+.diff .neweq {background: #ddf8cc;}
+.diff .first td {border-top-width:1px}
+.diff .last td {border-bottom-width:1px}
+.header td {padding-bottom:.3em; text-align:center; font-family:arial, sans-serif}
+#controls {padding:.5em; white-space:nowrap}
+#controls td {padding:0 2px}
+#controls input, #controls select {font-size:93%; margin:0; padding:0}
+#controls form {margin:0; padding:0 1em}
+#controls a.revchoose {
+  text-decoration: none;
+  color: var(--chops-black);
+  padding: 4px;
+  border: 1px solid #ebeff9;
+}
+#controls a.revchoose:hover {
+  border: 1px inset var(--chops-white);
+}
+
+/* Property Diffs */
+.diff .firstseg {padding-left: 2px}
+.diff .lastseg {padding-right: 2px}
+.diff .samepropback {border: 1px solid var(--chops-black); border-width: 0 1px 0 1px}
+.diff td.nopropsep {border-bottom-width: 0px}
+.diff .propname td {font-size: 110%; font-weight: bold; padding: 1em 0.5em}
+.diff .bincontent {border-bottom-width: 1px; font-style: italic; font-size: 110%; padding: 0px 0.5em}
+.diff .propspace {font-size: 100%}
+.diff .sectiontitle {padding: 2em 0; font-style: italic; font-size: 110%}
+
+/* Meta bubble */
+#older, #props, #fileinfo {border-top:3px solid white; padding-top:6px; margin-top: 1em}
+#older pre {margin-top:4px; margin-left:1em}
+
+/* File */
+.fc pre, .fc td, .fc tr, .fc table, .fc tbody, #nums, #lines {padding:0; margin:0}
+.fc {position:relative; width:100%; min-height:30em}
+.fc table {border-collapse:collapse; margin:0; padding:0}
+#nums, #lines, #nums th, #lines th, #nums td, #lines td { vertical-align:top }
+pre {
+  font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
+  font-size: 93%;
+}
+#nums {padding-right:.5em; width:3.7em}
+#nums td {text-align:right}
+#nums a {color:#77c; text-decoration:none}
+#nums tr:hover a {color:blue; text-decoration:underline}
+#nums td:target a {color:var(--chops-black); font-weight:bold}
+.sep {visibility:hidden; width:2px}
+#nums span { cursor: pointer; width: 14px; float: left; background-repeat: no-repeat; }
+#lines td {padding-left:4px;}
+
+/* Applies only to sb files and issue attachments */
+.fc #nums, .fc #lines {
+  padding-top: 0.5em;
+}
+.fc #lines {
+  border-left: 3px solid #ebeff9;
+}
+
+#log { position:absolute; top:2px; right:0; width:28em}
+#log p { font-size:120%; margin: 0 0 0.5em 0}
+#log pre { margin-top: 0.3em}
+
+/* IE Whitespace Fix */
+.prettyprint td.source {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+}
+
+/* Header */
+.src_nav {
+  height:1.2em;
+  padding-top:0.2em;
+}
+.src_crumbs {
+  padding:0;
+  margin:0;
+}
+#crumb_root {
+  padding:0.2em 0 0.2em 0.2em;
+  margin:0;
+}
+#crumb_links {
+  margin-top:0;
+  margin-right:0;
+  padding:0.2em 1px;
+}
+form.src_nav {
+  padding:0;
+  margin:0;
+  display: inline;
+}
+#src_nav_title {
+  margin-right: 0.5em;
+}
+
+.heading {
+  background:#c3d9ff;
+}
+.sp {
+  color:#555;
+}
+.sourcelabel {
+  margin-left: 20px;
+  white-space: nowrap;
+}
+.sourcelabel select {
+  font-size: 93%;
+}
+#contents {
+  display: none;
+}
+
+/* Branch detail and revision log message */
+pre.wrap {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+}
+
+.edit_icon {
+  width: 14px;
+  height: 14px;
+  padding-right: 4px;
+}
+
+/* Source editing */
+.CodeMirror-line-numbers {
+  margin: .4em;
+  padding-right: 0.3em;
+  font-size: 83%;
+  font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
+  color: #777;
+  text-align: right;
+  border-right: 1px solid #aaa;
+}
+.editbox {
+  border-color: #999 #ccc #ccc;
+  border-width: 1px;
+  border-style: solid;
+  background: var(--chops-white);
+}
+.pending_bubble {
+  background-color: #e5ecf9;
+}
+#pending {
+  padding: 2px 2px 2px 4px;
+}
diff --git a/static/css/d_updates_page.css b/static/css/d_updates_page.css
new file mode 100644
index 0000000..9d4c1f6
--- /dev/null
+++ b/static/css/d_updates_page.css
@@ -0,0 +1,260 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+.activity-stream-list h4 {
+  font-size: 100%;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+  padding-left: 1em;
+  background: var(--chops-table-header-bg);
+  line-height: 160%;
+}
+ul.activity-stream {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul.activity-stream li {
+  margin: 0;
+  padding: 0.375em 0;
+  z-index: 0;
+  clear: both;
+}
+ul.activity-stream li {
+  border-bottom: var(--chops-normal-border);
+}
+ul.activity-stream span.date {
+  float: left;
+  width: 7.5em;
+  text-align: right;
+  color: #5f5f5f;
+  padding-right: 1em;
+  background-repeat: no-repeat;
+  background-position: 5px center;
+}
+ul.activity-stream span.below-more {
+  background-image: url(/static/images/plus.gif);
+  cursor: pointer;
+}
+ul.activity-stream li.click span.below-more {
+  background-image: url(/static/images/minus.gif);
+}
+ul.activity-stream span.content {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+ul.activity-stream span.content span.highlight-column {
+  padding-right: 1em;
+}
+ul.activity-stream span.details-inline {
+  color: #676767;
+}
+ul.activity-stream span.details-inline pre {
+  display: inline;
+}
+ul.activity-stream span.details-inline div,
+ul.activity-stream span.details-inline span {
+  display: inline;
+}
+ul.activity-stream div.details-wrapper {
+  display: none;
+}
+ul.activity-stream li.click span.details-inline {
+  display: none;
+}
+ul.activity-stream li.click div.details-wrapper {
+  display: block;
+  overflow: hidden;
+}
+ul.activity-stream div.details {
+  color: #5f5f5f;
+  margin-top: 0.3em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  margin-left: 0.2em;
+  border-left: 0.3em solid #e5ecf9;
+  padding-left: 0.5em;
+  line-height: 130%;
+}
+ul.activity-stream div.details span.ot-logmessage,
+ul.activity-stream div.details span.ot-issue-comment,
+ul.activity-stream div.details span.ot-project-summary {
+  white-space: pre;
+}
+ul.activity-stream div.details a,
+ul.activity-stream span.details-inline a {
+  color: var(--chops-link-color);
+}
+a.showAll,
+a.hideAll {
+  color: var(--chops-link-color);
+}
+body.detailedInfo_hidden ul.activity-stream a.details {
+  color: var(--chops-link-color);
+  text-decoration: underline;
+  cursor: pointer;
+}
+ul.activity-stream div.details pre {
+  font-size: 110%;
+  line-height: 125%;
+  padding: 0;
+  margin: 0;
+}
+ul.activity-stream span.content a.ot-profile-link-1,
+ul.activity-stream span.content a.ot-project-link-1 {
+  color: var(--chops-link-color);
+}
+ul.activity-stream span.content a.ot-profile-link-2,
+ul.activity-stream span.content a.ot-project-link-2 {
+  color: var(--chops-link-color);
+}
+ul.activity-stream div.details span.ot-revlogs-br-1 {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+ul.activity-stream div.details span.ot-revlogs-br-2,
+ul.activity-stream div.details span.ot-issue-fields-br {
+  display: block;
+  padding: 0;
+  margin: 0.5em;
+}
+ul.activity-stream div.details span.ot-issue-field-wrapper,
+ul.activity-stream div.details span.ot-labels-field-wrapper  {
+  font-family: arial, sans-serif;
+}
+ul.activity-stream span.details-inline span.ot-issue-field-wrapper,
+ul.activity-stream span.details-inline span.ot-labels-field-wrapper  {
+  font-family: arial, sans-serif;
+}
+ul.activity-stream div.details span.ot-issue-field-name,
+ul.activity-stream div.details span.ot-labels-field-name {
+  font-weight: bold;
+}
+ul.activity-stream span.details-inline span.ot-issue-field-name,
+ul.activity-stream span.details-inline span.ot-labels-field-name  {
+  font-weight: bold;
+}
+div.display-error {
+  font-style: italic;
+  text-align: center;
+  padding: 3em;
+}
+.results td a {
+  color: var(--chops-link-color);
+}
+.results td a:hover {
+  text-decoration: underline;
+}
+.results td a.closed_ref {
+  color: var(--chops-link-color);
+  text-decoration: line-through;
+}
+.results td {
+  cursor: auto;
+}
+.highlight-column {
+  overflow: hidden;
+  white-space: nowrap;
+  display: block;
+}
+
+/**
+ * Document container designed for fluid width scaling.
+ * Alternative g-doc- fixed-width classes are in gui-fixed.css.
+ */
+.g-doc {
+  width: 100%;
+  text-align: left;
+}
+
+/* For agents that support the pseudo-element selector syntax. */
+.g-section:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+/* Disable the clear on nested sections so they'll actually nest. */
+.g-unit .g-section:after {
+  clear: none;
+}
+.g-section {
+  /* Helps with extreme float-drops in nested sections in IE 6 & 7. */
+  width: 100%;
+  /* So nested sections' background-color paints the full height. */
+  overflow: hidden;
+}
+
+/* Forces "hasLayout" for IE. This fixes the usual gamut of peekaboo bugs. */
+.g-section,
+.g-unit {
+  zoom: 1;
+}
+
+/* Used for splitting a template's units text-alignment to the outer edges. */
+.g-split .g-unit {
+  text-align: right;
+}
+.g-split .g-first {
+  text-align: left;
+}
+
+/* Document container designed for 1024x768 */
+.g-doc-1024 {
+  width: 73.074em;
+  *width: 71.313em;
+  min-width: 950px; /* min-width doesn't work in IE6 */
+  margin: 0 auto;
+  text-align: left;
+}
+/* Document container designed for 800x600 */
+.g-doc-800 {
+  width: 57.69em;
+  *width: 56.3em;
+  min-width: 750px;  /* min-width doesn't work in IE6 */
+  margin: 0 auto;
+  text-align: left;
+}
+
+.g-tpl-160 .g-unit,
+.g-unit .g-tpl-160 .g-unit,
+.g-unit .g-unit .g-tpl-160 .g-unit,
+.g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
+  margin: 0 0 0 8.5em;
+  width: auto;
+  float: none;
+}
+.g-unit .g-unit .g-unit .g-tpl-160 .g-first,
+.g-unit .g-unit .g-tpl-160 .g-first,
+.g-unit .g-tpl-160 .g-first,
+.g-tpl-160 .g-first {
+  margin: 0;
+  width: 8.5em;
+  float: left;
+}
+
+.g-tpl-300 .g-unit,
+.g-unit .g-tpl-300 .g-unit,
+.g-unit .g-unit .g-tpl-300 .g-unit,
+.g-unit .g-unit .g-unit .g-tpl-300 .g-unit {
+  margin: 0 0 0 19.5em;
+  width: auto;
+  float: none;
+}
+.g-unit .g-unit .g-unit .g-tpl-300 .g-first,
+.g-unit .g-unit .g-tpl-300 .g-first,
+.g-unit .g-tpl-300 .g-first,
+.g-tpl-300 .g-first {
+  margin: 0;
+  width: 19.5em;
+  float: left;
+}
diff --git a/static/css/ph_core.css b/static/css/ph_core.css
new file mode 100644
index 0000000..c8fc43b
--- /dev/null
+++ b/static/css/ph_core.css
@@ -0,0 +1,923 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+@charset "utf-8";
+
+body {
+    margin: 0 0 3px 0;
+    min-width: 768px;
+}
+
+#monobar {
+    background: var(--chops-primary-header-bg);
+    margin: 0;
+    padding: 0;
+}
+
+#monobar th {
+    white-space: nowrap;
+    vertical-align: middle;
+    font-weight: normal;
+}
+
+.sidebar {
+    background: var(--chops-sidebar-bg);
+    border: var(--chops-normal-border);
+    padding: 4px;
+}
+
+.padded {
+    padding: 4px 1em;
+}
+
+#monobar a#wordmark {
+    font-family: sans-serif;
+    font-variant: small-caps;
+    font-size: 140%;
+    font-weight: bold;
+    font-style: oblique;
+    color: #822;
+    letter-spacing: 1px;
+    text-decoration: none;
+}
+
+#thumbnail_box {
+    background-color: var(--chops-white);
+    vertical-align: middle;
+}
+
+#thumbnail_box a, #thumbnail_box img {
+    display: block;
+}
+
+.toptabs a:link, .toptabs a:visited {
+    color: #444;
+    padding: 0 .5em ;
+    text-decoration: none;
+}
+
+.toptabs a:hover {
+    color: var(--chops-link-color);
+    text-decoration: underline;
+}
+
+.toptabs a.active {
+    font-weight: bold;
+    color: var(--chops-black);
+    text-decoration: none;
+}
+
+#userbar {
+    text-align: right;
+}
+
+#userbar a {
+    color: var(--chops-black);
+}
+
+.subt {
+    background: var(--chops-secondary-header-bg);
+    margin: 0;
+    padding: 4px 1em;
+    border: var(--chops-normal-border);
+    border-width: 1px 0 1px 0;
+}
+
+a:link, a:focus {
+    color: var(--chops-link-color);
+}
+
+a:active {
+    color: red;
+}
+
+input[type="text"] {
+    border-color: #999 #ccc #ccc;
+    border-style: solid;
+    border-width: 1px;
+    padding: 3px 3px;
+}
+
+input[type=button], input[type=reset], input[type=submit], .buttonify {
+    font-size: 100%;
+    background: var(--chops-button-bg);
+    color: var(--chops-button-color) !important;
+
+    padding: 6.1px 10px;
+    margin-right: .6em;
+    border: var(--chops-button-border);
+    border-radius: var(--chops-button-radius);
+    box-shadow: var(--chops-shadow);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.subt input[type=button], .subt input[type=reset], .subt input[type=submit], .subt .buttonify {
+    padding: 3px 6px;
+}
+
+input[type=submit], input[type=button].primary, a.primary {
+    background: var(--chops-primary-button-bg);
+    color: var(--chops-primary-button-color) !important;
+}
+
+input[type=submit].secondary {
+    background: var(--chops-button-bg);
+    color: var(--chops-button-color) !important;
+}
+
+input[type=submit]:disabled, input[type=button]:disabled {
+    background: var(--chops-button-disabled-bg);
+    color: var(--chops-button-disabled-color) !important;
+}
+
+.button_set {
+    float: right;
+    font-size: 95%;
+    display: flex;
+    margin-left: 2em;
+    margin-bottom: 5px; /* Offsets padding lost by flex+float. */
+}
+
+@-moz-document url-prefix() {
+    .buttonify {
+	padding: 2px 3px 2px 3px;
+    }
+}
+
+input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, .buttonify:hover {
+    border-color: #666;
+    text-decoration: none !important;
+}
+
+.choice_chip {
+    padding: 4px 10px;
+    margin-left: 6px;
+    background: var(--chops-choice-bg);
+    color: var(--chops-choice-color);
+    border-radius: 50vh;
+    text-decoration: none;
+}
+
+.active_choice {
+    background: var(--chops-active-choice-bg);
+    color: var(--chops-active-choice-color);
+    font-weight: var(--chops-link-font-weight);
+}
+
+a.choice_chip, a.choice_chip:visited {
+    color: var(--chops-choice-color);
+}
+
+input[type=button]:active, input[type=reset]:active, input[type=submit]:active,
+input.primary:active, .buttonify:active {
+  background: var(--chops-gray-600);
+  color: var(--chops-white) !important;
+}
+
+textarea {
+    border-color: #999 #ccc #ccc;
+    border-style: solid;
+    border-width: 1px;
+}
+
+td td, th th, th td, td th {
+    font-size: 100%;
+}
+
+form {
+    padding: 0;
+    margin: 0;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Project tab bar. */
+.gtb {
+  background: var(--chops-white);
+  border-bottom: 1px solid #ccc;
+  padding: 5px 10px 0 5px;
+  white-space: nowrap;
+}
+
+.user_bar {
+    cursor: pointer;
+    float: right;
+    margin: 5px 15px 6px 10px;
+}
+
+.gtb .gtbc {
+    clear: left;
+}
+
+table {
+    border-collapse: separate;
+}
+
+.nowrap { white-space: nowrap; }
+.nowrapspan span { white-space: nowrap; }
+.derived { font-style: italic; }
+
+.bubble_bg {
+    background: #eee;
+    margin-bottom: 0.6em;
+}
+
+.bubble {
+    padding: 4px;
+}
+
+#bub {
+    padding: 0 1px 0 1px;
+}
+
+.bub-top {
+    margin: 0 2px 2px;
+}
+
+.bub-bottom {
+    margin: 2px 2px 0;
+}
+
+.drop-down-bub {
+    font-size: 80%;
+    margin-top: -1px;
+}
+
+
+h4 {
+    color: #222;
+    font-size: 16pt;
+    margin: .4em;
+    padding: 0;
+}
+
+.section {
+    margin: 0 4px 1.6em 4px;
+    padding:4px;
+}
+.section .submit {
+    margin: 8px;
+}
+
+#maincol {
+    padding:4px;
+    background: var(--chops-page-bg);
+}
+
+.isf a, .at a, .isf a:visited, .at a:visited {
+  color: var(--chops-link-color);
+  text-decoration: none;
+}
+
+.at span {
+  margin-right: 1em;
+  white-space: nowrap;
+}
+
+.isf a:hover, .at a:hover {
+  color: var(--chops-link-color);
+  text-decoration: underline;
+}
+
+.at {
+    padding-top: 6px;
+    padding-bottom: 3px;
+}
+
+.st1 .inst1 a,
+.st2 .inst2 a,
+.st3 .inst3 a,
+.st4 .inst4 a,
+.st5 .inst5 a,
+.st6 .inst6 a,
+.st7 .inst7 a,
+.st8 .inst8 a,
+.st9 .inst9 a {
+  color: var(--chops-black);
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.notice, .error {
+    font-weight: bold;
+    padding: 4px 16px;
+    border-radius: 4px;
+}
+
+.notice {
+    background: var(--chops-notice-bubble-bg);
+}
+
+.error {
+    background: var(--chops-error-bubble-bg);
+}
+
+.adminonly {
+    color: #a00;
+    font-style: italic;
+}
+
+.fielderror {
+    color: var(--chops-field-error-color);
+    font-weight: bold;
+    padding: 4px;
+}
+
+.tip, .help {
+    background: var(--chops-help-bubble-bg);
+    font-size: 92%;
+    margin: 5px;
+    padding: 6px;
+    border-radius: 6px;
+}
+
+.tip {
+    width: 14em;
+}
+
+.help {
+    width: 44em;
+}
+
+.x_icon::before {
+    content: "\00D7";
+}
+
+.x_icon {
+    text-decoration: none;
+    font-size: 130%;
+    color: #444 !important;
+    padding: 0 2px;
+    vertical-align:middle;
+}
+
+.x_icon:active {
+    color: var(--chops-white) !important;
+    background: #444;
+}
+
+/* Google standard */
+.gbh {
+    border-top: 1px solid #C9D7F1;
+    font-size: 1px;
+    height: 0;
+    position: absolute;
+    top: 24px;
+    width: 100%;
+}
+
+#pname {
+    font-size:300%;
+    margin: 0;
+    padding: 0;
+}
+
+#pname a,
+#pname a:visited {
+    text-decoration:none;
+    color: #666;
+}
+
+#project_summary_link {
+    text-decoration: none;
+    color: #444;
+}
+
+.vt td,
+.vt th,
+.vt {
+    vertical-align: top;
+}
+
+.indicator {
+    font-size: x-small;
+    color: var(--chops-link-color);
+}
+
+div.h4, table.h4 {
+    background-color: var(--chops-secondary-header-bg);
+    margin-bottom: 2px;
+    padding: 2px;
+    font-weight: bold;
+    position: relative;
+    margin-top: 2px;
+}
+
+.mainhdr {
+    background-color: #ebeff9;
+    border-bottom: 1px solid #6b90da;
+    font-weight: bold;
+    font-size: 133%;
+    padding: 2px;
+}
+
+.secondaryhdr {
+    background-color: #eee;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+}
+
+h1 {
+    font-size: x-large;
+    margin-top: 0px;
+}
+
+h2 {
+    font-size: large;
+}
+
+h3 {
+    font-size: medium;
+    background: #eee;
+    padding: 0.5ex 0.5em 0.5ex 0.5em;
+    margin-right: 2em;
+}
+
+img {
+    border: 0;
+}
+
+#user_bar {
+    text-align: right;
+    margin-bottom: 10px;
+}
+
+#user_bar a {
+    color: var(--chops-link-color);
+    text-decoration: none;
+}
+
+#header {
+    position: relative;
+    height: 55px;
+    padding-top: 6px;
+    margin-bottom: -9px;
+}
+
+#title {
+    margin-left: 171px;
+    background-color: #eee;
+    font-size: large;
+    font-weight: bold;
+    padding-left: 3px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+
+.label { text-decoration: none; color: green !important; }
+.label:hover { text-decoration: underline; }
+
+.fieldvalue { text-decoration: none; }
+.fieldvalue:hover { text-decoration: underline; }
+
+.fieldvalue_url {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.fieldvalue_url:after {
+    content: "\A";
+    white-space: pre;
+}
+
+#colcontrol {
+    padding: 5px;
+}
+
+.cue {
+    margin-top: -4px;
+    padding: 1px;
+    background: var(--chops-notice-bubble-bg);
+    border: 1px solid #f0c36d;
+}
+.cue td span {
+    font-size: 85%;
+    text-align: center;
+    padding: 0 1em;
+}
+
+.results tr td { border-bottom: var(--chops-table-divider); }
+.resultstable tr td { border-bottom: var(--chops-table-divider); }
+
+.results th, .results_lite th {
+    background: var(--chops-table-header-bg);
+    text-align: left;
+    padding: 3px;
+    border: 0;
+    border-right: 1px solid var(--chops-white);
+}
+.results th:last-child { border-right: 0; }
+
+.results th a, .results th a:visited {
+    color: var(--chops-link-color);
+    padding-right: 4px;
+    margin-right: 4px;
+}
+.results td { cursor: pointer }
+.results td { padding: 6px; }
+.results td a { color: var(--chops-black); text-decoration: none; }
+#project_list .results td { padding: 18px; }
+#project_list table.results td.id { text-align: left; }
+
+.results td.id a,
+.results td.project a,
+.results td.url a { color: var(--chops-link-color); white-space: nowrap; }
+.results td.id a:visited,
+.results td.project a:visited,
+.results td.url a:visited { color: purple; }
+.results td.id a:hover, .results td.project a:hover, .results td.url a:hover { color: red; text-decoration: underline; }
+table.results .hoverTarget:hover a { color: #009; }
+.results .label { font-size: 80% }
+.results .selected { background-color: var(--chops-selected-bg); }
+.results td tt { color: #999; font-style: italic; font-weight: bold; }
+.results .displayproperties { font-size: 80%; color: #666; }
+
+.results .grid .gridtile tr { border: 0; }
+.results .grid .gridtile td { border: 0; }
+
+.comptable.all .comprow { display: table-row; }
+.comptable.active .comprow { display: none; }
+.comptable.active .comprow.active { display: table-row; }
+.comptable.toplevel .comprow { display: none; }
+.comptable.toplevel .comprow.toplevel { display: table-row; }
+.comptable.toplevel .comprow.toplevel.deprecated { display: none; }
+.comptable.myadmin .comprow { display: none; }
+.comptable.myadmin .comprow.myadmin { display: table-row; }
+.comptable.mycc .comprow { display: none; }
+.comptable.mycc .comprow.mycc { display: table-row; }
+.comptable.deprecated .comprow { display: none; }
+.comptable.deprecated .comprow.deprecated { display: table-row; }
+
+/* The revision flipper. */
+.flipper { font-family: monospace; font-size: 120%; }
+.flipper ul { list-style-type: none; padding: 0; margin: 0em 0.3em; }
+.flipper b { margin: 0em 0.3em; }
+
+.closed .ifOpened { display: none }
+.closed .opened span.ifOpened { display: inline }
+.opened .ifClosed { display: none }
+.opened .closed span.ifClosed { display: inline }
+
+a.star {
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 18px;
+}
+
+a.spamflag {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.h3 {
+    font-size: 130%;
+    font-weight: bolder;
+}
+input { padding-left: 1px; padding-right: 1px; }
+textarea { padding-left: 1px; padding-right: 1px; }
+
+.pagination { font-size: 100%; float: right; white-space: nowrap; }
+.pagination a { margin-left: 0.3em; margin-right: 0.3em; }
+
+.author { margin-bottom: 1em; }
+
+#searchtips { padding-left: 2em; }
+#searchtips p { margin-left: 2em; }
+
+.issueList .inIssueList span,
+.issueAdvSearch .inIssueAdvSearch a,
+.issueSearchTips .inIssueSearchTips a {
+    font-weight: bold;
+    text-decoration: none;
+    color: var(--chops-black);
+}
+
+iframe[frameborder="1"] {
+    border: 1px solid #999;
+}
+
+/* For project menu */
+.menuDiv {
+    margin-top: 5px;
+    border-color: #C9D7F1 #3366CC #3366CC #A2BAE7;
+    border-style: solid;
+    border-width: 1px;
+    z-index: 1001;
+    padding: 0;
+    width: 175px;
+    background: var(--chops-white);
+    overflow: hidden;
+}
+.menuDiv .menuText {
+    padding: 3px;
+    text-decoration: none;
+    background: var(--chops-white);
+}
+.menuDiv .menuItem {
+    color: var(--chops-link-color);
+    padding: 3px;
+    text-decoration: none;
+    background: var(--chops-white);
+}
+.menuDiv .menuItem:hover {
+    color: var(--chops-white);
+    background: #3366CC;
+}
+.menuDiv .categoryTitle {
+    padding-left: 1px;
+}
+.menuDiv .menuCategory,
+.menuDiv .categoryTitle {
+    margin-top: 4px;
+}
+.menuDiv .menuSeparator {
+    margin: 0 0.5em;
+    border: 0;
+    border-top: 1px solid #C9D7F1;
+}
+
+.hostedBy {
+    text-align: center;
+    vertical-align: center;
+}
+
+.fullscreen-popup {
+    position: fixed;
+    right: 4%;
+    left: 4%;
+    top: 5%;
+    max-height: 90%;
+    opacity: 0.85;
+    -moz-opacity: 0.85;
+    -khtml-opacity: 0.85;
+    filter: alpha(opacity=85);
+    -moz-border-radius: 10px;
+
+    background: var(--chops-black);
+    color: var(--chops-white);
+    text-shadow: var(--chops-black) 1px 1px 7px;
+
+    padding: 1em;
+    z-index: 10;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+/* Make links on this dark background a lighter blue. */
+.fullscreen-popup a {
+    color: #dd0;
+}
+
+div#keys_help th {
+    color: yellow;
+    text-align: left;
+}
+
+div#keys_help td {
+    font-weight: normal;
+    color: var(--chops-white);
+}
+
+td.shortcut {
+    text-align: right;
+}
+
+span.keystroke {
+    color: #8d0;
+    font-family: monospace;
+    font-size: medium;
+}
+
+.list {
+    background-color:var(--chops-white);
+    padding: 5px;
+}
+
+.list-foot {
+    background-color:var(--chops-white);
+    padding: 5px;
+    height: 20px;
+}
+
+.graytext {
+    color: #666;
+}
+
+.vspacer {
+    margin-top: 1em;
+}
+
+.hspacer {
+    margin-right: 1em;
+}
+
+.emphasis {
+    font-weight: bold;
+}
+
+.formrow {
+    vertical-align: top;
+    padding-bottom: .569em;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-top: .2em;
+}
+
+.forminline {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.formlabelgutter {
+    margin-top: 0.3em;
+    text-align: right;
+    vertical-align: top;
+    white-space: normal;
+    width: 13em;
+}
+
+.formlabel {
+    font-weight: bold;
+    text-align: right;
+}
+
+.forminputgutter {
+    margin-top: 0.3em;
+    text-align: left;
+    vertical-align: top;
+    white-space: normal;
+    width: 36em;
+}
+
+.forminput {
+    width: 100%;
+}
+
+.formshortinput {
+    width: 11em;
+}
+
+.formselectgutter {
+    margin-top: 0.3em;
+    text-align: left;
+    vertical-align: top;
+    white-space: normal;
+    width: 18em;
+}
+
+.formselect {
+    width: 18em;
+}
+
+.formqm {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+}
+
+.formerror {
+    color: #a00;
+    display: block;
+    text-align: left;
+}
+
+.tablerow {
+    vertical-align: top;
+    padding-bottom: .569em;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-top: .2em;
+}
+
+.tablelabelgutter {
+    margin-top: 0.3em;
+    text-align: left;
+    vertical-align: top;
+    white-space: normal;
+    width: 10em;
+}
+
+.tablelabel {
+    font-weight: bold;
+    text-align: left;
+}
+
+/* Gecko */
+html>body .goog-inline-block {
+    display: -moz-inline-box; /* This is ignored by FF3 and later*/
+    display: inline-block; /* This is ignored by pre-FF3 Gecko */
+}
+
+/* Default rule */
+.goog-inline-block {
+    position: relative;
+    display: inline-block;
+}
+
+/* Pre-IE7 */
+* html .goog-inline-block {
+    display: inline;
+}
+
+/* IE7 */
+*:first-child+html .goog-inline-block {
+    display: inline;
+}
+
+#popular {
+    border: solid silver;
+    border-width: 1px 0 1px 0;
+    padding: 0.3em;
+    width: 40em;
+}
+
+#popular table {
+    width: 40em;
+}
+
+#popular td {
+    padding: 2px;
+    white-space: nowrap;
+}
+
+#intro {
+    background:#ada;
+    margin: 3em;
+    width: 52em;
+}
+
+.userlink_avail {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.availability_none {
+    font-weight: bold;
+    color: #FF1744;
+}
+
+.availability_unsure {
+    font-weight: bold;
+    color: #EF6C00;
+}
+
+.availability_never {
+    font-weight: bold;
+    color: #6A1B9A;
+}
+
+.availability_banned {
+    font-weight: bold;
+    color: var(--chops-black);
+}
+
+/* Just for screen readers. */
+.visually_hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.not_styled_as_heading {
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    display: inline !important;
+    background: inherit !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Launch gates table. */
+
+#launch-gates-table {
+    border-collapse: collapse;
+}
+#launch-gates-table td, #launch-gates-table th {
+    border: 1px solid #ddd;
+    padding: 4px;
+}
+#launch-gates-table tr:nth-child(even){background-color: #f2f2f2;}
+
+#launch-gates-table th {
+    text-align: left;
+    background-color: #6ec5ff;
+}
+
+input.unlink_account, input.incoming_invite {
+    font-size: 80%;
+}
diff --git a/static/css/ph_detail.css b/static/css/ph_detail.css
new file mode 100644
index 0000000..1b37d12
--- /dev/null
+++ b/static/css/ph_detail.css
@@ -0,0 +1,610 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+pre.prettyprint {
+    padding: 0.5em;
+    overflow: auto;
+    font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
+    font-size: 93%;
+}
+
+.role_label {
+  background-color: var(--chops-gray-600);
+  border-radius: 3px;
+  color: var(--chops-white);
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 14px;
+  vertical-align: text-bottom;
+}
+
+.date {
+  margin-right: 1em;
+}
+
+.issuedescription pre {
+  margin: 0 8px;
+  padding: 0 8px;
+  max-width: 80em;
+}
+
+.issuecomment pre.issue_text {
+  margin: 4px 8px;
+}
+
+.codefont .issue_text {
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.issuedescription pre, .issuecomment pre {
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    font-family: var(--chops-font-family);
+}
+
+.issuecomment {
+    margin: 16px 8px;
+}
+
+.issuedescription pre a, .issuecomment pre a {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.closed_ref { text-decoration: line-through }
+.rowmajor { width: 700px; }
+
+.rowmajor th {
+    text-align: right;
+    white-space: nowrap;
+}
+
+@media (min-width: 425px) {
+  #issue-main {
+    display: flex;
+  }
+  #left-part {
+    width: 10%;
+    min-width: 20em;
+  }
+  #right-part {
+    width: 90%;
+    margin: 0;
+    padding: 0;
+    border-bottom: 2px solid var(--chops-page-bg);
+  }
+  #meta-float, .issueheader {
+    position: sticky;
+    z-index: 1;
+    top: var(--monorail-header-height);
+  }
+}
+
+@media (max-width: 840px) {
+  #meta-float, #summary-float {
+    top: 0;
+  }
+}
+
+#left-part {
+  background: var(--monorail-metadata-open-bg);
+  border: var(--chops-normal-border);
+}
+
+.closed_colors #left-part {
+  background: var(--monorail-metadata-closed-bg);
+}
+
+#meta-float th { white-space: nowrap; }
+.labelediting input { margin: 0 3px 4px 0; }
+.labelediting input { color: #060; }
+.collapse .ifExpand { display: none }
+.expand .ifCollapse { display: none }
+.inplace input { width: 100%; }
+.inplace td { border: 0; }
+.issueheader {
+  background: var(--monorail-metadata-open-bg);
+  border: var(--chops-normal-border);
+  padding: 2px;
+  border-left: 0;
+}
+
+.closed_colors .issueheader {
+  background: var(--monorail-metadata-closed-bg);
+}
+
+#flipper-box {
+    float: right;
+    height: 3em;
+    padding: 4px;
+    border-left: var(--chops-normal-border);
+}
+
+#flipper-box div {
+    text-align: center;
+    padding: 3px;
+}
+
+.closed_colors {
+  -: var(--chops-link-color);
+}
+
+.closed_colors td.issueheader, .closed_colors td.issueheader a {
+  background: #888;
+}
+
+#spam_banner {
+    border: 1px solid red;
+    background: var(--chops-red-50);
+    padding: .5em;
+    color: var(--chops-black);
+    margin: 2px;
+}
+
+#spam_banner a {
+    color: var(--chops-link-color);
+}
+
+.issuepage { margin-top: 0; }
+.issuepage td { padding: 2px; }
+.issuecomment {
+  max-width: 80em;
+}
+
+.issuecommentheader {
+    background: var(--chops-card-heading-bg);
+    padding: 2px 3px 3px 3px;
+}
+
+.issuedescription pre, .issuecomment pre {
+    padding-top: 6px;
+}
+
+.issuedescription pre b, .issuecomment pre b {
+    font-size: 110%;
+    font-weight: bolder;
+    padding: 3px 0 3px 0;
+}
+
+.issue_text:focus {
+    outline: 0;
+}
+
+.author { padding-left: 4px; }
+
+.ichcommands a {
+    color: var(--chops-gray-600);
+    text-decoration: none;
+}
+
+.issueheader .ichcommands a {
+    color: #555;
+}
+
+.issuecommentbody:focus {
+    outline: 0;
+}
+
+#issue_meta_details {
+    font-size: 95%;
+    vertical-align: top;
+    padding: 1em 5px 5px 5px;
+}
+
+#meta-float td, #meta-float td div, #meta-float div.widemeta {
+    max-width: 14em;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+#meta-float td.widemeta,  #meta-float td.widemeta div, #meta-float div.widemeta {
+    max-width: 20em;
+}
+
+.meta-floatheader {
+    padding: 0 5px;
+    position: relative;
+    min-width: 14em;
+}
+
+.issueheader a.material-icons {
+    padding: 0 5px;
+    text-decoration: none;
+    color: grey;
+    float: right;
+}
+
+.closed_colors #meta-float {
+    background: var(--monorail-metadata-closed-bg);
+}
+
+#meta-float table td, #meta-float table th {
+    margin: 0;
+    padding: 0;
+    padding-top: 5px;
+}
+
+.rel_issues a { white-space: nowrap; }
+
+.issue_restrictions {
+    padding: 2px 4px;
+    background-color: #fed;
+    min-width: 14em;
+    border: 2px solid var(--chops-white);
+}
+
+.issue_restrictions .restrictions_header {
+    padding: 0 0 2px 0;
+    text-align: center;
+    font-weight: bold;
+}
+
+.issue_restrictions ul {
+    padding: 0 2px;
+    margin: 0;
+    list-style: none;
+}
+
+.issue_restrictions .other_restriction {
+    white-space: nowrap;
+}
+
+.lock_grey {
+    background: no-repeat url(/static/images/lock.png);
+    width: 15px;
+    height: 16px
+}
+
+.updates {
+    background: var(--chops-card-details-bg);
+}
+
+.updates table {
+    width: 100%;
+    font-size: 90%;
+    padding: 4px;
+}
+
+.fakelink {
+    color: var(--chops-link-color);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.undef { color: #666; }
+table.advquery {
+    border: var(--chops-card-border);
+    border-radius: var(--chops-radius);
+    box-shadow: var(--chops-shadow);
+}
+
+table.advquery td {
+    white-space: nowrap;
+    padding: 2px;
+}
+
+.focus td { background: var(--chops-card-heading-bg); }
+
+.eg {
+    color: #666;
+    font-size: 90%;
+}
+
+#submit { font-weight: bold; }
+div td .novel { color: #430; }
+div td .blockingsubmit { color: #a03; }
+div td .exclconflict { color: #a03; }
+div td .questionmark { color: #a03; }
+.issuecomment .delcom { background: #e8e8e8; }
+.numberentry { text-align: right; }
+
+.rollovercontrol { display: none; }
+.rolloverzone:hover .rollovercontrol { display: inline; }
+
+td u {
+    margin-left: .3em;
+    color: var(--chops-link-color);
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+td u:hover { text-decoration: underline; }
+#peopledetail input { margin-bottom: 2px; }
+#perm_defs { margin-top: 1em; }
+#perm_defs th { text-align:left; }
+
+#perm_defs td {
+    vertical-align:bottom;
+    padding-left: 1em;
+}
+
+.attachments { width:33%; margin-left: .7em;}
+.attachments table {
+  background: var(--chops-card-details-bg);
+  padding: 4px;
+   margin: 8px;
+}
+.attachments table tr td { padding: 0; margin: 0; font-size: 95%; }
+.preview { border: 2px solid #c3d9ff; padding: 1px; }
+.preview:hover { border: 2px solid blue; }
+.label { white-space: nowrap; }
+
+.cursor_on .author {
+    background: url(/static/images/show-arrow.gif) no-repeat 2px;
+}
+
+/* For Popup dialog boxes*/
+
+#update-issues-hotlists, #transfer-ownership-container, #remove-self-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 10;
+}
+
+#update-issues-hotlists-dialog, #transfer-ownership-dialog, #remove-self-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--chops-white);
+    border: 3px solid #333;
+    padding: 1em;
+    max-height: 75%;
+    width: 75%;
+    max-width: 30em;
+    overflow-y: auto;
+}
+
+/* Issue Peek Feature */
+
+#infobubble {
+  position: absolute;
+  display: none;
+  border: 1px solid #666;
+  padding: 3px 5px 5px 5px;
+  background: #ebeff9;
+}
+
+#peekarea {
+  min-height: 30em;
+  font-size: 95%;
+  background: var(--chops-white);
+}
+
+.perms_EditIssue #peekarea {
+   min-height: 36.4em;
+}
+
+#issuesummary {
+  width: 300px;
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td.rowwidgets { padding: 2px 2px 0 7px; }
+.cursor_on td.rowwidgets {
+  background-image: url(/static/images/show-arrow.gif);
+  background-repeat: no-repeat;
+  background-position: 2px;
+}
+
+.loading {
+  background-image: url(/static/images/spin_16.gif);
+  background-repeat: no-repeat;
+  background-position: 2px;
+  padding: 4px 20px;
+}
+
+#peekheading {
+  background: #ebeff9;
+  font-size:140%;
+  padding:2px 2px 0; overflow-x: hidden;
+  white-space:nowrap;
+}
+
+.peek #meta-float, .peek #issuecomments {
+  height: 28em;
+  max-height: 28em;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll: auto;
+}
+
+#hc_controls { float: right; }
+#hc_controls a.paginate { margin-left: 1px; }
+#hc_controls a.close { margin-left: 3px; }
+
+#infobuttons {
+  background: var(--chops-white);
+  /* for IE */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
+  /* for webkit browsers */
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
+  /* for firefox 3.6+ */
+  background: -moz-linear-gradient(top,  #fff,  #f1f1f1);
+  border-top: 1px solid #ccc;
+  white-space:nowrap;
+}
+
+#infobuttons td {
+  padding: 0;
+}
+
+.custom_field_value_menu {
+  width: 20em;
+}
+
+.enum_checkbox {
+  display: inline-block;
+  width: 24%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: #f8f8f8;
+}
+
+.cue.scrim {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+#privacy_dialog {
+  background: #fefefe;
+  border: 1px solid #888;
+  border-radius: 4px;
+  margin: 15% auto;
+  padding: 20px;
+  width: 80%;
+  max-width: 40em;
+}
+
+#privacy_dialog .actions {
+  margin-top: 2em;
+  text-align: right;
+  font-weight: bold;
+}
+
+#privacy_dialog .actions a {
+  text-decoration: none;
+  margin-left: 2em;
+}
+
+#show-ranks, #hide-ranks, #add-issue-to-hotlist{
+  color: #555;
+  cursor: pointer;
+}
+
+.rel_issues:hover #show-ranks, #hide-ranks:hover, #add-issue-to-hotlist:hover {
+  text-decoration: underline;
+}
+
+#blocked-scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 10;
+}
+
+#blocked-table {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--chops-white);
+  border: 3px solid #333;
+  padding: 1em;
+  max-height: 75%;
+  width: 75%;
+  overflow-y: auto;
+}
+
+#blocked-rank {
+  display: table;
+  width: 100%;
+}
+
+#blocked-rank .closed a {
+  text-decoration: line-through;
+}
+
+.drag_item[draggable=true] {
+  position: relative;
+}
+
+.drag_item[draggable=false] {
+  cursor: wait;
+}
+
+.gripper {
+  color: var(--chops-primary-icon-color);
+  cursor: grab;
+  opacity: 0;
+}
+
+.drag_item[draggable=true]:hover .gripper {
+  opacity: 1;
+}
+
+.drag_container th, .drag_container td {
+    padding: 0.5em;
+}
+
+.drag_container th {
+  color: var(--chops-link-color);
+  background: var(--chops-table-header-bg);
+  text-align: left;
+}
+
+.drag_item.top td {
+  border-top: 2px solid #888;
+}
+
+.drag_item.bottom td {
+  border-bottom: 2px solid #888;
+}
+
+.component-suggestion {
+  display: inline-block;
+  cursor: pointer;
+  padding: 0.25em;
+  margin: 0.25em;
+  border: 1px solid #ddd;
+  border-radius: 0.25em;
+  background-color: #e3e9ff;
+}
+
+#preview_filterrules_area {
+  color: #430;
+  margin-top: 1em;
+}
+
+#preview_filterrules_area div {
+  margin-left: 1em;
+}
+
+#preview_filterrules_area div span {
+  font-style: italic;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+#preview_filterrules_warnings, #preview_filterrules_errors {
+  margin-top: 3px;
+}
+#preview_filterrules_warnings ul, #preview_filterrules_errors ul {
+  margin-top: 0;
+  list-style-type: none;
+}
+
+#preview_filterrules_errors ul {
+  color: red;
+}
+
+#searchtips p {
+  max-width: 60em;
+}
diff --git a/static/css/ph_list.css b/static/css/ph_list.css
new file mode 100644
index 0000000..645d8c1
--- /dev/null
+++ b/static/css/ph_list.css
@@ -0,0 +1,188 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+.popup {
+    display: none;
+    background: var(--chops-white);
+    border: 2px solid #bbb;
+    border-width: 0 2px 2px 1px;
+    position: absolute;
+    padding: 2px;
+}
+
+.popup a { text-decoration: none; cursor: pointer; }
+.popup td, .popup th {
+    font-size: 90%;
+    font-weight: normal;
+    text-align: left;
+    cursor: pointer;
+}
+.popup td { color: var(--chops-link-color); padding: 2px; }
+.popup tr:hover { background: #f9edbe; }
+.subpopup { border-width: 1px 2px 2px 1px; }
+
+.group_row td {
+    background: var(--chops-table-header-bg);
+    cursor: pointer;
+}
+
+div.gridtile td.id {
+    width: 5em;
+    text-align: left;
+}
+
+div.gridtile {
+    border: 2px solid #f1f1f1;
+    border-radius: 6px;
+    padding: 1px;
+    background: var(--chops-white);
+}
+
+tr.grid td {
+    border-right: var(--chops-table-divider);
+}
+
+.results .grid th {
+    border-top: 1px solid var(--chops-white);
+}
+
+tr.grid .idcount {
+    text-align: left;
+}
+
+.results th a.dotdotdot {
+    text-decoration: none;
+    margin-right: 0;
+    padding-right: 0;
+}
+
+tr.grid .idcount a, .results .id a {
+    color: var(--chops-link-color);
+}
+
+tr.grid .idcount a {
+    margin-right: 0.6em;
+}
+
+div.gridtile {
+    width: 10em;
+    float: left;
+    margin: 2px;
+}
+
+div.gridtile table, div.projecttile table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+div.gridtile td, div.projecttile td {
+    border: 0;
+    padding: 2px;
+    overflow: hidden;
+}
+
+div.gridtile td div {
+    height: 5.5ex;
+    font-size: 90%;
+    line-height: 100%;
+}
+
+div.gridtile td.status {
+    font-size: 90%;
+    text-align: right;
+    width: 70%;
+}
+
+div.projecttile {
+    width: 14em;
+    height: 90px;
+    margin: 0 1em 2em 1em;
+    float: left;
+    padding: 1px;
+    border: 2px solid #c3d9ff;
+    border-radius: 6px;
+  }
+
+div.projecttile:hover {
+    background: #f1f1f1;
+}
+
+
+.hide_col_0 .col_0, .hide_col_1 .col_1, .hide_col_2 .col_2, .hide_col_3 .col_3,
+.hide_col_4 .col_4, .hide_col_5 .col_5, .hide_col_6 .col_6,
+.hide_col_7 .col_7, .hide_col_8 .col_8, .hide_col_9 .col_9,
+.hide_col_10 .col_10, .hide_col_11 .col_11, .hide_col_12 .col_12,
+.hide_col_13 .col_13, .hide_col_14 .col_14, .hide_col_15 .col_15,
+.hide_col_16 .col_16, .hide_col_17 .col_17, .hide_col_18 .col_18,
+.hide_col_19 .col_19, .hide_col_20 .col_20 { display: none; }
+
+.hide_col_0 .popup span.col_0, .hide_col_1 .popup span.col_1,
+.hide_col_2 .popup span.col_2, .hide_col_3 .popup span.col_3,
+.hide_col_4 .popup span.col_4, .hide_col_4 .popup span.col_4,
+.hide_col_5 .popup span.col_5, .hide_col_6 .popup span.col_6,
+.hide_col_7 .popup span.col_7, .hide_col_8 .popup span.col_8,
+.hide_col_9 .popup span.col_9, .hide_col_10 .popup span.col_10,
+.hide_col_11 .popup span.col_11, .hide_col_12 .popup span.col_12,
+.hide_col_13 .popup span.col_13, .hide_col_14 .popup span.col_14,
+.hide_col_14 .popup span.col_14, .hide_col_15 .popup span.col_15,
+.hide_col_16 .popup span.col_16, .hide_col_17 .popup span.col_17,
+.hide_col_18 .popup span.col_18, .hide_col_19 .popup span.col_19,
+.hide_col_20 .popup span.col_20 { display: inline; color: var(--chops-white); }
+
+.hide_col_0 .popup tr:hover span.col_0,
+.hide_col_1 .popup tr:hover span.col_1,
+.hide_col_2 .popup tr:hover span.col_2,
+.hide_col_3 .popup tr:hover span.col_3,
+.hide_col_4 .popup tr:hover span.col_4,
+.hide_col_5 .popup tr:hover span.col_5,
+.hide_col_6 .popup tr:hover span.col_6,
+.hide_col_7 .popup tr:hover span.col_7,
+.hide_col_8 .popup tr:hover span.col_8,
+.hide_col_9 .popup tr:hover span.col_9,
+.hide_col_10 .popup tr:hover span.col_10,
+.hide_col_11 .popup tr:hover span.col_11,
+.hide_col_12 .popup tr:hover span.col_12,
+.hide_col_13 .popup tr:hover span.col_13,
+.hide_col_14 .popup tr:hover span.col_14,
+.hide_col_15 .popup tr:hover span.col_15,
+.hide_col_16 .popup tr:hover span.col_16,
+.hide_col_17 .popup tr:hover span.col_17,
+.hide_col_18 .popup tr:hover span.col_18,
+.hide_col_19 .popup tr:hover span.col_19,
+.hide_col_20 .popup tr:hover span.col_20 { color: var(--chops-white); }
+
+
+.table_title {
+   font-weight: bold;
+}
+
+.contentarea {
+  position: relative;
+  margin-bottom: 1em;
+}
+
+#resultstable td {
+    padding-right: 1em;
+}
+
+.labels a:link { color: #080; }
+.labels a:visited { color: #080; }
+.labels a:active { color: #f00; }
+.name { margin-top: 2ex; font-size: 120%; }
+
+.results tr td a.directlink { visibility: hidden; }
+.results tr:hover td a.directlink {
+  visibility: visible;
+  color: grey;
+}
+
+.results .id { text-align: right; }
+#resultstable .id { text-align: right; }
+#projecttable .id { text-align: left; }
+#starredtable .id { text-align: left; }
+#archivedtable .id { text-align: left; }
+#usergrouptable .id { text-align: left; }
diff --git a/static/css/ph_mobile.css b/static/css/ph_mobile.css
new file mode 100644
index 0000000..82c1ada
--- /dev/null
+++ b/static/css/ph_mobile.css
@@ -0,0 +1,141 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+@media (max-width: 425px) {
+
+  body {
+    min-width: 0; /* get rid of hardcoded width */
+  }
+
+
+  /* Top navigation bar */
+
+  #monobar .toptabs {
+    display: none; /* hide most of the options to save some space */
+  }
+
+  #userbar {
+    padding: 5px;
+  }
+
+  #userbar > span {
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+
+
+  /* Search toolbar */
+
+  .subt {
+    padding: 5px;
+  }
+
+  .subt .inIssueEntry, .subt .inIssueList {
+    display: block;
+    margin: 10px 0 !important;
+  }
+
+  .subt label[for="searchq"], .subt label[for="can"], #can {
+    display: none; /* hide some labels and search scope helper field to save some space */
+  }
+
+
+  /* Main content */
+
+  #maincol > div > form > table > tbody > tr {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #maincol > div > form > table > tbody > tr > td {
+    display: block;
+  }
+
+  #maincol table.rowmajor {
+    display: flex;
+    flex-direction: column;
+    width: auto; /* get rid of hardcoded width */
+    max-width: 100%;
+  }
+
+  #maincol table.rowmajor tbody {
+    flex-grow: 1;
+  }
+
+  #maincol table.rowmajor tr {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #maincol table.rowmajor tr > th {
+    text-align: left;
+  }
+
+  #maincol table.rowmajor tr > td {
+    display: block;
+    width: 90%;
+  }
+
+  #maincol input[type="button"],
+  #maincol input[type="submit"],
+  #maincol select,
+  #maincol textarea {
+    font-size: 100%;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  #maincol input[type="button"],
+  #maincol input[type="submit"] {
+    padding: 10px;
+  }
+
+  #maincol .labelediting input {
+    max-width: 19%;
+  }
+
+  #maincol div.tip {
+    display: none;
+  }
+
+  #maincol .enum_checkbox {
+    width: 31%;
+    padding: 3px;
+  }
+
+
+  /* Others */
+
+  #footer {
+    display: flex;
+    margin: 0 5px 5px 5px ;
+    text-align: left;
+  }
+
+  #attachprompt {
+    display: block;
+    padding: 10px 0;
+  }
+
+  input[type="button"],
+  input[type="submit"],
+  a.buttonify { /* make all types of buttons easier to click */
+    padding: 5px;
+  }
+
+  table#meta-container,
+  table#meta-container > tbody > tr,
+  table#meta-container > tbody > tr> td {
+    display: block;
+    width: 100%;
+  }
+
+  #blocked-table {
+    width: 90%;
+  }
+
+}
diff --git a/static/css/prettify.css b/static/css/prettify.css
new file mode 100644
index 0000000..d44b3a2
--- /dev/null
+++ b/static/css/prettify.css
@@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file