/* --------------------------------------------- */ 
/*	Red Cross - HIV Awareness    			     */
/*	Build start date: 11th Nov 2007.             */
/*	Developer: Steve Kirtley. 					 */
/* --------------------------------------------- */
/* global.css - Global Stylesheet                */
/* --------------------------------------------- */
/* General Styles                                */
/* --------------------------------------------- */

/*----------------------------------*/
/* Re-style Strong and em tags      */
/* requested for SEO impact         */
/*----------------------------------*/

strong {
	font-weight: normal;
}

em {
	font-style: normal;
}

/*----------------------------------*/
/* 1. General Setup                 */
	
	* {
		padding: 0;
		margin: 0;
	}
	
	html {
		background: url('../images/middleBg.gif') repeat-y;
		position: relative;
		height: 100%;
	}
	
	body {
		background: url('../images/middleBg.gif') repeat-y;
		font-family: arial, helvetica, sans-serif;
		font-size: 1.2em;
		float: left;
	}
	
	#bottomImg {
		float: left;
		background: url('../images/bottomBg.gif') no-repeat bottom left;
		padding-bottom: 20px !important; /* importance and below rule hide this from IE6 which was having a tantrum */
		padding-bottom: 0;
		width: 1004px;
	}
	
	#wrapper {
		background: url('../images/bgTop.gif') no-repeat top left;
		font-size: 0.7em;
		text-align: center;
		float: left;
		width: 1004px;
	}

	a {
		color: #fff;
	}
	
	a:visited,
	a:hover,
	a:active {
		color: #fff;
	}
	
	p {
		padding: 4px 0;
	}
	
	img {
		display: block;
		border: 0;
		margin: 0;
	}

/*------------------------------------*/
/* 2. Generic Classes                 */
	
	.offScreen {
		position: absolute;
		left: -5000px;
	}
	
	.clear {
		clear: both;
	}
	

/*-----------------------------------*/
/* 3. Page Container                 */

#contentWrapper {
	width: 965px;
	margin: 0 auto;
	padding-top: 20px;
	text-align: left;
}

#content {
	background: #fff;
	width: 965px;
	float: left	;
}

/*-----------------------------------*/
/* 4. Top Navigation                 */

#topNavBar {
	background: url('../images/navUnderLine.gif') no-repeat bottom left;
	float: left;
	width: 100%;
}

#topNavBar div#siteLogo {
	width: 297px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	float: left;
}

#topNavBar ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	padding-top: 67px;
	padding-right: 15px;
	float: right;
}

#topNavBar ul li,
#topNavBar ul li a {
	display: inline;
	float: left;
	height: 19px !important;
	height: 21px;
}

#topNavBar ul li a {
	display: block;
}

/* spacing between nav items */
/* not a class due to double class browser issues */
#whatCanI,
#ethiopia,
#kyrgyzstan,
#southAfrica,
#uk,
#contact,
#mainSite
{
	margin-left: 10px;
}

#topNavBar ul li#home,
#topNavBar ul li#home a {
	display: block;
	background: url('../images/nav_home.gif') no-repeat top;
	width: 37px;
}

#topNavBar ul li a:hover,
#topNavBar ul li a.selected {
	border-bottom: 2px solid #c50000;
}



#topNavBar ul li#whatCanI,
#topNavBar ul li#whatCanI a {
	background: url('../images/nav_whatCanIDo.gif') no-repeat top;
	width: 92px;
}


#topNavBar ul li#ethiopia,
#topNavBar ul li#ethiopia a {
	background: url('../images/nav_ethiopia.gif') no-repeat top;
	width: 49px;
}

#topNavBar ul li#kyrgyzstan,
#topNavBar ul li#kyrgyzstan a {
	background: url('../images/nav_kyrgyzstan.gif') no-repeat top;
	width: 65px;
}

#topNavBar ul li#southAfrica,
#topNavBar ul li#southAfrica a {
	background: url('../images/nav_southAfrica.gif') no-repeat top;
	width: 73px;
}

#topNavBar ul li#uk,
#topNavBar ul li#uk a {
	background: url('../images/nav_uk.gif') no-repeat top;
	width: 19px;
}

#topNavBar ul li#contact,
#topNavBar ul li#contact a {
	background: url('../images/nav_contact.gif') no-repeat top;
	width: 65px;
}

#topNavBar ul li#mainSite,
#topNavBar ul li#mainSite a {
	background: url('../images/nav_mainSite.gif') no-repeat top;
	width: 121px;
}

/*-----------------------------------*/
/* 5. Content Columns                */

#mainContent {
	float: left;
	width: 100%;
	background: #fff;
	padding-top: 10px;
}

/* Left Column */
/* ----------- */

