<?php

include __DIR__ . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'application.php';
require_once BETA_INCLUDE_ROOT . 'global_functions.php';// require the global functions for templates to hook into the class

/** @var \Paperless\Planner\Frontend\Site $site */
$site = $container->get('legacy:frontend:site');
/** @var \Paperless\Planner\Admin\Site $asite */
$asite = $container->get('legacy:admin:site');

$site->cronning = true;
$asite->cronning = true;

$imgdim = '';

$first_bg = true;

$css = "HTML BODY {
	border: 12px none rgb(181, 216, 218);
	cursor: auto;
	background-image: url(//themer.paperlesswedding.com/uploads/53908a17ea66e.png);
	background-color: rgba(0, 0, 0, 0);
	background-position: -101px 0px;
	background-repeat: repeat;
} 
HTML BODY DIV DIV.header {
	top: 26px;
	margin-top: -20px;
	margin-left: 0px;
	margin-right: -3px;
	border-style: none;
	border-width: 0px;
	z-index: 5;
	height: 322px;
	background-image: url(//themer.paperlesswedding.com/uploads/538757b2b2597.png);
	background-color: rgba(0, 0, 0, 0);
	background-position: 0px 36px;
	background-repeat: no-repeat;
} 
HTML BODY DIV DIV DIV.header-text {
	color: rgb(255, 255, 255);
	position: relative;
	left: 32px;
	top: 164px;
	font-size: 80px;
	font-family: 'Maiden Orange', cursive;
} 
HTML BODY DIV DIV DIV-handle {
	z-index: 90;
} 
HTML BODY DIV DIV.content {
	color: rgba(0, 0, 0, 0.682353);
	border: 4px solid rgb(181, 216, 218);
	font-family: Arial, Helvetica, sans-serif;
	top: 0px;
	height: 1443px;
	left: 0px;
	width: 770px;
	background-color: rgba(252, 253, 253, 0.85098);
	background-position: 0% 0%;
	background-repeat: no-repeat;
} 
HTML BODY DIV DIV DIV.container {
	padding: 21px;
} 
HTML BODY DIV DIV DIV H1 {
	color: rgb(180, 216, 217);
	font-size: 34px;
	font-family: 'Maiden Orange', cursive;
} 
HTML BODY DIV DIV DIV P A {
	color: rgb(180, 216, 217);
	font-weight: bold;
	text-decoration: none;
} 
HTML BODY DIV DIV DIV TABLE.invitebox {
	margin: 50px auto;
	position: relative;
	z-index: 10;
	border: 2px solid rgb(132, 156, 115);
	background-color: rgb(252, 252, 252);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD.inviteheader {
	height: 216px;
	background-image: url(//themer.paperlesswedding.com/uploads/53d643e0ae558.png);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD.invitesidebar_left {
	background-image: none;
	background-color: rgb(252, 252, 252);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD.invitecontent {
	text-align: center;
	height: 474px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD DIV.line_1 {
	position: relative;
	left: -2px;
	top: -130px;
	font-family: Ruluko, cursive;
	font-size: 34px;
	line-height: 30px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD DIV STRONG.line_1b {
	font-size: 14px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD TABLE {
	position: relative;
	width: 100%;
	left: -6px;
	top: -98px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD TABLE TBODY TR TD.line_3 {
	color: rgb(89, 34, 34);
	font-family: Ruluko, cursive;
	font-size: 34px;
	line-height: 60px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD TABLE TBODY TR TD.line_4b {
	font-family: Ruluko, cursive;
	font-size: 28px;
	line-height: 36px;
	color: rgb(89, 34, 34);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD TABLE TBODY TR TD.line_5b {
	font-family: Ruluko, cursive;
	font-size: 28px;
	line-height: 36px;
	color: rgb(89, 34, 34);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD TABLE TBODY TR TD.line_7 {
	color: rgb(89, 34, 34);
	font-size: 24px;
	line-height: 46px;
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD.invitesidebar_right {
	background-color: rgb(252, 252, 252);
} 
HTML BODY DIV DIV DIV TABLE TBODY TR TD.invitefooter {
	height: 427px;
	background-image: url(//themer.paperlesswedding.com/uploads/53d64381a548f.png);
} 
HTML BODY DIV DIV.menu {
	border: 9px solid rgb(181, 216, 218);
	font-family: Arial, Helvetica, sans-serif;
	top: 0px;
	height: 526px;
	left: 0px;
	width: 194px;
	background-color: rgb(180, 216, 217);
} 
HTML BODY DIV DIV UL.menu-list {
	color: rgb(255, 255, 255);
	position: relative;
	left: 28px;
	top: 11px;
	text-align: center;
	font-family: 'Maiden Orange', cursive;
	font-size: 32px;
} 
HTML BODY DIV DIV UL LI {
	padding: 0px 0px 32px;
} 
HTML BODY DIV DIV UL LI A {
	text-decoration: none;
}";

$layout = '2col_shortleft';

$append = '';

if (isset($site->get_cmsid) || isset($site->get_id) || isset($site->get_clone)) {
    if (isset($site->get_cmsid)) {
        $args = array(
            'operator' => 'select',
            'table' => 'themes',
            'where' => array('_relation' => 'AND', array('key' => 'id', 'val' => $site->get_cmsid, '_operator' => '='))
        );
        $theme = $site->query($args)[0];
        $css = $theme['css'];
        $layout = $theme['template'];

        $themetext = $theme['headertext'];
    } elseif (isset($site->get_id)) {
        $append = '?id=' . $site->get_id;
        $args = array(
            'operator' => 'select',
            'table' => 'themes',
            'where' => array(
                '_relation' => 'AND',
                array('key' => 'id', 'val' => $site->get_id, '_operator' => '='),
                array('key' => 'login', 'val' => $site->user_id, '_operator' => '=')
            )
        );
        $theme = $site->query($args)[0];
        $css = $theme['css'];
        $layout = $theme['template'];
        $themetext = $theme['headertext'];
    } else {
        $append = '?clone=' . $site->get_clone;
        $args = array(
            'operator' => 'select',
            'table' => 'themes',
            'where' => array('_relation' => 'AND', array('key' => 'id', 'val' => $site->get_clone, '_operator' => '='))
        );
        $clonetheme = $site->query($args)[0];
        $css = $clonetheme['css'];
        $layout = $clonetheme['template'];
    }
} else {
    $args = array(
        'operator' => 'select',
        'table' => 'themes',
        'where' => array('_relation' => 'AND', array('key' => 'id', 'val' => 84, '_operator' => '='))
    );
    $clonetheme = $site->query($args)[0];
    $css = $clonetheme['css'];
    $layout = $clonetheme['template'];

    unset($clonetheme);
}

if ($site->user_loggedin && $site->user_package == 1) {
    header('Location: /std.php' . $append);
    die();
}

if (isset($_POST['styles'])) {
    $css = $_POST['styles'];
}

if (isset($_POST['layout'])) {
    $layout = $_POST['layout'];
}

function array_orderby()
{
    $args = func_get_args();
    $data = array_shift($args);
    foreach ($args as $n => $field) {
        if (is_string($field)) {
            $tmp = array();
            foreach ($data as $key => $row) {
                $tmp[$key] = $row[$field];
            }
            $args[$n] = $tmp;
        }
    }
    $args[] = &$data;
    call_user_func_array('array_multisort', $args);

    return array_pop($args);
}

$defaultfonts = array();
$defaultfonts[] = array('code' => 'Arial, Helvetica, sans-serif::latin', 'name' => 'Arial');
$defaultfonts[] = array('code' => '"Arial Narrow", Arial::latin', 'name' => 'Arial Narrow');
$defaultfonts[] = array('code' => '"Arial Rounded MT Bold", Arial::latin', 'name' => 'Arial Rounded Bold');
$defaultfonts[] = array('code' => '"Book Antiqua", Georgia::latin', 'name' => 'Book Antiqua');
$defaultfonts[] = array(
    'code' => '"Bookman Old Style", "Book Antiqua", "Times New Roman"::latin',
    'name' => 'Bookman Old Style'
);
$defaultfonts[] = array('code' => '"Bradley Hand ITC TT"::latin', 'name' => 'Bradley Hand ITC TT');
$defaultfonts[] = array('code' => '"Century Gothic", Verdana::latin', 'name' => 'Century Gothic');
$defaultfonts[] = array('code' => '"Comic Sans MS", cursive::latin', 'name' => 'Comic Sans');
$defaultfonts[] = array('code' => '"Courier New", Courier, monospace::latin', 'name' => 'Courier New');
$defaultfonts[] = array('code' => '"Franklin Gothic Medium"::latin', 'name' => 'Franklin Gothic Medium');
$defaultfonts[] = array('code' => 'Garamond::latin', 'name' => 'Garamond');
$defaultfonts[] = array('code' => 'Georgia, "Times New Roman", Times, serif::latin', 'name' => 'Georgia');
$defaultfonts[] = array('code' => 'Haettenschweiler::latin', 'name' => 'Haettenschweiler');
$defaultfonts[] = array('code' => '"Lucida Bright", Georgia::latin', 'name' => 'Lucida Bright');
$defaultfonts[] = array('code' => '"Lucida Calligraphy"::latin', 'name' => 'Lucida Calligraphy');
$defaultfonts[] = array('code' => '"Lucida Console", Monaco, monospace::latin', 'name' => 'Lucida Console');
$defaultfonts[] = array('code' => 'Mistral::latin', 'name' => 'Mistral');
$defaultfonts[] = array('code' => '"MS Mincho"::latin', 'name' => 'MS Mincho');
$defaultfonts[] = array('code' => 'Onyx::latin', 'name' => 'Onyx');
$defaultfonts[] = array('code' => 'Papyrus::latin', 'name' => 'Papyrus');
$defaultfonts[] = array('code' => 'Perpetua::latin', 'name' => 'Perpetua');
$defaultfonts[] = array('code' => '"Perpetua Titling MT"::latin', 'name' => 'Perpetua Titling MT');
$defaultfonts[] = array('code' => 'Playbill::latin', 'name' => 'Playbill');
$defaultfonts[] = array('code' => 'Rockwell::latin', 'name' => 'Rockwell');
$defaultfonts[] = array('code' => '"Rockwell Extra Bold"::latin', 'name' => 'Rockwell Extra Bold');
$defaultfonts[] = array('code' => 'Stencil::latin', 'name' => 'Stencil');
$defaultfonts[] = array('code' => 'Tamoha::latin', 'name' => 'Tamoha');
$defaultfonts[] = array('code' => '"Times New Roman"::latin', 'name' => 'Times New Roman');
$defaultfonts[] = array('code' => '"Trebuchet MS"::latin', 'name' => 'Trebuchet MS');
$defaultfonts[] = array('code' => '"Tw Cen MS"::latin', 'name' => 'TW Cen MS');
$defaultfonts[] = array('code' => 'Verdana::latin', 'name' => 'Verdana');
$defaultfonts[] = array('code' => '"Wide Latin"::latin', 'name' => 'Wide Latin');


$fonts = array();
$fonts[] = array('code' => 'Maiden+Orange::latin', 'name' => 'Maiden Orange');
$fonts[] = array('code' => 'Fresca::latin', 'name' => 'Fresca');
$fonts[] = array('code' => 'Marcellus+SC::latin', 'name' => 'Marcellus SC');
$fonts[] = array('code' => 'Habibi::latin', 'name' => 'Habibi');
$fonts[] = array('code' => 'Yellowtail::latin', 'name' => 'Yellowtail');
$fonts[] = array('code' => 'Niconne::latin', 'name' => 'Niconne');
$fonts[] = array('code' => 'Duru+Sans::latin', 'name' => 'Duru Sans');
$fonts[] = array('code' => 'Molle:400italic::latin', 'name' => 'Molle Italic');
$fonts[] = array('code' => 'Oxygen+Mono::latin', 'name' => 'Oxygen Mono');
$fonts[] = array('code' => 'La+Belle+Aurore::latin', 'name' => 'La Belle Aurore');
$fonts[] = array('code' => 'The+Girl+Next+Door::latin', 'name' => 'The Girl next Door');
$fonts[] = array('code' => 'Kite+One::latin', 'name' => 'Kite One');
$fonts[] = array('code' => 'Yesteryear::latin', 'name' => 'Yesteryear');
$fonts[] = array('code' => 'Nova+Mono::latin', 'name' => 'Nova Mono');
$fonts[] = array('code' => 'Josefin+Sans::latin', 'name' => 'Josefin Sans');
$fonts[] = array('code' => 'Buenard::latin', 'name' => 'Buenard');
$fonts[] = array('code' => 'Alex+Brush::latin', 'name' => 'Alex Brush');
$fonts[] = array('code' => 'Meie+Script::latin', 'name' => 'Meie Script');
$fonts[] = array('code' => 'Muli::latin', 'name' => 'Muli');
$fonts[] = array('code' => 'Candal::latin', 'name' => 'Candal');
$fonts[] = array('code' => 'Cousine::latin', 'name' => 'Cousine');
$fonts[] = array('code' => 'Alegreya+Sans::latin', 'name' => 'Alegreya Sans');
$fonts[] = array('code' => 'Clicker+Script::latin', 'name' => 'Clicker Script');
$fonts[] = array('code' => 'Homemade+Apple::latin', 'name' => 'Homemade Apple');
$fonts[] = array('code' => 'Nothing+You+Could+Do::latin', 'name' => 'Nothing You Could Do');
$fonts[] = array('code' => 'Covered+By+Your+Grace::latin', 'name' => 'Covered By your Grace');
$fonts[] = array('code' => 'Courgette::latin', 'name' => 'Courgette');
$fonts[] = array('code' => 'Arizonia::latin', 'name' => 'Arizonia');
$fonts[] = array('code' => 'Merienda::latin', 'name' => 'Merienda');
$fonts[] = array('code' => 'Italianno::latin', 'name' => 'Italianno');
$fonts[] = array('code' => 'Architects+Daughter::latin', 'name' => 'Architects Daughter');
$fonts[] = array('code' => 'Zeyada::latin', 'name' => 'Zeyada');
$fonts[] = array('code' => 'Indie+Flower::latin', 'name' => 'Indie Flower');
$fonts[] = array('code' => 'Devonshire::latin', 'name' => 'Devonshire');
$fonts[] = array('code' => 'Cedarville+Cursive::latin', 'name' => 'Cedarville Cursive');
$fonts[] = array('code' => 'Sacramento::latin', 'name' => 'Sacramento');
$fonts[] = array('code' => 'Handlee::latin', 'name' => 'Handlee');
$fonts[] = array('code' => 'Satisfy::latin', 'name' => 'Satisfy');
$fonts[] = array('code' => 'Monsieur+La+Doulaise::latin', 'name' => 'Monsieur La Doulaise');
$fonts[] = array('code' => 'Anonymous+Pro::latin', 'name' => 'Anonymous Pro');
$fonts[] = array('code' => 'Lusitana::latin', 'name' => 'Lusitana');
$fonts[] = array('code' => 'Fanwood+Text::latin', 'name' => 'Fanwood Text');
$fonts[] = array('code' => 'Ultra::latin', 'name' => 'Ultra');
$fonts[] = array('code' => 'Jacques+Francois::latin', 'name' => 'Jacques Francois');
$fonts[] = array('code' => 'Andada::latin', 'name' => 'Andada');
$fonts[] = array('code' => 'Cinzel::latin', 'name' => 'Cinzel');
$fonts[] = array('code' => 'Playfair+Display+SC::latin', 'name' => 'Playfair Display SC');
$fonts[] = array('code' => 'Almendra::latin', 'name' => 'Almendra');
$fonts[] = array('code' => 'Trocchi::latin', 'name' => 'Trocchi');
$fonts[] = array('code' => 'Carrois+Gothic+SC::latin', 'name' => 'Carrois Gothic SC');
$fonts[] = array('code' => 'Gafata::latin', 'name' => 'Gafata');
$fonts[] = array('code' => 'Telex::latin', 'name' => 'Telex');
$fonts[] = array('code' => 'Scada::latin', 'name' => 'Scada');
$fonts[] = array('code' => 'Voltaire::latin', 'name' => 'Voltaire');
$fonts[] = array('code' => 'Belleza::latin', 'name' => 'Belleza');
$fonts[] = array('code' => 'Ruluko::latin', 'name' => 'Ruluko');
$fonts[] = array('code' => 'Nobile::latin', 'name' => 'Nobile');
$fonts[] = array('code' => 'Pontano+Sans::latin', 'name' => 'Pontano Sans');

$fonts = array_orderby($fonts, 'name', SORT_ASC);
?><!DOCTYPE html>
<!--[if lt IE 7 ]>
<html class="ie6 tooold"> <![endif]-->
<!--[if IE 7 ]>
<html class="ie7 tooold"> <![endif]-->
<!--[if IE 8 ]>
<html class="ie8 tooold"> <![endif]-->
<!--[if IE 9 ]>
<html class="ie9 tooold"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class=""> <!--<![endif]-->
<head>
    <title>Theme Builder - Paperless Wedding UK</title>
    <meta name="version" content="1.0">
    <link rel="stylesheet" type="text/css" href="themer.css">
    <link href='//fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!--<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    -->

    <script src='selector.js'></script>
    <script src='cssparse.js'></script>

    <!--<script src='draggable.background.js'></script>-->

    <script src='spectrum.js'></script>
    <link rel='stylesheet' href='spectrum.css'/>

    <script src='jquery.uploadfile.min.js'></script>
    <link rel='stylesheet' href='uploadfile.css'/>

    <script>showTutorial = true;</script>

    <?php
    if (isset($_POST['hidewizard'])) {
        ?>
        <script>showTutorial = false;</script>
        <?php
    }
    ?>

    <script type="text/javascript" src="themer.js?V=27012015.1600"></script>
    <script type="text/javascript">
        <?php
        $fontlist = '';


        foreach ($fonts as $key => $val) {
            $fontlist .= (($key) ? ',' : null) . "'" . $val['code'] . "'";
        }

        ?>
        WebFontConfig = {
            google: {families: [<?=$fontlist?>]}
        };
        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
                '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>
<body>

<div class="th_ctrl th_ctrl-top">
    <div class="logo fnt-homemadeappl">
        <img src="images/logo.png" width="137" height="124">
        Theme Designer
    </div>

    <div class="th_ctrl-tabs">
        <ul>
            <li data-id="theme_layout" data-tutorial="1" data-tutorialloc="bottom" data-tutorialoffset="left"
                data-click="true" data-tutorialtext="You can select your theme's main layout here." class="active">
                Theme Layout
            </li>
            <li data-id="global_styles" data-tutorial="4" data-tutorialloc="bottom" data-tutorialoffset="left"
                data-click="true"
                data-tutorialtext="You can select your font styles and sizes for the headers and main content of your site.">
                Font Styles
            </li>
            <li data-id="settings" data-tutorial="5" data-tutorialloc="bottom" data-tutorialoffset="left"
                data-click="true"
                data-tutorialtext="If you want to manually alter the styles (advanced users only) then you may do so here!">
                CSS Stylesheet
            </li>
            <li data-id="theme_layout" class="launch_tutorial">Launch Tutorial</li>
        </ul>
    </div>

    <div class="th_ctrl-infopanel">
        <ul>
            <li class="active" data-id="theme_layout">
                <ul class="th_ctrl-groups th_ctrl-layouts">
                    <li class="<?= (($layout == '2col_shortright') ? 'active' : null) ?>" data-tutorial="2"
                        data-tutorialloc="bottom" data-tutorialoffset="left" data-click="false"
                        data-tutorialtext="The theme you currently have selected has a pink border around it.">
                        <p class="layouts _2col_shortright" data-id="2col_shortright"></p>
                    </li>

                    <li class="<?= (($layout == '2col_shortleft') ? 'active' : null) ?>" data-tutorial="3"
                        data-tutorialloc="bottom" data-tutorialoffset="left" data-click="false"
                        data-tutorialtext="Simply click on the thumbnail to change to this theme.. go on, I dare you!">
                        <p class="layouts _2col_shortleft" data-id="2col_shortleft"></p>
                    </li>
                    <!--
                    <li>
                        <p class="layouts _1col_layout" data-id="1col_layout"></p>
                    </li>
                    -->
                </ul>
            </li>


            <li data-id="global_styles">

                <ul class="th_ctrl-groups">
                    <li style="position:relative;width: 68px;">
                        <strong style="position: absolute;top: 40px;">Headers</strong>
                        <strong style="position: absolute;top: 82px;">Content</strong>
                    </li>
                    <li>
                        <strong>Font Families</strong><br>

                        <?php
                        $title = 'Headers';
                        $elms = '.header-text,h1,h2,h3,h4,h5,h6,.line_1';
                        $linker = 'font-headers';
                        include('includes/controls_fonts.php');
                        ?>

                        <?php
                        $title = 'Content';
                        $elms = '.content,.menu,.line_4,.line_5,.line_6';
                        $linker = 'font-content';
                        include('includes/controls_fonts.php');
                        ?>
                    </li>

                    <li>
                        <strong>Font Sizes</strong><br>


                        <div class="th_ctrl-dropdown font-header-size" data-pre="Size: ">
                            <span>Headers</span>

                            <div class="th_ctrl-dropdown-options" data-id="font-header-size" data-key="font-size"
                                 data-elms="h1,h2,h3,h4,h5,h6,.line_1">

                                <?php
                                $sizes = array(4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34);
                                foreach ($sizes as $val) {
                                    ?>
                                    <p data-value="" style="font-size:<?= $val ?>px;"
                                       data-class="<?= $val ?>px"><?= $val ?></p>
                                    <?php
                                }
                                ?>

                            </div>
                            <!-- closing options -->
                        </div>
                        <!-- closing dropdown -->


                        <div class="th_ctrl-dropdown font-content-size" data-pre="Size: ">
                            <span>Content</span>

                            <div class="th_ctrl-dropdown-options" data-id="font-content-size" data-key="font-size"
                                 data-elms=".content,.menu,.line_4,.line_5,.line_6">

                                <?php
                                $sizes = array(4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34);
                                foreach ($sizes as $val) {
                                    ?>
                                    <p data-value="" style="font-size:<?= $val ?>px;"
                                       data-class="<?= $val ?>px"><?= $val ?></p>
                                    <?php
                                }
                                ?>

                            </div>
                            <!-- closing options -->
                        </div>
                        <!-- closing dropdown -->
                    </li>


                    <li>
                        <strong>Font Colours</strong><br>

                        <div class="th_ctrl-rule" style="margin-top: 10px;">
                            <span class="th_ctrl_colour-preview font-header-colour"></span>
                            <span class="th_ctrl-font-header-colour" data-id="font-header-colour"
                                  data-elms=".header-text,h1,h2,h3,h4,h5,h6,.line_1"><label
                                        class="upload_label colour_label">Change
																																															  Colour</label></span>
                        </div>

                        <div class="th_ctrl-rule" style="margin-top: 19px;">
                            <span class="th_ctrl_colour-preview font-content-colour"></span>
                            <span class="th_ctrl-font-content-colour" data-id="font-content-colour"
                                  data-elms=".content,.menu,.line_4,.line_5,.line_6"><label
                                        class="upload_label colour_label">Change
																																																Colour</label></span>
                        </div>

                    </li>
                </ul>

            </li>

            <li data-id="settings">
                <form action="" method="post">
                    <input type="hidden" name="layout" value="<?= $layout ?>">
                    <input type="hidden" name="hidewizard" value="1">
                    <textarea class="processed_styles" name="styles"><?= str_replace('http://', '//', $css) ?> HTML BODY DIV DIV.header { top:0 !important;margin-top:0 !important; }</textarea>
                    <input type="button" class="reload" value="RELOAD STYLESHEET" data-tutorial="6"
                           data-tutorialloc="bottom" data-tutorialoffset="left" data-click="false"
                           data-tutorialtext="Once you've manually altered the styles, you must click here to re-load them.">
                    <input type="submit" class="refresh" value="REFRESH THEMER" data-tutorial="7"
                           data-tutorialloc="bottom" data-tutorialoffset="right" data-click="false"
                           data-tutorialtext="If something stops working, but you don't want to lose your progress, click here to reload the controls (don't do that now!)">
                </form>
            </li>
        </ul>
    </div>

    <a href="javascript:void(0);" class="th_ctrl-btn" data-tutorial="8" data-tutorialloc="bottom"
       data-tutorialoffset="left" data-click="false"
       data-tutorialtext="If you want to hide the top controls, just click on this button!"></a>
</div>


<div class="th_ctrl th_ctrl-right">
    <div class="th_ctrl-tabs">
        <ul data-tutorial="10" data-tutorialloc="left" data-tutorialoffset="top" data-click="false"
            data-tutorialtext="These are the controls you'll be using for all the customisation">

            <li data-id="body" data-tutorial="11" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                data-tutorialtext="When you click on a tab, you can see the available options for this area.">
                Background

                <div class="th_ctrl-infopanel">
                    <ul class="th_ctrl-groups">
                        <li data-tutorial="12" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Clicking on one will reveal additional controls.">
                            Background
                            <div class="th_ctrl-infopanel">

                                <?php
                                $prefix = 'body';
                                $imgdim = '';
                                include('includes/controls_bg.php');
                                ?>

                            </div>
                        </li>

                    </ul>
                </div>

            </li>

            <li data-id="header" data-tutorial="14" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                data-tutorialtext="The Header refers to the area where your names will be displayed.">
                Header

                <div class="th_ctrl-infopanel">
                    <ul class="th_ctrl-groups">
                        <li>Background
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.header';
                                $imgdim = '<br>900px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="15" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="You can edit the name, colour, font and size of the title for your website.">
                            Header Text
                            <div class="th_ctrl-infopanel">

                                <div class="">
                                    <?php
                                    $text = "You and Your Partners Wedding";

                                    if ($site->user_loggedin) {
                                        $text = $site->user_forename . " and " . $site->user_partner_forename . "'s Wedding";
                                    }

                                    if (isset($themetext)) {
                                        $text = $themetext;
                                    }

                                    ?>
                                    <textarea class="th_ctrl-textarea" data-elms=".header-text"><?= $text ?></textarea>
                                </div>


                                <?php
                                $elms = '.header-text';
                                $linker = 'font-header-text';
                                $title = 'Font Family';

                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');
                                ?>

                            </div>

                        </li>

                        <li>Border
                            <div class="th_ctrl-infopanel">
                                <?php
                                include('includes/controls_border.php');
                                ?>
                            </div>

                        </li>

                    </ul>
                </div>

            </li>
            <li data-id="menu" data-tutorial="16" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                data-tutorialtext="Menu has an additional option called 'Link'.">
                Menu


                <div class="th_ctrl-infopanel">
                    <ul class="th_ctrl-groups">
                        <li>Background
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.menu';

                                $imgdim = '<br>196px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>


                        <li>Border
                            <div class="th_ctrl-infopanel">
                                <?php
                                include('includes/controls_border.php');
                                ?>

                            </div>

                        </li>


                        <li data-tutorial="17" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Here you can personalise the menu link colour, font style and background image.">
                            Links
                            <div class="th_ctrl-infopanel">

                                <div class="th_ctrl-rule">
                                    <span class="th_ctrl_colour-preview menu-link-colour"></span>
                                    <span class="th_ctrl-menu-link-colour" data-id="menu-link-colour"
                                          data-elms=".menu-list"><label class="upload_label colour_label">Change
																																									  Colour</label></span>
                                </div>

                                <?php
                                $title = 'Font Family';
                                $elms = '.menu-list';
                                $linker = 'font-menu-list-link-font';
                                include('includes/controls_fonts.php');
                                ?>


                                <div class="th_ctrl-dropdown text-decoration" data-pre="Style: ">
                                    <span>Style</span>

                                    <div class="th_ctrl-dropdown-options" data-id="text-decoration"
                                         data-key="text-decoration" data-elms=".menu-list li a">
                                        <p data-key="" data-val="" style="text-decoration: none;">None</p>

                                        <p data-key="" data-val="" style="text-decoration: underline;">Underline</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                                <?php
                                $linker .= '-size';
                                include('includes/controls_fontsize.php');
                                ?>

                                <div class="th_ctrl-dropdown text-align" data-pre="Align: ">
                                    <span>Align</span>

                                    <div class="th_ctrl-dropdown-options" data-id="text-align" data-key="text-align"
                                         data-elms=".menu-list">
                                        <p data-key="" data-val="" style="text-align: left;">Left</p>

                                        <p data-key="" data-val="" style="text-align: center;">Middle</p>

                                        <p data-key="" data-val="" style="text-align: right;">Right</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                                <div class="th_ctrl-rule" data-tutorial="18" data-tutorialloc="left"
                                     data-tutorialoffset="top" data-click="true"
                                     data-tutorialtext="This increases and decreases the spacing between the links.">
                                    <span data-id="menu-width">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".menu-list li"
                                          data-key="padding-bottom" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".menu-list li"
                                          data-key="padding-bottom" data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>


                        <li style="height: 43px;text-indent: 0;">
                            <div class="logo_selection" style="margin-left: 25px;" data-elms=".footer_logo"
                                 data-key="background-image"
                                 data-value="//themer.paperlesswedding.com/images/logo_white.png">
                                <img src="/images/logo_white.png">
                            </div>
                            <div class="logo_selection" data-elms=".footer_logo" data-key="background-image"
                                 data-value="//themer.paperlesswedding.com/images/logo_grey.png">
                                <img src="/images/logo_grey.png">
                            </div>
                            <div class="logo_selection" data-elms=".footer_logo" data-key="background-image"
                                 data-value="//themer.paperlesswedding.com/images/logo_black.png">
                                <img src="/images/logo_black.png">
                            </div>
                        </li>

                    </ul>
                </div>


            </li>
            <li data-id="content">Content


                <div class="th_ctrl-infopanel">
                    <ul class="th_ctrl-groups">
                        <li>Background
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.content';
                                $imgdim = '<br>682px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li>Border
                            <div class="th_ctrl-infopanel">
                                <?php
                                include('includes/controls_border.php');
                                ?>
                            </div>

                        </li>

                        <li>Links
                            <div class="th_ctrl-infopanel">

                                <div class="th_ctrl-rule">
                                    <span class="th_ctrl_colour-preview menu-link-colour"></span>
                                    <span class="th_ctrl-menu-link-colour" data-id="menu-link-colour"
                                          data-elms=".content .container > p a"><label
                                                class="upload_label colour_label">Change
																																													 Colour</label></span>
                                </div>
                                <div class="th_ctrl-dropdown text-decoration" data-pre="Style: ">
                                    <span>Style</span>

                                    <div class="th_ctrl-dropdown-options" data-id="text-decoration"
                                         data-key="text-decoration" data-elms=".content .container > p a">
                                        <p data-key="" data-val="" style="text-decoration: none;">None</p>

                                        <p data-key="" data-val="" style="text-decoration: underline;">Underline</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                                <div class="th_ctrl-dropdown font-weight" data-pre="Weight: ">
                                    <span>Weight</span>

                                    <div class="th_ctrl-dropdown-options" data-id="font-weight" data-key="font-weight"
                                         data-elms=".content .container > p a">
                                        <p data-key="" data-val="" style="font-weight: normal;">Normal</p>

                                        <p data-key="" data-val="" style="font-weight: bold;">Bold</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                            </div>

                        </li>

                    </ul>
                </div>


            </li>
            <!-- closing content -->

            <li data-id="content" data-tutorial="22" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                data-tutorialtext="Here is where you create the designs that will be applied to invitations AND Save the Dates.">
                Invitation/Save the Date


                <div class="th_ctrl-infopanel">
                    <p>Background Images and Colours</p>
                    <ul class="th_ctrl-groups">
                        <li data-tutorial="23" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="This is give defintion to the invitation when it is sent out. ">
                            Invitation Border
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.invitebox';

                                include('includes/controls_border.php');
                                ?>
                            </div>

                        </li>
                        <li data-tutorial="23" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="This refers to the entire area of the inviation that will be in one colour or one image. Remember it needs to be repeatable to so as you add events the invitation can get longer. 562PX wide.">
                            Invitation Background
                            <div class="th_ctrl-infopanel">
                                <?php
                                $imgdim = '<br>562px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="24" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="If you want to put a design at the top of your invite you can - 560 x216px">
                            Header
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.inviteheader';
                                $imgdim = '<br>560 x 216px';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="25" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="If you want to frame your invitations with images down the side, don't forget they need to be repeatable - 73px wide">
                            Left Sidebar
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.invitesidebar_left';
                                $imgdim = '<br>73px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="26" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Is the main body of the invitation. Again this needs to be a repeatable pattern or one plain colour allowing the invitation to expand as events are added. ">
                            Content
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.invitecontent';
                                $imgdim = '<br>415px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="27" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="If you want to frame your invitations with images down the side, don't forget they need to be repeatable - 73px wide">
                            Right Sidebar
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.invitesidebar_right';
                                $imgdim = '<br>73px wide';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                        <li data-tutorial="28" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Finish off your invitation with a design at the bottom as well - 560 x 216PX">
                            Footer
                            <div class="th_ctrl-infopanel">
                                <?php
                                $prefix = '.invitefooter';
                                $imgdim = '<br>560 x 216px';
                                include('includes/controls_bg.php');
                                ?>
                            </div>
                        </li>

                    </ul>
                    <p>Invitation Text</p>
                    <ul class="th_ctrl-groups" data-tutorial="29" data-tutorialloc="left" data-tutorialoffset="top"
                        data-click="true"
                        data-tutorialtext="The content is edited through the invitation tab on your homepage. You also preview how it looks from there too. ">
                        <li data-tutorial="30" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="This refers just to the top opening line of the invitation and Save the Date.">
                            Introduction
                            <div class="th_ctrl-infopanel">


                                <?php
                                $elms = '.line_1,.line_md';
                                $linker = 'intro-text-font';
                                $title = 'Font Family';

                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');
                                ?>


                                <div class="th_ctrl-dropdown text-align">
                                    <span>Align</span>

                                    <div class="th_ctrl-dropdown-options" data-id="text-align" data-key="text-align"
                                         data-elms=".line_1">
                                        <p data-key="" data-val="" style="text-align: left;">Left</p>

                                        <p data-key="" data-val="" style="text-align: center;">Middle</p>

                                        <p data-key="" data-val="" style="text-align: right;">Right</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                                <div class="th_ctrl-rule">
                                    <span data-id="menu-width">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".line_1"
                                          data-key="line-height" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".line_1" data-key="line-height"
                                          data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>

                        <li data-tutorial="31" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="This refers to any additional text between the intro and the first event. On the Save the Date, this is the main content that is displayed.">
                            Announcement
                            <div class="th_ctrl-infopanel">


                                <?php
                                $title = 'Font Family';
                                $elms = '.line_1b';
                                $linker = 'intro-sub-text-font';
                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');
                                ?>


                                <div class="th_ctrl-dropdown text-align">
                                    <span>Align</span>

                                    <div class="th_ctrl-dropdown-options" data-id="text-align" data-key="text-align"
                                         data-elms=".line_1b">
                                        <p data-key="" data-val="" style="text-align: left;">Left</p>

                                        <p data-key="" data-val="" style="text-align: center;">Middle</p>

                                        <p data-key="" data-val="" style="text-align: right;">Right</p>
                                    </div>
                                    <!-- closing options -->
                                </div>
                                <!-- closing dropdown -->

                                <div class="th_ctrl-rule">
                                    <span data-id="menu-width">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".line_1b"
                                          data-key="line-height" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".line_1b"
                                          data-key="line-height" data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>

                        <li data-tutorial="32" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Anything in this section will change the colour, font and size of the venues stated on the invitation">
                            Venue Title
                            <div class="th_ctrl-infopanel">

                                <?php
                                $title = 'Font Family';
                                $elms = '.line_3';
                                $linker = 'venue-text-font';
                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');
                                ?>


                                <div class="th_ctrl-rule">
                                    <span data-id="venue_spacing">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".line_3"
                                          data-key="line-height" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".line_3" data-key="line-height"
                                          data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>

                        <li data-tutorial="33" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="Anything in this section will change the colour, font and size of the dates and addresses stated on the invitation">
                            Date &amp; Address text
                            <div class="th_ctrl-infopanel">

                                <?php
                                $title = 'Font Family';
                                $elms = '.line_4b,.line_5b';
                                $linker = 'addr-text-font';
                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');
                                ?>


                                <div class="th_ctrl-rule">
                                    <span data-id="venue_spacing">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".line_4b,.line_5b"
                                          data-key="line-height" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".line_4b,.line_5b"
                                          data-key="line-height" data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>

                        <li data-tutorial="34" data-tutorialloc="left" data-tutorialoffset="top" data-click="true"
                            data-tutorialtext="If you change the colour, font and size of the bottom part of the text, it is also applied to the at/on/followedby text too. ">
                            Footer text
                            <div class="th_ctrl-infopanel">


                                <?php
                                $title = 'Font Family';
                                $elms = '.line_10, .link_md';
                                $linker = 'ftr-text-font';
                                include('includes/controls_color.php');
                                include('includes/controls_fonts.php');
                                include('includes/controls_fontsize.php');

                                ?>


                                <div class="th_ctrl-rule">
                                    <span data-id="venue_spacing">Spacing</span>
                                    <br>
                                    <span class="th_ctrl-increment icon-minus" data-elms=".line_10"
                                          data-key="line-height" data-value="-" data-value-append="px"></span>
                                    <span class="th_ctrl-increment icon-plus" data-elms=".line_10"
                                          data-key="line-height" data-value="+" data-value-append="px"></span>
                                </div>

                            </div>

                        </li>

                    </ul>
                </div>


            </li>
            <!-- closing content -->
            <?php
            if ($site->user_loggedin || $asite->user_loggedin) {
                $user = false;
                $allow_id = false;
                $allow_uid = false;

                if ($site->user_loggedin) {
                    $user = $site->user_id;
                    $allow_uid = true;
                }

                if ($asite->user_loggedin) {
                    $user = $asite->user_id;
                    $allow_id = true;
                }
                ?>

                <li data-id="css_stylesheet" data-tutorial="19" data-tutorialloc="left" data-tutorialoffset="top"
                    data-click="true"
                    data-tutorialtext="Before you can save your theme, you need to login, don't worry, you can log in at the end if you like!">
                    Save Theme

                    <div class="th_ctrl-infopanel">
                        <?php
                        if ($site->user_loggedin && $asite->user_loggedin) {
                            ?>
                            <p style="line-height: 18px; width: 180px;  text-indent: 0;  margin: auto;  color: #ff0000;  margin-bottom: 10px;">
                                You are logged in as a Designer and a User, please log out of one account and reload the
                                themer.</p>
                            <?php
                        } else {
                            ?>

                            <ul class="th_ctrl-groups">
                                <li class="active"
                                    style="text-align:center;<?= ((isset($theme) || !$asite->user_loggedin) ? 'text-indent:0px' : null) ?>">
                                    <input type="hidden" name="website" value="1">
                                    <input type="hidden" name="email" value="0">
                                    <input type="hidden" name="id"
                                           value="<?= ((isset($site->get_cmsid) && $allow_id) ? $site->get_cmsid : null) ?><?= ((isset($site->get_id) && $allow_uid) ? $site->get_id : null) ?>">
                                    <input type="hidden" name="type"
                                           value="<?= (($site->user_loggedin) ? 'login' : 'designer') ?>">
                                    <?php
                                    if ($asite->user_loggedin) {
                                        ?>
                                        <input type="hidden" name="admin" value="1">
                                        <?php
                                        if (isset($theme)) {
                                            ?>
                                            <input type="hidden" name="title" value="<?= $theme['title'] ?>"
                                                   class="theme_title text_input">
                                            <input type="hidden" name="parent" value="<?= $theme['parent'] ?>">
                                            <?php
                                        } else {
                                            ?>
                                            <p class="login_text">Select the parent theme (only applies if this is a
                                                colour variation of a theme).</p>
                                            <select name="parent" class="theme_select">
                                                <option>This is the parent theme</option>
                                                <?php

                                                $args = array(
                                                    'operator' => 'select',
                                                    'table' => 'themes',
                                                    'where' => array(
                                                        '_relation' => 'AND',
                                                        array(
                                                            'key' => 'designer',
                                                            'val' => $asite->user_id,
                                                            '_operator' => '='
                                                        ),
                                                        array('key' => 'website', 'val' => '1', '_operator' => '='),
                                                        array('key' => 'parent', 'val' => '0', '_operator' => '=')
                                                    )
                                                );
                                                $themes = $site->query($args);

                                                if ($themes) {
                                                    foreach ($themes as $key => $val) {
                                                        ?>
                                                        <option value="<?= $val['id'] ?>"><?= $val['title'] ?>
                                                            (<?= current(explode(' ', $val['date_updated'])) ?>)
                                                        </option>
                                                        <?php
                                                    }
                                                }

                                                ?>
                                            </select>
                                            <input type="text" name="title" placeholder="Theme Title" value=""
                                                   class="theme_title text_input">
                                            <br>
                                            <?php
                                        }


                                    } else {
                                        ?>
                                        <input type="hidden" name="parent" value="0">
                                        <input type="hidden" name="title" value="Custom Theme">
                                        <?php
                                    }
                                    ?>
                                    <input type="button" class="save" value="SAVE THEME"><br>
                                    <a href="//uk.paperlesswedding.com/~<?= $site->user_uri ?>/wizard-2/themes?select_added"
                                       style="color: #4C4545;">Return
                                        to
                                        main
                                        website</a>
                                </li>
                            </ul>
                            <?php
                        }
                        ?>
                    </div>
                </li>

                <?php
            } else {
                ?>

                <li data-id="css_stylesheet" data-tutorial="19" data-tutorialloc="left" data-tutorialoffset="top"
                    data-click="true"
                    data-tutorialtext="Before you can save your theme, you need to login, don't worry, you can log in at the end if you like!">
                    Login

                    <div class="th_ctrl-infopanel">
                        <ul class="th_ctrl-groups">
                            <li class="active" style="text-align:center;">
                                <p class="login_text">You must be logged in to save your theme.</p>

                                <form action="post" class="login_username_password">
                                    <input type="hidden" name="action" value="login">
                                    <input type="hidden" name="allowadmin" value="login">
                                    <input type="text" name="email" value="" class="text_input"
                                           placeholder="Email address">
                                    <input type="password" name="password" value="" class="text_input"
                                           placeholder="Password">
                                    <input type="button" class="login" value="Login >">
                                    <input type="button" class="please_wait" value="Please wait..">

                                    <div style="clear:both"></div>
                                </form>

                                <p class="login_text"><strong>Don't have an accout?</strong> No problem! Just
                                    <a target="_blank" href="<?= $_GLOBAL['SITE_URL'] ?>/sign-up-login">Sign up</a> and
                                    then log in!</p>
                            </li>
                        </ul>

                    </div>
                </li>
                <?php
            }
            ?>
        </ul>

        <div class="buttons" data-tutorial="20" data-tutorialloc="left" data-tutorialoffset="top" data-click="false"
             data-tutorialtext="These are your undo, redo controls, when you make a change, but you prefer it how it was, simply click the undo button, if you decide you then want to reinstate it, click the redo button!">
            <button class="undo">UNDO</button>
            <button class="redo">REDO</button>
        </div>
    </div>


    <a href="javascript:void(0);" class="th_ctrl-btn" data-tutorial="9" data-tutorialloc="bottom"
       data-tutorialoffset="right" data-click="false"
       data-tutorialtext="Oh yeah, you can hide the side controls too! To reveal the controls click the same button again. Simple!"></a>
</div>


<div class="th_previewer" data-tutorial="21" data-tutorialloc="top" data-tutorialoffset="left" data-click="false"
     data-tutorialtext="This is the preview window for your theme, clicking on certain elements will select the correct controls on the right, you can also resize these elements by dragging their corners.">
    <iframe src="layouts/<?= $layout ?>/index.php?nocache=<?= rand(1000, 9000) ?>" id="previewiframe"></iframe>
    <div class="th_ctrl-uploading preview_loading" style="display:block;background-color:#fff"></div>
</div>


<div class="t_l t_wrapper"></div>
<div class="t_r t_wrapper"></div>
<div class="t_t t_wrapper"></div>
<div class="t_b t_wrapper"></div>

<div class="t_text start t_wrapper">
    <p class="inner" style="margin-bottom:20px;"></p>

    <div class="tut_controls">
        <a href="javascript:nextTutorial();" class="t_next" style="font-weight: bold;float: right;">Start tutorial!</a>
        <a href="javascript:closeTutorial();" class="t_finish" style="font-weight: normal;float: left;">Close
            tutorial</a>
    </div>
</div>


<div class="t_loading" style="display:block;position:fixed;">
    <div class="innertext">
        <strong class="t_title">Welcome to the Paperless Wedding Theme Builder!</strong><br>Please wait while we set
        things up..<br><br>
        <span class="loading_item"></span>
    </div>
</div>

<div class="t_tooold" style="display:none;position:fixed;">
    <div class="innertext">
        <strong class="t_title">Welcome to the Paperless Wedding Theme Builder!</strong><br><br>

        Unfortunately you are browsing the internet on an out of date version internet explorer, this means you will not
        be able to use our Theme Builder.<br><br><br>
        Please consider updating Internet Explorer or installing a new Browser<br>
        <a class="browser_icon chrome_icon" href="//www.google.com/chrome/browser/">Google Chrome</a>
        <a class="browser_icon firefox_icon" href="//www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>
        <a class="browser_icon ie_icon" href="//windows.microsoft.com/en-gb/internet-explorer/download-ie">Internet
            Explorer</a>
        <br><br>
        <a href="//www.paperlesswedding.co.uk" style="font-weight:bold">Take me back to the Paperless Wedding
            Website</a>
    </div>
</div>

<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-50046523-1', 'paperlesswedding.co.uk');
    ga('send', 'pageview', '/theme-builder-website');
</script>
</body>
</html>