/* Responsive Design ---------------------------------------- */ .responsive-hide { display: none !important; } .responsive-show { display: block !important; } .responsive-show-inline { display: inline !important; } .responsive-show-inline-block { display: inline-block !important; } /* Content wrappers ----------------------------------------*/ html { height: auto; } body { padding: 0 5px; } #wrap { min-width: 320px; padding: 0; } /* Common block wrappers ----------------------------------------*/ .headerbar, .navbar, .forabg, .forumbg, .post, .panel { border-radius: 0; margin-left: -5px; margin-right: -5px; } /* Logo block ----------------------------------------*/ #site-description { float: none; width: auto; text-align: center; } #logo { /* change display value to inline-block to show logo */ display: none; float: none; padding: 10px; } #site-description h1, #site-description p { text-align: inherit; float: none; margin: 5px; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; } #site-description p, #search-box { display: none; } /* Navigation ----------------------------------------*/ .headerbar + .navbar { margin-top: -5px; } /* Search ----------------------------------------*/ .responsive-search { display: block !important; } .responsive-search a { display: block; width: 16px; height: 18px; text-indent: 99px; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; text-decoration: none; } /* .topiclist lists ----------------------------------------*/ li.header dt { text-align: center; text-transform: none; line-height: 1em; font-size: 1.2em; padding-bottom: 4px; } ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner { margin-right: 0 !important; padding-right: 0; } ul.topiclist li.header dd { display: none !important; } ul.topiclist dt, ul.topiclist dt .list-inner, ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner, ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner, ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner { margin-right: 0; } ul.topiclist dd { display: none; } ul.topiclist dd.mark { display: block; } /* Forums and topics lists ----------------------------------------*/ ul.topiclist.forums dt, ul.topiclist.topics dt { margin-right: -250px; } ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner { margin-right: 250px; padding-bottom: 18px; } ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost { display: block; } ul.topiclist.forums dd.topics, ul.topiclist.topics dd.posts { display: block; position: absolute; left: 45px; right: 0; bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; height: auto; border-width: 0; margin: 0; padding: 5px 0; width: auto; min-width: 0; text-align: left; font-weight: bold; font-size: 1.2em; line-height: 1em; } ul.topiclist dd.mark { display: block; position: absolute; right: 5px; top: 0; margin: 0; width: auto; min-width: 0; text-align: left; } ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { position: relative; left: 0; width: auto; display: inline; font-weight: normal; } @media only screen and (max-width: 550px), only screen and (max-device-width: 550px) { ul.topiclist.forums dt, ul.topiclist.topics dt { margin-right: 0; } ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner { margin-right: 0; } ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost { display: none; } } /* Notifications list ----------------------------------------*/ @media only screen and (max-width: 350px), only screen and (max-device-width: 350px) { #notification_list { width: 250px; } } /* Pagination ----------------------------------------*/ .pagination { margin: 5px 0; } /* *CP navigation ----------------------------------------*/ .nojs #tabs a span, .nojs #minitabs a span { max-width: 40px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.5px; } #cp-menu, #navigation, #cp-main { float: none; width: auto; margin: 0; } #navigation { padding: 0; margin: 0 auto; max-width: 320px; } #navigation a { background-image: none; } #navigation li:first-child a { border-top-left-radius: 5px; border-top-right-radius: 5px; } #navigation li:last-child a { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* Responsive tables ----------------------------------------*/ table.responsive, table.responsive thead, table.responsive tbody, table.responsive tr, table.responsive th, table.responsive td { display: block; width: auto; -moz-box-sizing: border-box; box-sizing: border-box; } table.responsive thead { display: none; } table.responsive th { display: none; border-bottom-width: 0 !important; } table.mcp-warnings thead { display: block; } table.mcp-warnings th:nth-child(1), table.mcp-warnings th:nth-child(3) { display: inline; } table.mcp-warnings th:nth-child(1):after { content: ','; } table.responsive tr { overflow: hidden; margin: 5px 0; } table.mcp-logs td:nth-child(2), table.mcp-warnings td:nth-child(2n + 1) { width: 50%; float: left; } table.mcp-logs td:nth-child(3), table.mcp-warnings td:nth-child(2n) { margin-left: 50%; text-align: right; } table.mcp-logs td:nth-child(4), table.mcp-logs td:nth-child(5), table.mcp-logs-full td:nth-child(1), table.mcp-logs-full td:nth-child(2) { width: 33%; float: left; } table.mcp-logs td:nth-child(4), table.mcp-logs-full td:nth-child(4) { clear: left; } table.mcp-logs td:nth-child(5), table.mcp-logs-full td:nth-child(2) { text-align: center; } table.mcp-logs td:nth-child(6), table.mcp-logs-full td:nth-child(3) { margin-left: 66%; text-align: right; } /* Forms ----------------------------------------*/ fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { width: auto; float: none; } fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { margin-left: 20px; } textarea, dd textarea, #message-box textarea { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } #smiley-box, #message-box { float: none; width: auto; } #smiley-box { margin-top: 5px; } .bbcode-status { display: none; } #colour_palette table, #colour_palette tbody, #colour_palette tr { display: block; } #colour_palette td { display: inline-block; margin-right: 2px; } #colour_palette td:nth-child(2n) { display: none; } #colour_palette a { display: inline-block !important; } /* User profile ----------------------------------------*/ .column1, .column2, .left-box.profile-details { float: none; width: auto; } @media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { dl.details dt, dl.details dd { width: auto; float: none; text-align: left; } dl.details dd { margin-left: 20px; } } /* Misc stuff ----------------------------------------*/ h2 { margin-top: .5em; } p { margin-bottom: .5em; overflow: hidden; } p.rightside { margin-bottom: 0; } .column1, .column2 { width: auto; float: none; } .topic-actions { overflow: hidden; } @media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { p.responsive-center { float: none; text-align: center; margin: 0; } .topic-actions > div { float: none; overflow: hidden; clear: both; } .topic-actions > .pagination, fieldset.jumpbox { text-align: center; } .topic-actions > .pagination { padding-bottom: 1px; } .topic-actions > div.search-box, p.jumpbox-return { display: none; } .display-options > label:nth-child(1) { display: block; margin-bottom: 5px; } }