@color-primary: black;
@color-light: #666;
@spacing: 15px;
@radius: 4px;

@date: 120px;
@dot: 15px;
@line: 2px;

@header-font-size: 1.2em;

.timeline {
  border-left: @line solid @color-light;
  border-bottom-right-radius: @radius;
  border-top-right-radius: @radius;    
  margin: 0 0 0 200px;  
  letter-spacing: 0.5px;   
  position: relative;
  line-height: 1.4em;
  font-size: 1em;   
  padding: @spacing;   
  list-style: none;
  text-align: left;  
  font-weight: 100;

  h3 {
    font-size: @header-font-size;
  }
  
  .event {
    margin-bottom: @spacing;
    position: relative;

    &:before, &:after {
      position: absolute;
      display: block;
      top: 0;
    }

    &:before {
      left: (((@date * 0.6) + @spacing + @line + @dot ) * 1.5) * -1;    
      color: black;
      content: attr(data-date);
      text-align: right;
      font-weight: 100;    
      font-size: @header-font-size;
      min-width: @date;
    }

    &:after {
      //box-shadow: 0 0 0 @dotborder @color-light;    
      left: (@spacing + @line + (@dot * 0.4)) * -1;        
      background: @color-light;
      border-radius: 50%;  
      height: @dot;
      width: @dot;
      content: "";
      top: @dot * 0.2;

    }
  }

  .date-header {
    position: relative;
    margin-bottom: @spacing;

    &:before, &:after {
      position: absolute;
      display: block;
      top: 0;
    }

    &:before {
      left: (((@date * 0.6) + @spacing + @line + @dot ) * 1.5) * -1;    
      color: #666;
      content: attr(data-date);
      text-align: right;
      font-weight: 100;    
      font-size: 1em;
      min-width: @date;
    }
  }
}