convore.css

/* Convore Min-Width Userstyle */
/* author: Adam Brault */
/* http://andyet.net*/
/* Would love to see @etmaguire add his own version of something like this to the site. :D */


@media screen and (max-width: 450px) {

	#topic-detail.group * {
	  float: none !important;
	  width: auto !important;
	}

	#topic-detail.group {
	  min-width: 300px !important;

	}

	#topic-detail.group #stripe {
	  z-index: 9999 !important;
	  top: 0 !important;
	  position: z-index !important;
	  width: 100% !important;
	}

	#topic-detail.group #header #logo a {
	  width: 24px !important;
	  left: 15px !important;
	}

	#topic-detail.group #message-list {
	  padding: 0px !important;
	}

	#topic-detail.group #main {
	  width: 100% !important;
	}

	#topic-detail.group #footer {
	  width: 100% !important;
	}

	#topic-detail.group #footer {
	  min-height: 50px !important;
	}

	#topic-detail.group .left, .copyright, #topic-detail.group #post-as-new-topic, #topic-detail.group .you-say {
	  display: none !important;
	}

	#topic-detail.group .topic-title {
	  position: absolute !important;
	  top: 0 !important;
	  z-index: 1000 !important;
	}

	#topic-detail.group .topic-title h2 {
	  width: auto !important;
	}

	#topic-detail.group .header-content {
	  width: 100% !mportant;
	}

	#topic-detail.group .message .user img {
	  position: absolute !important;
	}

	#topic-detail.group .embedded-images li img {
	  margin: 10px 30px !important;
	}

	#topic-detail.group #topic-detail-topic, #topic-detail.group .header-title {
	  border-top: 0px !important;
	}

	#topic-detail.group #header {
	  top: 4px !important;
	  z-index: 100 !important;
	}

	#topic-detail.group .topic-title {
	  padding: 0 !important;
	  margin: 0 !important;
	  left: 40px !important;
	  top: 10px !important;
	  border: 0 none !important;
	  width: 250px !important;
	  z-index: 99999 !important;
	  background: transparent !important;
	  border: 0px none transparent !important;
	  height: auto !important;
	}

	#topic-detail.group .topic-title h2 {
	  text-shadow: #000 0 0 5px;
	  color: white !important;
	  font-size: 16px !important;
	  border: 0 none !important;
	  z-index: 99999 !important;
	  background: transparent !important;
	  border: 0px none !important;
	}


	#topic-detail.group .topic-title .new-topic {
		display: none !important;
	}

	#topic-detail.group #id-message {
	  width: 95% !important
	}

	#topic-detail.group #post-message span {
	  position: absolute !important;
	  display: none !important;
	}

	#topic-detail.group .btn {
	  display: none !important;
	}

	#topic-detail.group #topic-detail-topic.topic-title {
	  position: fixed !important;
	  background: transparent !important;
	  height: 30px !important;
	  z-index: 200 !important;
	  padding: 6px 9px 6px !important;
	  width: 100% !important;
	}

	#topic-detail.group #topic-detail-topic .thumb {
	  display: none !important;
	}

	#topic-detail.group .pad, #global-search, #topic-detail.group .global-unread-count {
	  display: none !important;
	}

	#topic-detail.group #header .header-content {
	  width: auto !important;
	}

	#topic-detail.group #main-menu {
	  display: none !important;
	}

	#topic-detail.group .settings-login-menu {
	  display: none !important;
	}

	#topic-detail.group .gray-btns {
	  display: none !important;
	}

	#topic-detail.group .message .user {
	  float: left !important;
	  margin: 1px 5px 0 0 !important;
	}

	
	/**** hack to display star and reply icons on message hover ****/
	.message .message-entry {
		padding-right: 6px;
		line-height: 1.5em;
	}

	a.star-message.starred, .message:hover a.star-message, .message:hover a.reply-message {
		display: block !important;
	}

	li.message:hover .star a, li.message:hover .reply a, li.message .star a.starred {
		width: 16px !important;
		max-width: 16px;
	}

	li.message:hover .star, li.message:hover .reply {
		display: block;
		position: relative;		
	}

	li.message:hover .delete-message {
		display: block;
		right: 0;
		min-width: 16px;
	}

	li.message:hover .star {
		bottom: 14px;
		left: 200px;
	}

	li.message:hover .reply {
		bottom: 28px;
		left: 217px;
	}

	li.message:hover div.meta {
		max-height: 17px;
	}
	/**** end hack ****/

	/**** displaying groups and mention menu ****/
	#topic-detail.group #main-menu {
		display: block !important;
		float: left !important;
		position: fixed;
		right: 5px;
		left: auto;
		top: 7px;
	}

	#topic-detail.group #main-menu li:nth-child(2n), 
	#topic-detail.group #main-menu li:last-child {
		display: none;
	}

	#topic-detail.group #main-menu li ul li:nth-child(2n),
	#topic-detail.group #main-menu li ul li:last-child {
		display: auto;
	}

	#topic-detail.group .topic-title h2 {
		max-width: 80% !important;
		text-overflow: ellipsis-word;
	}

	#topic-detail.group #main-menu li:first-child {
		top: 21px;
	}

	#topic-detail.group #main-menu li ul li:first-child, #topic-detail.group #main-menu li ul li:nth-child(3n) {
		top: auto;
	}

	#topic-detail.group #main-menu li:nth-child(3n) {
		top: -17px;
	}

	#topic-detail.group #main-menu li a.dropdown {
		margin-bottom: 0;
		display: block;
	}

	#topic-detail.group #topic-detail-topic.topic-title {
		pointer-events: none;
	}

	#main-menu li .dropdown-list {
		left: auto;
		right: 0;
		width: 200px !important;
		-webkit-border-radius: 5px 0 5px 5px;
	}
	/**** end groups and mentions menus ****/

	/**** users online ****/
	#topic-detail.group #header {
		height: 45px;
	}

	#topic-detail.group #top-content, 
	#topic-detail.group #sidebar .box:first-child .title {
		display: none;
	}

	#topic-detail.group #sidebar {
		margin-top: -5px;
		min-width: 100% !important;
	}

	#topic-detail.group #sidebar .box:first-child .pad {
		display: block !important;
		position: relative;
		z-index: 1;
		background: rgba(50,50,50,.35);
		padding: 0 0 3px;
	}

	#topic-detail.group #sidebar .box:first-child .pad ul.userpics {
		padding: 6px 12px 3px;
		background: #fcfcfc;
		border-bottom: 1px solid #999;
		float: left !important;
		min-width: 100% !important;
	}

	#topic-detail.group #sidebar .box:first-child .pad ul.userpics li {
		float: left !important;
	}
	/**** end users online ****/
}