// http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
/*------------------------------------*\
    TIMELINE
\*------------------------------------*/
#timeline {
  background: url(img/dummyline.gif) top center repeat-y;
  width: 100%;
  max-width: 700px;
  padding: 50px 0;
  margin: 0 auto 50px auto;
  overflow: hidden;
  list-style: none;
  position: relative;
}

#timeline:before,
#timeline:after {
  content: " ";
  width: 10px;
  height: 10px;
  display: block;
  background: #f43059;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -5px;

  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

#timeline:after {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background: none;
  border: 7px solid #f43059;
  border-color: #f43059 transparent transparent transparent;
  border-radius: 0;
  bottom: -7px;
  height: 0;

  margin-left: -7px;
  top: auto;
  width: 0;
}

#timeline li {
  -moz-border-radius: 2px;
  -moz-box-shadow: 0 1px #fff inset;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0 1px #fff inset;
  background: #fef8c4;
  border: 1px solid #d8d566;
  border-radius: 2px;
  box-shadow: 0 1px #fff inset;
  clear: both;

  float: left;
  margin: 0 0 10px 0;
  padding: 10px;
  position: relative;
  text-align: right;
  width: 260px;
}

#timeline li:before,
#timeline li:after {
  content: " ";
  width: 70px;
  height: 1px;
  background: #f43059;
  position: absolute;
  left: 100%;
  top: 50%;
}

#timeline li:nth-of-type(odd),
#timeline li:nth-of-type(even) {
  margin: -10px 0 0 0;
}

#timeline li:nth-of-type(odd) {
  text-align: left;
}

#timeline li:nth-of-type(even) {
  float: right;
  text-align: left;
}

#timeline li:nth-of-type(even):after {
  left: auto;
  right: 100%;
}

#timeline time {
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: left;
}

//HOVER EFFECTS
#timeline li:hover {
  background: #feac5a;
}
