@media screen and (max-width: 540px) {
html, body, #pun, .punbb {
width: 100% !important;
height: 100% !important;
margin: 0;
padding: 0;
background-size: contain;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-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;
}
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;
-moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7);
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;
}
#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;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
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-avatar img {
background: rgba(56, 155, 34, 0.5);
padding: 2px;
}
.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 {
border-left: none;
}
#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;
}
}
@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;
}
}