@media (min-width: 992px)and (max-width: 1199px) { body{ border-top-color: #0F9;} /* Global Containers ---------------------------------------- */ /* Add a small margin */ .body-layout-Boxed #wrap { padding: 0 15px; width: auto; } /* Sidebar Adjustments ----------------------------*/ /* Hide left sidebar on tiny screens */ #leftcolumn { display: none; } /* Clear center column padding */ #contentcolumn { padding-left: 0; } /* Expand center column to fill empty gap */ #contentcolumn { margin-left: 0; } /* Grid Forumlist ---------------------------------------- */ /* Turn 3 columns into 2 */ .forumlist_grid li.row { width: 50%; } /***** Remove desc & last post, make topics & posts wider. Reduce row 1 height & overflow */ body.sidebar-right-only .forumlist_grid .forum_description, body.sidebar-both .forumlist_grid .forum_description { display: none; } body.sidebar-right-only .forumlist_grid .tile_row_1, body.sidebar-both .forumlist_grid .tile_row_1 { height: 75px; } body.sidebar-right-only .forumlist_grid .tile_row_2, body.sidebar-both .forumlist_grid .tile_row_2 { margin-top: 0; } body.sidebar-right-only .forumlist_grid .tile_row_25, body.sidebar-both .forumlist_grid .tile_row_25 { width: 50%; } body.sidebar-right-only .forumlist_grid .tile_row_50, body.sidebar-both .forumlist_grid .tile_row_50 { display: none; } /* End minimal squishy fix */ /* Forumlist Colums ---------------------------------------- */ /* Remove the 'last post' column */ body.sidebar-both .forabg dd.lastpost, body.sidebar-both .forumbg dd.lastpost, body.sidebar-right-only .forabg dd.lastpost, body.sidebar-right-only .forumbg dd.lastpost { display: none; } /* Increase the other margins to account for the (now missing) 300px */ body.sidebar-both ul.topiclist.forums dt, body.sidebar-right-only ul.topiclist.forums dt, body.sidebar-both ul.topiclist.topics dt, body.sidebar-right-only ul.topiclist.topics dt{ margin-right: -195px; } body.sidebar-both ul.topiclist dt .list-inner, body.sidebar-right-only ul.topiclist dt .list-inner { margin-right: 195px; } body.sidebar-both li.header dt, body.sidebar-right-only li.header dt { margin-right: -235px; } /* UCP Columns ---------------------------------------- */ /* For the UCP columns, we need to override this */ body.sidebar-both ul.topiclist.pmlist dt, body.sidebar-right-only ul.topiclist.pmlist dt { margin-right: -95px; } /* Same again... */ body.sidebar-both ul.topiclist.pmlist dt .list-inner, body.sidebar-right-only ul.topiclist.pmlist dt .list-inner { margin-right: 95px; } /* UCP Two long columns */ body.sidebar-both ul.two-long-columns dt .list-inner { margin-right: 0; } body.sidebar-both ul.two-long-columns dd.lastpost { display: none; } /* MCP Columns ---------------------------------------- */ /* Manually enabling the responsive layout. First, we remove the second column */ body.sidebar-both.body-layout-Boxed .missing-column dd, body.sidebar-both.body-layout-Fluid .missing-column dd, body.sidebar-right-only.body-layout-Boxed .missing-column dd, body.sidebar-right-only.body-layout-Fluid .missing-column dd { display: none; } /* But we still want the mark column, so re-enable that */ body.sidebar-both.body-layout-Boxed .missing-column dd.mark, body.sidebar-both.body-layout-Fluid .missing-column dd.mark, body.sidebar-right-only.body-layout-Boxed .missing-column dd.mark, body.sidebar-right-only.body-layout-Fluid .missing-column dd.mark { display: block; } /* Reduce the left column margin to 95px, just enough for the mark box */ body.sidebar-both.body-layout-Boxed ul.topiclist.missing-column dt, body.sidebar-both.body-layout-Fluid ul.topiclist.missing-column dt, body.sidebar-right-only.body-layout-Boxed ul.topiclist.missing-column dt, body.sidebar-right-only.body-layout-Fluid ul.topiclist.missing-column dt { margin-right: -95px; } body.sidebar-both.body-layout-Boxed ul.topiclist.missing-column dt .list-inner, body.sidebar-both.body-layout-Fluid ul.topiclist.missing-column dt .list-inner, body.sidebar-right-only.body-layout-Boxed ul.topiclist.missing-column dt .list-inner, body.sidebar-right-only.body-layout-Fluid ul.topiclist.missing-column dt .list-inner { margin-right: 95px; } /* Then enable the extra info below */ body.sidebar-both.body-layout-Boxed ul.topiclist.missing-column .responsive-show, body.sidebar-both.body-layout-Fluid ul.topiclist.missing-column .responsive-show, body.sidebar-right-only.body-layout-Boxed ul.topiclist.missing-column .responsive-show, body.sidebar-right-only.body-layout-Fluid ul.topiclist.missing-column .responsive-show { display: block !important; } /* Hacky bookmark fix */ body.sidebar-both.body-layout-Boxed ul.topiclist.missing-column li.header dt, body.sidebar-both.body-layout-Fluid ul.topiclist.missing-column li.header dt, body.sidebar-right-only.body-layout-Boxed ul.topiclist.missing-column li.header dt, body.sidebar-right-only.body-layout-Fluid ul.topiclist.missing-column li.header dt { margin-right: -125px; /* 95px + 30px padding */ } /* Manually enabling the responsive layout. First, we remove the second column header */ body.sidebar-both.body-layout-Boxed ul.topiclist.two-long-columns dd, body.sidebar-both.body-layout-Fluid ul.topiclist.two-long-columns dd, body.sidebar-right-only.body-layout-Fluid ul.topiclist.two-long-columns dd { display: none; } /* Increase the left column width to 100% */ body.sidebar-both.body-layout-Boxed ul.topiclist.two-long-columns dt, body.sidebar-both.body-layout-Fluid ul.topiclist.two-long-columns dt, body.sidebar-right-only.body-layout-Fluid ul.topiclist.two-long-columns dt .list-inner { margin-right: 0; } /* Then enable the extra info below */ body.sidebar-both.body-layout-Boxed ul.topiclist.two-long-columns .responsive-show, body.sidebar-both.body-layout-Fluid ul.topiclist.two-long-columns .responsive-show, body.sidebar-right-only.body-layout-Fluid ul.topiclist.two-long-columns .responsive-show { display: block !important; } /* Custom Login Page ---------------------------------------- */ /* Clear the veritcal alignment. Make it wider for larger screens */ .login_container { width: 900px; } /* For ACP Auth (and login_body.html...probably), reduce container width to 450px */ .auth-page-admin .login_container { width: 450px; } /* Split the columns down */ .login_container_left, .login_container_right { width: 50%; display: table-cell; vertical-align: middle; } /* Min height for left column content, so that it's taller than the registration box */ .login_container_left_section_content { min-height: 400px; } /* For ACP Auth (and login_body.html...probably), remove min-height */ .auth-page-admin .login_container_left_section_content { min-height: 0; } /* Subforums in column ---------------------------------------- */ ul.sub-list { width: 100%; } /* responsive logo ---------------------------------------- */ /* override the dynamic inline width so that we can relatively resize logo below */ #site-description { width: 100% !important; } #site-description img { max-width: 85%; } }