// --------------------------------------------------
// IMPORTANT STUFF - DO NOT CHANGE
// --------------------------------------------------
@import "elements.less";
//@import "css/fonts.css";
@import "css/jquery-ui.css";
@import "css/keyboard.css";

// --------------------------------------------------
// VARIABLES
// --------------------------------------------------
@appWidth:	1920px;
@appHeight:	1080px;

@margin:	20px;

@red:		#FF0C39;
@redalpha:	rgba(255,12,57, 0.9);

@darkest:	#000;
@dark:		#333;

// --------------------------------------------------
// LAYOUT
// --------------------------------------------------



// general elements
// --------------------------------------------------
html, body {
	width:	@appWidth;
	height:	@appHeight;
	color:	#ccc;
}

body {
	font-family:		Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size:			22px;
	line-height:		(28/22)px;
	overflow:			hidden;
	background-color:	#000;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul {
	margin:				@margin;
}

h3, h4 {
	font-size:			24px;
}

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

img {
	border:			0 !important;
	color:#ccc;
	margin: 0;
}

// general selectors
// --------------------------------------------------
#wrapper {
	width:				@appWidth;
	height:				@appHeight;
	position:			relative;
	overflow:			hidden;
	.user-select(none);
	-webkit-user-drag: none;
/* TOUCHSCREEN BORDER FIX */
	//margin      : 90px auto 0 auto;
	//zoom		: 0.85 ;
/* TOUCHSCREEN BORDER FIX */
}

img {
	-webkit-user-drag: none;
}

.panel {
	height:				100%;
	width:				300px;
	position:			absolute;
	background-repeat:	repeat-y;

	p {
		.text-shadow-color(1px, 1px, 2px, rgba(0,0,0,1));
	}

	.toggle-open-close {
		width:	50px;
		height:	50px;
		margin-right: 5px;
		display: inline-block;
		background-image:	url('../img/ui/arrow-right.png');
	}

	&.open{
		.toggle-open-close {
			background-image:	url('../img/ui/arrow-left.png');
		}
	}
}

// backgrounds
// --------------------------------------------------
.panel, #view-main, #view-overlay, #videoplayer {
	.bg, .contents {
		position:			absolute;
		left:				0;
		top:				0;
		width:				100%;
		height:				100%;
	}
	
}

// panels
// --------------------------------------------------
#left-panels{
	position:			absolute;
	left:				0;
	height:				100%;
}

// view
// --------------------------------------------------
#view-mainnav{
	left:				0px;
	width:				370px;
	z-index:			30;
	
	.bg{
		background-image:		url('../img/ui/home_panel_bg.png');
		background-position:	100% 0;
		background-repeat:		repeat-y;
	}


	ul {
		list-style:		none;
		margin:			0 10px 0 0;
		padding:		0;

		li {
			height: 80px;
			overflow: hidden;
			text-align: right;

			background-image:		url('../img/ui/home_panel_inactive_bg.png');
			background-position:	0 0;
			background-repeat:		repeat-y;
			

			a {
				display:			block;
				height:				50px;
				padding-top: 16px;
				line-height:		50px;
				font-size:			30px;
				
				color:				#ddd;
				.text-shadow-color(0px, 2px, 2px, #222);
			}

			img {
				width:	60px;
				height:	80px;
				margin-top: -15px;
				float:			right;
				margin-left:	@margin;
			}

			&.active {
				background-image:		url('../img/ui/home_panel_active_bg.png');
				
			}
		}
	}

	.nav-language {
		position:	absolute;
		bottom: 0px;
		right:	0px;
	}

}

// view
// --------------------------------------------------
#view-chapter {
	width:				70px;
	z-index:			20;

	.bg{
		background-image:		url('../img/ui/home_panel_bg_dark.png');
		background-position:	100% 0;
		background-repeat:		repeat-y;
	}

	h2 {
		.rotation(-90deg);
		.transform-origin(50% 50%);
		width: 800px;
		margin-top: 400px;
		margin-left: -370px;
		text-align: right;
		position: absolute;

		color:				#ddd;
		font-weight:		normal;
		font-size: 40px;
		.text-shadow-color(-2px, 0px, 2px, #222);
	}

	.nav-back {
		position:	absolute;
		left: 8px;
		bottom: 8px;

		width:50px;
		text-align: center;
		font-size: 19px;
	}

}

