.modal {
    width: 100%;
}
#alphadiv {
    width: 100%;
    margin: 0px;
}
#logoss {
    width: 100%;
}
#logoss img {
    width: 100%;
    height: auto;
}
#logintop {
    width: 100%;
    height: auto;
    /* stretch bg image if needed, may not work on all browsers (yet) */
    background-image: none;
}
#lt1 {
    float: none;
    width: 100%;
    margin-right: 0px;
}

#FRMLogin > div:first-of-type > div:first-of-type {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
}
#FRMLogin > div:first-of-type > div:first-of-type > div:first-of-type + div {
    width: auto !important;
}

/* save space, don't show Username/Password (inputs have placeholder text) */
#FRMLogin span.unpwtext {
    display: none !important;
}

/* username/password inputs */
#login_username , #secretkey {
    width: 90px;
    margin-left: 8px;
}

/* LOGIN button */
#FRMLogin input.buttonlogin1 {
    margin-left: 8px;
    margin-right: 8px;
    width: auto !important;
}

/* "forgot password" link and JOIN NOW button container */
#FRMLogin > div:first-of-type + div {
    text-align: left !important;
    width: 100% !important;
    margin-top: 10px;
    margin-right: 0px !important;
}
#FRMLogin > div:first-of-type + div > div:first-of-type {
    float: none !important;
    width: 100% !important;
}
/* "Forgot Username or Password?" */
#FRMLogin a.linkforgotwhite {
    padding-left: 8px;
    color: #FFF;
    font-size: 0.75em;
}
/* JOIN NOW div */
#FRMLogin > div:first-of-type + div > div:first-of-type > div {
    position: relative !important;
    float: right !important;
    top: 0px !important;
    left: 0px !important;
    height: 23px !important;
    width: auto !important;
}
/* JOIN NOW button */
#FRMLogin input.buttonjoin2 {
    width: auto !important;
    font-size: 12px;
    height: 22px;
    margin-right: 8px;
}

#lt2 , #tlb_cont {
    width: 100% !important;
}

/* facebook button */
#fbdiv {
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    display: block !important;
    margin-right: 8px;
    margin-top: 8px;
}

/* top links: "HOW IT WORKS", "DATING ARTICLES", ... */
#toplinksbar {
    position: relative !important;
    width: 100% !important;
    left: 0px !important;
    top: 0px !important;
    display: block !important;
}
#toplinksbar a.linkstopbold {
    white-space: nowrap;
    line-height: 1.0;
}
/* make links two-per-line */
#toplinksbar a.linkstopbold:nth-child(2n+2)::after {
    content: '\A';
    white-space: pre;
}
/* make the first HOW IT WORKS link resemble the others */
#toplinksbar > span::before {
    content: ' | ';
}


/* container for banner images */
#mediumss {
    margin-top: 5.5em;
}
#mediumtop > div:first-of-type {
    width: 100% !important;
    height: auto !important;
}

/* banner images */
#areaphoto1 {
    width: 100% !important;
    overflow: hidden; /* display left side of images */
}
#areaphoto1 img {
    clip:rect(0px, 650px, 248px, 0px) !important; /* crop banner images 650px from the left of the image */
    width: auto;
}
#areaphoto1 , #areaphoto1 img {
    height: 123px !important;  /*  320 / 650 * 248  */
}


/* move quick search below images */
#areaqs1 {
    left: 0px !important;
    top: 123px !important;
    width: 100% !important;
    display: block !important;
    border-radius: 0px 0px 14px 14px; /* change curved borders to the bottom right and left */
    background-color: #F0FFF0;
}

#FRMQuickSearch input.buttonqs1 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}


/* links: Events | Affiliates | Advertise | Resources | Links | Media | Contact Us */
#mediumbot {
    float: none !important;
    display: block !important;

    /* move links below quick search */
    margin-top: 24em !important;
}
#mediumbot div.roundedlowerbar {
    height: auto;
    background:url() repeat;
    background-color: #4CA900;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
div.lowlinkline , div.lowlinknl {
    width: auto;
    padding-left: 0.25em;
    padding-right: 0.25em;
    white-space: nowrap;
}
.linksbottomblack {
    font-size: 0.9em;
    color: #FFF;
}


/* disable Featured Members carousel */
#mediummed {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}

/* shrink youtube video width */
#youtubediv {
    width: 100% !important;
    text-align: center;
}
#youtubeiframe {
    width: 312px !important;
}


/* font sizes */
.titlesbigbottom {
    font-size: 1.5em;
}
.textbigbluebottom , .qs_text_username , .listbottom , .listbottom2 {
    font-size: 1em;
}
.textarial16black {
    font-size: 0.9em;
}


/***********************************************************************/
/* bottom content modules */
/***********************************************************************/
div.botmodright1 ,
div.botmodright2 ,
div.botmodleft2 ,
div.botmodleft1 {
    width: 98%;
    padding-left: 0.25em;
    padding-right: 0.25em;
    margin-right: 0;
}
div.bottommodule img {
    width: 100%;
    height: auto;
}
div.bottommodule {
    /* fix viewport spillage */
    margin-left: -3px;
    margin-right: -3px;
}

/****************************************/
/* "Welcome to GreenSingles"            */
/****************************************/
#bottomcont > div:nth-child(1) .botmodleft1 img:first-of-type {
    width: 50% !important;
    height: auto !important;
}

/****************************************/
/* "We're Generious"                    */
/****************************************/
#bottomcont > div:nth-child(5) div.botmodleft2 > div:nth-child(2) {
    height: auto !important;
}
#bottomcont > div:nth-child(5) div.botmodleft2 > div:nth-child(2) > div {
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
}
/* "Upgrade Anytime!" */
#botmodupgradediv {
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    width: 98% !important;
    margin: 1em 0.25em 0em 0.25em;
}
/***********************************************************************/




/***********************************************************************/
/* CUSTOM SCREEN WIDTHS                                                */
/* use 650x248 banner image size to compute height per-device width.   */
/* Example:  320 / 650 * 248                                           */
/***********************************************************************/
/* 481px <= device-width <= 600px */
@media only screen and (min-width: 481px) and (max-width: 600px) {
    #areaphoto1 , #areaphoto1 img { height: 183px !important; }
    #areaqs1 { top: 183px !important; }
    #toplinksbar a.linkstopbold:nth-child(2n+2)::after { content: none; }
    #toplinksbar > span::before { content: none; }
    #mediumss { margin-top: 8.75em; }
    #mediumbot { margin-top: 30em !important; }
} 

/* 361px <= device-width <= 480px */
@media only screen and (min-width: 361px) and (max-width: 480px) {
    #areaphoto1 , #areaphoto1 img { height: 137px !important; }
    #areaqs1 { top: 137px !important; }
    #toplinksbar a.linkstopbold:nth-child(2n+2)::after { content: none; }
    #toplinksbar > span::before { content: none; }
    #mediumss { margin-top: 7em; }
    #mediumbot { margin-top: 27.5em !important; }
}

/* 321px <= device-width <= 360px */
@media only screen and (min-width: 321px) and (max-width: 360px) {
    #areaphoto1 , #areaphoto1 img { height: 122px !important; }
    #areaqs1 { top: 122px !important; }
    #mediumss { margin-top: 6.75em; }
    #mediumbot { margin-top: 24.5em !important; }
}

/* device-width <= 320px */
@media only screen and (max-width: 320px) {
    /* uses mobile defaults */
}