/* * * * * * * * * * * * * * *
 * Styles for the Home page  *
 * * * * * * * * * * * * * * */
  
  /*
 Skillnet rebrand - May 2018 - colours changes to match logo
 purple -> navy
 #4F2F91 -> #09283A
 
 Bright green -> light green
 #71B93A -> #77BE44 
 
 */
 
 /* Override default H2 color as HP tends to use white */
 h2, h3 {
 color: #FFFFFF ;
 }
 
 
 
/* 
 * main banner images
 *
 */
   
.container-full-screen { 
	position: relative ;
	width: auto ;
	max-width: 1400px ;
	margin: 0 auto ;
	}

	.banner-item { 
		position: relative ;  
		overflow: hidden ; 
		height: 425px ;  
		background-position: center center ;
		background-repeat: no-repeat ;
		background-attachment: scroll ;
		}

		.banner-item-level-article	{ 
			z-index: 8 ; 
			display: none ;
			position: absolute ; 
			top: 0 ; 
			bottom: 0 ; 
			left: 0 ; 
			right: 0 ; 
			width: 100% ; 
			height: 100% ; 
			}

	#BANNER00 	{
		position: relative ; 
		}

		.banner-item .container_12 {
			height: 100% ;
			max-width: 960px ;
		}
			.banner-item .container-table {
				display: table ;
				width: 100% ;
				height: 90% ;
			}
				.lt-ie8 .banner-item table {	/* IE < 8 don't know display: table/table-cell, so server dishes up html table instead */
					width: 100% ;
					height: 90% ;
				} 
			
				.banner-item .container-cell {
					display: table-cell ;
					padding: 2% 2% 2% 2% ;
					vertical-align: middle ;
					text-align: center ;
				}
					.lt-ie8 .banner-item table {
						vertical-align: middle ;
						text-align: center ;
					}
					
					.banner-box-text {
						padding: 0.75em ;
					}
					
					.banner-item h1 {
						color: white ;
						font-size: 3em ;
						padding-top: 0.25em ;
					}
					.banner-item p.text {
						color: white ;
						font-size: 2.45em ; /* 2.65em ; */
						font-weight: bold ;
						margin: 0 ;
						padding: 0.25em 0.5em ;
					}
					.banner-item p.link {
						color: white ;
						font-size: 1.64em ;
						margin: 0 ;
						padding: 0.25em 0.5em 0.35em 0.25em ;
						
					}
					.banner-item p.link a {
						color: white ;
						text-decoration: underline ;
					}


/************************
* search for course 
************************/

.hp-course-search {
	background: #4D5256 ; /* #ED164F ; */
	padding: 1em 0 ;
	color: #FFFFFF ;
	}
	.course-search {
		text-align: center ;
		} 

	.course-search div {
		display: inline ;		/* changed in css-media - small screen... */
	}

	.course-search input ,
	.course-search select {
		padding: 0.5% 1% ;
		margin-left: 0.5% ;
		margin-right: 0.5% ;
	}
		a.btnLinkSearch {
			display: inline-block ;
			background: #FFFFFF ;
			color: #77BE44 ; /* #ED164F ; */
			padding: 0.65% 4% 0.55% 4% ;
			border-width: 0 ;
			margin-left: 0.75% ;
			font-weight: bold ;
		}
			a.btnLinkSearch:hover {
				text-decoration: none ;
				background: #77BE44 ; /* #00ADEE ; */
				color: white ;
			}
			
/************************
* Upcoming courses content
************************/

.hp-upcoming-courses {
	padding-top: 1em ;
	padding-bottom: 1em ;	
	}
	
	.hp-upcoming-courses h2 {
		color: #77BE44 ;
	}
	

.hp-upcoming-courses .article-item {

}

.hp-upcoming-courses .article-item p {
	font-weight: bold ;
	margin-bottom: 0.5em ;
	margin-left: 74px ;  /* .date style has 60px width + 14px margin-right -- might be able to add this to main style.css */
}

.hp-upcoming-courses .article-item .read-more {
	margin-left: 74px ;  /* .date style has 60px width + 14px margin-right -- might be able to add this to main style.css */
				
	}
	
	.read-more a:link,
	.read-more a:hover,
	.read-more a:visited {
		color: #77BE44 ;
		font-weight: bold ;
	}
	
	.hp-upcoming-courses-button {
		margin-top: 1em ;

	}


/* * * * * * * * * * * * * * *
 * Tagline
 * * * * * * * * * * * * * * */
.hp-tagline {
	background: #09283A ; /* #00ADEE ; */
	color: #FFFFFF ;
	text-align: center ;
	padding: 1em 0 ;
	}
	.hp-tagline h2 {
		display: inline-block ;
	}

/***************************
* Featured course 
***************************/
.container-articles-listing {
	padding-top: 1.75em ;
	padding-bottom: 1.75em ;
	}

