/** 

course-price
Renders info about how much it costs to join a course etc

**/

/** course-price-block **/

.course-price-block {

}

.course-price-block > div {
	margin: 0px 10px;

	text-align: center;
	line-height: 100%;
}

.course-price-block > div > div:first-child {
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
}

.course-price-block > div > div:last-child {
	font-size: 28px;
	font-weight: 100;
}

/** course-price-inline **/

.course-price-inline {
	display: inline-block;
	line-height: 175%;
}

.course-price-inline .price {
	color: #57ad0b;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 150%;
}

.course-price-inline .discounted-price,
.course-price-inline .discount {
	font-weight: bold;
	color: #FF9500;
}
.course-price-inline .discounted-price {
	text-transform: uppercase;
	text-decoration: line-through;
}


/** 

course-info-box
Renders the info box for a course

**/

.course-info-box {

}

/** course-price-block **/
/* override font sizing for Course_Access component rendering in the a Course_Info_Box */

.course-info-box .course-price-block > div {
	margin: 0px 5px;
}

.course-info-box .course-price-block > div > div:first-child {
	margin-bottom: 1px;
	font-size: 12px;
}

.course-info-box .course-price-block > div > div:last-child {
	font-size: 18px;
	font-weight: normal;
}

/** .course-info-box.featured **/

.course-info-box.featured {
	border: 0px;
}

.course-info-box.featured .course-info-box-pricing {
	padding-bottom: 0px;
	padding-top: 8px;
	margin-bottom: -8px;
	color: #fff;
	background: #F9B133;
}

.course-info-box.featured .course-info-box-pricing .price {
	color: #2D53AF;
}

.course-info-box.featured .course-info-box-pricing .button > span {
	padding-top: 15px;
	padding-bottom: 15px;
}

.course-info-box.featured .course-info-box-pricing .right {
	position: relative;
	top: -15px;
}

/**

course-highlights
Renders bullet point list of key facts about a course

**/

.course-highlights {

}

.course-highlights ul {
	margin-bottom: 0px;
}
.course-highlights ul li {
	margin-bottom: 10px;
}
.course-highlights ul li:last-child {
	margin-bottom: 0px;
}

/**

course-curriculum
Renders the contents of a course in varying layout mode configurations

**/

/** course-curriculum-bar **/

.course-curriculum-bar {
	position: relative;

	/*border: 1px solid #aaa;*/
	background: #fff;
}

.course-curriculum-bar::after {
	content: " ";
	
	position: absolute;
	z-index: 1;
	left: 14px;
	top: 15px;
	bottom: 0px;

	width: 2px;

	background: #ECECEC;
}

.course-curriculum-bar > div { /* section grouping */
	position: relative;
	z-index: 2;
}

.course-curriculum-bar > div .section-header { /* section header */

}

.course-curriculum-bar > div .section-header > div,
.course-curriculum-bar > div .section-header > a {
	font-weight: bold;
	background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.03),rgba(0,0,0,0.01));

	/* see .course-curriculum-bar > div > ul > li > div */
}

.course-curriculum-bar > div > ul { /* content grouping */
	position: relative;
	
	margin: 0px;
	padding: 0px;

	list-style: none;
}

.course-curriculum-bar > div > ul.fixed-height {
	transition: all 500ms ease;
	overflow: hidden;
}
.course-curriculum-bar > div > ul.fixed-height.active {
	overflow: scroll;
}

.course-curriculum-bar > div > ul > li { /* content container */
	position: relative;

	margin: 0px;
	/*padding-left: 30px;*/ /* left position + width of .course-curriculum-bar::after + left + width position of this::after */
	padding: 0px;
}

.course-curriculum-bar > div > ul > li::after,
.course-curriculum-bar > div .section-header::after {
	/*content: " ";

	position: absolute;
	left: 14px;
	top: 50%;
	margin-top: -1px;

	width: 7px;
	height: 4px;

	background: #aaa;*/

	content: " ";

	position: absolute;
	left: 5px;
	top: 10px;

	width: 16px;
	height: 16px;

	border-radius: 50%; /* => circle */
	background: #FFF;
	border: 2px solid #ECECEC;

	z-index: 1;
}

