/* CSS Document */
/*------------------------------------styles for the outer container*/
#outer{
	width:59.5em;
	border:1px solid #000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	margin:0 auto;
}

/*------------------------------------------styles for the banner and navigation*/
#banner{
	text-align:center;
}

#nav{
	background-image:url(../images/navBack.jpg);
	background-repeat:repeat-x;
	background-color:#F6F6F6;
	padding-top:1px;
}

#nav ul{
	padding:0;
	margin:0;
	text-align:center;
}

#nav ul li{
	display:inline;
	margin:0 0.5em 0 0.5em;
}

#nav ul li a img{
	border:none;
}

/*----------------------------------------------containers and rounded corners*/
#belowNav{
	background-color:#F6F6F6;
	padding:0 1em 1em 1em;
}

.topLeft {
    background-image:url(../images/topLeft.jpg);
    height:18px;
    margin-right:14px;
    display:block;
	font-size:0;
}

.topRight {
    background-image:url(../images/topRight.jpg);
    width:14px;
    height:19px;
    float:right;
    margin-top:-19px;
	display:inline;
	font-size:0;
}

.bottomLeft {
    background-image:url(../images/bottomLeft.jpg);
    height:19px;
    margin-right:14px;
    display:block;
	font-size:0;
}

.bottomRight {
    background-image:url(../images/bottomRight.jpg);
    width:14px;
    height:19px;
    float:right;
	display:inline;
    margin-top:-19px;
	font-size:0;
}

#contentArea{
	background-color:#FFFFFF;
	min-height:50px;
	border-right:1px dashed #CCCCCC;
	border-left:1px dashed #CCCCCC;
	padding:0 0.8em 0 0.8em;
}

#contentArea:after, .belowHeading:after, .storyWrapper:after, #topStory:after, .countryItem:after{
	content:".";
	clear:both;
	display:block;
	visibility:hidden;
	height:0;
}

/*-------------------------------------------------------------styles for the left column and boxes*/
#leftCol{
	width:13em;
	float:left;
	margin-right:1em;
}

#leftCol.home{
	width:20em;
}

.headingContainer{
	background-image:url(../images/h1BackRight.jpg);
	background-repeat:no-repeat;
	background-position:top right;
	background-color:#F5D528;
	padding-right:6px;
}

.belowHeading{
	border:1px solid #999999;
	background-color:#F6F6F6;
	margin-bottom:10px;
	padding-bottom:5px;
}

#submenu a, #article a{
	color:#000000;
}

#submenu h1, #register h1, #article h1, #rightCol h1, #search h1{
	background-image:url(../images/h1Back.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#F5D528;
	color:#000000;
	font-size:1.0em;
	margin:0;
	padding:5px 5px 5px 10px;
}

#submenu h1 img, #register h1 img, #article h1 img, #rightCol h1 img, #search h1 img{
	display:inline;
}

#submenu ul, #article ul, #register ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

#submenu ul li a, #article ul li a, #register ul li a{
	display:block;
	width:8.8em;
	background-image:url(/images/bullet.jpg);
	background-repeat:no-repeat;
	background-position:10px 10px;
	padding:5px 10px 5px 30px;
	color:#000000;
	text-decoration:none;	
	font-size:1.1em;
}

#submenu ul li a:hover, #article ul li a:hover, #submenu ul li a.active, #article ul li a.active, #register ul li a:hover{
	background-color:#F5D528;
	text-decoration:none;
	background-image:none;
}

#submenu ul li ul li a, #article ul li ul li a{
	background-image:url(/images/bulletsub.jpg);
	padding-left:40px;
	background-position:30px 10px;
	font-weight:normal;
	font-size:0.85em;
}

#submenu ul li ul li a:hover, #article ul li ul li a:hover{
	background-color:#f6f6f6;
	text-decoration:underline;
	background-image:url(/images/bulletsub.jpg);
}


#submenu img{
	display:block;
	margin:0 auto;
}

#submenu hr, #rightCol hr{
	border:1px dashed #CCCCCC;
	clear:both;
}

#register form, #search form{
	margin:10px 10px 10px 10px;
	padding-top:10px;
	display:inline;
}

#register p, #submenu p, #article p{
	margin:5px;
	font-size:1em;
}

#register ol{
	padding-right:10px;
}

#register img, #submenu img, #article img{
	padding-right:5px;
}

#register a{
	color:#000000;
}

/*-----------------------------------the middle column - main text content*/
#middleCol, #middleColLarge{
	width:26.7em;
	float:left;
	margin-right:15px;
	min-height:100px;
}

#middleColLarge{
	width:40.5em;
	margin-left:10px;
	margin-right:0;
}

#middleColLarge.home{
	width:32.5em;
}

#middleCol p, #middleColLarge p{
	line-height:1.4em;
	text-align:justify;
}

#middleCol li, #middleColLarge li{
	line-height:1.5em;
	text-align:justify;
	margin-right:20px;
}

#middleCol p.textright, #middleColLarge p.textright{
	text-align:right;
}

#middleCol p.caption, #middleColLarge p.caption{
	font-size:0.85em;
	text-align:center;
}

