#timeline {
  float: right;
  position: relative;
  width: 622px;
  height: 40px;
  margin-right: 40px;
  padding: 9px;
  background-image: url(/images/layout/bar_edge.png); }
  #timeline .bullet {
    height: 40px; }
    #timeline .bullet > div {
      float: left;
      width: 20px;
      height: 40px; }
      #timeline .bullet > div.left {
        background-image: url(/images/layout/green_left.png); }
      #timeline .bullet > div.middle {
        background-image: url(/images/layout/green_middle.png); }
      #timeline .bullet > div.right {
        background-image: url(/images/layout/green_right.png); }
  #timeline .label {
    position: absolute;
    top: 22px;
    width: 75px;
    height: 17px;
    cursor: pointer;
    background-repeat: no-repeat; }
    #timeline .label.listening {
      left: 28px; }
    #timeline .label.creating {
      left: 284px; }
    #timeline .label.supporting {
      left: 537px; }
    #timeline .label:hover, #timeline .label.active {
      background-position: 0 -17px; }