/*========================================================================*/
/*   07. UNITS
/*========================================================================*/

.unit_title{
	margin-bottom:30px;
}
.unit_title,
#unit.page_title{
	h1{
		clear:both;
		width:100%;
		margin:10px 20px 10px 0;
		display: inline-block;
	}
	ul{
		width: 50%;
		padding: 0;
		border: none;
		display: inline-block;
		&.tags{margin:0;}
		li{
			float:left;
			margin-right:10px;
			a{
				color:$light-text-color;
				font-size:11px;
				text-transform: uppercase;
				font-weight:600;
			}
		}
	}
	.instructor{
		width: 50%;
		display: inline-block;
		text-align:right;
		border:none;
		padding:0;
		margin:0;
		float:right;
		img{
			width:32px;
			height:auto;
			border-radius:50%;
			float: right;
			margin-top:2px;
			margin-left: 10px;
		}
		span{
			text-transform: uppercase;
			color: $light-text-color;font-size:11px;
		}
	}
}


.unit_title,
.quiz_title{
	.print_unit{
		position: relative;
		background: none;
		color:$light-text-color;
		float:left;
		padding:0 10px 0 0;
		&+span{
			float:left;
			font-size: 11px;
			color: #bbb;
			font-weight: 600;
			text-transform: uppercase;
			margin-top: 0;
		}
	}
}




.heading{
	ul.socialicons{
		margin:0 5px;
		float:right;
		li a{
			line-height: 1.5;
		}
	}	
	a.print_results{
		padding: 5px 6px;
		color: #444;
		cursor: pointer;
		line-height: 1;
		background: $bordercolor;
	}
} 

.course_time{
	margin-top: 30px;
	font-family: sans-serif;
	text-transform: uppercase;
	strong{
		color:$light-text-color;
		span{
			color:#222;
		}
	}
}

.course_timeline{
	border: 2px solid #3f4c4f;
	border-radius: 2px;
	background: #313b3d;
	margin: 30px 0;
	padding-bottom: 30px;
	position: relative;
 	li{
		padding:15px 0 15px 30px;
		padding:0;
		text-align: left;
		position: relative;
		a{
			opacity:0.8;
		}

		&.section + li,
		+li.section{
			margin-top:10px;
		}
		&.unit_line{
			margin-left:20px;
			border-left:3px solid #3f4c4f;
		}
		&.done a{
			opacity:1;
		}
		&:hover a,&.active a{
			opacity:1;
		}
		& > span{
			position: absolute;
			left: -7px;
			top: 18px;
			width: 12px;
			height: 12px;
			border: 2px solid #313b3d;
			background: #3f4c4f;
			border-radius: 50%;
			&.loading{
				border:3px double;
			}
		}
	}
	h4{
		margin:0;
		padding: 20px;
		background: #232b2d;
	}

	h4,li a{
		font-size:11px;
		text-transform: uppercase;
		color: rgba(255,255,255,0.8);
		font-weight:600;
	}
	h4{
		font-size: 12px;
	}
	li + li.unit_line{
		padding:15px 0;
	}
	li > a{
		margin:0 10px 0 20px;
		display: inline-block;
	}


	li.done > span,li:hover > span,li.active > span{
		background:#78c8ce;
	}
	li.done > span:before{
		font-family: "fonticon";
		content: "\e038";
		color:#FFF;
		font-size: 10px;
		text-align: center;
		display: inline-block;
		margin: 3px 0 0 5px;
	}

	li.done > span{
		width: 24px;
		height: 24px;
		left: -13px;
		top:12px;
		background: #70c989;
	}
}

/* BUTTONS */

.course_button > span{
	display: block;
	opacity: 0.8;
	font-weight:400;
}


.active .unit span{
	background:#78c8ce;
	color:#FFF;
}
.done .unit span{
	background:#70c989;
	color:#FFF;
}

.review_course.unit_button.button{
	margin:15px 0;
}




.unit_button.button{
	padding: 12px 24px !important;
	background-color: #78c8ce;
	width:100%;
	text-align: center;
	border:1px solid #78c8ce;
	margin:0;
}

.unit_content .unit_button.button{
	margin-top:20px !important;
}
.unit_content p{position: relative;}