diff --git a/shrine-webclient/src/main/js/client/js-shrine/assets/css/styles.css b/shrine-webclient/src/main/js/client/js-shrine/assets/css/styles.css
index 8ecf375f8..67e3a3739 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/assets/css/styles.css
+++ b/shrine-webclient/src/main/js/client/js-shrine/assets/css/styles.css
@@ -1,201 +1,207 @@
 /** {
   box-sizing: border-box;
 }
 html,
 body {
   height: 100%;
 }
 body {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: 10px;
   font-family: 'Source Sans Pro', serif;
   color: #333;
   background: #f2f2f2;
 }
 
 p {
   font-size: 16px;
   line-height: 1.6em;
 }
 .button {
   border: 1px solid #6576a8;
   background: #6d85ad;
   border: 0;
   outline: 0;
   font-family: 'Source Sans Pro', serif;
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 1px;
   color: #fff;
   cursor: pointer;
 }
 .button:hover {
   background: #9cb8d9;
 }
 .button:active {
   background: #6576a8;
 }
 .button--large {
   position: relative;
   padding: 15px 30px;
   border-radius: 5px;
   font-size: 16px;
 }
 .button--large:active {
   top: 1px;
 }
 .content {
   text-align: center;
   max-width: 350px;
 }
 .email {
   position: relative;
 }
 */
 
 @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
 body {
   overflow: hidden;
   /*background: -webkit-linear-gradient(left, #6B73A2, #9BB5DA);
   background: linear-gradient(to bottom, #6B73A2, #9BB5DA);*/
   background: rgba(255, 255, 255, 0.9);
   font-family: 'Roboto', sans-serif; }
 
 html,
 body,
 .box-wrapper {
   width: 100%;
   height: 100%;
   margin: 0; }
 
 .box-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap; }
 
 .box {
   margin-top: 1%;
   width: 100%;
   transition: all .2s ease; }
 
 .box.blue {
   background: #1881CB; }
 
 .box.red {
   background: #AD3137; }
 
 .box.black {
   background: #424242; }
 
 .circle-pagination {
   position: absolute;
   z-index: 1000;
   list-style-type: none;
   margin: 0;
   top: -.3rem; }
 
 .circle-pagination li {
   border-radius: 50%;
   border: 2px solid #626C92;
   width: 12px;
   height: 12px;
   padding: 4px;
   margin: 6px;
   cursor: pointer;
   float: left;
   transition: all .2s ease; }
 
 .circle-pagination li.active,
 .circle-pagination li:hover {
   background: #626C92;
   width: 14px;
   height: 14px; }
 
 .circle-pagination li.active div,
 .circle-pagination li div:hover {
   color: white; }
 
 .circle-pagination li div {
   font-size: .6rem;
   width: 24px;
   position: relative;
   left: -6px;
   top: 1px;
   color: #626C92;
   font-weight: 600;
   text-transform: capitalize; }
 
 h1 {
   font-size: 30px;
   color: #626C92;
   text-transform: uppercase;
   font-weight: 300;
   text-align: center;
   margin-bottom: 15px; }
 
 table {
   width: 100%;
   table-layout: fixed; }
 
 .tbl-header {
   background-color: rgba(98, 108, 146, 0.3); }
 
 .tbl-header div.tbl-header {
   max-width: 5rem; }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-height: 150px) {
   .tbl-content {
     height: 90% !important; } }
 
 .tbl-content {
   height: 450px;
   overflow-x: auto;
   margin-top: 0px;
   border: 1px solid rgba(98, 108, 146, 0.3); }
 
+.tbl-content tr {
+  cursor: pointer; }
+
+.tbl-content tr:hover {
+  background: rgba(98, 108, 146, 0.3) !important; }
+
 th {
-  padding: 2px 5px;
+  padding: 2px 4px 4px 2px;
   text-align: center;
   font-weight: 500;
   font-size: .75rem;
   color: #626C92;
   text-transform: uppercase; }
 
 td {
   transition: all .5s ease;
   padding: 2px;
   text-align: center;
   vertical-align: top;
   font-weight: 300;
   font-size: 12px;
   color: black;
   border-bottom: solid 1px rgba(98, 108, 146, 0.1); }
 
 section {
   margin: 20 0 6 0; }
 
 /* for custom scrollbar for webkit browser*/
 ::-webkit-scrollbar {
   width: 8px; }
 
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(98, 108, 146, 0.3); }
 
 ::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 6px #626c92; }
 
 .hideextra {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; }
diff --git a/shrine-webclient/src/main/js/client/js-shrine/dist/app-build.js b/shrine-webclient/src/main/js/client/js-shrine/dist/app-build.js
index 729c83187..2c5be514c 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/dist/app-build.js
+++ b/shrine-webclient/src/main/js/client/js-shrine/dist/app-build.js
@@ -1 +1 @@
-"bundle";System.register("main.js",[],function(a,b){"use strict";function c(a){a.use.standardConfiguration().developmentLogging(),a.start().then(function(){return a.setRoot("shell")})}return a("configure",c),{setters:[],execute:function(){}}}),System.register("repository/pm-repository.js",[],function(a,b){"use strict";return{setters:[],execute:function(){}}}),function(){var a=System.amdDefine;a("shell.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return"<template><!--compose view-model='views/mailto/mailto'>\n\t</compose--><div><compose view-model=\"views/query-viewer/query-viewer\"></compose></div></template>"})}(),System.register("shell.js",[],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d;return{setters:[],execute:function(){a("Shell",d=function b(){c(this,b)}),a("Shell",d)}}}),function(){var a=System.amdDefine;a("views/mailto/mailto.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div class="content mailto-hidden"><p>If you have questions about your query results or this SHRINE network, contact the Data Steward at your site.</p><div class="email js-email"><button class="button button--large js-button" click.delegate="openEmail()">Email Data Steward</button></div></div></template>'})}(),System.register("views/mailto/mailto.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),a("MailToService",(g=d(e),i=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchStewardEmail=function(){return this.http.fetch("data?key=stewardEmail").then(function(a){return a.json()}).then(function(a){return a.indexOf('"')>0?a.split('"')[1]:a})["catch"](function(){return""})},f(a,[{key:"url",get:function(){var a="6443",b=document.URL,c="/shrine-metadata/";return b.substring(0,b.indexOf(a)+a.length)+c}}]),a}())||h)),a("MailToService",i)}}}),System.register("views/mailto/mailto.config.js",[],function(a,b){"use strict";var c;return{setters:[],execute:function(){a("MailConfig",c={mailto:"mailto:",subject:"subject="+encodeURIComponent("Question from a SHRINE User"),body:encodeURIComponent("Please enter the suggested information and your question. Your data steward will reply to this email.\n\n***Never send patient information, passwords, or other sensitive information by email****\nName:\nTitle:\nUser name (to log into SHRINE):\nTelephone Number (optional):\nPreferred email address (optional):\n\nQuestion or Comment:")}),a("MailConfig",c)}}}),System.register("views/mailto/mailto.js",["aurelia-framework","views/mailto/mailto.service","views/mailto/mailto.config"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.MailToService},function(a){f=a.MailConfig}],execute:function(){a("MailTo",(g=d(e,f),i=g(h=function(){function a(b,d){c(this,a),this.service=b,this.config=d}return a.prototype.openEmail=function(){var a=this;this.service.fetchStewardEmail().then(function(b){return window.top.location=a.getComposition(b),a})},a.prototype.getComposition=function(a){return this.config.mailto+a+"?"+this.config.subject+"&"+this.config.body},a}())||h)),a("MailTo",i)}}}),function(){var a=System.amdDefine;a("views/query-viewer/query-viewer.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div style="width: 100%; text-align: center"><ul class="circle-pagination"><li repeat.for="screen of screens" class="${screenIndex === $index? \'active\' : \'\'}" click.delegate="screenIndex = $index"><div>${screen.name}</div></li></ul></div><div class="box-wrapper"><div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);"><section><!-- ${boxWrapper.offsetWidth} --><!--for demo wrap>\n                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>'})}(),System.register("views/query-viewer/query-viewer.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewerService",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchPreviousQueries=function(){return this.http.fetch("previous-queries").then(function(a){return a.json()})["catch"](function(a){return a})},a.prototype.getNodes=function(a){return a.length>0?a[0].results.map(function(a){return a.node}):[]},a.prototype.getScreens=function(a,b){return new Promise(function(c,d){for(var e=a.length,f=[],g=function(c){var d=c+i<e?c+i:e-1,g=String(a[c]).substr(0,1)+"-"+String(a[d]).substr(0,1),h=a.slice(c,d),j=b.map(function(a){return{id:a.id,name:a.name,results:a.results.slice(c,d)}});f.push({name:g,nodes:h,queries:j})},h=0;h<e;h+=i)g(h);c(f)})},f(a,[{key:"url",get:function(){var a="8000",b=document.URL,c="6443/shrine-proxy/request/shrine/api/";return b.substring(0,b.indexOf(a))+c}}]),a}())||h)),a("QueryViewerService",j)}}}),System.register("views/query-viewer/query-viewer.js",["aurelia-framework","views/query-viewer/query-viewer.service"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.QueryViewerService}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewer",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),this.screenIndex=0,this.service=b,this.service.fetchPreviousQueries().then(function(a){var c=a.queries,e=d.service.getNodes(c);return b.getScreens(e,c)}).then(function(a){d.screens=a})["catch"](function(a){return console.log(a)})}return f(a,[{key:"slidePct",get:function(){return String(-100*this.screenIndex)+"%"}}]),a}())||h)),a("QueryViewer",j)}}});
\ No newline at end of file
+"bundle";System.register("main.js",[],function(a,b){"use strict";function c(a){a.use.standardConfiguration().developmentLogging(),a.start().then(function(){return a.setRoot("shell")})}return a("configure",c),{setters:[],execute:function(){}}}),System.register("repository/pm-repository.js",[],function(a,b){"use strict";return{setters:[],execute:function(){}}}),function(){var a=System.amdDefine;a("shell.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return"<template><!--compose view-model='views/mailto/mailto'>\n\t</compose--><div><compose view-model=\"views/query-viewer/query-viewer\"></compose></div></template>"})}(),System.register("shell.js",[],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d;return{setters:[],execute:function(){a("Shell",d=function b(){c(this,b)}),a("Shell",d)}}}),function(){var a=System.amdDefine;a("views/mailto/mailto.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div class="content mailto-hidden"><p>If you have questions about your query results or this SHRINE network, contact the Data Steward at your site.</p><div class="email js-email"><button class="button button--large js-button" click.delegate="openEmail()">Email Data Steward</button></div></div></template>'})}(),System.register("views/mailto/mailto.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),a("MailToService",(g=d(e),i=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchStewardEmail=function(){return this.http.fetch("data?key=stewardEmail").then(function(a){return a.json()}).then(function(a){return a.indexOf('"')>0?a.split('"')[1]:a})["catch"](function(){return""})},f(a,[{key:"url",get:function(){var a="6443",b=document.URL,c="/shrine-metadata/";return b.substring(0,b.indexOf(a)+a.length)+c}}]),a}())||h)),a("MailToService",i)}}}),System.register("views/mailto/mailto.config.js",[],function(a,b){"use strict";var c;return{setters:[],execute:function(){a("MailConfig",c={mailto:"mailto:",subject:"subject="+encodeURIComponent("Question from a SHRINE User"),body:encodeURIComponent("Please enter the suggested information and your question. Your data steward will reply to this email.\n\n***Never send patient information, passwords, or other sensitive information by email****\nName:\nTitle:\nUser name (to log into SHRINE):\nTelephone Number (optional):\nPreferred email address (optional):\n\nQuestion or Comment:")}),a("MailConfig",c)}}}),System.register("views/mailto/mailto.js",["aurelia-framework","views/mailto/mailto.service","views/mailto/mailto.config"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.MailToService},function(a){f=a.MailConfig}],execute:function(){a("MailTo",(g=d(e,f),i=g(h=function(){function a(b,d){c(this,a),this.service=b,this.config=d}return a.prototype.openEmail=function(){var a=this;this.service.fetchStewardEmail().then(function(b){return window.top.location=a.getComposition(b),a})},a.prototype.getComposition=function(a){return this.config.mailto+a+"?"+this.config.subject+"&"+this.config.body},a}())||h)),a("MailTo",i)}}}),function(){var a=System.amdDefine;a("views/query-viewer/query-viewer.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div style="width: 100%; text-align: center"><ul class="circle-pagination"><li repeat.for="screen of screens" class="${screenIndex === $index? \'active\' : \'\'}" click.delegate="screenIndex = $index"><div>${screen.name}</div></li></ul></div><div class="box-wrapper"><div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);"><section><!-- ${boxWrapper.offsetWidth} --><!--for demo wrap>\n                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries" css="background: ${$odd? \'rgba(98,108,146, .1)\' : \'white\'}"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>'})}(),System.register("views/query-viewer/query-viewer.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewerService",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchPreviousQueries=function(){return this.http.fetch("previous-queries").then(function(a){return a.json()})["catch"](function(a){return a})},a.prototype.getNodes=function(a){return a.length>0?a[0].results.map(function(a){return a.node}):[]},a.prototype.getScreens=function(a,b){return new Promise(function(c,d){for(var e=a.length,f=[],g=function(c){var d=c+i<e?c+i:e-1,g=String(a[c]).substr(0,1)+"-"+String(a[d]).substr(0,1),h=a.slice(c,d),j=b.map(function(a){return{id:a.id,name:a.name,results:a.results.slice(c,d)}});f.push({name:g,nodes:h,queries:j})},h=0;h<e;h+=i)g(h);c(f)})},f(a,[{key:"url",get:function(){var a="8000",b=document.URL,c="6443/shrine-proxy/request/shrine/api/";return b.substring(0,b.indexOf(a))+c}}]),a}())||h)),a("QueryViewerService",j)}}}),System.register("views/query-viewer/query-viewer.js",["aurelia-framework","views/query-viewer/query-viewer.service"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.QueryViewerService}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewer",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),this.screenIndex=0,this.service=b,this.service.fetchPreviousQueries().then(function(a){var c=a.queries,e=d.service.getNodes(c);return b.getScreens(e,c)}).then(function(a){d.screens=a})["catch"](function(a){return console.log(a)})}return f(a,[{key:"slidePct",get:function(){return String(-100*this.screenIndex)+"%"}}]),a}())||h)),a("QueryViewer",j)}}});
\ No newline at end of file
diff --git a/shrine-webclient/src/main/js/client/js-shrine/dist/views/query-viewer/query-viewer.html b/shrine-webclient/src/main/js/client/js-shrine/dist/views/query-viewer/query-viewer.html
index 07a8347a7..fbb62444b 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/dist/views/query-viewer/query-viewer.html
+++ b/shrine-webclient/src/main/js/client/js-shrine/dist/views/query-viewer/query-viewer.html
@@ -1,2 +1,2 @@
 <template><div style="width: 100%; text-align: center"><ul class="circle-pagination"><li repeat.for="screen of screens" class="${screenIndex === $index? 'active' : ''}" click.delegate="screenIndex = $index"><div>${screen.name}</div></li></ul></div><div class="box-wrapper"><div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);"><section><!-- ${boxWrapper.offsetWidth} --><!--for demo wrap>
