/*	Override default styles
	------------------------------ */

#main-content p, #main-content h3, #main-content h4,
#main-rightbox p, #main-rightbox h3, #main-rightbox h4,
#site-footer {
	margin-top: 0;
}
		
#main-header-menu ul li a {
	border-right: 1px solid #ccc;
}

#main-header-menu ul .last a {
	border: 0;
}

#main-breadcrumb {
	margin: 0;
}

#main-content {
	margin-bottom: 1.5em;
}

#main-rightbox {
	font-size: 89%;
}

#site-footer {
	color: #999;
	border: 0;
	background: url(../images/site-footer-bg.png) no-repeat center top;
	width: 960px;
}

	#site-footer a {
		color: #666;
		text-decoration: none;
	}
	
	#site-footer a:focus,
	#site-footer a:hover {
		color: #333;
	}

#main-botlinks {
	margin-bottom: 0;
	padding-bottom: 10px;
}

a {
	color: #007ba5;
	text-decoration: none;
}

a:focus,
a:hover {
	color: #007ba5;
	text-decoration: underline;
}


/*	Global styles
	------------------------------  */

#main-title {
	width: 100%;
	background: #006283 url(../images/ttlbg-site.jpg) no-repeat left top;
	font-size: 100%;
	* html font-size: 90%;
}

#main-title h1 em {
	color: #6caec8;
	font-style: normal;
	padding-left: 1px;	
}

#site-footer {
	font-size: 85%;
	width: 920px;
	margin: 20px auto 0;
	padding-top: 20px;
	border-top: 1px solid #ccc;
	clear: both;
	text-align: center;
}

.nounderline {
	text-decoration: none;
}

.featurecolour1 {
	color: #d4cade;
	font-weight: normal;
}

.featurecolour2 {
	color: #007ba5;
}

sup {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	font-size: 75%;
	bottom: 1ex;
}

sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	font-size: 75%;
	top: 1ex;
}


/*	Home page 
	------------------------------ */
	
#home {
	background: #006283 url(../images/home-bg.jpg) no-repeat left top;
	overflow: hidden;
	position: relative;
}

#home-page #main-footer {
	background: transparent url(../images/main-footer-bg.png);
}

h2.logo {
	background: transparent url(../images/logo.png) no-repeat left top;
	float: right;
	width: 397px;
	height: 124px;
	text-indent: -9999px;
	margin: 0 0 80px;
}

#content {
	background: url(../images/content-bg.png) no-repeat right -85px;
	overflow: hidden;
	padding: 20px 20px 0;
}

#home-page #content {
	background: none;	
}

#home-themes {
	clear: both;
	font-size: 15px;
	line-height: 1.25;
	list-style: none;
	margin: 0 0 0 -20px;
	padding: 0;
	width: 940px;
}

	#home-themes li {
		display: block;
		float: left;
		margin: 0 0 0 24px;
		height: 182px;
		padding: 0;
		width: 288px;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	#home-themes li:hover {
		-webkit-transform: rotate(-1deg);
		-moz-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}
	
	#home-themes .business:hover,
	#home-themes .society:hover,
	#home-themes .education:hover,
	#home-themes .community:hover {
		-webkit-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		transform: rotate(1deg);
	}	
	
		#home-themes li a,
		#home-themes li a:focus,
		#home-themes li a:hover {
			color: #fff;
			display: block;
			height: 162px;
			position: relative;
			text-decoration: none;
			width: 288px;
			outline: 0;
		}
		
		#home-themes li a:active {
			margin-top: 2px;
		}
		
			#home-themes li a img {
				border: 5px solid #fff;
				display: block;
				width: 278px;
			}
			
			#home-themes li a:active img {
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none; 
			}
			
			#home-themes li a strong {
				background: none;
				-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90007ba5,endColorstr=#90007ba5);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90007ba5,endColorstr=#90007ba5);				
				background: rgba(0,123,165,0.75);
				bottom: 23px;
				cursor: pointer;
				display: block;
				padding: 8px 10px;
				position: absolute;	
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;			
			}
			
			#home-themes li a:focus strong,
			#home-themes li a:hover strong {
				background: none;
				-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1007ba5,endColorstr=#1007ba5);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1007ba5,endColorstr=#1007ba5);				
				background: rgba(0,123,165,1);
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;
			}
			
			#home-themes .left a strong {
				left: 5px;
				padding: 8px 0 8px 10px;
			}
			
			#home-themes .left a:focus strong,
			#home-themes .left a:hover strong {
				left: 15px;
			}
			
			#home-themes .right a strong {
				right: 5px;
			}
			
			#home-themes .right a:focus strong,
			#home-themes .right a:hover strong {
				right: 15px;
			}
			
			#home-themes .welcome a strong {
				width: 135px;
			}			
			
			#home-themes .business a strong {
				width: 150px;
			}
			
			#home-themes .environment a strong {
				width: 160px;
			}
			
			#home-themes .society a strong {
				width: 75px;
			}
			
			#home-themes .health a strong {
				width: 150px;
			}
			
			#home-themes .education a strong {
				width: 160px;
			}
			
			#home-themes .sport a strong {
				width: 175px;
			}
			
			#home-themes .community a strong {
				width: 128px;
			}
			
			#home-themes .world a strong {
				width: 125px;
			}