.course-curriculum-bar > div > ul > li > .fa,
.course-curriculum-bar > div .section-header > .fa {
	position: absolute;
	top: 15px;
	left: 10px;
	color: #ECECEC;
	font-size: 11px;
	z-index: 2;
}

.course-curriculum-bar > div > ul > li > .fa.fa-circle,
.course-curriculum-bar > div .section-header > .fa.fa-circle {
	margin-left: 0.5px;
}

.course-curriculum-bar > div > ul > li > .fa.fa-play,
.course-curriculum-bar > div .section-header > .fa.fa-play {
	margin-left: 2px;
}

.course-curriculum-bar > div > ul > li > .fa.fa-question,
.course-curriculum-bar > div .section-header > .fa.fa-question {
	margin-left: 2px;
}

.course-curriculum-bar > div > ul > li > .fa.fa-file,
.course-curriculum-bar > div .section-header > .fa.fa-file {
	margin-left: 1px;
	font-size: 10px;
	margin-top: -1px;
}

.course-curriculum-bar > div > ul > li > div, /* content */
.course-curriculum-bar > div .section-header > div,
.course-curriculum-bar > div > ul > li > a, /* content */
.course-curriculum-bar > div .section-header > a { 
	display: block; /* as might be an a tag */

	/* force text styling in case of a tag */
	text-decoration: none;
	color: #050505; /* ie body default */

	padding-left: 35px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;

	border-bottom: 1px solid #ECECEC;
}

.course-curriculum-bar > div .section-header > a {
	color: #999;
}
.course-curriculum-bar > div .section-header.active > a {
	color: #050505;
}

.course-curriculum-bar > div > ul > li.active {
	/*background: rgba(0,0,0,0.01);*/
}
.course-curriculum-bar > div > ul > li.active > div,
.course-curriculum-bar > div > ul > li.active > a {
	font-weight: bold;
}

.course-curriculum-bar > div .section-header.active > a { 
	cursor: default;
}

.course-curriculum-bar > div > ul > li.completed::after,
.course-curriculum-bar > div .section-header.completed::after {
	/*border-color: #45910e;*/
	border-color: #15739F;
}
.course-curriculum-bar > div > ul > li.completed > .fa,
.course-curriculum-bar > div .section-header.completed > .fa {
	/*color: #45910e;*/
	color: #15739F;
}

.course-curriculum-bar > div > ul > li > div {
	font-size: 13px;
	color: rgba(0,0,0,0.75);
}

.course-curriculum-bar > div > ul > li p {
	margin-bottom: 0px;
	margin-top: 5px;
}

.course-curriculum-bar > div > ul > li p.sub {
	font-weight: 100;
}
.course-curriculum-bar > div > ul > li p.learn-status {
	font-weight: bold;
}

.course-curriculum-bar > div .learn-status {
	margin-top: 0px;
	margin-bottom: 3px;
	font-weight: bold;
	color: #F9B133;
}
.course-curriculum-bar > div .section-header .learn-status {
	/* and in theory the actual section header title wraps around this... */

	float: right;
}

.course-curriculum-bar > div .learn-status > * {
	vertical-align: middle;
}

.course-curriculum-bar > div .learn-status .button {
	float: right;

	margin-right: 5px;
	height: 15px;
	border-color: #ddd;
	color: #ddd !important;
}
.course-curriculum-bar > div .learn-status .button .fa {
	visibility: hidden;

	position: relative;
	margin: 0px;
	top: -2px;
	margin-left: -1px;
	margin-right: -1px;
}

.course-curriculum-bar > div .learn-status.completed {
	/*color: #45910e;*/
	color: #15739F;
}
.course-curriculum-bar > div .learn-status.completed .button {
	border-color: #aaa;
	color: #aaa !important;
}
.course-curriculum-bar > div .learn-status.completed .button .fa {
	visibility: visible;
}