<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td colspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
    <tr>
    <td colspan="4">This</td>
    <td rowspan="3">Little</td>
    <td>Piggy</td>
  </tr>
  <tr>
    <td rowspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
  <tr>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
</table>

table {
  border-spacing: 0.5rem;
}
td {
  padding: 0.5rem;
}

td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }

<table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   <thead><tr><th rowspan="2">Grade.</th>
     <th rowspan="2">Yield Point.</th>
     <th colspan="2">Ultimate tensile strength</th>
     <th rowspan="2">Per cent elong. 50.8&nbsp;mm or&nbsp;2&nbsp;in.</th>
     <th rowspan="2">Per cent reduct. area.</th>
    </tr><tr><th>kg/mm<sup>2</sup></th>
     <th>lb/in<sup>2</sup></th>
    </tr></thead><tbody><tr><td>Hard</td>
     <td>0.45 ultimate</td>
     <td>56.2</td>
     <td>80,000</td>
     <td>15</td>
     <td>20</td>
    </tr><tr><td>Medium</td>
     <td>0.45 ultimate</td>
     <td>49.2</td>
     <td>70,000</td>
     <td>18</td>
     <td>25</td>
    </tr><tr><td>Soft</td>
     <td>0.45 ultimate</td>
     <td>42.2</td>
     <td>60,000</td>
     <td>22</td>
     <td>30</td>
    </tr></tbody></table>

#table-example-1 { 
  border: solid thin; 
  border-collapse: collapse; 
}
#table-example-1 caption { 
  padding-bottom: 0.5em; 
}
#table-example-1 th, 
#table-example-1 td { 
  border: solid thin;
  padding: 0.5rem 2rem;
}
#table-example-1 td {
  white-space: nowrap;
}
#table-example-1 th { 
  font-weight: normal; 
}
#table-example-1 td { 
  border-style: none solid; 
  vertical-align: top; 
}
#table-example-1 th { 
  padding: 0.2em; 
  vertical-align: middle; 
  text-align: center; 
}

#table-example-1 tbody td:first-child::after { 
  content: leader(". "); '
}

body {
  padding: 1rem;
}

<div class="wrap">
<table>
  <tr>
    <td>test</td>
  </tr>
</table>
<table>
  <tr>
    <td>longer</td>
  </tr>
</table>
<table>
  <tr>
    <td>I'm pretty wide, really.</td>
  </tr>
</table>
  <table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla provident modi aut debitis minus temporibus tempore saepe quas hic ratione itaque quo quisquam earum.</td>
  </tr>
</table>
</div>

body {
  background: #ccc;
}
.wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
}
table {
  border: 1px solid red;
  margin: 5px 0;
}

<div class="wrap">
<table>
  <tr>
    <td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
  </tr>
</table>
<table class="many-cells">
  <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
  </tr>
</table>
</div>

body {
  background: #ccc;
}
.wrap {
  width: 300px;
  margin: 0 auto;
  background: white;
}
table {
  border: 1px solid red;
  margin: 5px 0;
}
.nowrap {
  white-space: nowrap;
}
.many-cells td {
  padding: 5px;
  border: 1px solid green;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <th>2</th>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <th>3</th>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <th>4</th>
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <th>5</th>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>

td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: lightblue;
  border-color: white;
}
body {
  padding: 1rem;
}

<table class="zebra"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr id='row'> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
.hover {
  background: yellow;
}

var allCells = $("td, th");

allCells
  .on("mouseover", function() {
    var el = $(this),
        pos = el.index();
    el.parent().find("th, td").addClass("hover");
    allCells.filter(":nth-child(" + (pos+1) + ")").addClass("hover");
  })
  .on("mouseout", function() {
    allCells.removeClass("hover");
  });

<section class="container">

  <h2>Light Javascript Table Filter</h2>

  <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">

  <table class="order-table table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@gmail.com</td>
        <td>0123456789</td>
        <td>99</td>
      </tr>
      <tr>
        <td>Jane Vanda</td>
        <td>jane@vanda.org</td>
        <td>9876543210</td>
        <td>349</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>alfred@batman.com</td>
        <td>6754328901</td>
        <td>199</td>
      </tr>
    </tbody>
  </table>

