Index: lams_central/web/css/progressBar.scss
===================================================================
diff -u -r8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9 -r61021ae14733eb44f2c616fb1b11c76d3e81a96d
--- lams_central/web/css/progressBar.scss	(.../progressBar.scss)	(revision 8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9)
+++ lams_central/web/css/progressBar.scss	(.../progressBar.scss)	(revision 61021ae14733eb44f2c616fb1b11c76d3e81a96d)
@@ -39,4 +39,40 @@
 	width: 100%;
 	height: 100%;
 	border: none;
+}
+
+.activityCurrent {
+	fill: rgb(187, 0, 0);
+	stroke: rgb(0, 0, 0);
+}
+
+.activityNotStarted {
+	fill: rgb(0, 153, 0);
+	stroke: rgb(0, 0, 0);
+}
+
+.activityCompleted {
+	fill: rgb(0, 0, 153);
+	stroke: rgb(0, 0, 0);
+}
+
+.activityComplex {
+	fill: rgb(153, 153, 153);
+	stroke: rgb(0, 0, 0);
+}
+
+.gate {
+	fill: rgb(255, 0, 0);
+}
+
+.gateCurrent {
+	stroke: rgb(187, 0, 0);
+}
+
+.gateText {
+	stroke: rgb(255, 255, 255);
+}
+
+.transitionLine {
+	stroke: rgb(0, 0, 0);
 }
\ No newline at end of file
Index: lams_central/web/includes/javascript/progressBar.js
===================================================================
diff -u -r8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9 -r61021ae14733eb44f2c616fb1b11c76d3e81a96d
--- lams_central/web/includes/javascript/progressBar.js	(.../progressBar.js)	(revision 8a6afcdd450adc0cd87ea7dbc69cac9fb14a3fb9)
+++ lams_central/web/includes/javascript/progressBar.js	(.../progressBar.js)	(revision 61021ae14733eb44f2c616fb1b11c76d3e81a96d)
@@ -8,22 +8,6 @@
 	presenceEnabled = presenceEnabled || false,
 	REVIEW_ACTIVITY_TITLE = REVIEW_ACTIVITY_TITLE || 'Review activity',
 
-	//colors used in shapes
-	//dark red
-	COLOR_CURRENT_ACTIVITY = "rgb(187,0,0)",
-	//dark blue
-	COLOR_COMPLETED_ACTIVITY = "rgb(0,0,153)",
-	//green
-	COLOR_TOSTART_ACTIVITY = "rgb(0,153,0)",
-	//black
-	COLOR_STROKE_ACTIVITY = "rgb(0,0,0)",
-	//red
-	COLOR_GATE = "rgb(255,0,0)",
-	//white
-	COLOR_GATE_TEXT = "rgb(255,255,255)",
-	//gray
-	COLOR_COMPLEX_BACKGROUND = "rgb(153,153,153)",
-
 	//SVG paths for activity shapes
 	PATH_START_LINE_HORIZONTAL = 'M 0 18 h 35',
 	PATH_START_LINE_VERTICAL = 'M 70 0 v 20',
@@ -173,30 +157,26 @@
 		// dark red square
 		activity.path = 'M ' + (activity.middle - 8) + ' ' + activity.y
 				+ PATH_SQUARE;
