.userProfile-container{

	.userProfilePic{
		border: 4px solid $base-border-color;
  		@include border-radius($circle-border-radius);
	}
	.userProfileName{
		font-size: 16px;
		font-weight:bold;
		line-height: 30px;
		color: $color;
	}
	.userProfileDesc{
		color:$color;
    	line-height:16px;
	}

	.user-profile-desc{

		.x-box-item{
		 	&:before{
				color: $base-color;
				margin-right: 12px;
				font-size: 18px;
				position: relative;
				top: 2px;
		 	}
		}
		a{
			color:$color;
			text-decoration:none;
		}
	}
	.about-me-wrap{
        border-top:1px solid $base-border-color;
        border-bottom:1px solid $base-border-color;

		h3{
			margin:0;
			font-size:16px;
			padding:14px 0 10px 0;
			display:block;

			&:before{
				font-size:18px;
			    color: $base-color;
			    margin-right:12px;
			}
		}
		p{
			margin:0;
		    padding: 0 20px 20px 26px;
		}
	}
	.likes-friends-wrap{
		text-align: center;
  		border-top: 1px solid $base-border-color;
  		.x-panel{
		    margin-top:12px;
		}
		.friends-count-wrap{
			border-left: 1px solid $base-border-color;	
		}
	}

    .large-icon {
        &:before {
            color: $base-color;
            font-size: 35px !important;
        }
    }

    .icon-padding {
        &:before {
            padding: 16px;
        }
    }

    .tall-separator {
        height: 48px;
    }

	.fa-ellipsis-v{
	    font-size: 20px;
	}
	.likes-value,.friends-value{
		font-size:16px;
		line-height:24px;
		font-weight: normal;
	}
	.comments{
		margin-bottom:10px;
		img.profile-icon{
		    height:50px;
		    width:50px;
		    border:2px solid $base-border-color;
		    @include border-radius($circle-border-radius);
		    float:left;
		}
		h4{
			font-size: 14px;
			margin: 0 100px 12px 0;
			span{
				margin-left:8px;
			    font-size:18px;
			    position:relative;
			    top:2px;
			}
		}
		.from-now{
		    float:right;
		    span{
			    margin-right: 5px;
			    font-size: 16px;
			    position:relative;
			    top:1px;
			}
		}
		.content-wrap{
		    margin-left:65px;
		    .content{
				margin-bottom: 15px;
	  			white-space: normal;
			}
		}
		&.sub-comments{
			margin: 0 0 10px 60px;
    		border-bottom:1px solid $base-border-color;
			.like-comment-btn-wrap{
				border-bottom:none;
			}
		} 
	}
	.like-comment-btn-wrap{
		text-align: right;
		padding-bottom: 15px;
		border-bottom: 1px solid $base-border-color;
	    button{
			margin-left: 15px;
			height: 30px;
			width: 30px;
			background-color: $like-comment-btn-background-color;
			font-size: 14px;
			color: $color;
			border: none;
			cursor: pointer;
	    }
	}
	.x-grid-item,.x-grid-item-over{
	    background:$lightest-color;
	    border:0;
	}
	.x-grid-item:last-child {
		border-bottom:none;
		.like-comment-btn-wrap{
		    border-bottom: none;
		    padding-bottom:0;
		}
		.comments{
			margin-bottom:0;
		}
	}
	.x-grid-cell-inner{
	    padding: 0;
	}




	.timeline-item{
		&:before{
			content: "";
			position: absolute;
			width: 2px;
			height: 100%;
			left: 50px;
			background: $base-color;
		}
		.profile-pic-wrap{
			width: 100px;
			float: left;
			font-size: 10px;
			text-align: center;
			position: relative;
			background: $lightest-color;
			padding: 5px 0;
			img{
			    height:46px;
			    width:46px;
			    @include border-radius($circle-border-radius);
			}
		}
		.contents-wrap {
			margin: 0 0px 15px 110px;
			border:1px solid $base-border-color;
			position: relative;
			padding: 15px;
			white-space: normal;
			&:before,&:after{
				content: "";
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				left: 0;
				top: 0;
			}
			&:before{
				border-top: 9px solid transparent;
				border-bottom: 9px solid transparent;
				border-right: 9px solid $base-border-color;
				margin: 15px 0 0 -9px;
			}
			&:after{
				border-top: 9px solid transparent;
				border-bottom: 9px solid transparent;
				border-right: 9px solid $lightest-color;
				margin: 15px 0 0 -8px;
			}
			.shared-by,.followed-by{
			    font-size:12px;
			    line-height:18px;
			    margin-bottom:10px;
			    a{
			    	color: $base-color;
				    text-decoration:none;
				    font-weight:bold;
			    }
			}
			.shared-img {
				width: 100%;
				display: block;
			}
			.job-meeting a{
			    color: $base-color;
			    text-decoration:none;
			    font-weight:bold;
			    margin-bottom:10px;
			    display:block;
			}
		}
		.timeline-day{
		    width: 100px;
		    background: $lightest-color;
		    text-align: center;
		    padding: 7px 5px;
		    position: relative;
		    margin-bottom: 15px;
		    color: $base-color;
		    font-size: 14px;
		    border: solid 3px $base-color;
		    @include border-radius(3px);
		    font-weight:bold;
		}
		.article-comment {
			border-left: 5px solid $base-border-color;
			padding: 10px 20px;
			span{
				margin-right:10px;
				color: $article-comment-color;
			}
		}
		.followed-by{
			img{
			    height:32px;
			    width:32px;
			    @include border-radius($circle-border-radius);
			    margin-right:5px;
			    float:left;
			}
			.followed-by-inner{
			    margin-left: 40px;
			    padding: 5px 0;
			}
		}
	}
	.timeline-items-wrap{
        padding:15px;
        background: #fff;

		.x-grid-item-focused .x-grid-cell-inner:before{
			border: none;
		}
		.x-panel-body{
			display:block !important;
		}
	}
}
