/* ======================================================================================================== */
/* -------------------------------------------------------------------------------------- NAVIGATION STYLES */
/* ======================================================================================================== */


/* ---------------------------------------------------- BASIC STYLING OF THE MENU */

#nav {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 34px;
	position: relative;
	z-index: 200;
	background: url(../images/navigation-buttons.jpg) no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 854px;
}
#nav li.top {
	display: block;
	float: left;
}


/* ---------------------------------------------------- STYLE NAVIGATION BOX AREAS */

#nav li a {
	display: block;
	float: left;
	height: 34px;
	text-decoration: none;
	letter-spacing: 0;
	padding: 0;
	cursor: pointer;
}


/* ---------------------------------------------------- MOVE MENU TEXT OFF PAGE */

#nav li a b {
	margin-left: -9999px; 
	font-weight: normal;
}


/* ---------------------------------------------------- PLACE IMAGES INTO THE NAV MENU */

#nav li a.solutions {
	left: 0;
	width: 89px;
	background: url(../images/navigation-buttons.jpg) 0 0 no-repeat;
}
#nav li a.products {
	left: 0;
	width: 79px;
	background: url(../images/navigation-buttons.jpg) -89px 0 no-repeat;
}
#nav li a.newsevents {
	left: 0px;
	width: 111px;
	background: url(../images/navigation-buttons.jpg) -168px 0 no-repeat;
}
#nav li a.clientspartners {
	left: 0px;
	width: 132px;
	background: url(../images/navigation-buttons.jpg) -279px 0 no-repeat;
}
#nav li a.aboutstj {
	left: 0px;
	width: 83px;
	background: url(../images/navigation-buttons.jpg) -411px 0 no-repeat;
}
#nav li a.industryinformation {
	left: 0px;
	width: 149px;
	background: url(../images/navigation-buttons.jpg) -494px 0 no-repeat;
}
#nav li a.clientportal {
	left: 0px;
	width: 100px;
	background: url(../images/navigation-buttons.jpg) -643px 0 no-repeat;
}
#nav li a.partnerportal {
	left: 0px;
	width: 111px;
	background: url(../images/navigation-buttons.jpg) -743px 0 no-repeat;
}


/* ---------------------------------------------------- MOVE THE IMAGE POSITION ON ROLLOVER */

#nav li:hover a.solutions, 
#nav a.solutions:hover 
{background-position: 0 -34px;}
#nav li:hover a.products, 
#nav li a.products:hover 
{background-position: -89px -34px;}
#nav li:hover a.newsevents, 
#nav li a.newsevents:hover 
{background-position: -168px -34px;}
#nav li:hover a.clientspartners, 
#nav li a.clientspartners:hover 
{background-position: -279px -34px;}
#nav li:hover a.aboutstj, 
#nav li a.aboutstj:hover 
{background-position: -411px -34px;}
#nav li:hover a.industryinformation, 
#nav li a.industryinformation:hover 
{background-position: -494px -34px;}
#nav li:hover a.clientportal, 
#nav li a.clientportal:hover 
{background-position: -643px -34px;}
#nav li:hover a.partnerportal, 
#nav li a.partnerportal:hover 
{background-position: -743px -34px;}


/* ---------------------------------------------------- POSITION OF SECOND LEVEL */

/* including positioning off the page and removing the list style */

#nav .sub {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}


#nav li:hover {
	position: relative; 
	z-index: 200;
}
#nav a:hover {
	position: relative; 
	white-space: normal; 
	z-index: 200;
}


/* ---------------------------------------------------- SECOND LEVEL ROLLOVER */

#nav :hover ul.sub {
	left: 0;
	top: 34px;
	background: #005a91;
	width: 200px;
	height: 30px;
	z-index: 300px;
}
#nav :hover ul.sub li {
	display: block;
	position: relative;
	float: left;
	width: 200px;
	min-height: 30px;
	background: #005b92;
	font-weight: normal;
	font-size: 12px;
	color: #fff;
	border-bottom: 1px solid #fff;
}
#nav :hover ul.sub li a {
	display: block;
	width: 190px;
	height: 22px;
	text-decoration: none;
	padding: 0;
	cursor: pointer;
	color: #fff;
	padding: 8px 5px 0;
}


/* ---------------------------------------------------- POSITION OF TEXT ON SECOND LEVEL ROLLOVER */

#nav :hover ul.sub li a:hover {
	background: #0369af;
}

/* ======================================================================================================== */
/* ------------------------------------------------------------------------------------------ SUBNAV STYLES */
/* ======================================================================================================== */

#subNav{
	width:185px;
	float:right;
	padding:43px 13px 0px 13px;
	background:url(../images/subNavTop.gif) top left no-repeat;
	overflow:hidden;
}
#subNav li{
	list-style-type:none;
	background:url(../images/subNavDottedLine.gif) bottom left no-repeat;
	padding-left:5px;
	padding-bottom:6px;
	margin-bottom:5px;
}
#subNav a{
	font-size:13px;
	color:#005a91;
	text-decoration:none;
}
#subNav a:hover{
	text-decoration:underline;
}