.tileItem { background: #1e1e1e; padding: 10px 7px 5px; margin: 3px 0; font-weight: normal !important; display: block; position: relative; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } .tileItem .starRating { width: 16px; height: 14px; } .tileItem .rottentomatoesicon { height: 14px; width: 14px; } .tileItem .criticRating { position: relative; top: -2px; } .tileImage { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center top; } .defaultTileImage { background-color: #555; } .tileItem p { margin: 1em 0 0; } .tileContent { display: inline-block; padding-left: 10px; color: #fff; text-align: left; vertical-align: top; overflow: hidden; } .backdropTileItem .tileImage { height: 90px; width: 45%; } .backdropTileItem .tileContent { width: 50%; } .posterTileItem .tileImage { height: 120px; width: 30%; } .posterTileItem .tileContent { width: 65%; } .smallPosterTileItem .tileImage { height: 110px; width: 35%; } .smallPosterTileItem .tileContent { width: 60%; } .smallBackdropTileItem .tileImage { height: 125px; width: 45%; } .smallBackdropTileItem .tileContent { width: 50%; } .squareTileItem .tileImage { height: 100px; width: 35%; } .squareTileItem .tileContent { width: 60%; } @media all and (min-width: 540px) { .tileItem { display: inline-block; margin-left: 3px; margin-right: 3px; } .backdropTileItem { display: block; } .posterTileItem, .squareTileItem { width: 45%; } .posterTileItem .tileImage { height: 120px; } .squareTileItem .tileImage { height: 115px; } .smallPosterTileItem { width: 46%; display: inline-block; margin: 3px; } .smallBackdropTileItem { display: block; } } @media all and (min-width: 750px) { .smallBackdropTileItem { display: block; } .backdropTileItem { display: inline-block; } .smallPosterTileItem { width: 30%; } .backdropTileItem, .posterTileItem, .squareTileItem { width: 46%; } .backdropTileItem .tileImage { height: 88px; } .posterTileItem .tileImage { height: 120px; } .squareTileItem .tileImage { height: 115px; } } @media all and (min-width: 850px) { .smallBackdropTileItem { width: 47%; display: inline-block; } .backdropTileItem .tileImage { height: 105px; } .posterTileItem .tileImage { height: 120px; } .posterTileItem { width: 30.5%; } } @media all and (min-width: 1000px) { .backdropTileItem, .posterTileItem, .squareTileItem { width: 47.5%; } .posterTileItem { width: 31%; } .backdropTileItem .tileImage { height: 110px; } .posterTileItem .tileImage { height: 136px; } .squareTileItem { width: 31%; } .squareTileItem .tileImage { height: 105px; } } @media all and (min-width: 1200px) { .backdropTileItem .tileImage { height: 100px; } .posterTileItem .tileImage { height: 160px; } .backdropTileItem, .posterTileItem, .squareTileItem { width: 31.5%; } .squareTileItem .tileImage { height: 130px; } } @media all and (min-width: 1440px) { .backdropTileItem .tileImage { height: 110px; } .posterTileItem .tileImage { height: 150px; } .backdropTileItem, .squareTileItem, .backdropTileItem.posterTileItem { width: 31.5%; } .squareTileItem .tileImage { height: 155px; } .posterTileItem { width: 23.5%; } } @media all and (min-width: 1700px) { .backdropTileItem .tileImage { height: 132px; } .posterTileItem .tileImage { height: 170px; } .backdropTileItem, .backdropTileItem.posterTileItem { width: 32%; } .posterTileItem { width: 23.5%; } .squareTileItem { width: 23.5%; } .squareTileItem .tileImage { height: 140px; } } @media all and (min-width: 1920px) { .backdropTileItem, .backdropTileItem.posterTileItem { width: 31.5%; } .tileImage { height: 155px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 160px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 120px; } } @media all and (min-width: 2000px) { .backdropTileItem, .backdropTileItem.posterTileItem { width: 23.5%; } .tileImage { height: 117px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 160px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 130px; } } @media all and (min-width: 2200px) { .backdropTileItem, .backdropTileItem.posterTileItem { width: 24%; } .tileImage { height: 145px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 185px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 140px; } } @media all and (min-width: 2540px) { .backdropTileItem, .backdropTileItem.posterTileItem { width: 18.75%; } .tileImage { height: 120px; } .posterTileItem { width: 15.8%; } .posterTileItem .tileImage { height: 180px; } .squareTileItem { width: 15.8%; } .squareTileItem .tileImage { height: 140px; } } .posterItem { margin: 5px 5px; text-shadow: none; font-weight: normal !important; display: inline-block; position: relative; color: #fff !important; text-decoration: none; text-align: left; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } .posterItemText { text-overflow: ellipsis; overflow: hidden; text-wrap: none; white-space: nowrap; padding: 5px 4px 4px; text-shadow: none; font-weight: 400; } .posterItemImage { background-size: contain; background-repeat: no-repeat; background-position: center bottom; background-color: #000; position: relative; } .myLibraryPosterItem { width: 42%; min-width: 50px; } .myLibraryPosterItem .posterItemImage { height: 34px; background-position: 9px center; background-size: 14px 14px; background-color: rgba(51, 136, 204, 0.7); background-color: rgba(82, 181, 75, 0.7); } .myLibraryPosterItem .posterItemText { top: 0; left: 0; line-height: 34px; text-align: left; padding: 0 0 0 12px; position: absolute; } .myLibraryPosterItem i { margin-right: 10px; } .moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage { background-color: rgba(176, 94, 81, 0.7); } .musicPosterItem .posterItemImage { background-color: rgba(217, 145, 67, 0.7); } .tvshowsPosterItem .posterItemImage { background-color: rgba(77, 88, 164, 0.7); } .gamesPosterItem .posterItemImage { background-color: rgba(183, 202, 72, 0.7); } .channelsPosterItem .posterItemImage { background-color: rgba(51, 136, 204, 0.7); } .livetvPosterItem .posterItemImage { background-color: rgba(255, 233, 127, 0.7); } .homevideosPosterItem .posterItemImage { background-color: rgba(110, 52, 32, 0.7); } .photosPosterItem .posterItemImage { background-color: rgba(127, 0, 0, 0.7); } .musicvideosPosterItem .posterItemImage { background-color: rgba(143, 54, 168, 0.7); } @media all and (min-width: 600px) { .myLibraryPosterItem { width: 31%; /* Specify a min width just in case the container doesn't have a width */ min-width: 160px; } } @media all and (min-width: 800px) { .myLibraryPosterItem { width: 32%; /* Specify a min width just in case the container doesn't have a width */ min-width: 160px; } } @media all and (min-width: 1000px) { .myLibraryPosterItem { width: 23.5%; /* Specify a min width just in case the container doesn't have a width */ min-width: 220px; } } @media all and (min-width: 1200px) { .myLibraryPosterItem { width: 24.0%; } } @media all and (min-width: 1440px) { .myLibraryPosterItem { width: 19.0%; /* Specify a min width just in case the container doesn't have a width */ min-width: 220px; } } @media all and (min-width: 1600px) { .myLibraryPosterItem { width: 15.5%; } } @media all and (min-width: 1700px) { .myLibraryPosterItem { width: 16%; } } @media all and (min-width: 2000px) { .myLibraryPosterItem { width: 13.5%; } } @media all and (min-width: 2300px) { .myLibraryPosterItem { width: 13.8%; } }