body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.IE8Fix {
    z-index: 100;
}

.small {
    font-size: 80%;
}

a {
    color: #006666;
    text-decoration: none;
    font-weight: 700;
}
    /*a:visited {
COLOR: #800080;
}*/
    a:hover {
        color: #0000cc;
        text-decoration: underline;
    }

.bannertxt {
    font-family: "Comic Sans MS", Sans-Serif;
    font-size: 200%;
    font-style: italic;
    font-weight: bold;
    background-color: #ccffff;
}

.bordertxt {
    color: #ffffff;
    background-color: #009999;
}

.footertxt {
    font-size: 10pt;
    color: #ffffff;
    background-color: #009999;
}

.formbox {
    border-right: #ff0066 3px dotted;
    border-top: #ff0066 3px dotted;
    border-left: #ff0066 3px dotted;
    border-bottom: #ff0066 3px dotted;
    background-color: #ffffcc;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.formgrid {
    text-align: left;
}

.leadin {
    font-family: "Comic Sans MS", Sans-Serif;
    font-size: 125%;
    margin: 8px;
}

.disclaimer {
    font-size: 75%;
}

.kickerbox {
    background-color: #ccffff;
    font-family: "Comic Sans MS", Sans-Serif;
    font-size: 125%;
    border-right: #009999 4px solid;
    border-top: #009999 4px solid;
    border-left: #009999 4px solid;
    border-bottom: #009999 4px solid;
}

.thead {
    font-weight: bold;
    text-align: center;
    background-color: #ccffff;
    border: 1px solid #009999;
}

.MenuStaItm {
    color: #000000;
    background-color: #FFFFCC;
    font-size: 80%;
    padding-left: 2px;
    padding-top: 2px;
    padding-right: 10px;
    border-right: #009999 2px solid;
    border-top: #009999 2px solid;
    border-left: #009999 2px solid;
    border-bottom: #009999 2px solid;
}

.MenuStaHov {
    color: #ffffff;
    background-color: #66CCCC;
    padding-left: 2px;
    padding-top: 2px;
    padding-right: 10px;
    border: 2px solid #009999;
}

table.MenuStaHov a:hover {
    text-decoration: none;
}

.MenuDynItm {
    color: #000000;
    background-color: #FFCCFF;
    font-size: 80%;
    padding: 2px;
    border: 2px solid #990099;
}

.MenuDynHov {
    color: #FFFFFF;
    background-color: #CC66CC;
    padding: 2px;
    border: 2px solid #990099;
    text-decoration: none;
}

table.MenuDynHov a:hover {
    text-decoration: none;
}

TABLE.links TD.external A.menu {
}

.tabs {
    position: relative;
    top: 1px;
    left: 10px;
}

.tab {
    border: solid 1px black;
    background-color: #eeeeee;
    padding: 2px 10px;
}

.selectedTab {
    background-color: white;
    border-bottom: solid 1px white;
}

.tabContents {
    border: solid 1px black;
    padding: 10px;
    background-color: white;
}

.plusone, .twitter, .fb-like {
    font-size: 1px;
    display: inline-block;
}
    /*.plusone, .twitter {
    font-size: 1px;
    display: inline-block;
}*/
    .fb-like iframe {
        width: 450px !important;
        height: 20px !important;
    }

.fb_reset {
    display: inline;
}
/* This gets Google to fall into place */
.social {
    font-size: 1px;
}

    /* This gets Facebook to fall into place */
    .social iframe {
        vertical-align: middle;
    }

    /* Set an optional width for your button wrappers */
    .social span {
        display: inline-block;
        width: 110px;
    }

    /* Adjust the widths individually if you like */
    .social .google {
        width: 75px;
    }

/*.nav-container2 { width:940px; margin:auto; height:30px;}*/
.nav-container2 {
    width: 95%;
    margin: auto;
    height: 30px;
}

.social-media-list {
    width: 393px;
}
/*xs, mobile*/
.social-media-list-xs {
    width: 320px;
}
/*4 buttons, 25% each*/
.social-media-list li {
    display: block;
    float: left;
    width: 25%;
    text-align: center;
    margin: 0 auto;
}
/*3 buttons, 33.3% each*/
.social-media-list-xs li {
    display: block;
    float: left;
    width: 33.3%;
    text-align: center;
    margin: 0 auto;
}

#column1-wrap {
    float: left;
    width: 100%;
}

#column1 {
    background-color: cyan;
    margin-right: 200px;
}

#column2 {
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
}

#clear {
    clear: both;
}

.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination-ys table > tbody > tr > td {
        display: inline;
    }

        .pagination-ys table > tbody > tr > td > a,
        .pagination-ys table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #dd4814;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            margin-left: -1px;
        }

        .pagination-ys table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            margin-left: -1px;
            z-index: 2;
            color: #aea79f;
            background-color: #f5f5f5;
            border-color: #dddddd;
            cursor: default;
        }

        .pagination-ys table > tbody > tr > td:first-child > a,
        .pagination-ys table > tbody > tr > td:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        }

        .pagination-ys table > tbody > tr > td:last-child > a,
        .pagination-ys table > tbody > tr > td:last-child > span {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        }

        .pagination-ys table > tbody > tr > td > a:hover,
        .pagination-ys table > tbody > tr > td > span:hover,
        .pagination-ys table > tbody > tr > td > a:focus,
        .pagination-ys table > tbody > tr > td > span:focus {
            color: #97310e;
            background-color: #eeeeee;
            border-color: #dddddd;
        }

