<div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' >
	<div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'>
	<div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div>
	<div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' >
	<div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'>
		<div id='project_main' class='cp-timeline cp-main'>
			<div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div>
			<canvas id='slide_transition_canvas'></canvas>
		</div>
		<div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'>
			<img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/>
			<div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div>
		</div>
		<div id='cc' style='left:0px; position:absolute;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'>
			<div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'>
			<p style='margin-left:8px;margin-right:8px;margin-top:2px;'>
			</p>
			</div>
			<div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'>
			</div>
		</div>
	</div>
	<div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'>
	</div>
	<div id='playbar' style='bottom:0px; position:fixed'>
	</div>
	<div id='gestureIcon' class='gestureIcon'>
	</div>
	<div id='gestureHint' class='gestureHintDiv'>
		<div id='gImage' class='gesturesHint'></div>
	</div>
	<div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div>
	<div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div>

	</div>
	</div>
</div>

<div id='lightBoxBackgroundDiv' style='left: 0px; top:0px;position:fixed;z-index:100;width:100%;height:100%;display:none;overflow:auto;background: rgba(0, 0, 0, .9)' onclick='cp.hideLightBox()'>
	<div id='lightBoxDiv' style='width:100%;height:100%;opacity:1;overflowY:scroll'>
	</div>
</div>
<div id='imageStackBackgroundDiv' class='imageStack' style='left: 0px; top:0px; position:absolute;z-index:100;width:100%;height:100%;display:none;flex-direction:row;justify-content:space-between;align-items:stretch;background: rgba(200, 200, 200, .9)'>
	<div id='prevImageDiv' class='imageStack' style='width:5%;height:100%;opacity:1;flex: 0 0 40px; align-self: stretch; order: 1;background:url(./assets/playbar/PlaybarIcons/Backward.png) no-repeat center;' onClick='cp.previousImageStackImage()' onmouseover='this.style.background=\'rgba(0, 0, 0, .4)\' onmouseout='this.style.background=\'rgba(200, 200, 200, .9)\'>
	</div>
	<div id='mainImageDiv' class='imageStack' style='width:90%;height:auto;opacity:1;flex: 1 1 auto; align-self: stretch; order: 2;'>
	</div>
	<div id='nextImageDiv' class='imageStack' style='width:5%;height:100%;opacity:1;flex: 0 0 40px; align-self: stretch; order: 3;background:url(./assets/playbar/PlaybarIcons/Forward.png) no-repeat center' onClick='cp.nextImageStackImage()' onmouseover='this.style.background=\'rgba(0, 0, 0, .4)\' onmouseout='this.style.background=\'rgba(200, 200, 200, .9)\''>
	</div>
	<div id='imageThumbnails' class='imageStack' style='width:auto;height:auto;opacity:1;display:none'>
	</div>
	<a class='boxclose' id='boxclose' style='position:absolute;right:0px;float:right;width:26px; height:26px;background:transparent url(http://tympanus.net/Tutorials/CSSOverlay/images/cancel.png) repeat top left;margin-top:30px;margin-right:30px;cursor:pointer;' onClick='cp.hideImageStack()'></a>
</div>


<div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'>
	<table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'>
		<tr style='width:100%;height:100%;text-align:center;vertical-align:middle'>
			<td style='width:100%;height:100%;text-align:center;vertical-align:middle'>
				<image id='preloaderImage'></image>
				<div id='loadingString' class='loadingString'>@LOADING_SCREEN_TEXT</div>
			</td>
		</tr>
	</table>
</div>