diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 29084da7ed..60574d7e2e 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -149,46 +149,13 @@
     color: #fff;
 }
 
-/* Firefox and Polyfill */
 .itemProgress {
-    border: solid #222222 1px;
-    background: #444444 !important; /* !important only needed in polyfill */
-    border-radius: 0!important;
-    height: 14px;
-    opacity: .7;
+    vertical-align: top;
+    font-size: 20px;
+    color: #6FBD45;
+    margin-right: 10px;
 }
 
-    /* Chrome */
-    .itemProgress::-webkit-progress-bar {
-        background: #444444;
-        border-radius: 0!important;
-    }
-
-    /*
- * Background of the progress bar value
- */
-
-    /* Firefox */
-    .itemProgress::-moz-progress-bar {
-        border-radius: 0!important;
-        background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-    }
-
-    /* Chrome */
-    .itemProgress::-webkit-progress-value {
-        border-radius: 0!important;
-        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
-        background-image: -webkit-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-    }
-
-    /* Polyfill */
-    .itemProgress[aria-valuenow]:before {
-        border-radius: 0!important;
-        background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-        background-image: -ms-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-        background-image: -o-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-    }
-
 .posterDetailViewItem {
     background: #333;
     padding: 10px 10px 3px;
@@ -200,6 +167,12 @@
     position: relative;
 }
 
+
+    .posterDetailViewItem .itemProgress {
+        font-size: 14px;
+        font-weight: bold;
+    }
+
     .posterDetailViewItem .starRating {
         width: 15px;
         height: 13px;
@@ -211,7 +184,7 @@
 }
 
 .posterDetailViewItem p {
-    margin: .75em 0;
+    margin: .35em 0;
 }
 
 .posterDetailViewItem .imgUserItemRating {
@@ -232,8 +205,9 @@
     font-weight: bold;
 }
 
-.posterDetailViewItem .userDataIcons {
-    display: none;
+.posterDetailViewItem .userDataIcons img {
+    height: 14px;
+    width: 14px;
 }
 
 .detailPagePrimaryInfo {
@@ -258,8 +232,17 @@
         max-height: 140px;
     }
 
-    .posterDetailViewItem .userDataIcons {
-        display: block;
+    .posterDetailViewItem .userDataIcons img {
+        height: 18px;
+        width: 18px;
+    }
+
+    .posterDetailViewItem p {
+        margin: .75em 0;
+    }
+
+    .posterDetailViewItem .itemProgress {
+        font-size: 17px;
     }
 }
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index f79123674a..f103146229 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -130,10 +130,6 @@
 
                 html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
 
-                if (item.PlayedPercentage || (item.UserData && item.UserData.PlaybackPositionTicks)) {
-                    html += '<p>' + LibraryBrowser.getProgressBarHtml(item) + '</p>';
-                }
-
                 html += '</div>';
 
                 html += LibraryBrowser.getNewIndicatorHtml(item);
@@ -366,27 +362,6 @@
             return '';
         },
 
-        getProgressBarHtml: function (item) {
-
-            var html = '';
-
-            var tooltip;
-
-            if (item.PlayedPercentage) {
-
-                tooltip = parseInt(item.PlayedPercentage) + '% watched';
-                html += '<progress class="itemProgress" min="0" max="100" value="' + item.PlayedPercentage + '" title="' + tooltip + '"></progress>';
-            }
-            else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
-
-                tooltip = DashboardPage.getDisplayText(item.UserData.PlaybackPositionTicks) + " / " + DashboardPage.getDisplayText(item.RunTimeTicks);
-
-                html += '<progress class="itemProgress" min="0" max="100" value="' + (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) + '" title="' + tooltip + '"></progress>';
-            }
-
-            return html;
-        },
-
         getAveragePrimaryImageAspectRatio: function (items) {
 
             var values = [];
@@ -568,6 +543,28 @@
 
             var html = '';
 
+            var tooltip;
+            var pct;
+
+            if (item.PlayedPercentage) {
+
+                tooltip = '';
+                pct = item.PlayedPercentage;
+            }
+            else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
+
+                tooltip = DashboardPage.getDisplayText(item.UserData.PlaybackPositionTicks) + " / " + DashboardPage.getDisplayText(item.RunTimeTicks);
+
+                pct = (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) * 100;
+            }
+
+            if (pct) {
+
+                pct = parseInt(pct);
+
+                html += '<span title="' + tooltip + '" class="itemProgress">' + pct + '%</span>';
+            }
+
             var userData = item.UserData || {};
 
             var itemId = item.Id;
