html,
body {
    width: 100%;
    height:100%;
}

body {
    margin: 0px;
    font-family: Verdana;
    background: #333;
    overflow-y: scroll;
    overflow-x: auto;
}

#wrapper {
    width: (100% - 2px);
    max-width: 400px;
    margin: 0 auto;
}

#header_info,
#header_menu,
#header_search,
#header_log,
#account_select,
#profile_userframe,
.userframe,
.forms,
#content {
    width: 100%;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    box-sizing: border-box;
}

#profile_userframe,
.userframe,
.forms {
    width: 96%;
    max-width: 384px;
}

#header_info {background:red;color:#FFF;line-height: 30px; padding: 5px;}
#header_info a:link,
#header_info a:visited {color:#FFF;text-decoration:none;}
#header_info span {cursor:pointer;}
#header_info span:hover,
#header_info a:hover {text-decoration:underline;}
#header_info #head_username {width:75%;text-align:left;}
#header_info #head_logout {width: calc(25% - 3px);text-align:right;padding-right:3px;}
#header_info span#nologin {width:100%;text-align:center;font-weight:bold;}

#header_menu {background: white; color:#333; line-height: 30px; padding: 5px;}
#header_menu a:link,
#header_menu a:visited {color: #333; text-decoration: none; }
#header_menu span {cursor:pointer;}
#header_menu span:hover,
#header_menu a:hover {text-decoration:underline;}
#header_menu div {width: 33.3%;}
#header_menu #head_login,
#header_menu #head_new_message {text-align:center;}
#header_menu #head_stats,
#header_menu #head_register {text-align:right}

#header_search {background:blue;color:#FFF;}
#header_search input[type="search"] {width:65%; margin:0;font-size:16px;}
#header_search span {width:100%;margin:3px;cursor:pointer;}
#header_search span:hover {text-decoration:underline;}
#header_log {background: green;color:#FFF;display:block;}

#login_toggle {margin-left: -32px;}

#message_container {padding-bottom:50px;}
#account_select {border: 1px solid orange;background:orange;color:#000;font-weight:bold;}
#content p {margin:6px;}



.forms input{width:300px;font-size:16px;margin: 3px 0 3px 3px;line-height:24px}
input,textarea{width:300px;padding:3px;}
textarea#register_shortbio {width:300px;margin-left:3px;resize:none;}
input[type="checkbox"]{width:20px;}
input[type="submit"] {width: fit-content;display:inline-block;}
.forms span {font-size:13px;}
.forms p {margin:0px;}
.forms img {cursor:pointer; width:22px; height:22px; border: none;vertical-align:text-top;margin-left:5px;}
.forms i{margin-left: -50px; margin-top:8px;cursor:pointer;}
.forms button {width:170px;cursor:pointer;font-size:16px;margin: 3px 0 3px 3px;line-height:24px}
.submitBtn {background: blue; color: white; font-weight:bold; font-size: 18px; padding: 3px 6px;}

h4 {font-size:14px;font-weight:bold;margin-top:4px;margin-bottom:-4px}

