/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	
	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;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	html
	{
		background: #000;
	}

	body
	{
		margin: 0 auto;
		padding: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: .6em;
		line-height: 1.6em;
		color: #fff;
		background: #000;
		overflow(-x): hidden;
		word-wrap: break-word;
	}

	h1, h2, h3
	{
		margin: 0 0 1em 0;
	}
	
	h1
	{
		font-size: 1.4em;
		color: #CCC;
	}
	
	h2
	{
		font-size: 1.1em;
	}
	
	h3
	{
		font-size: .9em;
	}

	fieldset
	{
		margin: 0 0 10px 0;	
	}
	
	legend
	{
		padding: 0 0 2px 0;		
		color: #757575;
		display: block;
	}

	a
	{
		color: #fff;
		outline: 0;
	}
	
	a:hover
	{
		text-decoration: underline;
	}
	
	p
	{
		margin: 0 0 1.2em 0;
	}

	.date
	{
		color: #666;
	}

	.remarks
	{
		font-size: .9em;
	}
		
/* page layout */

	#center
	{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1000px;
		height: 574px;
		margin-top: -287px;
		margin-left: -500px;
	}

	#header
	{
		float: left;
		width: 100%;
		height: 76px;
		border-bottom: 1px solid #FFF;
	}
	
	#content
	{
		float: left;
		width: 100%;
		height: 420px;
	}
	
	#footer
	{
		position: relative;
		z-index: 10000;
		width: 100%;
		height: 76px;
		clear: both;
		border-top: 1px solid #FFF;
	}

/* header */

	#logo
	{
		float: left;
		margin: 22px 0 22px 0;
	}

/* AJAX search */
	
	#search
	{
		float: right;
		padding: 45px 0 0 0;
		width: 161px;
	}
	
	#search img
	{
		float: left;
		margin: 0 3px 0 0;
	}
	
	#search #searchField
	{
		border: 1px solid #4E4E4E;
		background-color: transparent;
		width: 108px;
		height: 14px;
		padding: 2px;
		font-size: 10px;
		float: right;
	}
	
	.searchField_focus
	{
		color: #757575;
	}
	
	.searchField_blur
	{
		color: #4E4E4E;
	}
			
	.searchhidden
	{
		display: none;
	}

	.searchvisible
	{
		visibility: visible;	
	}

	#searchdiv
	{
		position: absolute;
		margin-left: -203px;
		margin-top: 3px; 
		z-index: 100;
		width: 300px;
		padding: 8px;
		text-align: left;
		background-color: #F0F0F0;
		border: 1px solid #000;
		opacity: .95;
		filter: alpha(opacity=95);
		display: none;
	}

	#searchdiv .close
	{
		text-align: right;
	}

	#searchdiv ul
	{
		margin-bottom: 2px;
		border-top: 1px solid #ccc;
		padding: 10px;
	}

	#searchdiv li
	{
		margin-right: 5px;
		padding: 0 0 8px 0;
		line-height: 1.3em;
	}

	#searchdiv a
	{
		text-decoration: none;
		color: #666;
	}

	#searchdiv a:hover
	{
		color: #000;
	}

