@charset "utf-8";

/* CSS Document */
body {
    font-family:"Noto Sans", sans-serif;
    font-size:18px;
    text-align: center;
    background-color: #202020;
    color: #c0c0c0;
}
h1 {
    font-size:36px;
    font-weight:bold;
}
.footer {
    font-size:12px;
}
.header {
    text-align:center;
    font-weight:bold;
    font-size:36px;
}
.subheader {
    text-align:center;
    font-weight:bold;
    font-size:28px;
}
div.content {
    width: 65%;
    margin-left:auto;
    margin-right:auto;
}
div.container {
    width: 100%;
    min-height:84px;
}

/* NAVIGATION BAR */
#navbar {
    float:left;
    width: 100%;
    min-width:450px;
    height:37px;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #333333;
    border-bottom:5px inset #454545;
}
#navbar ul {
	display: inline-block;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
#navbar li {
    float:left;
    position: relative;
}

#navbar a {
    display:block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #0079fa;
	border-bottom:5px inset #454545; /* Need this here to fix dropdown misbehavior */
	text-align:left;
	
    /* Prevent wrapping */
	white-space: nowrap; /* Prevent wrapping of text */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
}
#navbar a:hover {
    color:#c7c7c7;
    border-bottom:5px inset #0085ff;
}

/* NAVIGATION BAR: Dropdown Menu Styles */
#navbar .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333333;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
#navbar .dropdown a {
    white-space: nowrap;
    color: #0079fa;
    padding: 8px 15px;
	border-bottom:0px;
}
#navbar .dropdown ul {
}
#navbar .dropdown li {
	/* Fix alignment for long text */
	/* setting a minimum width for dropdown block. Can also explicitely set "16em" */ 
	width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}
#navbar .dropdown a:hover {
    color: #c7c7c7;
}
#navbar li:hover .dropdown {
    display: block;
}