/*	Footer
	------------------------------ */

#footer {
	background: #006283 url(../images/footer-bg.png) no-repeat left bottom;
	line-height: 1.5;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 9px 0 15px;
	width: 960px;
	clear: both;
}

#home-page #footer {
	background: none;
	padding: 0;
}

	#footer li {
		float: left;
		margin-left: 24px;
		width: 288px;
	}
	
		#footer h3 {
			color: #fff;
			font-size: 14px;
			margin: 0 0 6px;
			padding: 0;
		}
		
		#footer p {
			color: #90c7d1;
			font-size: 12px;
			margin: 0 0 6px;
		}
		
			#footer p span {
				display: block;
			}
		
		#footer blockquote {
			background: url(../images/quote.png) no-repeat left top;
			margin: 0;
			padding: 0 0 0 15px;
		}
		
		#footer a {
			color: #c7f1ff;
			font-size: 13px;
			font-weight: bold;
			padding-left: 23px;
			text-decoration: none;
		}
		
		#footer a:focus,
		#footer a:hover {
			text-decoration: underline;
		}
		
		#footer #highlights a {
			background: url(../images/icon-arrow.png) no-repeat left center;
			padding-left: 15px;
		}
		
		#footer #financial a {
			background: url(../images/icon-financial.png) no-repeat left center;
		}
		
		#footer #download a {
			background: url(../images/icon-download.png) no-repeat left center;
		}


/*	Articles
	------------------------------ */

/*	Banner photographs  */

.banner {
	margin: 0;
	position: relative;
	width: 920px;
	height: 300px;
}

	.banner img {
		position: absolute;
		left: 0;
		top: 0;
	}
	
/*	Articles  */

.article {
	float: right;
	line-height: 1.5;
	margin: 0 -20px 0 0;
	padding: 8px 34px 1.5em 0;
	text-shadow: 0 0 0 transparent, 1px 1px 1px #fff;
	width: 590px;
}
	
	.article h2 {
		color: #007ba5;
		font-size: 28px;
		font-weight: normal;
		letter-spacing: -0.04em;
		margin: 0.25em 0 0.15em;
		padding: 0;
	}
	
	.article h3 {
		font-size: 22px;
		font-weight: normal;
		line-height: 1.25;
		margin: 0 0 0.6em 0;
		padding: 0;
	}
	
	.article .smaller {
		font-size: 20px;
	}
	
	.article h4 {
		font-size: 22px;
		font-weight: normal;
		letter-spacing: -0.04em;
		line-height: 1;
		margin: 0 0 0.5em;
		padding: 0;
	}
	
	.article p {
		font-size: 13px;
		line-height: 1.5;
		margin: 0 0 1em;
	}
	
		.article p big {
			font-size: 16px;
			line-height: 1.4;
		}
		
		.article.welcome p big {
			color: #007ba5;
		}	
	
	.article .website a {
		background: url(../images/icon-website.png) no-repeat right 5px;
		padding-right: 12px;
	}
	
	.article ul {
		margin-left: 2em;
		padding: 0;
	}
	
	#impact {
		background: #ebf5f8 url(../images/impact-bg.png) no-repeat right 15px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin: 1.5em 0 1.5em 0;
		padding: 15px 20px 8px;
	}
	
	#further-info {
		border-left: 2px solid #eee;
		float: right;
		margin: 5px 0 1em 25px;
		padding-left: 20px;
	}
	
		#further-info ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		#further-info h4 {
			font-size: 18px;
			font-weight: normal;
			letter-spacing: -0.04em;
			line-height: 1;
			margin: 0 0 0.5em;
			padding: 0;
		}
		
		#further-info a {
			display: block;
		}
		

