/* 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 ul.sf-horizontal {float:left; margin-left: 10px;}
#sf ul.sf-horizontal ul {margin-left: 4px;background: none;}


/*Backgrounds of main levels*/
#sf ul li {
background: none;
border:1px solid transparent;

}
#sf li:hover, #sf li.over, #sf li.sfHover{

}
#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: #000;
border:1px solid #333;
margin-top:-8px;
padding-top: 12px;
padding-bottom:0;
}
  
#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 {height: 50px;padding: 6px 10px 0px 10px;margin: 0 4px;}
#sf ul li.last {background-image: none; }
#sf ul li.first {}
#sf li a, #sf li span.separator {height: 40px; width: 100%;}
#sf ul li li { padding:0; border-right:0; height: 33px; margin-left: 8px;}

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

/*main level normal*/
#sf ul.sf-horizontal li a, #sf ul.sf-horizontal li span 
{
	color:#f88f1e;
	text-shadow:1px 1px 1px #000;
}
#sf ul.sf-horizontal li .line2
{
color: #999;
font-weight:normal;
}

/*main level hover*/
#sf ul.sf-horizontal > li:hover a, #sf ul.sf-horizontal > li:hover span 
{
color:#fff; 
text-shadow:1px 1px 1px #000;
}

/*main level active*/
#sf ul.sf-horizontal li.active a, #sf ul.sf-horizontal li.active span
{
	color: #f88f1e;
	text-shadow:1px 1px 1px #000;
}

#sf ul.sf-horizontal li.active li span, #sf ul.sf-horizontal li.active li a {
text-shadow:none;
}

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


/****  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; text-shadow:none;
padding-left:15px; height: 33px; line-height:33px; 
font-size: 12px; font-weight:normal; width:100%;
text-indent: 16px;
}

/*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: #f88f1e;
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:      240px; /* 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:      -20px;
  top:      40px; /* 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:      230px; /* 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:240px;
}
.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: 7px;
  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;}