div.prog-outer
{
  padding: 7px; 
  background: white;
  width: 80%; 
  max-width: 800px; 
  margin: 20px auto;
  border-radius: 10px; 
  min-height: 400px
}

table.prog
{
  border-collapse: collapse;
  border: thin solid #666;
  width: 88%;
  margin: 0 auto;
}

table.prog tr td
{
  vertical-align: top;
  padding: 5px;
  border: 1px solid #666;
  background: white;
  padding: 0 20px 10px 5px; 
  max-width: 500px
}

table.prog tr td.date { white-space: nowrap;}

table.prog tr.progdate
{
  background: white;
}

table.prog tr.olddate
{
  background: #ccc;
}

table.prog tr.olddate td
{
  background: #ccc;
  color: #666;
}


@media screen and (max-width: 500px)
{
  div.prog-outer 
  {
    padding: 2px; 
    margin: 5px 0;
    width: 95%; 
    width: calc(100% - 4px);
  }
  table.prog 
  { 
    width: 95%; 
    border: none;
  }
  table.prog tr td { display: block; border: none;}
  table.prog tr td:first-child 
  { 
    font-weight: bold; 
    border-top: 2px solid #ccc;
    border-left: none;
    border-right: none;
  }
}