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

#nav {
	float: left;
	padding: 0px;
	list-style: none;
}
#nav li {
	float: left;
	position: relative;
	z-index: 99;
}
#nav li a {
	float: left;
	display: block;
	height: 67px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}

/*--CSS Sprites - Hover State--*/
#nav a:hover {
	background-position: left -67px;
}
/*--Assign an image and width to each link--*/
#nav li.home a {
	background-image: url(../images/button-home.png);
	width: 67px;
}
#nav li.products a {
	background-image: url(../images/button-products.png);
	width: 87px;
}
#nav li.whatsnew a {
	background-image: url(../images/button-whatsnew.png);
	width: 108px;
}
#nav li.upgrade a {
	background-image: url(../images/button-upgrade.png);
	width: 84px;
}
#nav li.downloads a {
	background-image: url(../images/button-downloads.png);
	width: 104px;
}
#nav li.purchase a {
	background-image: url(../images/button-purchase.png);
	width: 89px;
}
#nav li.support a {
	background-image: url(../images/button-support.png);
	width: 81px;
}
#nav li.mobileapps a {
	background-image: url(../images/button-apps.png);
	width: 64px;
}
/*--- DROPDOWN ---*/
#nav ul {
	top: 67px;
	background: #f4f5f7; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	list-style: none;
	position: absolute;
	padding-top: 4px;
	padding-bottom: 4px;
	width: auto;
	display: none;
	-webkit-box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.25);
	box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.25);
	border: 1px solid #76808b;
}
#nav ul li {
	float: none;
	display: block;
}
#nav li:hover ul { /* Display the dropdown on hover */
	display: block;
}
#nav li:hover a { /* top-most link stays 'hovered' when your cursor moves down the list. */
	background-position: left -67px;
}
#nav li:hover ul a { /* Undo inhereted effects in dropdown. */
	white-space: nowrap;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	padding: 8px 13px;
	height: auto;
	color: #003876;
	background-image: none;
	text-indent: 0px;
	background: #f4f5f7;
	width: 168px;
}
#nav li:hover ul li a:hover { /* what happens when you hover each individual link. */
	background: #faa71a;
	color: #fff;
}

#home li.home a, #products li.products a, #whatsnew li.whatsnew a, #upgrade li.upgrade a, #downloads li.downloads a, #purchase li.purchase a, #support li.support a, #mobileapps li.mobileapps a {
	background-position: left bottom;
}