/* Mobile stylesheet */

/* Layout - set the page width and remove borders/padding on some common elements. */
html {-webkit-text-size-adjust:none}
body {font-size:12px}
#hdr-content, #body-content, #ftr-content {min-width:0; padding:1px; max-width:none}
.bodyHeader {padding:10px}
.area {padding:0 10px}
#body-content {border-left:0; border-right:0; border-radius:0}
#body {padding-top:44px}


/* Header - center the title and float the buttons. */
#hdr-content {padding:0 5px}
#hdr-inner {padding:0}
#hdr #forumTitle {font-size:14px; padding:11px 0; text-align:center; display:block; width:160px; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#hdr .button {margin:6px 0}
#hdr .popupWrapper {float:right; margin:0 0 0 7px}
#hdr #backButton {float:left; margin:13px 5px 0 5px}
#userMenu {margin:0 !important; text-align:left; padding:0}
#hdr #notifications {font-size:12px}


/* Footer */
#ftr-content {padding:10px; overflow:hidden;}


/* Sheets - make them the right width and remove their border. */
.sheet {width:100% !important; left:0 !important; border-radius:0; margin:0 !important}
.sheet.active {border-width:0 0 1px; border-radius:0}
.sheet.active .sheetContent {margin:0; border:0}
.sheet.active {top:0}
.sheet .buttons small {margin:0 0 10px; float:none; display:block}
.sheet .buttons .button {float:none; margin:0 10px 0 0}


/* Messages - make them cover the whole bottom of the screen. */
#messages {left:0; bottom:0; right:0}
.message {display:block; margin:0; border-radius:0; overflow:hidden; border-left:0; border-right:0; border-bottom:0}


/* Forms - unfloat labels. */
.form > li > label {display:block; width:auto; float:none; margin-left:0 !important}
.form > li {padding-left:0 !important}


/* Popup menus - make things bigger so they're easier to tap. */
.popupMenu {padding:0}
.popupMenu li > a, .popupMenu li > span {padding:8px 30px; border-bottom:1px solid #ddd; font-size:110%}
.popupMenu li.sep {margin:0; border-top:1px solid #ddd;}
.popupButton .text {display:none}


/* ...But don't let these changes affect the notifications menu. */
#notificationsPopup {width:318px; font-size:100%}
.notificationsList li > a {border-bottom:0;}


/* Tabs - make them bigger. */
.tabs {font-size:120%}
.tabs.big {padding-left:10px}


/* Search - unfloat the search and hide the gambits. */
.search {float:none; margin-bottom:10px}
.search input[type=text] {width:99%; box-sizing:border-box}
.search.hasControls {padding-right:65px}
.search .popupWrapper {float:right; margin-right:-65px; margin-left:0}
#gambits.popup {width:225px; height:100px; overflow:auto !important; margin:0}

#conversationsFilter .channels li:not(.channelListItem):not(.pathItem):not(.selected) {display:none}
#conversationsFilter .channels {padding-left:0}
#conversationsFilter .channelListItem {margin-left:0}
#conversationsFilter .pathItem {margin-left:0}


/* Lists - give them left/right padding and always show controls. */
.list > li {padding:10px}
.list .controls {visibility:visible}


/* Conversation list */
.conversationList li {padding:10px 10px 13px 30px; overflow:hidden}
.conversationList .col-star {float:left; margin-left:-28px; margin-top:2px; margin-right:0; visibility:visible; padding-left:0.5em}
.conversationList .col-conversation {display:block; margin:0 0 5px; width:auto}
.conversationList .col-channel {display:block; padding-right:5px; margin:0; width:auto; text-align:left}
.conversationList .col-lastPost {padding-right:0; width:auto; margin-right:0; float:none; display: inline-block}
.conversationList .col-replies {float:right; margin:0; width:auto}
.conversationList .col-replies span {font-size:12px}
.conversationList .title {font-size:120%}
.conversationList .avatar {display:none}
#conversationsFooter {padding:10px; margin:0}


/* Channel list */
.channelList > li, .channelList .depth0 {padding:10px}
.channelList .info {display:block; float:none; margin:0 0 0}
.channelList .description {margin:5px 0 0}
.channelList .stats {display:none}


/* Conversation view */
#conversationTitle {display:block; float:none; margin-bottom:10px; font-size:130%}
#conversationHeader {padding:15px 10px}
#conversationHeader .search {display:none}
#conversationHeader .channels {margin-left:0}
#conversationPrivacy, #conversationControls.controls {float:none; margin:10px 10px}
#conversationBody {padding-top:0}
#reply .avatar {display:none}


/* Hide scrubbers. */
.hasScrubber {margin-right:0}
.scrubberColumn {float:none; margin:0; padding:10px 10px 0; width:auto}
.scrubberContent {position:static; width:auto}
.scrubberContent .button {display:inline-block; width:auto; margin-right:5px}
.scrubberContent .popupWrapper {display:inline-block}
.scrubberContent .popupWrapper {display:inline-block}
.scrubber {display:none}


/* Make time markers horizontal. */
.timeMarker {padding:5px 10px; display:block; margin:0 0 5px; border-radius:0}


/* Make posts simple boxes with a thumbnail avatar. */
.post {margin:10px; padding-left:0}
.postContent:after, .postContent:before {display:none}
.post div.avatar {margin:12px -5px 0 15px; position:relative; z-index:50}
.post .avatar {width:20px; height:20px; line-height:20px; font-size:12px; vertical-align:middle}
.postHeader [class*=profile-] {display:none}
.post.edit .controls {float:none; margin-top:10px}
.post .editButtons input {font-size:90%}
.postBody {line-height:1.75em; font-size:12px}


/* Show controls by default, but hide unnecessary ones. */
.hasControls .controls {opacity:1; visibility:visible}
.controls .time, .post .group, .post .editedBy, .post .deletedBy {display:none}


/* Member profile */
#memberProfile {padding:10px}
#memberActions {display:none}
#memberContent {padding:0 10px}
#memberActivity {margin:0 -10px}
div.activity {padding:0 10px}


/* Admin section. We have to !important all of this because this stylesheet is included before admin.css. */
#adminMenu {float:none !important; width:auto !important; padding:10px !important;}
#adminMenu li {float:left !important;}
#adminContent {margin:0 !important; padding:0 !important}
#adminStatistics {float:none !important; width:auto !important}
#adminDashboard {margin:0 !important}
#adminChannels .channelList div .controls {visibility:visible !important}
#skinList .popupWrapper, #pluginList .popupWrapper, #languageList .popupWrapper {display:inline-block !important;}
