@import url("../fonts/sansation.css");

body, html {
	/*height: 100%;*/
	margin: 0;
}

html {
	color: #627484;
	font-family: "Geneva", "Segoe UI", "Verdana", "Arial", sans-serif;
	font-size: 10.5pt;
}

h1, h2, h3, #menu, .project .fileselector, .homeslider .fileselector, .homeshowreels, table th, input.button {
	font-family: "SansationRegular", "Geneva", "Segoe UI", "Verdana", "Arial", sans-serif;
}

a img {
	border: 0 none;
}

a {
	color: #3d4e5d;
	text-decoration: underline;
}
a:hover {
	color: #95a9ba;
	text-decoration: none;
}

h1 {
	color: #95a9ba;
	font-size: 15pt;
	margin: 0.5em 0;
	font-weight: normal;
	display: block;
	clear: both;
}

h2 {
	color: #95a9ba;
	font-size: 13pt;
	margin: 0.5em 0;
	font-weight: normal;
	display: block;
	clear: both;
}

h3 {
	color: #95a9ba;
	font-size: 12pt;
	margin: 0.5em 0;
	font-weight: bold;
	display: block;
	clear: both;
}

table {
	border-collapse: collapse;
}
table td, table th {
	padding: 4px 6px;
	margin: 0;
}
table th {
	color: #95a9ba;
	font-size: 13pt;
	font-weight: normal;
	text-align: right;
}
form input.text {
	background-color: #fcfcfc;
	border-top: 1px solid #bfccd5;
	border-right: 1px solid #ebf8ff;
	border-bottom: 1px solid #ebf8ff;
	border-left: 1px solid #bfccd5;
	border-radius: 2px;
	margin: 0;
	padding: 0 5px;
	font-size: 10pt;
	height: 2em;
	line-height: 2em;
}
form input.text:hover {
	border-top: 1px solid #7d8fa0;
	border-right: 1px solid #d8ebfd;
	border-bottom: 1px solid #d8ebfd;
	border-left: 1px solid #7d8fa0;
}
form input.button {
	background-color: #f9f9f9;
	border-top: 1px solid #ebf8ff;
	border-right: 1px solid #bfccd5;
	border-bottom: 1px solid #bfccd5;
	border-left: 1px solid #ebf8ff;
	border-radius: 2px;
	cursor: pointer;
	margin: 0;
	padding: 0 5px;
	font-size: 11pt;
	height: 2em;
	line-height: 2em;
	color: #95a9ba;
}
form input.button:hover {
	border-top: 1px solid #d8ebfd;
	border-right: 1px solid #7d8fa0;
	border-bottom: 1px solid #7d8fa0;
	border-left: 1px solid #d8ebfd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #3d4e5d;
}
div.error {
	color: #b00;
	text-align: center;
	margin: 1em 0;
}



#main {
	position: relative;
	width: 100%;
}
#main-center {
	margin: 20px auto;
	padding: 0 10px;
	position: relative;
	width: 960px;
}
	#main img {
		max-width: 100%;
	}
#footer {
	display: block;
	margin-top: 20px;
	border-top: 1px solid #95a9ba;
	min-height: 2em;
}
	#footer a {
		text-decoration: none;
		margin-top: 3px;
	}
	#footer .right {
		float: right;
	}
	#footer > div {
		display: inline-block;
		vertical-align: middle;
		height: 21px;
		position: relative;
		margin-top: 3px;
	}



#logo {
	display: inline-block;
	position: relative;
	/*left: -2px;*/
	margin: 0 0 20px 7px;
}



#menu {
	position: relative;
	margin-bottom: 20px;
	font-size: 14pt;
	height: 1.5em;
}
	#menu a {
		display: block;
		float:left;
		height: 1.5em;
		line-height: 1.6em;
		padding: 0 0.5em;
		color: #95a9ba;
		text-decoration: none;
	}
	#menu a.right {
		float: right;
	}
	/*#menu a:hover {
		color: #3d4e5d;
		text-decoration: none;
	}*/
	#menu a:hover,
	#menu a.active {
		color: #fff;
		background-color: #95a9ba;
	}



