@font-face 
{
	font-family: Open Sans;
	src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
	font-weight: 400;
	font-style: normal;
}

/* remove the list style */
#menuBar 
{
	margin:0; 
    /*margin-left:300px;
   margin-left:200px;*/
	padding:0; 
	list-style:none;
}	
	
	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#menuBar li 
    {
		display:block; 
		float:left; 
		/*margin-right:50px;*/
		/*margin-right:58px;*/
		margin-right:78px;
		position:relative;
        background-color: #1570A5;
		z-index:500; 
        margin-top:10px;
 	}
		
	/* this is the parent menu */
	#menuBar li a 
    {
		display:block; 
		/*padding:8px 5px 0 5px;*/ 
		height:23px; 
		text-decoration:none; 
		text-align:center; 
		color:white;
 		font-family: "Segoe UI SemiLight", "Open Sans", Verdana, Arial, Helvetica, sans-serif; 
       font-weight: 100;
        font-size: 10pt;
        letter-spacing: 0.02em;
        margin-top: 8px;
	}

	#menuBar li a:hover 
    {
		color:#fff;
	}

	#menuBar li a:active 
    {
		background-color:#1570A5;
	}

		
	/* you can make a different style for default selected value */
	#menuBar a.selected
    {
		color:white;
	}
	
	/* submenu, it's hidden by default */
	#menuBar ul 
    {
		display:none; 
		position:absolute; 
		left:0px; 
		margin:0; 
		padding:0; 
		list-style:none;
		width:150px; 
		border:1px solid #1570A5;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 	}
	
	#menuBar ul li 
    {
		width:150px; 
		float:left; 
        margin:0;
        background-color:white;
	}
		
	/* display block will make the link fill the whole area of LI */
	#menuBar ul a 
    {
        font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 18px;
        font-size: 14px;
		color:#2a2a2a;
        background-color:white;
		width:150px; 
        margin-top:2px;
        margin-bottom:2px;
        padding:0;
        text-align:left ;
        text-indent:15px;
 	}

	#menuBar ul.broadMenu
    {
		display:none; 
		position:absolute; 
		left:0px; 
		margin:0; 
		padding:0; 
		list-style:none;
		width:190px; 
		border:1px solid #1570A5;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 	}
	
	#menuBar ul.broadMenu li
    {
		width:190px; 
		float:left; 
        margin:0;
        background-color:white;
	}
		
	/* display block will make the link fill the whole area of LI */
	#menuBar ul.broadMenu a
    {
        font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 18px;
        font-size: 14px;
		color:#2a2a2a;
        background-color:white;
		width:190px; 
        margin-top:2px;
        margin-bottom:2px;
        padding:0;
        text-align:left ;
        text-indent:15px;
 	}
		
	#menuBar ul a:hover 
    {
		/*text-decoration:underline;*/	
        background-color:#1570A5;
		color:white;
	}

	/* fix ie6 small issue */
	/* we should always avoid using hack like this */
	/* should put it into separate file : ) */
	*html #menuBar ul 
    {
		margin:0 0 0 -2px;
	}