/* page layout */

	#videocontainer
	{
		width: 980px;
		height: 400px;
		padding: 10px;
	}

	#picture
	{
		z-index: 0;
		position: absolute;
		width: 1000px;
		height: 420px;
		overflow: hidden;
	}
	
	#vignetting, #vignetting_light
	{
		z-index: 2;
		position: absolute;
		width: 100%;
		height: 420px;
	}

	#vignetting
	{
		background: url(../images/layout/vignetting.png) repeat-x;
	}
	
	#vignetting_light
	{
		background: url(../images/layout/vignetting_light.png) repeat-x;
	}

	#page
	{
		z-index: 3;
		position: absolute;
		width: 100%;
	}

	#headline
	{
		position: absolute;
		z-index: 5;
		right: 15px;
		top: 15px;
		text-align: right;
		max-width: 300px;
	}
	
	.headlineSmall
	{
		max-width: 300px;
	}
	
	#headline #title
	{
		float: right;
		padding: 0 0 .4em 0;
	}
	
	#headline #title a
	{
		text-decoration: none;
	}
	
	#headline #title h1
	{
		margin: -.2em 0 0 0;
		font-size: 1.6em;
		line-height: 1.4em;
		padding: .4em;
		display: inline;
		background: url(../images/layout/50_proc_trans.png);
	}
	
	#headline #title h1 a
	{
		color: #d0d0d0;
	}
	
	#headline #more
	{
		float: right;
		clear: both;
		padding: 5px;
		font-size: .85em;
		color: #FF0000;
		background: url(../images/layout/40_proc_trans.png);
		line-height: 1em;
	}
	
	#displayless
	{
		display: none;
	}
	
	#headline #more a
	{
		color: #FF0000;
		text-decoration: none;
	}

	#text, #projectInformation
	{
		float: left;
		height: 420px;
		background: url(../images/layout/30_proc_trans.png);
	}
	
	#projectInformation
	{
		opacity: 0;
		filter: alpha(opacity=0);
	}

	.projectStats, .newsItemOptions
	{
		padding: 0 0 .5em 0;
		font-size: .85em;
	}
	
	.projectStats h1, .newsItemOptions h1
	{
		font-size: .9em;
		font-weight: normal;
		margin: 0;
		color: #666;	
	}
	
	.projectStats p, .newsItemOptions p
	{
		margin: 0 0 .5em 0;
		color: #ccc;
	}
	
	.projectStats a, .newsItemOptions a
	{
		text-decoration: none;	
	}
	
	.projectStats a:hover, .newsItemOptions a:hover
	{
		text-decoration: underline;	
	}

	#textcol_left, #textcol_right, #textcol_single
	{
		float: left;
		width: 250px;
		height: 360px;
		margin: 15px 0 30px 15px;
		padding: 0 15px 0 0;
		overflow: auto;
		font-size: 1.05em;
	}
	
	#textcol_right
	{
		margin: 15px;
	}
	
	#textcol_single
	{
		width: 515px;
		
	}

	#text ul, #projectInformation ul
	{
		margin: 0 0 1em 0;
		padding: 0 0 0 18px;
	}
	
	#text li, #projectInformation li
	{
		list-style: square;
	}

	#filelist li
	{
		list-style: url(../images/layout/pdf.gif);
	}

	#filelist a
	{
		color: #999;
		text-decoration: none;
	}
	
	#filelist a:hover
	{
		color: #FFF;
		text-decoration: underline;
	}

	.hint
	{
		position: absolute;
		z-index: 5;
		margin: -45px 0 0 -390px;
		width: 400px;
		max-height: 2.2em;
		overflow: hidden;
		display: none;
	}

	.hintfloat
	{
		float: right;
		padding: 3px;
		background-image: url(../images/layout/20_proc_trans.png);
	}

	#options
	{
		position: absolute;
		z-index: 4;
		left: 585px;
		top: 395px;
		width: 400px;
		padding: 0 15px 15px 0;
	}

	#options a
	{
		text-decoration: none;
	}

	#options ul
	{
		float: right;
	}

	#options li
	{
		float: left;
		padding: 2px;
		margin: 0 0 0 2px;
		background-image: url(../images/layout/50_proc_trans.png);
	}

/* news page */

	#newsitem_list, #projects_list, #video_list
	{
		float: left;
		height: 370px;
		width: 660px;
		margin: 10px;
		font-size: .9em;
		line-height: 1.2em;
	}
	
	#newsitem_list .pic, #projects_list .pic, #video_list .pic
	{
		width: 150px;
		height: 60px;
		margin-bottom: 10px;
		padding: 3px;
		background-color: #1c1c1c;
		text-align: center;
	}
	
	#newsitem_list a, #projects_list a, #video_list a
	{
		text-decoration: none;
		color: #999;
	}

	#newsitem_list li, #projects_list li, #video_list li
	{
		float: left;
		width: 156px;
		height: 125px;
		margin: 0 3px 3px 0;
		padding: 3px;
		text-align: left;
		overflow: hidden;
	}
	
	#newsitem_list li .date, #projects_list li .date, #video_list .date
	{
		margin-right: 3px;
	}

	#search_list
	{
		float: left;
		width: 500px;
		height: 400px;
		overflow: auto;
		margin: 10px;
		padding: 0 10px 0 0;
	}

	#search_list h1
	{
		color: #FF0000;
	}
	
	#search_list ul
	{
		margin-bottom: 15px;
	}

	#search_list li
	{
		padding: 3px 3px 3px 10px;
		background-image: url(../images/layout/40_proc_trans.png);
	}
	
	#search_list li a
	{
		text-decoration: none;	
	}
	
	#search_list li a:hover
	{
		text-decoration: underline;	
	}
	
	#search_list li .date
	{
		margin-right: 10px;
	}
	
	.extra
	{
		color: #999;
		margin: 0 10px 0 0;
	}

