/* Span separators need to have a pointer too*/
.sf-horizontal span, .sf-navbar span, .sf-list span, .sf-vertical span {cursor:pointer;}

.sf-horizontal, .sf-horizontal *,
.sf-navbar, .sf-navbar * ,
.sf-vertical, .sf-vertical * {
  margin:      0;
  padding:    0;
  list-style:    none;
  z-index:3;
  text-indent:0;
}

/*This sets the list as invisible so the jquery fade-in (req_js.js) will work*/
#sf ul li {border:0; display:none; list-style-type:none;background: none;}
#sf ul li li{display:list-item;}


#sf { background: url(../images/sf_mid.png) repeat-x;height: 100px; margin-left: 30px; margin-right:30px; 
}
#sf-l { background: url(../images/sf_l.png) no-repeat;
}
#sf-r { background: url(../images/sf_r.png) 100% 0 no-repeat; margin-right: -30px;
}

#innermenu { }

#sf ul { float:left; }
#sf ul ul {margin-left: 0px;}



/*font COLORS*/
#sf .sf-horizontal li a, #sf .sf-horizontal li span {color:#666;}
#sf .sf-horizontal li:hover a, #sf .sf-horizontal li:hover span {color:#FDF880;}


#sf ul.sf-horizontal li li a, #sf ul.sf-horizontal li li span {color: #fff;text-transform: none; }
#sf .sf-horizontal li:hover  li a, #sf .sf-horizontal li:hover li span {color: #fff;}

#sf .sf-horizontal li li:hover a, #sf .sf-horizontal li li:hover span {
  color: #F33;
}
#sf .sf-horizontal li li:hover li a, #sf .sf-horizontal li li:hover li span {color: #fff;}
#sf .sf-horizontal li li li:hover a, #sf .sf-horizontal li li li:hover span {color: #fff;}

#sf ul.sf-horizontal li.active a, #sf ul.sf-horizontal li.active span {color:#fff;}
#sf ul.sf-horizontal li.active li a, #sf ul.sf-horizontal li.active li span {color:#fff;}
#sf ul.sf-horizontal li.active li:hover a, #sf ul.sf-horizontal li.active li:hover span {
  color:#F33;
}
#sf ul.sf-horizontal li.active li.active a, #sf ul.sf-horizontal li.active li.active span {color:#fff;}
#sf ul.sf-horizontal li.active li:hover li a, #sf ul.sf-horizontal li.active li:hover li span {color:#fff;}
#sf ul.sf-horizontal li.active li.active li a, #sf ul.sf-horizontal li.active li.active li span {color:#fff;}


#sf ul.sf-horizontal li.active li:hover li:hover a, #sf ul.sf-horizontal li.active li:hover li:hover span {color:#fff;}
#sf ul.sf-horizontal li.active li.active li.active a, #sf ul.sf-horizontal li.active li.active li.active span {color:#fff;}

#sf ul.sf-horizontal li.active .line2 {color: #000;}


#sf ul.sf-horizontal li li span.line1 {padding-left:15px;}

/*font STYLING*/
#sf ul li {padding: 0 20px;}
#sf li a, #sf li span.separator {height: 70px; width: 100%;text-transform:uppercase;font-family: 'LeagueGothicRegular', Arial, sans-serif;letter-spacing: 0;}
#sf ul li li {padding:0;}
#sf li li a, #sf li li span.separator {height: 35px; font-size: 12px; font-weight:normal;font-family: Verdana, Geneva, sans-serif;text-indent:6px;padding-left: 0;}
/*split LEVELS*/
#sf ul li span.line1 { line-height:60px; font-size: 28px;}
.sf-horizontal .line2, .sf-navbar .line2, .sf-vertical .line2  {padding:0;margin:0;font-size:11px; display:block; text-transform:none; margin-top:-14px; font-weight:normal; font-family:Verdana, Geneva, sans-serif; text-indent:0;}

#sf ul li ul li span.line1 {line-height:33px;font-size:12px;font-weight:normal;width:100%;text-indent: 10px;}



