.intLink[title=Hyperlink] {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDUuODIxIDUuODIxIj48cGF0aCBkPSJNMS43NTIgMy45NjloLjc5M20tLjc5My0yLjExN2guNzkzTTEuNzUyIDMuOTdjLS4zNDMgMC0uNjU5LS4xMTktLjgzLS40MTUtLjE3MS0uMjk3LS4xNzEtLjk5IDAtMS4yODcuMTcxLS4yOTYuNDg3LS40MTUuODMtLjQxNW0yLjIxNyAyLjExNmgtLjc5NG0uNzk0LTIuMTE3aC0uNzk0bS43OTQgMi4xMTdjLjM0MiAwIC42NTgtLjExOS44My0uNDE1LjE3LS4yOTcuMTctLjk5IDAtMS4yODctLjE3Mi0uMjk2LS40ODgtLjQxNS0uODMtLjQxNU0yLjExNyAyLjkxaDEuNTg3IiBmaWxsPSJub25lIiBzdHJva2U9IiNhYWEiIHN0cm9rZS13aWR0aD0iLjUyOSIvPjwvc3ZnPg==)
}
.intLink[title=Hyperlink]:hover {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDUuODIxIDUuODIxIj48cmVjdCByeT0iLjI2NSIgcng9Ii4yNjUiIHk9Ii0uMDAxIiBoZWlnaHQ9IjUuODIxIiB3aWR0aD0iNS44MjEiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNMS43NTIgMy45NjhoLjc5M20tLjc5My0yLjExN2guNzkzbS0uNzkzIDIuMTE3Yy0uMzQzIDAtLjY1OS0uMTE5LS44My0uNDE1LS4xNzEtLjI5Ny0uMTcxLS45OSAwLTEuMjg3LjE3MS0uMjk2LjQ4Ny0uNDE1LjgzLS40MTVtMi4yMTcgMi4xMTdoLS43OTRtLjc5NC0yLjExN2gtLjc5NG0uNzk0IDIuMTE3Yy4zNDIgMCAuNjU4LS4xMTkuODMtLjQxNS4xNy0uMjk3LjE3LS45OSAwLTEuMjg3LS4xNzItLjI5Ni0uNDg4LS40MTUtLjgzLS40MTVNMi4xMTcgMi45MWgxLjU4NyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9Ii41MjkiLz48L3N2Zz4=)
}
.statistics-report-graph-line {
  border: 2px solid #ff8000;
  background-color: #ff8000;
}
.statistics-report-graph-extra {
  border: 2px dashed #446979;
  border-left-style: none;
}
mark,
p.noMoreShun,
p.shunned,
span.modpending {
  color: #ff8000
}

}

table.numbered-lines td.line-numbers span.selected-line {
  background-color: #7EA2D9;
}

.statistics-report-graph-line {
  border: 2px solid #7EA2D9;
  background-color: #7EA2D9;
}
.statistics-report-graph-extra {
  border: 2px solid #7EA2D9;
  border-left-style: none;
}

.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: #455978;
}

