<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>
		</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='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>
<div class='toggleButtonHolder' id = 'toggleButtonHolder' style='left:0%;bottom:0%;display:block;position:absolute;z-index:1001;webkit-transform:translate3d(0px,0px,0px);'>
<button id='toggleDebugWindowButton'>Display Debug Logs</button>
</div>
<div class='debugWinHolder' id = 'debugWinHolder' style='left:0%;bottom:0%;width:100%;height:30%;display:none;position:absolute;z-index:1000'>	
	<iframe name='debugWin' class='debugWin'>
		<div><span style='word-wrap:break-word;border-radius:4px;background-color:#428bca;position:fixed;left:0px;top:0px;line-height:1;font-size: 75%;color:#ffffff;vertical-align: baseline;padding:10px 15px;border:1px solid #ddd;'>SCORM Debug Logs</span></div>
	</iframe>
</div>