.menuH {
  /* You will get totally diffrent menu alignment and layout by setting following margin, width, and float with different values.
  For detailed instruction please visit www.menucool.com/horizontal/change-menu-alignment  */
  /*margin: 5px; width: auto; float:left;*/
  margin: 5px; width: auto;
  /*following "behavior" works for IE6, IE7, and IE8. Other browsers will ignore it.*/
  /*Note: Unlike image file, htc file path is relative to the page, not this CSS file.*/
  behavior: url("/assets/cssmenu.htc");
  /*height: 36px;
  background: #FFE1A5 url("/assets/images/site/menu/xbg.gif") repeat-x 0 0;*/
  background-color: #FFE1A5;
  border: 1px solid #BBB;
  position:relative;/*! for IE htc*/
  z-index:4;/*H2*/
  font-family: Arial, Helvetica, sans-serif;
  list-style: none;
  padding: 0;
}

.menuH li {
  padding: 0;
  /*margin: 0;
  display: block; TODO: I am testing them if they can be removed. If can, remove them.*/
  float: left;
  height: 36px;
  position: relative;/*move it into .menuH if you want submenu to be positioned relative to the whole menu instead of this li element*/
}
.menuH li:hover, .menuH li.onhover {
  /*background: #146A83 url("/assets/images/site/menu/xbg.gif") repeat-x 0 -48px;*/
  background-color: #146A83;
}

ul.menuH a {
  /*padding: 0 30px;*/
  padding: 0 20px;
  line-height: 36px; /*Note: keep this value the same as the height of .menuH and .menuH li */
  /*font-size: 12px;
  font-weight: bold;*/
  color: #146A83;
  display: block;
  outline: 0;
  text-decoration: none;
}
.menuH a:hover {
  color: #FFE1A5;
}

.menuH a.pressed {
  color: #FFE1A5;
  background-color: #146A83;
}

.menuH a.arrow {
  background: url("/img/arrow.gif") no-repeat right center;
}
.menuH ul a.arrow {
  background: url("/img/right.gif") no-repeat 97% center;
}

/*for the top-level separators*/
.menuH li.separator {
  font-size:0;
  overflow:hidden;
  border-left:1px solid #F7F7F7;
  border-right:1px solid #BBBBBB;
}

/*######sub level###########*/

ul.menuH ul {
  width:200px;
  position: absolute;
  left: -9999px;
  border: 1px solid #DDD;
  border-top: 0;
  background: #fff3dd;
  text-align: left;
  list-style: none; margin: 0;
  /*Following 1px(padding-right) will determine how much it is overlapped by the sub-sub-menu */
  padding: 0 1px 10px 0;
  box-sizing:content-box;
}

.menuH li li {
  float: none;
  white-space:nowrap;
  height: 26px;
}
.menuH li li:hover, .menuH li li.onhover {
  background:#84B1BE;
}
.menuH ul a {
  /*padding: 0 20px;*/
  padding: 0 20px;
  line-height: 26px;
  font-size: 0.9em;
  font-weight: normal;
  color: #0066CC;
  text-align: left;
}

.menuH ul a:hover {
  /*color: #146A83;*/
  color: #FFE1A5;
}

.menuH li:hover ul, .menuH li.onhover ul {
  left: -1px;/*Use this property to change offset of the dropdown*/
  top: auto;
}

.menuH li:hover .dropToLeft, .menuH li.onhover .dropToLeft {
  left: auto;
  right: -1px;
  top: auto;
}
.menuH ul ul {
  border-top: 1px solid #DDD;
}

.menuH li:hover ul ul, .menuH li:hover ul ul ul, .menuH li:hover ul ul ul ul,
.menuH li.onhover ul ul, .menuH li.onhover ul ul ul, .menuH li.onhover ul ul ul ul {
  left: -9999px;
  top:0;
}

.menuH li li:hover ul, .menuH li li li:hover ul, .menuH li li li li:hover ul,
.menuH li li.onhover ul, .menuH li li li.onhover ul, .menuH li li li li.onhover ul {
  left: 200px;
}

/*####### special effects ##########*/
.decor1 {
  -moz-border-radius: 3px; /* Firefox */
  -webkit-border-radius: 3px; /* Safari and Chrome */
  border-radius: 3px; /* Opera 10.5+, future browsers, and now also our behavior htc file */

  -moz-box-shadow: 0px 1px 4px #eee; /* Firefox */
  -webkit-box-shadow: 0px 1px 4px #eee; /* Safari and Chrome */
  box-shadow: 0px 1px 4px #eee; /* Opera 10.5+, future browsers and IE6+ using our behavior htc file */

}
.menuH ul {
  -moz-border-radius: 0px 0px 4px 4px;
  -webkit-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;

  -moz-box-shadow: 0px 6px 6px #CCC;
  -webkit-box-shadow: 0px 6px 6px #CCC;
  box-shadow: 0px 6px 6px #CCC;

  /*for older IE browsers, the htc file fix will disable this feature when box-shadow was also applied.*/
  /*filter:alpha(opacity=90);
  opacity: 0.90;*/

  /* Gradient background */
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
}


.menuLeft {
  float: left;
}
/*Used to align a top-level item to the right*/
.menuRight {
  float: right;
  /*margin-right: 0px;*/
}

@media screen and (max-width: 767px) {
  .hiddenMobile {
    display: none;
  }
}