/* Superfish menu system
	The CreatorWWW skin should require changes only to the tabs.gif graphic (which
	is located in the css directory) for changing the overall style of the tabs.
	This approach uses a sliding doors template that is 80px high with the base tab
	style on the top and the hover style on the bottom. each tab style is 40px high
	the display height of the tab can be any size less than 40px.
	If dimensional changes are required to the skin, these are made in the CreatorWWW
	skin section below.  Changes should not be needed to any other CSS.

*/

/*** ESSENTIAL STYLES ***/
.nav, .nav * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav {
	line-height: 1.0;
}
.nav ul {
	position: absolute;
	top: -98em;
	width: 15em; /* left offset of submenus need to match (see below) */
}
.nav ul li {
	width: 100%;
}
.nav li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.nav li {
	float: left;
	position: relative;
}
.nav a {
	display: block;
	position: relative;
}
.nav li:hover ul,
.nav li.sfHover ul {
	left: 1em;
	top: 3em; /* match top ul list item height */
	z-index: 99;
}
ul.nav li:hover li ul,
ul.nav li.sfHover li ul {
	top: -999em;
}
ul.nav li li:hover ul,
ul.nav li li.sfHover ul {
	left: 15em; /* match ul width */
	top: 0;
}
ul.nav li li:hover li ul,
ul.nav li li.sfHover li ul {
	top: -999em;
}
ul.nav li li li:hover ul,
ul.nav li li li.sfHover ul {
	left: 10em; /* match ul width */
	top: 0;
}

/* -------------------------------------------------------- */
/*** Abrasives Hub SKIN ***/

/* Set the background onto which the tabs will float */
#navarea {
	float: left;
	width: 1000px;
	background: #ffffff url(menu_rpt.gif?z=96249 ) repeat-x;
	font: 14px/20px "Trebuchet MS", Arial, Tahoma, Sans-serif;
	text-transform: none;
	line-height: normal;
	border: 1px solid #ffffff;
	/*border: 1px solid red;*/
}

/* Set the space above and to the left of the menu using the padding */
.nav {
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 0px 5px;
}

.nav li {
	display: inline;
	position: relative;
	margin: 0;
	padding: 0;
	z-index: 99; /* Need this one */
}

/* set the left margin using the padding left value */
.nav a {
	background: url("tabs.gif") no-repeat left top;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	text-decoration: none;
}

/* set the height of the tab using padding + font height */
.nav a span {
	display: block;
	background: url("tabs.gif") no-repeat right top;
	padding: 7px 20px 18px 15px;
	color: #000000;
	/*border: 1px solid red;*/
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.nav a span {
	float: none;
}

/* the height of each tab image is 40px */
/* this finds the top left position of the bottom tab*/
.nav a:hover, .nav .currentX1 a {
	background-position: 0% -40px;
	border-bottom: none;
	font-weight: bold;
}

/* the height of each tab image is 40px */
/* this finds the top right position of the bottom tab*/
.nav a:hover span, .nav .currentX1 a span {
	background-position: 100% -40px;
	color:#000000;
}

.nav a, .nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color: #13a;
}

.nav li li a, .nav li li a span {
	padding: 5px 10px;
	background: #ffffff;
	color: #000000;
	/*font-weight: normal;*/
	font: 12px/14px "Trebuchet MS", Arial, Tahoma, Sans-serif;
}

.nav li li a {
	border-bottom: 2px solid #efefef;
}

.nav li li li a, .nav li li li a span {
	background: #ffffff;
	color: #000000;
}

.nav ul {
	border: 1px solid #cccccc;
}
.nav li li a:hover, .nav li li a:active {
	background: #ffffff;
	border-bottom: 2px dotted #004a32;
	font-weight: bold;
}

/* -------------------------------------------------------- */
/*** arrows **/
.nav a.sf-with-ul {
	padding-right: 2.25em;
	min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position: absolute;
	display: block;
	right: .75em;
	top: 1.05em; /* IE6 only */
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
	background: url('../images/arrows-ffffff.png') no-repeat -10px -100px;
	/* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top: .8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.nav ul .sf-sub-indicator { background-position:  -10px 0; }
.nav ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.nav ul a:focus > .sf-sub-indicator,
.nav ul a:hover > .sf-sub-indicator,
.nav ul a:active > .sf-sub-indicator,
.nav ul li:hover > a > .sf-sub-indicator,
.nav ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background: url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}