@font-face {
    font-family: 'HammerThinRegular';
    src: url('/fonts/hammrt-webfont.eot');
    src: url('/fonts/hammrt-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/hammrt-webfont.woff') format('woff'),
         url('/fonts/hammrt-webfont.ttf') format('truetype'),
         url('/fonts/hammrt-webfont.svg#HammerThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body {
	font-family: Trebuchet, Arial, Helvetica, sans-serif; font-size: 12px; height:100%; width:100%; margin:0;padding:0; overflow:hidden; }

a:link { color: #8bb2f5; text-decoration: none; font-weight:bold; }
a:link:hover { color: #000; text-decoration: underline;  font-weight:bold;}
a:visited { color: #8bb2f5; text-decoration: none;  font-weight:bold;}
a:visited:hover { color: #000; text-decoration: underline;  font-weight:bold;}

#preloaded-images { display:none;}

/******* THE PANELS - MAIN *******/
	#wrapper {
		width:100%;
		height:100%;
		position:absolute;
		top:0;left:0;
		background-color:#000;
		overflow:hidden;
	}

	#mask {
		width:500%;
		height:300%;
		background-color:#000;
	}

	.item {
		width:20%;
		height:100%;
		float:left;
		background: #FFF url(/images/bg.gif) -775px -500px no-repeat;
	}

	.content {
		width:300%;
		height:100%;
		top:0;
		margin:0 auto;
		background-color:#000;
		position:relative;
	}

	.selected { background:#000; font-weight:700;}

	.clear { clear:both; }
	
/******* END THE PANELS - MAIN *******/


/******* MAIN CONTENT BG *******/
/******* content > copy > title > misc. *******/

	.bioContent { background: #FFF url(/images/bg.gif) -1875px -500px no-repeat; }
	.homeContent { background: #FFF url(/images/bg.gif) -1725px -1861px no-repeat; }
	.cogContent { background: #FFF url(/images/bg.gif)  -525px -1561px no-repeat; }
	.tnjContent { background: #FFF url(/images/bg.gif) -3025px -1561px no-repeat; }
	.emContent { background: #FFF url(/images/bg.gif) -1800px -2561px no-repeat; }
	
/******* END MAIN CONTENT BG *******/

/******* COPY AREA *******/

	/** main settings **/
	
	.bioCopy, .homeCopy, .cogCopy,
	.tnjCopy, .emCopy {
		border: 1px solid #000;
		background: #FFF;
		display: block;
		float:left;
		padding: 10px;
		position:relative;
		text-align: justify;		
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}

	.bioCopy {
		height: 450px;
		left: 450px;
		top: 25px;
		width: 250px;
	}

	.homeCopy {
		height: 400px;
		left: 50px;
		top: 50px;
		width: 730px;
	}

	.cogCopy {
		height: 300px;
		left: 225px;
		top: 60px;
		width: 400px;
	}

	.tnjCopy {
		left: 150px;
		height: 275px;
		top: 75px;
		width: 518px;
		text-align: left;
	}

	.emCopy {
		left: 90px;
		height: 200px;
		top: 70px;
		width: 450px;
	}

/******* END COPY AREA *******/

/******* SECTION/PAGE TITLES *******/

	.bioTitle {
		width: 58px;
		display:block;
		position: relative;
		top:425px;
		left:175px;
	}


	.homeTitle {
		width: 231px;
		display:block;
		position: relative;
		top:25px;
		left:50px;
	}

	.cogTitle {
		width: 58px;
		display:block;
		position: relative;
		top:60px;
		left:475px;
	}

	.emTitle {
		width: 132px;
		display:block;
		position: relative;
		top:450px;
		left:650px;
	}

/******* END SECTION/PAGE TITLE *******/

/******* HOMEPAGE STYLINGS *******/

	.homeBody { display:inline-block; height: 350px; width: 380px; font-size: 13px; font-weight:bold; line-height: 1.7em; padding-left: 20px;}
	.homeBody a:link, .homeBody a:visited { color: #60a400; text-decoration: none; font-weight:bold; }
	.homeBody a:link:hover, .homeBody a:visited:hover { color: #000; text-decoration: underline;  font-weight:bold;}
	.homeBody img { float:left; padding: 20px 20px 0 0;}

	.homeRight {
		font-size: 13px;
		font-weight:bold;
		line-height: 1.7em;
		display:inline-block;
		float: right;
		padding: 0 10px;
		position: relative;
		right: 20px;
		width: 290px;
		z-index: 1;
	}

	.homeRight h2, .homeBody h2 {
		font-family: HammerThinRegular, Trebuchet, Arial, Helvetica, sans-serif;
		font-size: 24px;
		/*font-weight: bold;*/
		color: #005af5;
		line-height: 1.5em;
		text-transform: lowercase;
		z-index: 1;
		padding: 0; margin: 5px 0px;
	}

/******* END HOMEPAGE STYLINGS *******/

/******* MISCELLANEOUS STYLES *******/
	
	.theCopyright{
		color: #777;
		display: block;
		font-size: 9px;
		position: relative;
		text-align: center;
		width: 100%;
		padding: 10px 0px;
	}
	
	.cogNano {
		display: block;
		float: left;
		position: relative;
		left: 200px;
	}
	
	.tnjHeader { display: block; height: 98px;}
	.tnjLogo { display: block; float: right; position: relative; }

/******* THE LEGEND *******/

	.toggler { width: 375px; height: 340px; font-size:9px;}
	.theLegend { background: url(/images/legendBG.png) top center no-repeat;}
	.theClose { position: absolute; bottom: 80px; width: 316px; text-align: center; z-index: 5000;}
	#button { text-decoration: none; }
	#effect { color: #fff; width: 314px; height: 316px; padding: 0.4em; position: absolute; top:0; left: 750px; }
	#effect #legendArrows { width: 154px; height: 154px; text-align: center; display: block; position: relative; top: 30px; right: 40px; z-index: 1; border: 0px solid #fff; float: right;}
	#effect #theKey { display: block; left: 40px; top: 20px; width: 109px; z-index: 500; font-family: Arial, Helvetica, sans-serif; font-size: 8px; text-transform: uppercase; border: 0px solid #fff; position: relative;float: left;}

	.theUp {
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
		position: relative;
		top: 9px;
		background: url(/images/l_up.png) 0 0 no-repeat;
	}

	.theLeft {
		display: table-cell;
		width: 52px;
		height: 50px;
		background: url(/images/l_left.png) 0 0 no-repeat;
	}
	.theHome {
		display: table-cell;
		width: 52px;
		height: 50px;
		background: url(/images/l_home.png) 0 0 no-repeat;
	}

	.theRight {
		display: table-cell;
		width: 50px;
		height: 50px;
		background: url(/images/l_right.png) 0 0 no-repeat;
	}

	.theDown {
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
		position: relative;
		bottom: 9px;
		background: url(/images/l_down.png) 0 0 no-repeat;
	}
		.theUp:hover, .theLeft:hover, .theHome:hover, .theRight:hover, .theDown:hover { background-position: 0 -50px; }
		.theUp span, .theLeft span, .theHome span, .theRight span, .theDown span {display: none; }


/******* HELP WINDOW *******/
#cover {
	position:absolute;
	left:0;
	top:0;
	z-index:90000;
	background-color:#000;
	display:none;
}
  
#helpBox .window {
	position:absolute;
	left:0;
	top:0;
	width:440px;
	height:200px;
	display:none;
	z-index:99999;
	padding:20px;
}

#helpBox #dialog {
	border: 1px solid #000;
	font-size: 10px;
	width:375px; 
	height:203px;
	padding:10px;
	background-color:#ffffff;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#helpBox #dialog:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#helpBox #dialog span {
	font-size: 14px;
	font-weight: bold;
	color: #005af5;
	line-height: 1.5;
	text-transform: lowercase;
}

.colLeft {
	display: inline-block;
	float:left;
	padding: 0 20px;
	position: relative;
	width: 100px;
}

@media screen and (max-width: 1024px) {
	#effect {  left: 710px; }
	.bioCopy {left: 440px; }
	.homeBody { width: 360px;}
	.homeCopy {width: 690px;}
	.cogCopy { left: 205px;}
	.cogTitle { left: 465px;}

}