html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
	font-family: "'Yanone Kaffeesatz'";
	font-style: normal;
	font-weight: 400;
	src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLbvy90DtE_Pg_qiF9bHvTzw.ttf) format('truetype');
}

#wrap {

}

body {
	text-align: center;
	background: WHITE;
	background-attachment: fixed;
	font-family: 'Yanone Kaffeesatz', sans-serif;
}

.blur {
	filter: url(blur.svg#blur);
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
}
h1 {
	font-size: 26px;
	padding: 9px 12px;
	color: #fff;
	text-align: left;
	border-bottom: solid 1px #fff;
	text-transform: uppercase;
}
h2 {
	font-size: 20px;
	padding: 9px 12px;
	color: #fff;
	vertical-align: middle;
	text-align: left;
	text-transform: uppercase;
}

h3 {
	font-size: 18px;
	padding: 9px 0px 0px 12px;
	color: #fff;
	vertical-align: middle;
	text-align: left;
}
p {
	font-size: 18px;
	padding: 9px 12px;
	color: #fff;
	text-align: left;
	clear: right;
}
li {
	font-size: 18px;
	padding: 0px 22px;
	color: #fff;
	text-align: left;
	list-style: none;
}
#mainpage li {
	padding-bottom: 6px;
}
#mainpage li li {
	padding-bottom: 1px;
}
.wrapper {
	width: 100%;
}

#header {
	padding-top: 24px;
	height: 60px;
	background:rgba(0,0,0,0.8);
	top: 0px;
	left: 0px;
	position: fixed;
}


#title {
	text-align: left;
	position: absolute;
	top: 0px;
	margin-left: 20px;
	margin-top: 20px;
	max-width: 350px;
	width: 100%;
}
#title h1 {
	width: 50%;
	border-bottom: none;
	margin-top: -3px;
}
#title a {
	text-decoration: none;
}





#nav {
	float: right;
	margin-right: 20px;
	clear: both;
}
#nav ul {
	padding: 0;
	margin: 0;
	vertical-align: middle;
	list-style: none;
	position: relative;
	display: inline-table;
}
#nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
#nav ul li {
	padding: 0;
	margin: 0;
	float: left;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	color: #fff;
	list-style-type: none;
	text-transform: uppercase;
	display: inline;
	font-size: 22px;
	-webkit-font-smoothing: antialiased;
	position: relative;
}
#nav ul li a {
	display: block; 
	padding: 5px 20px;
	color: #fff;
	text-decoration: none;
}
#nav ul li:hover > ul {
		display: block;
}
#nav ul ul {
	display: none;
	padding: 0px 0px 12px 0px;
	background:rgba(0,0,0,0.8);
	border-radius: 3px 3px 6px 6px;
	position: absolute;
}
#nav ul ul li {
	float: none; 
	position: relative;
	cursor: pointer;
	display: block;
	white-space: nowrap;
}
#nav ul li:hover {
	color: #999;
	text-decoration: underline;
}
#nav ul li a:hover {
	color: #999;
	text-decoration: underline;
}
#nav ul img {
	margin-top: -10px;
	height: 32px;
}
#nav ul li:hover img {
	opacity: 0.4;
    filter: alpha(opacity=40);
}

#navbutton {
	display: none;
	float: right;
	margin-right: 20px;
	clear: both;
}
#navbutton ul {
	width: 140px;
	height: 36px;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	list-style: none;
	position: relative;
	display: block;
}
#navbutton ul li:hover > ul, #navbutton ul li.hover_effect > ul {
	display: block;
}
.hover {
	-webkit-user-select: none;
	-webkit-touch-callout: none;        
}
#navbutton ul li img {
	margin-top: 6px;
	margin-left: 84px;
	height: 24px;
}
#navbutton ul ul {
	padding: 3px;
	display: none;
	width: 140px;
	height: 309px;
	background:rgba(0,0,0,0.8);
	border-radius: 3px 3px 6px 6px;
	position: absolute;
	right: 0px;
}
#navbutton ul ul li {
	padding: 0 0 9px 6px;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	color: #fff;
	list-style-type: none;
	text-transform: uppercase;
	display: block;
	font-size: 22px;
	-webkit-font-smoothing: antialiased;
}
#navbotton a {
	color: #fff;
	text-decoration: none;
}
#navbutton ul a:hover {
	color: #999;
	text-decoration: underline;
}

#navbutton ul ul img {
	margin: 0;
	padding: 0;
	height: 32px;
}
#navbutton ul ul li:hover img {
	opacity: 0.4;
    filter: alpha(opacity=40);
}





a {
	color: #fff;
	text-decoration: underline;
}
a:hover {
	color: #999;
	text-decoration: underline;
}


#mainpage {
	text-align: center;
	width: 100%;
	height: 100%;
}

.mainContent {
	padding: 156px 60px 156px 100px;
}

