/* BEGIN: CSS GLOBAL */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    html, body {
        overflow-x: hidden;
        margin: 0;
        height:100%;
    }


    body {
        background-color: #f8f8f8;
        font-family: courier-prime, monospace;
        font-size: 12px;
        font-weight: 400;
        color: #000;
    }

    a {
        text-decoration: none;  
    }





/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/













/* BEGIN: ANNOUNCEMENT */
/**********************************************************/
/**********************************************************/
/**********************************************************/


.announcement {
width: 550px; margin-left: auto; margin-right: auto; text-align: center;
    }

.announcement__code {
    border: 3px solid #000; width: 520px; height: 250px; background-color: #f7f7f7; font-family: courier prime; padding: 15px; border-radius: 0; font-size: 12px;
}

.announcement__leftalign {
    width: 550px; margin-left: auto; margin-right: auto; text-align: left;
}

.announcement__bottomspacer {
    height: 5px;
}









/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/













/* BEGIN: SYSTEM NOTIFICATIONS */
/**********************************************************/
/**********************************************************/
/**********************************************************/


    .sysnotification {
        margin-left: auto;
        margin-right: auto;
        background-color: #e7e7e7;
        padding-top: 22px;
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 22px;
        text-align: left;
    }

    .sysnotification__text {
        float: left;
    }

    .sysnotification__close {
        font-size: 20px;
        float: right;
        line-height: 20px;
    }

    .sysnotification__spacer {
        height: 25px;
    }

    .sysnotification__bump {
        position: absolute; left: 0; top: 346px; width: 519px; background-color: #e7e7e7; padding: 12px;
        height: 20px;
    }

    .sysnotification__bump__icon {
        position: absolute; left: 15px; top: 10px; font-size: 20px;
    }

    .sysnotification__bump__button {
        border: none;
        font-family: courier-prime, monospace;
        font-size: 12px;
        background-color: #e7e7e7;
        cursor: pointer;
        width: 450px;
        position: absolute;
        left: 40px;
        top: 15px;
        text-align: left;
        color: #000;
    }

    .sysnotification__bump__expand {
        display: none; width: 519px; 
        position: absolute; left: 0; top: 40px; background-color: #e7e7e7; padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 12px;
        padding-top: 5px;
    }

    .sysnotification__bump__expand__text {
        margin-left: 30px;
    }




/* END: SYSTEM NOTIFICATIONS */













/* BEGIN: CSS HUB  */
/**********************************************************/
/**********************************************************/
/**********************************************************/


    .hub {
        background-color: #0000ff;
    }

    .hub__close {
        font-size: 50px;
        color: #fff;
        font-weight: bold;
        text-align: right;
        margin: auto;
        padding: 50px;
    }

    .hub__topspacer {
        height: 50px;
    }


    .hub__closebottom {
        display: none;
        font-size: 10px;
        font-weight: 700;
        font-style: italic;
        text-align: center;
        color: #fff;
    }


/* END: HUB */









/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/

























