/* Main Page Layout 
   ---------------- */

#divPageContent {
    max-width: 670px;
    width: 100%;
    margin: 0px auto 0px auto;
    text-align: center;
}

/* Shared Table Styles
   ------------------- */

.styleTblHeader {
    font-weight: bold;
    font-size: 16px;
    color: Navy;
}

/* Horizontal-scroll safety net. If a table still can't fit (e.g. a very
   narrow phone in portrait), this lets the user swipe it sideways instead
   of having the right edge silently clipped off. */
.tableScroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Schedules Table 
   --------------- */

#tblSchedule {
    max-width: 670px;
    width: 100%;
    margin: 0px auto 0px auto;
    font-size: 12px;
    border: 1px solid #000000;
    border-collapse: separate;
    border-spacing: 4px;
    background-color: #a3ddff;
    border-width: medium;
    border-color: #a661bf;
}

#tblSchedule td {
    padding: 5px;
}

/* The weekend columns. Every Saturday / Sunday cell (header row, the
       "Office Closed" row, and the two tall rowspan filler cells) carries
       this class so they can be switched off as a unit.
       NOTE: nth-child() can NOT be used here -- the rowspans mean the first
       cell in rows 4-6 is Monday, not Sunday. */
.wknd {
}

/* Mobile-only line that replaces the hidden weekend columns. */
.wkndNote {
    display: none;
    font-size: 12px;
    font-weight: bold;
    color: Navy;
    margin: 6px auto 0px auto;
}

/* this is for the list of building permits */
.ulAZBuildingPermits {
    list-style-position: inside;
    padding: 2.5px 0px 0px 4px;
    margin: 0px auto;
    list-style-type: none; /*circle*/
}

.ulAZBuildingPermits li {
    padding: 0px;
    text-align: left;
    margin: 2px 0px;
}
.ulAZBuildingPermits li span {
    /* so I can adjust the distance between the li text and the symbol */
    /* margin-left:-14px; */
}

/* Holidays Table 
   -------------- */

#tblHolidays {
    /*width: 550px;*/
    margin: 0px auto 0px auto;
    font-size: 12px;
    border: 1px solid #000000;
    border-collapse: separate;
    border-spacing: 4px;
    background-color: #a3ddff;
    border-width: medium;
    border-color: #a661bf;
}
#tblHolidays td {
    padding: 5px;
}

.tblHolidays_header {
    font-weight: bold;
    font-size: large;
    background-color: #CCCCFF;
}

.tblHolidays_tdHoliday {
    font-weight: bold;
    background-color: #ffffcc;
    width: 170px;
}

.tblHolidays_tdDayOf1 {
    font-weight: bold;
    background-color: #ccffff;
}

.tblHolidays_tdDayOf2 {
    font-weight: bold;
    background-color: #c9ffc9;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tier 1 -- under 700px: drop the Saturday and Sunday columns.
   That frees roughly 210px and leaves a clean Mon-Fri grid.
   The inline width: styles on the <td>s are overridden here so the
   five remaining columns can share the space. */
@media (max-width: 700px) {

    .wknd {
        display: none !important;
    }

    .wkndNote {
        display: block;
    }

    #tblSchedule {
        border-spacing: 3px;
    }
    #tblSchedule td {
        width: auto !important;
        padding: 4px 3px;
    }
}

/* Tier 2 -- under 480px: tighten type so five columns still read
    on a phone in portrait. */
@media (max-width: 480px) {

    #tblSchedule {
        font-size: 10px;
        border-spacing: 2px;
    }

    #tblSchedule td {
        padding: 3px 2px;
    }

    #tblSchedule ul.ulAZBuildingPermits {
        padding-left: 0px;
    }

    #tblHolidays {
        font-size: 11px;
    }

    .tblHolidays_tdHoliday {
        width: auto;
    }

    .tblHolidays_header {
        font-size: medium;
    }
}