/*Backgrounds of main levels*/
#sf li:hover, #sf li.over, #sf li.sfHover{
  /*background: #333;*/ 
}
#sf li:hover a, #sf li.over a, #sf li.sfHover a,#sf li:hover span, #sf li.over span, #sf li.sfHover span{
  color: #fff;
}
#sf li.active{
  background-color: #be1418;
}





/*** ESSENTIAL STYLES ***/

#sf a,#sf li span.separator{
  padding: 0;
  text-align:left;
}
#sf li, #sf li span.separator {
  float: left;
  display: block;
}


.sf-vertical, .sf-vertical * {
z-index:2;
}
.sf-horizontal,
.sf-navbar,
.sf-vertical {
  line-height:  1.0;
}
.sf-horizontal ul,
.sf-navbar ul,
.sf-vertical ul {
  position:    absolute;
  top:      -999em;
  width:      236px; /* left offset of submenus need to match (see below) */
}
.sf-horizontal ul li,
.sf-navbar ul li,
.sf-vertical ul li {
  width:      100%;
}
.sf-horizontal li:hover,
.sf-navbar li:hover,
.sf-vertical li:hover   {
  visibility:    inherit; /* fixes IE7 'sticky bug' */
}
.sf-horizontal li,
.sf-navbar li,
.sf-vertical li {
  float:      left;
  position:    relative;
}
.sf-horizontal a,
.sf-navbar a,
.sf-vertical a  {
  display:    block;
  position:    relative;
}
.sf-horizontal li:hover ul,
.sf-horizontal li.sfHover ul,
.sf-navbar li:hover ul,
.sf-navbar li.sfHover ul
 {
  left:      -8px;
  top:      70px; /* match top ul list item height */
  z-index:    99;
}

ul.sf-horizontal li:hover li ul,
ul.sf-horizontal li.sfHover li ul,
ul.sf-navbar li:hover li ul,
ul.sf-navbar li.sfHover li ul,
ul.sf-vertical li:hover li ul,
ul.sf-vertical li.sfHover li ul {
  top:      -999em;
}
ul.sf-horizontal li li:hover ul,
ul.sf-horizontal li li.sfHover ul,
ul.sf-navbar li li:hover ul,
ul.sf-navbar li li.sfHover ul,
ul.sf-vertical li li:hover ul,
ul.sf-vertical li li.sfHover ul {
  left:      242px; /* match ul width */
  top:      -22px;
}
ul.sf-horizontal li li:hover li ul,
ul.sf-horizontal li li.sfHover li ul,
ul.sf-navbar li li:hover li ul,
ul.sf-navbar li li.sfHover li ul,
ul.sf-vertical li li:hover li ul,
ul.sf-vertical li li.sfHover li ul {
  top:      -999em;
}
ul.sf-horizontal li li li:hover ul,
ul.sf-horizontal li li li.sfHover ul,
ul.sf-navbar li li li:hover ul,
ul.sf-navbar li li li.sfHover ul,
ul.sf-vertical li li li:hover ul,
ul.sf-vertical li li li.sfHover ul {
  left:      242px; /* match ul width */
  top:      -22px;
}

.sf-horizontal,
.sf-navbar,
.sf-vertical {
  float:      left;
  margin-bottom:  0;
}

.sf-horizontal li li,
.sf-navbar li li,
.sf-vertical li li  {
  width:236px;
}
.sf-horizontal li li li,
.sf-navbar li li li,
.sf-vertical li li li   {
}

.sf-horizontal li:hover, .sf-horizontal li.sfHover,
.sf-horizontal a:focus, .sf-horizontal a:hover, .sf-horizontal a:active,
.sf-navbar li:hover, .sf-navbar li.sfHover,
.sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active,
.sf-vertical li:hover, .sf-vertical li.sfHover,
.sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active  {
  outline:    0;
}

