/* #region Set Color Scheme */
h1 {
    color: slategray;
}
h2 {
    color: darkblue;
}
h3 {
    color: darkred;
}
h4 {
    color: darkslategray;
}
h5 {
    color: darkblue;
}
.banner {
    background-color: darkred;
}

.footer {
    background-color: darkred;
}
#actionMenu h2 {
    color: darkred;
}

#actionMenu a {
    background-color: darkred;
}
#menuLeft h2 {
    color: darkred;
}
#menuLeft a, #menuTop a {
    background-color: darkred;
}
/* #endregion */

/* #region Public.aspx page contents */
.publicPage {
    width: 98%;
    margin-left: 1%;
    background-color: transparent;
}
.publicLeft {
    width: 24%;
    border: none;
}
.publicCenter {
    width: 50%;
    border: none;
}
.publicRight {
    width: 24%;
    border: none;
}
.publicSubTitle {
    display: block;
    color: gray;
    font-size: 150%;
}
.publicNews {
    border: solid 1px gray;
    padding: 2%;
    background-color: beige;
    color: black;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
}
.publicText {
    color: black;
    background-color: white;
    border: solid 1px gray;
    padding: 10px;
}
.publicTable {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.publicRow {
    border: solid 1px gray;
    background-color: white;
}
    .publicRow:hover {
        background-color: paleturquoise;
        border: solid 2px blue;
        text-decoration: underline;
        cursor: pointer;
    }
.publicLink {
    text-decoration: none;
    border: solid 1px gray;
}
    .publicLink:hover {
        border: solid 2px blue;
        text-decoration: none;
        cursor: pointer;
        background-color: aliceblue;
    }
.publicPhoto, .publicWelcome {
    display: block;
    margin-top: 40px;
    min-width: 400px;
    max-width: 600px;
    border: none;
    object-fit: cover;
}
.publicWelcome {
    min-width: 0;
    max-width: 600px;
    width: 100%;
    object-fit:scale-down;
}
    .publicPhoto:hover, .publicWelcome:hover {
        cursor: zoom-in;
        transition: transform 1s;
        transition-delay: 1s;
        transition-timing-function: ease-in-out;
        transform: scale(2);
        transform-origin: top right;
    }
.publicDivision {
    padding: 10px 50px 10px 50px;
    text-align: center;
    vertical-align: middle;
    border: none;
}
.publicDivisionCode {
    font-size: 200%;
    color: darkred;
}
.publicDivisionName {
    font-size: 150%;
    color: darkblue;
}
    .publicDivision a {
        color: darkblue;
    }
.publicZone {
    padding: 10px 50px 10px 50px;
    font-size: 150%;
    color: darkblue;
    text-align: center;
    vertical-align: middle;
    border: none;
}
    .publicZone a {
        color: darkblue;
    }
.publicClubList {
    padding: 10px 0 10px 50px;
    font-size: 150%;
    color: darkblue;
    text-align: left;
    vertical-align: middle;
    border: none;
}
.publicClubTable {
    padding-top: 10px;
    font-size: 120%;
    color: darkblue;
    text-align: center;
    vertical-align: middle;
    border: none;
}
    .publicClubList a, .publicClubTable a {
        color: darkblue;
    }
.publicChampionship {
    padding: 20px 0 20px 50px;
    font-size: 150%;
    text-align: left;
    vertical-align: middle;
    border: none;
}
/* #endregion */

/* #region Variable width Table */
ul.tblEvents {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

ul.tblDivision {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

ul.tblZone {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

ul.tblClub {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

    ul.tblEvents li, ul.tblDivision li, ul.tblZone li, ul.tblClub li {
        border: solid 1px gray;
        background-color: white;
        margin: 0;
        padding: 0;
        justify-items: center;
    }

        ul.tblEvents li:hover, ul.tblDivision li:hover, ul.tblZone li:hover, ul.tblClub li.GotSite:hover {
            border: solid 2px blue;
            background-color: aliceblue;
            text-decoration: none;
            cursor: pointer;
        }

    ul.tblEvents a:hover, ul.tblDivision a:hover, ul.tblZone a:hover, ul.tblClub a:hover {
        text-decoration: none;
    }

.tblEventItem, .tblDivisionItem, .tblZoneItem, .tblClubItem {
    width: 100%;
    table-layout: auto;
    text-align: center;
    vertical-align: top;
}

/* #endregion */

/* #region List of Divisions on Public page */
.divDivision {
    border: none;
    padding: 1%;
    background-color: white;
}

.divisionList {
    table-layout: auto;
    border-collapse: collapse;
    width: 90%;
    margin-left: 5%;
}

.divisionRow {
    border: solid 1px gray;
}

    .divisionRow a {
        color: darkblue;
    }

    .divisionRow:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        color: darkblue;
        text-decoration: underline;
        cursor: pointer;
    }

.divisionLogo {
    display: block;
    padding: 10px;
}

    .divisionLogo img {
        max-width: 150px;
        border: none;
        padding: 10px;
    }

.divisionName {
    font-size: 150%;
    color: darkblue;
    text-align: center;
    vertical-align: middle;
}
/* #endregion */

/* #region Division Page */
.divisionLeft {
    width: 24%;
    border: none;
}
.divisionCenter {
    width: 40%;
    border: none;
}
.zoneList {
}
.zoneRow {
    border: solid 1px gray;
}
    .zoneRow td {
        color: darkblue;
        font-size: 150%;
    }
    .zoneRow a {
        color: darkblue;
    }
    .zoneRow:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        color: darkblue;
        text-decoration: underline;
        cursor: pointer;
    }
.divisionRight {
    width: 23%;
    border: none;
}
/* #endregion */

/* #region Zone Page */
.zoneLeft {
    width: 24%;
    border: none;
}
.zoneCenter {
    width: 50%;
    border: none;
}
.clubList {
}
.clubRow {
    border: solid 1px gray;
}
    .clubRow td {
        color: darkblue;
        font-size: 150%;
    }
    .clubRow a {
        color: darkblue;
    }
    .clubRow:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        color: darkblue;
        text-decoration: underline;
        cursor: pointer;
    }
.zoneRight {
    width: 23%;
    border: none;
}
/* #endregion */

/* #region Member Sign-up */
.divSignup {
    padding: 10px;
    text-decoration: none;
    border: solid 1px gray;
    background-color: aliceblue;
    text-align: center;
}
    .divSignup:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        cursor: pointer;
    }
    .divSignup a:hover {
        text-decoration: none !important;
    }
/* #endregion */

/* #region Club Table for Zone page*/
.tblClub {
    table-layout: auto;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

.tblClubRow, .tblClubRowNoLink {
    border: solid 1px gray;
    background-color: white;
    color: black;
}

    .tblClubRow:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        cursor: pointer;
    }

    .tblClubRow a:hover {
        text-decoration: underline;
    }

.tblClubLogo, .tblClubNoLogo {
    border: none;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}
    .tblClubLogo:hover {
        text-decoration: none !important;
    }
    .tblClubLogo img {
        max-width: 100px;
        max-height: 100px;
        border: none;
    }

.tblClubNoLogo {
    padding: 0;
}

.tblClubLink {
    padding: 5px;
    vertical-align: middle;
    border: none;
    color: black;
    font-size: 90%;
}
    .tblClubLink a {
        color: black;
        text-decoration: none;
    }

.tblClubNews {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: solid 1px gray;
    padding: 3px;
}

.tblClubNewsText {
    visibility: hidden; /* Hidden by default */
    border: solid 1px gray;
    background-color: beige;
    color: black;
    text-align: left;
    font-size: 80%;
    padding: 10px;
    width: 500px;
    position: absolute;
    left: 100px;
    top: -10px;
    z-index: 1; /* Ensure tooltip is displayed above content */
}

.tblClubNews:hover .tblClubNewsText {
    visibility: visible;
}
/* #endregion */

/* #region Event table as a LIST */
.linkPhoto  {
    border: solid 1px gray;
}
    .linkPhoto:hover {
        border: solid 2px blue;
        cursor: pointer;
    }
.tblEventList {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

.tblEventHeaderRow {
    border: solid 1px gray;
    background-color: white;
    color: darkred;
    font-size: 120%;
}
.tblEventHeaderType, .tblEventHeaderName, .tblEventHeaderWhere, .tblEventHeaderStart {
    color: darkred;
    background-color: gainsboro;
    font-size: 90%;
    padding: 5px 5px 1px 5px;
    text-align: left;
}
.tblEventHeaderType {
    width: 10%;
}
.tblEventHeaderName {
    width: 40%;
}
.tblEventHeaderWhere {
    width: 30%;
}
.tblEventHeaderStart {
    width: 20%;
}
.tblEventRow {
    border-top: solid 1px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    background-color: white;
    color: black;
}
    .tblEventRow:hover {
        border: solid 2px blue;
        background-color: lightcyan;
        cursor: pointer;
    }
.tblEventType, .tblEventName, .tblEventWhere, .tblEventStart {
    padding: 15px 5px 15px 5px;
    text-align: left;
    font-size: 120%;
    font-weight: lighter;
    vertical-align: middle;
    table-layout: fixed;
    border-collapse: collapse;
}
    .tblEventType a, .tblEventName a, .tblEventWhere a, .tblEventStart a {
    color: darkblue;
    text-decoration: none !important;
}
    .tblEventType:hover, .tblEventName:hover, .tblEventWhere:hover, .tblEventStart:hover {
        text-decoration: none !important;
    }
.tblEventType {
    width: 10%;
}
.tblEventName {
    width: 40%;
}
.tblEventWhere {
    width: 30%;
}
.tblEventStart {
    width: 20%;
}
.tblEventSelect {
    font-size: 110%;
    padding: 2px 5px 0 5px;
    -webkit-text-fill-color: black;
    opacity: 1;
}
ul.tblEventGrid {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 305px));
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
    ul.tblEventGrid a:hover {
        text-decoration: none !important;
    }
    ul.tblEventGrid li {
        border: solid 1px gray;
        background-color: white;
        color: darkblue;
        font-size: 110%;
        text-align: center;
        padding: 5px;
    }
        ul.tblEventGrid li:hover {
            border: solid 2px darkblue;
            background-color: lightcyan;
            cursor: pointer;
        }
/* #endregion */