From 715ac35071f25027b3a020c1bd7bfa1bf1b08e98 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@dogenmedia.com>
Date: Thu, 5 Dec 2019 14:12:42 -0500
Subject: [PATCH] Layout Improvements for Match Reconciliation view (CO-1838).
 Significant cleanup of CSS and JavaScript files to remove legacy markup from
 Registry. Ensure topbox layout is consistent across views.

---
 app/src/Locale/en_US/default.po             |    7 +-
 app/src/Template/Element/javascript.ctp     |   15 +-
 app/src/Template/Layout/default.ctp         |    2 +-
 app/src/Template/Matchgrids/manage.ctp      |    2 +-
 app/src/Template/Matchgrids/reconcile.ctp   |  121 ++-
 app/src/Template/Standard/add-edit-view.ctp |   19 +-
 app/src/Template/Standard/index.ctp         |   33 +-
 app/webroot/css/co-base.css                 | 1064 +------------------
 app/webroot/css/co-responsive.css           |  252 +----
 9 files changed, 162 insertions(+), 1353 deletions(-)

diff --git a/app/src/Locale/en_US/default.po b/app/src/Locale/en_US/default.po
index a2fb85dfc..9dcfeb63e 100644
--- a/app/src/Locale/en_US/default.po
+++ b/app/src/Locale/en_US/default.po
@@ -350,8 +350,8 @@ msgstr "Permission"
 msgid "match.fd.query"
 msgstr "Query"
 
-msgid "match.fd.referenceid"
-msgstr "Reference ID"
+msgid "match.fd.referenceids"
+msgstr "Reference IDs"
 
 msgid "match.fd.referenceid_method"
 msgstr "Reference ID Assignment Method"
@@ -434,6 +434,9 @@ msgstr "Platform"
 msgid "match.op.add.a"
 msgstr "Add New {0}"
 
+msgid "match.op.assign.confirm"
+msgstr "Are you sure you wish to assign this Reference ID?"
+
 msgid "match.op.AttributeMappings.install.nicknames.en"
 msgstr "Install English Nicknames"
 
diff --git a/app/src/Template/Element/javascript.ctp b/app/src/Template/Element/javascript.ctp
index c46b3f145..042b775fa 100644
--- a/app/src/Template/Element/javascript.ctp
+++ b/app/src/Template/Element/javascript.ctp
@@ -103,17 +103,6 @@
     // END DESKTOP MENU DRAWER BEHAVIOR
 
     // USER MENU BEHAVIORS