</section>

(function(document) {
  'use strict';

  var LightTableFilter = (function(Arr) {

    var _input;

    function _onInputEvent(e) {
      _input = e.target;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      }
    };
  })(Array.prototype);

  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      LightTableFilter.init();
    }
  });

})(document);

td, th {
  padding: 10px;
  border: 1px solid #ccc;
}
body {
  padding: 1rem;
}

var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    i, rowcount;

table.appendChild(tbody);

for (i = 0; i <= 3; i++) {
  tbody.insertRow(i);
  for (x = 0; x <= 2; x++) {
    tbody.rows[i].insertCell(x);
    tbody.rows[i].cells[x].appendChild(
        document.createTextNode('Row ' + i + ', Col ' + x)
    );
  }
}

table.createCaption();
table.caption.appendChild(
  document.createTextNode('A DOM-generated Table')
);

document.body.appendChild(table);

<h2>House Campaigns <i class="icon-minus"></i></h2>
<table class="numbers table2">
  <thead>
  <tr class="header">
    <th class="name">Name</th><th>DAU Stats</th><th>Revenue</th><th>Spent</th><th>Expenses</th><th>Final Profit</th><th>Margin</th>
  </tr>
  </thead>
  <tbody>
  <tr class="good">
    <td><a href="#">Publisher 1</a></td>
    <td class="number">213,450</td>
    <td class="money">$13,923.55</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$13,923.55</td>
    <td class="percent">100% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 2</a></td>
    <td class="number">1,020</td>
    <td class="money">$202.35</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$202.35</td>
    <td class="percent">100% <i class="icon-arrow-combo"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 3</a></td>
    <td class="number">11,450</td>
    <td class="money">$831.07</td>
    <td class="money">$0.74</td>
    <td class="money">$0.00</td>
    <td class="money">$830.33</td>
    <td class="percent">99.9% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 4</a></td>
    <td class="number">4</td>
    <td class="money">$36.38</td>
    <td class="money"></td>
    <td class="money">$0.00</td>
    <td class="money">$36.38</td>
    <td class="percent">100% <i class="icon-up-bold"></i></td>
  </tr>
  </tbody>
  <tfoot>
  <tr class="summary">
    <td>Summary</td>
    <td class="number">225,924 </td>
    <td class="money">$14,993.35</td>
    <td class="money">$0.74</td>
    <td class="money">$0.00</td>
    <td class="money">$14,992.61</td>
    <td class="percent">100%</td>
  </tr>
  </tfoot>
</table>

