.mobile_on {
visibility: hidden;}

.responsive_menu.login {
min-width: 16px;
width: auto;}

.ex_open_menu, .ex_close_menu {
display: none;}

@media screen and (min-width: 240px) and (max-width: 640px) {
/* Considering something trying to be bad boy and editing body (especially portals!) */
body {
min-width: 240px !important;}

.ex_open_menu, .ex_close_menu {
width: 32px;
height: 32px;
display: inline-block;
float: right;}

.ex_open_menu {
background: url(../images/ex_open_menu.png) no-repeat;}

.ex_close_menu {
background: url(../images/ex_close_menu.png) no-repeat;
float: right;
padding: 1% 0;}

/* Calendar Time */
#month_grid, #month_grid table, #main_grid {
float: none;
width: 100%;}

#main_grid {
margin-left: 0 !important;}

.keyinfo .messageicon, #messageindex .last_th {
display: none;}

.bbc_img {
max-width: 100%;
max-height: 100%;}
}

@media screen and (max-width: 480px) {
table.table_list tbody.content td.icon, table.table_list a.unreadlink, table.table_list a.collapse, #index_common_stats {
display: none;}

.mobile_on {
visibility: visible;}

#manage_boards .cat_bar {
 margin-top: 10px;}

#manage_boards .windowbg {
line-height: 3.2em;}

#manage_boards ul {
max-height: 120em;
padding: 0 0 10px 0;}

#manage_boards dd, #manage_boards dt {
width: 100%;}

#manage_boards dt {
line-height: 1.6em;}
}

@media screen and (max-width: 640px) {
.nav_bar_inner, .top_bar_inner, .headerm_inner {
width: 100%;}

.headerm, .headerm_inner {
height: auto;}

.logo_banner {
text-align: center;
max-width: 640px;}

.logo_banner a > img {
max-width: 90%;}

.quick_search_holder, #search_form {
text-align: center;
margin: 0 auto;
float: none;}

.dropmenu li {
width: 75%;
float: none;
display: inline-block;}

.dropmenu li li, .dropmenu li li li {
width: 100%;
text-align: left;}

.dropmenu li ul {
width: 90%;
position: relative;}

#quick_tasks li {
height: auto !important;
padding: 0;
width: 100% !important;
float: none !important;}

.home_image {
clear: both;}

.poster li.avatar img {
width: 50px !important;
height: 50px !important;}

#siteslogan, img#smflogo, .contact_info {
display: none;}

.hidden, .icon, .stats, #posting_icons, #mlist th, .icon1, .icon2 {
display: none;}

#statistics .stats {
display: block;}

#stats_left, #top_posters, #top_topics_replies, #top_topics_starter, #stats_right, #top_boards, #top_topics_views, #most_online, #popularposts, #popularactivity {
width: 100%;
float: none;}

#report_post input {
width: 95%;
min-height: 50px;}

.tborder .topic_table th.first_th {
display: none;}

#topic_icons p {
display: block;
width: 100%;}

#menu_toggle {
display: none;}

h3.catbg #quick_search form {
margin: 0 0 8px 0;
padding: 0;}

h3.catbg #quick_search form input {
margin: 0 0 12px 0;}

h3.catbg #quick_search form select option {
padding: 4px;}

h3.catbg #quick_search form .button_submit {
margin: 0 3px;}

#credits_page {
padding-top: 35px;}

.features_image {
display: none;}

.features_switch {
margin: -20px 0 0 5px !important;}

.features h4 {
margin: -10px 0 0 0 !important;
padding: 0 0 10px 0;}

.features p {
margin: 0;
padding: 1em 0 0.5em 0.5em !important;
min-height: 0;}

.mark_read .buttonlist {
float: none;
margin: 0 auto;}

.mark_read .buttonlist li {
width: auto;}

#advanced_search {
text-align: left !important;}

em.smalltext {
display: none;}

#advanced_search dt, #advanced_search dd {
width: 100%;
float: none;
text-align: left;
margin: 0;}

.login dt, .login dd {
float: none;
text-align: left;
width: 90%;}

input.enhanced {
display: block;}

.enhanced select {
display: block;}

#advanced_search dl#search_options {
width: 100%;}

#guest_form input, #guest_form select, #search_form input, #search_form select {
padding: 0px 5px;}

#searchform .input_text, #searchform select {
width: 95%;
padding: 5px 0;}

.ignoreboards {
width: 100% !important;
float: none !important;}

#searchBoardsExpand {
overflow: hidden;}

