@charset "utf-8";
table {background: #f5f5f5;border-collapse: separate;box-shadow: inset 0 1px 0 #fff;font-size: 16px;line-height: 16px;margin: 30px auto;text-align: left;width: 80%; min-width: 300px; overflow-x: hidden; display: table;}
table:before {display: none;}	
th {background: url(), linear-gradient(#777, #444);border-left: 1px solid #555;border-right: 1px solid #777;border-top: 1px solid #555;border-bottom: 1px solid #333;box-shadow: inset 0 1px 0 #999;color: #fff;font-weight: bold;padding: 10px 15px;position: relative;text-shadow: 0 1px 0 #000;width: 10%;}
th:first-child {border-left: 1px solid #777;	box-shadow: inset 1px 1px 0 #999;}
th:last-child {box-shadow: inset -1px 1px 0 #999;}
td {border-right: 1px solid #fff;border-left: 1px solid #e8e8e8;border-top: 1px solid #fff;border-bottom: 1px solid #e8e8e8;padding: 10px 15px;position: relative;transition: all 300ms;}
td:first-child {box-shadow: inset 1px 0 0 #fff;}	
td:last-child {border-right: 1px solid #e8e8e8;box-shadow: inset -1px 0 0 #fff;}	
tr {background: url();text-align: center;	}
tr:nth-child(odd) td {background: #f1f1f1 url();	}
tr:last-of-type td {box-shadow: inset 0 -1px 0 #fff; }
tr:last-of-type td:first-child {box-shadow: inset 1px -1px 0 #fff;}	
tr:last-of-type td:last-child {box-shadow: inset -1px -1px 0 #fff;}	
tbody:hover td {color: transparent;text-shadow: 0 0 3px #aaa;}
tbody:hover tr:hover td {color: red;text-shadow: 0 1px 0 #fff;}
@media screen and (max-width: 1270px) {table {width: 100%; font-size: 12px;}}
@media screen and (max-width: 480px) {table {font-size: 9px;}th, td {padding: 2px;}}