#middleCol a, #middleColLarge a{
	color:#000000;
}

#middleCol a:hover, #middleColLarge a:hover{
	color:#CCB015;
}

#middleColLarge h1{
	font-size:1.5em;
	color:#333333;
}

#middleCol h2{
	font-size:1.1em;
	color:#333333;
}

#middleColLarge h2{
	font-size:1.1em;
	margin-top:2em;
	color:#333333;
}

#middleCol h3, #middleColLarge h3{
	font-size:1em;
	color:#333333;
}

#middleColLarge img{
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	clear:left;
}

#middleColLarge .homeImages img{
	float:none;
	margin:0;
}

/*--------------------------------------------------the right column for news etc*/

#rightCol{
	float:left;
	width:13em;
	min-height:100px;
}

.newsArticle{
	margin:10px;
	clear:both;
	font-size:0.9em;
}

.newsArticle a{
	color:#000000;
	float:right;
	margin-bottom:10px;
	font-weight:bold;
}

.newsArticle a:hover{
	color:#CCB015;
}

#rightCol img{
	display:block;
	margin:0 auto;
	clear:both;
}

#rightCol .newsArticle img{
	float:left;
	margin:0 5px 5px 0;
	border:1px solid #666666;
}

/*-----------------------------------------------styles for the news Page*/

#topStory{
	
	padding:0.5em;
	margin-bottom:0em;
}


.storyWrapper{
	margin-bottom:0em;
	background-color:#F6F6F6;
	border-top:1px solid #666666;
	/*border:1px solid #666666;*/
}

.coloured{
	background-color:#F6F6F6;
	
}

.newsStoryLeft{
	float:left;
	width:18em;
	padding-right:1em;
	margin:0.5em 0em 0.2em 1em;
}

.newsStoryRight{
	float:right;
	width:18em;
	margin:0.5em 1em 0.2em 0em;
}

#middleColLarge .newsStoryRight p, #middleColLarge .newsStoryLeft p{
	text-align:left;
}

#topStory img, .newsStoryLeft img, .newsStoryRight img{
	float:left;
	margin:0px 5px 0px 0;
	border:1px solid #666666;
}

#topStory h2{
	margin:0;
}

#topStory p{
	margin-top:0.5em;
}

#middleColLarge .newsStoryLeft h2, #middleColLarge .newsStoryRight h2{
	font-size:1em;
	margin-bottom:0;
	margin-top:0;
}

#middleColLarge .newsStoryLeft p, #middleColLarge .newsStoryRight p{
	margin:0.2em 0 0.2em 0;
	clear:both;
}

/*------------------------------styles for the 'our work' columns*/
#countriesLeft{
	width:19em;
	float:left;
	border-right:1px solid #666666;
	padding-right:1em;
}

#countriesRight{
	width:19em;
	float:right;
	padding-left:1em
}

#countriesLeft h2, #countriesRight h2{
	margin-top:0;
}

#countriesLeft .countryItem, #countriesRight .countryItem{
	clear:both;
	margin-bottom:1em;
}

#countriesLeft .countryItem h2, #countriesRight .countryItem h2{
	font-size:1em;
	margin:0 0 0 80px;
}

#countriesLeft .countryItem a img, #countriesRight .countryItem a img{
	float:left;
	border:none;
	margin:0;
}

#countriesLeft .countryItem p, #countriesRight .countryItem p{
	margin:0.2em 0 0.2em 80px;
}


/*----------------------------------------------------footer menu*/

#footer ul{
	margin:0.5em 0 0 0;
	padding:0;
	text-align:center;
}

#footer ul li{
	display:inline;
	margin: 0 1em 0 1em;
}

#footer ul li a{
	color:#666666;
}

#sunsol{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	margin:0 auto;
	width:59.5em;
}

#sunsol p{
	float:right;
	font-size:0.85em;
	color:#000000;
}

#sunsol p a{
	color:#F77B31;
}


/*----------------------------------------------------general classes*/
.buttons{
	background-color:#F5D528;
	float:right;
	margin: 10px 10px 10px 0;
}

.textInput{
	width:10.5em;
	margin-top:10px;
}

.center{
	display:block;
	margin:0 auto;
	text-align:center;
}

#middleColLarge p.textRight{
	text-align:right;
}

.highlightBox{
	background-color:#f6f6f6;
	padding:5px 10px 5px 10px;
	border:1px solid #666666;
	margin-top:0.75em;
}

#middleColLarge .highlightBox h1{
	font-size:1.1em;
	color:#333333;
	text-align:center;
}

.clear{
	clear:both;
}

.floatleft{
	float:left;
	margin-right:10px;
}

.floatright{
	float:right;
}

#middleColLarge img.center{
	margin:0 auto;
	display:block;
	text-align:center;
}

.placeHolder{
	width:500px;
	margin:0 auto;
	border:1px solid black;
	padding:100px 0 100px 0;
	text-align:center;
}

#middleColLarge a img.icon{
	border:none;
	padding-left:20px;
	float:none;
	margin:0 5px -8px 0;
	position:relative;
}