-                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>
\ No newline at end of file
+                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries" css="background: ${$odd? 'rgba(98,108,146, .1)' : 'white'}"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>
\ No newline at end of file
diff --git a/shrine-webclient/src/main/js/client/js-shrine/export/assets/css/styles.css b/shrine-webclient/src/main/js/client/js-shrine/export/assets/css/styles.css
index 8ecf375f8..67e3a3739 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/export/assets/css/styles.css
+++ b/shrine-webclient/src/main/js/client/js-shrine/export/assets/css/styles.css
@@ -1,201 +1,207 @@
 /** {
   box-sizing: border-box;
 }
 html,
 body {
   height: 100%;
 }
 body {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: 10px;
   font-family: 'Source Sans Pro', serif;
   color: #333;
   background: #f2f2f2;
 }
 
 p {
   font-size: 16px;
   line-height: 1.6em;
 }
 .button {
   border: 1px solid #6576a8;
   background: #6d85ad;
   border: 0;
   outline: 0;
   font-family: 'Source Sans Pro', serif;
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 1px;
   color: #fff;
   cursor: pointer;
 }
 .button:hover {
   background: #9cb8d9;
 }
 .button:active {
   background: #6576a8;
 }
 .button--large {
   position: relative;
   padding: 15px 30px;
   border-radius: 5px;
   font-size: 16px;
 }
 .button--large:active {
   top: 1px;
 }
 .content {
   text-align: center;
   max-width: 350px;
 }
 .email {
   position: relative;
 }
 */
 
 @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
 body {
   overflow: hidden;
   /*background: -webkit-linear-gradient(left, #6B73A2, #9BB5DA);
   background: linear-gradient(to bottom, #6B73A2, #9BB5DA);*/
   background: rgba(255, 255, 255, 0.9);
   font-family: 'Roboto', sans-serif; }
 
 html,
 body,
 .box-wrapper {
   width: 100%;
   height: 100%;
   margin: 0; }
 
 .box-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap; }
 
 .box {
   margin-top: 1%;
   width: 100%;
   transition: all .2s ease; }
 
 .box.blue {
   background: #1881CB; }
 
 .box.red {
   background: #AD3137; }
 
 .box.black {
   background: #424242; }
 
 .circle-pagination {
   position: absolute;
   z-index: 1000;
   list-style-type: none;
   margin: 0;
   top: -.3rem; }
 
 .circle-pagination li {
   border-radius: 50%;
   border: 2px solid #626C92;
   width: 12px;
   height: 12px;
   padding: 4px;
   margin: 6px;
   cursor: pointer;
   float: left;
   transition: all .2s ease; }
 
 .circle-pagination li.active,
 .circle-pagination li:hover {
   background: #626C92;
   width: 14px;
   height: 14px; }
 
 .circle-pagination li.active div,
 .circle-pagination li div:hover {
   color: white; }
 
 .circle-pagination li div {
   font-size: .6rem;
   width: 24px;
   position: relative;
   left: -6px;
   top: 1px;
   color: #626C92;
   font-weight: 600;
   text-transform: capitalize; }
 
 h1 {
   font-size: 30px;
   color: #626C92;
   text-transform: uppercase;
   font-weight: 300;
   text-align: center;
   margin-bottom: 15px; }
 
 table {
   width: 100%;
   table-layout: fixed; }
 
 .tbl-header {
   background-color: rgba(98, 108, 146, 0.3); }
 
 .tbl-header div.tbl-header {
   max-width: 5rem; }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-height: 150px) {
   .tbl-content {
     height: 90% !important; } }
 
 .tbl-content {
   height: 450px;
   overflow-x: auto;
   margin-top: 0px;
   border: 1px solid rgba(98, 108, 146, 0.3); }
 
+.tbl-content tr {
+  cursor: pointer; }
+
+.tbl-content tr:hover {
+  background: rgba(98, 108, 146, 0.3) !important; }
+
 th {
-  padding: 2px 5px;
+  padding: 2px 4px 4px 2px;
   text-align: center;
   font-weight: 500;
   font-size: .75rem;
   color: #626C92;
   text-transform: uppercase; }
 
 td {
   transition: all .5s ease;
   padding: 2px;
   text-align: center;
   vertical-align: top;
   font-weight: 300;
   font-size: 12px;
   color: black;
   border-bottom: solid 1px rgba(98, 108, 146, 0.1); }
 
 section {
   margin: 20 0 6 0; }
 
 /* for custom scrollbar for webkit browser*/
 ::-webkit-scrollbar {
   width: 8px; }
 
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(98, 108, 146, 0.3); }
 
 ::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 6px #626c92; }
 
 .hideextra {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; }
diff --git a/shrine-webclient/src/main/js/client/js-shrine/export/dist/app-build.js b/shrine-webclient/src/main/js/client/js-shrine/export/dist/app-build.js
index 729c83187..2c5be514c 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/export/dist/app-build.js
+++ b/shrine-webclient/src/main/js/client/js-shrine/export/dist/app-build.js
@@ -1 +1 @@
-"bundle";System.register("main.js",[],function(a,b){"use strict";function c(a){a.use.standardConfiguration().developmentLogging(),a.start().then(function(){return a.setRoot("shell")})}return a("configure",c),{setters:[],execute:function(){}}}),System.register("repository/pm-repository.js",[],function(a,b){"use strict";return{setters:[],execute:function(){}}}),function(){var a=System.amdDefine;a("shell.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return"<template><!--compose view-model='views/mailto/mailto'>\n\t</compose--><div><compose view-model=\"views/query-viewer/query-viewer\"></compose></div></template>"})}(),System.register("shell.js",[],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d;return{setters:[],execute:function(){a("Shell",d=function b(){c(this,b)}),a("Shell",d)}}}),function(){var a=System.amdDefine;a("views/mailto/mailto.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div class="content mailto-hidden"><p>If you have questions about your query results or this SHRINE network, contact the Data Steward at your site.</p><div class="email js-email"><button class="button button--large js-button" click.delegate="openEmail()">Email Data Steward</button></div></div></template>'})}(),System.register("views/mailto/mailto.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),a("MailToService",(g=d(e),i=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchStewardEmail=function(){return this.http.fetch("data?key=stewardEmail").then(function(a){return a.json()}).then(function(a){return a.indexOf('"')>0?a.split('"')[1]:a})["catch"](function(){return""})},f(a,[{key:"url",get:function(){var a="6443",b=document.URL,c="/shrine-metadata/";return b.substring(0,b.indexOf(a)+a.length)+c}}]),a}())||h)),a("MailToService",i)}}}),System.register("views/mailto/mailto.config.js",[],function(a,b){"use strict";var c;return{setters:[],execute:function(){a("MailConfig",c={mailto:"mailto:",subject:"subject="+encodeURIComponent("Question from a SHRINE User"),body:encodeURIComponent("Please enter the suggested information and your question. Your data steward will reply to this email.\n\n***Never send patient information, passwords, or other sensitive information by email****\nName:\nTitle:\nUser name (to log into SHRINE):\nTelephone Number (optional):\nPreferred email address (optional):\n\nQuestion or Comment:")}),a("MailConfig",c)}}}),System.register("views/mailto/mailto.js",["aurelia-framework","views/mailto/mailto.service","views/mailto/mailto.config"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.MailToService},function(a){f=a.MailConfig}],execute:function(){a("MailTo",(g=d(e,f),i=g(h=function(){function a(b,d){c(this,a),this.service=b,this.config=d}return a.prototype.openEmail=function(){var a=this;this.service.fetchStewardEmail().then(function(b){return window.top.location=a.getComposition(b),a})},a.prototype.getComposition=function(a){return this.config.mailto+a+"?"+this.config.subject+"&"+this.config.body},a}())||h)),a("MailTo",i)}}}),function(){var a=System.amdDefine;a("views/query-viewer/query-viewer.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div style="width: 100%; text-align: center"><ul class="circle-pagination"><li repeat.for="screen of screens" class="${screenIndex === $index? \'active\' : \'\'}" click.delegate="screenIndex = $index"><div>${screen.name}</div></li></ul></div><div class="box-wrapper"><div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);"><section><!-- ${boxWrapper.offsetWidth} --><!--for demo wrap>\n                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>'})}(),System.register("views/query-viewer/query-viewer.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewerService",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchPreviousQueries=function(){return this.http.fetch("previous-queries").then(function(a){return a.json()})["catch"](function(a){return a})},a.prototype.getNodes=function(a){return a.length>0?a[0].results.map(function(a){return a.node}):[]},a.prototype.getScreens=function(a,b){return new Promise(function(c,d){for(var e=a.length,f=[],g=function(c){var d=c+i<e?c+i:e-1,g=String(a[c]).substr(0,1)+"-"+String(a[d]).substr(0,1),h=a.slice(c,d),j=b.map(function(a){return{id:a.id,name:a.name,results:a.results.slice(c,d)}});f.push({name:g,nodes:h,queries:j})},h=0;h<e;h+=i)g(h);c(f)})},f(a,[{key:"url",get:function(){var a="8000",b=document.URL,c="6443/shrine-proxy/request/shrine/api/";return b.substring(0,b.indexOf(a))+c}}]),a}())||h)),a("QueryViewerService",j)}}}),System.register("views/query-viewer/query-viewer.js",["aurelia-framework","views/query-viewer/query-viewer.service"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.QueryViewerService}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewer",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),this.screenIndex=0,this.service=b,this.service.fetchPreviousQueries().then(function(a){var c=a.queries,e=d.service.getNodes(c);return b.getScreens(e,c)}).then(function(a){d.screens=a})["catch"](function(a){return console.log(a)})}return f(a,[{key:"slidePct",get:function(){return String(-100*this.screenIndex)+"%"}}]),a}())||h)),a("QueryViewer",j)}}});
\ No newline at end of file
+"bundle";System.register("main.js",[],function(a,b){"use strict";function c(a){a.use.standardConfiguration().developmentLogging(),a.start().then(function(){return a.setRoot("shell")})}return a("configure",c),{setters:[],execute:function(){}}}),System.register("repository/pm-repository.js",[],function(a,b){"use strict";return{setters:[],execute:function(){}}}),function(){var a=System.amdDefine;a("shell.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return"<template><!--compose view-model='views/mailto/mailto'>\n\t</compose--><div><compose view-model=\"views/query-viewer/query-viewer\"></compose></div></template>"})}(),System.register("shell.js",[],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d;return{setters:[],execute:function(){a("Shell",d=function b(){c(this,b)}),a("Shell",d)}}}),function(){var a=System.amdDefine;a("views/mailto/mailto.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div class="content mailto-hidden"><p>If you have questions about your query results or this SHRINE network, contact the Data Steward at your site.</p><div class="email js-email"><button class="button button--large js-button" click.delegate="openEmail()">Email Data Steward</button></div></div></template>'})}(),System.register("views/mailto/mailto.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),a("MailToService",(g=d(e),i=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchStewardEmail=function(){return this.http.fetch("data?key=stewardEmail").then(function(a){return a.json()}).then(function(a){return a.indexOf('"')>0?a.split('"')[1]:a})["catch"](function(){return""})},f(a,[{key:"url",get:function(){var a="6443",b=document.URL,c="/shrine-metadata/";return b.substring(0,b.indexOf(a)+a.length)+c}}]),a}())||h)),a("MailToService",i)}}}),System.register("views/mailto/mailto.config.js",[],function(a,b){"use strict";var c;return{setters:[],execute:function(){a("MailConfig",c={mailto:"mailto:",subject:"subject="+encodeURIComponent("Question from a SHRINE User"),body:encodeURIComponent("Please enter the suggested information and your question. Your data steward will reply to this email.\n\n***Never send patient information, passwords, or other sensitive information by email****\nName:\nTitle:\nUser name (to log into SHRINE):\nTelephone Number (optional):\nPreferred email address (optional):\n\nQuestion or Comment:")}),a("MailConfig",c)}}}),System.register("views/mailto/mailto.js",["aurelia-framework","views/mailto/mailto.service","views/mailto/mailto.config"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i;return{setters:[function(a){d=a.inject},function(a){e=a.MailToService},function(a){f=a.MailConfig}],execute:function(){a("MailTo",(g=d(e,f),i=g(h=function(){function a(b,d){c(this,a),this.service=b,this.config=d}return a.prototype.openEmail=function(){var a=this;this.service.fetchStewardEmail().then(function(b){return window.top.location=a.getComposition(b),a})},a.prototype.getComposition=function(a){return this.config.mailto+a+"?"+this.config.subject+"&"+this.config.body},a}())||h)),a("MailTo",i)}}}),function(){var a=System.amdDefine;a("views/query-viewer/query-viewer.html!github:systemjs/plugin-text@0.0.8.js",[],function(){return'<template><div style="width: 100%; text-align: center"><ul class="circle-pagination"><li repeat.for="screen of screens" class="${screenIndex === $index? \'active\' : \'\'}" click.delegate="screenIndex = $index"><div>${screen.name}</div></li></ul></div><div class="box-wrapper"><div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);"><section><!-- ${boxWrapper.offsetWidth} --><!--for demo wrap>\n                <!--h1>Fixed Table header</h1--><div><table cellpadding="0" cellspacing="0" border="0"><thead><tr><th class="tbl-header"></th><th repeat.for="node of screen.nodes" class="tbl-header"><div class="hideextra">${node}</div></th></tr></thead></table></div><div class="tbl-content"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr repeat.for="query of screen.queries" css="background: ${$odd? \'rgba(98,108,146, .1)\' : \'white\'}"><th><div class="hideextra">${query.name}</div></th><td repeat.for="result of query.results">${result.result}</td></tr></tbody></table></div></section></div></div></template>'})}(),System.register("views/query-viewer/query-viewer.service.js",["aurelia-framework","aurelia-fetch-client","fetch"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.HttpClient},function(a){}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewerService",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),b.configure(function(a){a.useStandardConfiguration().withBaseUrl(d.url)}),this.http=b}return a.prototype.fetchPreviousQueries=function(){return this.http.fetch("previous-queries").then(function(a){return a.json()})["catch"](function(a){return a})},a.prototype.getNodes=function(a){return a.length>0?a[0].results.map(function(a){return a.node}):[]},a.prototype.getScreens=function(a,b){return new Promise(function(c,d){for(var e=a.length,f=[],g=function(c){var d=c+i<e?c+i:e-1,g=String(a[c]).substr(0,1)+"-"+String(a[d]).substr(0,1),h=a.slice(c,d),j=b.map(function(a){return{id:a.id,name:a.name,results:a.results.slice(c,d)}});f.push({name:g,nodes:h,queries:j})},h=0;h<e;h+=i)g(h);c(f)})},f(a,[{key:"url",get:function(){var a="8000",b=document.URL,c="6443/shrine-proxy/request/shrine/api/";return b.substring(0,b.indexOf(a))+c}}]),a}())||h)),a("QueryViewerService",j)}}}),System.register("views/query-viewer/query-viewer.js",["aurelia-framework","views/query-viewer/query-viewer.service"],function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e,f,g,h,i,j;return{setters:[function(a){d=a.inject},function(a){e=a.QueryViewerService}],execute:function(){f=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=10,a("QueryViewer",(g=d(e),j=g(h=function(){function a(b){var d=this;c(this,a),this.screenIndex=0,this.service=b,this.service.fetchPreviousQueries().then(function(a){var c=a.queries,e=d.service.getNodes(c);return b.getScreens(e,c)}).then(function(a){d.screens=a})["catch"](function(a){return console.log(a)})}return f(a,[{key:"slidePct",get:function(){return String(-100*this.screenIndex)+"%"}}]),a}())||h)),a("QueryViewer",j)}}});
\ No newline at end of file
diff --git a/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.html b/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.html
index 1fa417c93..c713e0948 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.html
+++ b/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.html
@@ -1,48 +1,48 @@
 <template>
     <div style="width: 100%; text-align: center">  
         <ul class="circle-pagination">
             <li repeat.for="screen of screens" 
             class="${screenIndex === $index? 'active' : ''}"
             click.delegate="screenIndex = $index">
                 <div>${screen.name}</div>
             </li>
         </ul>
     </div>
     <div class="box-wrapper">
         <div class="box" repeat.for="screen of screens" css="transform: translate(${slidePct}, 0%);">
             <section>
                 <!-- ${boxWrapper.offsetWidth} -->
                 <!--for demo wrap>
                 <!--h1>Fixed Table header</h1-->
                 <div>
                     <table cellpadding="0" cellspacing="0" border="0">
                         <thead>
                             <tr>
                                 <th class="tbl-header">
                                 </th>
                                 <th repeat.for="node of screen.nodes" class="tbl-header">
                                     <div class="hideextra">${node}</div>
                                 </th>
                             </tr>
                         </thead>
                     </table>
                 </div>
 
                 <div class="tbl-content">
                     <table cellpadding="0" cellspacing="0" border="0">
                         <tbody>
-                            <tr repeat.for="query of screen.queries">
+                            <tr repeat.for="query of screen.queries" css="background: ${$odd? 'rgba(98,108,146, .1)' : 'white'}">
                                 <th>
                                     <div class="hideextra">${query.name}</div>
                                 </th>
                                 <td repeat.for="result of query.results">
                                     ${result.result}
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </section>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.scss b/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.scss
index 85506f288..ee414d2f9 100644
--- a/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.scss
+++ b/shrine-webclient/src/main/js/client/js-shrine/src/views/query-viewer/query-viewer.scss
@@ -1,166 +1,174 @@
 @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
 body{
   overflow: hidden;
   /*background: -webkit-linear-gradient(left, #6B73A2, #9BB5DA);
   background: linear-gradient(to bottom, #6B73A2, #9BB5DA);*/
   background: rgba(255, 255, 255, 0.9);
   font-family: 'Roboto', sans-serif;
 }
 html,
 body,
 .box-wrapper{
   width: 100%;
   height: 100%;
   margin: 0;
 }
 
 
 .box-wrapper{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
 
 .box {
   margin-top: 1%;
   width: 100%;
   transition: all .2s ease;
 }
 
 .box.blue {
   background: #1881CB;
 }
 .box.red {
   background: #AD3137;
 }
 .box.black {
   background: #424242;
 }
 
 
 .circle-pagination {
   position: absolute;
   z-index: 1000;
   list-style-type: none;
   margin: 0;
   top: -.3rem;
 }
 .circle-pagination li {
   border-radius: 50%;
   border: 2px solid #626C92;
   width: 12px;
   height: 12px;
   padding: 4px;
   margin: 6px;
   cursor: pointer;
   float: left;
   transition: all .2s ease;
 }
 .circle-pagination li.active, 
 .circle-pagination li:hover {
   background: #626C92;
   width: 14px;
   height:14px;
 }
 
 .circle-pagination li.active div,
 .circle-pagination li div:hover{
   color:white;
 }
 
 .circle-pagination li div{
   font-size: .6rem;
   width: 24px; 
   position: relative; 
   left: -6px; 
   top: 1px;
   color: #626C92; 
   font-weight: 600;
   text-transform: capitalize; 
 }
 
 h1{
   font-size: 30px;
   color: #626C92;
   text-transform: uppercase;
   font-weight: 300;
   text-align: center;
   margin-bottom: 15px;
 }
 table{
   width:100%;
   table-layout: fixed;
 }
 .tbl-header{
   background-color: rgba(98,108,146, .3);
  }
 
 
 
 .tbl-header div.tbl-header{
   max-width: 5rem;
 }
 
 
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-height: 150px){  
   .tbl-content{
     height: 90% !important;
   }
 }
 
 
 .tbl-content{
   height: 450px;
   overflow-x:auto;
   margin-top: 0px;
   border: 1px solid rgba(98,108,146,0.3);
 }
 
+.tbl-content tr{
+  cursor: pointer;
+}
+
+.tbl-content tr:hover{
+  background: rgba(98,108,146, .3) !important;
+}
+
 th{
-  padding: 2px 5px;
+  padding: 2px 4px 4px 2px;
   text-align: center;
   font-weight: 500;
   font-size: .75rem;
   color: #626C92;
   text-transform: uppercase;
 }
 
 
 td{
   transition: all .5s ease;
   padding: 2px;
   text-align: center;
   vertical-align: top;
   font-weight: 300;
   font-size: 12px;
   color: black;
   border-bottom: solid 1px rgba(98,108,146,0.1);
 }
 
 section{
   margin: 20 0 6 0;
 }
 
 /* for custom scrollbar for webkit browser*/
 
 ::-webkit-scrollbar {
     width: 8px;
 } 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(98,108,146,.3); 
 } 
 ::-webkit-scrollbar-thumb {
     -webkit-box-shadow: inset 0 0 6px rgba(98,108,146,1); 
 }
 
 .hideextra { 
   white-space: nowrap; 
   overflow: hidden; 
   text-overflow:ellipsis;
 }
\ No newline at end of file