/* * * * * * * * * * * * * * *
 * Styles for the Home page  *
 * * * * * * * * * * * * * * */
 
/* 
 * main banner images
 *
 */
   

.container-login-strapline {
	color: white ;
	}   
   
   
.container-banners .image {
	width: 75.5% ;				/* .5? .. banners are inside a grid_12 .. so dont' have the left/right 1% margins .. */
	}  
	.container-banners .image img {
		display: block ;
		width: 100% ;
	}
.container-banners .text {		/* nb: .text can be either DIV or A with tbl-cell class */
	width: 24.5% ;
	xbackground-color: #71b744 ;
	background-color: #557f63 ;
	color: white ;
	vertical-align: top ;
	padding: 1.25em ;
	}   

	.container-banners a.link-box:hover {
		background: #afce34 ;
		text-decoration: none ;
	}
   .container-banners .text .title {
   		color: white ;
   		font-size: 1.15em ;
   		margin-bottom: 1em ;
   }
   .container-banners .text p {
   		font-size: 1.1em ;
   		line-height: 1.4 ;
   		margin-bottom: 0 ;
   		font-weight: 300 ; 
   }
   
.container-info-boxes .grid_3 {
	
	}

	.container-info-boxes .info-box {
		background: #FFFFFF ;
		/**/
		position: relative ;
		zdisplay: block ;
		padding-bottom: 5em ;
	}

	.container-info-boxes img {		/* svg icons. svg Fill colours are set in the svg file.. */
		display: block ;
		xwidth: 50% ;
		xheight: 35% ;
		margin-left: auto ;
		margin-right: auto ;
		xpadding-top: 1em;
	}

	.container-info-boxes h2 {
		text-transform: uppercase ;
		font-size: 1.4em ;
		min-height: 2.6em ;
		margin: 5% 5% 2.5% 5% ;
	}
	.container-info-boxes p {
		min-height: 6.5em ;
		display: inline-block ;
		margin: 0 5% 5% 5% ;
	}
	.container-info-boxes .link-btn {
		margin: 5% ;
		padding: 5% 10% ;
		xdisplay: inline-block ;
		background: #71b744 ;
		color: white ;
		/**/
		position: absolute ;
		bottom: 0 ;
		left: 0 ;
	}	   
	.container-info-boxes .link-btn:hover {
		background: #afce34 ;
		text-decoration: none ;
	}	   
	 

.container-activities .grid_3 ,
.container-activities > .grid_6 {
	margin-bottom: 1em ;
	}
	.activity-box .heading {
		color: #FFFFFF ;
		padding: 0.6em 0.6em ;
		text-transform: uppercase ;
		font-size: 1.4em ;
	} 
	
	.activity-box .heading {	
		background-color: #557f63  ;
	}	

	.activity-box a {
		display: block ;
		xpadding: 0.25em ;
		}	 
		.activity-box a:hover {
			background-color: #F0F0F0 ;
			text-decoration: none ;
			}	
	
		.activity-box-1, 
		.activity-box-2 {
			/* to stop box3/4/5/6 pulling to left when only 1 or 2 articles available */ 
			min-height: 13em ;
			}
				 
		.activity-box-1 ul , 
		.activity-box-2 ul {
			list-style: none ;
			margin: 0 ;
			padding: 0 ;
			}
			.activity-box-1 li , 
			.activity-box-2 li {
				padding: 0.75em 0 ;
				border-width: 0 0 1px 0 ;
				line-height: 1.45 ;
			}
			.activity-box-1 p , 
			.activity-box-2 p {
				margin: 0 ;
				color: #53565A ;
				font-weight: 300 ; 
			}
			.activity-box-1 .item-title , 
			.activity-box-2 .item-title {
				color: #1679A3 ;
			}
			
			
					.activity-box-3  ,
		.activity-box-4 {
			position: relative ;
			display: block ;
		}
			.activity-box-3 h2 ,
			.activity-box-4 h2{
				color: inherit ;
			}
		.activity-box-3 a , 
		.activity-box-4 a {
			position: absolute ;
			top: 0 ;
			right: 0 ;
			bottom: 0 ;
			left: 0 ;
			color: white ;
		}
			.activity-box-3 a:hover ,
			.activity-box-4 a:hover {
				color: #00A4CD ;
				background: transparent ;
			}
			.activity-box-3 .tbl-table ,
			.activity-box-4 .tbl-table  {
				height: 100% ;
			}
			.activity-box-3 .tbl-cell ,
			.activity-box-4 .tbl-cell  {
				text-align: center ;
				font-size: 2em ;
				padding: 0.25em ;
			}
			
			
			
			
			
.activity-box-5.container-iframe-video {
			position: relative ;
			padding-bottom: 56.25% ; 	/* 16:9 ratio .. */
			padding-top: 30px ;
			height: 0 ;
			overflow: hidden ;
		}
			.activity-box-5.container-iframe-video iframe {
				position: absolute ;
				top: 0 ;
				left: 0 ;
				width: 100% ;
				height: 100% ;
			}
		
		.activity-box-5.container-picture a {
			display: block ;
		}
			
		.activity-box-5.container-picture img {
			width: 100% ;
			display: block ;
		}