@media screen and (max-width: 540px) {
    html, body, #pun, .punbb {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    background-size: contain;
    -webkit-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
}
body {
    position: relative;
    background-position: center 0;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: scroll !important;
    z-index: 1;
}
img {
    max-width: 100% !important;
    height: auto;
}
#pun {
    width: 100% !important;
    border-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
td, th {
    overflow: hidden;
}
.punbb h1, .punbb h2, .punbb h1 span, .punbb h2 span {
    font-size: 1em !important;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}
input[type=text], input[type=password] {
    max-width: 100% !important;
}
input[type=text], input[type=password], input[type=submit], input[type=button] {
    padding: 10px;
}
select {
    padding: 5px;
}
textarea {
    font-size: 14px !important;
    padding: 1.5% !important;
    max-width: 95% !important;
}
#register input, #register select, #profile input, #profile select, #punbbsearch input, #punbbsearch select {
    max-width: 200px !important;
}
#register .inline .inputfield {
    margin-right: 0;
}
.punbb table, .forum table, .category table, .punbb td, .forum td, .category td {
    border: none !important;
}
#html-header, #html-footer, #pun-title, #pun-announcement div.container {
    margin: 0 auto !important;
    overflow-x: auto !important;
}
#pun-title table {
    height: auto !important;
}
#pun-title h1 {
    height: initial !important;
    padding: 0 !important;
}
#pun-ulinks {
    margin: 0 !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    line-height: 32px !important;
    border: 0 !important;
    z-index: 9999;
    background-position: center -576px !important;
}
#pun-ulinks .container {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    border: none !important;
    text-align: left !important;
    background-image: none !important;
    background-color: rgba(0, 0, 0, 1) !important;
}
#pun-ulinks ul {
    display: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7);
    z-index: 10000;
    position: absolute;
    top: 47px;
    right: 0;
}
#pun-ulinks:hover ul, #pun-ulinks:focus ul {
    display: block;
}
#pun-ulinks li {
    display: block !important;
    padding: 0 !important;
}
#pun-ulinks li a {
    display: block !important;
    border: none !important;
    font-size: 16px !important;
    padding: 3px 6px !important;
    color: #fff !important;
    text-decoration: none !important;
}
#pun-ulinks li a {
    text-decoration: none !important;
}
#pun-ulinks > span.notify-bubble {display: block !important;}
#profilenav {
    float: none !important;
    margin-left: 0;
}
#profile .container {
    padding: 0 !important;
}
#pun-navlinks {
    margin: 0 !important;
}
#pun-navlinks .container {
    height: auto !important;
    padding: 1em 0 !important;
    text-align: center !important;
}
#pun-navlinks .container li {
    padding: 0 1px !important;
    margin: 0 !important;
    line-height: 52px !important;
    background-image: none !important;
    border: none !important;
    float: none !important;
}
#navrules, #navextra1, #navextra2, #navextra3, #navextra4, #navextra5, #navextra6, #navextra7, #navextra8, #navextra9, #navextra10 {
    display: none !important;
}
#pun-navlinks .container li a {
    display: inline-block !important;
    border: 0 !important;
    padding: 0 !important;
}
#pun-ulinks, #pun-navlinks .container li a, #pun-navlinks .container li a:hover {
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px;
    color: #fff;
    background-image: url('/img/navicons.png') !important;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
}
#pun-navlinks .container li a span {
    font-size: 0 !important;
}
#pun-stats ul.container, #pun-stats div.statscon {
    background-image: none !important;
}
.punbb td.tcl {
    width: auto !important;
    background-image: none !important;
}
.category table, .forum table {
    width: 100% !important;
}
.category td.tcl, .forum td.tcl {
    text-overflow: ellipsis;
    overflow: hidden;
    background-image: none !important;
}
.category .tcl img, .forum .tcl img {
    max-width: 100;
    height: auto;
}
.category td.tcr, .forum td.tcr {
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: right !important;
}
div.icon {
    display: none !important;
}
div.tclcon {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.punbb tbody.hasicon td.tcl {
    padding-left: 1em !important;
}
#pun-status, #pun-break1, #pun-index #pun-crumbs1, #pun-crumbs2, #pun-break2, #pun-break3, #pun-break4, .category th, .category .tc2, .category .tc3, .forum th, .forum .tc2, .forum .tc3, #post-form legend {
    display: none !important;
    width: 0 !important;
}
.usertable .tc3 {
    display: none;
}
#userlist p.inputfield {
    float: none;
}
.post h3 span {
    margin: 0 !important;
    background: none !important;
    text-align: left !important;
}
.post h3 span, .post-author {
    background-color: rgba(128, 128, 128, 0.15) !important;
}
.post-body, legend, legend span {
    margin: 0 !important;
}
.post-links, .post-links ul {
    margin-left: 0 !important;
    height: auto !important;
}
.post-rating .container {
    border-radius: 4px;
}
.post-author {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.20) !important;
    overflow: initial !important;
}
.post-author li {
    text-align: left;
}
.online .pa-author:after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(56, 155, 34, 0.7);
    margin-left: .6em;
}
.pa-reg, .pa-from, .pa-invites, .pa-respect, .pa-positive, .pa-time-visit, .pa-last-visit, .pa-online, .pa-icq, .pa-sex, .pa-age, .pa-fld1, .pa-fld2, .pa-fld3, .pa-fld4, .pa-fld5, .pa-fld6, .pa-fld7, .pa-fld8, .pa-fld9, .pa-fld10 {
    display: none !important;
}
.pa-author {
    padding: 0 !important;
    margin: 0 !important;
}
.pa-title {
    padding: 0 0 0 0 !important;
}
.pa-avatar {
    float: right;
    margin-top: -3em;
}
.pa-avatar img {
    max-height: 50px;
    width: auto;
    border-radius: 4px;
}
.formal .container, .formal fieldset, .usertable .container {
    margin: 0 !important;
    padding: 0 !important;
}
#pun-stats ul.container, #userlist, #login, #request_pass, #punbbsearch, #register, #profile fieldset, #upload_avatar, #similar-topics div.container, div.html-box {
    padding: 1em !important;
}
.linkst .postlink, .linkst .pagelink, .linksb .postlink, .linksb .pagelink {
    width: auto !important;
}
#similar-topics table {
    table-layout: fixed !important;
}
#similar-topics td {
    padding: 0.5em 0;
}
#similar-topics td.st-tc2 {
    display: none;
    width: 0 !important;
}
#similar-topics td.st-tcr {
    padding-right: 0 !important;
    width: auto !important;
}
#keyboard-span input {
    padding: 5px;
    min-width: 25px;
}
.formsubmit {
    margin: 1em 0 !important;
}
#smilies-area, #image-area, #imageup-area, #imageattach-area, #keyboard-area, #video-area {
    max-width: 95% !important;
}
#imageupload-right, .uploadifyQueueItem {
    width: auto !important;
}
#navindex a, #navindex a:hover {
    background-position: center 0 !important;
}
#navuserlist a, #navuserlist a:hover {
    background-position: center -48px !important;
}
#navrules a, #navrules a:hover {
    background-position: center -96px !important;
}
#navprofile a, #navprofile a:hover {
    background-position: center -144px !important;
}
#navsearch a, #navsearch a:hover {
    background-position: center -192px !important;
}
#navpm a, #navpm a:hover {
    background-position: center -240px !important;
}
#navadmin a, #navadmin a:hover {
    background-position: center -288px !important;
}
#navlogout a, #navlogout a:hover {
    background-position: center -432px !important;
}
#navregister a, #navregister a:hover {
    background-position: center -382px !important;
}
#navlogin a, #navlogin a:hover {
    background-position: center -336px !important;
}
#profilenav h2 {
    margin-top: 1em;
}
#profile-left {
    width: 100% !important;
    display: block;
}
#profile-left li {
    text-align: center;
    margin: 0 !important;
}
#viewprofile ul {
    padding: 0 !important;
}
#viewprofile ul, #profilenav ul {
    border-width: 0;
}
#viewprofile li strong, #profile-left li div {
    background: transparent !important;
}
#profile-left #profile-name {
    background-color: rgba(128, 128, 128, 0.15);
    border: 4px solid rgba(128, 128, 128, 0.20) !important;
    border-width: 4px 0 !important
}
#viewprofile li strong {
    display: block;
    font-weight: 400 !important;
    padding: 6px 1em;
}
#profile-left #profile-title {
    background-color: rgba(128, 128, 128, 0.15);
}
#profile-left li img {
    max-width: 100% !important;
    height: auto !important;
    background-color: rgba(200, 200, 200, 0.2);
    margin-top: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#profile-left li:nth-child(3) {
    background-color: rgba(128, 128, 128, 0.15);
}
#profile-left li:last-child {
    background-color: rgba(128, 128, 128, 0.15);
    border-bottom: 4px solid rgba(128, 128, 128, 0.20);
    margin-bottom: 4px !important;
}
#profile-right {
    width: 100% !important;
    display: block;
    text-align: center;
}
#profile-right li {
    display: inline-block !important;
    background-color: rgba(128, 128, 128, 0.30) !important;
    border-left: 4px solid rgba(128, 128, 128, 0.50) !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    width: 100% !important;
}
#viewprofile li span {
    float: none !important;
    display: inline-block;
    font-weight: 700;
    padding: 10px 10px 5px;
    margin: 0 0 10px;
}
#profile-right li strong {
    font-size: 16px;
    line-height: 1.1;
    padding: 0 10px 10px !important;
}
#profile-right li strong a {
    text-decoration: none;
    border-bottom: 1px solid;
    font-size: 11px;
}
#pun-admain {
    padding-left: 0;
}
#pun-adnav {
    float: none;
    margin-left: 0;
}
#pun-adnav li {
    padding-left: 2em;
}
#pun-adnav div.adcontainer {
    margin-bottom: 1.2em;
}
#pun-admain input[type=text], #pun-admain select {
    padding: 5px;
    width: 90%;
}
#pun-admain input[type=button], #pun-admain input[type=submit] {
    padding: 5px;
}
#pun-admain fieldset p, #pun-admain fieldset .handle {
    border-left: none;
}
#pun-admain2 fieldset .sortable.subforums {
    margin-left: 0;
}
#pun-admain .adlabel {
    float: none;
    margin-left: 0;
}
#pun-admain span.adsubmit {
    position: static;
    margin-left: 10px;
    margin-right: 10px;
}
.punbb fieldset {
    border-width: 0 !important;
}
.punbb fieldset legend span, .punbb div.fs-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#pun-admain1 form.adcontainer, #pun-admain2 form.adcontainer, #pun-admain1 div.adcontainer, #pun-admain2 div.adcontainer {
    padding-left: 0;
    padding-right: 0;
}
#pun-about, #pun-about .container {
    border-width: 0 0 0 0 !important;
    text-align: center;
}
#pun-messages .user-avatar {
    display: block;
    margin: 0;
    float: none;
    clear: both;
}
.pun-modal .modal-inner {
    margin-top: 10vh;
    max-height: 84vh;
}
.pun-modal .container {
    max-height: 70vh;
}
#pun .punbb #pun-main .modal-inner span.closer {
    position: absolute !important;
}
}
@media screen and (max-width: 480px) {
    .ismoderator #pun-navlinks .container li {
    padding: 0 0 0 0 !important;
}
.ismoderator #pun-ulinks, .ismoderator #pun-navlinks .container li a, .ismoderator #pun-navlinks .container li a:hover {
    width: 42px !important;
    height: 48px !important;
}
.multipage {
    margin-top: 4.8em;
}
.linkst .pagelink {
    margin-top: -1.8em;
}
.pagelink a,.pagelink strong {
    padding: 0 .4em;
}
}
@media screen and (max-width: 768px) {
    form div[id$="-area"] {
    max-width: 86%;
}
}

@media screen and (max-width: 840px) {
.post-content p iframe[allowfullscreen] {
    width: 320px !important; 
    height: 180px !important;
}
}