src/scss/ddgc/_comments.scss
/* girl lookit' that body */
.comment-body, 
.thread-header, 
.thread, 
.idea, 
.idea-header, 
.idea__votes, 
.uploaded, 
.uploaded__link,
.notification__comment,
.comment .my_comment.comment-body,
.comment--deep > .comment-body > .row.content {
    border: 1px solid #cacaca;
    position: relative;		
    z-index: 1;
    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}


/*
    Forum Stylin'
*/

.forum-nav {
	float: left;
}
.head--forum { 
	text-align: center;
	padding-top: 0;
	padding-bottom: 8px;	
	margin-top: -2px;
}
	.content-box__head.head--forum {
		margin-top: 0;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.head--forum .button-group--nav, .head--forum .pager-wrap {
		margin: 3px 0;
	}
	.head--forum .button.disabled { opacity: 1; }
	.buttonimg { padding-top: 2px; }
	.head--forum .pager-wrap {
		float: right;
	}

.forum-item {
    position: relative;
    padding-top: 8px;
    padding-left: 16px; 
    padding-bottom: 4px;
}
    .forum-item__title-wrap,
	.forum-item__title{
		position: static !important; /* so that the icon can escape */
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
	}
	
	.forum-item__title { 
		display: block; 		
	}
        .forum-item__title:visited { color: #5433b3; }
    .forum-item__title .icon {
        position: absolute;
        top: 16px;
        left: -8px;
        color: #d9d9d9;
    }
        .forum-item__title:hover .hv {
            text-decoration: underline;
        }
    .forum-item .thread-icons {
        float: right;
		position: relative;
		top: -2px;
        right: 0;		
		margin-left: 5px;
    }
    .forum-item__reply-count { 
        color: #7a7b80; 
        float: right;
    }
	.reply-count {
		display: block;
		line-height: 1.2;
		font-size: 13px;
		padding-top: 4px;		
	}
		.reply-count__icon {
			font-size: 80%;
			color: #d9d9d9;
		}
	
	.reply-count,
	.reply-info {
		text-align: right;
	}	
	@media only screen and (max-width: 40em) {	
		.reply-count,
		.reply-info {
			text-align: left;
		}
	}
/*
	Forum Sorting
*/
	
.sorting {
	display: block;
	position: relative;
}
.sorting--after {
	margin-top: -6px;
	margin-bottom: 10px;
	text-align: right;
}
	.sorting__label {
		display: inline-block;
		padding: 0 8px 0 13px;
		color: #999;
	}
	.sorting__buttons {
		margin-top: -3px;
	}
		.sorting__buttons > .button {
			font-size: 12px;
			opacity: 1;	/* countering the disabled opacity, should be fixed in ddgc_static */
		}
	
	
/*
    Thread View
*/
.thread-wrap {
    position: relative;   
}
.thread {
    margin-bottom: 18px;
    display: table;
    width: 100%;
    padding-right: 21px;
}
.thread-rule {
    margin-top: 10px;
    margin-bottom: 5px;
}
.thread-header, .idea-header {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: #f3f3f3;
    margin-bottom: 13px;    
}
	.thread-title h1,
	.thread-title h2,
	.idea-title h1,
	.idea-title h2{
		line-height: 1.2;
	}
	.thread-title__icon, 
	.idea-title__icon { 
		margin-top: 2px;
		color: #b1b2b6; 
	}
	
.thread-header, .thread, .uploaded, .uploaded--title {
    margin-left: -22px;    
}

.thread-title {    
    margin: 0 60px 0 0;
}
	.thread-title h1 {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        margin: 0;		
    }
    .thread-title h2 {
        font-size: 14px;
        margin: 0;
    }
    
.thread-icons {
    position: absolute;
    top: 0.35em;
    right: 10px;
    font-size: 1.3em;
}
    .thread-icon { color: #b1b2b6; }
    .thread-icon--good { color: #48af04; }    
    .thread-icon--stuck { color: #4b8df8;}
    
.thread__user {
    position: relative;
    display: table-cell;
    vertical-align: top;
    width: 92px;
    background-color: #f3f3f3;
    border-right: 1px solid #d9d9d9;
    -webkit-box-shadow: inset -1px 0 0 #fff;
    -moz-box-shadow: inset -1px 0 0 #fff;
    box-shadow: inset -1px 0 0 #fff;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}    
    .thread__body { 
		display: block;
		/* 
			prevent breakage on preformatted posts 
			needed because the parent is set to 'display: table', 
			so max-width is ignored.
		*/
		max-width: 43em; 
	}
    .thread__body--scroll { 
        display: block;
        overflow: auto; 
        max-height: 14em;
        position: relative;
        left: 16px;        
    }
        .thread__body--scroll .thread-content { padding-left: 0; }    
    
    .thread__user img { 
        display: block; 
        margin: 0 auto;
    }
	.thread__user .userbadge {
		position: absolute;
		margin: auto;
		bottom: 8px;
		top: auto;
		right: 0;
		left: 0;
	}
    .thread__user .user-name, .uploaded__name { 
        font-size: 0.85em;        
        display: block;
        text-align: center;
        width: 95%;
        padding: 13px 2.5% 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
    
.thread__foot {
    position: relative; 
    left: 21px;
    margin-left: -21px;
    border-top: 1px solid #d9d9d9;
    -moz-border-radius: 0 0 5px 0;
    -webkit-border-radius: 0 0 5px 0;
    border-radius: 0 0 5px 0;
}
    
.thread__user, .thread-content {    
    padding-bottom: 18px;
}
.thread-content {
    padding-top: 18px;
    padding-left: 10px;
}

/*
	Uploaded Files
*/
.uploaded {
	background-color: #f3f3f3;
	overflow: hidden;
	padding: 5px 0;
	margin-bottom: 10px;
	text-align: center;
}
	.uploaded__link, .uploaded__thumb, .uploaded__name, .uploaded__icon {
		display: block;
		-webkit-transition: all 0.25s;
		-moz-transition: all 0.25s;
		-o-transition: all 0.25s;
		transition: all 0.25s;
	}
	.uploaded__link {
		display: inline-block;
		color: #515358;
		padding: 5px;
		margin: 5px;		
		position: relative;
	}
		.uploaded__name,
		.uploaded__icon {
			opacity: 0;
			visibility: hidden;
		}
		.uploaded__name {
			position: absolute;
			bottom: 20%;
			left: 0;
		}
		.uploaded__thumb {
			min-height: 100px;
		}
		.uploaded__icon {
			/* assuming we also have an icon class attached */
			font-size: 3em;
			position: absolute;
			top: 40%;
			left: 50%;
			margin-left: -0.5em;
			margin-top: -0.5em;
		}
		.uploaded__link:hover .uploaded__icon,
		.uploaded__link:hover .uploaded__name	{
			opacity: 0.7;
			visibility: visible;
		}
		.uploaded__link:hover .uploaded__thumb {
			opacity: 0.1;
		}

/*
    Ideas Forum
*/
.idea {
    display: block;
    position: relative;
    padding: 13px 13px 13px 30px;
}
.idea--preview {
    padding-left: 13px;
    position: relative;
}
.idea--has-title {
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

    .idea--preview__title {
        font-weight: bold;
        font-size: 16px;
        padding-top: 0.5em;
        padding-bottom: 0.25em;
        margin: 0;
    }
    .idea--preview__votes {
        padding-top: 8px;
    }
    .idea__label {
        float: left;
        margin-right: 0.5em;
        color: #7a7b80;
    }
    .idea__icon {
        position: absolute;
        top: 12px;
        left: -8px;
        color: #d9d9d9;
        font-size: 18px;
    }
    .idea-header--controls {
        padding-right: 10px;
    }
        .idea-header__form-label { 
            line-height: 32px; 
            float: left;
            padding-right: 13px;
        }
    
    .idea__votes {
        background-color: #f7f7f7;
        padding: 13px;
        float: left;
        margin-right: 18px;
    }
        .idea__votes--rev {
            float: right;
            margin-right: 0;
            margin-left: 18px;
        }
    
    .idea-header {
        padding-top: 5px;
        padding-bottom: 5px;
    }
        .idea-header--title {
            margin-bottom: -1px;
            -moz-border-radius: 5px 5px 0 0;
            -webkit-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
        }
    .idea-title__text, .idea-title__icon { padding-top: 5px; padding-bottom: 5px; }
    
    .idea-title h1 {
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        margin: 0;
    }
    .idea-title h2 {
        font-size: 16px;
        margin: 0;   
    }
        .idea-title__icon { 
            font-size: 20px; 
            margin-right: 0.5em;
            float: left;
        }
        .idea-title__text {
            display: block;
            overflow: hidden;
        }
    
    /* idea status tag */
    .tag.idea-status {
        border: none;
		text-shadow: 0 -1px 0 rgba(100,100,100,0.25);
        -webkit-box-shadow: inset 0 1px 0 rgba(100,100,100,0.1), inset 1px 0 1px rgba(100,100,100,0.15), inset -1px 0 1px rgba(100,100,100,0.15), inset 0 -1px 0 rgba(100,100,100,0.25), 0 1px 3px rgba(0,0,0,0.2);
        box-shadow: inset 0 1px 0 rgba(100,100,100,0.1), inset 1px 0 1px rgba(100,100,100,0.15), inset -1px 0 1px rgba(100,100,100,0.15), inset 0 -1px 0 rgba(100,100,100,0.25), 0 1px 3px rgba(0,0,0,0.2);
    }

/*
    Comments
*/
.comment { position: relative; }
.comment.row { margin: 8px auto; }
	.comment--solo { margin-top: -8px; }
	.comment--solo-rule { margin-bottom: 10px;}

	/*.blog-content .comment.tier1 { margin-right: 4px; }*/
	.comment.row .comment.row { margin: 0 auto 2px; }
	.comment .user-avatar, .comment_reply .user-avatar{ 
		width: 48px;
		height: 48px;
		line-height: 48px;
		font-size: 200%;
		position: absolute;
		top: 8px;
		left: 0;
		float: none; 
	}
		.comment .comment .user-avatar, .comment .comment-body .comment_reply .user-avatar { 
			width: 32px; 
			height: 32px; 
			line-height: 32px; 
			font-size: 150%; 
			left: 14px;
			top: 9px;
		}
		.lt-ie9 .comment .comment .user-avatar img, .lt-ie9 .comment .comment-body .comment_reply .user-avatar img { height: 32px; }
		
	.comment-meta, .comment-foot a, .thread__foot a { 		
		color: #7a7b80;
		font-size: 0.85em;
	}		
		.comment-meta {
			display: block; 
			line-height: 1;
			margin: 4px auto 8px;
			position: relative;
		}
			.comment-meta__link {
				display: inline-block;
			}
			.comment-meta a:hover {
				color: #000;
			}
			
		.comment-meta .comment-toggle {
			color: #d8d8d8;			
			font-size: 1.5em;			
			margin-top: -6px;
			display: inline-block;
			height: 12px;
			overflow:visible;
			
			position: relative;			
			left: 6px;
			top: 3px;
				
		}
			.comment-meta .comment-toggle:hover {
				color: #b8b8b8;	
			}
			.comment-meta .comment-toggle:active {
				color: #a8a8a8;	
			}
		.voting + .comment-body .comment-meta { padding-right: 5px; }
	.comment-foot {
        -moz-border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    .comment-foot, .thread__foot {
		overflow: hidden;
		background: #f3f3f3;		
		-webkit-box-shadow: inset 0 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;
	}
		.comment.row .comment-body .comment-foot.row { padding: 0; border-top: 1px solid #d9d9d9; }
		.comment-foot a, .thread__foot a {			
			line-height: 34px;
			padding: 0 14px 0 18px;			
			height: 34px;
			display: block;
			float: left;
			border-right: 1px solid #d9d9d9;
			-webkit-box-shadow: 1px 0 0 #fff;
			-moz-box-shadow: 1px 0 0 #fff;
			box-shadow: 1px 0 0 #fff;
		}
            .comment-foot a.hide, .thread__foot a.hide {
                display: none;
            }
            .comment-foot a.right, .thread__foot a.right,
            .comment-foot a.pull-right, .thread__foot a.pull-right   {
                float: right;
                border-left: 1px solid #d9d9d9;
                margin-right: -1px;
            }
			.comment-foot a:hover, .thread__foot a:hover { background: #fff; }
			.comment-foot__icon, .thread__foot__icon, .comment-foot a .icon-search, .comment-foot a .icon-bubble { 
				color: #b1b2b6; 
				font-size: 1.3em;
				position: relative;
				left: -6px;
				top: 2px;
			}
			
		.comment-foot .comment-meta {
			display: inline-block; 
			margin: 0 0 0 16px;			
			line-height: 34px;
		}	
    .comment-deleted  { font-style: italic; }
    .comment-body { margin: 0 0 0 71px; }
		.voting + .comment-body { margin-right: 34px; }
		.comment-body .comment-body { margin-left: 49px; }
		.comment.row .comment-body .row { padding: 8px 10px 8px 13px; }
		.comment.row .comment-body .comment.row { padding-top: 0; }
		.comment-body p, .comment-body .p { margin: 4px auto; color: #464749; font-size: 1.05em; }		
		.comment-body:after, .comment-body:before { 
			display: block; 
			position: absolute; 
			z-index: -1; 
			content: ""; 
			width: 0; 
			height: 0;     
			top: 21px;
			border-bottom: 9px solid transparent; 
			border-top: 9px solid transparent;        
			border-left: 0;
		}  
		 .comment-body .comment-body:after, .comment-body .comment-body:before {
			top: 17px; 
		 }
		  .comment-body:before {    
			left: -10px; 
			border-right: 9px solid #cacaca;     
		  }
		  .comment-body:after {    
			left: -8px;
			border-right: 9px solid #fff; 
		  }
	
	/* 
		Comment Highlighting
		
		.comments--old is a wrapper that darkens all comments 
		.comment--old is singular
	*/
	
	.comments--old .comment-body,
	.comments--old .comment--deep > .comment-body > .row.content,
	.comment--old > .comment-body,
	.comment--old.comment--deep > .comment-body > .row.content {
		background-color: #f9f9f9;
	}
		.comments--old .comment-body:after,
		.comment--old > .comment-body:after {
			border-right-color: #f9f9f9;
		}
		
	.comments--old .comment--new > .comment-body,
	.comments--old .comment--new.comment--deep > .comment-body > .row.content{
		background-color: #fff;
	}
		.comments--old .comment--new > .comment-body:after {
			border-right-color: #fff;
		}
			
	/* highlight user's own comments */
	.comment--own > .comment-body,
	.comment--own.comment--deep > .comment-body > .row.content {
		background-color: #f3f7fb;
		border-color: #bed6eb;
	}
		.comment--own > .comment-body:after {
			border-right-color: #f3f7fb;
		}
		.comment--own > .comment-body:before {
			border-right-color: #bed6eb;
		}		
		.comment--own > .comment-body > .row > .comment-meta {
			color: #40556a;
		}
	
	/* highlight special comments */
	.comment--highlight > .comment-body,
	.comment--highlight.comment--deep > .comment-body > .row.content {
		background-color: #fefde4;
		border-color: #d9d442;
	}
		.comment--highlight > .comment-body:after {
			border-right-color: #fefde4;
		}
		.comment--highlight > .comment-body:before {
			border-right-color: #d9d442;
		}		
		.comment--highlight > .comment-body > .row > .comment-meta {
			color: #8e8c4c;
		}
	
	/* reset for deep nested items ... */
	.comment--own.comment--deep > .comment-body,
	.comment--highlight.comment--deep > .comment-body,	
	.comments--old .comment--new.comment--deep > .comment-body {
		background: none;
	}

/* the reply field */
		
.row.tier1-new { margin-bottom: 13px; }
.comment_reply { position: relative; }
	.comment_reply .comment_reply { margin-top: -18px; }
	.comment_reply .user-avatar, .comment .comment-body .comment_reply .user-avatar { left: 0; }
	.lt-ie9 .comment .comment-body .comment_reply .user-avatar { position: absolute; top: 24px; }
	  
		  
/* for display on the translation page */
.row.comments .comment_add_title { margin: 0 0 8px; color: #8f8f8f; font-size: 1em; }
/*.row.comments .tier1-new { margin-right: 13px; }	  */
		  
.comment .voting {
	position: absolute;
	top: 8px;
	right: 0;
	z-index: 10;
}
	.comment .comment .voting { right: 9px; }
	.comment .voting .button {
		display: block;
		width: 26px;
		height: 25px;
		line-height: 25px;
		padding: 0;		
		margin: 0 auto 5px;
		font-size: 0.7em;
	}
	
.voting .button {
	color: #9c9c9c;
}	
	.voting .upvote:hover, .voted .upvote.voted { color: #64bb36; }
	.voting .downvote:hover, .voted .downvote.voted { color: #c6210e; }
	.voted .button:before { opacity: 0.1; }	
	.voted .button.voted:before, .voted .button:hover:before { opacity: 1; }	

.comment .voting .votes	{ 
	font-size: 1em; 	
	position: absolute;	
	right: 34px;
	text-align: right;
	height: 25px;
	line-height: 25px;
}
	.comment .voting .votes.positive	{ color: #d0efbf; top: 3px; }
	.comment .voting .votes.negative	{ color: #f1d1cd; top: 35px; }
	
/* the original design had the voting buttons outside the comment body 
   - this moves them inside (same as media query below) */
.comment .voting { top: 5px; right: -1px; }
	.comment .comment .voting { top: 13px; }
	.voting + .comment-body { margin-right: 0; }
		.voting + .comment-body p { padding-right: 13px; }
		.voting + .comment-body .comment-meta { padding-right: 16px; }
		
.comment_add_title { margin: 18px 0 0; }
	
/* simple control of comment tiers - broken up to be easier to read and comprehend */
.min.tier1 .comment.tier2, .min.tier1 .max-msg, .max.tier1 .min-msg { display: none; }
.max.tier1 .comment.tier2 { display: block; }
.max.tier1 .max-msg, .min.tier1 .min-msg { display: inline; }
	.min.tier2 .comment.tier3, .min.tier2 .max-msg, .max.tier2 .min-msg { display: none; }
	.max.tier2 .comment.tier3 { display: block; }
	.max.tier2 .max-msg, .min.tier2 .min-msg { display: inline; }
		.min.tier3 .max-msg, .max.tier3 .min-msg { display: none; }
		.max.tier3 .comment.tier2 { display: block; }
		.max.tier3 .max-msg, .min.tier3 .min-msg  { display: inline; }
		
/* generic child selectors to do the same thing */
.min.comment > .comment-body > .comment, 
.min.comment > .comment-body > .comment-foot > .comment-toggle > .max-msg,
.max.comment > .comment-body > .comment-foot > .comment-toggle > .min-msg,
.min.comment > .comment-body > .comment-meta > .comment-toggle { display: none; }

.max.comment > .comment-body > .comment { display: block; }

.min.comment > .comment-body > .comment-foot > .comment-toggle > .min-msg,
.max.comment > .comment-body > .comment-foot > .comment-toggle > .max-msg{ display: inline; }


/* deep comments.  this is a specificity nightmare! :) */

/* this is where everything changes ... */
.tier3 .comment-body:after, .tier3 .comment-body:before {
	z-index: 2;
}
	.tier3 .comment-body:before {
		left: -9px;
	}

.tier3, .tier4 {	
	padding-bottom: 0 !important;
}

.tier4 .user-avatar.icon-user {
	left: -36px;
}

.comment-body .tier4 .comment-body { margin-left: 0; }

.tier4 .comment_reply .comment-body:after, .tier4 .comment_reply .comment-body:before {
	display: none;
}
	.tier4 .comment_reply .user-avatar { display: none !important; }

	/*
	.tier3 .comment-meta {
		padding-right: 12px;
	}	
	.tier3 .comment-meta .comment-toggle {
		position: absolute;
		right: 0;
		top: 3px;
		left: auto;
	}
	*/
.comment--deep .comment-body {
	border: none;	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.comment--deep > .comment-body > .row.content {
	margin-bottom: 8px;
}
	.comment--deep > .comment-body > .row.content:last-child {
		
	}
	
.comment.row.comment--deep .comment-body .comment.row,
.comment--deep .row.comment {
	padding-right: 0;
	padding-bottom: 0;
}
	
/*--------------------------------------------------
Comment Forms
-------------------------------------------------- */	
.comment_reply textarea {
	max-width: 100%;
	border: none;
	padding: 1.8em 19px 8px;
}
/*
	.comment_reply textarea::-webkit-input-placeholder { color:#444; }
	.comment_reply textarea::-moz-placeholder { color:#444; }
	.comment_reply textarea:-ms-input-placeholder { color:#444; }
	.comment_reply textarea:-moz-placeholder { color:#444; }
*/
	.comment_reply textarea:focus { 
		color: #000;
		outline: medium none;		
		-moz-box-shadow: 0 0 5px #fff;
		-webkit-box-shadow: 0 0 5px #fff;
		box-shadow: 0 0 5px #fff;
	}

.comment_reply .button {
    float: left;
}    
.comment_reply .submit{
	float: right;
	font-weight: normal;	
	padding: 5px 8px 4px;	
}
	.comment_reply .button-group { margin-top: -1px; }
    .comment-controls.button-group { 
        display: block; 
        text-align: right;
    }
        .form-wrap .comment-controls .button { 
            padding-left: 12px; 
            padding-right: 12px;           
        }
	
	/* re-ordering and re-styling on purpose so that the tab control doesn't get screwed-up */
	.comment_reply .button-group .button.submit {
		margin-left: -1px; 	
		-moz-border-radius-bottomleft: 0;
		-webkit-border-bottom-left-radius: 0;
		border-bottom-left-radius: 0;
		-moz-border-radius-topleft: 0;
		-webkit-border-top-left-radius: 0;
		border-top-left-radius: 0;
		-moz-border-radius-topright: 0px;
		-webkit-border-top-right-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 3px;
		-moz-border-radius-bottomright: 3px;
		-webkit-border-bottom-right-radius: 3px;		
	}	
	.comment_reply .button-group > .button:nth-child(2) {
		margin-left: 0;
		-webkit-border-bottom-left-radius: 3px;
		border-bottom-left-radius: 3px;
		-webkit-border-top-left-radius: 0px;
		border-top-left-radius: 0px;
		-moz-border-radius-bottomleft: 0px;
		-moz-border-radius-topleft: 0px;
	}
	.comment_reply .button-group > .button:last-child {
		-moz-border-radius-topright: 0px;	
		-webkit-border-top-right-radius: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-bottomright: 0px;
		-webkit-border-bottom-right-radius: 0px;
		border-bottom-right-radius: 0px;			
	}


@media only screen and (max-width: 65em) {	

.thread-header, .thread, .uploaded, .uploaded--title  {
	margin-left: 0;
}
.thread {
	padding-right: 0;
}
	.thread__body {
		padding-right: 10px;
	}
    .thread__foot {
        left: 0;
        margin-left: 0;
    }
	
	/* Admins have a lot of buttons... simplify it for them. */
	.loggedin--admin .thread__foot a {
		padding: 0 12px;
	}
	.loggedin--admin .thread__foot__txt {
		display: none;
	}
	.loggedin--admin .thread__foot__icon {
		left: 0;
	}
	
}

@media only screen and (max-width: 40em) {
	.forum-nav,
	.head--forum .pager-wrap {
		float: none;
		text-align: center;
	}
	
	.thread, .thread__body {
		display: block;
	}
	.thread__user {
		display: block;    
		width: auto;    
		border-right: none;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 5px;
		-moz-border-radius: 5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}
		.thread__user .user-name {
			text-align: left;
			padding-left: 30px;
			padding-top: 10px;
			font-weight: bold;
		}
		.thread__user .userpic {
			width: 16px;
			position: absolute; 
			top: 10px;
			left: 8px;
		}
		.thread__user .userbadge {
			position: relative;
			display: inline;
			bottom: -2px;
		}
	
	.comment .user-avatar,
	.comment_reply .user-avatar{ 
		width: 32px; 
		height: 32px; 
		line-height: 32px; 
		font-size: 150%;
		top: 16px;
	}
	.comment-body { margin-left: 52px; }
	.thread-content .comment-meta {
		margin-top: -6px;
	}
}

@media only screen and (max-width: 30em) {	
	.comment .voting { top: 13px; right: -1px; }
	.voting + .comment-body { margin-right: 0; }
		.voting + .comment-body p { padding-right: 13px; }
		.voting + .comment-body .comment-meta { padding-right: 16px; }	
	.comment-body, .comment-body .comment-body, .row.comments .tier1-new { margin: 0; }
		.comment .user-avatar, .comment_reply .user-avatar { display: none; }
		.comment-body:after, .comment-body:before { 
			display: none;
		}
}
