/*! Tablesaw - v0.1.6 - 2014-07-23
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2014 Filament Group; Licensed MIT */

/* JP Changes*/
/* v3.0.1 - changed min-width: 40em to min-width: 30em so that everything kicks in at 480px instead of 640px*/
/* v3.0.1 - optionally add "tablesawAt767px" class and the table layout will occur at 767px  */
/* v3.0.1 - removed extraneous classes from CSS */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}

/* Structure */

.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .5em .7em;
}

/*.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}
*/


table.tablesaw tbody th {
  font-weight: bold; /*background: #EEE; border-bottom: 1px solid #999;*/
}


.tablesaw td .btn,
.tablesaw tbody th .btn {
  margin: 0;
}

.tablesaw thead {
  border: 0px solid #e5e5e4; border-bottom:1px solid #e5e5e4;
}



/* Table rows have a gray bottom stroke by default */

.tablesaw tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.tablesaw caption {
  text-align: left;
  margin-bottom: 1.4em;
  opacity: .5;
  filter: alpha(opacity=50);
}

/* Stack */

.tablesaw-cell-label-top {
  text-transform: uppercase;
  font-size: .9em;
  font-weight: normal;
}

.tablesaw-cell-label {
  /*font-size: .65em; font-size: 0.9em;*/
  text-transform: uppercase;
  color: #888;
  font-family: sans-serif;
}