.userframe, .forms, #content {background:#C0C0C0;position:relative;}
.mes_con {position:relative;}
.userframe .close_button {width:30px;text-align:center;background:#C0C0C0;border: 1px solid #000;cursor:pointer;position:absolute;right:0px;top:0px;}
.userframe .close_button:hover{background-color:red;color:#FFF;}
.userframe a{color:#000;text-decoration:none;}
.userframe img {width:70px;height:70px;border-radius:4px;cursor:pointer;}
.mes_con {width:100%;}
.names {padding:3px; font-size:14px; display:inline-block; vertical-align:top;}
.verified {background-image: url(../images/verified.png); width:16px;height:16px;background-size: contain;display:inline-block;margin: 0 0 -2px 5px;}
.verified_large {background-image: url(../images/verified.png); width:28px;height:28px;background-size: contain;display:inline-block;margin: 0 0 -5px 5px;}
.action_follow {border-radius:4px;padding:5px;background:#00F;color:white;font-weight:bold;cursor:pointer;float:right;margin-top:-75px;font-size:12px;}
.unblock_button_acc {border-radius:4px;padding:5px;background:green;color:white;font-weight:bold;cursor:pointer;margin: 5px auto;}
.unblock_button_end {border-radius:4px;padding:5px;background:#666;color:black;font-weight:normal;cursor: default;margin: 5px auto;}
.message_button {float:right;margin-right:8px;}
.usertext {width:100%;font-size:14px;flex-basis:100%;padding-top: 4px;}
.usertext a:link, .usertext a:visited{color: blue;text-decoration:none;}
.usertext a:hover{color: blue;text-decoration:underline;}
.usertext img {width:15px;height:15px;margin: 3px 3px 0px 0px;vertical-align:middle;}
.usertext img.load_images {width:35px;height:35px;margin-top:-5px;margin-left:10px;}
.usertext textarea {width:100%;min-height:60px;font-size:14px;border:none;outline:none;resize:none;overflow:hidden;box-sizing:border-box;}
.usertext .create_date {font-size: 11px; float: right;}
.makemessage {margin: 5px 0 -10px 0;}
.makemessage img#showimage {width:100%;max-width:380px;height:auto;border-radius:8px;margin-left:auto;margin-right:auto;}
.JSlink {color: blue;text-decoration:none;}
.JSlink:hover {color: blue;text-decoration:underline;cursor:pointer;}
.userstats {width:100%;padding:3px;text-align:center;}
.usertoolbar {width:100%;font-size:11px;margin-top:5px;padding-top:4px; border-top: 1px dashed #333;display:flex;}
.usertoolbar i {font-size:14px;margin: 4px 0;cursor:pointer;}
.usertoolbar img {width:18px; height:18px; margin: 0px 0px 0px 10px;cursor:pointer;}
.usertoolbar span {margin: 3px 10px 0px 3px;}
i.fa-flag {position:absolute;right:8px;}

.tileSt {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 24px;
    color: #FFF;
    background: #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: 15px auto;
}

#profile {width:100%;max-width:400px; font-size:12px;}
#profile_userframe {background:#C0C0C0; min-height: 240px; position:relative;}
#profilehead {width:100%;height:150px;background-position: center; background-repeat: no-repeat; background-size: cover;}
#profilehead img {width:100px;height:100px;border-radius:50px;margin-top:85px;margin-left:20px;border:2px solid #C0C0C0;}
#profilemain {width:100%; margin: 0 3px 10px 3px;}
#profilemain h2 {font-size: 22px; margin: 2px 0 0 0;}
#buttons_bar {width: calc(100% - 135px); height:35px; margin: 5px 0 2px 135px; clear:both;}
.action_block_acc,
.action_follow_acc {border-radius:4px;padding:5px;color:white;font-weight:bold;cursor:pointer;float:right;margin: 5px;font-size:12px;}
.action_block_acc {background:#F00;}
.action_follow_acc {background:#00F;}
#buttons_bar .tileSt {width: 30px; height:30px;cursor:pointer;float:right;margin: 2px 4px 0 0; font-size: 20px}

#profilestats {width:100%;margin-top:5px;padding:3px;text-align:center;}
#meposts,#mefollowing,#mefollowers {cursor:pointer;}
#showbio {width:100%;padding:3px;box-sizing:border-box; border-bottom: 1px dashed black;}

img#shortbioImg {margin-top: -50px;}
#charcountBIO {width:60px;margin-left:-22px;text-align:right; margin-top:-10px;position:relative;top: -5px;}
#charcountUN {width:40px;margin-left:-74px;text-align:right;display: inline-block;}

.notify_container {width:100%;font-size: 13px;}
.notify_container img.avatar {height:40px;}
.notify_container img.viewed {height: 24px; margin: 5px 8px;}
.notify_container .close_button {width:30px;text-align:center;background:#C0C0C0;border: 1px solid #000;cursor:pointer;float:right;}
.notify_container .close_button:hover{background:red;color:#FFF;}
.notify_container .notification {width: 100%; cursor:pointer;}
.notify_container .notification a {color: #000; text-decoration:none;}
.notify_container .private_message {width: 100%;font-size: 13px;}
.notify_container .private_message  a {color: #000; text-decoration:none;}
.notify_container .actiontime {width:130px;font-size:11px;font-weight:bold;text-align:right;position:absolute; bottom: 0; right:0;}

.small_form {
    min-height: 100px;
    background: #C0C0C0;
    padding: 3px;
    border-radius: 10px;
    font-size: 12px;
}

.small_form textarea {
    width: calc(100% - 6px);
    border: none;
    font-size: 16px;
}

.small_form input[type="submit"] {
    position: relative;
    left: 0; top: -10px;
}

.small_form img {
    position: relative;
    left: 10px; top: 0;
    width: 30px;
}

.small_form #charcountMES {
    width: 60px;
    float: right;
    text-align: right;
}

#footerpadding {width:100%;height:70px;}

footer {position:fixed;bottom:0;width:100%;max-width:400px;height:70px;background-color:rgba(51, 51, 51, 0.9);}
footer .bottom_menu_link {width:25%;text-align:center;float:left;}
footer .bottom_menu_link a {text-decoration:none; color:#FFF;}

footer span {min-width:14px;height:14px;position:absolute;left:auto;bottom:42px;margin-left: 8px;padding:2px;background:red;font-size:10px;color:#FFF;border-radius: 9px;}

img.postedimg {width:100%;max-width:380px;border-radius:10px;margin: 5px auto 0 auto;display:block;}
iframe {width:100%;max-width:380px;height:inherit;border-radius:10px;margin: 5px auto 0 auto;display:block;}
img.postedimg {height:auto;}