body    { padding-left: 5em; }
h1      { color: blue; }
th      { text-align: left; }
th:first-child { width: 120px; }
td:nth-child(2) { padding-right: 10px; }
table   { border: 1px solid; border-collapse: collapse; table-layout: fixed; width: 66%; }
#range  { text-align: center; background-color: #98AFC7; font-weight: normal; }

.friends tr:nth-child(even) {background: #E1E2E4; }
.friends tr:nth-child(odd)  {background: white; }
tr:hover td { background-color: #DDEFF5; }

.friends {
  border-collapse: collapse;
}
.friends th, .friends tr:last-child td {
  border-bottom: 1px solid;
  border-top: 1px solid;
}
.friends td, .friends th {
//  border-left: 1px solid;
  padding: 5px kk0px;
}
.friends td:first-child, .friends th:first-child {
  border-left: none;
}
.friends {
  border: none;
}
//.friends th:last-child {
//  border-left: none;
//}

.sortorder:after {
  content: '\25b2';   // BLACK UP-POINTING TRIANGLE
}
.sortorder.reverse:after {
  content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
}