-    // Toggle the global search box
-    $("#global-search label").click(function (e) {
-      e.stopPropagation();
-      if ($("#global-search-box").is(":visible")) {
-        $("#global-search-box").hide();
-        $("#global-search-box").attr("aria-expanded","false");
-      } else {
-        $("#global-search-box").show();
-        $("#global-search-box").attr("aria-expanded","true");
-      }
-    });
 
     // Toggle the custom user panel in the user menu
     $("#user-panel-toggle").click(function(e) {
@@ -129,8 +118,8 @@
 
     // Hide custom user menu items on click outside
     $(document).on('click', function (e) {
-      if ($(e.target).closest("#user-panel, #global-search-box").length === 0) {
-        $("#user-panel, #global-search-box").hide();
+      if ($(e.target).closest("#user-panel").length === 0) {
+        $("#user-panel").hide();
       }
     });
 
diff --git a/app/src/Template/Layout/default.ctp b/app/src/Template/Layout/default.ctp
index c994b02c2..65c9db757 100644
--- a/app/src/Template/Layout/default.ctp
+++ b/app/src/Template/Layout/default.ctp
@@ -100,7 +100,7 @@ if(isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'M
       </div>
 
       <header id="banner">
-        <div id="collaborationTitle">
+        <div id="siteTitle">
           <?= $this->Html->link(__('match.meta.match'),'/'); ?>
         </div>
 
diff --git a/app/src/Template/Matchgrids/manage.ctp b/app/src/Template/Matchgrids/manage.ctp
index 8ffa995b3..fecf63938 100644
--- a/app/src/Template/Matchgrids/manage.ctp
+++ b/app/src/Template/Matchgrids/manage.ctp
@@ -35,7 +35,7 @@ declare(strict_types = 1);
 
 <!-- Matchgrid Management Menu -->
 <section class="inner-content">
-  <ul id="configuration-menu" class="three-col">
+  <ul id="matchgrid-management">
     <?php if($vv_permissions['build']): ?>
     <li>
       <em class="material-icons" aria-hidden="true">check_circle</em>
diff --git a/app/src/Template/Matchgrids/reconcile.ctp b/app/src/Template/Matchgrids/reconcile.ctp
index e0381b099..e2d40b37a 100644
--- a/app/src/Template/Matchgrids/reconcile.ctp
+++ b/app/src/Template/Matchgrids/reconcile.ctp
@@ -25,7 +25,41 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
 
-declare(strict_types = 1);
+  declare(strict_types = 1);
+
+  // extract the attribute field names into a simple array
+  $fieldNames = array();
+  foreach ($vv_candidates as $candidate) {
+    $fieldNames = array_keys($candidate);
+    break;
+  }
+
+  // remove "referenceid" - it is given special treatment and should not be included in our structure
+  array_splice($fieldNames, array_search('referenceid',$fieldNames), 1);
+
+  // build the data for the candidates into a structure for generating the view:
+  // attribute field name | attribute values | do the values match?
+  $canAttr = array();
+  for($i = 0; $i < count($fieldNames); $i++) {
+
+    // put the field name in the first column
+    $canAttr[$i][0] = $fieldNames[$i];
+
+    // put all the values for the current attribute into the second column
+    $canAttr[$i][1] = array();
+    foreach($vv_candidates as $c) {
+      foreach($c as $key => $val) {
+        if($key == $fieldNames[$i]) {
+          $canAttr[$i][1][] = $val;
+        }
+      }
+    }
+
+    // Test for content and equality between the row's attribute values and
+    // set the third "match?" column to true (1) if non-empty equality found
+    $canAttr[$i][2] = !empty($canAttr[$i][1][0]) && count(array_unique($canAttr[$i][1])) === 1 ? 1 : 0;
+
+  }
 ?>
 
 <div class="titleNavContainer">
@@ -34,40 +68,51 @@ declare(strict_types = 1);
   </div>
 </div>
 
-<table>
-  <tr>
-    <th><?= __('match.fd.referenceid'); ?></th>
-    <th><?= __('match.ct.attributes', [99]); ?></th>
-    <th><?= __('match.fd.action'); ?></th>
-  </tr>
-  <?php foreach($vv_candidates as $c): ?>
-  <tr>
-    <td>
-      <?= (!empty($c['referenceid']) ? $c['referenceid'] : __('match.op.new')); ?>
-    </td>
-    <td>
-      <ul>
-      <?php
-        foreach($c as $k => $v) {
-          print "<li><b>" . $k . "</b>: " . $v . "</li>";
-        }
-      ?>
-      </ul>
-    </td>
-    <td>
-      <?=
-        $this->Form->postLink(__('match.op.reconcile.assign'),
-                              ['action' => 'reconcile',
-                               $vv_cur_mg->id],
-                              ['data' => [
-                                'rowid' => $vv_request['id'],
-                                // Default value needs to be the literal string "new" and not a localized text string
-                                'referenceid' => (!empty($c['referenceid']) ? $c['referenceid'] : 'new')
-                               ],
-                               'confirm' => 'Are you sure?', // XXX better text
-                               'class'   => 'linkbutton']);
-      ?>
-    </td>
-  </tr>
-<?php endforeach; // $vv_candidates ?>
-</table>
+
+<table id="reconcile-table" class="side-by-side">
+  <tbody>
+    <tr>
+      <td class="empty"></td>
+      <th class="strong-header" colspan="<?= count($vv_candidates); ?>">
+        <h2><?= __('match.fd.referenceids'); ?></h2>
+      </th>
+    </tr>
+    <tr>
+      <td class="empty"></td>
+      <?php foreach($vv_candidates as $c): ?>
+        <th class="reference-ids">
+          <?= (!empty($c['referenceid']) ? '<a href="#" title="' . $c['referenceid'] . '">' . substr($c['referenceid'],0,7) . '</a>...' : __('match.op.new')); ?>
+        </th>
+      <?php endforeach; ?>
+    </tr>
+    <tr>
+      <th class="strong-header"><h2><?= __('match.ct.attributes', [99]); ?></h2></th>
+      <?php foreach($vv_candidates as $c): ?>
+        <th>
+          <?=
+            $this->Form->postLink(__('match.op.reconcile.assign'),
+              ['action' => 'reconcile',
+                $vv_cur_mg->id],
+              ['data' => [
+                'rowid' => $vv_request['id'],
+                // Default value needs to be the literal string "new" and not a localized text string
+                'referenceid' => (!empty($c['referenceid']) ? $c['referenceid'] : 'new')
+              ],
+                'confirm' => __('match.op.assign.confirm'),
+                'class'   => 'linkbutton']);
+          ?>
+        </th>
+      <?php endforeach; ?>
+    </tr>
+
+    <?php for($i = 0; $i < count($canAttr); $i++): ?>
+      <?php $matchClass = $canAttr[$i][2] ? ' class="match"' : ''; ?>
+      <tr<?= $matchClass ?>>
+        <td class="attr-title"><?= $canAttr[$i][0] ?></td>
+        <?php foreach($canAttr[$i][1] as $key => $val): ?>
+          <td><?= $val; ?></td>
+        <?php endforeach; ?>
+      </tr>
+    <?php endfor; ?>
+  </tbody>
+</table>
\ No newline at end of file
diff --git a/app/src/Template/Standard/add-edit-view.ctp b/app/src/Template/Standard/add-edit-view.ctp
index f59b4ae68..f4e18dfd6 100644
--- a/app/src/Template/Standard/add-edit-view.ctp
+++ b/app/src/Template/Standard/add-edit-view.ctp
@@ -38,19 +38,22 @@ $tableName = \Cake\Utility\Inflector::tableize($this->name);
     <h1><?= $vv_title; ?></h1>
   </div>
 </div>
+
 <?php
 // XXX this doesn't work yet because we don't include fields.inc until later
 //     either create a second file to include earlier, or use a function to emit
 //     the fields (which would be more consistent with how Views render...)
-if(!empty($banners)) {
-  foreach($banners as $b): ?>  
-<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  <?php print $b; ?>
-</div>
-<?php endforeach; // $banners
-}
 ?>
+<?php if(!empty($banners)): ?>
+  <?php foreach($banners as $b): ?>
+    <div class="co-info-topbox">
+      <em class="material-icons">info</em>
+      <?php print $b; ?>
+    </div>
+  <?php endforeach; // $banners ?>
+<?php endif; // $banners ?>
+
+
 <?php    
 if($action == 'add' || $action == 'edit') {
   // By default, the form will POST to the current controller
diff --git a/app/src/Template/Standard/index.ctp b/app/src/Template/Standard/index.ctp
index 23962e730..5f5a5f842 100644
--- a/app/src/Template/Standard/index.ctp
+++ b/app/src/Template/Standard/index.ctp
@@ -97,17 +97,6 @@ function _column_key($modelsName, $c, $tz=null) {
     <h1><?= $vv_title; ?></h1>
   </div>
   
-  <?php
-  if(!empty($banners)) {
-    foreach($banners as $b): ?>  
-  <div class="co-info-topbox">
-    <em class="material-icons">info</em>
-    <?php print $b; ?>
-  </div>
-  <?php endforeach; // $banners
-  }
-  ?>
-
   <?php if($vv_permissions['add']): ?>
     <ul id="topLinks">
       <li>
@@ -134,13 +123,23 @@ function _column_key($modelsName, $c, $tz=null) {
   <?php endif; ?>
 </div>
 <?php if(!empty($indexBanners)): ?>
-<?php foreach($indexBanners as $b): ?>
-<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  <?php print $b; ?>
-</div>
-<?php endforeach; // $indexBanners ?>
+  <?php foreach($indexBanners as $b): ?>
+    <div class="co-info-topbox">
+      <em class="material-icons">info</em>
+      <?php print $b; ?>
+    </div>
+  <?php endforeach; // $indexBanners ?>
 <?php endif; // $indexBanners ?>
+
+<?php if(!empty($banners)): ?>
+  <?php foreach($banners as $b): ?>
+    <div class="co-info-topbox">
+      <em class="material-icons">info</em>
+      <?php print $b; ?>
+    </div>
+  <?php endforeach; // $banners ?>
+<?php endif; // $banners ?>
+
 <div class="table-container">
   <table id="<?= $tableName . '-table'; ?>">
     <tr>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 77558e7bc..4895d1d65 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -77,10 +77,6 @@ a {
   color: #0067A3; /* to ensure accessibility on hover when backgrounds change as low as #e5e5e5 */
   text-decoration: underline;
 }
-#main a.mdl-button:active,
-#main a.mdl-button:hover {
-  text-decoration: none;
-}
 #main a.ui-widget:active,
 #main a.ui-widget:hover {
   text-decoration: none;
@@ -123,13 +119,6 @@ a {
   background: #0b6623 linear-gradient(to bottom, #0b6623 0%,#0e872c 100%);
   color: white;
 }
-.mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
-  padding-left: 16px;
-}
-body.logged-out .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row,
-body.redirect .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
-  padding-left: 7px;
-}
 /* TOP MENU (BLACK BAR) */
 #top-menu {
   position: relative;
@@ -137,10 +126,6 @@ body.redirect .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__heade
   height: 30px;
   background-color: #222;
 }
-/* USER DEFINED LINKS (top) */
-#user-defined-links-top  {
-  display: none;
-}
 /* LOGO */
 #logo {
   display: block;
@@ -174,39 +159,6 @@ body.logged-in #user-menu {
   vertical-align: bottom;
   font-size: 20px;
 }
-#global-search-box {
-  display: none; /* toggled by the field label */
-  position: relative;
-  z-index: 10;
-  margin: 5px 22px 0 0;
-  padding: 8px;
-  background-color: white;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-  border-radius: 2px;
-}
-#global-search-box .submit,
-#global-search-box .input.text {
-  display: inline-block;
-}
-#global-search-box #CoDashboardQ {
-  width: 170px;
-  padding: 4px;
-  height: 24px;
-  margin: 2px 8px 0 0;
-  border-radius: 2px;
-  border: 1px solid #ccc;
-  font-size: 16px;
-}
-#global-search-box #CoDashboardQ:focus {
-  background-color: #ffe;
-}
-#global-search-box .mdl-button {
-  position: relative;
-  top: -4px;
-}
-.mdl-menu__container {
-  top: 26px !important;
-}
 #user-menu #user,
 #user-menu #logout {
   margin-right: 12px;
