Index: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php
===================================================================
--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php	(revision 3300)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php	(working copy)
@@ -42,7 +42,7 @@
 				if ( is_singular( 'post' ) ) {
 					wp_list_comments();
 				} else {
-					wp_list_comments( array( 'callback' => 'wporg_developer_user_note' ) );
+					wporg_developer_list_user_notes();
 				}
 			?>
 		</ol><!-- .comment-list -->
Index: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php
===================================================================
--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php	(revision 3300)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php	(working copy)
@@ -72,82 +72,105 @@
 		}
 	endif;
 
-	if ( ! function_exists( 'wporg_developer_user_note' ) ) :
+	if ( ! function_exists( 'wporg_developer_list_user_notes' ) ) :
 		/**
-		 * Template for user contributed notes.
+		 * List user contibuted notes
 		 *
-		 * Used as a callback by wp_list_comments() for displaying the notes.
+		 * @param integer $post_id Optional. Post id to list comments for
 		 */
-		function wporg_developer_user_note( $comment, $args, $depth ) {
-			$GLOBALS['comment'] = $comment;
+		function wporg_developer_list_user_notes( $post_id = 0 ) {
 
-			if ( 'pingback' == $comment->comment_type || 'trackback' == $comment->comment_type ) : ?>
+			$post_id = absint( $post_id );
 
-				<li id="comment-<?php comment_ID(); ?>" <?php comment_class(); ?>>
-				<div class="comment-body">
-					<?php _e( 'Pingback:', 'wporg' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">', '</span>' ); ?>
-				</div>
+			if ( ! $post_id ) {
+				$post_id = get_the_ID();
+			}
 
-			<?php else : ?>
+			$order    = array();
+			$comments = get_comments( array(
+					'post__in' => array( $post_id ),
+					'type' => 'comment',
+				) );
 
-				<li id="comment-<?php comment_ID(); ?>" <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?>>
-				<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
-					<div class="comment-content">
-						<?php comment_text(); ?>
-					</div>
-					<!-- .comment-content -->
+			if ( empty( $comments ) ) {
+				return;
+			}
 
-					<footer class="comment-meta">
-						<?php DevHub_User_Contributed_Notes_Voting::show_voting(); ?>
-						<div class="comment-author vcard">
-							<span class="comment-author-attribution">
-							<?php if ( 0 != $args['avatar_size'] ) {
-								echo get_avatar( $comment, $args['avatar_size'] );
-							} ?>
+			foreach ( $comments as $key => $comment ) {
+				$order[ $key ] = (int) DevHub_User_Contributed_Notes_Voting::count_votes( $comment->comment_ID, 'difference' );
+			}
 
-							<?php
-								// This would all be moot if core passed the $comment context for 'get_comment_author_link' filter
-								if ( $comment->user_id ) {
-									$commenter = get_user_by( 'id', $comment->user_id );
-									$url = 'https://profiles.wordpress.org/' . esc_attr( $commenter->user_nicename ) . '/';
-									$author = get_the_author_meta( 'display_name', $comment->user_id );
-									$comment_author_link = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
-								} else {
-									$comment_author_link = '';
-								}
-								printf( __( 'Contributed by %s', 'wporg' ), sprintf( '<cite class="fn">%s</cite>', $comment_author_link ) );
+			// sort the posts by votes
+			array_multisort( $order, SORT_DESC, $comments );
+
+			foreach  ( $comments as $key => $comment ) {
+				wporg_developer_user_note( $comment );
+			}
+		}
+	endif;
+
+	if ( ! function_exists( 'wporg_developer_user_note' ) ) :
+		/**
+		 * Template for user contributed notes.
+		 */
+		function wporg_developer_user_note( $comment ) {
+			$GLOBALS['comment'] = $comment;
+			$count = (int) DevHub_User_Contributed_Notes_Voting::count_votes( $comment->comment_ID, 'difference' );
+			$comment_class = ( -1 > $count ) ? 'bad-note' : '';
+			?>
+
+			<li id="comment-<?php comment_ID(); ?>" <?php comment_class( $comment_class ); ?>>
+			<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
+				<header class="comment-meta">
+					<?php DevHub_User_Contributed_Notes_Voting::show_voting(); ?>
+					<div class="comment-author vcard">
+						<span class="comment-author-attribution">
+
+						<?php
+							// This would all be moot if core passed the $comment context for 'get_comment_author_link' filter
+							if ( $comment->user_id ) {
+								$commenter = get_user_by( 'id', $comment->user_id );
+								$url = 'https://profiles.wordpress.org/' . esc_attr( $commenter->user_nicename ) . '/';
+								$author = get_the_author_meta( 'display_name', $comment->user_id );
+								$comment_author_link = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
+							} else {
+								$comment_author_link = '';
+							}
+							printf( __( 'Contributed by %s', 'wporg' ), sprintf( '<cite class="fn">%s</cite>', $comment_author_link ) );
+						?>
+
+						</span>
+						&mdash;
+						<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
+							<time datetime="<?php comment_time( 'c' ); ?>">
+							<?php 
+								printf( _x( '%1$s ago', '%1$s = human-readable time difference', 'wporg' ),
+									human_time_diff( get_comment_time( 'U' ),
+									current_time( 'timestamp' ) )
+								);
 							?>
+							</time>
+						</a>
+						<?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">&mdash; ', '</span>' ); ?>
+					</div>
+				</header>
+				<!-- .comment-metadata -->
 
-							</span>
-							&mdash;
-							Added on <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
-								<time datetime="<?php comment_time( 'c' ); ?>">
-									<?php printf( _x( '%1$s at %2$s', '1: date, 2: time', 'wporg' ), get_comment_date(), get_comment_time() ); ?>
-								</time>
-							</a>
-							<?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">&mdash; ', '</span>' ); ?>
-						</div>
-						<!-- .comment-metadata -->
+				<div class="comment-content">
+					<?php comment_text(); ?>
+				</div>
+				<!-- .comment-content -->
 
-						<?php if ( '0' == $comment->comment_approved ) : ?>
-							<p class="comment-awaiting-moderation"> &mdash; <?php _e( 'Your note is awaiting moderation.', 'wporg' ); ?></p>
-						<?php endif; ?>
+				<?php if ( '0' == $comment->comment_approved ) : ?>
+					<footer class="comment-footer">
+						<p class="comment-awaiting-moderation"><?php _e( 'Your note is awaiting moderation.', 'wporg' ); ?></p>
 					</footer>
-					<!-- .comment-meta -->
+				<?php endif; ?>
+				<!-- .comment-footer -->
 
-					<?php
-					comment_reply_link( array_merge( $args, array(
-						'add_below' => 'div-comment',
-						'depth'     => $depth,
-						'max_depth' => $args['max_depth'],
-						'before'    => '<div class="reply">',
-						'after'     => '</div>',
-					) ) );
-					?>
-				</article><!-- .comment-body -->
-
+			</article><!-- .comment-body -->
+			</li>
 			<?php
-			endif;
 		}
 	endif; // ends check for wporg_developer_user_note()
 
Index: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-voting.php
===================================================================
--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-voting.php	(revision 3300)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-voting.php	(working copy)
@@ -299,10 +299,11 @@
 		$title = ( 0 == self::count_votes( $comment_id, 'total' ) ) ?
 			'' :
 			sprintf( __( '%s like this', 'wporg' ), self::count_votes( $comment_id, 'like_percentage' ) . '%' );
-		$class = '';
 		echo '<span '
-			. 'class="user-note-voting-count ' . esc_attr( $class ) . '" '
-			. 'title="' . esc_attr( $title ) . '">'
+		    . 'aria-live="polite" '
+			. 'class="user-note-voting-count" '
+			. 'title="' . esc_attr( $title ) . '">' 
+			. '<span class="screen-reader-text">' . __('User vote count', 'wporg') . '</span>'
 			. self::count_votes( $comment_id, 'difference' )
 			. '</span>';
 
Index: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss
===================================================================
--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss	(revision 3300)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss	(working copy)
@@ -1132,7 +1132,6 @@
 	}
 
 	.source-code-container {
-		border-right: 1px solid #dfdfdf;
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
@@ -1154,6 +1153,15 @@
 
 	// User contributed notes
 	&.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook {
+
+		.bad-note .comment-content {
+			opacity: .6;
+		}
+
+		.bad-note .comment-content:hover {
+			opacity: 1;
+		}
+
 		.comment-list,
 		.comment-list ol {
 			list-style: none;
@@ -1162,17 +1170,13 @@
 		}
 
 		.comment-list li {
-			padding: 2rem 1.5rem 1rem;
+			margin-top: 2.5rem;
 			background: #fff;
 			overflow: auto;
+			border: 1px solid #dfdfdf;
+			border-radius: 2px;
 
-			&:first-child {
-				padding-top: 1rem;
-			}
-
 			article {
-				border-bottom: 1px solid #dfdfdf;
-				padding-bottom: 1em;
 				overflow: auto;
 			}
 		}
@@ -1187,17 +1191,18 @@
 		}
 
 		.comment-author-attribution {
-			font-weight: bold;
 		}
 
 		.comment-meta {
-			margin: 0 0 1.5em 0;
-			font-size: 0.75em;
+			padding: .5em 1em;
+			background-color: #f7f7f7;
+			overflow: auto;
 		}
 
 		.comment-meta .comment-author cite,
 		.comment-meta .comment-author cite a {
 		}
+
 		.comment-meta a {
 		}
 
@@ -1209,8 +1214,24 @@
 			margin-left: 3.75rem;
 			margin-left: 0;
 			clear: both;
+			padding: 2rem 1.5rem .5rem;
 		}
 
+		.comment-footer {
+			margin: 0 1em;
+			padding: 0 0 1em 0;
+			position: relative;
+			overflow: auto;
+
+			a {
+				float: right;
+			}
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+
 		.comment-content ol {
 			list-style: decimal inside;
 			margin: 0 0 1.5em 0;
@@ -1413,10 +1434,10 @@
 	}
 
 	.user-note-voting {
-		font-size: 1.5em;
+		font-size: 1.2em;
 		clear: left;
 		float: left;
-		margin-top: -5px;
+		margin-top: -2px;
 		margin-right: 10px;
 	}
 	.user-note-voting-up .dashicons, .user-note-voting-down .dashicons {
Index: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css
===================================================================
--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css	(revision 3300)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css	(working copy)
@@ -1315,7 +1315,6 @@
   padding-left: 0;
 }
 .devhub-wrap .source-code-container {
-  border-right: 1px solid #dfdfdf;
   overflow-x: auto;
   overflow-y: hidden;
 }
@@ -1330,6 +1329,12 @@
 .devhub-wrap .comment-content a {
   word-wrap: break-word;
 }
+.devhub-wrap.single-wp-parser-function .bad-note .comment-content, .devhub-wrap.single-wp-parser-method .bad-note .comment-content, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content {
+  opacity: .6;
+}
+.devhub-wrap.single-wp-parser-function .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-method .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content:hover {
+  opacity: 1;
+}
 .devhub-wrap.single-wp-parser-function .comment-list,
 .devhub-wrap.single-wp-parser-function .comment-list ol, .devhub-wrap.single-wp-parser-method .comment-list,
 .devhub-wrap.single-wp-parser-method .comment-list ol, .devhub-wrap.single-wp-parser-hook .comment-list,
@@ -1339,16 +1344,13 @@
   padding: 0;
 }
 .devhub-wrap.single-wp-parser-function .comment-list li, .devhub-wrap.single-wp-parser-method .comment-list li, .devhub-wrap.single-wp-parser-hook .comment-list li {
-  padding: 2rem 1.5rem 1rem;
+  margin-top: 2.5rem;
   background: #fff;
   overflow: auto;
+  border: 1px solid #dfdfdf;
+  border-radius: 2px;
 }
-.devhub-wrap.single-wp-parser-function .comment-list li:first-child, .devhub-wrap.single-wp-parser-method .comment-list li:first-child, .devhub-wrap.single-wp-parser-hook .comment-list li:first-child {
-  padding-top: 1rem;
-}
 .devhub-wrap.single-wp-parser-function .comment-list li article, .devhub-wrap.single-wp-parser-method .comment-list li article, .devhub-wrap.single-wp-parser-hook .comment-list li article {
-  border-bottom: 1px solid #dfdfdf;
-  padding-bottom: 1em;
   overflow: auto;
 }
 .devhub-wrap.single-wp-parser-function .comment-list .avatar, .devhub-wrap.single-wp-parser-method .comment-list .avatar, .devhub-wrap.single-wp-parser-hook .comment-list .avatar {
@@ -1359,19 +1361,30 @@
   padding: 0.125em;
   border: 1px solid #eee;
 }
-.devhub-wrap.single-wp-parser-function .comment-author-attribution, .devhub-wrap.single-wp-parser-method .comment-author-attribution, .devhub-wrap.single-wp-parser-hook .comment-author-attribution {
-  font-weight: bold;
-}
 .devhub-wrap.single-wp-parser-function .comment-meta, .devhub-wrap.single-wp-parser-method .comment-meta, .devhub-wrap.single-wp-parser-hook .comment-meta {
-  margin: 0 0 1.5em 0;
-  font-size: 0.75em;
+  padding: .5em 1em;
+  background-color: #f7f7f7;
+  overflow: auto;
 }
 .devhub-wrap.single-wp-parser-function .comment-content, .devhub-wrap.single-wp-parser-method .comment-content, .devhub-wrap.single-wp-parser-hook .comment-content {
   margin-left: 60px;
   margin-left: 3.75rem;
   margin-left: 0;
   clear: both;
+  padding: 2rem 1.5rem .5rem;
 }
+.devhub-wrap.single-wp-parser-function .comment-footer, .devhub-wrap.single-wp-parser-method .comment-footer, .devhub-wrap.single-wp-parser-hook .comment-footer {
+  margin: 0 1em;
+  padding: 0 0 1em 0;
+  position: relative;
+  overflow: auto;
+}
+.devhub-wrap.single-wp-parser-function .comment-footer a, .devhub-wrap.single-wp-parser-method .comment-footer a, .devhub-wrap.single-wp-parser-hook .comment-footer a {
+  float: right;
+}
+.devhub-wrap.single-wp-parser-function .comment-footer p, .devhub-wrap.single-wp-parser-method .comment-footer p, .devhub-wrap.single-wp-parser-hook .comment-footer p {
+  margin-bottom: 0;
+}
 .devhub-wrap.single-wp-parser-function .comment-content ol, .devhub-wrap.single-wp-parser-method .comment-content ol, .devhub-wrap.single-wp-parser-hook .comment-content ol {
   list-style: decimal inside;
   margin: 0 0 1.5em 0;
@@ -1516,10 +1529,10 @@
   color: #555 !important;
 }
 .devhub-wrap .user-note-voting {
-  font-size: 1.5em;
+  font-size: 1.2em;
   clear: left;
   float: left;
-  margin-top: -5px;
+  margin-top: -2px;
   margin-right: 10px;
 }
 .devhub-wrap .user-note-voting-up .dashicons, .devhub-wrap .user-note-voting-down .dashicons {
