<!doctype html>
<html lang="en">
<head>
    <title>[[*pagetitle]] - [[++site_name]]</title>
    <base href="[[!++site_url]]" />
    <meta charset="[[++modx_charset]]" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <style type="text/css">
        body {
            background-color: #eee;
            font-family: sans-serif;
            font-size: 20px;
            line-height: 1.4em;
            padding: 0;
            margin: 0;
        }
        body.loaded {
            font-family: 'Open Sans', sans-serif;
        }
        .container {
            display: block;
            max-width: 960px;
            margin: 2em auto 2em;
            padding: 2em;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .container > section {
            height: 100%;
            width: 60%;
            display: inline-block;
            float: left;
            margin-bottom: 2em;
        }
        .container > aside {
            height: 100%;
            display: inline-block;
            width: 30%;
            border-left: 2px dashed #eee;
            float: right;
            padding-left: 1.5em;
        }
        .logo {
            background: url('[[++manager_url]]templates/default/images/modx-logo-color.svg') no-repeat center transparent;
            width: 220px;
            height: 85px;
            background-size: contain;
            display: block;
            position: relative;
            text-indent: -9999px;
            margin: 2em auto;
        }
        h1, h2, h3, h4, h5 {
            color: #494949;
            font-family: 'Open Sans', sans-serif;
            font-weight: 700;
        }
        h1 {
            font-size: 36px;
            color: #137899;
        }
        h2 {
            font-size: 29px;
        }
        h3 {
            font-size: 24px;
        }

        a {
            color: #0f7096;
        }

        ul {
            padding-left: 2em;
        }

        img {
            max-width: 100%;
        }

        .cta-button {
            display: block;
            text-align: center;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            overflow: hidden;
            margin: .2em 0;
            padding: 1em;
            cursor: pointer;
            background: #67a749;
            text-decoration: none;
            border-radius: 3px;
            color: #fff;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .cta-button:before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 50%;
            right: 50%;
            bottom: 0;
            background: #137899;
            height: 5px;
            -webkit-transition-property: left, right;
            transition-property: left, right;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
        .cta-button:hover:before, .cta-button:focus:before, .cta-button:active:before {
            left: 0;
            right: 0;
        }

        .companies {
            clear: both;
            display: block;
            width: 100%;
            padding: 1em 0 0;
            border-top: 2px dashed #eee;
        }

        .companies h3 {
            text-align: center;
            margin: 0;
        }

        .companies ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .companies ul li {
            display: inline-block;
            padding: 0 1em;
        }

        .companies ul li:first-child {
            padding-left: 0;
        }

        .companies ul li:last-child {
            padding-right: 0;
        }

        .companies ul li a {
            display: block;
            position: relative;
            text-indent: -99999px;
            width: 200px;
            height: 75px;
            background-repeat: no-repeat;
            background-size: 200px;
            background-position: center;
        }

        .companies ul li.modmore a {
            background-image: url(data:image/png;base64,[encoded data, 9468 characters]);
        }

        .companies ul li.extrasio a {
            background-image: url(data:image/png;base64,[encoded data, 13948 characters]);
        }
        .companies ul li.modstore a {
            background-image: url(data:image/jpeg;base64,[encoded data, 9752 characters]);
        }

        .companies ul li.modxextras a {
            background-image: url(data:image/jpeg;base64,[encoded data, 10768 characters]);
        }

        .disclaimer {
            max-width: 960px;
            display: block;
            margin: 0 auto;
            text-align: center;
            color: #333;
            font-size: .6em;
        }

        @media (min-width: 768px) and (max-width: 991px)  {
            .container {
                padding: 1em;
                border: 0;
                border-radius: 0;
            }
        }

        @media (max-width: 767px)  {
            body {
                font-size: 16px;
            }
            .container {
                padding: 1em;
                margin: 0 0 1em;
                border: 0;
                border-radius: 0;
            }
            .container > section, .container > aside {
                float: none;
                width: 100%;
            }
            .container aside {
                border: 0;
                padding: 0;
            }
            .logo {
                width: 100%;
                height: 48px;
            }
            h1 {
                font-size: 24px;
            }
            h2 {
                font-size: 19px;
            }
            h3 {
                font-size: 16px;
            }
            .companys ul li {
                display: block;
            }
        }

    </style>
</head>
<body>

<a href="http://www.modx.com" title="Modx" class="logo" target="_blank">MODX</a>

<div class="container">
    <section>
        <h1>[[*longtitle:default=`[[*pagetitle]]`]]</h1>
        [[*content]]
    </section>
    <aside>
        <a href="[[++manager_url]]" title="Your MODX manager" class="cta-button">Go to the&nbsp;manager</a>
        <h3>Learn more about&nbsp;MODX</h3>
        <ul>
            <li><a href="https://rtfm.modx.com/revolution/2.x/">Official&nbsp;Documentation</a></li>
            <li><a href="https://rtfm.modx.com/revolution/2.x/administering-your-site/using-friendly-urls">Using Friendly&nbsp;URLs</a></li>
            <li><a href="https://rtfm.modx.com/revolution/2.x/developing-in-modx/advanced-development/package-management/">Package&nbsp;Management</a></li>
            <li><a href="http://modx.com/blog/">Official MODX&nbsp;Blog</a></li>
            <li><a href="http://www.discovermodx.com/">Discover&nbsp;MODX</a></li>
            <li><a href="https://modx.today">MODX.today</a></li>
        </ul>

        <h3>Get help!</h3>
        <ul>
            <li><a href="http://forums.modx.com/">Official MODX&nbsp;Forums</a></li>
            <li><a href="https://modx.org/">MODX on&nbsp;Slack</a></li>
            <li><a href="https://twitter.com/modx">MODX on&nbsp;Twitter</a></li>
            <li><a href="https://www.facebook.com/modxcms">MODX on&nbsp;Facebook</a></li>
            <li><a href="http://modx.com/professionals/">Find a MODX&nbsp;Professional</a></li>
        </ul>
    </aside>
    <div class="companies">
        <h3>Extend MODX with&nbsp;Extras</h3>
        <ul>
            <li class="modxextras"><a href="http://modx.com/extras/" title="MODX extras" target="_blank">MODX&nbsp;extras</a></li>
            <li class="modmore"><a href="https://www.modmore.com/extras/" title="modmore.com" target="_blank">modmore.com</a></li>
            <li class="modstore"><a href="https://modstore.pro/" title="modstore.pro" target="_blank">modstore.pro</a></li>
            <li class="extrasio"><a href="https://extras.io/extras/" title="Extras.io" target="_blank">Extras.io</a></li>
        </ul>
    </div>
</div>
<footer class="disclaimer">
    <p>&copy; 2005-present the <a href="http://www.modx.com/" target="_blank">MODX</a> Content Management Framework (CMF) project. All rights reserved. MODX is licensed under the GNU&nbsp;GPL.</p>
</footer>

<script>
    // Load the Open Sans font
    try {
        document.addEventListener("DOMContentLoaded", function() { // prevent a Flash Of Unstyled Text (FOUT)
            document.querySelector('head').innerHTML += "<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>";
            document.body.classList.add('loaded');
        });
    } catch (e) { }

    // Shuffle the vendors to prevent favoritism of one vendor over the other
    // with thanks to http://james.padolsey.com/javascript/shuffling-the-dom/
    function shuffle(elems) {
        var allElems = (function(){
            var ret = [], l = elems.length;
            while (l--) {
                if (elems[l].className !== 'modxextras') {
                    ret[ret.length] = elems[l];
                }
            }
            return ret;
        })();

        var shuffled = (function(){
            var l = allElems.length, ret = [];
            while (l--) {
                var random = Math.floor(Math.random() * allElems.length),
                        randEl = allElems[random].cloneNode(true);
                allElems.splice(random, 1);
                ret[ret.length] = randEl;
            }
            return ret;
        })(), l = elems.length;

        // To make sure the MODX logo stays #1, we lower the count by one here (shuffling 3 instead of 4 items)
        // and refer to elems[l+1] in the loop below. This matches because allElems was also filtered to not include
        // the official MODX logo.
        l--;
        while (l--) {
            elems[l+1].parentNode.insertBefore(shuffled[l], elems[l+1].nextSibling);
            elems[l+1].parentNode.removeChild(elems[l+1]);
        }
    }
    shuffle(document.querySelectorAll('.companies li'));
</script>

</body>
</html>
