/* header */
#header { height:49px; overflow: hidden;}
#header .content
{
	height: inherit;
	display: flex;
	padding-bottom: 6px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0px;
}

#header .content #logo { padding: 1px 0; margin-left: 0px; margin-top: 12px; 
                         width:170px;
                         }
a, img, a img { outline: none; border: none; }

#header .content #headerMenu { display: flex; width:80%; margin:0;}
#header .content #nav, #header .content #nav li { margin: 4px 0 0 0; padding: 0; list-style: none; }
#header .content #nav li { float: left; font-size: 1.6em; line-height: 28pt; }
#header .content #dropdown-nav li { width: 150px; line-height: 20pt; font-size: 1.6em; display: block;}
#header .content #nav li a.menu { background-position: right 9px; padding-left: 5px; padding-right: 5px; color:Silver; }
#header .content #dropdown-nav li a.menu  { color:Silver; }
#header .content #nav li a.selected, #header .content #dropdown-nav li a.selected { font-weight: bold; color:Gray; }
#header .content #nav li a:hover, #header .content #dropdown-nav li a:hover { color: #0072c6; }
#header .content #nav li a { margin-left: 0.2em; text-decoration: none; color: #000; }
#header .content #dropdown-nav li a { text-decoration: none; color: #000; }

.ui-page-theme-a a { font-weight: normal !important;}
.ui-page-theme-a a.selected { font-weight: bold !important;}

#header #userInfo { font-weight: bold; line-height: 28pt; font-size:1.4em; float:right; width:20%; margin-top: 12px;}
	#header #userInfo { font-size:1em; line-height: 12pt;}
	#header #userInfoContainer { float: right;}
	#header #userInfo br { display:inline-block;}


@media only screen and (max-width: 1800px) 
{
	#header .content #nav li { font-size: 1.4em;}
	#header .content #headerMenu .dropdown {display: none;}
}

@media only screen and (max-width: 1600px) 
{
	#header .content #nav li { font-size: 1.2em;}
	#header .content #headerMenu .dropdown {display: none;}
}

@media only screen and (max-width: 1400px) 
{
	#header .content #nav li { font-size: 1em;}
	#header .content #headerMenu .dropdown {display: none;}
}

@media only screen and (max-width: 1000px) 
{
	#header .content #nav { display: none;}
	#header .content #headerMenu { display: flex; width:60%;}
	#header .content #headerMenu .dropdown {display: block; left: 12px; z-index:9;}
	#header .content #logo { margin-left: 50px;}
	#header #userInfo { width: 40%;}
	#header #userInfoContainer { float: right;}
}

/*--- Dropdown menu bar ---*/
.dropbtn 
{
    background-color: White;
    color: white;
    font-size: 8px;
    text-align: center;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    white-space: nowrap;
    padding: 0px 0px 0px 0px;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: White;
    opacity: 0.7;
}
.dropdown 
{
    position: absolute;
    display:none;
    left:12px;
    top:35px;
    width: 38px;
}
.dropdown-content {
    display: none;
    position: absolute;
    border: 1px solid White;
    background-color: white;
    min-width: 150px;
    z-index: 10;
    border:1px solid #eeeeee;
}
.dropdown-content a {
    color: black;
    padding: 4px;
    text-decoration: none;
    border: 0px solid White;
    display: block;
    color:Silver;
    font-size:16px;
}
.dropdown-content a:hover { background-color: #f1f1f1; color: #0072c6;}
.dropdown:hover .dropbtn { background-color: white;}
.headershow { display:block;}