#menu-button {
  display:none;
  /* style it as you like... */
}
x#menu-button:before {
  content:'Menu -';
}
#xmenu-button.collapsed:before {
  content:'Menu +';
}

.my-smart-menu { border: 0px; 
	background: inherit;
	}
.my-smart-menu > li  {
	border: 0;
	border-left: 0;
	xborder-right: 2px solid #071240 ; 
	xborder-top: 2px solid #071240;
	xmargin-right: 2px; 
	margin-top: 5px; 
	margin-bottom: 5px; 
	}
.my-smart-menu > li:last-child  {
	border-right: 0px; 
	}
.my-smart-menu > li  > a {
    xdisplay: table-cell;
	xdisplay: inline-block;
	vertical-align: middle; 
	line-height: 1em;
	text-align: center;
	padding: 3px 17px; 
	xheight: 40px; 
	max-width: 80px; 
	}
.my-smart-menu > li  > a.longer { max-width: 150px; }
.my-smart-menu > li  > a > span {
    display: table-cell;
	vertical-align: middle; 
	height: 30px; 
	text-align: center;
	min-width: 85px; 
}
.my-smart-menu > li  > a:hover { color: #20358B; }
ul.sm a {
    white-space: normal;
}	

.my-smart-menu ul ul { margin-top: -40px !important; font-size: 12px; background-color: #e5e5e5; }
.my-smart-menu ul ul li a { padding-left: 10px !important; }

.my-smart-menu  >li > a.highlighted {
		background:#f5f5f5;
		color:#555;
	}

.my-smart-menu > li  > ul { 
	border: 1px solid #ddd; 
	border-top: 0px; 
	background: #f5f5f5; 
	text-align: left; 
	z-index: 50000;
}
.my-smart-menu > li  > ul  li { border: 0px; }
.my-smart-menu > li  > ul  li  a { font-size: 12px !important; font-weight: bold; text-align: left; }
.my-smart-menu > li  > ul  li  a { padding: 5px 5px; }
.my-smart-menu > li  > ul  li:first-child { padding-top: 15px; }
.my-smart-menu > li  > ul  li:last-child { padding-bottom: 15px; }
	
@media screen and (max-width: 1024px) {
	.my-smart-menu > li > a > span {
		min-width: 50px; 
	}	
	.my-smart-menu > li > a  { padding: 3px 10px; }
}

@media screen and (max-width: 700px) {
  /* show the button on small screens */
  #menu-button {
    display:inline-block;
  }
  /* hide the menu when it has the "collapsed" class set by the script */
  .my-smart-menu:not(.profilebutton).collapsed {
    display:none;
  }
  
  .my-smart-menu:not(.profilebutton) > li  > a  { max-width: 100%; color: #fff !important; }
  .my-smart-menu:not(.profilebutton) > li   { border-top-color: #3F5DD3 !important; }
  .my-smart-menu:not(.profilebutton) > li  > a > span { display: inline; }

}