/* Styles for timeline presentations */

#timeline-container {
		  width:100%;
		  height: auto;
		  position:relative;
		  border:1px solid transparent;
		  background: url('./images/timelinebg_3.png');
		  background-position: top 0% left 0%;
		  background-repeat: repeat-y;
		  background-size: 100%;
		  margin-top:2rem;
}
.timeline {
	    height:3rem;
	    width:100%;
	    margin:6px auto 6px auto;
	    position: relative;
	    border:1px solid transparent;
	    border-radius:.75rem;
	    background: rgba(128,128,160,.2);
	    font-size:.8rem;
}
.taskname {
	    text-align:left;
	    width:20%;
	    height:3rem;
	    position: absolute;
	    top:0;
	    left:0;
	    background: rgba(0,0,0,.07);
	    border-radius:.75rem 0 0 .75rem;
	    line-height:1rem;
	    overflow:hidden;
}
.taskname p {
	    margin-top:.5rem;
	    margin-left:1rem;
	    font-weight:bold;
}
.subtaskname p {
	    margin-left:2rem;
	    font-weight:normal;
}

.timebar {
	    height:1.0rem;
	    width:1px;
	    left:20%;
	    position:absolute;
	    border-top:1px solid;
	    border-right:1px solid;
	    box-shadow: -6px 6px 8px #808080;
	    opacity: 0;
	    transition: opacity .75s;
	    cursor:pointer;
}
.timebarin {
   opacity: 1;
   -webkit-animation-name: barfadein;
   animation-name: barfadein;
   -webkit-animation-duration: 1.5s;
}
@-webkit-keyframes barfadein {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes barfadein {
  from {opacity: 0}
  to {opacity: 1}
}

.planbar {
	    top:.25rem;
	    border-color: rgb(0,0,182);
	    background: rgb(0,0,182);
	    background: rgba(0,0,182);
	    border-radius:5px;
}
.actualbar {
	    top:1.5rem;
	    background: rgb(206,172,0);
	    background: rgba(206,172,0,.7);
	    border-color: rgb(206,172,0);
	    border-radius:5px;
}
.completebar {
	    top:1.5rem;
	    background: rgb(0,128,0);
	    background: rgba(0,128,0,.7);
	    border-color: rgb(0,128,0);
	    border-radius:5px;
}
.summarybar {
	    top:.25rem;
	    border-color: rgb(58,128,240);
	    background: rgb(58,128,240);
	    background: rgba(58,128,240,.7);
	    border-radius:5px;
}
.legendbar {
	    top: 1.5rem;
	    height:1.0rem;
	    width:10%;
	    position:absolute;
	    border-top:1px solid transparent;
	    border-right:1px solid transparent;
	    box-shadow: -6px 4px 4px #808080;
}