/* display as columns */
ul.channelList {
  column-gap:20px;
}
@media (min-width: 0px) {
  ul.channelList {
    column-count:1;
  }
}
@media (min-width: 420px) {
  ul.channelList {
    column-count:2;
  }
}
@media (min-width: 650px) {
  ul.channelList {
    column-count:3;
  }
}
@media (min-width: 900px) {
  ul.channelList {
    column-count:4;
  }
}
@media (min-width: 1200px) {
  ul.channelList {
    column-count:5;
  }
}
ul.channelList li {
  break-inside:avoid-column;
  page-break-inside:avoid;
  margin-bottom:20px;
}
/* fill behaviour: stretch to fit columns */
ul.channelList li {
  width:100%;
}
/* zoom in on logo, give it an aspect ratio */
ul.channelList .channelLogo {
  width:100%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%;
}
ul.channelList .channelLogo a {
  display:block;
  line-height:1em;
}
@media (min-width: 650px) {
  /* Ratio 1 : 1 */
  ul.channelList .channelLogo a {
    padding-top:calc(50% - 0.5em);
    padding-bottom:calc(50% - 0.5em);
  }
}
@media (max-width: 650px) {
  /* Ratio 1 : 0.7 */
  ul.channelList .channelLogo a {
    padding-top:calc(35% - 0.5em);
    padding-bottom:calc(35% - 0.5em);
  }
}
@media (max-width: 420px) {
  /* Ratio 1 : 0.5 */
  ul.channelList .channelLogo a {
    padding-top:calc(25% - 0.5em);
    padding-bottom:calc(25% - 0.5em);
  }
}
/* hidden overlay link, appears on hover */
ul.channelList .channelLogo a {
  width:100%;
  text-align:center;
  color:transparent;
  font-size:1.4em;
}
ul.channelList .channelLogo a:hover {
  background-color:rgba(17,165,156,0.5);
  color:rgba(255,255,255,1);
  text-shadow:rgb(0,0,0) 0px 0px 20px;
}
/* info box prettification */
ul.channelList .channelData {
  padding:16px;
  padding-bottom:0px;
  background-color:hsl(175,19%,21%); /* dark turquoise */
  color:rgb(255,255,255);
}
ul.channelList .channelName a {
  display:block;
  text-align:center;
  font-size:1.5em;
  font-family:"Teko",sans-serif;
  text-transform:uppercase;
  font-weight:normal;
  padding:4px;
}
ul.channelList .channelUsers {
  display:none;
}
ul.channelList .channelTopic {
  display:none;
}
/* squish content if there's too much of it */
ul.channelList .channelSummary {
  /* chop-up long URLs  */
  word-wrap:break-word;

  /* max ten lines */
  line-height:1.4em;
  max-height:14em;
  overflow:hidden;
  padding-bottom:16px;

  /* prep for position:absolute; */
  position:relative;
}
ul.channelList .channelSummary:after {
  display:block;
  content:"";
  position:absolute;
  right:0px;
  bottom:0px;
  width:100%;
  height:1.4em;
  background:linear-gradient(to bottom, hsla(175,19%,21%,0), hsl(175,19%,21%,1) 80%);
}
/* sortable table */
th.sortable {
  cursor:pointer;
}
th.ascending::before {
  display:inline-block;
  margin-right:8px;
  content:"\21D1";
}
th.descending::before {
  display:inline-block;
  margin-right:8px;
  content:"\21D3";
}
th.unsorted::before {
  display:inline-block;
  margin-right:8px;
  content:"\21D5";
}
th.descending,
th.ascending {
  color:rgb(0,130,255);
}
/* channel list table */
table.channelList {
  border-collapse:collapse;
}
table.channelList tr {
  border-top:1px solid rgb(200,200,200);
  vertical-align:top;
}
table.channelList td {
  padding:5px;
}
table td.balance {
  min-width:80px;
  text-align:center;
}
@media (max-width:599px) {
  table.channelList,
  table.channelList tbody,
  table.channelList tr,
  table.channelList th,
  table.channelList td {
    display:block;
    width:auto;
    box-sizing:border-box;
    word-break:break-word;
  }
  table.channelList th:first-of-type,
  table.channelList td:first-of-type {
    float:left;
  }
  table.channelList th:first-of-type + th,
  table.channelList td:first-of-type + td {
    float:right;
  }
  table.channelList th:last-of-type,
  table.channelList td:last-of-type {
    clear:both;
  }
}
/* Last updated */
.communities .last-updated,
.rp-channels .last-updated {
  font-size:0.9em;
  font-style:italic;
  float:right;
}
.communities .last-updated span,
.rp-channels .last-updated span {
  font-weight:bold;
}