/* everything is constructed with a single background image */

/* root element for tabs */
#flowtabs {
	
	/* dimensions */
	width:960px;
	height:70px !important;
	margin:0 auto; 
	padding:0;	
}

/* single tab */
#flowtabs li { 
	float:left; 
	margin:0; 
	padding:0;
	height: 70px;   
	width: 192px; 
	text-indent:0; 
	list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
	display:block;
	height: 70px;   
	width: 192px; 	
	padding:0px;
	margin:0px;
	
	/* font decoration */
	color:#000;
	font-size:12px;
	line-height:33px;
	text-align:center;
	text-decoration:none;
	text-indent: -4000px;
}
#flowtabs li a#t1 { background: url(../img/solution_toll.jpg) no-repeat; }
#flowtabs li a#t2 { background: url(../img/solution_blending.jpg) no-repeat; }
#flowtabs li a#t3 { background: url(../img/solution_trading.jpg) no-repeat; }
#flowtabs li a#t4 { background: url(../img/solution_destruction.jpg) no-repeat; }
#flowtabs li a#t5 { background: url(../img/solution_closedloop.jpg) no-repeat; }

#flowtabs li a:active { top: 0px; }
 
/* mouseover state */
#flowtabs a:hover 		{ color:#000;	 }
#flowtabs #t1:hover 	{ background-position: 0 -70px; }
#flowtabs #t2:hover 	{ background-position: 0 -70px; }
#flowtabs #t3:hover 	{ background-position: 0 -70px; }
#flowtabs #t4:hover 	{ background-position: 0 -70px; }
#flowtabs #t5:hover 	{ background-position: 0 -70px; }

/* currently selected tabs */
#flowtabs a.current		{ cursor:default; color:#000; line-height:34px; }
#flowtabs #t1.current 	{ background-position: 0 -140px; }
#flowtabs #t2.current 	{ background-position: 0 -140px; }
#flowtabs #t3.current 	{ background-position: 0 -140px; }
#flowtabs #t4.current 	{ background-position: 0 -140px; }
#flowtabs #t5.current 	{ background-position: 0 -140px; }


/* panes */
#flowpanes {		
	width:980px;
	height:372px;
	margin: 0 auto;	
	position:relative;
	background: url(../img/solutions_bkgd.jpg) no-repeat top left;
}
#flowpanes div {
	display:none;  
	position:absolute;
	top:0px;
	left:0px;
	width:980px; 
}
#flowpanes p {		
	color: #FFF;
	font-size: 16px;
	padding: 268px 0 0 105px;
}
#flowpanes p#long {		
	color: #FFF;
	font-size: 16px;
	padding: 293px 0 0 105px;
}
#flowpanes p a {		
	color: #FFF;
	height: 24px;
	width: 127px;
	background: url(../img/button_readmore.png) no-repeat top left;
	text-decoration: none;
	display: block;
	text-indent: -4000px;
}
#flowpanes p a:hover {		
	background-position: 0 -24px;
}
#flowpanes p#button_solutions {		
	color: #FFF;
	font-size: 16px;
	padding: 247px 0 0 548px;
}
#flowpanes p a.button_solutions {		
	color: #FFF;
	height: 28px;
	width: 277px;
	background: url(../img/solutions_hover.jpg) no-repeat;
	background-position: 0 30px;
	text-decoration: none;
	display: block;
	text-indent: -4000px;
}
#flowpanes p a.button_solutions:hover {		
	background-position: 0 -1px;
}
.solution_wrapper {		
	padding: 296px 0 0 104px;
	z-index: 100;
	float: left;
}
#solution_one {		
	background: url(../img/solution_1.jpg) no-repeat;	
	width:980px;
	height:395px;
	margin: 0 auto;	
}
#solution_two {
	background: url(../img/solution_2.jpg) no-repeat;		
	width:980px;
	height:395px;
	margin: 0 auto;	
}
#solution_three {
	background: url(../img/solution_3.jpg) no-repeat;		
	width:980px;
	height:395px;
	margin: 0 auto;	
}
#solution_four {		
	background: url(../img/solution_4.jpg) no-repeat;	
	width:980px;
	height:395px;
	margin: 0 auto;	
}
#solution_five {		
	background: url(../img/solution_5.jpg) no-repeat;	
	width:980px;
	height:395px;
	margin: 0 auto;	
}