@@ -980,9 +977,9 @@
         },
 
         getGalleryHtml: function (item) {
-            
-		    var html = '';
-		    var i, length;
+
+            var html = '';
+            var i, length;
 
             var imageTags = item.ImageTags || {};
 
@@ -994,110 +991,110 @@
             if (imageTags.Logo) {
 
                 html += LibraryBrowser.createGalleryImage(item.Id, "Logo", imageTags.Logo);
-		    }
-		    if (imageTags.Thumb) {
+            }
+            if (imageTags.Thumb) {
 
-		        html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
-		    }
-		    if (imageTags.Art) {
+                html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
+            }
+            if (imageTags.Art) {
 
-		        html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
+                html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
 
-		    }
-		    if (imageTags.Menu) {
+            }
+            if (imageTags.Menu) {
 
-		        html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
+                html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
 
-		    }
-		    if (imageTags.Disc) {
+            }
+            if (imageTags.Disc) {
 
-		        html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
-		    }
-		    if (imageTags.Box) {
+                html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
+            }
+            if (imageTags.Box) {
 
-		        html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
-		    }
+                html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
+            }
 
-		    if (item.BackdropImageTags) {
+            if (item.BackdropImageTags) {
 
-			    for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
-				    html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
-			    }
+                for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
+                    html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
+                }
 
-		    }
+            }
 
-		    if (item.ScreenshotImageTags) {
+            if (item.ScreenshotImageTags) {
 
-			    for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
-				    html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[0], i);
-			    }
-		    }
+                for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
+                    html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[0], i);
+                }
+            }
 
-		    return html;
-	    },
+            return html;
+        },
 
         createGalleryImage: function (itemId, type, tag, index) {
 
-			var downloadWidth = 400;
-			var lightboxWidth = 800;
-			var html = '';
+            var downloadWidth = 400;
+            var lightboxWidth = 800;
+            var html = '';
 
-			if (typeof (index) == "undefined") index = 0;
+            if (typeof (index) == "undefined") index = 0;
 
-			html += '<div class="posterViewItem" style="padding-bottom:0px;">';
-			html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
-			html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
-				type: type,
-				maxwidth: downloadWidth,
-				tag: tag,
-				index: index
-			}) + '" />';
-			html += '</div>';
+            html += '<div class="posterViewItem" style="padding-bottom:0px;">';
+            html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
+            html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
+                type: type,
+                maxwidth: downloadWidth,
+                tag: tag,
+                index: index
+            }) + '" />';
+            html += '</div>';
 
-			html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
-			html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
-			html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
-				type: type,
-				maxwidth: lightboxWidth,
-				tag: tag,
-				index: index
-			}) + '" />';
-			html += '</div>';
+            html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
+                type: type,
+                maxwidth: lightboxWidth,
+                tag: tag,
+                index: index
+            }) + '" />';
+            html += '</div>';
 
-			return html;
-		},
+            return html;
+        },
 
-	    createCastImage: function (cast) {
+        createCastImage: function (cast) {
 
-			var html = '';
+            var html = '';
 
-			var role = cast.Role || cast.Type;
+            var role = cast.Role || cast.Type;
 
-			html += '<a href="itembynamedetails.html?person=' + cast.Name + '">';
-			html += '<div class="posterViewItem posterViewItemWithDualText">';
+            html += '<a href="itembynamedetails.html?person=' + cast.Name + '">';
+            html += '<div class="posterViewItem posterViewItemWithDualText">';
 
-			if (cast.PrimaryImageTag) {
+            if (cast.PrimaryImageTag) {
 
-				var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
-					width: 185,
-					tag: cast.PrimaryImageTag,
-					type: "primary"
-				});
+                var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
+                    width: 185,
+                    tag: cast.PrimaryImageTag,
+                    type: "primary"
+                });
 
-				html += '<img src="' + imgUrl + '" />';
-			} else {
-				var style = "background-color:" + LibraryBrowser.getMetroColor(cast.Name) + ";";
+                html += '<img src="' + imgUrl + '" />';
+            } else {
+                var style = "background-color:" + LibraryBrowser.getMetroColor(cast.Name) + ";";
 
-				html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
-			}
+                html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
+            }
 
-			html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
-			html += '<div class="posterViewItemText">' + role + '</div>';
+            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
+            html += '<div class="posterViewItemText">' + role + '</div>';
 
-			html += '</div></a>';
+            html += '</div></a>';
 
-		    return html;
-		}
+            return html;
+        }
 
     };