#serviceIntroWrapper {width:823px; height:253px; font-family:Arial, Helvetica, sans-serif; background-color:#000}
#serviceIntroWrapper img {border:none}
#theFlash {width:572px; height:253px; float:left; display:inline; background: #000 url(/images/flashbg.gif);}
#theFlash span {display:none}
#scrollerWrapper {
	width:251px;
	height:253px;
	float:right;
	display:inline;
	position:relative;
}
#scrollerWrapper h2 {font-weight:bold; font-size:14px; color:#fff; margin:17px 0 8px 16px; padding:0}
/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div#grad {
	width: 240px;	
	height:195px;
	position:absolute;
	top:42px;
	left:5px;
	z-index:9999
	}
div.scrollable {
	position:relative;
	overflow:hidden;
	width: 240px;	
	height:195px;	
	margin:0 0 0 5px;
	padding:0;	
	z-index:9996;
	background: url(/images/scrollbggrad.jpg) no-repeat;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large height to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	height:20000em;	
	position:absolute;
	clear:both;			
	margin:0;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	margin:0;
	text-align:left;
	width:240px;
	padding:0;
	height:65px;
	cursor:pointer;
	border-bottom:solid 1px #DCDCDC;
	/*background: url(/images/itembg.gif) no-repeat;*/
}
div.scrollable div.items div:hover {
	/*background: url(/images/itembg-over.gif) no-repeat;*/
	cursor:pointer;
	border-bottom:solid 1px #ffffff
}
/* active item */
div.scrollable div.items div.active {	
	background-position:0 -65px
}
div.scrollable div.items div h3 {
	margin:17px 0 0 104px; 
	padding:0; 
	font-size:13px; 
	font-weight:bold;
	color:#ACACAC;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-bottom-color:;
}
div.scrollable div.items div:hover h3, div.scrollable div.items div.active h3 {color:#fff;}
/* prev, prevPage buttons */
a.prev, a.prevPage {
	display:block;
	width:19px;
	height:6px;
	background:transparent url(/images/left.png) no-repeat;
	position:absolute;
	right:0;
	top:33px;
	margin:0 34px 0 0;
	cursor:pointer;
	font-size:1px;
}
a.next, a.nextPage {
	display:block;
	width:19px;
	height:6px;
	background:transparent url(/images/right.png) no-repeat;
	position:absolute;
	z-index:9999;
	right:0;
	bottom:0;
	margin:0 32px 9px 0;
	cursor:pointer;
	font-size:1px;
}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -6px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi { position:absolute;bottom:0; left:110px; margin:0 0 2px 0; z-index:9999}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:transparent url(/images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	
#topcurve {
	background: url(/images/topcurve.gif) no-repeat 0px 0px;
	height:3px;
	position:absolute;
	z-index:9998;
	top:41px;
	left:0;
	width:240px;
	margin:0 0 0 5px
}
#bottomcurve {
	background: url(/images/bottomcurve.gif) no-repeat 0px 0px;
	height:3px;
	position:absolute;
	z-index:9997;
	top:233px;
	left:0;
	width:240px;
	margin:0 0 0 5px
}

/*backgrounds for items */
.service1 {background: url(/images/itembg-transferpricing.png) no-repeat}
.service1:hover{background-position:0 -65px}
.service2 {background: url(/images/itembg-construction.png) no-repeat;}
.service2:hover{background-position:0 -65px}
.service3 {background: url(/images/itembg-mergers.png) no-repeat;}
.service3:hover{background-position:0 -65px}
.service4 {background: url(/images/itembg-stateLocal.png) no-repeat;}
.service4:hover{background-position:0 -65px}
.service5 {background: url(/images/itembg-taxAccounting.png) no-repeat;}
.service5:hover{background-position:0 -65px}
.service6 {background: url(/images/itembg-informationSecurity.png) no-repeat;}
.service6:hover{background-position:0 -65px}
.service7 {background: url(/images/itembg-businesssystemservices.png) no-repeat;}
.service7:hover{background-position:0 -65px}

/*copy&paste the below css and adjust filenames accordingly when adding a service
.service7 {background: url(/images/itembg-informationSecurity.png) no-repeat;} /*the layered itembg.png file used to create these buttons is in the source file directory. both states of the image button are in a single image
.service7:hover{background-position:0 -65px}
*/