.content blockquote { border-left: #689d6a 8px solid; } .content blockquote.tidbit { border-left: #928f74 8px solid; font-size: 12px; color: #282828; } li p { margin: 2px; } /* OUTER CONTAINER */ .tcontainer { width: 100%; overflow: hidden; /* Hide scroll bar */ } /* MIDDLE CONTAINER */ .ticker-wrap { width: 100%; padding-left: 100%; /* Push contents to right side of screen */ background-color: #eee; } /* INNER CONTAINER */ @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } .ticker-move { /* Basically move items from right side of screen to left in infinite loop */ display: inline-block; white-space: nowrap; padding-right: 100%; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: 30s; } .ticker-move:hover{ animation-play-state: paused; /* Pause scroll on mouse hover */ } /* ITEMS */ .ticker-item { display: inline-block; /* Lay items in a horizontal line */ padding: 0 5px; } .ticker-item::before { content: " ✑ "; }