@@ -306,68 +258,6 @@ body.logged-in #user-menu {
 #user-panel #panel-orgid {
   margin-top: 0;
 }
-/* NOTIFICATIONS */
-#notifications {
-  margin-top: 2px;
-}
-#user-notification-count {
-  position: relative;
-  top: -1px;
-}
-#notifications #notifications-menu {
-  width: 220px;
-}
-#notifications .notification {
-  line-height: 1.3em;
-  padding: 0.5em 1em;
-  border-bottom: 1px solid #dae7ef;
-  color: #444;
-}
-#notifications .notification a {
-  display: block;
-}
-#notifications .notification:nth-child(odd) {
-  background-color: #fff;
-}
-#notifications .notification:nth-child(even) {
-  background-color: #f8f8f8;
-}
-#notifications li.notification:nth-child(n+4) {
-  /* only show three notifications on mobile phones. */
-  display: none;
-}
-#notifications .notification:hover {
-  background-color: rgb(238,238,238);
-}
-#notifications .notification-created {
-  font-size: 0.9em;
-}
-#notifications .notification-created a {
-  color: #444;
-}
-#see-all a.co-raised-button {
-  margin: 1em 1em 0.5em;
-}
-/* Notification page */
-ul.form-list.notification-list .field-name {
-  font-weight: bold;
-  vertical-align: top;
-  max-width: 240px;
-}
-ul.form-list.notification-list .field-info {
-  vertical-align: top;
-}
-.field-email p {
-  margin-bottom: 0.25em;
-}
-form#notificationStatus {
-  clear: left;
-}
-.notificationStatus {
-  float: left;
-  margin-right: 1em;
-  margin-top: 5px;
-}
 /* LOGIN & LOGOUT */
 #login {
   margin-top: -2px;
@@ -401,27 +291,6 @@ form#notificationStatus {
   margin: 4px 0 -8px;
   text-align: right;
 }
-/* Specialty Buttons */
-.co-menu-button a {
-  background-color: #2395E0;
-  color: white;
-  text-align: center;
-  padding: 0.4em;
-  display: block;
-  margin-bottom: -8px;
-}
-.co-menu-button a:hover {
-  background-color: #53B1F4;
-}
-.co-raised-button { /* should be used with mdl-button--raised */
-  display: block;
-  text-align: center;
-  vertical-align: middle;
-  background-color: #f4f4f4;
-  margin-top: 1em;
-  font-weight: normal;
-  font-size: 1.1em;
-}
 /* Shib IDP */
 #idp-select-container {
   clear: both;
@@ -562,9 +431,6 @@ form#notificationStatus {
 #main-menu li.active a.menuTop {
   background-color: #f2f2f2;
 }
-#main-menu .mdl-ripple {
-  background-color: #aed9f9;
-}
 #main-menu .menuTitleAdjust {
   margin-left: -4px;
 }
@@ -578,30 +444,14 @@ form#notificationStatus {
   top: -2px;
   color: #bbb;
 }
-.custom-links ul {
-  margin: 0;
-  padding: 0;
-}
-.custom-links li {
-  font-size: 0.9em;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  line-height: 1em;
-}
-.custom-links a {
-  display: block;
-  padding: 8px 4px 8px 16px;
-  color: #92B6D1;
-}
 /* CONTENT */
-#collaborationTitle {
+#siteTitle {
   font-size: 2em;
   min-height: 23px;
   padding: 0 40px 0 0;
   margin: 0;
 }
-#collaborationTitle a {
+#siteTitle a {
   color: white;
   text-decoration: none;
 }
@@ -613,11 +463,6 @@ form#notificationStatus {
   justify-content: space-between;
   margin: 1em 0 0.5em;
 }
-body.co_petitions.view .titleNavContainer,
-body.co_person_roles .titleNavContainer,
-body.co_people.canvas .titleNavContainer {
-  padding-bottom: 0;
-}
 .pageTitle {
   padding-bottom: 0.25em;
 }
@@ -662,28 +507,6 @@ body.co_people.canvas .titleNavContainer {
 #main #topLinks a:hover {
   text-decoration: underline;
 }
-/* RIGHT SIDEBAR */
-#right-sidebar {
-  background-color: #fafafa;
-  padding: 10px;
-  border: 1px solid #ddd;
-}
-#right-sidebar #menu {
-  padding-left: 0;
-}
-#right-sidebar #menu .ui-icon {
-  float: left;
-  margin: 0 4px 0 -1.5em;
-}
-#right-sidebar #menu li {
-  list-style: none;
-  margin-bottom: 0.5em;
-}
-#right-sidebar #menu li a {
-  display: block;
-  margin-left: 1.5em;
-  line-height: 1.2em;
-}
 /* INNER CONTENT - for non-table-based layouts */
 #content {
   padding: 1em 1.5em;
@@ -692,349 +515,62 @@ body.co_people.canvas .titleNavContainer {
   clear: both;
   margin-top: 1em;
 }