body.lang-nl {
	#view-chapter .nav-back:after {
		content:"niveau terug";
	}
}

body.lang-en {
	#view-chapter .nav-back:after {
		content:"level back";
	}
}

// view
// --------------------------------------------------
#view-main, #view-overlay {

	h3 {
		.rotation(-90deg);
		.transform-origin(50% 50%);
		position:			absolute;
		width:				800px;
		top:				400px;		
		left:				-245px;
		margin:				0px;

		text-align:			right;
		color:				#ddd;
		font-weight:		normal;
		font-size:			40px;

		z-index:			25;
	}

}

#view-main{
	background-color:	#000;
	width:				@appWidth;	
	height:				@appHeight;
	padding-left:		300px;
	z-index:			10;

	.bg {
		background-size:	@appWidth @appHeight;
		background-repeat:	no-repeat;
	}

	.contents {

		p {
			color: #fff;
			font-size: 35px;
		}
	}
}


.submap-nav {

	left:	120px;
	top:	1000px;
	width:	1800px;
	text-align: center;

	a {
		width:				60px;
		height:				60px;
		.rounded(34px);

		background-color:	#000;
		border:				4px solid @red;
		display:			inline-table;
		margin: 0px 5px 0 5px;

		vertical-align: top; 
		text-align: center;
				
		.label {
			display:		table-cell; 
			vertical-align:	middle; 
			text-align:		center;
			font-size:		16px;
			font-weight:	bold;
		}

		&.active {
			background-color:	@red;
			border:				0;
			width:				68px;
			height:				68px;

			.label {
				color:				#fff;
			}
		}
	}

	&.large {
		top:	960px;

		a {
			width:				100px;
			height:				100px;
			.rounded(54px);

			&.active {
				width:				108px;
				height:				108px;
			}
		}
	}

	&.xlarge {
		top:	910px;

		a {
			width:				150px;
			height:				150px;
			.rounded(79px);

			&.active {
				width:				158px;
				height:				158px;
			}
		}
	}
}

#view-overlay {
	
	h3 {
		/*background-color: rgba(0, 0, 0, 0.75);
		border-right: 20px solid #000;
		margin-left:-10px;
		margin-top:-10px;*/
	}
	z-index: 11;
	display: none;
	
	.bg {
		background-color: #000;
		.opacity(0.8);
	}

	.contents {
		#hotspots {
		
			z-index:	50;
			
			position:			absolute;

			.hotspot {
				position:			absolute;
			
				.thumbstack
				{
					position:			absolute;
					width:				190px;
					display:			none;
					cursor: pointer;
					img.thumb
					{
						width:			100%;
						position:		absolute;

						-webkit-backface-visibility: hidden;
						
						/*
						&.rotation-0	{	.rotation(-4deg);	}
						&.rotation-1	{	.rotation(-2deg);	}
						&.rotation-2	{	.rotation(2deg);	}
						&.rotation-4	{	.rotation(4deg);	}
						*/
					}

					&.shadow {
						img {
							//.drop-shadow-color(0px, 0px, 8px, rgba(0, 0, 0, 1));
						}
					}

					.hs-label {
						position:	absolute;
						left:		0px;
						top:		0px;
						z-index: 100;
						-webkit-transition: opacity 0.3s linear;
					}
				}

				&.active {
					.thumbstack
					{
						cursor: default;
					}
					.hs-label {
						opacity: 0;
					}	
				}
			}
		}

		#hotspot-scroll {
			display: none;
		}

		#hotspot-passive-area {
			width:	410px;
			height: @appHeight - 200;

			left:	190px;
			top:	100px;
			
										//background-color: #f00;
		}
		#hotspot-active-area {
			
			width:	800px;
			height: @appHeight;

			left:	620px;
			top:	0px;

			z-index:	40;
			
			.annotation {
				display: none;
				background-color:#000; 
				color: #fff;
				padding: 5px;
				font-size:		16px;
				.text-shadow-color(1px, 1px, 0px, #333);
				.opacity(0.8);
			}
										//background-color: #0f0;
		}
		#hotspot-info-area {
			
			width:	460px;
			height: @appHeight - 100;

			left:	1440px;
			top:	100px;

			font-size: 18px;

			.text-shadow-color(1px, 1px, 0px, #000);
			
			.quote {
				margin:	@margin @margin @margin*2 @margin;

				margin-bottom: 0px;

				clear: both;
				display:	block;

				.bqstart, .bqend {
					font-size: 36px;
					color: @red;
					line-height: 10px;
				}

				.statement {
					font-weight: bold;
					color:	#fff;
					text-align: right;
					font-style: italic;
					font-size: 18px;
					line-height: 20px;
				}
				.speaker {
					font-size: 16px;
					line-height: 16px;

					text-align:right;
					margin-top: @margin;
				}
			}
		

			//background-color: #00f;
		}

		h4 {
			color: @red;
			clear: both;
		}
	
	}
}


