/* --- 1. Global Page Base Defaults --- */
body, html {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
}

/* --- 2. Interactive Tooltips & Interactive Component Styles --- */
#dhtmltooltip {
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 1000;
    /* Legacy IE shadow filter left intact for historical fallback */
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135);
}
/****************************************************************************************/
.brightness-hover {
    filter: brightness(100%); 
    transition: filter 0.3s ease-in-out; 
}

.brightness-hover:hover {
    filter: brightness(120%);
}

/* Inline typography colors matched identically */
.color-red { color: #dc2626; font-weight: bold; }
.color-navy { color: #1e3a8a; font-weight: bold; }
.color-orange { color: #ea580c; font-weight: bold; }
/****************************************************************************************/
.tab { width: 100px; height: 40px; font-size: 20px; }
.w3-fda { background-color: #789FDA; color: #ffffff; }
input[type=number] { width: 100px; height: 36px; font-size: 28px; border: 2px ridge red; }
div.city input[type=button] { display: inline-block; width: 200px; height: 40px; font-size: 24px; }

/* Image Hover Transformations */
div.imghover img:hover { border: 1px solid black; transform: scale(1.7) rotateZ(-10deg); transition: 1s ease; }
div.imghover2 img:hover { border: 1px solid black; transform: scale(1.6) rotateZ(5deg); transition: 1s ease; }
div.imghover3 img:hover { border: 1px solid black; transform: scale(1.5) rotateZ(-5deg); transition: 1s ease; }
/****************************************************************************************/
/* --- 3. Typography Blocks & Color Accents --- */
.title2 { font-size: 120%; color: navy; text-shadow: 2px 2px 4px #000000; }
.text4 { font-size: 25px; text-align: left; }
.text1, .text2, .text3 {text-wrap:nowrap; white-space: nowrap;}
.text1 span { background-color: white;   }
.text1 span.active { background-color: #336696; }
.text2 span { background-color: #EBF6EC;  }
.text2 span.active { background-color: #3B3738; }
.text3 span { background-color: white; }
.text3 span.active { background-color: #24476B; }
/****************************************************************************************/
/* Legacy Layout Fallbacks */
.table { display: table; width: 100%; }
.tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }

/* --- 4. Anchors & Navigation State Styles --- */
a { text-decoration: none; color: #000000; }
a:visited { text-decoration: none; color: gray; }
a.small4 { text-decoration: none; color: #ffffff; font-size: 12px; }
a.small4:visited { text-decoration: none; color: black; font-size: 12px; }
a.small12 { text-decoration: none; color: black; font-size: 12px; }
a.small12:visited { text-decoration: none; color: gray; font-size: 12px; }

/* Consolidated Cloud Links */
a.cloud {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: #ffffff;
    background-color: #24476B;
    font-size: 200%;
}
a.cloud:visited { text-decoration: none; color: #ffffff; background-color: #24476B; font-size: 200%; }
a.cloud:hover, a.cloud:visited:hover { text-decoration: none; color: #24476B; background-color: #ffffff; }
a.cloud:active { text-decoration: none; color: #ffffff; background-color: #062B50; font-size: 200%; }

/* --- 5. Interactive Character Effects (FunnyText Animation Hooks) --- */
.charWrap { display: inline-block; position: relative; overflow: hidden; }
.funnyText span.left, .funnyText span.right, .funnyText span.top, .funnyText span.bottom { position: absolute; }
.funnyText .charWrap { transition: all 0.4s ease-in-out; }
.funnyText .charWrap .top { top: 0; }
.funnyText .charWrap .left { left: 0; }
.funnyText .charWrap .right { right: 0; }
.funnyText .charWrap .bottom { bottom: 0; }
.funnyText .character { overflow: hidden; display: inline-block; }
/****************************************************************************************/
/* Input Placeholder Standardized Rules */
::placeholder { color: deeppink; opacity: 1; }
:-ms-input-placeholder { color: deeppink; }
::-ms-input-placeholder { color: deeppink; }

/* --- 6. Form Module Interface Styles --- */
.election-form-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}
.election-flex-form {
    display: flex;
    align-items: center; 
    gap: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
.form-label { font-weight: 600; color: #334155; }
.form-input-number {
    height: 42px;
    width: 70px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.form-submit-btn {
    background-color: #24476B;
    color: #ffffff;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}
.form-submit-btn:hover { background-color: #1a334d; }
/****************************************************************************************/
/* --- 7. Desktop Layout Media Block & Content Sections --- */
.election-index-container {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    clear: both;
}
.election-links-box { display: inline-block; text-align: left; }

.media-section-container {
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 20px auto;
    padding: 0 15px;
    box-sizing: border-box;
}
.main-video-wrapper { width: 100%; margin-bottom: 25px; text-align: center; }
.main-video-wrapper video {
    width: 100%;
    max-width: 960px;
    height: auto;
    max-height: 550px;
    background-color: #000;
    display: block;
    margin: 0 auto;
}
.media-flex-row { display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start; }
.media-column-item { flex: 1; min-width: 0; box-sizing: border-box; }
.responsive-image { width: 100%; height: auto; display: block; border-radius: 4px; }
.video-responsive-box { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; }
.video-responsive-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-caption { font-size: 13px; color: #6b7280; margin-top: 8px; text-align: center; }
/****************************************************************************************/
/* --- 8. Books Showcase Grid Layout --- */
.elections-showcase-container {
    width: 100%;
    max-width: 960px;
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;
}
.books-responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    justify-items: center;
    align-items: flex-start;
    margin-bottom: 40px;
    width: 100%;
}
.book-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 160px; box-sizing: border-box; margin-bottom: 10px; }
.book-cover { width: 100%; height: auto; max-height: 240px; object-fit: contain; display: block; margin: 0 auto 6px auto; transition: filter 0.15s ease-in-out; }
.book-cover:hover { filter: brightness(90%); }
.pdf-badge { height: auto; width: auto; max-width: 45px; display: block; margin: 4px auto 8px auto; border: 0; }
.book-desc-link { text-decoration: none; display: block; margin-top: 4px; }
.book-caption { font-size: 11px; color: #6b7280; line-height: 1.3; text-align: center; display: block; }

.declaration-text-wrapper {
    width: 100%;
    max-width: 750px;
    margin: 30px auto;
    padding: 15px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    box-sizing: border-box;
}
/****************************************************************************************/
/* --- 9. Global Responsive Layout Media Breakpoints --- */
@media screen and (max-width: 768px) {
    .election-index-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 25px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        clear: both !important; 
        float: none !important; 
        z-index: 99 !important; 
    }
    .election-links-box {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
	

a.cloud:visited {text-decoration:none;color:#ffffff;background-color:#24476B;font-size:200%;}
a.cloud:hover {text-decoration:none;color:#24476B;  background-color: #ffffff;}
a.cloud:visited:hover {text-decoration:none;color:#24476B;  background-color: #ffffff;}
a.cloud:active {text-decoration:none;color:red;background-color:#062B50;font-size:200%;}
    a.cloud {text-decoration:none;color:#ffffff;background-color:#24476B;font-size:200%;
        display: block !important;
        width: 100% !important;
        padding: 12px 8px !important;
        margin-bottom: 12px !important;
        background-color: #24476B !important; /* Fixed typo string error 'x' */
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        box-sizing: border-box !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
		
    }
    .media-flex-row {
        flex-direction: column;
        gap: 25px;
    }
    .media-column-item {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .books-responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .declaration-text-wrapper {
        font-size: 13px;
        padding: 5px;
    }
}