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

}



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

}

*/





#sf ul { float:left; direction:rtl }

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





/*Backgrounds of main levels*/

#sf ul li {

border-left: 1px solid #fff;

border-right: 1px solid #e3e3e3;

/*margin-top:30px;*/

margin-right:0px;

}



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

background: #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: #1b2794; 

}

  

#sf ul li li {border:0;}

#sf ul li li:hover {border:0;background: transparent;}

#sf ul li li.active {background: transparent;}



/**** menu STYLING **************************************************************************************/

/**** Main Level ***************************************************************************************/



#sf ul li { padding: 0 20px;}

#sf ul li.last { border-right:0;}

#sf ul li.first { border-left:0;}

#sf li a, #sf li span.separator {height: 60px; width: 100%;}

#sf ul li li { padding:0; border-right:0;}



/*split LEVELS*/

#sf ul li span.line1 

{

line-height:40px; font-size:20px;font-family: Arial, sans-serif;

}

.sf-horizontal .line2, .sf-navbar .line2, .sf-vertical .line2  

{

padding:0;margin:0;font-size:11px; display:block; 

text-transform:none; margin-top:-7px; font-weight:normal;

text-indent: 1px;

}



/*main level normal*/

#sf .sf-horizontal li a, #sf .sf-horizontal li span 

{

color:#000;

}

#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:#000;

}



/*main level active*/

#sf ul.sf-horizontal li.active a, #sf ul.sf-horizontal li.active span

{

color: #fff;

font-weight:normal;

}

#sf ul.sf-horizontal li.active .line2 

{

color: #ddd;

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;

padding-right:15px; height: 35px; line-height:33px; 

font-size: 16px; 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: #666;

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:right;

}

#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:      right;

  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

 {

  rigth:      -11px;

  top:      43px; /* 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 {

  right:      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 {

  right:      242px; /* match ul width */

  top:      -26px;

}



.sf-horizontal,

.sf-navbar,

.sf-vertical {

  float:      right;

  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;

  right: 39px;

  top: 44px;

  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;

  right: 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-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; right: 10px;}



#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%;}