#homecontent {
	position: relative;
	height: 520px;
}
	#homecontent a {
		position: absolute;
	}
		#homecontent a img {
			border: 1px solid #95a9ba;
		}
		#homecontent a:hover img {
			border-color: #3d4e5d;
		}
		#homecontent a.dim img {
			opacity: 0.5;
		}
		#homecontent a span.tooltip {
			position: absolute;
			top: 0.5em;
			left: 0.5em;
			background-color: #95a9ba;
			color: #fff;
			font-size: 11pt;
			padding: 0.1em 0.3em;
			display: none;
		}
		#homecontent a:hover span.tooltip {
			display: block;
		}


.homeshowreels .thumbnails table {
	border-collapse: collapse;
}
	.homeshowreels .thumbnails table td {
		padding: 0;
		text-align: center;
		text-transform: uppercase;
		font-size: 15pt;
		font-weight: normal;
	}
	.homeshowreels .thumbnails a,
	.homeshowreels .thumbnails a img {
		display: block;
		width: 100%;
		text-decoration: none;
		color: #95a9ba;
	}
		.homeshowreels .thumbnails a.dim img {
			opacity: 1;
		}
		.homeshowreels .thumbnails a span {
			display: block;
			margin-top: 1em;
		}
			.homeshowreels .thumbnails a:hover span {
				color: #fff;
				background-color: #95a9ba;
				text-decoration: none;
			}


#content {
	border-top: 1px solid #95a9ba;
}
	#content.homeshowreels {
		padding-top: 1em;
	}

div.thumbnails a img {
	border: 1px solid #95a9ba;
}
div.thumbnails a:hover img {
	border-color: #3d4e5d;
}
div.thumbnails a.dim img {
	opacity: 0.5;
}
/*	div.thumbnails a img {
	-webkit-transition: opacity 300ms ease-in-out;
	-moz-transition: opacity 300ms ease-in-out;
	-o-transition: opacity 300ms ease-in-out;
	-ms-transition: opacity 300ms ease-in-out;
	transition: opacity 300ms ease-in-out;
	}
	div.thumbnails a:hover img {
		opacity: 0.5;
	}*/


.moviecontainer {
	display: block;
	/*background-color: #000;*/
	/*width:1280px;
	height:720px;*/
	width: 100%;
	height: 100%;
}
	.moviecontainer video {
		display: block;
	}
	.moviecontainer.hasplaceholder video,
	.moviecontainer.hasplaceholder .media-label,
	.moviecontainer.hasplaceholder .media-controls {
		display: none;
	}
	.moviecontainer img.videoplaceholder {
		position: relative;
		display: block;
		height: 100%;
	}

