adjust tile styles

dashboard-ui/css/librarybrowser.css

@@ -103,7 +103,7 @@
 }
 
 .libraryPage > .ui-content {
-    padding: 10px 0;
+    padding: 10px 0px;
 }
 
 .libraryPage, .libraryPage .itemListContent {
@@ -379,14 +379,14 @@ a.itemTag:hover {
 
 .lnkSibling {
     position: absolute;
-    bottom: 240px;
+    top: 10px;
     text-decoration: none;
-    color: #fff!important;
     font-weight: normal!important;
     display: none;
     background-color: rgba(0,0,0,0.6);
-    border-radius: 3px;
-    padding: 3px 5px;
+    color: #ddd!important;
+    background-color: transparent;
+    padding: 0;
 }
 
     .lnkSibling:hover {
@@ -597,14 +597,6 @@ a.itemTag:hover {
     .lnkSibling:not(.hide) {
         display: block;
     }
-
-    .lnkSibling {
-        bottom: 270px;
-    }
-
-    .noBackdrop .lnkSibling {
-        bottom: 260px;
-    }
 }
 
 @media all and (min-width: 1000px) {
@@ -612,10 +604,6 @@ a.itemTag:hover {
     .itemBackdrop {
         background-size: 100% auto;
     }
-
-    .noBackdrop .lnkSibling {
-        bottom: 205px;
-    }
 }
 
 @media all and (min-width: 650px) {
@@ -639,6 +627,20 @@ a.itemTag:hover {
     }
 }
 
+@media all and (min-width: 800px) {
+
+    .ehsContent {
+        max-width: 700px;
+    }
+}
+
+@media all and (min-width: 900px) {
+
+    .ehsContent {
+        max-width: 880px;
+    }
+}
+
 @media all and (min-width: 1000px) {
 
     .ehsContent {
@@ -671,14 +673,6 @@ a.itemTag:hover {
 
 @media all and (min-width: 1440px) {
 
-    .lnkSibling {
-        bottom: 205px;
-        color: #ddd!important;
-        background-color: transparent;
-        border-radius: 0;
-        padding: 0;
-    }
-
     .ehsContent {
         max-width: 980px;
     }

dashboard-ui/css/livetv.css

@@ -115,8 +115,8 @@
     }
 
 .channelImageContainer .itemDetailImage {
-    max-width: 160px;
-    max-height: 100px;
+    max-width: 200px;
+    max-height: 110px;
     margin-top: 1em;
     margin-bottom: 1em;
 }

dashboard-ui/css/posteritem.css

@@ -1,5 +1,5 @@
 .posterItem {
-    margin: 7px;
+    margin: 6px;
     text-shadow: none;
     font-weight: normal!important;
     display: inline-block;
@@ -22,6 +22,12 @@
         box-shadow: 0 0 20px 3px #2572EB;
     }
 
+
+
+.smallBackdropPosterItem, .smallPosterItem {
+    margin: 3px;
+}
+
 .posterItemImage {
     background-size: contain;
     background-repeat: no-repeat;
@@ -139,13 +145,13 @@
         height: 162px;
     }
 
-    .smallBackdropPosterItem {
-        width: 192px;
-    }
+.smallBackdropPosterItem {
+    width: 168px;
+}
 
-        .smallBackdropPosterItem .posterItemImage {
-            height: 108px;
-        }
+    .smallBackdropPosterItem .posterItemImage {
+        height: 94.5px;
+    }
 
 .portraitPosterItem {
     width: 100px;
@@ -161,6 +167,13 @@
     opacity: .8;
 }
 
+@media all and (max-width: 400px) {
+
+    .backdropPosterItem {
+        display: block;
+    }
+}
+
 @media all and (min-width: 540px) {
 
     .backdropPosterItem {
@@ -172,6 +185,17 @@
         }
 }
 
+@media all and (min-width: 540px) {
+
+    .smallBackdropPosterItem {
+        width: 184px;
+    }
+
+        .smallBackdropPosterItem .posterItemImage {
+            height: 103.5px;
+        }
+}
+
 @media all and (min-width: 650px) {
 
     .backdropPosterItem {
@@ -189,6 +213,14 @@
         .storePosterItem .posterItemImage {
             height: 110px;
         }
+
+    .smallBackdropPosterItem {
+        width: 192px;
+    }
+
+        .smallBackdropPosterItem .posterItemImage {
+            height: 108px;
+        }
 }
 
 @media all and (min-width: 750px) {

dashboard-ui/css/search.css

@@ -30,7 +30,7 @@
     border-radius: 2px;
     font-weight: bold;
     min-width: 54px;
-    padding: 0 8px;
+    padding: 0 4px;
     text-align: center;
     text-decoration: none !important;
     -moz-user-select: none;
@@ -116,13 +116,6 @@
     }
 }
 
-@media all and (min-width: 340px) {
-
-    .txtSearch {
-        width: 150px;
-    }
-}
-
 @media all and (min-width: 850px) {
 
     .txtSearch {