html{
	width:100%;
	height:100vh;
	padding: 0px;
	margin: 0px;
}

body {
	background-color: #336699;
	padding: 0px;
	margin: 0px;
	font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
	text-align: left;
	color:#303030;
	width:100%;
	height:100vh;
	max-height: 100%;
	background: url('../images/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	font-size: 16px;
}

#page {
	min-height:100%;
	position:relative;
}

#floatontop {
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	text-align: right;
	margin-top: 0px;
	margin-bottom: 0px;
}

#blackout {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #000000;
	padding:0px;
	z-index:3;
	opacity:0.7;
}

#floater {
	position:relative;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width:802px;
	height:100%;
	text-align: left;
}

#header-container {
	position:absolute;
	top: 1em;
	right: 1em;
	margin: 0px;
	padding: 0px;
	width:100%;
	min-width:802px;
	max-width:100%;
	font-family: Helvetica, sans-serif;
	color: #FFFFFF;
	z-index:1;
}

#header {
	padding: 0px;
	width:100%;
	min-width:800px;
	max-width:100%;
	font-family: Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;
}

#header p.main {
 	color: #ffffff; 
	font-family: 'Lato', sans-serif; 
	font-size: 3vw; 
	font-weight: 300; 
	line-height: 58px; 
	margin: 0 0 2vw; 
	text-align: right;
	padding-left: 250px;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.6);
}

#header p.submain {
	background: #fe921f; 
	color: #ffffff; 
	display: inline-block; 
	position: absolute;
	right: 2em;
	font-family: 'Lato', sans-serif; 
	font-size: 1.15vw; 
	font-weight: bold; 
	line-height: 15px; 
	letter-spacing: 1px; 
	margin: -1vw 0 30px; 
	padding: 1vw 1.5vw 1vw; 
	text-transform: uppercase;

	text-align: right;
}

#menu-container {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	position: fixed;
	float:left;
	display:block;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	z-index:3;
	color: #233f5f;
	font-size: 14.4pt;
}


#menu {
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	color: #ffffff;
	overflow: visible;
	font-family: 'Lato', sans-serif; 
}


#menu ul
{
	margin-top: 5px;
	padding: 0px 0px;
	list-style-type: none;
	line-height: 160%;
	overflow:visible;
}



#menu li {
	min-width:180px;
	cursor:default;
	height:1.8em;
	min-height:1.8em;
	max-height:1.8em;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8)
}


#menu li.menuItem {
	position:absolute;
	z-index: 3;
}

#menu li.a { top: 3.125vh; }
#menu li.b { top: 9.587vh; }
#menu li.c { top:16.048vh; }
#menu li.d { top:22.51vh; }
#menu li.e { top:28.971vh; }
#menu li.f { top:35.433vh; }
#menu li.g { top:41.894vh; }
#menu li.h { top:48.356vh; }
#menu li.i { top:54.817vh; }
#menu li.j { top:61.279vh; }
#menu li.k { top:74.202vh; }
#menu li.m { top:80.663vh; }
#menu li.n { top:87.125vh; }

#menu li.menuItem div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#menu li.menuItem:hover {
	overflow: visible;
	display: block;
	width:auto;
	min-width:100%;
	height:1.8em;
	min-height:1.8em;
	max-height:1.8em;
	cursor:pointer !important;
}



#menu li.menuItem:hover div {
	position: absolute;
	background: #fe921f; 
	display: block;
	color: #ffffff; 
	width:auto;
	min-width:100%;
	height:1.8em;
	min-height:1.8em;
	max-height:1.8em;
	cursor:pointer !important;
	z-index:2;
}


#footer-container {
	position:fixed;
	bottom:0;
	margin-top: auto;
	text-align: left;
	padding: 10px 0px 10px 0px;
	color: #000000;
	font-size: 11pt;
	z-index: 1;
}


#footer {
	position:relative;
	margin-top: auto;
	padding: 0px;
	color: #ffffff;
	z-index: 1;
	font-family: 'Lato', sans-serif; 
}


#footer p {
	font-size: 0.8em;
	text-align: center;
}

#footer a {
	color:inherit;
}

#content-container {
	z-index: 9;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	margin-top: 122px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 12px 0px 92px;
	height:auto;
	text-align: justify;
	float: left;
	position: relative;
	background-color: rgba(0,0,16,0.75);
	border-radius: 12px;
	overflow-x: visible;
	overflow-y: auto;
}


#announcement {
        background-color: rgba(192,0,0,0.9);
	color: #ffffff;
	font-family: 'Lato', sans-serif; 
	padding: 10px 30px 10px 30px; 
	font-size: 1.15vw;
	font-weight: bold;
}

