//
// Timeline
// --------------------------------------------------

.timeline-month {
	margin-top: 0px;
	margin-bottom: 20px;
	width: 120px;
	text-align: center;
	position: relative;
	left: 6%;
	margin-left: -55px;
	span {display: block;}
	.month {font-size: $font-size-large; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase;}
	.year {font-size: $font-size-base; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;}
}

.timeline {
	.list-unstyled;
	position: relative;
	&:before {
		content: '';
		position: absolute;
		top: 10px;
		bottom: 0;
		width: 2px;
		background: $border-lighter;
		left: 6%;
		margin-left: 2px;
	}
	> li {
		position: relative;
		.timeline-header {
			@extend .clearfix all;
			padding: 0;
			color: $gray-light;

			span.date {float: left; text-transform: uppercase; letter-spacing: 0.1em; font-size: $font-size-mini;}
			span.author {float: right; font-size:12px; display: none;}
		}

		.timeline-header + p {padding-top: 10px;}

		.timeline-icon {
			width: 50px;
			height: 50px;
			font-size: 1.4em;
			line-height: 50px;
			-webkit-font-smoothing: antialiased;
			position: absolute;
			color: $gray;
			background: $border-lighter;
			border-radius: 50%;
			text-align: center;
			left: 6%;
			top: 0;
			margin: 0 0 0 -22px;
			padding: 0;
		}
		.timeline-body {
			margin: 0 0 20px 14%;
			padding: 20px;
			position: relative;
			border-width: 2px;
			border-style: solid;
			border-radius: $border-radius-base;
			background-color: #fff;
			.timeline-content {
				p {margin-bottom: 0;}
				p + p {margin-top: 10px;}
			}
			&:after {
				right: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: transparent;
				border-width: 10px;
				top: 15px;
			}
			img {margin: 5px 20px 0 0;}
		}
		.timeline-footer {
			padding-top: 20px;
			@extend .clearfix all;
			color: #fff;
		}
	}
}

@media (max-width: $screen-sm-max) {

	.timeline-month {
		width: 100%;
		text-align: center;
		margin-left: 0;
		left: 0;
	}

	.timeline:before {width: 0;left: 0;}
	.timeline > li {
		margin-top: 20px;
		&:first-child {margin-top: 0;}

		.timeline-body {
			margin: 0 !important;
			&:after {border-width: 0;}
		}

		.timeline-icon {
			width: 30px;
			height: 30px;
			line-height: 30px;
			font-size: 1em;
			margin: 20px 50px 0 0;
			position: relative;
			float: right;
		}
	}
}


.timeline-primary 	{@include timeline-states($brand-primary);}
.timeline-warning      {@include timeline-states($brand-warning);}
.timeline-danger       {@include timeline-states($brand-danger);}
.timeline-success      {@include timeline-states($brand-success);}
.timeline-info         {@include timeline-states($brand-info);}
.timeline-inverse      {@include timeline-states($brand-inverse);}

// custom colors
.timeline-brown        {@include timeline-states($brand-brown);}  
.timeline-indigo       {@include timeline-states($brand-indigo);}
.timeline-orange       {@include timeline-states($brand-orange);}
.timeline-sky          {@include timeline-states($brand-sky);}
.timeline-midnightblue {@include timeline-states($brand-midnightblue);}
.timeline-magenta      {@include timeline-states($brand-magenta);}  
.timeline-green        {@include timeline-states($brand-green);} 
.timeline-purple       {@include timeline-states($brand-purple);} 


@mixin timeline-states($timeline-color)
{
	.timeline-body 			{border-color: $timeline-color}
	.timeline-body:after 	{border-right-color: $timeline-color !important;}
	.timeline-time 			{color: $timeline-color}
}