@charset "UTF-8";
/* CSS Document */

/*@font-family*/
@font-face {
	font-family: 'Bitstream';
	src: url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-webfont.eot');
	src: local('☺'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-webfont.woff') format('woff'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-webfont.ttf') format('truetype'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-webfont.svg#webfontfj5RLWkf') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BitstreamBold';
	src: url('fonts/VeraSerif-Bold-webfont.eot');
	src: local('☺'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-Bold-webfont.woff') format('woff'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-Bold-webfont.ttf') format('truetype'), url('fonts/Bitstream-Vera-Serif-fontfacekit/VeraSerif-Bold-webfont.svg#webfontLNEOBeXZ') format('svg');
	font-weight: normal;
	font-style: normal;
}

html {
	background-color:black;
}

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display:block;	
	font-family: Bitstream, 'Arial Black', Arial, serif;
	margin: 0;
	padding: 0;
	background-color:black;
	color:#999;
}

#wrapper {
	margin:auto;	
	width:1070px;
}

header.mainHeader {
	text-align:center;
	padding-bottom:20px;
}

section {
	position:relative;	
}

footer {
	font-size: 12px;
	text-align:center;
	padding-top:120px;
}

#videoContainer {
	display:inline;
	width:640px;
}

#videoContainer-reel {
	margin:auto;
}


#videoContainer.initial .incoming {
	-webkit-transform:rotateY(90deg);
}
#videoContainer.initial .outgoing {
	-webkit-transform:rotateY(0);
}
#videoContainer.final .incoming {
	-webkit-transform:rotateY(0);
}
#videoContainer.final .outgoing {
	-webkit-transform:rotateY(-90deg);
}
#videoContainer > video {
	-webkit-perspective:2000px;
	-webkit-transition:-webkit-transform 0.5s;	
}

video {
	width:640px;
	height:360px;
	
	display:inline;
	position:relative;
	
	-webkit-box-reflect:below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.3)));
}

#videoDescriptors {
	display:block;
	position:absolute;
	left:15px;
	top:10px;
	opacity:1.0;
	width:620px;
	text-shadow:-1px 1px 2px #000;
}
#videoDescriptors.fadeIn {
	opacity:1.0;
	text-shadow:-1px 1px 2px #000;
	
	-webkit-transition:opacity .5s linear;
	transition:opacity .5s linear;
}
#videoDescriptors.fadeOut {
	opacity:0.0;
	text-shadow:-1px 1px 2px #000;
	
	-webkit-transition:opacity .5s linear;
	transition:opacity .5s linear;
}

#playlist {
	width:420px;
	height:360px;
	float:right;
	overflow:auto;
	background-color:black;
	display:inline;
	
	//-webkit-box-reflect:below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.2, transparent), to(white));
}

img.thumbnail {
	padding:10px;
	float:left;	
	vertical-align:middle;
}

#videoTitles {
	padding-top:30px;
	font-size: 14px;
	vertical-align:middle;
}
.title {
	color:#666;	
}

.videoEntry {
	width:400px;
	height:104px;
	background-color:#222;
}

#playlist a {
	width:400px;
	background-color:#222;
}
a .videoEntry:hover,
a .videoEntry:focus {
	height:104px;
	width:400px;
	background-color:#111;
	
	background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), color-stop(0.2, rgba(255,255,255,0.2)), color-stop(0.4, rgba(255,255,255,0.1)), color-stop(0.4,transparent), to(transparent));
	
	-webkit-transition:background-color .5s linear, background-image .5s linear;
	transition:background-color .5s linear;
	
	/*
	-webkit-transition: background-color .25s linear, color .25s linear, width .2s linear-out, -webkit-box-shadow .25s linear, text-shadow .2s linear, opacity .2s linear;
	-moz-transition: background-color .25s linear, color .25s linear, width .2s linear-out, -webkit-box-shadow .25s linear, text-shadow .2s linear, opacity .2s linear;
	-o-transition: background-color .25s linear, color .25s linear, width .2s linear-out, -webkit-box-shadow .25s linear, text-shadow .2s linear, opacity .2s linear;
	transition: background-color .25s linear, color .25s linear, width .2s linear-out, -webkit-box-shadow .25s linear, text-shadow .2s linear, opacity .2s linear;
	*/
}

a .selectedVideoEntry {
	height:104px;
	width:400px;
	//text-shadow: rgba(0,0,0, .82) 1px 1px 1px;
	background-color:#111;
	
	background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), color-stop(0.2, rgba(255,255,255,0.2)), color-stop(0.4, rgba(255,255,255,0.1)), color-stop(0.4,transparent), to(transparent));
	
	-webkit-transition:background-color .5s linear, background-image .5s linear;
	transition:background-color .5s linear;
	
}