#view-tooltip {
	width:		400px;
	position:	absolute;

	left:		820px;
	top:		200px;

	z-index: 20;
	display: none;

	.bg {
		position:	absolute;
		width:		100%;
		height:		100%;
		background-color: #505050;
		border:		5px solid #000;
	}

	.contents {
		position:	relative;
		width:		400px - 25px - 15px;
		height:		100%;
		color:		#fff;
		margin:		25px 0px 15px 25px;
		font-size:	17px;
		line-height: 25px;
		overflow:	hidden;
	}


}

.guestbook {
	overflow: hidden;


	.entry {
		width:	550px;
		
		font-size:		16px;
		font-family:	Georgia, "Times New Roman";
		line-height:	25px;

		clear: both;
		
		.meta, .message {
			min-height:		75px;
			margin-bottom: 50px;
			overflow: hidden;
			float: left;
		}

		.meta {
			color:	#858585;
			width:	180px;
			text-align: right;
			padding:	0px 10px;
		}
		.message {
			color:	#000;
			width:	350px;			
		}

		.admin {
			a {
				background-color: #333;
				padding:	5px 15px;
				display: inline-block;
				margin-left:	7px;

				&.selected {
					background-color:	#060;
				}
			}
		}
	}
}

.gb-add-entry {
	color: #000;
	font-size:		16px;
	font-family:	Georgia, "Times New Roman";
	line-height:	25px;
	display: none;
	input, textarea {
		font-size:		16px;
		font-family:	Georgia, "Times New Roman";
		line-height:	25px;
		padding:		0;
		border:			0;
		padding:		0 5px;
		resize: none;
		background-color: rgba(255,255,255,0.5);
		background-image:	none;
		color: #000 !important;

		&.btn {
			background-color: #333;
			color: #fff !important;
			height: 50px;
			line-height: 50px;
			padding: 0 20px;
			float: right;
			margin-left: 10px;
			&.btn-cancel {
				background-color: #999;
				color: #fff;
			}
			&.btn-submit {
				margin-right: -10px;
			}
		}

	}
}

// hotspots
// --------------------------------------------------
.border-pulsate-keyframes () {
	0%   { border-color: rgba(255, 37, 37, 1); }
	50%  { border-color: rgba(205, 37, 37, 0.4); }
	100% { border-color: rgba(205, 37, 37, 1); }
}

@-webkit-keyframes border-pulsate {.border-pulsate-keyframes}
@-moz-keyframes border-pulsate {.border-pulsate-keyframes}
@-ms-keyframes border-pulsate {.border-pulsate-keyframes}
@-o-keyframes border-pulsate {.border-pulsate-keyframes}
@keyframes border-pulsate {.border-pulsate-keyframes}

.border-pulsate-animation () {
	-webkit-animation:	border-pulsate 4s infinite;
	-moz-animation:		border-pulsate 4s infinite;
	-ms-animation:		border-pulsate 4s infinite;
	-o-animation:		border-pulsate 4s infinite;
	animation:			border-pulsate 4s infinite;
}

.island {
	position:			absolute;
	padding:			0;

	&.black {
		background-color: #000;
	}

}


