/* 
Generic Styling, for Desktops/Laptops 
*/
table.responsive { 
  width: 100%; 
  border-collapse: collapse;
  margin: 0 0 2em;
}
/* Zebra striping */
.responsive tr:nth-of-type(odd) { 
  background: #eee; 
}
.responsive th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
.responsive td,
.responsive th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

@media only screen and (max-width: 560px) {

  /* Force table to not be like tables anymore */
  table.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
    display: block; 
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .responsive thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .responsive tr { border: 1px solid #ccc; }
  
  .responsive tr + tr { border-top: 0 none; }
  
  .responsive td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
  }
  
  .responsive td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  */
  .responsive.course-list td:nth-of-type(1):before { content: "Course #"; }
  .responsive.course-list td:nth-of-type(2):before { content: "Title"; }
  .responsive.course-list td:nth-of-type(3):before { content: "Hours"; }

  .responsive.course-list-two-col td:nth-of-type(1):before { content: "Required Courses"; }
  .responsive.course-list-two-col td:nth-of-type(2):before { content: "Credits"; }

  .responsive.faculty td:nth-of-type(1):before { content: "Name"; }
  .responsive.faculty td:nth-of-type(2):before { content: "Title"; }
}