/*
 * Responsive Tables plugin 1.0
 * Ryan Wells 
 * Copyright 2015, Ryan Wells (http://ryanwells.com)
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/
/** Whale Extra */
/*
body {
    font-family: sans-serif;
     font-size: .938em;
}
*/
table.respond {
    width: 100%;
    margin: 1em 0 2em;
    border-collapse: collapse;
}

table.respond caption {
    margin: 1em 0 .7em 0;
    text-align: left;
    font-weight: bold;
    font-size: 120%;
    letter-spacing: .5px;
    color: #444;
}

table.respond th {
    text-align: left;
    padding: .5em .5em;
    font-weight: bold;
    border-top: solid 3px #ccc;
    border-bottom: solid 1px #ccc;
}

table.respond td {
    padding: .5em .5em;
    border-bottom: solid 1px #ccc;
}

/** Whale Extra */

@media only screen and (max-width: 800px)  { /** change media query width to suit needs */
	
	/** force table markup to behave like divs */
	table.respond table, 
	table.respond thead, 
	table.respond tbody, 
	table.respond th, 
	table.respond td, 
	table.respond tr { 
		display: block!important; 
		text-align: left!important;
	}
	
	/** hide table headers (but not display: none;, for accessibility) */
	table.respond thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.respond tr { 
		border: 1px solid #ccc; 
	}
	
	table.respond td { 
		/* behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%!important; 
		font-weight: normal;
	}
	
	table.respond td:before { 
		/** becomes the table header */
		position: absolute;
		/** top/left values mimic padding */
		top: 8px;/* mimic padding top */
		left: 6px;/* mimic padding left */
		width: 45%; 
		text-align: left!important;
		padding-right: 0; 
		font-weight: bold;
	}
}

/** whale*/
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
    background-color: #f5f5f5;
}