/* z-indices
	overlay:		50
	mozgrad	ient:	84
	page:			85
*/
@font-face {
    font-family: 'HelveticaNeueLT55RomanRegular';
    src: url('font/helvetica_lt_55_roman-webfont.eot');
    src: url('font/helvetica_lt_55_roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/helvetica_lt_55_roman-webfont.woff') format('woff'),
         url('font/helvetica_lt_55_roman-webfont.ttf') format('truetype'),
         url('font/helvetica_lt_55_roman-webfont.svg#HelveticaNeueLT55RomanRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaLight';
    src: url('font/helveticalight-webfont.eot');
    src: url('font/helveticalight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/helveticalight-webfont.woff') format('woff'),
         url('font/helveticalight-webfont.ttf') format('truetype'),
         url('font/helveticalight-webfont.svg#HelveticaLight') format('svg');
    font-weight: normal;
    font-style: normal;

}




* {
	color: white;
	font-family: Verdana, Arial, Helvetica, sans;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
}

html {
	font-size: 10px;
}

body {
	background: #231F20;
}

	h1 {
		position: absolute;
		width: 350px;
		height: 200px;
		top: 0px;
		right: 0px;
		z-index: 880;
		padding: 0px;
		margin: 0px;
		background: url(logo.png) no-repeat;
		/*cursor: pointer;*/
	}
		h1 span {
			display: none;
		}

	h2 {
		position: relative;
		font-size: 1.7em;
		margin: 0px 0px 0px 0px;
		padding: 10px 175px 0 0;
		height: 32px;
		overflow: hidden;
		border-top: 4px solid black;
		background: #292929 url(h2bgn.png) repeat-y;
		font-family: "HelveticaLight", Arial;
		font-weight: normal;
		color: #FF0300;
		text-transform: uppercase;
		text-align: right;
	}
	h2 * {
		font-family: "HelveticaLight", Arial;
		white-space:nowrap;
	}
	/*h2:hover {
		background-color: #111;
	}*/
		h2 a {
			color: #C1C1C1;
			ffloat: left;
			margin-left: 175px;

		}
		h2 a.itemmotiongraphics, h2 a.itemlightingdesign {
			position: absolute;
			display: block;
			top: 13px;
			margin: 0;
			padding: 0;
			height: 13px;
			background: 0 -13px no-repeat;
			overflow: hidden;
		}
		h2 a.itemlightingdesign {
			right: 176px;
		}
		h2 a.itemmotiongraphics {
			left: 176px;
		}
		h2 a.link {
			/*left: 176px;*/
			background-position: 0 0;
			cursor: pointer;
		}
		h2 a.link:hover {
			background-position: 0 -13px;
		}
		h2 a.itemmotiongraphics {
			background-image: url(MOTIONGRAPHICS.png);
			width: 164px;
		}
		h2 a.itemlightingdesign {
			background-image: url(LIGHTINGDESIGN.png);
			width: 284px;
		}
			h2 a span { display: none; }


		h2 div#startmenu {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			bbackground: url(slash.png) center center no-repeat;
		}
			h2 div#startmenu div.c {
				position: relative;
				width: 380px;
				height: 100%;
				margin: 0 auto;
				background: url(slash.png) center center no-repeat;
			}
				h2 div#startmenu a.item0, h2 div#startmenu a.item1 {
					position: absolute;
					top: 13px;
					margin: 0;
					height: 13px;
					background: 0 -13 no-repeat;
					overflow: hidden;
					cursor: pointer;
				}
				h2 div#startmenu a.item0 {
					left: -10px;
					background-image: url(MOTIONGRAPHICS.png);
					width: 164px;
				}
				h2 div#startmenu a.item0:hover {
					background-position: 0 -13px;
				}
				h2 div#startmenu a.item1 {
					right: -133px;
					background-image: url(LIGHTINGDESIGN.png);
					width: 284px;
				}
				h2 div#startmenu a.item1:hover {
					background-position: 0 -13px;
				}


		h2 small {
			font-family: Verdana, sans, Arial;
			font-size: .5em;
			margin-left: 30px;
			font-weight: normal;
			text-transform: none;
		}

	h3 {
		font-size: 1em;
		margin: 0px;
	}

	p {
		margin-bottom: 2.5em;
		word-spacing: .2em;
		line-height: 1.2em;
		/*text-align: right;*/
	}
	.hide {
		display: none;
	}
	.hideContents * {
		display: none;
	}