#leftCol {
	float: left;
	display: inline; /* solve IE double margin */
	padding-left: 15px;
	width: 235px;
}

	#leftCol #notSure {
		background: url('../images/left_learn_more_box.gif') no-repeat;
		width: 235px;
		height: 93px;
	}

		#leftCol #notSure a {
			display: block;
			width: 234px;
			height: 93px;
		}

		
	#leftCol #spreadTheWord {
		float: left;
		margin-top: 20px;
		background: #fff url('../images/boxBgRepeat.gif') no-repeat;
		padding-bottom: 10px;
	}
		
		#leftCol #spreadTheWord h2 {
			width: 235px;
			height: 43px;
			background: url('../images/boxTop.gif') no-repeat;
		}
		
		#leftCol #spreadTheWord p {
			display: block;
			position: relative;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 10px;
			color: #000;
		}
		
		#leftCol #spreadTheWord .boxedDotted {
			width: 235px;
			height: 3px;
			background: url('../images/dottedLineGrey.gif') no-repeat;
			font-size: 1px;
		}
		
		#leftCol #spreadTheWord a {
			color: #c50000;
		}
		
		#leftCol #spreadTheWord #beboLogo {
			padding-top: 3px;
			padding-bottom: 3px;
		}
		
		#leftCol #spreadTheWord ul {
			list-style-type: none;
			padding-left: 10px;
			padding-top: 10px;
		}
			
			#leftCol #spreadTheWord ul li {
				height: 26px;
				display: inline;
				float: left;
				margin-left: 4px;
			}
			
			#leftCol #spreadTheWord ul li.first {
				margin-left: 0;
			}
			
			#leftCol #spreadTheWord ul li a {
				display: block;
				height: 26px;
			}
			
			#leftCol #spreadTheWord ul li#facebook,
			#leftCol #spreadTheWord ul li#facebook a {
				background: url('../images/facebook_logo.gif') no-repeat;
				width: 68px;
			}
			
			#leftCol #spreadTheWord ul li#youTube,
			#leftCol #spreadTheWord ul li#youTube a {
				background: url('../images/youTube_logo.gif') no-repeat;
				width: 59px;
			}

			#leftCol #spreadTheWord ul li#myspace,
			#leftCol #spreadTheWord ul li#myspace a {
				background: url('../images/myspace_logo.gif') no-repeat;
				width: 74px;
			}						
	
		#leftCol #spreadTheWordBott {
			clear: both;
			font-size: 1px;
			width: 235px;
			height: 39px;
			background: url('../images/speechBoxBottom.gif') no-repeat;
		}
	

/* Right Column */
/* ------------ */

#rightCol {
	float: left;
	display: inline; /* solve IE double margin */
	width: 694px;
	margin-left: 20px;
}

	#rightCol #intro {
		width: 649px;
		background: #000;
		border-bottom: 4px solid #c50000;
		float: left;
		padding: 10px;
	}
	
		#rightCol #intro h2 {
			padding-bottom: 5px;
		}
		
		#rightCol #intro p {
			color: #fff;
		}
		
		/* Central Content */
		/* --------------- */		
		
		#rightCol #centralContent {
			clear: both;
			float: left;
			display: inline;
			padding-top: 20px;
			width: 669px;
		}
		
		#rightCol ul#shareLinks {
			float: left; 
			width: 694px;
			list-style-type: none; 
			margin-top: 20px;
			padding-bottom: 10px;
		}
		
		#rightCol ul#shareLinks li {
			float: left;
			display: inline;
			padding-right: 30px;
			padding-bottom: 5px;
			padding-top: 3px;
		}
		
			#rightCol ul#shareLinks li#delicious {
				background: url('../images/delicious_icon.gif') no-repeat;
				padding-left: 30px;
			}
			
			#rightCol ul#shareLinks li#digg {
				background: url('../images/digg_icon.gif') no-repeat;
				padding-left: 30px;
			}			

			#rightCol ul#shareLinks li#reddit {
				background: url('../images/reddit_icon.gif') no-repeat;
				padding-left: 30px;
			}
			
			#rightCol ul#shareLinks li#stumbleUpon {
				background: url('../images/stumbleupon_icon.gif') no-repeat;
				padding-left: 30px;
			}			
		
		#rightCol ul#shareLinks li a {
			color: #8D8989;
		}
		
/* Footer */
/* ------ */

#footerContent {
	float: left;
	width: 1004px;
	background: #695a53 url('../images/footerBg.gif') no-repeat;
	padding-top: 10px;
}

#footerContent p,
#footerContent ul {
	font-size: 0.6em;
	color: #fff;
}

#footerContent ul {
	list-style-type: none;
	float: left;
	padding-left: 10px;
	padding-bottom: 10px;
}

#footerContent ul li {
	float: left;
	padding-left: 10px;
}

#footerContent ul li a.selected {
	text-decoration: none;
}

#footerContent p {
	padding: 0;
	margin: 0;
	float: right;
	padding-right: 20px;
}