/* 
*
* Course Detail Page
*
* Sol
* 30.1.17
*
*/


/*--------

Codecharge elements can sometimes cause problems when deleted, especially if {labels} are referenced elswhere. 
For the moment, add .hide-me to such elements....*/

.hide-me {
    display: none;
}

/*-------*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.plc-content * {
    font-family: 'Roboto', sans-serif;
}

/*-----------

Some general page fixes....*/


.plc-courseDetail #outerwrapper > #content3 #maintitle h1 {
	margin: 0;
	font-size: initial;
}

.plc-courseDetail #footer1 #footerText .footerlinks {
	display: block;
}

@media only screen and (max-width: 479px) {
  .plc-courseDetail #leftcontent {
	  margin-bottom: 0 !important;
  }

  .plc-courseDetail #midcontent {
  	float: none;
  	margin-bottom: 30px;
  }

  .plc-courseDetail #topHeadng {
  	display: none;
  }

  .plc-courseDetail #content3 {
  	height: auto !important;
  	box-sizing: border-box;
  	border-left: 0;
  	border-right: 0;
  }

  .plc-courseDetail #rightcontent {
  	display: block;
  	float: none;
  	position: static;
  	top: initial;
  }

  .plc-courseDetail #rightcontent #news1,
  .plc-courseDetail #rightcontent #news2
   {
  	display: block;
  }
}


/*-------------*/

/* =================================

HEADER

====================================*/

.plc-header {
	box-sizing: border-box;
	padding: 5em 20px 1.5em;
	background-color: #6260CB;
	width: 100%;
}

.plc-header h1 {
	color: #FFF;
	font-size: 32px;
	font-family: 'Montserrat', sans-serif;
}

/* =================================

LEFT SIDEBAR

====================================*/

.plc-courseDetail #leftcontent #alink table {
	border-top: 3px solid #6260CB;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

.plc-courseDetail #leftcontent #alink table p {
	text-align: left;
}

.plc-courseDetail #leftcontent #alink table a {
	color: #888;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	letter-spacing: .5px;
}

.plc-courseDetail #leftcontent #alink table a::after {
	content: '';
	display: inline-block;
	margin-left: 5px;
	width: 25px;
	height: 16px;
	background-image: url(../../images/courses/cd-icon.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.plc-courseDetail #careerbutton_wrapper {
	display: none;
}


/* =================================

UTILITY PANEL

====================================*/

.plc-utilityPanel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.plc-utilityPanel #addToCareerFile {
	background-color: #6260CB;
	border-radius: 2px;
}



/* =================================

COURSE OVERVIEW

====================================*/


.plc-overview table {
	margin-top: 1em;
	width: 100%;
	color: #666;
	border-collapse: collapse;
}

.plc-overview table tr {
	border-bottom: 1px solid #CCC;
}

.plc-overview table tr td {
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid #CCC;
}

.plc-overview table tr td:first-child {
	font-weight: 500;
}


/* =================================

CONTENT

====================================*/


.plc-content div,
.plc-content p {
    line-height: 1.5;
    font-size: 14px;
    color: #444;
}

.plc-content div:not(.iframe-container) {
    margin-top: 1em;
    margin-bottom: 2em;
}

.plc-content h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    margin: initial;
    border-bottom: 3px solid #6260CB;
    color: #6260CB;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 0;
}


.plc-moduleInfo {
    line-height: 2;
    color: #444;
}

.plc-moduleInfo span {
    display: block;
    border-bottom: 1px solid #CCC;
    padding: 8px 0;
}

.plc-moduleInfo-entry a {
    float: right;
    color: #0071BC;
}

.plc-moduleInfo-entry a:hover {
    opacity: .9;
}

.plc-moduleInfo-entry a:visited,
.plc-moduleInfo-entry a:link {
    color: #0071BC;
}

span.plc-moduleInfo-title {
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #CCC;
    display: block;
    /* ensure border covers paragraph */
    letter-spacing: 1px;
}

span.plc-moduleInfo-title:not(:first-child) {
    border-top: 1px solid #CCC;
}

.plc-moduleInfo span:first-child {
    padding-top: 0;
}

.plc-moduleInfo span:last-child {
    border-bottom: none;
}

.plc-moduleInfo br {
    display: none;
}