-/* SEARCH PAGE */
-#CoDashboardSearchForm {
-  margin-bottom: 1em;
-}
-#search-results {
-  display: flex;
-  flex-flow: row wrap;
-}
-#search-results .co-card {
-  flex: 1 0 20%;
+/* RECONCILE TABLE */
+#reconcile-table {
   width: auto;
+  border: none;
+  font-size: 0.8em;
 }
-#search-results .co-card li {
-  padding: 0.5em;
-}
-#search-results .co-card li:nth-child(2n+1) {
-  background-color: #ededed;
-}
-#search .input.text,
-#search .submit {
-  display: inline-block;
-}
-#search input#CoDashboardQ {
-  height: 24px;
-  width: 170px;
-  margin-right: 0.5em;
-  padding: 4px;
-  border: 1px solid #ccc;
-  font-size: 16px;
-}
-#search input#CoDashboardQ:focus {
-  background-color: #ffe;
-  border: 1px solid #ccc;
-}
-#search input[type=submit] {
-  position: relative;
-  top: -2px;
-  height: 33px;
+#reconcile-table td,
+#reconcile-table th {
+  border: 1px solid #eee;
 }
-/* REDIRECT PAGE */
-#redirect-box {
-  background-color: #f5f5f5;
-  border: 1px solid #ddd;
-  margin: 1em auto;
-  padding: 1em;
+#reconcile-table th {
+  background-color: white;
   text-align: center;
-  width: 240px;
-}
-#redirect-spinner {
-  padding: 1em 1em 2em;
-  position: relative;
 }
-/* CONFIGURATION PAGE */
-#configuration-menu {
-  padding: 1em;
-  margin: 0;
-}
-#configuration-menu li {
-  list-style: none;
-  margin-bottom: 0.5em;
-}
-/* ENROLLMENT FLOW STEPS */
-#enrollmentFlowIntro {
-  clear: both;
-  padding: 1em;
-}
-.enrollmentFlowStartButton {
-  margin: 0 0 3em 1em;
-}
-.qr-button {
-  padding: 0;
-  min-width: 40px;
-  margin-left: 2px;
+#reconcile-table th.reference-ids a {
+  color: black;
+  text-decoration: none;
+  cursor: context-menu;
 }
-.actions {
-  white-space: nowrap;
+#reconcile-table td.empty {
+  background-color: white !important;
+  border: none;
+  font-size: 0.5em;
 }
-.first-cell {
-  padding-right: 1em;
+#reconcile-table th.strong-header {
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: #eee;
 }
-#enrollmentFlowSteps h3 {
+#reconcile-table h2 {
+  font-size: 1em;
   margin: 0;
-  font-size: 1.5em;
-  padding: 0 0.5em;
-  text-align: center;
-}
-#enrollmentFlowSteps ul {
-  margin: 1em 0 0 0.5em;
   padding: 0;
 }
-#enrollmentFlowSteps li {
-  list-style: none;
-  margin-bottom: 1.2em;
-  line-height: 1.4em;
-  margin-left: 30px;
-  text-indent: -12px;
-}
-#enrollmentFlowSteps .material-icons {
-  vertical-align: middle;
-  margin-right: 6px;
-}
-#enrollmentFlowSteps li.selected {
-  font-weight: bold;
-}
-#enrollmentFlowSteps li.incomplete {
-  font-style: italic;
-  text-indent: 0;
-  color: #999;
-}
-#enrollmentFlowSteps li.selected .material-icons {
-  color: #53B1F4;
-}
-#enrollmentFlowSteps li.complete .material-icons {
-  color: #6eac2c;
-}
-#enrollmentFlowSteps li.stopped .material-icons {
-  color: #cd0a0a;
-}
-/* PETITION ATTRIBUTES */
-.modelbox {
-  border: 1px solid rgb(224, 224, 224);
-  margin: 0 0 1em 0;
-  padding: 1em;
-  background-color: rgb(250, 250, 250);
-  clear: both;
-}
-.modelbox .mdl-textfield {
-  display: block;
-  width: 100%;
-}
-.modelbox .boxtitle {
-  padding: 0 0 5px 0;
-}
-.modelbox .boxtitle a {
+#reconcile-table td.attr-title {
   font-weight: bold;
-}
-.modelbox table tr>:first-child{
-  min-width: 200px;
   text-align: right;
 }
-.modelbox table tr>:nth-child(2){
-  min-width: 150px;
-}
-.modelbox table tr>:nth-child(2) input[type=text] {
-  min-width: 380px;
-}
-.modelbox table tr>:nth-child(2) select{
-  min-width: 387px;
-}
-.modelbox-data {
-  position: relative;
+#reconcile-table tr:nth-child(2n+1) td {
+  background-color: white; /* no zebra for this table */
 }
-body.view .modelbox-data {
-  display: table;
-  width: 100%;
-}
-.modelbox-data-field {
-  display: table-row;
-}
-.modelbox-data-label {
-  display: table-cell;
-  padding-right: 1.5em;
-  border-bottom: 1px dashed #ccc;
-}
-.modelbox-data-value {
-  display: table-cell;
-  vertical-align: top;
-  border-bottom: 1px dashed #ccc;
-}
-.modelbox textarea {
-  background-color: white;
-  border: 1px solid #eee;
-}
-/* MATCHABLE INFO BOX */
-.co-info-matchable {
-  background-color: #fff;
-  border: 1px solid #53b1f4;
-  margin-top: -1.5em;
-}
-.co-info-matchable-title {
-  position: relative;
-  background-color: #53b1f4;
-  color: white;
-  text-align: center;
-  margin: 0;
-  padding: 4px;
-}
-.co-info-matchable-title .close-button {
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  cursor: pointer;
-  color: white;
-}
-.co-info-matchable-title .close-button:focus {
-  border: 1px dotted #ccc;
-}
-.co-info-matchable > ul {
-  padding: 0.75em;
-  margin: 0;
-  list-style: none;
-  line-height: 1em;
-}
-.co-info-matchable li {
-   margin-bottom: 0.5em;
-}
-.matchable-output ul .material-icons {
-  vertical-align: middle;
-  margin-right: 0.25em;
-  font-size: 18px;
-  color: #52ADEA;
-}
-#co_petition_tandc {
-  padding: 0;
-  margin:  1em 0 0 0;
+#reconcile-table tr.match td {
+  background-color: #efe;
 }
-#co_petition_tandc li {
-  list-style: outside none none;
-  margin: 0;
+/* MATCHGRID MANAGEMENT */
+#matchgrid-management {
   padding: 1em;
-}
-iframe#tandc_content {
-  width: 100%;
-  height: 300px;
-}
-/* INVITATIONS */
-.invitation {
-  clear: both;
-  margin: 1em;
-}
-.invitation-text {
-  font-size: 1.2em;
-}
-/* PETITIONS */
-#view_co_petition .status {
-  margin: 0 1em 0 0;
-}
-#view_co_petition .status.N,
-#view_co_petition .status.Y,
-#view_co_petition .status.F {
   margin: 0;
-  padding: 0.2em 1em;
-}
-#view_co_petition .status.Y,  /* approved */
-#view_co_petition .status.F { /* finalized */
-  background-color: #2a2;
-  color: white;
-}
-#view_co_petition .status.N { /* denied */
-  background-color: #c33;
-  color: white;
-}
-#view_co_petition .ui-button {
-  margin: 0 0 0 0.25em;
-}
-body.co_petitions.view th,
-body.co_petitions.view td,
-body.petitionerAttributes th,
-body.petitionerAttributes td {
-  border: none;
-}
-#filters {
-  width: 50%;
-  margin: 0 0 0 2px;
-}
-#statusFilters {
-  background-color: #f5f5f5;
-  border: 1px solid #a0c6e3;
-  clear: both;
-  margin: 1em 0;
-  min-height: 2.2em;
-  padding: 0 0.5em 0.5em;
-}
-#statusFilters .checkbox {
-  display: inline-block;
-  margin: 0.25em 0.5em 0 0;
-  color: #222;
-  white-space: nowrap;
-}
-#statusFilters input {
-  margin: 4px 4px 0;
-}
-#statusFilters label {
-  vertical-align: top;
-}
-#statusFilters .submit-button {
-  float: right;
-  font-size: 0.9em;
-  height: 28px;
-  line-height: 28px;
-  margin: -4px 0 0 0;
-  width: 80px;
 }
-#statusfilter {
-  overflow: hidden;
-}
-#statusfilter .input>label {
-  float: left;
-}
-#statusfilterdialog .required {
-  color: black;
-}
-#statusfilterdialog .submit {
-  margin: 0.5em 0;
-  float: right !important;
-}
-body.co_petitions .approve-button .ui-icon,
-body.co_petitions .deny-button .ui-icon {
-  background-image: url("../js/jquery/jquery-ui-1.11.4.custom/images-comanage/ui-icons_ffffff_256x240.png");
-}
-body.co_petitions .approve-button {
-  background-color: #2a2;
-  background-image: none;
-  border: 1px solid #191;
-  color: white !important;
-  font-weight: bold;
-}
-body.co_petitions .approve-button:hover {
-  background-color: #3b3;
-}
-body.co_petitions .deny-button {
-  background-color: #c33;
-  background-image: none;
-  border: 1px solid #b22;
-  color: white !important;
-  font-weight: bold;
-}
-body.co_petitions .deny-button:hover {
-  background-color: #d44;
+#matchgrid-management li {
+  list-style: none;
+  margin-bottom: 0.5em;
 }
-/* for T&Cs */
-.tc-checkbox-and-label {
+.actions {
   white-space: nowrap;
 }
-body.co_petitions .ui-dialog {
-  left: 15% !important;
-  top: 10% !important;
-  width: 70% !important;
-  padding: 0;
-}
-#dialog-review {
-  height: 270px !important; /* mobile size */
-}
 /* Pagination */
 #pagination {
   margin: 0;
@@ -1127,210 +663,6 @@ body.co_petitions .ui-dialog {
   background-color: #222 !important;
   border-color: #000;
 }
-/********************************/
-/* My Population - People Index */
-/********************************/
-/* Listing controls */
-.listControl {
-  color: #1D5987;
-  margin: 0;
-  clear: left;
-}
-.listControl a:hover {
-  color: #444;
-  text-decoration: none !important;
-}
-.listControl ul,
-.listControl li {
-  display: inline-block;
-}
-.listControl ul {
-  margin: 0;
-  padding: 0;
-}
-.listControl li {
-  margin-left: 0;
-}
-#peopleToggle {
-  display: none; /* hide on mobile */
-}
-/* Alpha search  */
-#peopleAlphabet {
-  margin: 0;
-  border-top: 1px solid #ddd;
-  border-bottom: 2px solid #ccc;
-  font-size: 0.9em;
-}
-#peopleAlphabet ul {
-  display: table;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-#peopleAlphabet li {
-  display: table-cell;
-  width: 3.6%;
-  margin: 0;
-  padding: 0;
-  background-color: #f5f5f5;
-  text-align: center;
-}
-#peopleAlphabet li:nth-child(odd) {
-  background-color: #e5e5e5;
-}
-#peopleAlphabet a {
-  display: inline-block;
-  text-decoration: none;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  padding: 4px 0;
-  color: #666;
-}
-#peopleAlphabet li.selected a,
-#peopleAlphabet li.selected a:hover{
-  background-color: #888;
-  color: #eee;
-}
-#peopleAlphabet a:hover {
-  background-color: #aed9f9;
-  color: #333;
-  text-decoration: none;
-}
-/* PEOPLE LISTING */
-#co_people {
-  clear: both;
-}
-#co_people > .co-person {
-  margin: 0;
-  padding: 0;
-  border-bottom: 2px solid #fff;
-  clear: both;
-}
-#co_people > div > .person-panel {
-  box-sizing: border-box; /* essential */
-  margin: 0;
-  min-height: 45px;
-  position: relative;
-  width: 100%;
-}
-#noResults {
-  margin: 1.5em 0 0 0;
-  font-size: 1.2em;
-  font-weight: bold;
-}
-#co_people .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
-  /* override jquery default icon positioning */
-  float: left;
-  margin: 0 0.5em 0 0;
-  top: 6px;
-}
-#co_people .ui-accordion .ui-accordion-content {
-  padding: 0;
-}
-#co_people .person-info {
-  float: left;
-  margin-top: 6px;
-}
-#co_people .person-name {
-}
-#co_people .nameWithoutEmail {
-}
-#co_people .person-email {
-  color: #666;
-}
-#co_people .person-status {
-  display: block;
-  font-style: italic;
-}
-#co_people .person-admin {
-  float: right;
-  text-align: right;
-}
-#co_people .person-admin button {
-  display: block;
-}
-#co_people .role-panel {
-  margin-left: 25px;
-  clear: both;
-  position: relative;
-  overflow: visible;
-}
-#co_people .roles-title {
-  position: absolute;
-  bottom: 10px;
-  transform: rotate(-90deg);
-  z-index: 1;
-  left: -29px;
-  font-size: 0.9em;
-  color: #bbb;
-  text-transform: lowercase;
-}
-#co_people .role {
-  padding: 2px 4px;
-}
-#co_people .role:first-child {
-  padding-top: 4px;
-}
-#co_people .role:last-child {
-  padding-bottom: 4px;
-}
-#co_people .role:nth-child(even) {
-  background-color: #f5f5f5;
-}
-#co_people .roleinfo {
-  margin: 4px 0;
-}
-#co_people .rolestatus {
-  margin: 0;
-  font-style: italic;
-  background-color: #666;
-  color: white;
-  padding: 4px;
-}
-#co_people .roledata {
-  width: 100%;
-}
-#co_people .roletitle {
-  width:100%;
-}
-#co_people .roleTitleLinks {
-  margin: 0 4px 0;
-  float: left;
-}
-#co_people .roledates {
-  text-align: right;
-  margin: 0 30px 0 0;
-}
-/* people index jquery ui overrides */
-#co_people .person-panel {
-  border: 1px solid transparent; /* to allow our jquery UI hovers not to change the size of the div */
-  background: inherit;
-  color: #333;
-}
-#co_people .ui-state-hover,
-#co_people .ui-widget-content .ui-state-hover,
-#co_people .ui-widget-header .ui-state-hover,
-#co_people .ui-state-focus,
-#co_people .ui-widget-content .ui-state-focus,
-#co_people .ui-widget-header .ui-state-focus {
-  border: 1px solid #79b7e7;
-  background-color: #d0e5f5;
-  color: #1d5987;
-}
-#co_people .ui-state-active,
-#co_people .ui-widget-content .ui-state-active,
-#co_people .ui-widget-header .ui-state-active {
-  border: 1px solid #79b7e7;
-  color: #333;
-  background-color: #F5F5F5;
-}
-#co_people .ui-widget-content {
-  background-color: #FAFAFA;
-}
-.ui-sortable tr {
-  cursor: move;
-}
 /* general jquery overrides to fix color contrast WCAG AA */
 .ui-state-default a,
 .ui-state-default a:link,
