/* CSS Document */
.timetable { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */

.timetable td, .timetable th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
    font-size: 13px;
    line-height: 16px;
    vertical-align: top;
    font-weight: normal;
}

.timetable th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
  text-transform: uppercase;
}

.timetable tbody tr td:nth-of-type(1) {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold; 
}

.timetable em {
  color: #666666;
  font-weight:normal !important;
}


.timetable td p {
  margin:0px 0 6px 0;
  text-align: left;
  font-size: 13px;
  line-height: 16px;
}

.timetable thead td {
  background-color: #333 !important;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    .timetable table, .timetable thead, .timetable tbody, .timetable th, .timetable td, .timetable tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    .timetable thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .timetable tr { border: 1px solid #ccc;   margin-top: 5px;}
    
    .timetable td { 
        /* Behave  like a "row" */
        border-left: none;
        border-top: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    
    
    .timetable td { 
        /* Behave  like a "row" */
          border-left: none;
			border-top: none;
	  border-bottom: 1px solid #fff;
	  position: relative;
	  padding-left: 30%;
	  font-size: 14px;
	  line-height: 18px;
    }
    
    .timetable td p {
		margin: 0px 0 6px 0;
		text-align: left;
		font-size: 14px;
		line-height: 18px;
	}
    
    .timetable td.classtitle{ 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 0%; 
    }
    
    .timetable 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
    */
    
    .timetable td:nth-of-type(1):before { content: "Class";font-weight:bold; }
    .timetable td:nth-of-type(2):before { content: "Mon"; font-weight:bold;}
    .timetable td:nth-of-type(3):before { content: "Tues"; font-weight:bold;}
    .timetable td:nth-of-type(4):before { content: "Wed"; font-weight:bold;}
    .timetable td:nth-of-type(5):before { content: "Thurs"; font-weight:bold;}
    .timetable td:nth-of-type(6):before { content: "Fri"; font-weight:bold;}
    .timetable td:nth-of-type(7):before { content: "Sat"; font-weight:bold;}
    .timetable td:nth-of-type(8):before { content: "Sun"; font-weight:bold;}
    
}