/*** arrows **/
.sf-horizontal a.sf-with-ul, .sf-navbar a.sf-with-ul, .sf-vertical a.sf-with-ul,
.sf-horizontal span.sf-with-ul, .sf-navbar span.sf-with-ul, .sf-vertical span.sf-with-ul    {
  padding-right:   20px;
  min-width:    1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-horizontal .sf-sub-indicator  {
  position:    absolute;
  display:    block;
  left: 0px;
  top: 55px;
  width:      10px;
  height:      10px;
  text-indent:   -999em;
  overflow:    hidden;
  background:    url(../images/arrows-horizontal.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}


.sf-navbar li li .sf-sub-indicator  {
  background:    url(../images/arrows-horizontal-2.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:      55px;
  width:      10px;
  height:      10px;
  left: 0px;
  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}

 span.separator .sf-sub-indicator {  /* give all except IE6 the correct values */
  top:      55px;
  width:      10px;
  height:      10px;
  left: 20px;
  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
.sf-horizontal li  li  a .sf-sub-indicator, .sf-horizontal li  li  span.separator .sf-sub-indicator  {
  position:    absolute;
  display:    block;
  left: 210px;
  top: 13px;
  width:      10px;
  height:      10px;
  text-indent:   -999em;
  overflow:    hidden;
  background:    url(../images/arrows-horizontal.png) no-repeat -10px 0px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

ul ul .sf-sub-indicator {  /* give all except IE6 the correct values */
  top:      14px;
  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  right:      20px;

}
/* 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,
span:focus > .sf-sub-indicator,
span:hover > .sf-sub-indicator,
span:active > .sf-sub-indicator,
li:hover > span > .sf-sub-indicator,
li.sfHover > span > .sf-sub-indicator {
  background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-horizontal ul .sf-sub-indicator, .sf-navbar ul .sf-sub-indicator,.sf-vertical ul .sf-sub-indicator  { background-position:  -10px 0; }
.sf-horizontal ul a > .sf-sub-indicator,
.sf-navbar ul a > .sf-sub-indicator,
.sf-vertical ul a > .sf-sub-indicator  { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-horizontal ul a:focus > .sf-sub-indicator,
.sf-horizontal ul a:hover > .sf-sub-indicator,
.sf-horizontal ul a:active > .sf-sub-indicator,
.sf-horizontal ul li:hover > a > .sf-sub-indicator,
.sf-horizontal ul li.sfHover > a > .sf-sub-indicator,
.sf-navbar ul a:focus > .sf-sub-indicator,
.sf-navbar ul a:hover > .sf-sub-indicator,
.sf-navbar ul a:active > .sf-sub-indicator,
.sf-navbar ul li:hover > a > .sf-sub-indicator,
.sf-navbar ul li.sfHover > a > .sf-sub-indicator,
.sf-vertical ul a:focus > .sf-sub-indicator,
.sf-vertical ul a:hover > .sf-sub-indicator,
.sf-vertical ul a:active > .sf-sub-indicator,
.sf-vertical ul li:hover > a > .sf-sub-indicator,
.sf-vertical 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 12px 11px 0;
}
.sf-shadow ul.sf-shadow-off {
  background: transparent;
}


#sf .sf-horizontal ul li.active{
  background: url(../images/sf-submenu-active.png) repeat-x;
}

.sf-horizontal img.menu_img, .sf-navbar img.menu_img {position:relative;top:8px;display:block;}
.sf-navbar ul li img.menu_img {top:0px;}
.sf-horizontal ul li img.menu_img, .sf-navbar ul li li img.menu_img {top:0px; left: 10px;}


#sf .sf-horizontal ul li {background: url(../images/submenu.png) 50% 50%;width:236px;}
#sf .sf-horizontal ul li:hover {background: url(../images/submenu.png) 50% 25%;width:236px;z-index: 1000;}
#sf .sf-horizontal ul li.pjmenu-top {background: url(../images/submenu2.png) no-repeat 0 0;height:22px;width:236px;}
#sf .sf-horizontal ul li.pjmenu-bottom{background: url(../images/submenu.png) 50% 100%; height:22px;width:236px;}
#sf .sf-horizontal ul  ul li.pjmenu-top {background: url(../images/submenu.png) no-repeat 0 0;height:22px;width:236px;}
#sf .sf-horizontal ul li.active { background: url(../images/submenu.png) 50% 75%;}