<!doctype html>
<html lang="en">
<head>
<title>[[*pagetitle]]</title>

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; padding: 0; background-color: #F2F2F2}
.content {margin: 20px; padding: 0; }
.header {display: inline-block; width:400px; }
.firstLeft {display: inline-block; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-width: 1px; }
.firstCtr {display: inline-block; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-width: 1px; }
.firstRight {display: inline-block; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-width:1px; }
.nextLeft {display: inline-block; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-width: 1px; }
.nextCtr {display: inline-block; border-right-style: solid; border-bottom-style: solid; border-width: 1px; }
.nextRight {display: inline-block; border-right-style: solid; border-bottom-style: solid; border-width:1px; }
.scroller {display: inline-block; overflow-y: scroll; scroll-behavior: smooth }
.w60 {width: 60px; }
.w200 {width: 200px; }
.w300 {width: 300px; }
.w350 {width: 350px; }
.w400 {width: 400px; }
.w600 {width: 600px; }
.w800 {width: 800px; }
.h100 {height: 101px; }
.h200 {height: 201px; }
.h400 {height: 401px; }
.bgWhite {background-color: white; }
.lineHeight {line-height: 28px; }
.red {color: red; }

	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 420px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

</style>

</head>

<body onLoad="init();">
<div style="height:55px; ">
    <div style="float:left; width:12%; height:55px; ">
        <div style="float:left; width:50%; height:55px; background-color:#3E4851; ">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="[[!ms-mtk-getURL? &pageTitle=`manager_url`]]"><img src="assets/components/ms-mtk-gen/modx-logo.jpg" alt="MODX logo"></a>
        </div>
        <div style="float:right; width:50%; height:55px; background-color:#3E4851; color:white; ">
            <span style="font-size: 11pt; font-style: italic; vertical-align:-8px; ">ms-mtk-gen</span><br>
            <span style="font-size: 11pt; font-style: italic;">1.2.0-pl</span>
        </div>
    </div>
    <div style="float:right; width:88%; height:55px; background-color:#3E4851; color:white; ">
        <br>
        <a href="[[!ms-mtk-getURL? &pageTitle=`ms-mtk-Projects`]]" style="color: white; text-decoration: none;">Projects</a>&nbsp;&nbsp;&nbsp;
        <a href="[[!ms-mtk-getURL? &pageTitle=`ms-mtk-Generate`]]" style="color: white; text-decoration: none">Generate</a>&nbsp;&nbsp;&nbsp;
        <a href="[[!ms-mtk-getURL? &pageTitle=`ms-mtk-Utility`]]" style="color: white; text-decoration: none">Utility</a><br>
    </div>

</div>

<div class="content">
<h2>[[*pagetitle]]</h2>
[[*content]]
</div>
</body>
</html>