body {
    background: #000;
    color: #FFF;
    font-family: sans-serif;
}

#bottom-bar {
    position: fixed;
    bottom: 0;
    /*left: 0;*/
    margin-bottom: 20px;
    font-size: 14px;
    
    overflow: hidden;
    /*padding-left: 100%;
    box-sizing: content-box;*/
}

* { box-sizing: border-box; }

/* OUTER CONTAINER */
#bottom-bar {
  width: 100%;
  overflow: hidden; /* Hide scroll bar */
}
 
/* MIDDLE CONTAINER */
#ticker-wrap {
  width: 100%;
  padding-left: 100%; /* Push contents to right side of screen */
}

/* INNER CONTAINER */
@keyframes ticker {
  0% { transform: translate3d(-20%, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
#ticker {
  /* 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: 120s;
}

/* ITEMS */
.item{
  display: inline-block; /* Lay items in a horizontal line */
  padding: 10px 36px;
  
  font-size: 22px;
}

.item > img {
    height: 32px;
    vertical-align: middle;
}

.item > span.user {
    color: #fff;
    margin: 0 20px;
    vertical-align: middle;
}

.item > span.content {
    color: #fff;
    vertical-align: middle;
}