/* BEGIN: CSS MISSED YOU  */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .missedyou {
         margin: auto; max-width: 900px;
    }

    .missedyou__spacer--abovelogo {
        height: 60px;
    }

    .missedyou__header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    }

    .missedyou__logo {
    width: 250px;
    height: 60px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    font-family: courier-prime;
    letter-spacing: -2px;
    }

    .missedyou__burger {
    width: 107px;
    margin-top: 15px;
    }

    .missedyou__burger--display {
    display: block;
    }

    .missedyou__burger--nodisplay {
    display: none;
    }

    .missedyou__city {
    width: 107px;
    text-align: right;
    margin-top: 12px;
        font-size: 12px; 
    }

    .missedyou__city--display {
    display: block;
    }

    .missedyou__city--nodisplay {
    display: none;
    }

    .missedyou__spacer--belowlogo {
        height: 10px;
    }

    .missedyou__date {
        max-width: 900px;
        border: 2px solid #000;
        font-family: courier-prime;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        height: 37px;
        line-height: 31px;
        box-sizing: border-box;
    }

    .missedyou__grid {
         max-width: 900px; display: grid; grid-template-columns: 250px 250px 250px; row-gap: 25px; justify-content: space-between;
    }

    .missedyou__post {
        font-weight: 400;
        font-style: normal;
        width: 246px;
        height: 196px;
        border: 2px solid #000;
        text-align: left;
        line-height: 23px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        font-size: 12px;
        color: #000;
    }

    .missedyou__title {
        font-weight: 700;
        font-style: normal;
        border-bottom: 2px solid #000;
        text-align: center;
        padding: 15px;
        line-height: 18px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        font-size: 12px;
        font-weight: 700;
    }

    .missedyou__body {
        font-weight: 400;
        font-style: normal;
        text-align: left;
        padding: 15px;
        line-height: 23px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        font-size: 12px;
    }

    .missedyou-connection-container-title:hover {
        text-decoration: underline;
    }

    .missedyou__post--blue {
        font-weight: 400;
        font-style: normal;
        width: 246px;
        height: 196px;
        border: 2px solid #0000ff;
        text-align: left;
        line-height: 23px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        font-size: 12px;
    }

    .missedyou__title--blue {
        font-weight: 700;
        font-style: normal;
        border-bottom: 2px solid #0000ff;
        text-align: center;
        padding: 15px;
        line-height: 18px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        font-size: 12px;
        font-weight: 700;
    }

    .missedyou__title--blue:hover {
        text-decoration: underline;
    }

    .missedyou__loadmore {
        max-width: 900px; border: 0; background-color: #0000ff; font-family: courier-prime; font-size: 12px; font-weight: 700; color: #fff; text-align: center; height: 35px; line-height: 37px;
    }

    .missedyou__loadmore--alt {
        max-width: 900px; border: 0; background-color: #e7e7e7; font-family: courier-prime; font-size: 12px; font-weight: 700; color: #fff; text-align: center; height: 35px; line-height: 37px; margin-top: 15px; color: #000;
    }


/* END: MISSED YOU */












