@charset "utf-8";

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

   Calendar Style Sheet
   Author: Jesse Applewhite
   Date:   11/08/2025d

   Filename:   lht_tables.css

*/

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

@media only screen and (max-width: 640px){
    table, tbody, tr, td, th, caption{
        display: block;
    }
    thead h1 {
        display: none;
    }
    table caption {
        background-color: rgb(51, 51, 51);
        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(date-date);
        position: absolute;
        left: 0;
        top: 0;
        width: 40%;
        padding: 5px;
    }
}
    



/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/
    @media only screen and (min-width: 641px) {
        table{
            background: url(lht_photo1.png) bottom right no-repeat;
            background-size: 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: 12.28%;
            word-wrap: break-word;
        }
        td {
            background-color: rgba(171, 171, 171, 0.6);
            color: rgb(11, 12, 145);
        }
                td[data-date*=sept] {
            background-color: rgba(232, 214, 148, 0.6);
            box-shadow: inset 0 0 20px grey;
        }
        caption {
            caption-side: top;
            text-align: center;
            padding-bottom: 10px;
            font-size: 1.2em;
            letter-spacing: 3px;
        }
        th{
            background-color: rgb(154, 64, 3);
            color: white;
        }
    }