@charset "utf-8";

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

   Calendar Style Sheet
   Author: Lillian Walker
   Date: 11/10/2025  
   Filename: lht_tables.css
*/

/* ===============================
   Mobile Styles: 0px to 640px 
   ===============================*/

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

  /*Display structural table elements as blocks */
  table,
  tbody,
  tr,
  td,
  th,
  caption {
    display: block;
  }

  /*Hide the <h1> elements inside the table header */
  thead h1 {
    display: none;
  }

  /*Style the table caption */
  caption {
    background-color: #666; /* medium gray */
    color: white;
    font-size: 1.5em;
    line-height: 2em;
    text-align: center;
  }

  /* Display table cells in two columns */
  td, th {
    width: 50%;
    float: left;
    box-sizing: border-box;
  }

  /* Style every data cell */
  td {
    border: 1px dotted gray;             /* 1-pixel dotted gray border */
    color: rgb(11, 12, 145);             /* Text color */
    position: relative;                  /* Relative positioning */
    padding-left: 40%;                   /* Left padding */
    min-height: 40px;                    /* Minimum height */
  }

  /* Style odd-numbered table rows */
  tr:nth-of-type(odd) {
    background-color: rgb(255, 235, 178);  /* Light gold background */
    border: 2px solid gray;                /* 2-pixel solid gray border */
  }

  /* Insert data-date attribute text before each cell */
  td::before {
    content: attr(data-date);   /* Inserts the text from the data-date attribute */
    position: absolute;         /* Absolute positioning within the cell */
    top: 0;
    left: 0;                    /* (0,0) coordinates */
    width: 40%;                 /* Width 40% of the cell */
    padding: 5px;               /* 5 pixels padding */
    box-sizing: border-box;     /* Ensures padding fits within width */
  }
}

/* ===============================
   Tablet and Desktop Styles: 0px to 641px 
   ===============================*/
   table {
  background-image: url("lht_photo1.png");  /* background image */
  background-repeat: no-repeat;             /* prevent tiling */
  background-position: bottom right;        /* place in bottom-right corner */
  background-size: 40%;                      /* set image width to 40% */
  
  border: 6px double rgb(154, 64, 3);       /* 6-pixel double border */
  border-collapse: collapse;                /* collapse table borders */
  
  margin: 20px auto;                        /* 20px top/bottom, auto left/right */
  
  table-layout: fixed;                       /* fixed layout for table content */
  width: 85%;                                /* table width 85% */
}
th, td {
  border: 1px solid gray;       /* 1-pixel solid gray border */
  font-size: 0.85em;            /* font size */
  font-weight: normal;           /*  normal font weight */
  padding: 5px;                  /* padding space */
  vertical-align: to
}
td {
  background-color: rgba(171, 171, 171, 0.6);  /*  semi-transparent gray background */
  color: rgb(11, 12, 145);                     /*  text color */
}
td[data-date*="Sep"] {
  background-color: rgba(232, 214, 148, 0.6);  /*  semi-transparent background */
  box-shadow: inset 0 0 20px gray;             /*  gray inset shadow with 0,0 offset and 20px blur */
}
caption {
  caption-side: top;        /*  display at the top of the table */
  text-align: center;       /*  center the caption text */
  padding-bottom: 10px;     /*  10 pixels bottom padding */
  font-size: 1.2em;         /*  font size */
  letter-spacing: 3px;       /*  letter spacing */
}
thead th {
  background-color: rgb(154, 64, 3);  /* dark orange/brown background */
  color: white;                       /* white text color */
}