@charset "UTF-8";
/* CSS Document */

#MapSection {
    display: flex;
    height: calc(100vh - 230px - 65px);
}
    #MapList {
        flex-basis: 20%;
        min-width: 240px;
    }
        .SubMenuLink {
            background-color: #f7f7f7;
            margin: 3px;
            cursor: pointer;
            height: 20px;
        }
        .SubMenuContainer {
            transition: height 1s ease-in-out;
            overflow: auto;
            max-height: calc(100% - 145px);
        }
            .SubMenuContainer.ClosedMenu { height: 0px; overflow: hidden; }
            .SubMenuContainer.OpenMenu { height: calc(100% - 145px); overflow: auto; }
        .SubMenu {
            height: auto;
            padding-left: 14px;
            width: 200px
        }
            .SubMenuContainer p {
                margin: 10px 0;
                line-height: 14px;
                font-size: 12px;
            }
    #MapArea {
        flex-basis: 80%;
        border-right: 1px solid #c2c2c2;
        border-left: 1px solid #c2c2c2;
    }
    .InfoWindowContent {
        color: #666666;
    }
        .InfoWindowContent p {
            margin-bottom: 6px;
        }
        .InfoWindowContent p.Title {
            color: #517676;
            text-transform: uppercase;
        }
        .InfoWindowContent p.MoreInfo {
            text-align: right;
        }
        .pip {
            width: 10px;
            height: 10px;
            vertical-align: -1px;
        }
        .menu-pip {

        }
        /* this is to force some styling on the google maps pips */
        #MapArea img[src*="pip"] {
            width: 12px !important;
            height: 12px !important;
            padding: 2px !important;
            animation: PipAnimation 3s infinite;
        }
#PageFooter {
    margin-top: 0;
}
@keyframes PipAnimation {
    0%   { transform: scale(1.0); }
    25%  { transform: scale(1.0); }
    50%  { transform: scale(1.2); }
    75%  { transform: scale(1.2); }
    100% { transform: scale(1.0); }
}

/* *********************************************** MEDIUM */
@media only screen and (max-width: 850px) {
}

/* *********************************************** SMALL */
@media only screen and (max-width: 500px) {
    #MapSection {
        height: calc(100vh - 65px);
    }
        #MapList {
            flex-basis: 100%;
        }
        #MapArea {
            display: none;
        }
}