@@ -1342,205 +674,12 @@ a.ui-button:visited,
   color: #06b;
   text-decoration: none;
 }
-/* For Top Search (co_people index and org_identity index)
-   and Side Search (person canvas) */
-.top-search {
-  margin-top: 0.5em;
-  padding: 0.5em;
-  background-color: #eee;
-}
-.side-search {
-  margin-top: 2em;
-}
-.top-search legend .material-icons {
-  vertical-align: middle;
-}
-.top-search legend .material-icons.drop-arrow {
-  float: right;
-  position: relative;
-  left: -5px;
-  top: -1px;
-}
-.top-search fieldset {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}
-.top-search legend {
-  width: 100%;
-}
-a#top-search-toggle {
-  display: block;
-  width: 100%;
-  color: #222;
-}
-a#top-search-toggle:hover {
-  text-decoration: none;
-}
-#top-search-fields {
-  display: none;
-}
-.top-search input[type=text],
-.top-search select,
-.side-search input[type=text],
-.side-search select {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0 0 0.5em 0;
-  height: 28px;
-  padding: 2px 4px;
-  border: 1px solid #ddd;
-  background-color: #fff;
-}
 ::-webkit-input-placeholder,
 ::-moz-placeholder,
 :-ms-input-placeholder,
 :-moz-placeholder {
   opacity: 0.2;
 }
