/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin:0;
padding:0;
list-style:none;
text-align: left;
font-family: 'Arial', sans-serif;
}
.sf-menu {
line-height:1.5;
}
.sf-menu ul {
position:    absolute;
top:-999em;
width:23em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:    inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:left;
position:    relative;
}
.sf-menu a {
display:    block;
position:    relative;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
left:0;
top:3.3em; /* match top ul list item height */
z-index:    99;
}
 
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
left:23em; /* match ul width */
top:0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:23em; /* match ul width */
top:0;
}
/*** DEMO SKIN ***/
.sf-menu {
float:left;
/* margin-bottom:1em; */
}
.sf-menu a {

border: 1px solid #FFFFFF;
-webkit-border: 1px solid #FFFFFF;
-moz-border: .5px solid #FFFFFF;
-ms-border: .5px solid #FFFFFF;
-o-border: .5px solid #FFFFFF;
border-bottom: 0;
/* border-left: 0; */

border-top-left-radius: 3px;
border-top-right-radius: 3px;

padding:         .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:#3E3F42; 
font-size: 12px;

}

.sf-menu a.top, .sf-menu a.top:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
font-size: 12px;

}

.sf-menu a.special{
border-top: 4px double #FFFFFF;
}

.sf-menu li {
background:   #444444;
/*Gradient*/
background: -webkit-linear-gradient(top, #7E7E7E 0%, #151515 100%);
background: -moz-linear-gradient(top, #7E7E7E 0%, #151515 100%);
background: -o-linear-gradient(top, #7E7E7E 0%, #151515 100%);
background: -ms-linear-gradient(top, #7E7E7E 0%, #151515 100%);
background: linear-gradient(top, #7E7E7E 0%, #151515 100%);

}
.sf-menu li li {
background:   #D2D3D9;
/*Gradient*/
background: -webkit-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -moz-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -o-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -ms-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);

line-height:.6em;

}
.sf-menu li li li {
background:   #D2D3D9;
/*Gradient*/
background: -webkit-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -moz-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -o-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: -ms-linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);
background: linear-gradient(top, #E2E3E9 0%, #BFC0C5 100%);

line-height:.6em;

}

.sf-menu li.sfHover > a
{
/* color: #FECB00; */
color:#FFFFFF;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active
.sf-menu a.top:focus, .sf-menu a.top:hover, .sf-menu a.top:active {
/*background:    #CFDEFF;*/

background:   #848484;
/*Gradient*/

background: -webkit-linear-gradient(top, #9C9C9C 0%, #3E3E3E 100%);
background: -moz-linear-gradient(top, #9C9C9C 0%, #3E3E3E 100%);
background: -o-linear-gradient(top, #9C9C9C 0%, #3E3E3E 100%);
background: -ms-linear-gradient(top, #9C9C9C 0%, #3E3E3E 100%);
background: linear-gradient(top, #9C9C9C 0%, #3E3E3E 100%);
outline:    0;
/* color: #FECB00; */
color:#FFFFFF;

}

/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right:     2.25em;
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:10px;
text-indent:     -999em;
overflow:    hidden;
background:    url('arrows-ffffff.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:1.2em;
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 {
top:1.2em;
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
 
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { top:.6em; background-position:  -10px 0;}
.sf-menu ul a > .sf-sub-indicator { top:.6em; background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu 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('shadow.png') no-repeat bottom right; */
padding: 0 8px 9px 0;

}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

@media all{
TR.menu
{
	background:   #444444;
	/*Gradient*/
	background: -webkit-linear-gradient(top, #7E7E7E 0%, #151515 100%);
	background: -moz-linear-gradient(top, #7E7E7E 0%, #151515 100%);
	background: -o-linear-gradient(top, #7E7E7E 0%, #151515 100%);
	background: -ms-linear-gradient(top, #7E7E7E 0%, #151515 100%);
	background: linear-gradient(top, #7E7E7E 0%, #151515 100%);

	border: 0;
}
}

@media print{
TR.menu { display:none; }
}