div.plc-noteBox {
	margin-top: 1.5em;
	
}

.plc-noteBox span:not(.plc-note) {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    border-bottom: 2px solid #CCC;
    margin-bottom: .5em;
    position: relative;
}

.plc-progression {
	margin-bottom: 2em;
}

.plc-progression table {
	border-collapse: collapse;
	width: 60%;
	background-color: #F4F4F4;
	margin: 0 auto;
	text-align: center;
	border: 1px solid #EEE;
}

.plc-progression table tr td {
	padding: 8px;
}

/*

// Styling for ! icon

.plc-noteBox span:not(.plc-note)::after {
  content: '!';
  border: 2px solid #888;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  position: absolute;
  top: -3px;
  left: -30px;
}*/

.plc-note {
    display: list-item;
    position: relative;
    margin-bottom: .5em;
    font-size: 12px;
    color: #888;
    list-style-position: inside;
    text-indent: -2em;
    padding-left: 2em;
}

/* =================================

FURTHER RESEARCH

====================================*/


.plc-content .external-link,
.plc-content .external-link:link,
.plc-content .external-link:visited {
	color: #0071BC;
}

.plc-content .external-link:hover {
	opacity: .9;
}

.plc-content .external-link::after {
	content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  	margin-left:5px;
  	opacity: .8;
}

.plc-note2 {
	display: block;
	font-size: 12px;
}

p.courseDetail-disclaimer {
	color: #444;
	font-size: 12px;
}

.courseDetail-disclaimer span {
	text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    border-bottom: 2px solid #CCC;
    margin-bottom: .5em;
    position: relative;
}


/* =================================

OTHER COURSES...

====================================*/

.plc-similarCourses {
	margin-top: 1em;
	margin-bottom: 3em;
}

.plc-similarCourses a:link,
.plc-similarCourses a:visited  {
	color: #0071BC;
}

.plc-similarCourses a:hover  {
	color: #0071BC;
	opacity: .9;
}

/* =================================

INFOGRAPHICS 

====================================*/

.qqi-infographics {
    width: 100%;
    margin-bottom: 3em;
    text-align: right;
}

.qqi-infographics h3 {
   text-align: left;
}

.iframe-container {
    height: 314px;
    width: 100%;
    margin: 1em auto 0;
    position: relative;
    overflow: hidden;
    border: 3px solid #CCC;
    box-sizing: border-box;
}

#iframe-gender {
    margin-top: -1317px;
    margin-left: -270px;
    width: 900px;
    height: 1700px;
}

#iframe-grade {
    margin-left: -275px;
    margin-top: -1650px;
    width: 900px;
    height: 2500px;
}

.qqi-infographics * {
    color: #666;
}

.qqi-infographics span {
    display: inline-block;
    margin-top: .5em;
    font-style: italic;

}

.qqi-infographics span a:link,
.qqi-infographics span a:visited {
	color: #0071BC;
}

.qqi-infographics span a:hover {
    text-decoration: underline;
    color: #0071BC;
    opacity: .9;
}



/* ==========================================

PROGRESSION ROUTES

============================================*/

.plc-progression * {
	font-family: 'Roboto', sans-serif;
	line-height: 1.5;
	color: #666;
	font-size: 14px;
}

.plc-progression h3 {
	font-style: normal;
    font-weight: 500;
    font-size: 16px;
    margin: initial;
    border-bottom: 3px solid #6260CB;
    color: #6260CB;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 0;
    text-align: left !important;
}

.plc-progression h4 {
	color: #888;
	font-weight: 500;
	font-size: 14px;
}

.plc-progression p a,
.plc-prog-table a,
.plc-progression p a:link,
.plc-prog-table a:link,
.plc-progression p a:visited,
.plc-prog-table a:visited {
	color: #0071BC;
}

.plc-progression a:hover,
.plc-prog-table a:hover, {
	opacity: .9;
}
/* ==========================================

MEDIA QUERIES

============================================*/


/* ------- TABLET -------- */

@media screen and (max-width: 768px) {
	.qqi-infographics {
		display: none;
	}
}

/* ------- MOBILE-WIDE -------- */


@media screen and (max-width: 480px) {
	.plc-note {
		list-style-position: inside;
	}
}