<!DOCTYPE html>
<html dir="$TextDirection$">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title></title>
    <style>
        !cancellation_tooltip_styles.css!

		.icon-view {
            cursor: pointer;
            height: 100%;
            width: 100%;
        }

        .content {
            height: 100%;
        }
    </style>

    <script>
        function showPopup()
        {
			var popup = document.getElementById("popup");
			window.external.showPopup({ 
				html:popup.textContent ? popup.textContent : popup.innerHTML, 
				opaque: true,
			    useShadow: true,
				width:340, 
				height:110
				});
        }
    </script>
</head>
<body class="$TextDirection$ %IsSafeEnvironment%-borderless">
    <div class="content">
        <div class="icon-view" onclick="showPopup(); return false;" title="$MinimizedCancellationControlTooltip$">
            <img src="#klogo.png#" class="klogo-image" /></img>
        </div>
    </div>
	<iframe id="popup" src="#" style="display:none;">
		<!DOCTYPE html>
		<html dir="$TextDirection$">
		<head>
			<meta http-equiv="X-UA-Compatible" content="IE=9" />
			<meta charset="UTF-8" />
			<title></title>
			<style>
                !cancellation_tooltip_styles.css!

				.content {
					padding: 8px 8px 8px 8px;
					max-width:324px;
				}
				
				body
				{
					width: 338px;
					height: 108px;
					border: 1px solid #aaaaaa;
				}
				
				.control-button, .control-button:focus, .control-button:active, .control-button:link {
					font-size: 14px;
					letter-spacing: 0.2px;
					color: #006d5c;
					font-weight: 600;
					border: 1px solid #cccccc;

					padding: 8px;
					margin-left: 4px;
					margin-right: 4px;
                    text-transform: uppercase;
				}
				
				.control-button:hover {
					background:rgba(127, 127, 127, 0.15);
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#40ffd0d0,endColorstr=#40ffd0d0);
					backgroud-color: #ccc;
					zoom: 1;
					border: 1px solid transparent;
				}
				
				.header {
					height: 14px;
					line-height: 14px;
					font-size: 14px;
					font-weight: 600;
					color: #333333;
				}
			</style>
			<script>
				function stopProtection()
				{
					window.external.stopProtection();
					window.external.close();
				}

				function showSettings()
				{
					window.external.showSettings();
					window.external.close();
				}
			</script>
		</head>
		<body class="$TextDirection$">
			<div class="content">
				<table class="header">
					<td > <img src="#colored_logo.png#" class="klogo-image" /></img></td>
					<td style="padding-left:6px;padding-bottom:2px;" >$CancellationControlPopupHeader$</td>
				</table>
				<div style="text-align: center; margin-top:30px" >
                    <a href="#" class="control-button" onclick="stopProtection(); return false;">$CancellationControlStopProtectionButton$</a>
					<a href="#" class="control-button" onclick="showSettings(); return false;">$SafeBankingShowSettings$</a>
				</div>
			</div>
		</body>
		</html>
	</iframe>

    <script>
		 window.external.initializeTooltip({
		        opaque: true,
		        position: 'syscontrol',
		        width: 20,
		        height: 23,
				cornerRadius: 5
	        });
    </script>
</body>
</html>