/* login */

	form p
	{
		text-align: right;	
	}

	.field
	{
		border: 1px solid #999;
		color: #999;
		font-size: .9em;
		padding: 3px;
		width: 240px;
		margin-bottom: 5px;
	}
	
	.textfield
	{
		font-size: 1.2em;
		height: 100px;
	}
	
	.error
	{
		color: #FF0000;
		font-weight: bold;
	}
	
/* footer */

	#footer
	{
		font-size: .9em;
		letter-spacing: .5em;
	}

	#footer a
	{
		text-decoration: none;
		color: #fff;
	}

	.mainmenu li
	{
		float: left;
		height: 22px;
		padding: 55px 0 0 20px;
		background: url(../images/layout/menu_list.gif) left bottom no-repeat;
	}

	.mainmenu .active
	{
		background: url(../images/layout/menu_list_active.gif) left bottom no-repeat;
	}
	
	.optionsmenu
	{
		float: right;
	}

	.optionsmenu li
	{
		background: url(../images/layout/menu_list_options.gif) left bottom no-repeat;
	}
	
/* submenu */

	.submenu
	{
		height: 0px;
		position: absolute;
		margin-left: -10px;
		padding: 0 0 0 15px;
		bottom: 76px;
		background: #000;
		overflow: hidden;
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}

	* html .submenu
	{	
		left: 35px;
		width: 923px;
	}

	.submenu li
	{
		float: none;
		padding: 15px 15px 0 0;
		background: none;
	}

	.submenu .active
	{
		background: none;	
	}
	
/* Quicktime stylesheet */

	.title
	{
	  padding-left: 120px;
	  min-height: 120px;
	  background-image: url(../images/layout/essentials_quicktime20070611.png);
	  background-position: top left;
	  background-repeat: no-repeat;
	  vertical-align: middle;
	}
	
	.playButton
	{
	  background-color: rgb(20,20,20);
	  cursor: pointer;
	  font-weight: bold;
	  font-size: 1.25em;
	  opacity: .8;
	  filter: alpha(opacity=80);
	  -moz-border-radius: 1em;
	  -webkit-border-radius: 1em;
	  position: relative;
	  top: 50%;
	  zoom: 100%;
	  padding: .5em 1em;
	  color: white;
	}
	
	.playBackground
	{
	  background-color: rgb(0,0,0);
	  opacity: 0.0;
	  filter: alpha(opacity=0);
	  position: absolute;
	  top: 0px; left: 0px;
	}
	
