/* CSS Newmenu style */

    #menubar {
    position: relative;
    width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 55px;
	white-space: nowrap; /* dont wrap first line of menu */
	}

   ul {
  		/*text-transform: uppercase;*/
  		text-align: left;
  		display: inline;
  		margin: 0;
  		padding: 0px 20px 0px 0px;
  		list-style: none;
  		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
	
	ul li {
  		font: bold 13px/100% Trebuchet MS, Helvetica, sans-serif;
        line-height: 1; /* height of items */
  		display: inline-block;
  		margin-right: -20px; /* padding between first list */
  		position: relative;
  		padding: 13px 20px;
  		background: #bf4143;
  		background: -moz-linear-gradient(top,  #bf4143 0%, #a13742 100%);
  		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf4143), color-stop(100%,#a13742));
  		background: -webkit-linear-gradient(top,  #bf4143 0%,#a13742 100%);
  		background: -o-linear-gradient(top,  #bf4143 0%,#a13742 100%);
  		background: -ms-linear-gradient(top,  #bf4143 0%,#a13742 100%);
  		background: linear-gradient(top,  #bf4143 0%,#a13742 100%);
  		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf4143', endColorstr='#a13742',GradientType=0 );
        color: white;
  		cursor: pointer;
/*  	-webkit-transition: all 0.2s; 
  		-moz-transition: all 0.2s;
  		-ms-transition: all 0.2s;
  		-o-transition: all 0.2s;
  		transition: all 0.2s; */ /* What the point of this transition? */
		white-space: normal; /* wrap all next lines of menu */
  	}

	ul li:hover {
      background: #3f3f3f;
  		color: #f7f7f7;
	}

	
/*submenu css starting-------------*/
	li ul{
		display: none;
		/*background-color: #f7f7f7;*/
		position: absolute;
		margin-top: 13px;
		margin-left: -20px;
		padding: 0px 0px 0px 0px;		
	}
	
	li ul a li {
		width: 12em;
		/*border-bottom: 1px solid #e7e7e7;*/
	}
	
	li:hover ul{
		display: block;
	}
	
	li ul a li:hover{
		width: 12em;
	}
	
	/*----------------------------------*/
	li ul li ul li {	
		display: none;
		margin-left: 0px;
		position: relative;	
	}
	
	li ul li:hover ul li { /* */
		display: block;
        margin-top: 0px;
        /*height: 19px;*/
		line-height: 1.5; /* height of sub-items */
	}

	ul ul ul {
  	left: 100%;
  	top: 0;
	margin-left: auto;
	}
	
	
	li ul li {
	width: 12em;
	/* color: blue;*/
	}
	
     ul li ul li ul li {
     top: -13px;
	 padding: 10px 10px 10px 10px;
	}
	
	---	
	
	.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 320px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 0px 0px 10px;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    top: 40px;
    /* Position the tooltip */
    left: 0%;
	/*  alignment-adjust:*/
}