/* BEGIN: CSS DROPDOWN v1 */
/**********************************************************/
/**********************************************************/
/**********************************************************/    


    .dropbtn {
    border: none;
    background-color: transparent;
    cursor: pointer;
        margin-top: 1px;
    }

    
    .dropbtn:hover, .dropbtn:focus {
        background-color: transparent;
    }


    .dropdown {
      position: relative;
      display: inline-block;
    }

    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #0000ff;
        color: #fff;
      min-width: 160px;
      z-index: 1;
    }

    
    .dropdown-content a {
      text-decoration: none;
        color: #fff;
        font-weight: 700;
      display: block;
    }

    
    .dropdown-content a:hover {}

    /*
    .dropdown:hover .dropdown-content {
      display: block;
    }
    */
    
    .dropdown-content--show {  
      background-color: #0000ff;
        color: #fff;
      width: 165px;
      z-index: 1;
    }

    .dropdown-content--show a {
      text-decoration: none;
        color: #fff;
        font-weight: 700;
      display: block;
    }

    
    .dropdown-content--show a:hover {}


    .show {display:block;}

    .dropdown__item--single {
        padding-top: 18px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 18px;
    }

    .dropdown__item--top {
        padding-top: 22px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .dropdown__item--middle {
        padding-top: 5px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .dropdown__item--bottom {
        padding-top: 5px;
        padding-bottom: 22px;
        padding-left: 20px;
        padding-right: 20px;
        
    }

/* END: DROPDOWN */























/* BEGIN: CSS WRITE CONNECTION  */
/**********************************************************/
/**********************************************************/
/**********************************************************/    

    .writeconnection {
    text-align: center;
    }

    .writeconnection__h1 {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    line-height:normal;
    margin-bottom: 15px;
    }

    .writeconnection__ghostlinebreak { display: none; }

    .writeconnection__h1__periodlarge {
    color: #0000ff;
    font-size:40px;
    line-height:0px;
    }

    .writeconnection__h1__spacer {
    height: 15px;
    }

    .writeconnection__form {
    width: 550px;
    margin: auto;
    text-align: center;
        box-shadow: 30px 25px #0000ff;
    }

    .writeconnection__title {
    border: 4px solid #000;
    padding: 30px;
    background-color: #f8f8f8;
    font-size: 15px;
    color: #000000;
    width: 482px;
    height: 25px;
    margin-bottom: -9px;
    font-weight: 700;
    border-radius: 0;
    }

    .writeconnection__post {
    border: 4px solid #000;
    padding: 30px;
    background-color: #f8f8f8;
    font-size: 15px;
    color: #000000;
    width: 482px;
    height: 300px;
    border-radius: 0;
    }

    .writeconnection__submit {
    background-color: #f8f8f8;
    color: #000;
    border: none;
    padding: 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: courier-prime;
    width: 550px;
    border: 4px solid #000;   
    }


/* END: CSS TAKE A CHANCE SUBMIT  */









/* BEGIN: CSS FOOTER */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .footer {
        background-color: #0000ff;
    }

    .footer__centerblock {
         margin: auto; max-width: 750px;
    }

    .footer__grid {
         margin: auto; max-width: 750px; display: grid; grid-template-columns: 150px 150px 150px 150px; row-gap: 25px; justify-content: space-between;
    }

    .footer__item {
         font-family: courier-prime; font-weight: 700; color: #5383ec; font-size: 12px; line-height: 23px;
    }

/* END: FOOTER */








/* BEGIN: CSS AFTER FOOTER */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .afterfooter {
    display: flex; flex-direction: row; justify-content: space-between;
    }

    .afterfooter__item {
    width: 250px;
    font-family: courier-prime;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    }

    .afterfooter__item--social--display {
    display: inline;
    }

    .afterfooter__item--social--nodisplay {
    display: none;
    }


    .afterfooter__item--copy--display {
    display: inline;
    text-align: center;
    }

    .afterfooter__item--copy--nodisplay {
    display: none;
    text-align: center;
    }


    .afterfooter__item--privacy--display {
    display: inline;
    text-align: right;
    }

    .afterfooter__item--privacy--nodisplay {
    display: none;
    text-align: right;
    }


/* END: POST FOOTER */








/* BEGIN: CSS POSTOVERLAY */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .postoverlay__bluebg {
    display: flex;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    background-color: #0000ff;
    padding: 50px;
    }

    .postoverlay__graybg {
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    }

    .postoverlay__close {
    text-align: right;
    font-size: 50px;
    font-weight: bold;
    padding-top: 20px;
    padding-right: 35px;
    }

    .postoverlay__closebottom {
    display: none;
    }

    .postoverlay__topspacer {
    height: 20px;
    }


    /* CSS BIGPOST */


    .bigpost__shadow {
        box-shadow: 30px 25px #0000ff;
        max-width:550px;
        margin: auto;
    }


    .bigpost {
        max-width: 700px;
        margin: auto;
    }

    .bigpost__title {
        font-weight: 700;
        font-style: normal;
        max-width: 550px;
        border: 4px solid #000;
        text-align: center;
        padding: 40px;
        line-height: 45px;
        background-color: #f8f8f8;
        font-size: 25px;
        margin: auto;
        box-sizing: border-box;
        }

    .bigpost__body {
        font-weight: 400;
        font-style: normal;
        max-width: 550px;
        border-left: 4px solid #000;
        border-right: 4px solid #000;
        border-bottom: 4px solid #000;
        text-align: left;
        padding: 40px;
        line-height: 40px;
        background-color: #f8f8f8;
        font-size: 15px;
        margin: auto;
        box-sizing: border-box;
    }

    .bigpost__date {
        text-align: center; line-height: 23px; margin-top: 18px; font-size: 12px; font-style: italic;
    }

    .bigpost__date--shadow {
        text-align: center; line-height: 23px; margin-top: 35px; font-size: 12px; font-style: italic;
    }


    /* CSS CONVERSATION */

    .conversation {
    max-width: 870px;
    margin: auto;
    }

    .conversation__header {
    font-size: 25px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    line-height:normal;
    }

    .conversation__chat {
    display: flex;
    flex-direction: row;
    width: 850px;
    justify-content: center;
    margin: auto;
    }

    .conversation__displayusers {
    width: 150px;
    border-left: 4px solid #000;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
    box-sizing: border-box;
    height: 350px;
    background-color: #e9e9e9;
    overflow: scroll;
    }

        /* HIDING AND UNHIDING DATE */

        .conversation__datesent {
        color: #bbb;
        }

        .conversation__datesent--breakborder--display {
        display: inline;
        }

        .conversation__datesent--breakborder--nodisplay {
        display: none;
        }

        .conversation__datesent--breaknoborder--display {
        display: inline;
        }

        .conversation__datesent--breaknoborder--nodisplay {
        display: none;
        }

        /* HIDING AND UNHIDING LONG USERNAMES */

        .conversation__name {
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f8f8f8;
        font-weight: 700;
        }

        .conversation__name--highlight {
        background-color: #0000ff;
        color: #fff;
        }

        .conversation__name--breakborder--display {
        display: block;
        }

        .conversation__name--breakborder--nodisplay {
        display: none;
        }

        .conversation__name--breanokborder--display {
        display: block;
        }

        .conversation__name--breaknoborder--nodisplay {
        display: none;
        }

    .conversation__ghostblock {
    width: 150px;
    height: 350px;
    box-sizing: border-box;
    }

    .conversation__period {
    color: #0000ff;
    font-size: 40px;
    line-height: 0px;
    }

    .conversation__displaymessages {
    border: 4px solid #000;
    height: 350px;
    width: 550px;
    padding: 20px;
    box-sizing: border-box;
    margin: auto;
    position: relative;
    }

    .conversation__textarea {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 70px;
    width: 445px;
    box-sizing: border-box;
    border-top: 4px solid black;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    font-family: courier-prime;
    font-size: 12px;
    padding: 10px;
    }

    .conversation__submit {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 70px;
    width: 100px;
    box-sizing: border-box;
    border-top: 4px solid black;
    border-left: 4px solid black;
    border-right: 0;
    border-bottom: 0;
    font-family: courier-prime;
    font-weight: 700;
    text-align: center;
    padding-top: 25px;
    }

    .conversation__submit--breakborder--display {
    display: block;
    }

    .conversation__submit--breakborder--nodisplay {
    display: none;
    }

    .conversation__submit--breaknoborder--display {
    display: block;
    }

    .conversation__submit--breaknoborder--nodisplay {
    display: none;
    }

/* END: PRIVATE CONVERSATION */


















/* BEGIN: CSS MISSED YOU CONTENT PAGES */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .missedyou__spacer--belowlogo25 {
        height: 25px;
    }

    .missedyou__spacer--belowlogo50 {
        height: 50px;
    }

    .missedyou__spacer--belowcontent {
        height: 100px;
    }

    .missedyou__content {
    max-width: 900px;
    text-align: center;
    margin: auto;
    }

    .missedyou__h1 {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    line-height:normal;
    margin-bottom: 15px;
    }

    .missedyou__h1__periodlarge {
    color: #0000ff;
    font-size:40px;
    line-height:0px;
    }

    .missedyou__h1__spacer {
    height: 15px;
    }

    .missedyou__signup__grid {
    max-width: 500px;
    display: grid;
    grid-template-columns: 240px 240px;
    justify-content: space-between;
    margin: auto;
    }


/* END: MISSED YOU CONTENT PAGES */













/* BEGIN: CSS BROWSE */
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/

    /* BROWSE VERT */

    .browse__vert {
        width: 200px;
        height: 355px;
        overflow-y: scroll;
        border: 2px solid #000;
        margin: auto;
    }

    .browse__vert__month {
        border-bottom: 2px solid #000;
        padding: 15px;
        font-weight: 700;
    }

    .browse__vert__month--last {
        border-bottom: none;
        padding: 15px;
        font-weight: 700;
    }


    /* BROWSE HORIZ */

    .browse__horiz {
        display: flex;
        max-width: 900px;
        justify-content: center;
        margin: auto;
    }

    .browse__horiz__month--left {
        width: 170px;
        padding: 15px;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
        border-bottom: 2px solid #000;
        font-weight: 700;
        text-align: center;
    }

    .browse__horiz__month--middle {
        width: 170px;
        padding: 15px;
        border: 2px solid #000;
        font-weight: 700;
        text-align: center;
        color: #0000ff;
    }

    .browse__horiz__month--right {
        width: 170px;
        padding: 15px;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        font-weight: 700;
        text-align: center;
    }

    .browse__horiz__arrow--left {
        width: 100px;
        text-align: right;
        padding-top: 17px;
        padding-right: 10px;
    }

    .browse__horiz__arrow--right {
        width: 100px;
        text-align: left;
        padding-top: 17px;
        padding-left: 10px;
    }

/* END: BROWSE */












/* BEGIN: CSS STYLING FORM FIELDS */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    input {
        -webkit-appearance: none;
        border-radius: 0;
    }

    .formfield__text {
        border: 3px solid #000;
        padding: 15px;
        font-size: 12px;
        background-color: #f8f8f8;
        font-family: courier-prime;
        color: #000;
        margin-bottom: 10px;
        border-radius: 0;
    }

    .formfield__submit {
        border: 0;
        padding: 15px;
        background-color: #000;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        font-family: courier-prime;
        border-radius: 0;
        margin-top: 5px;
    }


/* END: FORM FIELDS */













/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/











/* BEGIN: CSS TABLES */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    .table {
        width: 100%;
        border: 2px solid #000;
        border-collapse: collapse;
        margin: auto;
        padding: 10px;
        table-layout: fixed;
    }

    td, th {
        border: 2px solid #000;
        border-collapse: collapse;
        margin: auto;
        padding: 10px;
        table-layout: fixed;
    }

    .table th {
        font-weight: 700;
    }

    .table a {
        color: #0000ff;
        font-weight: 700;
    }

    .table--left {
        text-align: left;
    }


    .table--minwidth {
        min-width: 900px;
        border: 2px solid #000;
        border-collapse: collapse;
        margin: auto;
        padding: 10px;
        table-layout: fixed;
        overflow-x: scroll;
    }

    .table--minwidth a {
        color: #0000ff;
        font-weight: 700;
    }


/* END: CSS TABLES */












/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/













/* BEGIN: CSS MEDIA 1 - BREAKPOINT 1 */
/**********************************************************/
/**********************************************************/
/**********************************************************/


    @media (max-width: 970px)
    {

        /* VALUE PROP */


        .valueprop-container-2 {
        display: flex; flex-direction: column; justify-content: space-between; align-items: center;
        }

        .valueprop-item {
         width: 600px; margin-bottom: 35px;
        }
        
        /* WRITE CONNECTION */
        
        .writeconnection__h1 {
            width: 550px;
            margin-left: auto;
            margin-right: auto;
        }
            
        .writeconnection__ghostlinebreak { display: inline; }


        /* MISSED YOU EXAMPLE */
        
        .missedyou {
         margin: auto;
         max-width: 550px;
        }

        .missedyou__grid {
         max-width: 100%; display: grid; grid-template-columns: 250px 250px; row-gap: 25px; justify-content: space-between; margin: auto;
        }
        
        .missedyou__burger--display {
        }
        
        .missedyou__city--display {
        display: none;
        }

        .missedyou__city--nodisplay {
        display: block;
        width: 107px;
        text-align: right;
        }
        
        /* CONVERSATION - BREAK POINT FOR BLUE BORDER*/
        
        .conversation--breakborder {
        max-width: 900px;
        margin: auto;
        }
        
        .conversation__chat--breakborder {
        width: 550px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        }

        .conversation__displayusers--breakborder {
        width: 550px;
        border-top: 4px solid #000;
        border-left: 4px solid #000;
        border-right: 4px solid #000;
        border-bottom: 0;
        box-sizing: border-box;
        height: 150px;
        }
        
        .conversation__ghostblock--breakborder {
        width: 550px;
        height: 50px;
        box-sizing: border-box;
        }
        
        /* HIDING AND UNHIDING LONG USERNAMES */
        
        .conversation__name--breakborder--display {
        display: none;
        }
        
        .conversation__name--breakborder--nodisplay {
        display: block;
        }
        
        /* CONVERSATION - BREAK POINT FOR NO BLUE BORDER*/
        
        .conversation--breaknoborder {
        max-width: 900px;
        margin: auto;
        }
        
        .conversation__chat--breaknoborder {
        width: 550px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        }

        .conversation__displayusers--breaknoborder {
        width: 550px;
        border-top: 4px solid #000;
        border-left: 4px solid #000;
        border-right: 4px solid #000;
        border-bottom: 0;
        box-sizing: border-box;
        height: 150px;
        }
        
        .conversation__ghostblock--breaknoborder {
        width: 550px;
        height: 50px;
        box-sizing: border-box;
        }
        
        /* HIDING AND UNHIDING LONG USERNAMES */
        
        .conversation__name--breaknoborder--display {
        display: none;
        }
        
        .conversation__name--breaknoborder--nodisplay {
        display: block;
        }
        
        /* MISSED YOU CONTENT */
        
        .missedyou__content {
        margin: auto;
        max-width: 550px;
        text-align: center;
        }

    }

/* END: BREAKPOINT 1 */









/* BEGIN: CSS MEDIA 2 - BREAKPOINT 2 */
/**********************************************************/
/**********************************************************/
/**********************************************************/

    @media (max-width: 800px)
    {

        .hub__topspacer {
            height: 20px;
        }
        
        
        
        .footer__centerblock {
         margin: auto; max-width: 550px;
        }

        .footer__grid {
         margin: auto; max-width: 450px; display: grid; grid-template-columns: 150px 150px; row-gap: 25px; justify-content: space-between;
        }


        .afterfooter__item--social--display {
        display: none;
        }

        .afterfooter__item--social--nodisplay {
        display: inline;
        }

        .afterfooter__item--copy--display {
        display: none;
        }

        .afterfooter__item--copy--nodisplay {
        display: inline;
        }

        .afterfooter__item--privacy--display {
        display: none;
        }

        .afterfooter__item--privacy--nodisplay {
        display: inline;
        }
        
    }


/* END: BREAKPOINT 2 */








/* BEGIN: CSS MEDIA BLUE BORDER BREAKPOINT ONLY */
/**********************************************************/
/**********************************************************/
/**********************************************************/


@media (max-width: 700px)
{
    
    /* POSTOVERLAY */

    .postoverlay__bluebg {
    display: flex;
    justify-content: space-evenly; /* justify-items: center; align-content: space-evenly;*/  align-items: center;
    background-color: #0000ff;
    padding: 5px;
    }

    .postoverlay__graybg {
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    }

    .postoverlay__close {
    font-size: 30px;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    }

    .postoverlay__closebottom {
    display: block;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    }

    .postoverlay__topspacer {
    height: 20px;
    }

    /* POSTOVERLAY DISPLAY BIG POST */

    .bigpost--breakborder {
    max-width: 400px;
    margin: auto;
    }

    .bigpost__title--breakborder {
    font-weight: 700;
    font-style: normal;
    max-width: 300px;
    border: 2px solid #000;
    text-align: center;
    padding: 15px;
    line-height: 15px;
    background-color: #f8f8f8;
    font-size: 12px;
    margin: auto;
    box-sizing: border-box;
    }

    .bigpost__body--breakborder {
    font-weight: 400;
    font-style: normal;
    max-width: 300px;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    text-align: left;
    padding: 15px;
    line-height: 23px;
    background-color: #f8f8f8;
    font-size: 12px;
    margin: auto;
    box-sizing: border-box;
    }

    .bigpost__date--breakborder {
    text-align: center;
    margin-top: 8px;
    font-size: 10px;
    }


    /* CONVERSATION */

    .conversation--breakborder {
    max-width: 700px;
    margin: auto;
    }

    .conversation__header--breakborder {
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    line-height:normal;
    }

    .conversation__chat--breakborder {
    display: flex;
    flex-direction: column;
    width: 320px;
    align-items: center;
    margin: auto;
    }

    .conversation__displayusers--breakborder {
    width: 300px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 0;
    box-sizing: border-box;
    height: 130px;
    }

        /* HIDING AND UNHIDING DATE */

        .conversation__datesent--breakborder--display {
        display: none;
        }

        .conversation__datesent--breakborder--nodisplay {
        display: inline;
        color: #bbb;
        font-size: 10px;
        }

    .conversation__ghostblock--breakborder {
    width: 300px;
    height: 1px;
    box-sizing: border-box;
    }

    .conversation__period--breakborder {
    color: #0000ff;
    font-size: 25px;
    }

    .conversation__displaymessages--breakborder {
    border: 2px solid #000;
    height: 250px;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    margin: auto;
    position: relative;
    }

    .conversation__textarea--breakborder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 250px;
    box-sizing: border-box;
    border-top: 2px solid black;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    padding: 10px;
    }

    .conversation__submit--breakborder--display {
    display: none;
    }

    .conversation__submit--breakborder--nodisplay {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 50px;
    box-sizing: border-box;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 0;
    border-bottom: 0;
    font-family: courier-prime;
    font-weight: 700;
    text-align: center;
    padding-top: 17px;
    background-color: #f7f7f7;
    }
    
/* BUMP */
        
    .sysnotification__bump--breakborder {
        position: absolute; left: 0; top: 248px; width: 273px; background-color: #e7e7e7; padding: 12px;
        height: 20px;
    }

    .sysnotification__bump__icon--breakborder {
        position: absolute; left: 12px; top: 8px; font-size: 18px;
    }

    .sysnotification__bump__button--breakborder {
        border: none;
        font-family: courier-prime, monospace;
        font-size: 10px;
        background-color: #e7e7e7;
        cursor: pointer;
        width: 200px;
        position: absolute;
        left: 33px;
        top: 10px;
        text-align: left;
    }

    .sysnotification__bump__expand--breakborder {
        display: none; width: 273px; 
        position: absolute; left: 0; top: 40px; background-color: #e7e7e7; padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 12px;
        padding-top: 5px;
    }

    .sysnotification__bump__expand__text--breakborder {
        margin-left: 25px; font-size: 10px;
    }
    
}






/* BEGIN: CSS MEDIA 3 - BREAKPOINT 3 */
/**********************************************************/
/**********************************************************/
/**********************************************************/


    @media (max-width: 640px)
    {
        
        
        /* SYSTEM NOTIFICATIONS */
        

        .sysnotification__text {
            float: left;
            margin-top: -3px;
        }

        
        /* HUB */
        
        .hub__close {
        font-size: 25px;
        padding: 20px;
        }

        .hub__topspacer {
        height: 15px;
        }
        
        .hub__closebottom {
        display: block;
        }

        /* MISSED YOU */

        .missedyou__spacer--abovelogo {
        height: 15px;
        }

        .missedyou {
        margin: auto;
        max-width: 320px;
        }

        .missedyou__header {
        margin: auto;
        max-width: 100%;
        }

        .missedyou__logo {
        width: 150px;
        height: 60px;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        font-family: courier-prime;
        letter-spacing: -1px;
        margin-top: 15px;
        }

        .missedyou__date {
        width: 250px;
        margin: auto;
        }

        .missedyou__loadmore {
        width: 250px;
        margin: auto;
        }

        .missedyou__burger--display {
        display: none;
        }

        .missedyou__burger--nodisplay {
        display: inline;
        width: 40px;
        margin-top: 19px;
        }
        
        .missedyou__city--nodisplay {
        display: block;
        width: 40px;
        text-align: right;
        margin-top: 20px;
        font-size: 12px;
        }

        .missedyou__grid {
         max-width: 300px; display: grid; grid-template-columns: 250px; row-gap: 25px; margin: auto; justify-content: space-evenly; justify-items: center; align-content: space-evenly; align-items: center;
        }

        /* WRITE CONNECTION */
        
        .writeconnection__h1 {
        font-size: 16px;
        margin-bottom: 5px;
            width: 320px;
        }
        
        .writeconnection__h1__periodlarge {
        color: #0000ff; font-size:25px;
        }

        .writeconnection__form {
            margin: auto;
            width: 300px;
            height: 288px;
            text-align: center;
            box-shadow: 15px 15px #0000ff;
        }

        .writeconnection__title {
            border: 2px solid #000;
            padding: 15px;
            background-color: #f8f8f8;
            font-size: 12px;
            color: #000000;
            width: 266px;
            height: 20px;
            font-family: courier-prime;
            margin-bottom: -8px;
        }

        .writeconnection__post {
            border: 2px solid #000;
            padding: 15px;
            background-color: #f8f8f8;
            font-size: 12px;
            font-family: courier-prime;
            color: #000000;
            width: 266px;
            height: 160px;
        }

        .writeconnection__submit {
         background-color: #f8f8f8; color: #000; border: none; padding: 15px; font-size: 12px; font-weight: 700; font-family: courier-prime; width: 300px; border: 2px solid #000;   
        }

        /* FOOTER */

        .footer__centerblock {
        margin: auto;
        max-width: 300px;
        }
        
        .footer__grid {
        margin: auto;
        max-width: 300px;
        display: grid;
        grid-template-columns: 150px;
        row-gap: 25px;
        justify-content: space-between;
        }
        
        /* MISSED YOU CONTENT PAGES */
        
        .missedyou__spacer--belowlogo {
        height: 10px;
        }
        
        .missedyou__spacer--belowlogo25 {
        height: 0;
        }
        
        .missedyou__spacer--belowlogo50 {
            height: 25px;
        }
        
        .missedyou__h1 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .missedyou__h1__periodlarge {
        color: #0000ff; font-size:25px;
        }
        
        .missedyou__h1__spacer {
        height: 15px;
        }
        
        .missedyou__spacer--belowcontent {
        height: 60px;
        }
        
        /* SIGN UP */
        
        .missedyou__signup__grid {
        max-width: 240px;
        grid-template-columns: 240px;
        }
        
        /* BROWSE */
        
        .browse__horiz__arrow--left {
        padding-top: 23px;
        }

        .browse__horiz__arrow--right {
        padding-top: 23px;
        }
        
        /* INPUT STYLING */
        
        input {
        border-radius: 0;
        }
        
        .formfield__text {
        border: 2px solid #000;;
        }
        
        .formfield__submit {
        margin-top: 0;
        }
        
        /* BREAK NO BORDER */

            /* POSTOVERLAY DISPLAY BIG POST */

            .bigpost__shadow {
                box-shadow: 15px 15px #0000ff;
                max-width: 300px;
            }
        
            .bigpost--breanokborder {
            max-width: 400px;
            margin: auto;
            }

            .bigpost__title--breaknoborder {
            font-weight: 700;
            font-style: normal;
            max-width: 300px;
            border: 2px solid #000;
            text-align: center;
            padding: 15px;
            line-height: 15px;
            background-color: #f8f8f8;
            font-size: 12px;
            margin: auto;
            box-sizing: border-box;
            }

            .bigpost__body--breaknoborder {
            font-weight: 400;
            font-style: normal;
            max-width: 300px;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            text-align: left;
            padding: 15px;
            line-height: 23px;
            background-color: #f8f8f8;
            font-size: 12px;
            margin: auto;
            box-sizing: border-box;
            }

            .bigpost__date--breaknoborder {
            text-align: center;
            margin-top: 20px;
            font-size: 10px;
            }


            /* CONVERSATION */

            .conversation--breaknoborder {
            max-width: 700px;
            margin: auto;
            }

            .conversation__header--breaknoborder {
            font-size: 16px;
            font-weight: 700;
            font-style: normal;
            text-align: center;
            line-height:normal;
            }

            .conversation__chat--breaknoborder {
            display: flex;
            flex-direction: column;
            width: 320px;
            align-items: center;
            margin: auto;
            }

            .conversation__displayusers--breaknoborder {
            width: 300px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            border-bottom: 0;
            box-sizing: border-box;
            height: 130px;
            }

                /* HIDING AND UNHIDING DATE */

                .conversation__datesent--breaknoborder--display {
                display: none;
                }

                .conversation__datesent--breaknoborder--nodisplay {
                display: inline;
                color: #bbb;
                font-size: 10px;
                }

            .conversation__ghostblock--breaknoborder {
            width: 300px;
            height: 1px;
            box-sizing: border-box;
            }

            .conversation__period--breaknoborder {
            color: #0000ff;
            font-size: 25px;
            }

            .conversation__displaymessages--breaknoborder {
            border: 2px solid #000;
            height: 250px;
            width: 300px;
            padding: 20px;
            box-sizing: border-box;
            margin: auto;
            position: relative;
            }

            .conversation__textarea--breaknoborder {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50px;
            width: 250px;
            box-sizing: border-box;
            border-top: 2px solid black;
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
            padding: 10px;
            }

            .conversation__submit--breaknoborder--display {
            display: none;
            }

            .conversation__submit--breaknoborder--nodisplay {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            height: 50px;
            width: 50px;
            box-sizing: border-box;
            border-top: 2px solid black;
            border-left: 2px solid black;
            border-right: 0;
            border-bottom: 0;
            font-family: courier-prime;
            font-weight: 700;
            text-align: center;
            padding-top: 17px;
            }

/* BUMP */
        
    .sysnotification__bump--breaknoborder {
        position: absolute; left: 0; top: 248px; width: 273px; background-color: #e7e7e7; padding: 12px;
        height: 20px;
    }

    .sysnotification__bump__icon--breaknoborder {
        position: absolute; left: 12px; top: 8px; font-size: 18px;
    }

    .sysnotification__bump__button--breaknoborder {
        border: none;
        font-family: courier-prime, monospace;
        font-size: 10px;
        background-color: #e7e7e7;
        cursor: pointer;
        width: 200px;
        position: absolute;
        left: 33px;
        top: 10px;
        text-align: left;
    }

    .sysnotification__bump__expand--breaknoborder {
        display: none; width: 273px; 
        position: absolute; left: 0; top: 40px; background-color: #e7e7e7; padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 12px;
        padding-top: 5px;
    }

    .sysnotification__bump__expand__text--breaknoborder {
        margin-left: 25px; font-size: 10px;
    }
        
        /* DROPDOWN */
        
            .dropdown-content--show {  
      
      width: 140px;
    
    }
        
            .dropdown__item--single {
        padding-top: 16px;
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 16px;
                font-size: 10px;
    }

    .dropdown__item--top {
        padding-top: 20px;
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 18px;
        font-size: 10px;
    }

    .dropdown__item--middle {
        padding-top: 3px;
        padding-bottom: 18px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 10px;
    }

    .dropdown__item--bottom {
        padding-top: 3px;
        padding-bottom: 20px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 10px;
        
    }


    /* ANNOUNCEMENTS */
        
        .announcement {
            width: 320px;
        }
        
        .announcement__code {
            width: 290px;
            border: 2px solid #000;
            font-family: courier-prime;
        }
        
        .announcement__leftalign {
            width: 320px;
        }
        
        .announcement__bottomspacer {
            height: 15px;
        }
        
        
    }

/* END: BREAKPOINT 3 */