-		activity.fill = COLOR_CURRENT_ACTIVITY;
-		activity.stroke = COLOR_STROKE_ACTIVITY;
+		activity.cssClass = 'activityCurrent';
 		activity.statusTooltip = LABELS.CURRENT_ACTIVITY;
 	},
 
 	shapeCompletedActivity : function(activity) {
 		// dark blue circle
 		activity.path = 'M ' + activity.middle + ' ' + (activity.y + 8)
 				+ PATH_CIRCLE;
-		activity.fill = COLOR_COMPLETED_ACTIVITY;
-		activity.stroke = COLOR_STROKE_ACTIVITY;
+		activity.cssClass = 'activityCompleted';
 		activity.statusTooltip = LABELS.COMPLETED_ACTIVITY;
 	},
 
 	shapeAttemptedActivity : function(activity) {
 		// green square with dark red arc
 		activity.path = 'M ' + (activity.middle - 8) + ' ' + activity.y
 				+ PATH_SQUARE;
-		activity.fill = COLOR_TOSTART_ACTIVITY;
-		activity.stroke = COLOR_STROKE_ACTIVITY;
+		activity.cssClass = 'activityNotStarted';
 		activity.statusTooltip = LABELS.ATTEMPTED_ACTIVITY;
 
-		// this and similar methods are run when activity shape is drawn for
-		// real
+		// this and similar methods are run when activity shape is drawn for  real
 		activity.addDecoration = function(act) {
 			var paper = act.bar.paper;
 			act.decoration = Snap.set();
@@ -211,7 +191,7 @@
 				arc.transform(transformation);
 			}
 			arc.attr({
-				'fill' : COLOR_CURRENT_ACTIVITY,
+				'class' : 'activityCurrent',
 				'opacity' : 0,
 				'cursor' : 'pointer'
 			});
@@ -223,16 +203,15 @@
 		// green triangle
 		activity.path = 'M ' + (activity.middle - 8) + ' ' + activity.y
 				+ PATH_TRIANGLE;
-		activity.fill = COLOR_TOSTART_ACTIVITY;
-		activity.stroke = COLOR_STROKE_ACTIVITY;
+		activity.cssClass = 'activityNotStarted';
 		activity.statusTooltip = LABELS.TOSTART_ACTIVITY;
 	},
 
 	shapeGateActivity : function(activity) {
 		// red octagon for STOP road sign
 		activity.path = 'M ' + (activity.middle - 6) + ' ' + activity.y
 				+ PATH_OCTAGON;
-		activity.fill = COLOR_GATE;
+		activity.cssClass = 'gate';
 
 		activity.addDecoration = function(act) {
 			var paper = act.bar.paper;
@@ -245,7 +224,7 @@
 			text.attr({
 				'opacity'   : 0,
 				'font-size' : 9,
-				'stroke'    : COLOR_GATE_TEXT,
+				'class'     : 'gateText',
 				'cursor'    : 'pointer'
 			});
 			act.decoration.push(text);
@@ -258,7 +237,7 @@
 				var edge = paper.path(act.path);
 				edge.attr({
 					'opacity'      : 0,
-					'stroke'       : COLOR_CURRENT_ACTIVITY,
+					'class'        : 'activityCurrent',
 					'stroke-width' : 3,
 					'fill'         : 'none',
 					'cursor'       : 'pointer'
@@ -284,9 +263,8 @@
 			var square = paper.path('M ' + (act.middle - 13) + ' ' + act.y
 					+ PATH_BIG_SQUARE);
 			square.attr({
-				'opacity' : 0,
-				'stroke' : COLOR_STROKE_ACTIVITY,
-				'fill' : COLOR_COMPLEX_BACKGROUND,
+				'opacity': 0,
+				'class'  : 'activityComplex',
 				'cursor' : 'pointer'
 			});
 
@@ -306,6 +284,7 @@
 		return {
 			'path' : activity.path,
 			'fill' : activity.fill,
+			'class' : activity.cssClass,
 			'stroke' : activity.stroke,
 			'cursor' : 'pointer'
 		}
@@ -349,13 +328,13 @@
 			var line = null;
 			if (isHorizontalBar) {
 				line = paper.path('M ' + (activity.middle + 15) + ' 18 h 30')
-							.attr('stroke', COLOR_STROKE_ACTIVITY)
+							.attr('class', 'transitionLine');
 			} else {
 				var startY = activity.y + label.getBBox().height + (isLarger ? 28 : 18),
 					endY = 20 + 60 * (activity.index + 1);
 				if (startY < endY) {
 					line = paper.path('M ' + activity.middle + ' ' + startY + ' L ' + activity.middle + ' ' + endY)
-								.attr('stroke', COLOR_STROKE_ACTIVITY);
+								.attr('class', 'transitionLine');
 				}
 			}