<h2>EXE Publisher <i class="icon-minus"></i></h2>
<table class="numbers table3">
  <thead>
  <tr class="header">
    <th class="name">Name</th><th>DAU Stats</th><th>Revenue</th><th>Spent</th><th>Expenses</th><th>Final Profit</th><th>Margin</th>
  </tr>
  </thead>
  <tbody>
  <tr class="awful">
    <td><a href="#">Publisher 10</a></td>
    <td class="number">48,444</td>
    <td class="money">$613.35</td>
    <td class="money">$670.80</td>
    <td class="money">$41.35</td>
    <td class="money">($98.80)</td>
    <td class="percent">-16.1% <i class="icon-down-bold"></i></td>
  </tr>
  <tr class="awful">
    <td><a href="#">Publisher 11</a></td>
    <td class="number">8842</td>
    <td class="money">$7.23</td>
    <td class="money">$2.13</td>
    <td class="money">$7.55</td>
    <td class="money">($2.44)</td>
    <td class="percent">-33.8% <i class="icon-arrow-combo"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 12</a></td>
    <td class="number">122444</td>
    <td class="money">$642.87</td>
    <td class="money">$82.45</td>
    <td class="money">$104.51</td>
    <td class="money">$445.91</td>
    <td class="percent">70.9% <i class="icon-up-bold"></i></td>
  </tr>
  <tr class="good">
    <td><a href="#">Publisher 13</a></td>
    <td class="number">8778</td>
    <td class="money">$185.89</td>
    <td class="money">$0.12</td>
    <td class="money">$7.49</td>
    <td class="money">$178.28</td>
    <td class="percent">95.9% <i class="icon-up-bold"></i></td>
  </tr>
  
  <tr class="good publisher14">
    <td><a href="#">Publisher 14</a></td>
    <td class="number">596</td>
    <td class="money">$5.63</td>
    <td class="money">$0.25</td>
    <td class="money">$0.51</td>
    <td class="money">$4.87</td>
    <td class="percent">86.5% <i class="icon-down-bold"></i></td>
  </tr>
  <tr class="row-details">
    <td colspan="7">
      <img src="http://www.jqplot.com/images/linestyles2.jpg" />
      <img src="http://www.jqplot.com/images/barchart.jpg" />
      <img src="http://www.jqplot.com/images/shadow2.jpg" />
      <img src="http://www.jqplot.com/images/linestyles2.jpg" />
      <img src="http://www.jqplot.com/images/barchart.jpg" />
      <img src="http://www.jqplot.com/images/shadow2.jpg" />
    </td>
  </tr>
  <tr class="marginal">
    <td><a href="#">Publisher 15</a></td>
    <td class="number">9153</td>
    <td class="money">$9.64</td>
    <td class="money">$0.09</td>
    <td class="money">$7.81</td>
    <td class="money">$1.73</td>
    <td class="percent">18.0% <i class="icon-up-bold"></i></td>
  </tr>
  </tbody>
  <tfoot>
  <tr class="summary">
    <td>Summary</td>
    <td class="number">154,657</td>
    <td class="money">$1,464.61</td>
    <td class="money">$755.84</td>
    <td class="money">$169.22</td>
    <td class="money">$538.55</td>
    <td class="percent">36.9%</td>
  </tr>
  </tfoot>
</table>

