/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// Timeline styles
// Example: eclipse.org/getting_started

.timeline {
  margin: 35px auto 0 auto;
  a {
    font-weight:bold;
  }
  .gs-item {
    padding-bottom: 20px;
  }

  .circle {
    background: lighten(@brand-tertiary, 25%);
    color: #fff;
    border: 2px solid #fff;
    height: 47px;
    width: 47px;
    font-size: 20px;
    float: left;
    padding-top: 6px;
    padding-left: 1px;
    font-weight: 700;
  }

  .two .circle {
    background: lighten(@brand-tertiary, 20%);
  }

  .three .circle {
   background: lighten(@brand-tertiary, 10%);
  }

  .four .circle {
   background: @brand-tertiary;
  }

  h1 {
    font-size: 2em;
    text-align: left;
    padding: 9px 0 0 62px;
    margin-bottom: 24px;
  }

  ul {
    padding-left: 1px;
  }

  li {
    margin-bottom: 1em;
    padding-left: 14px;
    list-style: none;
    &:before {
      content: "\00BB";
      color: @brand-warning;
      margin-left: -16px;
      margin-right: 10px;
      display: block;
      float: left;
    }
  }

  @media (min-width: @screen-md-min) {
    border-top: 1px dotted #c2cbe4;
    position: relative;
    .circle {
      margin: -25px auto 0 auto;
      float: none;
    }

    h1 {
      padding-top: 15px;
      float: none;
      padding-left: 0;
    }
  }
}

