.concert-list.list-margin { margin-top: 1em; margin-right: 1.5em; /* leave room for right-floating alphabet navigation */ } .concerts-row { padding-bottom: 0px !important; margin-right: 5px; } .concerts-no-border { padding-top: 15px !important; } .concerts { padding: 0 5px; /* = .pure-u>div */ } .concerts-list-alpha-heading { display: none; } .concerts-header { border-bottom: 1px solid black; padding-bottom: 4px; } .concerts-alphabet { text-align: center; background: white; } .concerts-alphabet-letter { font-weight: bold; transition: color 500ms; } @media (min-height: 24em) { .concerts-header { background: white; border-top: 20px solid white; } .concerts-alphabet { position: sticky; top: 136px; right: 0; width: 1em; float: right; } .concerts-alphabet-letter { display: block; } a.concerts-alphabet-letter { color: #aaa; } } @media (min-width: 568px) { .concerts-alphabet { top: 156px; } } @media (min-width: 48em) { .concerts-alphabet { top: 180px; } } .concerts-alphabet-letter.active { color: black; } .concerts-list { /* hack to offset scrollIntoView targets below the fixed header */ padding-top: 16em; margin-top: -16em; }