.capsumOff {

/**************************************
 * Statistics Reports
 */

.statistics-report-graph-line {
  border: 2px solid #22e;
  background-color: #22e;
}
.statistics-report-graph-extra {
  border: 2px dashed #22e;
  border-left-style: none;
}

.statistics-report-table-events th {
  padding: 0 1rem;
}

.statistics-report-table-events td {

  color: red;
}
pre.textPlain {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.statistics-report-graph-line {
  border: 2px solid #446979;
  background-color: #446979;
}
.statistics-report-graph-extra {
  border: 2px dashed #446979;
  border-left-style: none;
}
.statistics-report-table-events th {
  padding: 0 1em 0 1em;
}
.statistics-report-table-events td {
  padding: 0.1em 1em 0.1em 1em;
}

                                        current year */
  char showYearTotal = 0;            /* Flag telling us when to show
                                        the per-year event totals */
  int nMaxEvents  = 1;               /* for calculating length of graph
                                        bars. */
  int iterations = 0;                /* number of weeks/months we iterate
                                        over */

  char *zCurrentTF;                  /* The timeframe in which 'now' lives */
  double rNowFraction;               /* Fraction of 'now' timeframe that has
                                        passed */
  int nTFChar;                       /* Prefix of date() for timeframe */

  nTFChar = includeMonth ? 7 : 4;
  stats_report_init_view();
  db_prepare(&query,
             "SELECT substr(date(mtime),1,%d) AS timeframe,"
             "       count(*) AS eventCount"
             "  FROM v_reports"
             " WHERE ifnull(coalesce(euser,user,'')=%Q,1)"
             " GROUP BY timeframe"
             " ORDER BY timeframe DESC",
             nTFChar, zUserName);
  @ <h1>Timeline Events (%s(stats_report_label_for_type()))
  @ by year%s(includeMonth ? "/month" : "")
  if( zUserName ){
    @ for user %h(zUserName)
  }
  @ </h1>
  @ <table border='0' cellpadding='2' cellspacing='0' \
  zCurrentTF = db_text(0, "SELECT substr(date(),1,%d)", nTFChar);
  if( !includeMonth ){
    @ class='statistics-report-table-events sortable' \
    @ data-column-types='tnx' data-init-sort='0'>
    style_table_sorter();
    rNowFraction = db_double(0.5,
       "SELECT (unixepoch() - unixepoch('now','start of year'))*1.0/"
       "        (unixepoch('now','start of year','+1 year') - "
       "         unixepoch('now','start of year'));");
  }else{
    @ class='statistics-report-table-events'>
    rNowFraction = db_double(0.5,
       "SELECT (unixepoch() - unixepoch('now','start of month'))*1.0/"
       "       (unixepoch('now','start of month','+1 month') - "
       "        unixepoch('now','start of month'));");
  }
  @ <thead>
  @ <th>%s(zTimeLabel)</th>
  @ <th>Events</th>
  @ <th width='90%%'><!-- relative commits graph --></th>
  @ </thead><tbody>
  /*
     Run the query twice. The first time we calculate the maximum
     number of events for a given row. Maybe someone with better SQL
     Fu can re-implement this with a single query.
  */
  while( SQLITE_ROW == db_step(&query) ){
    int nCount = db_column_int(&query, 1);
    if( strcmp(db_column_text(&query,0),zCurrentTF)==0
     && rNowFraction>0.05
    ){
      nCount = (int)(((double)nCount)/rNowFraction);
    }
    if(nCount>nMaxEvents){
      nMaxEvents = nCount;
    }
    ++iterations;
  }
  db_reset(&query);
  while( SQLITE_ROW == db_step(&query) ){

      if( zUserName ){
        cgi_printf("&u=%t", zUserName);
      }
      cgi_printf("'>%s</a>", zTimeframe);
    }
    @ </td><td>%d(nCount)</td>
    @ <td>
    if( strcmp(zTimeframe, zCurrentTF)==0
     && rNowFraction>0.05
     && nCount>0
     && nMaxEvents>0
    ){
      /* If the timespan covered by this row contains "now", then project
      ** the number of changes until the completion of the timespan and
      ** show a dashed box of that projection. */
      int nExtra = (int)(((double)nCount)/rNowFraction) - nCount;
      int nXSize = (100 * nExtra)/nMaxEvents;
      @ <span class='statistics-report-graph-line' \
      @  style='display:inline-block;min-width:%d(nSize)%%;'>&nbsp;</span>\
      @ <span class='statistics-report-graph-extra' \
      @  style='display:inline-block;min-width:%d(nXSize)%%;'>&nbsp;</span>\
    }else{
      @ <div class='statistics-report-graph-line' \
      @  style='width:%d(nSize)%%;'>&nbsp;</div> \
    }
    @ </td>
    @ </tr>

    /*
      Potential improvement: calculate the min/max event counts and
      use percent-based graph bars.
    */
  }
  db_finalize(&query);
  if(includeMonth && !showYearTotal && *zPrevYear){