anchor.diff:    </tr>
   <% end %> 
   </table>
  +</div>
   </body>
   </html>
positive.code:          font-size: 20px;
           margin: 4px 2px;
           cursor: pointer;
           }
  
  
  
  
negative.code:   color: black;
   
  }
  td .long {
    display: none;
  }
  
  td.more .long {
    display: inherit;
  }
  
  td.more .short {
    display: none;
  }
  
  .url, .toggle-more {
  float: left;
  }
  
  .url {
  padding-left: 4px;
  }
  
  .toggle-more {
    display: none;
    padding-left: 4px;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  
  .multi-url .toggle-more {
   display: inherit;
  }
  
  iv.text-container {
      margin: 0 auto;
      width: 75%;    
  }
  
  .hideContent {
      overflow: hidden;
      line-height: 1em;
      height: 2em;
  }
  
  .showContent {
      line-height: 1em;
      height: auto;
  }
  .showContent{
      height: auto;
  }
  .show-more {
      padding: 10px 0;
      text-align: center;
  }
   /*hereeeeeeeeeeee */
  
  .btn-group button {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
  }
  
  /* Clear floats (clearfix hack) */
  .btn-group:after {
    content: "";
    clear: both;
    display: table;
  }
  
  .btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
  }
  
  /* Add a background color on hover */
  .btn-group button:hover {
    background-color: #3e8e41;
  }
  
  @media screen and (min-width: 20em) {
     .my-custom-class th.ui-table-priority-1,
     .my-custom-class td.ui-table-priority-1 {
       display: table-cell;
     }
  }
  /* Show priority 2 at 480px (30em x 16px) */
  @media screen and (min-width: 30em) {
     .my-custom-class  th.ui-table-priority-2,
     .my-custom-class td.ui-table-priority-2 {
       display: table-cell;
     }
  }
  
  </style>
  </head>
  <body>
   <form name="frmSite" style="float: left; margin-top: 5px;"> 
    <a class="loginPg_choices" href="https://puppetlabs.github.io/community_management/report_tools30.html" onclick="window.location.href = 'https://puppetlabs.github.io/community_management/report_tools30.html'">
      <input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
      <span style="float: left; margin: 7px 0 0 20px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 30 days</span>
      <br/> 
    </a>
    <a class="loginPg_choices" href="https://puppetlabs.github.io/community_management/report_tools60.html"
      onclick="window.location.href = 'https://puppetlabs.github.io/community_management/report_tools60.html'">
      <input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
      <span style="float: left; margin: 7px 0 0 20px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 60 days</span>
      <br/> 
      <a class="loginPg_choices" href="https://puppetlabs.github.io/community_management/report_tools90.html" onclick="window.location.href = 'https://puppetlabs.github.io/community_management/report_tools90.html'">
      <input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
      <span style="float: left; margin: 7px 0 0 20px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 90 days</span>
    </a>
    </form>
  <h1 style="text-align:center;">Tools PRs that require review</h1>
   <!--  <div class="btn-group">
   <a href="https://puppetlabs.github.io/community_management/report_tools30.html" class="button">30 Days</a>
   <a href="https://puppetlabs.github.io/community_management/report_tools60.html" class="button">60 Days</a>
   <a href="https://puppetlabs.github.io/community_management/report_tools90.html" class="button">90 Days</a> -->
  </div>
  <div style="overflow-x:auto;">
  <table data-role='table' data-mode='columntoggle' border='1' id='tools' style='width:relative' class='sortable table table-hover ui-responsive table-stroke'> 
  <thead>
    <tr>
      <% if open_prs.empty?  %>
      <% puts "nothing to do here, no prs found" %>
        <% else %>
        <% open_prs.first.keys.each do |header| %>
          <% if header == :pr || header == :tool %>
             <th><%= header %></th> 
          <% elsif header == :age_comment || header == :no_comment_from_puppet || header== :last_comment_mentions_puppet || header== :num_comments %>
             <th data-priority="2" class="ui-table-priority-1 ui-table-cell-visible"><%= header %></th>
          <% elsif header != :address %> 
             <th data-priority="1" class="ui-table-cell-visible"><%= header %></th> 
          <% end %>
        <% end %>
    <% end %> 
  
    </tr>
  </thead>
  <% open_prs.each do |row| %>
    <tr>
    <% row.each do |key, value| %>
    <% if key == :last_comment %>
    <td>
    <div class="content hideContent">
       <%= value %>
  </div>
   <div class="show-more">
          <a href="#">Show more</a>
      </div></td>
  <% end %>
  
    <%  if key == :pr %>
        <td><a target ="_blank" href='<%= row[:address] %>/pull/<%= value %>'><%= value %></a></td>
    <%  elsif key == :tool%>
        <td><a target ="_blank" href='<%= row[:address] %>'><%= value %></a></td>
    <%  else %>
        <% if key != :address && key != :last_comment %>
          <td><%= value %></td>
        <% end %>
    <%  end %>
  