/*
* # Admin Panel for eDirectory
* @copyright Copyright 2014 Arca Solutions, Inc.
* @author Basecode - Arca Solutions, Inc.
*/

.timeline {
	background-color: lighten(@gray-lighter, 4%);
	border: 1px solid @gray-light;
	-webkit-overflow-scrolling: touch;
	.timeline-control {
		.tml-heading {
			background-color: @gray-lighter;
			padding: 10px;
			border-bottom: 1px solid @gray;
			font-size: 16px;
			h2 {
				margin:0;
				text-transform: uppercase;
				font-size: 1.4em;
				small {
					padding-top:6px;
					text-transform: none;
					float: right;
					@media(max-width: @screen-sm-min) {
						clear: both;
						display: block;
						float: none;
					}
				}
			}
			@media(max-width: @screen-sm-min) {
				font-size: 14px;
				text-align: center;
			}
		}
		.tml-nav {
			.nav-tabs {
				background-color: lighten(@gray-lighter, 0.5%);
				border-bottom-color: transparent;
				li {
					width: 12.5%;
					border-right: 1px solid @gray;
					&:last-child {
						border-right: none;
					}
					@media(max-width: @screen-sm-min) { 
						display:block;
						width: auto;
						float: none;
						border-bottom: 1px solid @gray;
						border-right-color: transparent;
					}
				}
				a {
					color: @gray;
					margin-right: 0;
					padding:10px 0;
					text-align: center;
					&.active {
						background-color: lighten(@gray-lighter, 4%);
						color: @gray-dark;
						border-color: transparent;
						border-right-width: 1px;
					}
					&:hover, &:focus {
						background-color: lighten(@gray-lighter, 4%);
						color: @gray-dark;
					}
					.label {
						position: absolute;
					    right: 0;
					    top: -13px;
					    z-index: 2;
					}
					@media(max-width: @screen-sm-min) {
						border-color: transparent;
						&.active,&:hover, &:focus {
							border-top-color: @gray;
						}
					}
				}
			}
		}
		&.tmlaffix {
			@media(min-width: @screen-lg-min) {
			    left: 135px;
			    right: 2em;
			    top: 58px;
			    z-index: 9;
			    position: fixed;
			    transform: translate3d(0px, 0px, 0px);
			}
			@media(min-width: @screen-md-min) and (max-width: @screen-lg-min)  {
				position: fixed;
				position: sticky;
				right: 1em;
				left: 1em;
				top:0;
				z-index: 9;
			    transform: translate3d(0px, 0px, 0px);
			}
		}
	}
	&.tml-tmlaffix {
		@media(min-width: @screen-lg-min) {
			padding-top:80px;
		}
	}
	.timelinescroll {
		display: block;
		position: relative;
	}
	.timeline-empty {
		@media (min-width:@screen-sm-min) {			
			padding: 20px 20px 50px;
			text-align: center;
			font-size: 1em;
			width: 60%;
			margin: 0 auto;
		}
		@media (max-width:@screen-sm) {	
			font-size: 0.9em;
			width: 100%;
			text-align: center;
			padding: 10px 20px 30px;
		}
		i {
			color: @gray-light;
			font-size: 5em;
		}
		h1 {
			color: @gray-light;
		    font-family: Georgia, serif;
		    font-size: 5em;
		}
		p {
			font-size: 1.1em;
			color: lighten(@gray-dark, 4%);
		}
	}

}

.timeline-group {
	font-size: 100%;
	margin-top: 60px;
	.date {
		max-width: 90px;
		border: 1px solid #dedede;
		background-color: white;
		text-align: center;
		float: right;
		.type {
			font-size: 2em;		
			padding:0.2em 0.6em;
			color: white;
			&.type-listing {
				background-color: @brand-primary;
			}
			&.type-deal {
				background-color: @brand-info;
			}
			&.type-comment {
				background-color: @brand-success;
			}
			&.type-account {
				background-color: @brand-warning;
			}
			&.type-newsletter {
				background-color: @brand-warning;
			}
		}
		.time {
			font-size: 0.8em;
			padding:0.5em 1em;				
			color: @gray-dark;
			span {
				display: block;
			}
		}
	}	
	p {
		margin:0;
		line-height: 1;
	}
	hr {
		margin:0.6em 0;
	}
	blockquote {
		margin: 20px 0 10px;
		padding: 5px 15px 15px;
		p {
			font-size: 0.77em;
			font-style: italic;
			line-height: 1.4;
		}
	}
	.content-image img {
		max-width: 100%;
		max-height: 60px;
	}
	.timeline-group-item{
		position: relative;		
		.user-profile {
			float: left;
		    padding: 0 1em 1.1em 0;
		    width: 60px;
			img {
				width: 100%;
				max-width: 100%;
				max-height: 50px;				
			}
		}
		.panel:before {
			content: "";
			display: block;
			width: 10px;
			height: 10px;
			position: absolute;
			border-width: 10px;
			border-style: solid;
			border-color: transparent  @gray-light transparent transparent;
			margin: 22px 0 0 -20px;
		}
		.panel-footer {
			 padding: 10px 15px 10px;
			 background-color: lighten(@gray-light,7%);
			 color: darken(@gray,30%);
			 .check-success {
			 	[class*="icon-"] {
				    display: inline-block;
				    font-size: 1.6em;
				    vertical-align: middle;
			 	}
			 	.icon-ion-ios7-checkmark-outline {			 		
				    color: @brand-primary;
			 	}
			 	.icon-ion-ios7-close-outline {
			 		color:@brand-danger;
			 	}
			 }	
			 a, a:active{
			 	 color: darken(@gray,30%);
			 	 text-decoration: underline;
			 }	
			 a:hover {
			 	color:@link-hover-color;  
			 }	 
		}
	}
}



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

.timeline-group {
		position: relative;
		p {
			line-height:1.4;
		}
		hr {
			margin-top: 10px;
		}
		.date {
			max-width: 100%;
			width: 100%;
			font-size: 1.6rem;
			border: none;
			background-color: lighten(@gray-light, 2%);
			.type {
				float: right;
			    font-size: 1.6em;
			    line-height: 1.85em;
			    padding: 0.22em 0.8em 0.22em 0;
			    text-align: right;
			    width: 100%;
			}
			.time {
				position: absolute;
    			padding: 1.1em 0 0 70px;
    			color: white;
			}
		}
		.timeline-group-item {
			.panel:before {
				display: none;
				}		
			.user-profile {
				position: absolute;		
				top: -74px;
				left: 0;
				text-align: right;
				width: 72px;
				img {
					height: 57px;
    				max-height: 57px;				
				}
			}	
		}
	}
}
