table.cinereousTable {
  border: 2px solid #333333;
  background-color: #FFFFFF;
  width: 400px;
  text-align: left;
}

table.cinereousTable tr {
  border: 1px solid #555555;
}

table.cinereousTable th {
  font-size: 14px;
  font-weight: bold;
  //color: #FFFFFF;
  text-align: right;
  padding-left: 4px;
  padding-right: 4px;
 // border-left: 2px solid #555555;
}

table.cinereousTable td {
//  border: 1px solid #555555;
  padding-left: 4px;
  padding-right: 4px;
}

table.cinereousTable tbody td {
  font-size: 12px;
  width: 260px;
}
table.cinereousTable tr:nth-child(even) {
 // background: #FFFFFF;
 background: #fff8dd;
}
table.cinereousTable thead {
 // background: #555555;
 // background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #555555 100%);
 // background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #555555 100%);
 // background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #555555 100%);
}

table.cinereousTable thead th{
  border-left: none;
    text-align: center;
  border-left: 2px solid #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  color: #000000;  
}

table.cinereousTable thead td {
  font-size: 14px;
  font-weight: bold;
//  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}

table.cinereousTable tfoot {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background: #555555;
  background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #555555 100%);
  background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #555555 100%);
  background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #555555 100%);
}
table.cinereousTable tfoot td {
  font-size: 12px;
}

td.conditionMonitor {
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 20px;
  font-size: 8px;
}

td.damageBox {
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 10px;
  font-size: 8px;
}








* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1240px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 820px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}


.npc {
  padding: 10px;}