/* slideshow */

	/**
	Stylesheet: Slideshow.css
		CSS for Slideshow.
	
	License:
		MIT-style license.
	
	Copyright:
		Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
		
	HTML:
		<div class="slideshow">
			<div class="slideshow-images" />
			<div class="slideshow-captions" />
			<div class="slideshow-controller" />
			<div class="slideshow-loader" />
			<div class="slideshow-thumbnails" />
		</div>
		
	Notes:
		These next four rules are set by the Slideshow script.
		You can override any of them with the !important keyword but the slideshow probably will not work as intended.
	*/
	
	.slideshow {
		display: block;
		z-index: 0;
		width: 1000px;
		height: 420px;
		margin: 0;
		position: absolute;
	}
	.slideshow-images {
		display: block;
		overflow: hidden;
		position: absolute;
	}		
	.slideshow-images img {
		display: block;
		position: absolute;
		z-index: 1;
	}		
	.slideshow-thumbnails {
		overflow: hidden;
	}
	
	/**
	HTML:
		<div class="slideshow-images">
			<img />
			<img />
		</div>
		
	Notes:
		The images div is where the slides are shown.
		Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
	*/
	
	.slideshow-images-visible { 
		opacity: 1;
	}	
	.slideshow-images-prev { 
		opacity: 0; 
	}
	.slideshow-images-next { 
		opacity: 0; 
	}
	.slideshow-images img {
		float: left;
		left: 0;
		top: 0;
	}	
	
	/**
	Notes:
		These are examples of user-defined styles.
		Customize these classes to your usage of Slideshow.
	*/
	
	/**
	HTML:
		<div class="slideshow-captions">
			...
		</div>
		
	Notes:
		Customize the hidden / visible classes to affect the captions animation.
	*/
	
	.slideshow-captions {
		background: #000;
		bottom: 0;
		color: #FFF;
		font: normal 12px/22px Arial, sans-serif;
		left: 0;
		overflow: hidden;
		position: absolute;
		text-indent: 10px;
		width: 100%;
		z-index: 10000;
	}
	.slideshow-captions-hidden {
		height: 0;
		opacity: 0;
	}
	.slideshow-captions-visible {
		height: 22px;
		opacity: .7;
	}
	
	/**
	HTML:
		<div class="slideshow-controller">
			<ul>
				<li class="first"><a /></li>
				<li class="prev"><a /></li>
				<li class="pause play"><a /></li>
				<li class="next"><a /></li>
				<li class="last"><a /></li>
			</ul>
		</div>
		
	Notes:
		Customize the hidden / visible classes to affect the controller animation.
	*/
	
	.slideshow-controller {
		background: url(../images/layout/slideshow/controller.png) no-repeat;
		height: 42px;
		left: 50%;
		margin: -21px 0 0 -119px;
		overflow: hidden;
		position: absolute;
		top: 50%;
		width: 238px;
		z-index: 10000;
	}
	.slideshow-controller * {
		margin: 0;
		padding: 0;
	}
	.slideshow-controller-hidden { 
		opacity: 0;
	}
	.slideshow-controller-visible {
		opacity: 1;
	}
	.slideshow-controller a {
		cursor: pointer;
		display: block;
		height: 18px;
		overflow: hidden;
		position: absolute;
		top: 12px;
	}
	.slideshow-controller a.active {
		background-position: 0 18px;
	}
	.slideshow-controller li {
		list-style: none;
	}
	.slideshow-controller li.first a {
		background-image: url(../images/layout/slideshow/controller-first.gif);
		left: 33px;
		width: 19px;
	}
	.slideshow-controller li.last a {
		background-image: url(../images/layout/slideshow/controller-last.gif);
		left: 186px;
		width: 19px;
	}
	.slideshow-controller li.next a {
		background-image: url(../images/layout/slideshow/controller-next.gif);
		left: 145px;
		width: 28px;
	}
	.slideshow-controller li.pause a {
		background-image: url(../images/layout/slideshow/controller-pause.gif);
		left: 109px;
		width: 20px;
	}
	.slideshow-controller li.play a {
		background-position: 20px 0;
	}
	.slideshow-controller li.play a.active {
		background-position: 20px 18px;
	}
	.slideshow-controller li.prev a {
		background-image: url(../images/layout/slideshow/controller-prev.gif);
		left: 65px;
		width: 28px;
	}
	
	/**
	HTML:
		<div class="slideshow-loader" />
		
	Notes:
		Customize the hidden / visible classes to affect the loader animation.
	*/
	
	.slideshow-loader {
		height: 28px;
		left: 486px;
		position: absolute;
		top: 196px;
		width: 28px;
		z-index: 10001;
	}
	.slideshow-loader-hidden {
		opacity: 0;
	}
	.slideshow-loader-visible {
		opacity: 1;
	}
	
	/**
	HTML:
		<div class="slideshow-thumbnails">
			<ul>
				<li><a class="slideshow-thumbnails-active" /></li>
				<li><a class="slideshow-thumbnails-inactive" /></li>
				...
				<li><a class="slideshow-thumbnails-inactive" /></li>
			</ul>
		</div>
		
	Notes:
		Customize the active / inactive classes to affect the thumbnails animation.
		Use the !important keyword to override FX without affecting performance.
	*/
	
	.slideshow-thumbnails-play {
		position: relative;
		left: 15px;
		top: 400px;
		width: 10px;
		height: 15px;
		z-index: 100;
		overflow: hidden;
	}
	
	.slideshow-thumbnails-play img {
		display: block;
	}
	
	.slideshow-thumbnails-play a:hover {
		background-color: #FFF !important;
		opacity: 1 !important;
	}
	
	.slideshow-thumbnails {
		position: relative;
		left: 30px;
		top: 384px;
		width: 400px;
		height: 15px;
		z-index: 101;
	}
	.slideshow-thumbnails *, .slideshow-thumbnails-play * {
		margin: 0;
		padding: 0;
	}
	.slideshow-thumbnails ul {
		height: 65px;
		left: 0;
		position: absolute;
		top: 0;
		width: 10000px;
	}
	.slideshow-thumbnails li {
		float: left;
		list-style: none;
		margin: 1px 1px 1px 0;
		position: relative;
	}
	.slideshow-thumbnails a {
		display: block;
		float: left;
		position: relative; 
	}
	.slideshow-thumbnails a:hover {
		background-color: #FFF !important;
		opacity: 1 !important;
	}
	.slideshow-thumbnails img {
		display: block;
	}
	.slideshow-thumbnails-active {
		background-color: #CCC;
		opacity: 1;
	}
	.slideshow-thumbnails-inactive {
		background-color: #000;
		opacity: .5;
	}