.project,
.homeslider {
	border-bottom: 1px solid #95a9ba;
	margin-bottom: 20px;
	padding-bottom: 16px;
}
.homeslider {
	padding-bottom: 22px;
}
.project:last-child,
.homeslider {
	border-bottom: 0 none;
}
	.project .files-container,
	.homeslider .files-container,
	.panocontainer {
		width: 100%;
	  	padding-bottom: 56.25%;	/* 16:9 */
	  	position: relative;
	}
	.project .files,
	.homeslider .files {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #000;
		border: 1px solid #95a9ba;
		display: block;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
/*		width: 958px;
		height: 540px;
		position: relative;*/
		text-align: center;
		/*max-width: 100%;*/
	}
		.project .files div.imagecontainer,
		.project .files div.moviecontainer,
		.homeslider .files div.imagecontainer,
		.homeslider .files div.moviecontainer {
			display: inline-block;
			position: relative;
			vertical-align: middle;
			margin-right: 2px;
			height: 100%;
			width: auto;
		}
		.project .files div.moviecontainer {
			/*max-width: 100%;*/
			/*width: 100%;*/
		}
			.project .files div.moviecontainer video,
			.homeslider .files div.moviecontainer video {
				position: absolute;
				left: 0;
				top: 0;
			}
			#main .project .files div.imagecontainer img,
			#main .homeslider .files div.imagecontainer img {
				max-width: none;
				height: 100%;
			}
		.project .files div.imagecontainer:last-child,
		.project .files div.moviecontainer:last-child,
		.homeslider .files div.imagecontainer:last-child,
		.homeslider .files div.moviecontainer:last-child {
			margin-right: 0;
		}
	.project .navleft,
	.homeslider .navleft {
		background-image: url(../img/pfeil-l.png);
		background-repeat: no-repeat;
		background-position: 0 50%;
		cursor: pointer;
		width: 25%;
		height: 60%;
		position: absolute;
		top: 20%;
		left: 1px;
		opacity: 0;
	}
		.project .navleft:hover,
		.homeslider .navleft:hover {
			opacity: 1;
		}
	.project .navright,
	.homeslider .navright {
		background-image: url(../img/pfeil-r.png);
		background-repeat: no-repeat;
		background-position: 100% 50%;
		cursor: pointer;
		width: 25%;
		height: 60%;
		position: absolute;
		top: 20%;
		right: 1px;
		opacity: 0;
	}
		.project .navright:hover,
		.homeslider .navright:hover {
			opacity: 1;
		}
	.project h1,
	.homeslider h1 {
		float: left;
		clear: none;
		color: #95a9ba;
		font-size: 15pt;
		margin: 0.5em 0;
	}
	.project .fileselector,
	.homeslider .fileselector {
		float: right;
		color: #95a9ba;
		font-size: 15pt;
		margin: 0.5em 0;
		font-weight: normal;
	}
		.project .fileselector span,
		.homeslider .fileselector span {
			display: inline-block;
			min-width: 1.2em;
			cursor: pointer;
			text-align: center;
			line-height: 1.3em;
			height: 1.2em;
		}
		.project .fileselector span.active,
		.project .fileselector span:hover,
		.homeslider .fileselector span.active,
		.homeslider .fileselector span:hover {
			color: #fff;
			background-color: #95a9ba;
		}
	.project .description,
	.homeslider .description {
		clear: both;
	}


table.clientfiles {
	border-collapse: collapse;
	width: 100%;
}
table.clientfiles td {
	/*white-space: nowrap;*/
	padding: 0;
	margin: 0;
	text-align: right;
}
	table.clientfiles tr {
		border-top: 1px solid #eef5fb;
		border-bottom: 1px solid #eef5fb;
	}
	table.clientfiles tr:hover {
		background-color: #f9f9f9;
	}
	table.clientfiles td a {
		display: block;
		padding: 0.5em 20px 0.5em 0;
		color: #3d4e5d;
		text-decoration: none;
	}
	table.clientfiles tr:hover a,
	table.clientfiles td a:hover {
		color: #95a9ba;
		text-decoration: none;
	}
table.clientfiles tr td.filename a {
	background-image: url(../img/download.png);
	background-repeat: no-repeat;
	background-position: 0 10px;
	padding-left: 20px;
	font-weight: bold;
	text-align: left;
}
table.clientfiles tr td.filenum a {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
table.clientfiles tr:hover td.filename a {
	background-position: 0 -20px;
}


/* Animations */

#menu a,
#homecontent a,
.project .fileselector span,
.homeslider .fileselector span {
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}
#homecontent a img,
div.thumbnails a img,
.project .navleft,
.project .navright,
.homeslider .navleft,
.homeslider .navright {
	-webkit-transition: opacity 300ms ease-in-out;
	-moz-transition: opacity 300ms ease-in-out;
	-o-transition: opacity 300ms ease-in-out;
	-ms-transition: opacity 300ms ease-in-out;
	transition: opacity 300ms ease-in-out;
}

/** Responsive **/
@media all and (max-width: 1000px) {
	#main-center {
		width: auto;
	}
	#menu a, #menu a.right {
		float: none;
		display: inline-block;
	}
	#menu {
		height: auto;
	}
}



/* Overrides */

#cboxLoadedContent {
	background-color: #000;
}

.media-bar {
	padding-right: 165px;
}
.time-display {
	width: 90px;
}
/*.media-state,
.waiting .media-state {
	background-image: url(images/loading.gif);
}*/
.media-controls a.btn {
	background-image: url(../img/player-sprites-colors.png);
}
.media-controls a.btn,
.media-bar {
	border-radius: 2px;
}
.timeline-slider .ui-slider-range {
	background-color: #3d4e5d;
}