.divFeaturedImageBox {
	position: relative ;
	}
	.divFeaturedImageBox img {
		display: block ; 
	}
	.divFeaturedTextBox {
		display: block;
		background-color: #4D5256 ; /* #ED174F ; */
		color: #FFFFFF ;
		font-weight: normal ;
		padding: 1% 4% 1% 2% ;
	}
		.ftb-top {
			position: absolute ;
			top: 0 ;
			left: 0 ;
		}
		.ftb-bottom {
			position: absolute ;
			bottom: 0 ;
			left: 0 ;
		}
	
		.divFeaturedTextBox:link ,
		.divFeaturedTextBox:visited {
			color: #FFFFFF ;
		}
		.divFeaturedTextBox:hover {
			background: #08AA9D ; /* #00AEEF ; */
			text-decoration: none ;
		}


.container-articles-listing article a {
	font-weight: bold ;
	}


/*********************
* Testimonial 
*********************/

.divTitle {
	background: #77BE44 ;
	padding: 2% 3% ;
	}

/*********************
* YouTube video
*********************/

.container-iframe-video {
/*		max-width: 400px !important ;*/
	position: relative;
    padding-bottom: 56.25%;
    xpadding-top: 30px;
    height: 0;
    overflow: hidden;
	}
	
	
	
	
.container-iframe-video iframe  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*********************
* Download brochure #ADDED
*********************/

.divDownloadBrochure {
	margin-top: 1.5em ;
	}


/* * * * * * * * * * * * * * *
 * 3 x vertical pop-up boxes 
 * * * * * * * * * * * * * * */

.info-box-container {
	position: relative ;
	height: 265px ;
	overflow:hidden ;
	margin-top: -265px !important ;
	z-index: 100 ;
	}

	.info-box-wrapper {	}
	
	/*
	 * info-box - core container for each section pop-up 
	 * - not using grid_* classes - position & float clashes ...
	 */
	.info-box {
		width: 31.333%;					/* 31.333% is grid_4's width */
		margin: 215px 1% 0 1% ; 		/* tab height is 265 - 215 ....  1% is grid_4's margins */
		height: 275px ;
		float: left ;
		text-align: center ;
		padding: 0 ;
		background: #77BE44 ;
		color: #FFFFFF ;
	
		transition: margin-top 1s;
		-webkit-transition: margin-top 1s;
	}
		.lt-ie8 .info-box {
			margin-left: 0.8% ;
			margin-right: 0.8% ;
		}
	
		/* 
		 * in hover state, reduce the top margin to reveal the contents of the box ...
		 * - the transition styles above controls the sliding speeding ...  
		*/
		.info-box-1:hover ,
		.info-box-2:hover ,
		.info-box-3:hover  {
			margin-top: 0;
		}
			
		/* box title */
		.info-box h2 {
			padding-top: 0.8em ;
		}
			.info-box a {
				color: #FFFFFF ;
			}
	
		/* section box's details (initially "hidden", then hover shows it */	
		.info-box .info-box-details {
			padding: 0 5%;
		}
	
		/* links */
		.info-box .info-link a { color: inherit ; text-decoration: underline ; }
	
  
/* * * * * * * * * * * *
 * 3 x article columns 
 * * * * * * * * * * * */

	.articles-listing article h1 {
		font-size: 1.6em ;
		font-weight: normal ;
		padding-bottom: 0.15em ;
		}
	.container-articles-listing article ul {
		margin: 0 ;
		padding: 0 ;
		list-style: none ;
	}		
		.container-articles-listing article ul li {
			border-bottom-width: 1px ;
			padding: 0.7em 0 ;
		}		
		.container-articles-listing article ul li.last {
			border-bottom-width: 0 ;
		}
				
			.articles-listing article h3 {
				margin-top: 0.35em ;
				font-size: 1.2em ;
				color: #353535 ;
				}
			.articles-listing article p {
				margin: 0.5em 0 1em 0 ;
				}

		/* video box - fluid width/height code ; see: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
		.container-articles-listing .article-video-box {
			margin-top: 1em ;
			margin-bottom: 1em ;
			position: relative ;
			padding-bottom: 56.25% ;  /* 16:9 .. 500 x 281 ..*/
			padding-top: 5px ;
			height: 0 ;
		}
			.container-articles-listing .article-video-box iframe {
				position: absolute ;
				top: 0 ;
				left: 0 ;
				width: 100% ;
				bottom: 100% ;
			}

		/* text box */
		.container-articles-listing .article-text-box p {
			font-size: 0.9em ;
		}


	.container-articles-listing .articles-view-more {
		margin-top: 0.9em ;
		font-size: 0.9em ;
	}
		.container-articles-listing .articles-view-more a {
			padding: 0.75em 0.75em 0.75em 0 ;
		}