/*
(c) 2014 has.to.be GmbH
This file is licenced under the HTB Proprietary Licence (HPL)
If it contains third party plugins, that are licenced under the GPL
or any other open source licence, this file is licenced under the GPL.

Creator:	Martin Klaessner
Description:	
*/
/* 
    Created on : 25.08.2014, 19:04:18
    Author     : klma
*/

/***
Timeline UI Base
***/
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* The line */
.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #ccc;
  left: 20%;
  margin-left: -10px;
}

.timeline > li {
  position: relative;
}

/*Remove timeline line for last entry*/
.timeline > li.timeline-noline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #fff;
  left: 20%;
  margin-left: -10px;
}

/* The date/time */
.timeline > li .timeline-time {
  display: block;
  width: 15%;
  text-align: right;
  position: absolute;
}

.timeline > li .timeline-time span {
  display: block;
  text-align: right;
}

.timeline > li .timeline-time span.date {
  font-size: 12px;
  color: #aaa;
  display: block;
  font-weight: 300;
}

.timeline > li .timeline-time span.time {
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
}

/* Right content */
.timeline > li .timeline-body {
  margin: 0 0 15px 25%;
  color: #fff;
  padding: 10px;
  font-weight: 300;
  position: relative;
  border-radius: 5px;
  background: #F8F8F8;
  border-left: 4px solid #CCC;
}

.timeline > li .timeline-body h2 {
  margin-top: 0px;
  padding: 0 0 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 20px;
}

.timeline > li .timeline-content {
  font-size: 12px;
  color: #000 !important;
}

.ie8 .timeline > li .timeline-body h2 {
  border-bottom: 1px solid #eee;
}

.timeline > li .timeline-body img.timeline-img {
  width: 75px;
  height: 75px;
  margin: 5px 10px 0 0px;
}

.timeline > li .timeline-body img.pull-right {
  margin-left: 10px;
}

.timeline > li .timeline-body a.nav-link {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  padding: 0px;
  text-align: left;
  text-decoration: none;
}

.timeline > li .timeline-body a.nav-link:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.timeline > li .timeline-body .btn {
  margin-top: 10px;
}

/* The triangle */
.timeline > li .timeline-body:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #CCC;
  border-width: 10px;
  top: 19px;
}

.timeline > li .timeline-content:after,
.timeline > li .timeline-content:before {
  display: table;
  line-height: 0;
  content: "";
}

.timeline > li .timeline-content:after {
  clear: both;
}

.timeline > li .timeline-footer:after,
.timeline > li .timeline-footer:before {
  content: "";
  display: table;
  line-height: 0;
}

.timeline > li .timeline-footer:after {
  clear: both;
}

/* The icons */
.timeline > li .timeline-icon {
  width: 40px;
  height: 40px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #fff;
  background: #aaa;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #ccc;
  text-align: center;
  left: 20%;
  top: 0;
  margin: 5px 0 0 -25px;
  padding-bottom: 3px;
  padding-right: 1px;
  padding-left: 2px;
  -webkit-border-radius: 30px !important;
  -moz-border-radius: 30px !important;
  border-radius: 30px !important;
}

.timeline > li .timeline-icon > i {
  font-size: 18px;
  margin-top: 12px !important;
}

/* Red */
.timeline li.timeline-red .timeline-body:after {
  border-right-color: #e02222;
}

.timeline li.timeline-red .timeline-body {
  background: #e02222;
}

.timeline li.timeline-red .timeline-time span.time {
  color: #e02222;
}

/* Yellow */
.timeline li.timeline-yellow .timeline-body:after {
  border-right-color: #ffb848;
}

.timeline li.timeline-yellow .timeline-body {
  background: #ffb848;
}

.timeline li.timeline-yellow .timeline-time span.time {
  color: #ffb848;
}

/* Green */
.timeline li.timeline-green .timeline-body:after {
  border-right-color: #35aa47;
}

.timeline li.timeline-green .timeline-body {
  background: #35aa47;
}

.timeline li.timeline-green .timeline-time span.time {
  color: #35aa47;
}

/* Blue */
.timeline li.timeline-blue .timeline-body:after {
  border-right-color: #4b8df8;
}

.timeline li.timeline-blue .timeline-body {
  background: #4b8df8;
}

.timeline li.timeline-blue .timeline-time span.time {
  color: #4b8df8;
}

/* Purple */
.timeline li.timeline-purple .timeline-body:after {
  border-right-color: #852b99;
}

.timeline li.timeline-purple .timeline-body {
  background: #852b99;
}

.timeline li.timeline-purple .timeline-time span.time {
  color: #852b99;
}

/* Grey */
.timeline li.timeline-grey .timeline-body:after {
  border-right-color: #555555;
}

.timeline li.timeline-grey .timeline-body {
  background: #555555;
}

.timeline li.timeline-grey .timeline-time span.time {
  color: #555555;
}

@media (max-width: 767px) {
  timeline > li .timeline-time span.time {
    font-size: 18px;
  }

  .timeline:before {
    display: none;
  }

  .timeline > li .timeline-time {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }

  .timeline > li .timeline-time span {
    text-align: left;
  }

  .timeline > li .timeline-body {
    margin: 0 0 30px 0;
    padding: 1em;
  }

  .timeline > li .timeline-body:after {
    right: auto;
    left: 20px;
    top: -20px;
  }

  .timeline > li .timeline-icon {
    position: relative;
    float: right;
    left: auto;
    margin: -55px 5px 0 0px;
  }

  /*colors*/
  .timeline li.timeline-red .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #e02222;
  }

  .timeline li.timeline-blue .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #4b8df8;
  }

  .timeline li.timeline-green .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #35aa47;
  }

  .timeline li.timeline-yellow .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #ffb848;
  }

  .timeline li.timeline-purple .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #852b99;
  }

  .timeline li.timeline-grey .timeline-body:after {
    border-right-color: transparent;
    border-bottom-color: #555555;
  }
}