@media (min-width: 40em) {
  .tablesaw td {
    /*line-height: 2em;*/
  }
}

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
  display: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
  /* Show the table cells as a block level element */

  .tablesaw-stack td,
  .tablesaw-stack th {
    text-align: left;
    display: block;
  }

  .tablesaw-stack tr {
    clear: both;
    display: table-row;
  }

  /* Make the label elements a percentage width */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: block;
    padding: 0 .6em 0 0;
    min-width: 40%;
    display: inline-block;
  }

  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */

  .tablesaw-stack th .tablesaw-cell-label-top,
  .tablesaw-stack td .tablesaw-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;
  }

  .tablesaw-cell-label {
    display: block;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack tbody th.group {
    margin-top: -1px;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack th.group b.tablesaw-cell-label {
    display: none !important;
  }
}

/*xflow3*/
/*@media (max-width: 39.9375em) {
  .tablesaw-stack thead td
{
    display: none;
  }

  .tablesaw-stack tbody td,
  .tablesaw-stack tbody th {
    clear: left;
    float: left;
    width: 100%; border-bottom: 0px solid #DDD !important; 
  }
}*/

/* Media query to show as a standard table at 560px (35em x 16px) or wider */
/*xflow3*/
/*@media (min-width: 40em) {
  .tablesaw-stack tr {
    display: table-row;
  }

  .tablesaw-stack td,
  .tablesaw-stack th,
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: table-cell;
    margin: 0;
  }


  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: none !important;
  }
}*/

.tablesaw-fix-persist {
  table-layout: fixed;
}

/* see Gruntfile.js for grunticon selector */





/**/
/**/
/**/
/* JP overrides to suit our sites */
/**/
/**/
/**/

.tablesaw-stack .tablesaw-hide-row { display: none;}

/* .tablesaw: when less than 480px breakpoint: show as stacked rows and show the labels.*/
@media (max-width: 480px) {
  .tablesaw-stack.tablesaw thead td{
    display: none;
  }

  .tablesaw-stack.tablesaw tbody td,
  .tablesaw-stack.tablesaw tbody th {
    clear: left;
    float: left;
    width: 100%; border-bottom: 0px solid #DDD !important; 
  }

  .tablesaw-stack.tablesaw td .tablesaw-cell-label,
  .tablesaw-stack.tablesaw th .tablesaw-cell-label {
    display: block !important;
  }
}

/* .tablesaw:  when more than 480px breakpoint: show as side by side table columns and hide the labels.*/
@media (min-width: 480px) {
  .tablesaw-stack.tablesaw tr {
    display: table-row;
  }

  .tablesaw-stack.tablesaw td,
  .tablesaw-stack.tablesaw th{
    display: table-cell;
    margin: 0;
  }

  .tablesaw-stack.tablesaw td .tablesaw-cell-label,
  .tablesaw-stack.tablesaw th .tablesaw-cell-label {
    display: none !important;
  }
}

/* tablesawAt767px: when less than 767px breakpoint: show as stacked rows and show the labels.*/
@media (max-width: 767px) {
  .tablesaw-stack.tablesawAt767px thead td{
    display: none;
  }

  .tablesaw-stack.tablesawAt767px td,
  .tablesaw-stack.tablesawAt767px th {
    clear: left;
    float: left;
    width: 100%; border-bottom: 0px solid #DDD !important; 
  }

  .tablesaw-stack.tablesawAt767px td .tablesaw-cell-label,
  .tablesaw-stack.tablesawAt767px th .tablesaw-cell-label {
    display: block !important;
  }
}

/* .tablesawAt767px:  when more than 767px breakpoint : show as side table columns and hide the labels.*/
@media (min-width: 767px) {
  .tablesaw-stack.tablesawAt767px tr {
    display: table-row;
  }

  .tablesaw-stack.tablesawAt767px td,
  .tablesaw-stack.tablesawAt767px th{
    display: table-cell;
    margin: 0;
  }

  .tablesaw-stack.tablesawAt767px td .tablesaw-cell-label,
  .tablesaw-stack.tablesawAt767px th .tablesaw-cell-label {
    display: none !important;
  }
}

/*  */
/* .tablesaw: when less than 480px : show as side by side table columns and hide the labels.*/
@media (max-width: 480px) {
	/*left align all content so that it overrides alignRight and alignCenter*/
	.tablesaw-stack.tablesaw tr td, 
	.tablesaw-stack.tablesaw tr th {
		text-align: left !important; padding: 0.5rem 0.5rem;
	} 
	.tablesaw-stack.tablesaw tr th {background: #DDD}
  
	/*make each row striped for easier visibility*/
	/*doesn't work in IE8, but we are targetting mobile devices with safari and chrome*/
	.tablesaw-striped.tablesaw-stack.tablesaw tbody tr:nth-child(odd) td, 
	.tablesaw-striped.tablesaw-stack.tablesaw tbody tr:nth-child(odd) th {
		background: #f6f6f6 !important;
	} 

    .tablesaw-striped.tablesaw-stack.tablesaw tfoot tr td, 
	.tablesaw-striped.tablesaw-stack.tablesaw tfoot tr th {
		background: #E3E3E3 !important; border-top: 1px solid #CCC;
		color: #666;
	} 
  
	.tablesaw-stack.tablesaw { 
		border-top: 2px solid #BBB !important;
	}
	.tablesaw-stack.tablesaw tr{ 
		border-bottom: 2px solid #BBB !important;
	}
}

/* .tablesawAt767px: when more than 767px : show as side by side table columns and hide the labels.*/
@media (max-width: 767px) {
	/*left align all content so that it overrides alignRight and alignCenter*/
	.tablesaw-stack.tablesawAt767px tr td, 
	.tablesaw-stack.tablesawAt767px tr th {
		text-align: left !important; padding: 0.5rem 0.5rem;
	} 
    .tablesaw-stack.tablesawAt767px tr th {background: #DDD}
  
	/*make each row striped for easier visibility*/
	/*doesn't work in IE8, but we are targetting mobile devices with safari and chrome*/
	.tablesaw-striped.tablesaw-stack.tablesawAt767px tbody tr:nth-child(odd) td, 
	.tablesaw-striped.tablesaw-stack.tablesawAt767px tbody tr:nth-child(odd) th {
		background: #F6F6F6 !important;
	} 
  
    .tablesaw-striped.tablesaw-stack.tablesawAt767px tfoot tr td, 
	.tablesaw-striped.tablesaw-stack.tablesawAt767px tfoot tr th {
		background: #E3E3E3 !important; border-top: 1px solid #CCC;
		color: #666;
	} 

	.tablesaw-stack.tablesawAt767px { 
		border-top: 2px solid #BBB !important;
	}
	.tablesaw-stack.tablesawAt767px tr{ 
		border-bottom: 2px solid #BBB !important;
	}
}