/* Family progress (js/famprog.js): dots on the bar when paused / scrubbing, rings on posters. Quiet on purpose. */
.osd .fp { position: relative; height: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.osd .fp.on { opacity: 1; }
/* a stick up from the bar per person (staggered in 4 heights so names never collide), full name + when on top */
.osd .fpd { position: absolute; bottom: 0; width: 0; opacity: .78; }
.osd .fpd .fps { position: absolute; left: -1px; bottom: 0; width: 2px; height: 46px; border-radius: 1px; opacity: .85; }
.osd .fpd.lv1 .fps { height: 92px; } .osd .fpd.lv2 .fps { height: 138px; } .osd .fpd.lv3 .fps { height: 184px; }
.osd .fpd .fpl { position: absolute; left: -2px; bottom: 46px; padding-left: 10px; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.osd .fpd.lv1 .fpl { bottom: 92px; } .osd .fpd.lv2 .fpl { bottom: 138px; } .osd .fpd.lv3 .fpl { bottom: 184px; }
.osd .fpd.r .fpl { left: auto; right: -2px; padding: 0 10px 0 0; text-align: right; }
.osd .fpd .fpl b { display: block; font: 700 19px/1.2 sans-serif; color: #fff; }
.osd .fpd .fpl em { display: block; font: 400 15px/1.3 sans-serif; font-style: normal; color: rgba(255,255,255,.65); }
.osd .fpd.done { opacity: .6; }
.osd .fpd.live { opacity: .95; }
.osd .fpd.live .fps { -webkit-animation: fpbeat 2.4s ease-in-out infinite; animation: fpbeat 2.4s ease-in-out infinite; }
@-webkit-keyframes fpbeat { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes fpbeat { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@-webkit-keyframes fpglow { 0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 4px 1px rgba(255,255,255,.25); }
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 16px 6px rgba(255,255,255,.55); } }
@keyframes fpglow { 0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 4px 1px rgba(255,255,255,.25); }
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 16px 6px rgba(255,255,255,.55); } }

/* shelf rings: bottom-left of a poster */
.face .fpring { position: absolute; left: 10px; bottom: 10px; height: 26px; pointer-events: none; opacity: .88; }
.face .fpring i { float: left; width: 26px; height: 26px; margin-right: -6px; border-radius: 50%; font: 700 11px/26px sans-serif;
  font-style: normal; color: #10141c; text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.face .fpring i.done { box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.7); }
.face .fpring i.live { -webkit-animation: fpglow 2.4s ease-in-out infinite; animation: fpglow 2.4s ease-in-out infinite; }
.face .fpring i.more { background: rgba(20,24,32,.85); color: rgba(255,255,255,.8); }
.lb .lbfirst { font-style: normal; font-size: .8em; opacity: .85; margin-left: 4px; }

/* the title moves up out of the sticks' way while they're showing */
.osd .t { transition: margin-bottom .6s ease; }
.osd[data-fp="0"] .t { margin-bottom: 96px; } .osd[data-fp="1"] .t { margin-bottom: 142px; }
.osd[data-fp="2"] .t { margin-bottom: 188px; } .osd[data-fp="3"] .t { margin-bottom: 234px; }