Index: lams_build/lib/lams/lams.jar
===================================================================
diff -u -r3cccb9ba98efd5722b7365ffec582e2889143166 -rf780c279354a916c746b00c223f6ea3a0c545eb0
Binary files differ
Index: lams_learning/web/css/kumalive.scss
===================================================================
diff -u -r3cccb9ba98efd5722b7365ffec582e2889143166 -rf780c279354a916c746b00c223f6ea3a0c545eb0
--- lams_learning/web/css/kumalive.scss	(.../kumalive.scss)	(revision 3cccb9ba98efd5722b7365ffec582e2889143166)
+++ lams_learning/web/css/kumalive.scss	(.../kumalive.scss)	(revision f780c279354a916c746b00c223f6ea3a0c545eb0)
@@ -66,39 +66,26 @@
 	display: none;
 }
 
-.learner .profilePictureWrapper {
-	width: 40px;
-	height: 40px;
-	margin-left: 20px;
+.learner .profilePicture {
+	width: 35px;
+	height: 35px;
 }
 
-.profilePicture {
-	position: relative;
-	border-radius: 100%;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
+.learner .profilePicture:before {
+	font-size: 35px;
+	line-height: 26px;	
 }
 
 .profilePictureHidden {
-	top: 20px;
-	left: 20px;
-	width: 0;
-	height: 0;
-	font-size: 0;
+	opacity: 0;
 }
 
 .profilePictureShown {
-	top: 0;
-	left: 0;
-	width: 40px;
-	height: 40px;
-	font-size: 40px;
+	opacity: 1;
 }
 
 .name {
 	height: 40px;
-	padding-top: 5px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -110,10 +97,14 @@
 .speaker .profilePicture {
 	width: 80px;
 	height: 80px;
-	font-size: 80px;
 	margin: auto;
 }
 
+.speaker .profilePicture:before {
+	font-size: 76px;
+	line-height: 80px;
+}
+
 #teacher {
 	display: none;
 }
@@ -159,10 +150,6 @@
 	color: red;
 }
 
-.scoreNone {
-	color: gray;
-}
-
 .score:last-child hr {
 	display: none;
 }
@@ -183,33 +170,26 @@
 		margin-right: 20px;
 	}
 	
-	.learner .name {
-		font-size: 12px;
-	}
-	
-	.learner .profilePictureWrapper {
+	.learner .profilePicture {
 		width: 80px;
 		height: 80px;
-		margin-left: 0;
 	}
 	
-	.profilePictureHidden {
-		top: 40px;
-		left: 40px;
-	}
-
-	.profilePictureShown {
-		width: 80px;
-		height: 80px;
+	.learner .profilePicture:before {
+		line-height: 70px;	
 		font-size: 80px;
 	}
 	
 	.speaker .profilePicture {
 		width: 200px;
 		height: 200px;
-		font-size: 200px;
 	}
 	
+	.speaker .profilePicture:before {
+		font-size: 196px;
+		line-height: 200px;
+	}
+	
 	.speaker .name {
 		font-size: 18px;
 	}
Index: lams_learning/web/includes/javascript/kumalive.js
===================================================================
diff -u -r2457137471d3c3b4fe64b5c9edb9c0f80448af55 -rf780c279354a916c746b00c223f6ea3a0c545eb0
--- lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision 2457137471d3c3b4fe64b5c9edb9c0f80448af55)
+++ lams_learning/web/includes/javascript/kumalive.js	(.../kumalive.js)	(revision f780c279354a916c746b00c223f6ea3a0c545eb0)
@@ -14,13 +14,11 @@
 	speakerId = null,
 	// rubrics to evaluate speaker
 	rubrics = null,
-	// learners with no profile picture will get an icon with one of these colours
-	learnerColors = ['#001f3f', '#FF851B', '#85144b', '#111111', '#3D9970', '#0074D9', '#FF4136'],
 	// index of user icon colour currently used
 	learnerColorIndex = 1,
 	// template of a HTML structure of a learner
 	learnerDivTemplate = $('<div />').addClass('learner changing')
-		.append($('<div />').addClass('profilePictureWrapper').append($('<div />').addClass('profilePicture profilePictureHidden')))
+		.append($('<div />').addClass('profilePicture profilePictureHidden'))
 		.append($('<div />').addClass('name')),
 	REFRESH_DELAY = 1000,
 	ANIMATION_DURATION = 1000,
@@ -181,12 +179,8 @@
 	// set dialog name
 	$('head title').text(LABELS.KUMALIVE_TITLE + ' ' + message.name);
 	// set teacher portrait and name
-	if (message.teacherPortraitUuid) {
-		$('#actionCell #teacher .profilePicture').css('background-image',
-				'url(' + LAMS_URL + 'download?preferDownload=false&uuid=' + message.teacherPortraitUuid + ')');
-	} else {
-		$('#actionCell #teacher .profilePicture').addClass('fa fa-user-circle-o');
-	}
+	addPortrait($('#actionCell #teacher .profilePicture'), message.teacherPortraitUuid, 
+			message.teacherId, "large", true, LAMS_URL);
 	$('#teacher .name').text(message.teacherName);
 	
 	rubrics = message.rubrics;
@@ -284,14 +278,8 @@
 									   .attr('userId', learner.id)
 									   .appendTo(learnersContainer);
 		var profilePicture = $('.profilePicture', learnerDiv);
-		// use profiel picture or a coloured icon
-		if (learner.portraitUuid) {
-			profilePicture.css('background-image',
-					'url(' + LAMS_URL + 'download?preferDownload=false&uuid=' + learner.portraitUuid + ')');
-		} else {
-			profilePicture.addClass('fa fa-user-circle-o').css('color', learnerColors[learnerColorIndex]);
-			learnerColorIndex = (learnerColorIndex + 1) % learnerColors.length;
-		}
+		// use profile picture or a coloured icon
+		addPortrait(profilePicture, learner.portraitUuid, learner.id, "medium", true, LAMS_URL);
 		$('.name', learnerDiv).text(learner.firstName + ' ' + learner.lastName);
 		
 		if (roleTeacher) {