.box {
	display: block;
	
  float: left;
  height: 40px;
  width: 40px;
  padding: 5px 10px;
  font-size: 15px;
  color: #525252;
  background-color: rgba(255,255,255,0);
  border: none none;
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 99;
  overflow: hidden;
}
.box:hover {
  overflow: visible;
}
/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.box #meta_menu.sf-vertical {
	background-color: rgba(255,255,255,0);
	position: absolute;
	top: 5px;
	left: 50px;
}
.box #meta_menu.sf-vertical:hover {
	border-left: 1px solid #fff;
	border-top: 1px solid #fff; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,0.5);
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.box #meta_menu li h4 {
	padding: .25em 1em;
}
.box #meta_menu.sf-vertical ul {
	left: 100%;
	top: 0;
	background-color: rgba(255,255,255,0);
}
.box #meta_menu.sf-vertical > li {
  float: none;
}
.box #meta_menu.sf-vertical li {
	background-color: rgba(255,255,255,0);
}
.box #meta_menu li a {
  padding: 0.25em 1em;
}
.box #meta_menu.sf-vertical li:hover,
.box #meta_menu.sf-vertical li.sfHover {
	background-color: rgba(182,221,122,0.5);
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** alter arrow directions ***/
.box #meta_menu.sf-vertical.sf-arrows > li > .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-left-color: rgba(255,255,255,.5);
}
.box #meta_menu.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.box #meta_menu.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.box #meta_menu.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
  border-left-color: white;
}
/* This query is applied for landscape ipad, Mobile
*/
@media only screen and (max-width: 767px) {
/* Theme stylesheets
*/
	#m_menu_box {
		width: 0;
		height: 0;
		visibility: hidden;
	}
}