redesigned actor display

dashboard-ui/css/librarybrowser.css

@@ -64,6 +64,41 @@
     display: none;
 }
 
+
+.detailPageContent .ui-collapsible-content {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.galleryImageContainer {
+    display: inline-block;
+    margin: 5px;
+}
+
+    .galleryImageContainer:hover {
+        -moz-box-shadow: 0 0 20px 3px #2572EB;
+        -webkit-box-shadow: 0 0 20px 3px #2572EB;
+        box-shadow: 0 0 20px 3px #2572EB;
+    }
+
+.galleryImage {
+    width: 120px;
+}
+
+@media all and (min-width: 750px) {
+
+    .galleryImage {
+        width: 150px;
+    }
+}
+
+@media all and (min-width: 1200px) {
+
+    .galleryImage {
+        width: 180px;
+    }
+}
+
 @media all and (min-width: 650px) {
     .libraryPage .ui-content {
         padding: 10px 20px 100px;
@@ -87,12 +122,18 @@
         padding-left: 20px;
         padding-right: 20px;
     }
+
+    .detailPageContent .ui-collapsible-content {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }
 
 @media all and (min-width: 1000px) {
     .detailPageContent {
         width: 90%;
         margin: 0 auto;
+        max-width: 1200px;
     }
 
     .ehsContent {
@@ -110,8 +151,7 @@
 @media all and (min-width: 1440px) {
 
     .detailPageContent {
-        width: 70%;
-        max-width: 1200px;
+        width: 1200px;
     }
 
     .ehsContent {
@@ -243,6 +283,7 @@
     border: 1px solid #666;
     border-radius: 0;
     width: 100px;
+    margin-right: 5px;
 }
 
     /* Polyfill */
@@ -293,10 +334,27 @@
     vertical-align: top;
     position: relative;
     top: 3px;
+}
+
+.userDataIcons .itemProgressText {
+    vertical-align: top;
+    position: relative;
+    top: 3px;
     margin-right: 1em;
 }
 
 .tileItem .itemProgressBar {
     top: 2px;
     width: 40px;
+    margin-right: 1em;
+}
+
+.itemProgressText {
+    font-size: 12px;
+    color: #bbb;
+    vertical-align: middle;
+}
+
+.tileItem .itemProgressText {
+    display: none;
 }