/*///////////////////////////////////////////////////////////////////*/

	div#overlay {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: 50;
		background: url(videoOverlay.gif);
		border-top: 3px solid black;
		border-bottom: 3px solid black;
	}

	div#page {
		position: fixed;
		left: 0px;
		bottom: 0;/*13px*/
		width:	100%;
		min-height: 167px;
		max-height: 20%;
		overflow: hidden;
		padding: 0px 0px 20px 0px;
		z-index: 85;
		/*background-color: #333;*/
		background-color: rgba(0,0,0,0.6);
		/*background: url(gradient.jpg);
		background: url(gradient.svg) no-repeat;
		background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;*/
	}

		div#page .mozgradient {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			z-index: 84;
		}

		div#page>div {
			min-height: 130px;
			position: relative;
			overflow: hidden;
		}
			div#page div.content {
				width: 656px;
			}
				div#page div.left {
					float: left;
					text-align: left;
					margin: 0 auto 0 175px;
				}
				 div#page div.right {
					float: right;
					text-align: right;
					margin: 0 175px 0 auto;
				}
					div#page div.content p:first {
						font-weight: bold;
					}

			div#page div a.close {
				position: absolute;
				left: 13px;
				top: 12px;
				display: block;
				width: 16px;
				height: 16px;
				overflow: hidden;
				background: url(sluit.png);
				color: transparent;
				font-size: .001em;
				cursor: pointer;
			}
			div#page div a.close:hover {
				background-position: 0px -16px;
			}

/*///////////////////////////////////////////////////////////////////*/

		div#page #info, div#page #playlist {
			display: none;
		}
		/*, div#page #iteminfo*/
		
			div#page #iteminfo .unhide a {
				color: #D61212;
			}

		/*div#page #playlist {
		}*/
			div#page #playlist table {
				width: 100%;
				border: 0px;
				margin: 0px 0px 2px 0px;
				padding: 0px;
				border-spacing: 0px;
			}
				 div#page #playlist table * {
					border: 0px;
					margin: 0px;
					padding: 0px 0px 0px 1px;
					/*padding: 0px; !!! breaks automatic scaling for first and last column */
					border-spacing: 0px;
				}
				div#page #playlist table tr.head {
					display: none;
				}
				div#page #playlist table tr {
					width: 100%;
					height: 20px;
					padding: 0px 110px 0px 110px;
					cursor: pointer;
				}
				div#page #playlist table tr:hover {
					background-color: rgba(0,0,0,.5);
				}
				div#page #playlist table tr.selected {
					background-color: rgba(0,0,0,.3);
				}
					div#page #playlist table tr td {
						border: 0px;
						text-align: left;
						width: auto;
					}

/*///////////////////////////////////////////////////////////////////*/

	/*ul {
		list-style: none;
		padding: 0;
	}
		ul li {
			padding: .3em 0em .3em 0em;
			margin: 0px;
		}
		ul li.selected {
			font-weight: bold;
			background-color: #F00; 
		}
			ul li a {
				text-decoration: none;	
			}
			ul li ul {
				margin: 1px;
			}
				ul li ul li {
					padding: .3em 0em .3em 3em;
				}
				ul li ul li:hover, ul li ul li:hover * {
					background: #FFF;
					color: #000;
				}*/

/*///////////////////////////////////////////////////////////////////*/

	video {
		width: 100%;
		height: 100%;
		background-color: #333;
	}
	.widdioCenter {
		width: 40px;
		height: 40px;
		z-index: 55;
	}
	.widdioControl {
		cursor: pointer;
		margin-bottom: 20px;
	}
		.widdioControl .scrub {
			background: black;/* url(scrub_bg.png);*/
		}
			.widdioControl .scrub .bar {
				border-top: 1px solid #FF0300;
				background: black;
			}
		/*.widdioControl .mute {
			display: block;
			width: 63px;
			line-height: 1.1em;
			overflow: hidden;
			text-transform: uppercase;
			text-align: center;
		}
			.widdioControl .mute .on {
				height: 13px;
				color: white;
				background: black url(scrub_bg.png);
			}
			.widdioControl .mute .off {
				height: 13px;
				color: black;
				background: white url(scrub_bar.png);
			}*/