#announcement a {
	color: #ff9999;
}


.content {
	color: #ffffff;
	font-family: 'Lato', sans-serif; 
	display: none;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 10px 30px 10px 30px;
	height:100%;
	text-align: justify;
}


.content.show {display: block;}

.content h3 {
	font-family: 'Bitstream Charter', Georgia, Times, 'Times New Roman', serif;
	color: #55AAFF;
	font-weight: bold;
	margin: 1em 0px 0.2em;
	padding: 0px 10px 5px;
	border-bottom: 1px solid #cccccc;
}

.content h2 {
	font-family: 'Lato', sans-serif; 
	color: #FFFFFF;
	text-align: right;
	font-size: 2vw;
	font-weight: 300;
	margin: 1em auto 0.2em;
	padding: 0px 10px 5px;
}

.content h1 {
	font-family: 'Bitstream Charter', Georgia, Times, 'Times New Roman', serif;
	color: #336699;
	text-align: center;
	font-size: 2.0em;
	font-weight: bold;
	margin: 1em auto 0.2em;
	padding: 0px 10px 5px;
	border-bottom: 1px solid #cccccc;
}

.content p {
	margin: 0.5em 0em 0em;
	padding: 0px;
}

.content a {
	color:#55AAFF;
}

.content a:visited {
	color:#224466;
}

.content ul
{
	margin-top: 20px;
	padding: 0px 0px 0px 20px;
	margin-left: 0px;
	overflow:visible;
}

.content li {
	margin-left:0px;
	padding-left:0px;
}

input {
	font-size: 1.12vw;
}

.code {
	font-family: monospace;
}

table {
	text-align: left;
}

table.syllabus {
	margin-top: 15px;
	border-collapse: collapse;
	width: 100%;
}

table.syllabus thead {
	padding: 0px;
}

table.syllabus tbody {
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1px;
}

table.syllabus th, table.syllabus td {
	padding-right: 3px;
}

table.light tr:hover {
	color: #55aaff;
}

table.light tbody:hover td[rowspan] {
	color: #55aaff;
}

td.help {
	cursor: help;
}




@media (max-width: 1024px) {
 body {width: 1024px;}

 #menu-container {width: 210px;}
 #menu {font-size: 16.8px;}
 #menu ul {margin-left: 20px;}
 #menu li {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover div {margin-left: -20px; padding-left: 20px;}
 #footer-container {width: 230px; max-width: 300px;}
 #footer {max-width: 300px;}
 #content-container {width: 774px; min-width:774px; margin-left: 250px;}
 .content {width: 711px; min-width:711px; font-size: 14px;}
 #header p.main {font-size: 36px; margin-bottom: 24px;}
 #header p.submain {margin-top: -12px; 	padding: 12px 18px 12px; font-size: 14px; }
 #announcement {font-size: 15px;}
 .content h2 {font-size: 24px;}
 input {font-size: 13px;}

}





@media (min-width: 1025px) {


/* version 1  
 #menu-container {width: 18vw;}
 #menu {font-size: 1.6vh;}
 #menu ul {margin-left: 20px;}
 #menu li {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover div {margin-left: -20px; padding-left: 20px;}
 #footer-container {width: 18vw; max-width: 300px;}
 #footer {max-width: 300px;}
 #content-container {width:802px; min-width:802px; margin-left: calc(20vw + 13px);}
 .content {width:739px; min-width:739px; font-size: 1.5em;}
*/

 #menu-container {width: 20.5vw; max-width: 25%;}
 #menu {font-size: 2.24vh;}
 #menu ul {margin-left: 20px;}
 #menu li {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover {margin-left: -20px; padding-left: 20px;}
 #menu li.menuItem:hover div {margin-left: -20px; padding-left: 20px;}
 #footer-container {width: 210px; max-width: 300px;}
 #footer {max-width: 300px;}
 #content-container {width: 967px; min-width:774px; max-width: 75%; margin-left: calc(20.5vw + 40px);}
 .content {min-width:711px; font-size: 1.5em;}
 #header p.main {font-size: 36px; margin-bottom: 24px;}
 #header p.submain {margin-top: -12px; 	padding: 12px 18px 12px; font-size: 14px; }
 #announcement {font-size: 16px;}
 .content h2 {font-size: 24px;}
 table {white-space: nowrap;}
 input {font-size: 13px;}



}

@media (max-height: 750px) {
 #footer-container {display: none;}
 #menu {font-size: 16.8px;} 
}

@media (min-height: 1125px) {
 #menu {font-size: 25.2px;}
}