.timeline-project {
	position: relative;
	display: block;
	.timeline-image img {
		border-radius: 50%;
		width: 60px;
		float: left;
		position: absolute;
		left: 0;
		top: @spacing;
	}
	.timeline-border {
		border-left: 2px solid fade(@primaryColor, 40%);
		margin-left: 30px;
		z-index: -1;


	}
	.heading .timeline-heading {
		position: relative;
		margin-left: 10px;
		top: @spacing;
		padding:@spacing 0;
		.block{
			.timeline-top-info {
				padding: 5px 10px;
			}
			.caret {
				top: 2px;
			}
			.dropdown-menu {
				margin: 0;
				padding: 0;
				li {
					border: none;
					padding: 5px;
					margin:0; 
					a {
						padding: 0;
						font-weight: normal;
					}
				}
			}
		}
	}
	.project-preview {
		display: block;
		border: 2px solid fade(@primaryColor, 40%);
		border-radius: 5px;
		padding: 3px; 
		margin-left: 29px;
		position: relative;
		&:hover {
			border-color: @primaryColor;
		}
	}
	.comments {
		li:first-of-type {padding:0;}
		li {
			margin-left: 25px; 
		}
	}
	li {
		padding: 5px 0;
		.box-generic { 
			margin-bottom:0;
			padding: 0;
			border: 1px solid fade(@primaryColor, 25%); 
			border-radius: 3px;
			&.row {
					@media (min-width: 768px) {
						> div[class*="col-sm"] { 
						border-right:1px solid #efefef;
						&:last-of-type { border:none;}
						}
					}
					@media (max-width: 768px) {
						div[class*="col-xs"] { 
						border-bottom:1px solid #efefef;
						&:last-of-type { border:none;}
						}
					}
				
			}
		}

		.list-image img { 
			position:relative;
			height:45px; 
			width:45px; 
			left: -23px;
			float: left;
			.rounded(30px,30px,30px,30px);
			opacity: .8;
		
		}
	 	&:hover, &.active:hover{ 
	 		.list-image img {
				opacity: 1;	 		
	 		}
	 	}
		
	 	.caret {
			position:absolute;
			width: 8px;
			height: 0;
			top:7px;
			left:26px;
			margin-top:5px;
			vertical-align: middle;
			border-right: 8px solid fade(@primaryColor, 25%);;
			border-top: 8px solid transparent;
			border-left: 0 dotted;
			border-bottom: 8px solid transparent;
			content: "";
		}

	 	.block {
			position: relative;
			padding: 0 20px 0 36px;

			&.block-inline { 
			
				padding: 0 20px 0 36px;
				& + .block-inline {
					padding: 0 10px 0 0;
				}
			}
			.media {
				&.active {
					background: fade(@primaryColor,20%); 
					border:1px solid fade(@primaryColor,20%); 
					border-left:none;
					border-right:none;
					color:@inverseColor;
					.timeline-bottom { color:@primaryColor; }
				}
			}
			.content-filled {
				padding:10px; 
				background: fade(@primaryColor, 10%);
			}
		}
		.timeline-top-info  {
			padding: @spacing;
			a {
				font-weight: bold;
				&:hover { 
					text-decoration:underline;
					color:@inverseColor;
				}
			}
		}
		.timeline-top-info { i {color:#dfdfdf;}}
		.timeline-bottom {  color:#c2c2c2; font-size: 12px;}
		&:first-of-type { 
			padding: @spacing*2 0 @spacing;
		}
	}
	.media-icons a {
		color:#c2c2c2;
		font-size: 16px;
		padding-right: 5px;
		&:hover{ 
			color:@infoColor;
		}
	}
}