@charset "utf-8";

/*
   New Perspectives on HTML and CSS, 8th Edition
   Tutorial 6
   Case Problem 2

   Calendar Style Sheet
   Author: 
   Date:   

   Filename:   lht_tables.css

*/

/* ===============================
   Mobile Styles: 0px to 640px 
   ===============================
*/
@media screen and (max-width:640px) {
   table,
   tbody,
   tr,
   td,
   th,
   caption {
      display:block;
   }


thead,
h1 {
   display:none;
}
caption {
   color:white;
   background-color: rgb(51,51,51);
   font-size: 1.5em;
   line-height: 2;
}
td {
   border:1px dotted gray;
   color:rgb(11,12,145);
   position:relative;
   padding-left: 40%;
}
tr:nth-of-type(odd) {
   background-color: rgb(255,235,178);
   border: 2px solid gray;
}
td:before {
   content: attr(data-date);
   position: absolute;
   top:0px;
   left:0px;
   padding: 5px;
   width: 40%;
}
}

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/

@media screen and (min-width: 641px) {
   table {
      background: url(lht_photo1.png) no-repeat bottom right / 40%;
      border: 6px double rgb(154, 64, 3);
      border-collapse: collapse;
      margin: 20px auto;
      width: 85%;
   }

   th,
   td {
      border: 1px solid gray;
      font-size: 0.85em;
      font-weight: normal;
      padding: 5px;
      vertical-align: top;
      width: 14.28%;
      word-wrap: break-word;
   }

   td {
      color: rgb(11, 12, 145);
      background-color: rgba(171, 171, 171, 0.6);
   }

   td[data-date~="Sep"] {
      background-color: rgba(232, 214, 148, 0.6);
      box-shadow: inset 0px 0px 20px gray;
   }
   caption {
      caption-side: top;
      text-align:center;
      padding-bottom: 10px;
      font-size:1.2em;
      letter-spacing:3px;
   }
   thead th {
      color: white;
      background-color: rgb(154,64,3);
   }
}