-.top-search input[type=text]:focus,
-.side-search input[type=text]:focus {
-  background-color: #ffd;
-}
-.top-search .submit-button,
-.top-search .clear-button,
-.side-search .submit-button,
-.side-search .clear-button {
-  float: right;
-  font-size: 0.9em;
-  width: 80px;
-  line-height: 28px;
-  height: 28px;
-  margin: 0.5em;
-}
-.top-search label,
-.side-search label {
-  display: none;
-}
-/* top filter form, similar to top search */
-.top-filter {
-  clear: both;
-  margin: 0.5em 0;
-  padding: 0.25em 0.5em;
-  background-color: #eee;
-}
-.top-filter .filters {
-  position: relative;
-  top: 2px;
-}
-.top-filter select {
-  box-sizing: border-box;
-  margin: 0;
-  height: 28px;
-  padding: 2px 4px;
-  border: 1px solid #ddd;
-  background-color: #fff;
-  width: 60%
-}
-.top-filter .submit-button {
-  font-size: 0.9em;
-  width: 80px;
-  line-height: 24px;
-  height: 28px;
-  margin: 0.25em;
-}
-/* SERVICE PORTAL */
-#co-services,
-#co-departments {
-  clear: both;
-}
-.co-card h2  {
-  font-size: 1.2em;
-}
-.co-card {
-  position: relative;
-  background-color: #f5f5f5;
-  margin: 0 0 1em 0;
-  padding: 0.75em 1.25em 1.25em 1.25em;
-  min-height: 130px;
-  min-width: 90%;
-  border: 1px solid #eee;
-}
-.co-card.is-member {
-  border-bottom: 1px solid #06c;
-}
-.co-card img {
-  min-width: 100%;
-  max-width: 100%;
-  margin: 1em 0;
-}
-#content .co-card .co-card-icons .material-icons {
-  font-size: 2em;
-  margin-right: 4px;
-}
-.co-card .co-card-icons {
-  float: right;
-  margin-top: 1em;
-}
-.co-card-join-button {
-  margin-top: 1em;
-}
-.co-card ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-.co-dept {
-  border: 1px solid #e0e0e0;
-  margin: 1em 0 2em;
-}
-.co-dept-header {
-  background-color: #f5f5f5;
-  padding: 0 0.5em;
-}
-.co-dept-header h3 {
-  font-size: 1.6em;
-  margin: 0;
-  padding: 0;
-}
-.co-dept-desc {
-  font-style: italic;
-}
-.co-dept-content {
-  padding: 0.5em;
-}
-.co-dept table {
-  overflow-x: scroll;
-}
-/* PERSON CANVAS */
-.personExplorer ul {
-  margin: 0;
-  padding: 0;
-}
-.personExplorer li {
-  list-style: none;
-  margin: 0 0 0.5em 0;
-}
-.personExplorer a {
-  text-decoration: none;
-}
-.explorerHead {
-  height: 20px;
-}
-.personExplorer li.fieldGroup {
-  clear: both;
-  margin: 0 0 1em 0;
-}
-.personExplorer ul.fields {
-  margin-bottom: 1em;
-}
-.fieldGroupName {
-  display: block;
-  border-bottom: 1px solid #EEEEEE;
-  font-size: 1.1em;
-  font-weight: bold;
-  padding: 0.3em 0;
-  margin: 1em 0 0 0;
-}
-.coAddEditButtons {
-  float: right;
-  clear: left;
-}
 /* DATA LISTS */
 /*** ul.data-list is the main structure for representing data
      in which the field value is to the left, and actions on that
@@ -1570,93 +709,6 @@ ul.data-table li {
 .field-data-alone {
   padding: 2px 0 2px 10px;
 }
-#names-container ul.data-list {
-  margin-bottom: 0;
-}
-#names-container ul.data-list li:last-child {
-  margin-bottom: 0;
-  border-bottom: 2px solid #ccc;
-}
-.personExplorer .coAddEditButtons .ui-state-default,
-.personExplorer .coAddEditButtons .ui-widget-content .ui-state-default,
-.personExplorer .coAddEditButtons .ui-widget-header .ui-state-default {
-  background: none;
-  border: none;
-}
-#compare_co_person ul.fields .line1 {
-  background-color: transparent;
-}
-#compare_co_person ul.fields .line0,
-#compare_co_person ul.fields .line2 {
-  background-color: #f5f5f5;
-}
-#compare_co_person ul.fields th.ui-widget-header {
-  background: none;
-  background-color: #F5F5FF;
-  color: #333;
-}
-#view_email_address .checkbutton,
-#edit_email_address .checkbutton {
-  margin-left: 0.5em;
-}
-/* Changelog */
-#changeLog {
-  margin-top: 1em;
-}
-#changeLog ul {
-  margin: 0;
-  padding: 0;
-}
-#changeLog li {
-  list-style: none;
-  margin: 0 0 0.5em 0;
-}
-#changeLog a {
-  text-decoration: none;
-}
-#changeLog .additionalinfo {
-  padding: 0;
-}
-#changeLog tr.deleted td {
-  background-color: #e33;
-  color: white;
-}
-.explorerContainer #changeLog ul {
-  margin-left: 1em;
-}
-.explorerContainer #changeLog .fieldGroupNameCl {
-  border-bottom: 1px solid #eee;
-}
-.explorerContainer #changeLog .additionalinfo {
-  padding: 5px;
-}
-.fieldGroupNameCl {
-  display: block;
-  font-size: 1.1em;
-  font-weight: bold;
-  padding: 0.3em 0;
-  margin: 1em 0 0 0;
-}
-#restoreLink {
-  margin-bottom: 2em;
-}
-/* Groups */
-#groupMembers {
-  margin: 0 0 1em 0;
-  padding: 0;
-}
-#groupMembers td {
-  clear: both;
-  line-height: 2.1em;
-  margin: 0;
-  padding: 0.25em 0.25em 0.25em 0.5em;
-}
-#groupMembers tr:nth-child(odd) td {
-  background-color: #f5f5f5;
-}
-#groupMembers tr:nth-child(even) td {
-  background-color: #eee;
-}
 /* FORMS */
 label {
   cursor: pointer;
@@ -1722,10 +774,6 @@ ul.form-list select {
 ul.form-list li.fields-submit .required {
   font-style: italic;
 }
-ul.form-list li.modelbox-data #ui-datepicker-div {
-  position: relative !important; /* a fix for datepickers appended to fields in the form-list */
-  margin: 0 0 0 9px;
-}
 ul.field-children {
   margin: 0.5em;
   padding: 0;
@@ -1803,34 +851,6 @@ ul.form-list li.field-stack textarea {
 .ui-datepicker select.ui-datepicker-year {
   width: 49%;
 }
-/* XXX determine which among the following five rules are still in use */
-.required-info {
-  float: left;
-}
-.submit-buttons {
-  float: right;
-  margin-right: 0.5em;
-}
-.co-selectfield {
-  width: 100%;
-  font-size: 1.1em;
-  -webkit-appearance: menulist-button;
-  border: 1px solid #ddd;
-}
-.form-error {
-  background-color: #fee !important; /* override default focus color */
-  border: 1px solid red;
-}
-.error-message {
-  color: red;
-  font-size: 0.9em;
-}
-/* BUTTONS */
-#content .co-button .material-icons {
-  font-size: 17px;
-  margin-right: -8px;
-  padding-top: 6px;
-}
 #content .material-icons {
   font-size: 17px;
   margin-top: 3px;
@@ -1988,17 +1008,9 @@ td.indented {
 .submitCell {
   text-align: right;
 }
-/* MDL OVERRIDES - XXX being deprecated in favor of Bootstrap and Bootstrap overrides. */
-/* See also font-size in body, and in GENERAL ul,li from 14px to 12px */
 #main {
   overflow-x: auto; /* allow side scrolling on mobile */
 }
-.mdl-textfield input[type=text],
-.mdl-textfield input[type=number] {
-  border-left: none;
-  border-top: none;
-  border-right: none;
-}
 /* Buttons */
 .btn {
   text-transform: uppercase;
@@ -2021,10 +1033,6 @@ td.indented {
   background-color: #c33; /* red */
   color: white;
 }
-.mdl-data-table th,
-.mdl-data-table td {
-  text-align: left;
-}
 /* FOOTER */
 footer {
   text-align: center;
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index cef3e8e60..5ebc07004 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -28,23 +28,11 @@
    This is a mobile-first theme.  General and 320 mobile portrait styles are in co-base.css */
 
 
-/* XXX Weed out the top two if possible */
-/* LARGE PHONE PORTRAIT */
-/**************************************************************************************************************/
-/* Larger phones (e.g. Samsung Galaxy) in portrait mode */
-@media only screen and (min-width: 360px) {
-  #notifications {
-    margin-right: 4px;
-  }
-}
-
 /* PHONE LANDSCAPE */
 /**************************************************************************************************************/
 /* Small phones in landscape mode  */
 @media only screen and (min-width: 480px) {
-  #notifications {
-    margin-right: 12px;
-  }
+
 }
 
 /* SMALL */
@@ -65,14 +53,6 @@
   #user-menu {
     right: 15px;
   }
-  #global-search-box #CoDashboardQ {
-    width: 204px;
-    font-size: 14px;
-  }
-  #global-search-box .mdl-button {
-    position: relative;
-    top: -2px;
-  }
   #user-common-name {
     display: inline;
     position: relative;
@@ -87,17 +67,12 @@
     margin: 0 80px 0 0;
     padding-top: 0;
   }
-  #user-panel-user-info #user-panel-cn {
-  }
   #logout-in-panel {
     position: absolute;
     top: 0;
     right: 0;
   }
-  #notifications li.notification:nth-child(n+4) { /* show all notifications on tablets (and larger) */
-    display: block;
-  }
-  #collaborationTitle {
+  #siteTitle {
     min-height: 46px;
     font-size: 2.4em;
     line-height: 1.6em;
@@ -107,27 +82,6 @@
     right: 2em;
     margin-top: 4px;
   }
