/* Suckerfish styling for Pure Joomla! Template System *************************************************/


/* 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;
}

#sf ul li {border:0;list-style-type:none;background: none;padding:0;}
#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 {
}
#sf-r { background: url(../images/sf_r.png) 100% 0 no-repeat; margin-right: -30px;
}*/


#sf ul.sf-horizontal {float:left; margin-left: 10px;}
#sf ul.sf-horizontal ul {margin-left: 0px;background: none;}


/*Backgrounds of main levels*/
#sf ul li {
/*border-right: 1px solid transparent;border-left: 1px solid transparent;
 background: url(../images/menu_divider_l.png) no-repeat 100% 50%;*/
background: none;
border:1px solid transparent;
}
#sf li:hover, #sf li.over, #sf li.sfHover{
background: #efefef; border:1px solid #fff;
}
#sf li:hover a, #sf li.over a, #sf li.sfHover a,#sf li:hover span, #sf li.over span, #sf li.sfHover span{
}
#sf li.active{
background: #eff5fa; border:1px solid #fff;
}
  
#sf ul li li {border:0; }
#sf ul li li:hover, #sf ul li li.sfHover {border:0;}
#sf ul li li.active {background: transparent;margin-top:0;border:0;}

/**** menu STYLING **************************************************************************************/
/**** Main Level ***************************************************************************************/

#sf ul li {padding: 0 16px 0 13px;margin: 0 1px 0 0;}
#sf ul li.last {background-image: none;}
#sf ul li.first {background-image: none;}
#sf li a, #sf li span.separator {height: 40px; width: 100%;}
#sf ul li li { padding:0; border-right:0;}

/*split LEVELS*/
#sf ul li span.line1
{
line-height:25px; font-size:18px;text-transform:uppercase;
}
.sf-horizontal .line2, .sf-navbar .line2, .sf-vertical .line2  
{
padding:0;margin:0;font-size:11px; display:block;
text-transform:none; margin-top:-4px; font-weight:normal;
text-indent: 1px;
}

/*main level normal*/
#sf .sf-horizontal li a, #sf .sf-horizontal li span
{
color:#6699cc;
}
#sf ul.sf-horizontal li .line2
{
color: #999;
font-weight:normal;
}

/*main level hover*/
#sf .sf-horizontal li:hover a, #sf .sf-horizontal li:hover span
{
color:#555;
}

/*main level active*/
#sf ul.sf-horizontal li.active a, #sf ul.sf-horizontal li.active span
{
color: #004860;

}
#sf ul.sf-horizontal li.active .line2
{
color: #999;
font-weight:normal;
}

/****  small link on dark background ***************************************************************************************/
a.nav:link {
  color: #DDDDDD;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
}
a.nav:visited {
  color: #dddddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
}
a.nav:activ {
  color: #dddddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
}
a.nav:hover {
  color: #dddddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
}
/****  Sub Levels ***************************************************************************************/

#sf ul.sf-horizontal li li a, #sf ul.sf-horizontal li li span.separator, #sf ul.sf-horizontal li ul li span.line1
{
font-family: Arial, Helvetica, sans-serif; text-transform:none;
padding-left:15px; height: 35px; line-height:33px;
font-size: 12px; font-weight:normal; width:100%;
}

/*sub-level active*/
#sf ul.sf-horizontal  li li.active a, #sf ul.sf-horizontal li li.active span,
#sf ul.sf-horizontal  li li li.active a, #sf ul.sf-horizontal li li li.active span,
#sf ul.sf-horizontal  li li li li.active a, #sf ul.sf-horizontal li li li li.active span,
#sf ul.sf-horizontal  li li li li li.active a, #sf ul.sf-horizontal li li li li li.active span

{
color:#fff;
}

/*sub-level normal*/
#sf ul.sf-horizontal li li a, #sf ul.sf-horizontal li li span,
#sf .sf-horizontal li.active  li a, #sf .sf-horizontal li.active li span,
#sf .sf-horizontal li li.active  li a, #sf .sf-horizontal li li.active li span,
#sf .sf-horizontal li li li.active  li a, #sf .sf-horizontal li li li.active li span,
#sf .sf-horizontal li li li li.active  li a, #sf .sf-horizontal li li li li.active li span,
#sf .sf-horizontal li:hover  li a, #sf .sf-horizontal li:hover li span,
#sf .sf-horizontal li li:hover li a, #sf .sf-horizontal li li:hover  li span,
#sf .sf-horizontal li li li:hover li a, #sf .sf-horizontal li li li:hover  li span,
#sf .sf-horizontal li li li li:hover li a, #sf .sf-horizontal li li li li:hover  li span,
#sf .sf-horizontal li li li li li:hover li a, #sf .sf-horizontal li li li li li:hover  li span  
{
color: #999;
font-weight:normal;
}

/*sub-level hovered*/
#sf .sf-horizontal li li:hover a, #sf .sf-horizontal li li:hover  span,
#sf .sf-horizontal li li li:hover a, #sf .sf-horizontal li li li:hover  span,
#sf .sf-horizontal li li li li:hover a, #sf .sf-horizontal li li li li:hover  span,
#sf .sf-horizontal li li li li li:hover a, #sf .sf-horizontal li li li li li:hover  span,      
#sf .sf-horizontal li li li li li li:hover a, #sf .sf-horizontal li li li li li li:hover  span      
{
color: #fff;
}






/*** 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 {
 
}
.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:      -10px;
  top:      33px; /* 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:      -26px;
}
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:      -26px;
}

.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: 39px;
  top: 32px;
  width:      16px;
  height:      16px;
  text-indent:   -999em;
  overflow:    hidden;
  background:    url(../images/arrows-horizontal.png) no-repeat 0 100%; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

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

ul ul .sf-sub-indicator {  /* give all except IE6 the correct values */
  top:      12px;
  background-position: 0 0; /* 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: 0 0; /* 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:  0 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: 100% 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 {background: url(../images/submenu.png) 50% 50%;width:240px;}
#sf .sf-horizontal ul li:hover {background: url(../images/submenu.png) 50% 25%;width:240px;z-index: 1000;}
#sf .sf-horizontal ul li.pjmenu-top {background: url(../images/submenu.png) no-repeat 0 0;height:27px;width:240px;}
#sf .sf-horizontal ul li.pjmenu-bottom{background: url(../images/submenu.png) 50% 100%; height:27px;width:240px;}
#sf .sf-horizontal ul  ul li.pjmenu-top {background: url(../images/submenu2.png) no-repeat 0 0;height:27px;width:240px;}
#sf .sf-horizontal ul li.active { background: url(../images/submenu.png) 50% 75%;}

#sf ul li img {top:0;left:45%; position:absolute;}