#pgMenu
{ position:relative; float:left; width:931px; margin:4px 0 18px 0; padding: 0 13px 0 13px; }
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
#pgMenu ul#nav
{ position:relative; float:left; width:931px; list-style:none; }
#pgMenu ul#nav li
{ position:relative; float:left; height:36px; width:150px; text-align:left; margin-bottom:0px; }
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */

#pgMenu ul#nav li ul, #nav li:hover ul, #nav li.sfHover ul
{ position:absolute; top:36px; left:0px; list-style:none; }
#nav li.sfHover ul
{ z-index:100; }
#pgMenu ul#nav li ul ul
{ position:absolute; top:0px; left:151px; list-style:none; }

/* styles for menu left */
#pgMenu ul#nav li.p_sub_left ul ul
{ margin-left:-302px; position:absolute; top:0; width:151px; list-style:none; }

/*** arrows **/
#nav a.sf-with-ul
{ padding:0; 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: 20px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.gif') 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 5px; }
#nav ul a > .sf-sub-indicator
{ background-position:  0 5px; }
/* apply hovers to modern browsers */
#pgMenu ul#nav li.p_sub_left a.sub
{ padding-left:25px; }
li.p_sub_left .sf-sub-indicator
{ left: .75em; background: url('../images/arrows-ffffff-right.gif') no-repeat -10px -100px; }
#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 5px; /* 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; }

/*** alter arrow directions ***/
#nav .sf-sub-indicator
{ background-position: -10px -95px; } /* IE6 gets solid image only */
#nav a > .sf-sub-indicator
{ background-position: 0 -95px; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
#nav a:focus > .sf-sub-indicator, #nav a:hover > .sf-sub-indicator, #nav a:active > .sf-sub-indicator, #nav li:hover > a > .sf-sub-indicator, #nav li.sfHover > a > .sf-sub-indicator
{ background-position: 0px -95px; /* arrow hovers for modern browsers*/ }