body {
    background: #080E1C;
    background: radial-gradient(circle,rgba(8, 14, 28, 1) 0%, rgba(14, 34, 68, 1) 50%, rgba(8, 14, 28, 1) 100%);
    margin-top:64px;
}

.MenuBar {
    height:64px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:rgba(8, 14, 28, 1);
}
.MenuBar > img {
    height:48px;
    margin:8px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.TileGarden {
    width:100%;
}
.TileGarden > .ChannelTile {
    width: calc(33% - 24px);
    margin:12px;
    min-height:calc(100% * 0.5625 + 32px);;
    float:left;
    background:#121523;
    position:relative;
}
@media (max-width: 1300px) {
    .TileGarden > .ChannelTile {
        width: calc(50% - 24px);
    }
}
@media (max-width: 850px) {
    .TileGarden > .ChannelTile {
        width: calc(100% - 24px);
    }
}

.TileGarden > .ChannelTile > img {
    width:100%;
}
.TileGarden > .ChannelTile > h2 {
    color:white;
    height:32px;
    margin: 6px 12px;
    white-space:nowrap;
    overflow:hidden;
    font-size:17pt;
}
.TileGarden > .ChannelTile > a {
    text-decoration:none;
    color:white;
}
.TileGarden > .ChannelTile > a:hover {
    color:
}

.TileGarden > .ChannelTile > div.LiveFlag {
    background:red;
    color:white;
    font-weight:bold;
    padding:6px;
    position: absolute;
    top:6px;
    right:6px;
    border-radius:6px;
}