#videoplayer
{
	display:		none;
	position:		absolute;
	left:			0px;
	top:			0px;

	z-index:		500;
	width:			100%;
	height:			100%;
	
	

	.bg, .contents, .watermark {
		width:			100%;
		height:			100%;
		position:		absolute;
	}

	.bg {
		background-color: #000;
	}
	
	.watermark {
		display:	none;
		z-index:	520;
		color:		#fff;
		font-size:	50px;
		.text-shadow-color(2px, 2px, 0px, #000);
	}
}

#lijst-ut-joden {
	border-collapse: collapse;
	td {
		width:				270px;
		height:				110px;
		padding:			0 0 10px 0;
		font-size:			16px;
		text-align:			center;
		border:				30px solid #222;
		//border-bottom:		80px solid #222;
		vertical-align:		middle;
		color:				#000;
		position:			relative;
		background:			#222 url('../img/ui/rouwkaartjes.png') no-repeat;
		overflow:			hidden;
		
		strong {
			display:		block;
			margin-bottom:	5px;
		}
		.line {
			line-height:	10px;
			display:		block;
		}
		.nr {
			position:		absolute;
			top:			9px;
			right:			13px;
			text-align:		right;
			font-size:		11px;
			color:			#666;
		}
	}
}

#lijst-kinderen {
	td {
		font-size:			16px;
		padding:			0 0 10px 0;
		font-size:			16px;
		width:				33.3%;
		padding-right:		20px;
		vertical-align:		top;
		
		border-top:			74px solid #000;
		border-bottom:		74px solid #000;

		.image {
			width:			140px;
			height:			140px;
			display:		inline-block;
			float:			left;
			background-color:	#333;
			margin-right:	10px;
		}
		
	}
}

#witnessmenu {
	
	ul {

		list-style:		none;
		margin:			0;
		padding:		0;

		li {
			float:		left;
			width:		50px;
			height:		50px;
			margin:		0px 5px 10px 5px;
			line-height:	50px;
			text-align:	center;

			a {
				color: #686868;
			}

			&.active {
				a {
					color: #fff;
				}
			}
		}
	}


}
	#witness-next, #witness-prev {
		width:		300px;
		line-height:	44px;
		cursor: pointer;

	}
	#witness-prev {
		float:		left;
		text-align: right;
		img { float: right; margin-left: 10px; }
	}
	#witness-next {
		float:		right;
		text-align: left;
		img { float: left; margin-right: 10px;}
	}



.videosub-container {
	width:		100%;
	height:		100%;
}
.videosub-bar {
	width:			100% !important;
	font-size:		24px !important;
	line-height:	38px !important;
	text-shadow:	-1px -1px 0 #000,
					2px -1px 0px #000,
					-1px 1px 0 #000,
					2px 1px 0 #000,
					0px 2px 0 #000,
					2px 2px 0 #000
					!important;
}

// --------------------------------------------------
// FIXES
// --------------------------------------------------
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


// overwrite zooms
#wrapper {
	&.zoom-100 {
	}
	&.zoom-80, &.zoom-60, &.zoom-40, &.zoom-20 {
		
		#view-main .island img {
			//zoom: 115%;
		}

		#view-overlay
		{
			.contents #hotspot-info-area {
				font-size: 24px;
				max-height: 830px;
				overflow: auto;
				overflow-x: hidden;

				.statement {
					font-size: 24px;
				}
				.speaker {
					font-size: 22px;
				}
			}
			
			#hotspot-active-area {
				.island.annotation {
					font-size:	22px;
				}
			}
		}

	}
}


// --------------------------------------------------
// old browser
// --------------------------------------------------
#upgrade_browser {
	display: none;
	width:	500px;

	h2, p {
		margin: 20px;
	}
}

//*
.ie6, .ie7, .ie8 {
	body {
		background-image: url('../data/default_empty.jpg');
		overflow:	auto;
	}
	#upgrade_browser {
		display: block;
		
	}
	#wrapper {
		display: none;
	}
}//*/


#magnifytools {
	position:	absolute;
	width:		150px;
	height:		50px;
	bottom:		0px;
	right:		-100px;
	background-image: url('../img/ui/zoomin.png');
	cursor:		pointer;
	display:	none;
	
	.window {
		position:	absolute;
		width:		72px;
		height:		40px;
		background-color:#aaa;
		left:		60px;
		top:		5px;
	}
	.tooltip {
		position:	absolute;
		width:		20px;
		height:		20px;
		border:		1px solid #000;
	}
}


// --------------------------------------------------
// console only
// --------------------------------------------------

// #wrapper {	-webkit-transform: scale(0.9); }
// * {	cursor: none !important; }

html.mobile {
	#magnifytools {
		display:none;
	}
}