@import url(//fonts.googleapis.com/css?family=Oswald);
table.sample-a,
table.sample-b,
table.sample-c {
  margin: 10px auto;
  border-collapse: collapse;
}

table.sample-a td,
table.sample-a th,
table.sample-b td,
table.sample-b th {
  padding: 0;
  background-color: #fff;
  border: 1px solid #999;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

table.sample-a th,
table.sample-b th {
  background-color: #444;
  color: #fff;
  text-align: center;
}

table.sample-a td,
table.sample-a th {
  font-size: 12.5px;
}
table.sample-a .hl1 {
  background-color: #40b955;
}
table.sample-a .hl2 {
  background-color: #f00;
}

table.sample-a td.hlrow,
table.sample-b td.hlrow {
  background-color: #40b955;
}

table.sample-a td.hlcol,
table.sample-b td.hlcol {
  background-color: #3f70cb;
}

table.sample-a td.hlrow.hlcol,
table.sample-b td.hlrow.hlcol {
  background-color: #f00;
}

table.sample-a th.hlrow,
table.sample-a th.hlcol {
  color: #f00;
}

table.sample-b td,
table.sample-b th {
  padding: 2px 3px;
  white-space: nowrap;
}
table.sample-b td {
  width: 50px;
  text-align: right;
}
table.sample-b td.hl {
  background-color: #eddea0;
}
table.sample-b th.hlrow,
table.sample-b th.hlcol {
  background-color: #ab9632;
}

table.sample-c td,
table.sample-c th {
  padding: 2px;
  border: 1px solid #999;
  vertical-align: middle;
  font-size: 12.5px;
  font-family: 'Oswald', sans-serif;
  line-height: 1.1;
}
table.sample-c th,
table.sample-c thead td {
  background-color: #444;
  color: #fff;
  font-weight: normal;
}
table.sample-c thead th {
  width: 100px;
  font-size: 14px;
  text-align: center;
}
table.sample-c tbody th {
  white-space: nowrap;
  text-align: right;
}
table.sample-c tbody td {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZDBkZCIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjY2NlMWVjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b7d0dd), color-stop(60%, #cce1ec));
  background-image: -moz-linear-gradient(#b7d0dd 0%, #cce1ec 60%);
  background-image: -webkit-linear-gradient(#b7d0dd 0%, #cce1ec 60%);
  background-image: linear-gradient(#b7d0dd 0%, #cce1ec 60%);
  color: #000;
  vertical-align: top;
}
table.sample-c tbody td.hlrow {
  background-image: none;
  background-color: #7ebee0;
}
table.sample-c tbody td.hlcol {
  background-image: none;
  background-color: #a2c1d2;
}
table.sample-c tbody td.hlrow.hlcol {
  background-color: #5ecfd9;
}
table.sample-c tbody th.hlrow,
table.sample-c thead th.hlcol {
  background-color: #99a394;
}

.sample-label {
  width: 5em;
  height: 1.5em;
  margin: 3px auto;
  padding: 3px 10px;
  background-color: #444;
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.sample-caption {
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

.sample-col-r {
  float: right;
  margin: 0 0 10px 10px;
}
.sample-col-r .sample-caption {
  margin-top: 0;
  padding: 1px 3px;
  background-color: #ccc;
}
.sample-col-r:nth-of-type(2) {
  margin-top: 2em;
  text-align: right;
}
.sample-col-r:nth-of-type(2) .sample-label {
  margin: 10px 0 0 auto;
}
.sample-col-r:nth-of-type(2) .sample-caption {
  display: inline-block;
}

.sample-col-row,
ul:first-of-type + * {
  clear: both;
}

/* ==================================== sample-01 */
#sample-01-wrap {
  margin: 50px 5px;
  text-align: center;
}
#sample-01-wrap ul {
  display: inline-block;
}
#sample-01-wrap li {
  font-size: 1.2em;
  text-align: left;
}
#sample-01-wrap li span {
  font-weight: bold;
}

table#sample-01 {
  margin: 10px auto;
  text-align: left;
}

/* ==================================== sample-03 */
table#sample-03 td {
  cursor: pointer;
}
table#sample-03 td.hit:before {
  /* for Chrome */
  -moz-transition-property: none;
  -o-transition-property: none;
  -webkit-transition-property: none;
  transition-property: none;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1ad8dd;
}
table#sample-03 td.hit.res:before {
  /* NOT &.hit:before.res */
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  background-color: rgba(26, 216, 221, 0);
}

/* ==================================== sample-04 */
table#sample-04-nest {
  margin: 0;
}
table#sample-04-nest td {
  width: 10px;
  height: 10px;
}
table#sample-04-nest td:not(.hl1):not(.hl2) {
  background-color: transparent;
}

/* ==================================== sample-05 */
#sample-05-label {
  width: 20em;
}

/* ==================================== sample-07 */
table#sample-07 {
  background-color: #fff;
}
table#sample-07 td,
table#sample-07 th {
  position: relative;
  border: 1px solid #ddd;
}
table#sample-07 td.hlcol,
table#sample-07 th.hlcol {
  color: #00f;
}
table#sample-07 td {
  background-color: transparent;
}
table#sample-07 th {
  background-color: #888;
  width: 7em;
}
table#sample-07 th div {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 1px;
  /* td{border-width} */
  margin-top: -5px;
  /* - height / 2 */
  height: 10px;
  background-color: #85d6ed;
  display: none;
}