@charset "utf-8";

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

   Calendar Style Sheet
   Author: Kody Martin
   Date:   11/7/25

   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 {
   background-color: #888;
   color: white;
    font-size: 1.5em;
    line-height: 2em;
}

td {
   border: 1px dotted gray;
   color: rgb(11, 12, 145);
   position: relative;
   padding-left: 40%;
   min-height: 40px;
}

tr:nth-of-type(odd) {
   background-color: rgb(255, 235, 178);
   border: 2px solid gray;
}

td::before{
   content: attr(data-data);
   position: absolute;
   top: 0;
   left: 0;
   width: 40%;
   padding: 5px;
}
}


/* =============================================
   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;
      table-layout: fixed;
      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{
      background-color: rgba(171, 171, 171, 0.6);
      color: rgb(11, 12, 145);
   }
   
     td[data-date*="Sep"] {
    background-color: rgba(232, 214, 148, 0.6);
    box-shadow: inset 0 0 20px gray;
  }

  caption {
    caption-side: top;
    text-align: center;
    padding-bottom: 10px;
    font-size: 1.2em;
    letter-spacing: 3px;
  }

  thead th {
    background-color: rgb(154, 64, 3);
    color: white;
  }
}