@import "compass/css3";
/* Prototype styles */
 body {
	 background-image: url('http://dannocket.com/sandbox/satinweave.png');
	 font: 0.85em arial, sans-serif;
	 padding: 10px;
}
 h2 {
	 color: #333;
	 margin-bottom: 5px;
	 font-size: 2em;
	 cursor: pointer;
}
 a {
	 color: #0882cb;
	 text-decoration: none;
}
 .numbers a {
	 font-weight: bold;
}
 table, td, th {
	 border: 1px solid #ccc;
}
 table {
	 background-color: #fff;
	 box-shadow: 0 2px 2px #ccc;
	 width: 100%;
}
 td, th {
	 padding: 10px 5px;
}
 th {
	 cursor: pointer;
}
/*.header,.summary {
	 background-color: #aaa;
	 color: #fff;
}
*/
 td {
	 text-align: right;
}
 th, td:nth-child(1) {
	 text-align: left;
}
 .money, .percent {
	 text-align: center;
}
 tr:not(.header,.summary):nth-child(even) {
	 background-color: #eee;
}
 tr.summary, .percent {
	 font-weight: bold;
}
/* Statuses */
 .good {
	 background-color: #f5f8ec;
}
 tr.good:nth-child(even) {
	 background-color: adjust-lightness(#f5f8ec, -5);
}
 .marginal {
	 background-color: #fcf9ca;
}
 tr.marginal:nth-child(even) {
	 background-color: adjust-lightness(#fcf9ca, -5);
}
 .awful {
	 background-color: #fcc;
}
 tr.awful:nth-child(even) {
	 background-color: adjust-lightness(#fcc, -5);
}
 .awful-highlight {
	 color: #f00;
}
/* Details */
 .row-details {
	 display: none;
	 height: 200px;
}
 .row-details td {
	 text-align: center;
}
 .publisher14 {
	 cursor: pointer;
}
/* Sort table */
 .headerSortDown, .headerSortUp {
	 background-color: #ddd;
}
/* Icon fonts */
 @font-face {
	 font-family: 'fontello';
	 src: url("http://dannocket.com/sandbox/font/fontello.eot");
	 src: url("http://dannocket.com/sandbox/font/fontello.eot?#iefix") format('embedded-opentype'), url("http://dannocket.com/sandbox/font/fontello.woff") format('woff'), url("http://dannocket.com/sandbox/font/fontello.ttf") format('truetype'), url("http://dannocket.com/sandbox/font/fontello.svg#fontello") format('svg');
	 font-weight: normal;
	 font-style: normal;
}
 [class^="icon-"]:before, [class*=" icon-"]:before {
	 font-family: 'fontello';
	 font-style: normal;
	 font-weight: normal;
	 speak: none;
	 display: inline-block;
	 text-decoration: inherit;
	 width: 1em;
	 margin-right: 0.2em;
	 text-align: center;
	 opacity: 0.8;
	/* fix buttons height, for twitter bootstrap */
	 line-height: 1em;
	/* Animation center compensation - magrins should be symmetric */
	/* remove if not needed */
	 margin-left: 0.2em;
	/* you can be more comfortable with increased icons size */
	/* font-size: 120%;
	 */
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
	 */
}
 .icon-plus:before {
	 content: '\2b';
}
/* '+' */
 .icon-minus:before {
	 content: '\2d';
}
/* '-' */
 .icon-star:before {
	 content: '\2605';
}
/* '★' */
 .icon-star-empty:before {
	 content: '\2606';
}
/* '☆' */
 .icon-heart-empty:before {
	 content: '\2661';
}
/* '♡' */
 .icon-heart:before {
	 content: '\2665';
}
/* '♥' */
 .icon-check:before {
	 content: '\2713';
}
/* '✓' */
 .icon-cancel:before {
	 content: '\2715';
}
/* '✕' */
 .icon-plus-circle:before {
	 content: '\2795';
}
/* '➕' */
 .icon-minus-circle:before {
	 content: '\2796';
}
/* '➖' */
 .icon-left-bold:before {
	 content: '\e4ad';
}
/* '' */
 .icon-right-bold:before {
	 content: '\e4ae';
}
/* '' */
 .icon-up-bold:before {
	 content: '\e4af';
}
/* '' */
 .icon-down-bold:before {
	 content: '\e4b0';
}
/* '' */
 .icon-arrow-combo:before {
	 content: '\e74f';
}
/* '' */
/* jqPlot */
 .jqplot-target {
	 position: relative;
	 color: #666;
	 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	 font-size: 1em;
}
 .jqplot-axis {
	 font-size: 0.75em;
}
 .jqplot-xaxis {
	 margin-top: 10px;
}
 .jqplot-x2axis {
	 margin-bottom: 10px;
}
 .jqplot-yaxis {
	 margin-right: 10px;
}
 .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis {
	 margin-left: 10px;
	 margin-right: 10px;
}
 .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick {
	 position: absolute;
	 white-space: pre;
}
 .jqplot-xaxis-tick {
	 top: 0;
	 left: 15px;
	 vertical-align: top;
}
 .jqplot-x2axis-tick {
	 bottom: 0;
	 left: 15px;
	 vertical-align: bottom;
}
 .jqplot-yaxis-tick {
	 right: 0;
	 top: 15px;
	 text-align: right;
}
 .jqplot-yaxis-tick.jqplot-breakTick {
	 right: -20px;
	 margin-right: 0;
	 padding: 1px 5px 1px 5px;
	 z-index: 2;
	 font-size: 1.5em;
}
 .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
	 left: 0;
	 top: 15px;
	 text-align: left;
}
 .jqplot-yMidAxis-tick {
	 text-align: center;
	 white-space: nowrap;
}
 .jqplot-xaxis-label {
	 margin-top: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-x2axis-label {
	 margin-bottom: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-yaxis-label {
	 margin-right: 10px;
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-yMidAxis-label {
	 font-size: 11pt;
	 position: absolute;
}
 .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label {
	 font-size: 11pt;
	 margin-left: 10px;
	 position: absolute;
}
 .jqplot-meterGauge-tick {
	 font-size: 0.75em;
	 color: #999;
}
 .jqplot-meterGauge-label {
	 font-size: 1em;
	 color: #999;
}
 table.jqplot-table-legend {
	 margin-top: 12px;
	 margin-bottom: 12px;
	 margin-left: 12px;
	 margin-right: 12px;
}
 table.jqplot-table-legend, table.jqplot-cursor-legend {
	 background-color: rgba(255, 255, 255, 0.6);
	 border: 1px solid #ccc;
	 position: absolute;
	 font-size: 0.75em;
}
 td.jqplot-table-legend {
	 vertical-align: middle;
}
 td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
	 cursor: pointer;
}
 .jqplot-table-legend .jqplot-series-hidden {
	 text-decoration: line-through;
}
 div.jqplot-table-legend-swatch-outline {
	 border: 1px solid #ccc;
	 padding: 1px;
}
 div.jqplot-table-legend-swatch {
	 width: 0;
	 height: 0;
	 border-top-width: 5px;
	 border-bottom-width: 5px;
	 border-left-width: 6px;
	 border-right-width: 6px;
	 border-top-style: solid;
	 border-bottom-style: solid;
	 border-left-style: solid;
	 border-right-style: solid;
}
 .jqplot-title {
	 top: 0;
	 left: 0;
	 padding-bottom: 0.5em;
	 font-size: 1.2em;
}
 table.jqplot-cursor-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
}
 .jqplot-cursor-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
	 white-space: nowrap;
	 background: rgba(208, 208, 208, 0.5);
	 padding: 1px;
}
 .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
	 border: 1px solid #ccc;
	 font-size: 0.75em;
	 white-space: nowrap;
	 background: rgba(208, 208, 208, 0.5);
	 padding: 1px;
}
 .jqplot-point-label {
	 font-size: 0.75em;
	 z-index: 2;
}
 td.jqplot-cursor-legend-swatch {
	 vertical-align: middle;
	 text-align: center;
}
 div.jqplot-cursor-legend-swatch {
	 width: 1.2em;
	 height: 0.7em;
}
 .jqplot-error {
	 text-align: center;
}
 .jqplot-error-message {
	 position: relative;
	 top: 46%;
	 display: inline-block;
}
 div.jqplot-bubble-label {
	 font-size: 0.8em;
	 padding-left: 2px;
	 padding-right: 2px;
	 color: #141414;
}
 div.jqplot-bubble-label.jqplot-bubble-label-highlight {
	 background: rgba(90, 90, 90, 0.7);
}
 div.jqplot-noData-container {
	 text-align: center;
	 background-color: rgba(96, 96, 96, 0.3);
}
 

/**
  Prototype code
  
  -Known issues:
    - The table sorter is using a string sort instead of a numeric sort as you would expect.
*/

$(document).ready(function() {
  addMarginGraph();
  $('.table2').tablesorter();
  $('.table3').tablesorter();
});

var statusColorGood = "rgba(121,216,121,1)";
var statusColorMarginal = "rgba(255,242,61,1)";

addMarginGraph = function() {
  $('.numbers .percent').each(function(e) {
    var percentage = parseFloat($(this).html());
    var color = "";
    if (percentage >= 0) {
      if (percentage >= 50) {
        color = statusColorGood;
      } else {
        color = statusColorMarginal;
      }
      $(this).css('background',"-webkit-linear-gradient(left, "+color+" 0%,"+color+" "+percentage+"%,rgba(255,255,255,0) "+(percentage+1)+"%,rgba(255,255,255,0) 100%)");
    } else {
      $(this).addClass('awful-highlight');
    }
  });
}
  
$('.publisher14').on('click', function(e) {
  $(this).next('tr').toggle('fast','swing');
});

$('body').on('click', 'h2', function(e) {
  $(this).find('i').toggleClass('icon-minus').toggleClass('icon-plus');
  $(this).next('table').toggle();
});