/****************************/
/*          Header          */
/****************************/
#header {
	width: 100%;
	height: 3em;
	margin: inherit;
	padding: 0;
}

/********************************************************************/
/* MENU
/********************************************************************/
#menu {
	position: fixed;
    float: left;
    width: inherit;
    height: 3em;
    background-color: #000;
    font-size: 15px;
    z-index: 1001;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: block;
    margin: 0;
	padding: 0;
	float: left;
	position:relative;
}

#menu a {
	display: block;
    padding: 1.0em 1.0em; /* Add double this value to "height" to get total height */
	margin: 0px 0px;
	float: left;
	height: 1.0em;
	min-width: 5.0em;
    width: auto;
	text-align: center;
	text-decoration: none;
	/* text-transform: uppercase; */
	/* font-size: 16px; */
	color: #fff;
}

#menu a.arrow {
    min-width: 0;
    width: 2.0em;
}
#menu a:hover {
    text-decoration: underline;
    background-color: #000;
}

#menu li .large_text {
    display: block;
    font-size: 2.0em;
    font-weight: normal;
    height: 1.00em;
    margin-top: -1;
    padding: 0.125em 0.2em;
    color: #fbfbfb;
}

#menu li.logo {
    padding: 0;
    margin: 0;
}

#menu li.logo a {
    display: inline;
    padding: 0; /* Add to double this value to "height" to get total height */
    margin: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: none;
}

#menu li.logo a:hover {
    text-decoration: none;
    color: #fff;
    background-color: rgba(0,0,0,0); /* Make the background transparent*/
}

#menu li.logo a img {
    margin: 0;
    padding: 0.5em 0.5em 0 0.5em;
    height: 2.0em;
    width: auto;

    transition:         opacity 1s ease-in-out, width 1s, height 1s, padding 1s;
    -moz-transition:    opacity 1s ease-in-out, width 1s, height 1s, padding 1s;
    -webkit-transition: opacity 1s ease-in-out, width 1s, height 1s, padding 1s;
}

#menu li.logo a img:hover {
    opacity: 0.7;
    height: 2.5em;
    padding: 0.25em 0.5em 0 0.5em;
}

#menu .right {
    float: right;
}

/*1st Dropdown*/
#menu ul li ul{
    display: block;
    padding: 0;
    margin: 0;
    width: auto;
    background:#3b3b3b;
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
/*1st Dropdown list item*/
#menu ul li ul li{
    display: block;
    width: 85%; /* I'm not sure why but must be set to 85% to exactly equal containing ul tag */
    margin: 0em;
    padding: 0em;
    padding-top:0.1em; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
/*1st Dropdown list anchor*/
#menu ul li ul li a{
    width: 100%;
    min-width:10.0em;
    padding-left:1.0em;
    padding-right:1.0em;
    text-align:left; 	/*Cause the text to be left aligned*/
    white-space:nowrap; 	/* Stop text wrapping and creating multi-line dropdown items */
}

/*2nd Dropdown*/
#menu ul li ul li ul{
    display: none;
    padding: 0em;
    margin: 0em;
    width: auto;
    list-style:none;
}

#menu ul li:hover ul{ /* Display the dropdown on hover */
    left:0px; /* Bring back on-screen when needed */
    top: 2.8em;
}

/*Show second level*/
#menu ul li ul li:hover ul{ /* Display the dropdown on hover */
    left:12em;
    display:block;
    position:absolute; /* Bring back on-screen when needed */
}

#menu ul li:hover a { /* This creates a persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    /* background:#000; */
    text-decoration:underline;
}
#menu ul li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    /* background:#3b3b3b; */
    text-decoration:none;
}
#menu ul li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#3b3b3b;
    text-decoration:underline;
}

#menu .search-form {
    display: block;
    float: right;
    margin: 0;
    padding: 0;
}

#menu .search-form label, 
#menu .search-form select, 
#menu .search-form input[type='text'], 
#menu .search-form input[type='submit'] {
    display: inline-block;
    margin: 0.3em 0.1em;
    padding: 0.3em 0.5em;
    color: #333;
    font-size: 20px;
    height: 1.0em;
    /*  'box-sizing' & 'vertical-align' properties are needed to force 
        input type="submit" to behave the same as other input types */
    box-sizing: content-box;
    vertical-align: top;
}
#menu .search-form input[type='text'] {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: normal;
    text-align: left;
    min-width: 15em;
    border-radius: 0.3em;
    border: 1px solid #666;
}
#menu .search-form select {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: normal;
    text-align: left;
    border-radius: 0.3em;
    border: 1px solid #666;
}
#menu .search-form input[type='submit'] {
    margin-right: 1.0em;
    min-width: 5em;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-weight: bold;
    padding: 0.1em 0.3em 0.5em 0.3em;
    text-align: center;
    color: #111;
    background: #4ad;
    border-radius: 0.2em;
    border: 1px solid #4ad;
    transition: 0.2s;
}
#menu .search-form div {
    background: #fff;
    display: inline-block;
    margin: .5em;
    padding: 0;
}
#menu .search-form input[type=submit]:hover {
    color: #333;
    margin: 0.25em 0.92em 0.20em 0.05em;
    padding: 0.18em 0.35em 0.58em 0.35em;
    background: #6be;
    border-radius: 0.2em;
    border: 1px solid #6be;
}