/* Code for new menu */
#main_menu {
display: none;
width: 100%;
position: fixed;
left: 0;
top: 0;
padding: 0;
margin: 0;
height: 100%;
overflow: scroll;
background: #000;
z-index: 2; /* This make sure our lil'menu is at the top of other SMF items */}

#main_menu .dropmenu {
padding: 1% 2% 5% 3%;}

#main_menu .dropmenu li {
float: none;
display: inline-block;
width: 100%;}

.dropmenu li a {
width: 100%;}

#main_menu .dropmenu li:hover ul {
display: none;}

/* Something spicy */
.dropmenu li ul ul {
margin: 0;}

/* Tables (still interesting) */
.table_grid tbody tr {
border: 1px solid #CCC;}

.table_grid th, .table_grid td, .topic_table td.lastpost {
border-bottom: none !important;
border-right: none !important;
display: block;
margin: 0;
padding: 5px 0 !important;
width: 100%;
text-align: center;}

.table_grid tr:nth-of-type(even) {
background: #e7eaef;}

.table_grid tr:nth-of-type(odd) {
background: #f0f4f7;}

.table_grid td {
background: none;}

table.table_grid th:empty, table.table_grid td:empty {
display: none;}

table.table_grid .statsbar div.bar {
float: none;}

/* something for topic icons */
.topic_table .icon1, .topic_table .icon2 {
width: 50%;
display: inline-block;}
}

@media screen and (max-width: 720px) {
body {
padding: 0 !important;
min-width: 200px !important;
max-width: 720px;}

#wrapper, div#wrapper {
width: 100% !important;
min-width: 240px !important;
max-width: 720px !important;}

div#upper_section div.user {
text-align: center;
float: none !important;
width: 100%;
box-sizing: border-box;}

div#upper_section div.user p, div#upper_section div.user p > .avatar {
max-width: 100px;
max-height: 100px;
float:  none !important;
margin: 0 auto;
text-align: center !important;}

#upper_section div.news {
width: 100%;
float: none;
text-align: center;
margin: 0 auto;}

table.table_list tbody.content td.stats {
display: none;}

img.icon  {
display: inline-block;}

#basicinfo, #detailedinfo, .modblock_left, .modblock_right, #live_news, #supportVersionsTable {
width: 100% !important;
float: none;
margin: 0 0 3px;
box-sizing: border-box;
overflow: hidden;}

.postarea, .moderatorbar {
width: 100%;
margin: 0;}

.poster {
float: none;
width: 95%;
height: auto;
margin: auto;
padding: 0px;
min-height: 180px;}

.poster li.avatar img {
width: 100px !important;
height: 100px !important;}

.poster li.blurb, li.postcount, li.im_icons, li.title, li.karma, li.karma_allow, li.gender, li.custom, li.email, li.warning {
display: none;}

.login {
width: auto !important;}

dl {
overflow: hidden !important;}

/* Structure changes means we don't have to show this also saves space for actual topic title */
#forumposts h3 span#author {
display: none;}

.inner {
padding: 1em;
margin: 0;}

.signature, .attachments {
width: 100%;
margin: 1em 0 0;
padding: 1em 1em 3px;
box-sizing: border-box;}

.keyinfo {
background: none;
text-align: center;
width: 100% !important;}

.buttonlist ul {
margin: 0;
padding: 0;}

.buttonlist ul li {
margin: 2px 5px;}

.buttonlist ul li a {
margin: 0;}

.buttonlist ul li a span {
height: auto;}

#main_admsection #basicinfo h4 {
width: 100% !important;}

#left_admsection {
margin: 0 0 8px;
padding: 0 0 5px;
border-bottom: 3px solid #dbe4ef;
float: none;
width: 100%;}

#adm_submenus {
padding: 0;}

/* Try something here */
dl.settings dt, dl.settings dd, #admin_content dt, #admin_content dd {
width: 100%;
float: none;}

dl.settings dt {
margin: 0;}

dl.settings dd {
margin: 0 0 10px 0;}

dl.settings dd select {
max-width: 100%;}

/* some dirty fix for SP :)*/
#sp_left, #sp_right, #sp_center {
width: 100%;
display: block;}

/* Play nice with Maps... Inputs... Select... be a nice lil'thing */
iframe, input, select {
max-width: 100%;}

/* Well to avoid template edit we need some hackish method */
#search_term_input input {
display: block;}

#mlist_search {
width: 100%;}

#mlist_search span.floatleft {
display: block;
width: 100%;
float: none;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
table.table_list tbody.content td.stats {
display: none;}

table.table_list tbody.content td.lastpost, .topic_table table tbody tr td.lastpost {
width: 35% !important;}
}