/**
 * for this page, we want the first content (which is also bar shaped) snug to the navbar's bottom border
 * and to have a default biege BG color
 **/

.navbar {
    margin-bottom: 0;
}


/**
 * STATES TO WATCH
 **/

#statestowatch {
}

#statestowatch h2 {
    font-size: 17px;
}

#statestowatch .statestowatch-entry {
    width:300px;
    overflow: hidden;
    height: 105px;  /* contrived height to match 4 lines of text; too bad it's not white-space: nowrap, cuz then we could use text-overflow: ellipsis */

    padding: 0 10px;
}

#statestowatch .statestowatch-entry a:focus {
    /* border: 2px solid #80bdff; *//* does not work, nor does underline; A elemewnt is tiny and is not the same as the surrounding box */
    text-decoration: underline;
}

#statestowatch .statestowatch-entry .statestowatch-title {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 600;
}

#statestowatch .statestowatch-entry .statestowatch-title span.stateface {
    font-size: 20px;
    vertical-align: middle;
}

#statestowatch .statestowatch-entry .statestowatch-headline {
    font-family: Merriweather;
    font-size: 13px;
    font-weight: 300;
}


/**
 * THE MAIN BLURB AND THE BIG MAP
 **/

#blurbandmap {
}

#nationaloverviewmap {
    width: 100%;
    height: 440px;
}


/**
 * BIG ACTION BUTTONS
 **/

#actionbuttons {
}

#actionbuttons div.actionbutton {
    /* clip their content, to "encourage" keeping it brief AND to keep the button heights consistent */
    /* do that here and not the P itself, so they don't go wild with the H3 content and still create the same condition */
    height: 125px;
    max-height: 125px;
    overflow: hidden;
}

#actionbuttons div.actionbutton a:focus {
    text-decoration: underline;
}

#actionbuttons div.actionbutton h3 {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 16px;
}

#actionbuttons div.actionbutton p {
}

#actionbuttons div.actionbutton.foldedcorner:before {
    border-color: #97A688 #F7F4F2;  /* override folded corner to match this area's BG color */
}

@media screen and (max-width: 767px) {  /* add vertical spacing on mobile */
    #actionbuttons > div.row > div {
        margin-bottom: 1em;
    }
}



/**
 * STAY CONNECTED
 **/

#stayconnected {
    border-top: 4px solid #A4B494;
    color: white;
}

#stayconnected h2 {
    color: #A4B494;
}



/**
 * PARTNERS
 **/

#partners {
}

#partners div.partner-box {
    width: 200px;
    height: 220px;

    float: left;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
}

#partners div.partner-box .partner-box-image-container {
    min-width: 200px;
    max-width: 200px;
    min-height: 125px;
    max-height: 125px;
}
#partners div.partner-box .partner-box-image-container img {
    max-width: 100%;
    max-height: 100%;
}

#partners div.partner-box .partner-box-title-container {
    padding: 5px 10px;
    border-top: 1px solid #F7F4F2;
}


/**
 * STATE DETAILS PANEL
 */

#detailspanel-stateinfo {
}

#detailspanel-stateinfo-close {
    float: right;
    font-size: 25px;
    color: black;
    text-decoration: none;
    line-height: 1;
}