.modalBackground {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
}

.modalPopup {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    width: 80%;
    height: 80%;
}

.truncate-link {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fullWidth {
    width: 100%;
}

/*#school-solid {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
    
    #school-solid:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }*/

.transparentHoverEffect {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

    .transparentHoverEffect:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

/*fb-comments fluid works OK on desktop, Safari and Firefox, but not Chrome and Edge, appears intermittent*/
/*.fb-comments, .fb-comments * {
    width: 100% !important;
}*/
/*.fb-comments, .fb-comments iframe[style] {
    width: 100% !important;
}*/
/*.fb-comments, .fb-comments iframe[style], .fb-comments span {
    width: 100% !important;
}*/

/*https://www.w3schools.com/cssref/css_selectors.asp*/

/*disable select, copy and paste, not effective on iPhone*/
/*body, html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/

.disableCopy {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.white-text {
    color: white;
}

    .white-text:hover {
        color: white; /* Ensures the text color remains white on hover */
    }

.white-link {
    color: white;
}

.fuse-sticky {
    min-height: 600px;
    position: sticky;
    top: 0;
}

.be-sticky {
    min-height: 600px;
    position: sticky;
    top: 300px;
}

.checkbox-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping onto new rows */
    gap: 20px; /* Space between each checkbox-value pair */
}

    .checkbox-row label {
        display: flex;
        align-items: center;
        gap: 5px; /* Space between the checkbox and its value */
    }

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map-canvas {
    height: 90%;
    width: 90%;
    margin: 0px;
    padding: 0px;
    float: left;
}

#googft-legend {
    background-color: #fff;
    border: 1px solid #000;
    font-family: Arial,sans-serif;
    font-size: 12px;
    margin: 5px;
    padding: 10px 10px 8px;
}

    #googft-legend p {
        font-weight: bold;
        margin-top: 0;
    }

    #googft-legend div {
        margin-bottom: 5px;
    }

.googft-legend-swatch {
    border: 1px solid;
    float: left;
    height: 12px;
    margin-right: 8px;
    width: 20px;
}

.googft-legend-range {
    margin-left: 0;
}

.googft-dot-icon {
    margin-right: 8px;
}

.googft-paddle-icon {
    height: 24px;
    left: -8px;
    margin-right: -8px;
    position: relative;
    vertical-align: middle;
    width: 24px;
}

.googft-legend-source {
    margin-bottom: 0;
    margin-top: 8px;
}

    .googft-legend-source a {
        color: #666;
        font-size: 11px;
    }

/*align="left" or style float:left; won't work for responsive ad*/
/*#horizontal {
            float: left;
        }*/
#verticalAdRight {
    float: right;
    width: 10%;
}

/*#floating-panel {*/
    /*position: absolute;*/
    /*top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}*/

#floating-panel {
    background-color: #fff;
    border: 1px solid #999;
    left: 25%;
    padding: 5px;
    /*position: absolute;*/
    top: 10px;
    z-index: 5;
}

/*for relative position to the map, add a container, https://www.w3schools.com/howto/howto_css_image_text.asp*/
/*#bettereducationDesktop {
    position: absolute;*/ /*and give absolute position to your text*/
    /*top: 500px;*/ /*//this top and left values can be taken as coordinates of image*/
    /*left: 200px;
}*/

#bettereducation {
    position: absolute;
    top: 50%; /* 50% of the height of the map */
    left: 20%; /* 20% of the width of the map */
    transform: translate(-50%, -50%); /* Center the text */
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Add a semi-transparent background */
    padding: 5px; /* Optional: Add padding for better visibility */
    font-size: 16px; /* Adjust font size for readability */
}

.well.with-stripe {
    border-left: 4px solid #337ab7;
    padding-left: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Default styling for desktop/larger screens (optional: allows image to float right) */
.image-container img {
    float: right; /* Keeps it on the same line and pushes it to the right */
    max-width: 300px;
}

/* CSS for mobile screens */
@media (max-width: 768px) { /* Adjust 768px to your desired breakpoint */
    .image-container img {
        float: none; /* Removes the floating behavior */
        display: block; /* Forces it to take its own line */
        margin-left: auto; /* Centers the image if it's smaller than the container */
        margin-right: auto;
        width: 100%; /* Makes it take full width for better mobile viewing */
        max-width: 300px; /* Ensures it doesn't get *too* large if the screen is huge */
    }
}

.vimeo-container {
    /* Sets the aspect ratio (16:9 for 100/56.25) */
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

    .vimeo-container iframe {
        /* Stretches the iframe to fill the container */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }