@charset "utf-8";
/* CSS Document */

/*************************************************************/		
/*********************** MASTER BODY *************************/
/*************************************************************/

body {
background-color: #FFFFFF;
margin: 0px;
height: 100%;

}

/**************** holds all page content *****************/
#page{
	
	position: relative; 
	margin: 0 auto; 
	width: 950px;
	height: 100%;
	
	background-color: #FFFFFF;
}

/*************************************************************/		
/********************** HEADER ***********************/
/*************************************************************/

/**************** holds page Header *****************/
#header{

	position:relative;
	width: 950px;
	height: 105px;
	top: 0px;
	left: 0px;

}


	/**************** holds Logo *****************/
	#headerLogo{

		position:absolute;
		width: 65px;
		height: 65px;
		top: 20px;
		left: 20px;
	}

	/**************** holds secondary navigation list *****************/
	#navigationList{

		position:absolute;
		width: 300px;
		height: 15px;
		top: 25px;
		left: 555px;
		
		text-align: right;
		vertical-align: middle;	
	}

	/**************** twitter div *****************/
	#twitterIcon{

		position:absolute;
		width: 25px;
		height: 25px;
		top: 20px;
		left: 870px;

	}

	/**************** facebook div *****************/
	#facebookIcon{

		position:absolute;
		width: 25px;
		height: 25px;
		top: 20px;
		left: 907px;

	}
	
/***********************************/
/******** NAVIGATION BAR ***********/
/***********************************/
	
	/**************** holds navigation bar *****************/
	#navigationBar{

		position:absolute;
		width: 825px;
		height: 30px;
		top: 55px;
		left: 107px;
		
		background-color: #FFFFFF;
	}
	
			/**************** home link *****************/
			a.menuBarHomeArea{

				display: inline;
				position:absolute;
				width: 59px;
				height: 30px;
				top: 0px;
				left: 0px;				
				
				background-image: url(../images/navigationBar/homeStandard.jpg);
			}
			
			a.menuBarHomeArea:hover{
			
				background-image: url(../images/navigationBar/homeOver.jpg);
			}

			/**************** payWizard link *****************/
			a.menuBarPayWizardArea{

				display: inline;
				position:absolute;
				width: 87px;
				height: 30px;
				top: 0px;
				left: 60px;
				
				background-image: url(../images/navigationBar/payWizardStandard.jpg);
			}
			
			a.menuBarPayWizardArea:hover{
			
				background-image: url(../images/navigationBar/payWizardOver.jpg);
			}
			
			/**************** profile link *****************/
			a.menuBarProfileArea{

				display: inline;
				position:absolute;
				width: 152px;
				height: 30px;
				top: 0px;
				left: 148px;
				
				background-image: url(../images/navigationBar/profileStandard.jpg);
			}
			
			a.menuBarProfileArea:hover{
			
				background-image: url(../images/navigationBar/profileOver.jpg);
			}			

			/**************** outsourced services link *****************/
			a.menuBarOutsourcedArea{

				display: inline;
				position:absolute;
				width: 144px;
				height: 30px;
				top: 0px;
				left: 301px;
				
				background-image: url(../images/navigationBar/outsourcedStandard.jpg);
			}
			
			a.menuBarOutsourcedArea:hover{
			
				background-image: url(../images/navigationBar/outsourcedOver.jpg);
			}
			
			/**************** clients link *****************/
			a.menuBarClientsArea{

				display: inline;
				position:absolute;
				width: 64px;
				height: 30px;
				top: 0px;
				left: 446px;
				
				background-image: url(../images/navigationBar/clientsStandard.jpg);
			}
			
			a.menuBarClientsArea:hover{
			
				background-image: url(../images/navigationBar/clientsOver.jpg);
			}

			/**************** markets link *****************/
			a.menuBarMarketsArea{

				display: inline;
				position:absolute;
				width: 71px;
				height: 30px;
				top: 0px;
				left: 511px;
				
				background-image: url(../images/navigationBar/marketsStandard.jpg);
			}
			
			a.menuBarMarketsArea:hover{
			
				background-image: url(../images/navigationBar/marketsOver.jpg);
			}

			/**************** partners link *****************/
			a.menuBarPartnersArea{

				display: inline;
				position:absolute;
				width: 73px;
				height: 30px;
				top: 0px;
				left: 583px;
				
				background-image: url(../images/navigationBar/partnersStandard.jpg);
			}
			
			a.menuBarPartnersArea:hover{
			
				background-image: url(../images/navigationBar/partnersOver.jpg);
			}

			/**************** careers link *****************/
			a.menuBarCareersArea{

				display: inline;
				position:absolute;
				width: 70px;
				height: 30px;
				top: 0px;
				left: 657px;
				
				background-image: url(../images/navigationBar/careersStandard.jpg);
			}
			
			a.menuBarCareersArea:hover{
			
				background-image: url(../images/navigationBar/careersOver.jpg);
			}

			/**************** contact link *****************/
			a.menuBarContactArea{

				display: inline;
				position:absolute;
				width: 97px;
				height: 30px;
				top: 0px;
				left: 728px;
				
				background-image: url(../images/navigationBar/contactStandard.jpg);
			}
			
			a.menuBarContactArea:hover{
			
				background-image: url(../images/navigationBar/contactOver.jpg);
			}			

	
/***********************************/
/********* MAIN CONTENT ************/
/***********************************/

/**************** main content area *****************/
#content{

	position:relative;
	width: 950px;
	height: 100%;
	margin-top: 0px;
	left: 0px;
	
}	
	
	/**************** crumb trail *****************/
	#activePage{

		position:relative;
		width: 910px;
		height: 25px;
		top: 10px;
		left: 20px;

	}
	
	/**************** page title *****************/
	#pageTitle{

		position:relative;
		width: 910px;
		height: 25px;
		top: 20px;
		left: 20px;

	}
	
	/**************** contact info *****************/
	#contactInformation{

		position:relative;
		width: 600px;
		height: 25px;
		top: -5px;
		left: 330px;
		
		text-align: right;
		vertical-align: middle;

	}

	/**************** main body *****************/
	#mainBody{

		position:relative;
		width: 910px;
		top: 10px;
		left: 20px;
		
	}

		/**************** banner container for flash etc *****************/
		#banner{

			position:relative;
			width: 910px;
			top: 0px;
			left: 0px;
			
		}

		/**************** contact banner *****************/
		.contactBanner{

			position:absolute;
			width: 820px;
			height: 30px;
			top: 0px;
			left: 0px;
			
			padding-top: 10px;
			padding-left: 90px;
			
			background-image: url(../images/layoutImages/contactBar.jpg);
		}
		
		/**************** 4 columns *****************/
		.masterColumnHolder{

			position:relative;
			width: 910px;
			height: auto;
			top: 10px;
			left: 0px;
			
		}		
		
		/**************** column *****************/
		.columnHolder{

			position:relative;
			width: 100%;
			top: 0px;
			left: 0px;
			
			vertical-align: top;
		}

			.columnHeader{

				position:relative;
				height: 22px;
				top: 0px;
				left: 0px;
				padding-left: 10px;
				padding-top: 8px;
				
				background-image: url(../images/layoutImages/columnHeader.jpg);
				background-repeat: no-repeat;
			}
			
			.column2Header{

				position:relative;
				height: 22px;
				top: 0px;
				left: 0px;
				margin-top: 10px;
				padding-left: 10px;
				padding-top: 8px;
				
				background-image: url(../images/layoutImages/2columnHeader.jpg);
				background-repeat: no-repeat;
			}

			.column3Header{

				position:relative;
				height: 22px;
				top: 0px;
				left: 0px;
				padding-left: 10px;
				padding-top: 8px;
				
				background-image: url(../images/layoutImages/3columnHeader.jpg);
				background-repeat: no-repeat;
			}
			
			.columnHeader2{

				position:relative;
				height: 22px;
				top: 0px;
				left: 0px;
				padding-left: 0px;
				padding-top: 8px;
				
				border-bottom-style: solid;
				border-bottom-color: #D7D7D7;
				border-width: 1px;
			}

			
			.columnContent{

				position:relative;
				top: 0px;
				left: 0px;
				
				border-left-style: solid;
				border-left-color: #D7D7D7;			

				border-right-style: solid;
				border-right-color: #D7D7D7;
				border-width: 1px;
				
				background-image: url(../images/layoutImages/columnModuleBackground.jpg);
				background-position: top;
				background-repeat: repeat-x;
				
			}

			.columnContent2{

				position:relative;
				top: 0px;
				left: 0px;
				height: 240px;

			}

			.columnContent3{

				position:relative;
				top: 0px;
				left: 0px;

			}
			
				.columnImage{

					position:relative;
					top: 0px;
					left: 0px;
					
				}
				
				.columnText{

					position:relative;
					top: 0px;
					left: 0px;
					padding-left: 10px;
					padding-right: 10px;					
					padding-top: 5px;
					padding-bottom: 10px;
					

				}
				
			.columnFooter{

				position:relative;
				min-height: 22px;
				left: 0px;
				padding-left: 10px;
				padding-bottom: 8px;
				

				background-image: url(../images/layoutImages/columnFooter.jpg);
				background-position: bottom;
				background-repeat: no-repeat;
			}	

			.columnFooterNoBG{

				position:relative;
				min-height: 22px;
				left: 0px;
				padding-left: 10px;
				padding-bottom: 8px;

			}
			
			.column2Footer{

				position:relative;
				min-height: 22px;
				left: 0px;
				padding-left: 10px;
				padding-bottom: 8px;
				

				background-image: url(../images/layoutImages/2columnFooter.jpg);
				background-position: bottom;
				background-repeat: no-repeat;
			}

			.column3Footer{

				position:relative;
				min-height: 22px;
				left: 0px;
				padding-left: 10px;
				padding-bottom: 8px;
				

				background-image: url(../images/layoutImages/3columnFooter.gif);
				background-position: bottom;
				background-repeat: no-repeat;
			}
			
			.column3ImageFooter{

				position:relative;
				min-height: 22px;
				left: 0px;
				padding-left: 0px;
				padding-bottom: 0px;

			}			
		/**************** five column *****************/
		.fiveWrapper{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 0px;
		   width: 910px;
		   height: auto;
		   
		}
			.fiveLeft1{
			   position: relative;
			   float: left;
			   left: 0px;
			   width: 174px;
			   
			   vertical-align: top;
			}
			
			.fiveLeft2{
			   position: relative;
			   float: left;
			   left: 10px;
			   width: 174px;
			   
			}
			
			.fiveLeft3{
			   position: relative;
			   float: left;
			   left: 20px;
			   width: 174px;

			}

			.fiveLeft4{
			   position: relative;
			   float: left;
			   left: 30px;
			   width: 174px;

			}
			
			.fiveRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 174px;

			}			

		/**************** four column *****************/
		.fourWrapper{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 0px;
		   width: 910px;
		   height: auto;
		   
		}
			.fourLeft1{
			   position: relative;
			   float: left;
			   left: 0px;
			   width: 220px;
			   
			   vertical-align: top;
			}
			
			.fourLeft2{
			   position: relative;
			   float: left;
			   left: 10px;
			   width: 220px;
			   
			}
			
			.fourLeft3{
			   position: relative;
			   float: left;
			   left: 20px;
			   width: 220px;

			}
			
			.fourRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 220px;

			}	

		/**************** three column 2 1 1 *****************/
		.threeWrapper{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 10px;
		   width: 910px;
		}
			.threeLeft1{
			   position: relative;
			   float: left;
			   left: 0px;
			   width: 450px;
			   top: 50px;

			}

			.threeLeft2{
			   position: relative;
			   float: left;
			   left: 10px;
			   width: 220px;
			   top: 50px;			   

			}
			
			.threeRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 220px;
			   top: 50px;

			}	
			
		/**************** three column 2 1 1 *****************/
		.threeBWrapper{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 10px;
		   width: 910px;
		}
			.threeBLeft1{
			   position: relative;
			   float: left;
			   left: 230px;
			   width: 220px;
			   top: 50px;

			}

			.threeBLeft2{
			   position: relative;
			   float: left;
			   left: 240px;
			   width: 220px;
			   top: 50px;			   

			}
			
			.threeBRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 220px;
			   top: 50px;

			}
			
		/**************** two column *****************/
		.twoWrapper{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 10px;
		   width: 910px;
		   height: auto;
		   
		}
			.twoLeft1{
			   position: relative;
			   float: left;
			   left: 0px;
			   width: 450px;
			   
			   vertical-align: top;
			}
			
			
			.twoRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 450px;

			}	

		/**************** two column 1 3 *****************/
		.twoWrapper13{
		   position: relative;
		   float: left;
		   left: 0px;
		   top: 10px;
		   width: 910px;
		   height: auto;
		   
		}
			.twoLeft13{
			   position: relative;
			   float: left;
			   left: 0px;
			   width: 220px;
			   
			   vertical-align: top;
			}
			
			
			.twoRight13{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 680px;

			}
			
		/**************** one column *****************/
		.oneWrapper{
		   position: relative;
		   float: right;
		   left: 0px;
		   top: -230px;
		   width: 910px;
		   height: 0px;
		   
		}
			
			.oneRight{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 680px;

			}

		/**************** two column 1 3 *****************/
		.oneOver3Wrapper{
		   position: relative;
		   float: right;
		   left: 0px;
		   top: -230px;
		   width: 910px;
		   height: 0px;
		   
		}
			
			.oneOver3Right{
			   position: relative;
			   float: right;
			   right: 0px;
			   width: 680px;

			}
			
/*************************************************************/		
/***************** NEWS FEATURE ON HOMEPAGE ******************/
/*************************************************************/
			
.newsContent{

position:relative;
width: 440px;
height: 150px;
top: 0px;
left: 0px;

}			
			
			
/*************************************************************/		
/**************** EVENTS FEATURE ON HOMEPAGE *****************/
/*************************************************************/
.events{

position:absolute;
width: 220px;
min-height: 100px;
top: 0px;
left: 460px;
}
	
	.eventsContent{

	position:absolute;
	width: 220px;
	height: 150px;
	top: 0px;
	left: 0px;

	}

	.eventsLogo1{

	position:relative;
	width: 80px;
	height: 42px;
	top: 0px;
	right: 0px;
	float: right;

	}

	.eventsLogo2{

	position:relative;
	width: 80px;
	height: 42px;
	top: 0px;
	right: 0px;
	float: right;

	}

	.eventsLogo3{

	position:relative;
	width: 80px;
	height: 42px;
	top: 0px;
	right: 0px;
	float: right;

	}





/*************************************************************/		
/********************** FOOTER CONTENT ***********************/
/*************************************************************/

#footer{

	position:relative;
	width: 910px;
	height: 290px;
	padding: 20px;
	top: 10px;
	left: 0px;
}

	#featuresTop {

		position: relative;
		width: 910px;
		height: 7px;
		padding: 0px;
		top: 0px;
		left: 0px;
		
		background-image: url(../images/layoutImages/featuresHeaderBackground.jpg);
		background-position: top;

	}

	#featuresContent {

		position: relative;
		width: 910px;
		padding: 0px;
		top: 0px;
		left: 0px;
		
		background-image: url(../images/layoutImages/featuresBackground.jpg);
		background-position: bottom;
	

	}

	.footerWrapper{
	position: relative;
	float: left;
	left: 0px;
	top: 0px;
	width: 910px;
	height: auto;

	}
		.footerLeft1{
		   position: relative;
		   float: left;
		   left: 0px;
		   width: 220px;
		   
		   vertical-align: top;
		}

		.footerLeft2{
		   position: relative;
		   float: left;
		   left: 10px;
		   width: 220px;
		   
		}

		.footerLeft3{
		   position: relative;
		   float: left;
		   left: 20px;
		   width: 220px;

		}

		.footerRight{
		   position: relative;
		   float: right;
		   right: 0px;
		   width: 220px;

		}

	.footerColumnHeader{

		position:relative;
		height: 22px;
		top: 0px;
		left: 0px;
		padding-left: 10px;
		padding-top: 8px;
		
	}

	.footerColumnContent{

		position:relative;
		top: 0px;
		left: 0px;
		padding: 10px;

	}

	
#disclaimerArea {
	position: relative;
	float: left;
	left: 0px;
	top: 10px;
	width: 100%;
	height: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	
	background-color: #D7D7D7;
}	

#disclaimerContent{
	position: relative; 
	margin: 0 auto; 
	width: 910px;
	height: 100%;

}	


/************************ Popup Area *************************/
.popupArea{


	position:fixed;
	height: 650px;
	width: 840px;
	top: 10%;
	left: 16%;
	z-index: 1000;
	
	
	background-color: white;
	background-repeat:no-repeat;
		
}

.thankYouArea{


	position:fixed;
	height: 200px;
	width: 300px;
	top: 20%;
	left: 38%;
	z-index: 1000;
	
	
	background-color: white;
	background-repeat:no-repeat;
		
}

/*********************** Popup contents ************************/
#popupContents{

	position:absolute;
	height: 650px;
	width: 840px;
	top: 0px;
	left: 0px;
	padding: 10px;
	
	text-align: center;


}

#thankyouContents{

	position:absolute;
	height: 200px;
	width: 300px;
	top: 0px;
	left: 0px;
	padding: 10px;
	
	text-align: center;


}
/******************** Fade Over Page *********************/
#fadeOverPage {
	 position:fixed;
	 width: 100%;
	 height: 100%;
	 top: 0px;
	 left: 0px;
	 background-color: #272727;
	 z-index: 2;
	 
	 filter: alpha(opacity=60);
	 -moz-opacity: 0.6;
	 -khtml-opacity: 0.6;
	 opacity: 0.6;
}

/************************ Diagram Popup Area *************************/
.diagramPopupArea{

	display: inline;
	position:absolute;
	height: 650px;
	width: 840px;
	top: 25%;
	left: 5%;
	z-index: 1000;
	padding: 10px;
	
	background-color: white;
	background-repeat:no-repeat;
	
	border-style:solid;
	border-color:#272727;
	border-width: 1px;
}

/*********************** Diagram Popup contents ************************/
#diagramPopupContents{

	position:absolute;
	height: 650px;
	width: 840px;
	top: 0px;
	left: 0px;
	
	text-align: center;
	
	background-color: white;

}

	/**************** holds navigation bar *****************/
	#profileIcon{

		position:absolute;
		width: 60px;
		height: 30px;
		margin-top: 0px;
		left: 788px;

		background-image: url(../images/navigationBar/profileIcon.jpg);
	}


			/**************** outsourced services link *****************/
			a.menuBarCloseArea{

				position:absolute;
				width: 60px;
				height: 30px;
				margin-top: -30px;
				left: 788px;

				background-image: url(../images/navigationBar/closeStandard.jpg);
			}
			
			a.menuBarCloseArea:hover{
				margin-top: -30px;
				background-image: url(../images/navigationBar/closeOver.jpg);
			}

	
/*********************** Popup contents ************************/
#diagramCloseContainer{

	position:relative;
	height: 20px;
	width: 840px;
	top: 0px;
	padding-top: 10px;
	padding: 0px;
	vertical-align: middle;
	text-align: right;

}
.diagramClose{

	vertical-align: middle;
	text-align: right;

}

/*********************** Outsourced page ************************/
.outsourcedContainer{

	position:relative;
	top: 0px;
	height: 1380px;
	padding: 0px;
	padding: 0px;

}

.textContainer{

	display: inline;
	position:relative;
	height: 240px;
	width: 315px;
	top: 60px;
	padding: 0px;
	vertical-align: middle;
	
}

.imageContainer{

	position:relative;
	height: 300px;
	width: 315px;
	top: 0px;
	padding: 0px;

}