added a grid view to the movie page

dashboard-ui/css/librarybrowser.css

@@ -65,15 +65,25 @@
     width: 50px;
 }
 
+.thName, .tdName {
+    max-width: 300px;
+}
+
+.libraryItemsGrid .imgUserItemRating {
+    width: 20px;
+    height: 20px;
+}
+
+.libraryItemsGrid a {
+    text-shadow: none;
+}
+
 @media all and (min-width: 650px) {
     .libraryPage .ui-content {
         padding: 15px 30px 100px;
     }
 }
 
-@media all and (min-width: 750px) {
-}
-
 @media all and (min-width: 1200px) {
 
     .libraryPage .ui-content {
@@ -81,7 +91,7 @@
     }
 
     .ehsContent {
-        max-width: 900px;
+        max-width: 850px;
     }
 
     .libraryItemsGridContainer {
@@ -90,6 +100,10 @@
 }
 
 @media all and (min-width: 1440px) {
+    .ehsContent {
+        max-width: 900px;
+    }
+
     .libraryItemsGridContainer {
         padding: 0 20%;
     }
@@ -97,8 +111,9 @@
 
 @media all and (min-width: 1920px) {
     .ehsContent {
-        max-width: 1300px;
+        max-width: 1000px;
     }
+
     .libraryItemsGridContainer {
         padding: 0 25%;
     }

dashboard-ui/css/site.css

@@ -691,16 +691,10 @@ progress {
     background-position: right center;
 }
 
-.userItemRating {
+.imgUserItemRating {
     height: 24px;
     width: 24px;
     margin-right: 1em;
-    overflow: hidden;
-    display: inline-block;
-}
-
-.imgUserItemRating {
-    height: 24px;
     cursor: pointer;
 }