/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu li {
  position: relative; }

.sf-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99; }

.sf-menu > li {
  float: left; }

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
  display: block; }

.sf-menu a {
  display: block;
  position: relative; }

.sf-menu ul ul {
  top: 0;
  left: 100%; }

/*** DEMO SKIN ***/
.sf-menu {
  /*	float: left;
    	height: 35px; */ }

.sf-menu ul {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  min-width: 12em;
  /* allow long menu items to determine submenu width */
  *width: 12em;
  /* no auto sub width for IE7, see white-space comment below */ }

.sf-menu a {
  /***    font-family: NotesEsaRegular,"Trebuchet MS",Tahoma,Arial; ***/
  font-size: 13px;
  color: #A80E29;
  text-decoration: none;
  zoom: 1;
  /* IE7 */
  cursor: pointer; }

.sf-menu h3.esa a {
  font-size: 14px; }

.sf-menu li.cosmos_silverbar_tab {
  padding: 0; }

.sf-menu li.cosmos_silverbar_tab > a {
  font-family: NotesEsaBold,"Trebuchet MS",Tahoma,Arial;
  font-size: 15px; }

.sf-menu li.selected {
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none; }

.sf-menu li {
  /*	white-space: nowrap; /* no need for Supersubs plugin */
  /*	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
  -webkit-transition: background .2s;
  transition: background .2s; }

.sf-menu ul li {
  background: #f4f4f4;
  margin-top: -1px;
  padding: 4px 25px 6px 4px;
  margin-right: -1px;
  border: #c0c0c0 1px solid; }

.sf-menu ul ul li {
  background: #f4f4f4;
  margin-top: -1px;
  top: 0;
  padding: 4px 25px 6px 4px;
  margin-right: -1px;
  border: #c0c0c0 1px solid; }

.sf-menu li:hover,
.sf-menu li.sfHover {
  color: #A80E29;
  /*	white-space: nowrap; /* no need for Supersubs plugin */
  /*	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
  -webkit-transition: background .2s;
  transition: background .2s; }

.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
  background: #d0d0d0;
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none; }

.sf-menu ul li .cosmos_external_link {
  background: url("/Cosmos-3.4-theme/images/cosmos_portal/external_link_cosmos_grey.png") no-repeat scroll 0 0 transparent;
  display: block;
  overflow: hidden;
  position: absolute;
  text-indent: -999em;
  right: -1.50em;
  top: 0.25em;
  width: 10px;
  height: 10px; }

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
  padding-right: 1em;
  *padding-right: 1em;
  /* no CSS arrows for IE7 (lack pseudo-elements) */ }

/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  margin-left: 10px;
  height: 0;
  width: 0;
  /* order of following 3 rules important for fallbacks to work */
  border: 5px solid transparent;
  border-top-color: #22597e;
  /* edit this to suit design (no rgba in IE8) */
  border-top-color: #22597e; }

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: #0098db;
  /* IE8 fallback colour */
  position: absolute; }

/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #22597e;
  /* edit this to suit design (no rgba in IE8) */
  border-left-color: #22597e; }

.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: #0098db; }

ul.sf-arrows ul li .sf-with-ul:after {
  right: -1.5em; }

ul.sf-arrows ul .sf-with-ul:after {
  border-left-color: #999999;
  /* edit this to suit design (no rgba in IE8) */
  border-left-color: #999999; }

ul .sf-arrows ul li > .sf-with-ul:focus:after,
ul .sf-arrows ul li:hover > .sf-with-ul:after,
ul .sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: #999999; }