#intro {
	background:url('images/bg_intro.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #0A274E;
	//border-bottom: solid white 1px;
}
#schedule {
	background:url('images/bg_schedule.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #173560;
	//border-bottom: solid white 1px;
}
#contact {
	background:url('images/bg_contact.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #204272;
	//border-bottom: solid white 1px;
}
#courses {
	background:url('images/bg_courses.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #123D1C;
	//border-bottom: solid white 1px;
}
#tnm103 {
	background:url('images/bg_tnm103.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #1F4B27;
	//border-bottom: solid white 1px;
}
#tnm107 {
	background:url('images/bg_courses.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #1F4B27;
	//border-bottom: solid white 1px;
}
#tnmk30 {
	background:url('images/bg_tnmk30.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #2A5931;
	//border-bottom: solid white 1px;
}
#tngd10 {
	background:url('images/bg_tngd10.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #1f4a27;
	//border-bottom: solid white 1px;
}
#cv {
	background:url('images/bg_cv.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #542105;
	//border-bottom: solid white 1px;
}
#work {
	background:url('images/bg_work.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #662D13;
	//border-bottom: solid white 1px;
}
#education {
	background:url('images/bg_education.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #78371D;
	//border-bottom: solid white 1px;
}
#research {
	background:url('images/bg_research.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #614200;
	//border-bottom: solid white 1px;
}
#publications {
	background:url('images/bg_publications.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #7B5603;
	//border-bottom: solid white 1px;
}
#misc {
	background:url('images/bg_misc.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #513859;
	//border-bottom: solid white 1px;
}
#colorclock {
	background:url('images/bg_colorclock.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #5E4368;
	//border-bottom: solid white 1px;
}
.piccode {
	background:url('images/bg_piccode.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #6C4E76;
	//border-bottom: solid white 1px;
}
.soundcode {
	background:url('images/bg_soundcode.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: scroll;
	overflow: hidden;
	background-color: #795884;
	//border-bottom: solid white 1px;
}
.codestart {
	padding: 156px 60px 0 100px;
}
.codeparts {
	padding: 0 60px 0 100px;
	clear: left;
}
.codeend {
	padding: 0 60px 40px 100px;
	clear: left;
}



.left {
	width: 50%;
	min-width: 420px;
	float: left;
	text-align: left;
}
.right {
	width: 50%;
	min-width: 420px;
	float: right;
	text-align: left;
}
.italic {
	font-style: italic;
}
#hue  {
	background-color: blue;
	width: 100%;
	height: 350px;
}
#activity  {
	background-color: blue;
	width: 100%;
	height: 350px;
}
#makeBoxes  {
	background-color: blue;
	width: 100%;
	height: 350px;
}


img.zoomable {
	border: solid 1px white;
	background-color: transparent;
	box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
	cursor: zoom-in;
	border-radius: 6px;
}

.left img.zoomable {
	float: right;	
	margin: 0px 20px 0px 20px;
	height: 240px;
}
.right img.zoomable {
	float: left;	
	margin: 50px 120px 60px 20px;
	height: 240px;
}

img#zoom {
	height: 240px;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
	z-index: 1;
	border: 2px solid black;
	display: none;
	border-radius: 12px;
	box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.4);
}

iframe { 
	margin: 9px 12px;
	box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
	border-radius: 6px;
	width: 50%;
	min-width: 640px;
	height: 360px;
  display: block;
  background-color: #fff;
}

#scheduleLegend {
	background-color: #fff;
	ox-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
	border-radius: 6px;
	padding: 12px;
}

@media screen and (max-width: 999px) {
	.right {
		float: left;
	}
}
@media screen and (max-width: 520px) {
	.mainContent {
		padding: 156px 80px 40px 10px;
		width: 100%;
	}
	.codestart {
		padding: 156px 60px 0 10px;
	}
	.codeparts {
		padding: 0 60px 0 10px;
	}
	.codeend {
		padding: 0 60px 40px 10px;
	}
	.left {
		min-width: 100%;
	}
	.right {
		min-width: 100%;
	}
}
@media screen and (max-width: 330px) {
	h1 {
		font-size: 20px;
	}
}
@media screen and (max-width: 1100px) {
	#nav ul {
		display: none;
	}
	#navbutton {
		display: block;
	}
	
}
@media screen and (max-height: 30em) {
	#logo {
		position: absolute;
		top: 0px;
		margin-left: 20px;
		margin-top: 12px;
		max-width: 250px;
		width: 100%;
	}
	#header {
		padding-top: 0px;
		background:rgba(0,0,0,0.8);
	}
	#navbutton ul li img {
		padding: 6px 0px 0px 140px;
		height: 22px;
	}
	#header ul {
		margin: 10px 0px 10px 0px;
	}
	#nav ul {
		display: none;
	}
	#navbutton ul ul img {
		padding: 0px 0px 0px 0px;
		height: 22px;
	}
	#navbutton {
		display: block;
	}
}