/*	Videos  */

.video {
	float: right;
	height: 129px;
	margin: 0 0 10px 20px;
	position: relative;
	width: 230px;
}
	
	.video a img {
		border: 0;
	}
	
	.video a strong {
		background: url(../images/icon-play.png) no-repeat left top;
		display: block;
		left: 95px;
		height: 46px;
		position: absolute;
		top: 42px;
		width: 50px;
	}
	
	.video a:focus strong,
	.video a:hover strong {
		background-position: left -454px;
	}
	
	
/*	Themes menu  */

#themes-menu {
	float: left;
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	width: 288px;
}
	
	#themes-menu li {
		list-style: none;
		margin: 0 0 1px;
		padding: 0;
	}
	
		#themes-menu li a {
			background: #f2f2f2 url(../images/icons.png) no-repeat left top;
			color: #939393;
			display: block;
			padding: 14px 0 13px 45px;
		}
		
		#themes-menu li a:focus,
		#themes-menu li a:hover {
			color: #636363;
			text-decoration: none;
		}
		
		#themes-menu li .active,
		#themes-menu li .active:focus,
		#themes-menu li .active:hover {
			color: #fff;
		}
		
		#themes-menu .welcome {
			background-position: left -60px;
		}
		
		#themes-menu .welcome.active {
			background-position: -300px -60px;
		}
		
		#themes-menu .business {
			background-position: left -120px;
		}
		
		#themes-menu .business.active {
			background-position: -300px -120px;
		}
		
		#themes-menu .environment {
			background-position: left -180px;
		}
		
		#themes-menu .environment.active {
			background-position: -300px -180px;
		}
		
		#themes-menu .society {
			background-position: left -240px;
		}
		
		#themes-menu .society.active {
			background-position: -300px -240px;
		}
		
		#themes-menu .health {
			background-position: left -300px;
		}
		
		#themes-menu .health.active {
			background-position: -300px -300px;
		}
		
		#themes-menu .education {
			background-position: left -360px;
		}
		
		#themes-menu .education.active {
			background-position: -300px -360px;
		}
		
		#themes-menu .sport {
			background-position: left -420px;
		}
		
		#themes-menu .sport.active {
			background-position: -300px -420px;
		}
		
		#themes-menu .community {
			background-position: left -480px;
		}
		
		#themes-menu .community.active {
			background-position: -300px -480px;
		}
		
		#themes-menu .world {
			background-position: left -540px;
		}
		
		#themes-menu .world.active {
			background-position: -300px -540px;
		}
		
		#themes-menu li ul {
			background: #007ba5;
			font-size: 12px;
			margin: 0;
			padding: 0 0 12px;
		}
		
			#themes-menu li ul li a {
				background: url(../images/icon-arrow.png) no-repeat 18px 5px;
				color: rgba(255,255,255,0.7);
				font-weight: normal;
				padding: 3px 5px 3px 45px;
			}
			
			#themes-menu li ul li a:focus,
			#themes-menu li ul li a:hover {
				color: #fff;
			}
			
			#themes-menu li ul li .active,
			#themes-menu li ul li .active:focus,
			#themes-menu li ul li .active:hover {
				background: url(../images/icon-arrow.png) no-repeat 18px -187px;
				color: #fff;
				font-weight: bold;
			}


/*	Highlights  */

.highlights {
	background: #fff url(../images/highlights-bg.png) no-repeat right 20px;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	padding: 15px 30px;
	text-shadow: 1px 1px 1px #fff;
}

	.highlights h1 {
		color: #007ba5;
		font-size: 36px;
		font-weight: normal;
		letter-spacing: -0.04em;
		margin: 0;
	}
	
	.highlights ul {
		list-style: none;
		margin: 0;
		padding: 0;	
	}
	
		.highlights ul li {
			padding: 10px 0;	
		}