-  #dialog-review {
-    height: 500px !important; /* mobile size */
-  }
-  /* CO PEOPLE */
-  #co_people .rolestatus {
-    float: right !important;
-    margin: 5px 9px 5px 5px;
-    padding: 0;
-    background-color: transparent;
-    color: #222;
-  }
-  #co_people .roleTitleLinks {
-    margin: 0 1em 0 0;
-    float: none;
-  }
-  #co_people .roleinfo {
-    margin: 0;
-  }
-  #co_people .person-admin button {
-    display: inline;
-  }
   ul.form-list .field-name {
     display: inline-block;
     min-width: 80px;
@@ -154,52 +108,6 @@
   ul.form-list li.field-stack textarea {
     margin: 0.5em 0 0.5em 0.5em;
   }
-  /* ORG IDS */
-  body.org_identities.edit ul.form-list .field-name {
-    padding-left: 0.75em;
-  }
-  /* PETITIONS */
-  body.view .modelbox .boxtitle {
-    margin-right: 2em;
-  }
-  body.view .modelbox .modelbox-data {
-    margin-top: 0.5em;
-    width: 65%;
-  }
-  /* PETITION ATTRIBUTES */
-  .modelbox .mdl-textfield {
-    display: block;
-    width: 100%;
-  }
-  .modelbox .boxtitle {
-    float: left;
-    width: 25%;
-    padding: 5px 0 5px 8px;
-  }
-  .modelbox .mdl-textfield,
-  .modelbox .mdl-selectfield {
-    float: right;
-    width: 70%;
-  }
-  .modelbox-data-label {
-    width: 120px;
-  }
-  #dialog-review {
-    height: auto !important; /* desktop size */
-  }
-  #ui-datepicker-div {
-    left: 30% !important;
-  }
-  /* MATCHABLE INFO BOX */
-  .co-info-matchable {
-    float: right;
-    width: 70%;
-  }
-  /* SEARCH PAGE */
-  #search input#CoDashboardQ {
-    width: 300px;
-    font-size: 14px;
-  }
   /* PAGINATION */
   #pagination {
     text-align: left;
@@ -247,7 +155,6 @@
   #navigation-drawer.half-closed .arrow {
     display: none;
   }
-
   /* HEADER */
   #banner {
     position: relative;
@@ -262,136 +169,6 @@
   body.title-hidden #user-menu a.topMenu {
     color: #222;
   }
-  #notifications #notifications-menu {
-    width: 400px;
-  }
-  /* USER DEFINED LINKS (top) */
-  #user-defined-links-left {
-    display: none;
-  }
-  #user-defined-links-top  {
-    display: inline-block;
-    background-color: #222;
-    color: white;
-  }
-  #user-defined-links-top .custom-links li {
-    display: inline-block;
-  }
-  #user-defined-links-top .custom-links a {
-    color: white;
-  }
-
-  /* RIGHT SIDEBAR */
-  .sidebar {
-    background-color: #fafafa;
-    border-left: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    margin: 0;
-    padding: 10px;
-    padding-bottom: 2em;
-    min-height: 100%;
-    position: absolute;
-    right: 0;
-    width: 247px;
-  }
-  .co-grid .mdl-cell {
-    margin: 8px;
-  }
-  .side-search {
-    margin: 2em 1em;
-  }
-  /* REDIRECT PAGE */
-  #redirect-box {
-    margin: 4em auto;
-    padding: 2em;
-    width: 320px;
-    position: relative;
-    left: -120px; /* offset the drawer margin */
-  }
-  /********************************/
-  /* My Population - People Index */
-  /********************************/
-  /* Listing sorter */
-  #sorter {
-    float: right;
-  }
-  /* Listing controls */
-  .listControl li {
-    margin-left: 0.5em;
-  }
-  #peopleToggle {
-    display: block;
-  }
-  .top-search .search-field-subgroup {
-    float: left;
-    width: 49%;
-  }
-  .search-field-subgroup:nth-child(1) {
-    margin-right: 0.5em;
-  }
-  .top-search .clear-button {
-    float: right;
-  }
-  /* PEOPLE LISTING */
-  #co_people .person-info-inner {
-    float: left;
-    width: 200px;
-  }
-  #co_people .person-status {
-    float: left;
-    width: 100px;
-  }
-  /* PERSON and ORGID CANVAS*/
-  .personExplorer ul ul {
-    margin-left: 1em;
-  }
-  /* PETITION ATTRIBUTES */
-  .modelbox {
-    margin: 0 0 1em 1em;
-  }
-  body.petitionerAttributes .modelbox {
-    margin: 0 0.5em 1.5em 0;
-  }
-  /* SERVICE PORTAL */
-  #co-services {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: flex-start;
-    align-items: stretch;
-  }
-  .co-card {
-    float: left;
-    margin: 0 1.25em 1.25em 0;
-    padding: 0.75em 1.25em 4em 1.25em;
-    min-height: 150px;
-    min-width: 0;
-    width: 180px;
-    -webkit-box-shadow: 1px 1px 1px 0px rgba(245,245,245,1);
-    -moz-box-shadow: 1px 1px 1px 0px rgba(245,245,245,1);
-    box-shadow: 1px 1px 1px 0px rgba(245,245,245,1);
-  }
-  .co-dept ul.form-list .field-title {
-    font-weight: normal;
-  }
-  .co-card img {
-    float: right;
-    min-width: 50%;
-    max-width: 50%;
-    margin: 0 0 0.5em 0.5em;
-  }
-  .co-card .co-card-icons {
-    position: absolute;
-    bottom: 1em;
-    right: 1em;
-    float: none;
-  }
-  .co-card-join-button {
-    position: absolute;
-    bottom: 1em;
-    left: 1em;
-  }
   /* GENERAL */
   .two-col {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
@@ -410,6 +187,10 @@
     column-gap: 20px;
   }
 
+  /* RECONCILE TABLE */
+  #reconcile-table {
+    font-size: 1em;
+  }
   /* FOOTER */
   .poweredByComanage {
     text-align: right;
@@ -421,31 +202,12 @@
 /**************************************************************************************************************/
 /* Medium devices (desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
-  #co_people .person-info-inner {
-    width: 250px;
-  }
-  #co_people .person-status {
-    width: auto;
-  }
-  #right-sidebar #menu {
-    padding-left: 1em;
-  }
-}
 
-/* MID-LARGE DESKTOP - XXX Deprecate */
-/**************************************************************************************************************/
-/* Mid to large devices (desktops, 1024px and up) */
-@media only screen and (min-width: 1024px) {
-  #co_people .person-info-inner {
-    width: 300px;
-  }
 }
 
 /* EXTRA LARGE */
 /**************************************************************************************************************/
 /* Extra large devices (desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
-  #co_people .person-info-inner {
-    width: 550px;
-  }
+
 }
\ No newline at end of file