/*------------------------------------------------------------*/
/* site.master */

/* Header responsive layout */
@media (max-width: 1199px) {
    .header .logo {
        order: 1;
        margin-right: 0 !important;
    }

    .header .btn-getstarted {
        order: 2;
    }

    .header .navmenu {
        order: 3;
    }

    .header .clocks-container {
        order: 4;
        margin-left: auto !important;
    }

    /* Drop clocks to new row on very small screens */
    @media (max-width: 575px) {
        .header .container {
            flex-wrap: wrap;
        }

        .header .clocks-container {
            order: 5;
            width: 100%;
            justify-content: center;
            margin-top: 10px;
        }
    }
}

/* Custom Icons - matching Bootstrap Icons style */
.bi-qrz::before {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23666'%3E%3Cpath d='M8 1a4 4 0 0 0-4 4v.5H3V5a5 5 0 0 1 10 0v.5h-1V5a4 4 0 0 0-4-4z'/%3E%3Cpath d='M5.5 7a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-5zm0 4a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2z'/%3E%3Cpath d='M3 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm0-1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8.5 12.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H9.5v.5a.5.5 0 0 1-1 0v-1z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
}

.footer .social-links a:hover .bi-qrz::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='%23be2227'%3E%3Cpath d='M8 1a4 4 0 0 0-4 4v.5H3V5a5 5 0 0 1 10 0v.5h-1V5a4 4 0 0 0-4-4z'/%3E%3Cpath d='M5.5 7a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-5zm0 4a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2z'/%3E%3Cpath d='M3 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm0-1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8.5 12.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H9.5v.5a.5.5 0 0 1-1 0v-1z'/%3E%3C/g%3E%3C/svg%3E");
}

.bdiv {
    margin: 0 auto;
    max-height: 100%;
    text-align: center
}

    .bdiv img {
        max-height: 100%;
        max-width: 500px
    }

.dd {
    margin: 40px;
    padding: 40px;
    text-align: left
}

/*------------------------------------------------------------*/
/* pages - general classes */

/* Advertisement Placeholders */

.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

    .ad-placeholder::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
        animation: shimmer 3s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.ad-placeholder-content {
    position: relative;
    z-index: 1;
}

.ad-leaderboard {
    width: 100%;
    max-width: 728px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
}

.ad-sidebar {
    width: 100%;
    max-width: 300px;
    height: 600px;
}

.ad-footer {
    width: 100%;
    max-width: 728px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .ad-leaderboard, .ad-footer {
        max-width: 320px;
        height: 50px;
    }

    .ad-sidebar {
        max-width: 300px;
        height: 250px;
    }
}

/* Page Titles */
    
h1 {
    border-bottom: 2px solid #0066cc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Left Nav */

nav#left {
    background-color: #f0eee9;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    nav#left ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
        width: 100%;
    }

    nav#left li {
        margin-bottom: 15px;
    }

    nav#left a {
        text-decoration: none;
        color: #0066cc;
        font-weight: bold;
    }

        nav#left a:hover {
            text-decoration: underline;
        }

    nav#left .ad-placeholder {
        margin-top: 0 !important;
        align-self: flex-start;
    }

/*------------------------------------------------------------*/
/* /default.aspx */

.intro {
    margin: 20px auto;
    max-width: 72%
}

.salutation {
    font-size: 2em;
    margin: 20px auto;
    max-width: 72%
}

/*------------------------------------------------------------*/
/* /calendar/default.aspx */

.event-calendar {
    border-collapse: collapse;
    margin: 10px auto;
}

    .event-calendar th {
        background-color: #be2227;
        border: solid 1px #333;
        color: #fff;
        font-size: 1.1em;
        padding: 4px 8px;
        text-align: left
    }

    .event-calendar td {
        border: solid 1px #333;
        line-height: 1em;
        padding: 2px 8px;
        text-align: left;
        white-space: nowrap
    }

#timeRange label, #viewFilter label {
    margin-left: 7px;
}

/*------------------------------------------------------------*/
/* /blog/blog.aspx */

.float-right {
    float: right;      
    margin-left: 16px !important;
    margin-bottom: 10px;
}

.float-left {
    float: left;
    margin-right: 16px !important;
    margin-bottom: 10px;
}

/*------------------------------------------------------------*/
/* controls */

/* /cardmanager.ascx */

.card {
    background-color: #f0eee9;
}

.card-img-div {
    background-color: #fff;
    border-left: solid 1px #dcdcdc;
    height: 250px;
    justify-content: center;
    width: 250px;
}

.card-img {
    max-height: 250px;
    max-width: 250px;
    width: 250px;
}

/* /clock.ascx */

.clock {
    background-color: #f0eee9;
    border: solid 2px #be2227;
    border-radius: 6px;
    line-height: 1.0;
    margin: auto 1px;
    padding: 3px;
    text-align: center;
    width: 100px;
}

.clock-label {
    font-size: 0.9rem;
    font-weight: bold;
}

.clock-time {
    font-family: Consolas;
    font-size: 1.3rem;
    font-weight: bold;
}