.table-block{
  font-size:12px;
  width:350px;
}

.m-table {
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin: 0;
}
.attr-col{
  width:100px;
  text-align:right
}
.default-col{
  width:70px;
  text-align:left;
}

.m-table tr:first-child td, 
.m-table tr:first-child th {
  border-top: 0 none;
}

.m-table th {
  color: #565656;
  font-size: 12px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: normal;
  background-color: #fafafa;
  vertical-align: bottom;
  border-bottom: 1px solid #ccc;
}

.m-table td, 
.m-table th {
  padding: 4px 5px 4px;
  vertical-align: top;
  border-bottom:1px solid #eee;
}
.m-table th{
  border-bottom:1px solid #aaa;
}

.no-border-table td, 
.no-border-table th {
  padding: 2px;
  vertical-align: top;
  border:none;
}

.color-box {
  height:16px;
  width: 16px;
  border: 1px solid black;
  display: inline-block;
}
@media only screen and (min-width: 768px){
  .table-block{
    font-size:12px;
    width:650px;
  }
  .attr-col{ width:230px;}
  .default-col{ width:100px;}
}

@media only screen and (min-width: 800px) {
  .table-block{
    font-size:14px;
    width:730px;
  }
}