/* global */

body {
	margin: 0;

	background-color: #989c83; /*#106288;*/
}

.force-hidden {
	display: none !important;
}

/* scapp */

#scapp {

	border: 0.1em solid #d2be67;

	font-family: Arial;
	font-size: 15px;

	background-color: #fff; /* #989c83;*/

	/*width: 100vh;*/ /* use this to fit document to view-port */
	margin-left: auto;
	margin-right: auto;

	overflow-y: none;
}

#scapp-wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	padding-top: 1.7em;
	padding-bottom: 1.7em;

	overflow-y: none;
}

#scapp-wrapper > h1 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#scapp-wrapper > img {
  	margin-left: 0%;
	width: 50%;
}

#scapp-notification {
	width: 100%;
    background-color: orange;
	text-align: center;
    padding-top: 1em;
	padding-bottom: 1em;
}

/* scmedia */

#scmedia-container {
	padding-top: 1.7em;
	padding-bottom: 1.7em;
	width: 100%;
	height: 20vh;
}

#scmedia {
	border: 0.1em solid #d2be67; /* #d2be67 */;
	width: 100%;
	height: 100%;

	background-color: #FFF;
}

#scmedia .vjs-poster {

	/* 100% rendered logo is too prominent otherwise */
	position: absolute;
	height: 40%;
	width: 40%;
    top: 25%; /* vertical center */
    /* adjust it to be in the center of NI characters of logo */
    left: 29%;

	background-color: #FFF;
	background-image: url('../images/logo.png');
	/*
	
		example for using CSS image-set. can be used
		to allow UA select a higher resolution image
		when PPI or zoom factor is higher.

		we currently don't need this, highest resolution image
		which we have is quite small (< 100kB).

	background-image: 
	    -webkit-image-set(
	      "examples/images/image-384.jpg" 1x,
	      "examples/images/image-768.jpg" 2x,
	    );
	background-image: 
	    image-set(
	      "examples/images/image-384.jpg" 1x,
	      "examples/images/image-768.jpg" 2x,
		);
	*/
}

#scmedia .vjs-control-bar {
	/*
	
	*/
	font-size: 1.3em;
	background-color: #989c83;
	color: #044379;
	opacity: 1.0;
}


#scmedia .vjs-poster.vjs-hidden {
	/*  
		We need to force this because otherwise
		when we do not set poster property on the audio element
		video.js automatically sets the poster to hidden.
		We don't want to set a poster property because we want
		to use a source-set (several images) depending on resolution.
		Therefore we set it via background-image here in the stylesheet.
	 */
	display: inline-block !important;
}

#scmedia .vjs-big-play-button {
	border-radius: 0;
	width: 1.5em;
	margin-top: -2em;
	margin-left: -0.75em;
}

/* scmarkers */

#scmarkers-container {
	background-color: #fff; /*#d2be67*/;

	border: 0.1em solid #d2be67;

	margin-top: 1.7em;
	overflow-y: scroll;
	width: 100%;
	height: 57vh;
}

#scmarkers > div {
	font-family: Arial;
	font-size: 1em;

	margin-left: 1.7em;
	margin-right: 1.7em;
	line-height: 2.3em;
	margin-bottom: 0.2em;
	background-color: #DAEDE2;
}

#scmarkers > div:hover {
	background-color: #D3CEAA;
}


#scmarkers > div > a {
	text-decoration: none;
	color: #044379;
}

#scmarkers-controls {
	width: 100%;
	text-align: center;
}

#scmarkers-controls > button {
	font-size: 2em;
}

#scmarkers .marker {
	display: flex; /* we need this for the text to wrap around correctly
					against the play icon (seek-button) */ 
}

#scmarkers .marker .seek-button {
	display: inline;
	font-size: 2em;
	margin-left: 0.5em;
}

#scmarkers .selected .marker .seek-button {
	color: #d2be67;
}

#scmarkers .marker .title-container {
	display: inline;
}

#scmarkers .marker .clock-time {
	margin-left: 1em;
	display: inline-block;
}

#scmarkers .marker .clock-time:after {
	content: '|';
	margin-left: 1em;
}


#scmarkers .marker .title {
	display: inline-block;
	margin-left: 1em;
}