From: Chuck Hagenbuch <chuck@horde.org>
Date: Tue, 21 Oct 2008 04:16:45 +0000 (-0400)
Subject: import flexdemo to the hatchery
X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=57c06849af3c2e325bd6a80e102e684f7e0568dc;p=horde.git

import flexdemo to the hatchery
---

diff --git a/flexdemo/alt.php b/flexdemo/alt.php
new file mode 100644
index 000000000..5503a1b12
--- /dev/null
+++ b/flexdemo/alt.php
@@ -0,0 +1,15 @@
+<?php
+
+define('AUTH_HANDLER', true);
+define('HORDE_BASE', dirname(__FILE__) . '/..');
+require_once HORDE_BASE . '/lib/base.php';
+require_once 'Horde/Autoloader.php';
+
+$v = new Horde_View(array('templatePath' => dirname(__FILE__) . '/garland'));
+new Horde_View_Helper_Block($v);
+
+$v->left = array(array('flexdemo', 'block1'),
+                 array('flexdemo', 'block2'));
+$v->app = array('list');
+
+echo $v->render('secondary.html.php');
diff --git a/flexdemo/garland/app.html.php b/flexdemo/garland/app.html.php
new file mode 100644
index 000000000..ee9db0800
--- /dev/null
+++ b/flexdemo/garland/app.html.php
@@ -0,0 +1,4 @@
+<?php
+foreach ($this->app as $tpl) {
+    echo $this->render($tpl . '.html.php');
+}
diff --git a/flexdemo/garland/css/defaults-rtl.css b/flexdemo/garland/css/defaults-rtl.css
new file mode 100644
index 000000000..84d764661
--- /dev/null
+++ b/flexdemo/garland/css/defaults-rtl.css
@@ -0,0 +1,7 @@
+/* $Id: defaults-rtl.css,v 1.3 2007/11/27 12:09:26 goba Exp $ */
+
+th {
+  text-align: right;
+  padding-right: 0;
+  padding-left: 1em;
+}
diff --git a/flexdemo/garland/css/defaults.css b/flexdemo/garland/css/defaults.css
new file mode 100644
index 000000000..56ef350da
--- /dev/null
+++ b/flexdemo/garland/css/defaults.css
@@ -0,0 +1,53 @@
+/* $Id: defaults.css,v 1.5 2007/10/02 12:10:40 dries Exp $ */
+
+/*
+** HTML elements
+*/
+fieldset {
+  margin-bottom: 1em;
+  padding: .5em;
+}
+form {
+  margin: 0;
+  padding: 0;
+}
+hr {
+  height: 1px;
+  border: 1px solid gray;
+}
+img {
+  border: 0;
+}
+table {
+  border-collapse: collapse;
+}
+th {
+  text-align: left; /* LTR */
+  padding-right: 1em; /* LTR */
+  border-bottom: 3px solid #ccc;
+}
+
+/*
+** Markup free clearing
+** Details: http://www.positioniseverything.net/easyclearing.html
+*/
+.clear-block:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clear-block {
+  display: inline-block;
+}
+
+/* Hides from IE-mac \*/
+* html .clear-block {
+  height: 1%;
+}
+.clear-block {
+  display: block;
+}
+/* End hide from IE-mac */
diff --git a/flexdemo/garland/css/fix-ie-rtl.css b/flexdemo/garland/css/fix-ie-rtl.css
new file mode 100644
index 000000000..84030cf49
--- /dev/null
+++ b/flexdemo/garland/css/fix-ie-rtl.css
@@ -0,0 +1,63 @@
+/* $Id: fix-ie-rtl.css,v 1.2 2007/11/09 22:14:41 goba Exp $ */
+
+body {
+  /* Center layout */
+  text-align: center;
+  /* Allow text resizing */
+  font-size: 80%;
+}
+
+#squeeze {
+  zoom: 1;
+  direction: ltr;
+}
+
+#squeeze .left-corner{
+  direction: rtl
+}
+
+#header-region, #wrapper #container {
+  /* Reset text alignment */
+  text-align: right;
+}
+
+#wrapper #container #center {
+  /* Reduce amount of damage done by extremely wide content */
+  overflow: hidden;
+}
+
+#wrapper #container #center .right-corner .left-corner {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 400px;
+}
+
+fieldset {
+  /* Don't draw backgrounds on fieldsets in IE, as they look really bad. */
+  background: none;
+}
+
+/* Prevent fieldsets from shifting when changing collapsed state. */
+html.js fieldset.collapsible {
+  position: relative;
+  top: -1em;
+}
+
+html.js fieldset.collapsed {
+  top: 0;
+  margin-bottom: 1em;
+}
+
+tr.menu-disabled {
+  /* Use filter to emulate CSS3 opacity */
+  filter: alpha(opacity=50);
+}
+
+#header-region {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 1em;
+}
+
+#attach-hide label, #uploadprogress div.message {
+  /* Fading elements in IE causes the text to bleed unless they have a background. */
+  background-color: #ffffff;
+}
diff --git a/flexdemo/garland/css/fix-ie.css b/flexdemo/garland/css/fix-ie.css
new file mode 100644
index 000000000..048863d27
--- /dev/null
+++ b/flexdemo/garland/css/fix-ie.css
@@ -0,0 +1,69 @@
+/* $Id: fix-ie.css,v 1.8.2.1 2008/02/05 09:27:26 goba Exp $ */
+
+/**
+ * Garland, for Drupal 6.x
+ * Stefan Nagtegaal, iStyledThis [dot] nl
+ * Steven Wittens, acko [dot] net
+ */
+
+body {
+  /* Center layout */
+  text-align: center;
+  /* Allow text resizing */
+  font-size: 80%;
+}
+
+#header-region, #wrapper #container {
+  /* Reset text alignment */
+  text-align: left; /* LTR */
+}
+
+#wrapper #container #center {
+  /* Reduce amount of damage done by extremely wide content */
+  overflow: hidden;
+}
+
+#wrapper #container #center .right-corner .left-corner {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 400px;
+}
+
+fieldset {
+  /* Don't draw backgrounds on fieldsets in IE, as they look really bad. */
+  background: none;
+}
+
+ul.primary {
+  /* Fix missing top margin */
+  position: relative; /* LTR */
+/*  top: 0.5em; */
+}
+
+/* Prevent fieldsets from shifting when changing collapsed state. */
+html.js fieldset.collapsible {
+  position: relative;
+  top: -1em;
+}
+html.js fieldset.collapsed {
+  top: 0;
+  margin-bottom: 1em;
+}
+
+tr.menu-disabled {
+  /* Use filter to emulate CSS3 opacity */
+  filter: alpha(opacity=50);
+}
+
+#header-region {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 1em;
+}
+
+tr.taxonomy-term-preview {
+  filter: alpha(opacity=50);
+}
+
+#attach-hide label, #uploadprogress div.message {
+  /* Fading elements in IE causes the text to bleed unless they have a background. */
+  background-color: #ffffff;
+}
diff --git a/flexdemo/garland/css/print.css b/flexdemo/garland/css/print.css
new file mode 100644
index 000000000..b45a26335
--- /dev/null
+++ b/flexdemo/garland/css/print.css
@@ -0,0 +1,55 @@
+/* $Id: print.css,v 1.3 2007/09/06 21:23:32 goba Exp $ */
+
+/**
+ * Garland, for Drupal 5.0
+ * Stefan Nagtegaal, iStyledThis [dot] nl
+ * Steven Wittens, acko [dot] net`
+ *
+ * If you use a customized color scheme, you must regenerate it after
+ * modifying this file.
+ */
+
+body, input, textarea, select {
+  color: #000;
+  background: none;
+}
+
+ul.primary-links, ul.secondary-links,
+#header-region, .sidebar {
+  display: none;
+}
+
+body.sidebars, body.sideber-left, body.sidebar-right, body {
+  width: 640px;
+}
+
+body.sidebar-left #center, body.sidebar-right #center, body.sidebars #center,
+body.sidebar-left #squeeze, body.sidebar-right #squeeze, body.sidebars #squeeze {
+  margin: 0;
+}
+
+#wrapper,
+#wrapper #container .breadcrumb,
+#wrapper #container #center,
+#wrapper #container #center .right-corner,
+#wrapper #container #center .right-corner .left-corner,
+#wrapper #container #footer,
+#wrapper #container #center #squeeze {
+  position: static;
+  left: 0;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  float: none;
+  clear: both;
+  background: none;
+}
+
+#wrapper #container #header {
+  height: 130px;
+}
+
+#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
+  text-shadow: none;
+  color: #000;
+}
diff --git a/flexdemo/garland/css/style-rtl.css b/flexdemo/garland/css/style-rtl.css
new file mode 100644
index 000000000..f5fa6d7ec
--- /dev/null
+++ b/flexdemo/garland/css/style-rtl.css
@@ -0,0 +1,293 @@
+/* $Id: style-rtl.css,v 1.6 2007/12/17 15:05:10 goba Exp $ */
+
+html {
+  direction: rtl;
+}
+
+/**
+ * Generic elements
+ */
+body {
+  direction: rtl;
+}
+
+ol li, ul li {
+  margin: 0.4em .5em 0.4em 0;
+}
+
+ul.menu, .item-list ul {
+  margin: 0.35em -0.5em 0 0;
+}
+
+ul.menu ul, .item-list ul ul {
+  margin-left: 0;
+  margin-right: 0em;
+}
+
+ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
+  margin: 0.15em .5em 0.15em 0;
+}
+
+ul li, ul.menu li, .item-list ul li, li.leaf {
+  padding: 0 1.5em .2em 0;
+  background: transparent url("../images/menu-leaf.gif") no-repeat 100% .35em;
+}
+
+ol li {
+  margin-left: 0;
+  margin-right: 2em;
+}
+
+ul li.expanded {
+  background: transparent url("../images/menu-expanded.gif") no-repeat 100% .35em;
+}
+
+ul li.collapsed {
+  background: transparent url("../images/menu-collapsed-rtl.gif") no-repeat 100% .35em;
+}
+
+ul.inline li {
+  padding: 0 0 0 1em;
+}
+
+ol.task-list {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+ol.task-list li {
+  padding: 0.5em 2em 0.5em 1em;
+}
+
+ol.task-list li.active {
+  background: transparent url(../images/task-list.png) no-repeat 97px 50%;
+}
+
+ol.task-list li.done {
+  background: transparent url(../../misc/watchdog-ok.png) no-repeat 100% 50%;
+}
+
+ol.task-list li.active {
+  margin-right: 0;
+  margin-left: 1em;
+}
+
+dl {
+  margin: 0.5em 1.5em 1em 0;
+}
+
+dl dt {
+}
+
+dl dd {
+  margin: 0 1.5em .5em 0;
+}
+
+.form-button, .form-submit {
+  margin: 2em 0 1em 0.5em;
+}
+
+#header-region h2 {
+  margin: 0 0 0 1em;
+}
+
+#wrapper {
+  background: #edf5fa url("../images/body.png") repeat-x 50% 0;
+}
+
+#wrapper #container #header h1 img {
+  padding-right: 0;
+  padding-left: 20px;
+  float: right;
+}
+
+#sidebar-left .block-region {
+  margin: 0 0 0 15px;
+}
+
+#sidebar-right .block-region {
+  margin: 0 15px 0px 0;
+}
+
+/* Now we add the backgrounds for the main content shading */
+#wrapper #container #center #squeeze {
+  background: #fff url("../images/bg-content.png") repeat-x 50% 0;
+}
+
+#wrapper #container .breadcrumb {
+  position: absolute;
+  top: 15px;
+  left: 0;
+  right: 35px;
+  z-index: 3;
+}
+
+/**
+ * Primary navigation
+ */
+ul.primary-links {
+  float: left;
+width:70%;
+}
+
+ul.primary-links li {
+  float: right;
+}
+
+/**
+ * Secondary navigation
+ */
+ul.secondary-links {
+  float: left;
+  clear: left;
+}
+
+ul.secondary-links li {
+  float: right;
+}
+
+ul.primary {
+  float: right;
+}
+ul.secondary {
+  clear: both;
+  text-align: right;
+}
+h2.with-tabs {
+  float: right;
+  margin: 0 0 0 2em;
+}
+
+ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
+ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
+  margin: 0 1px 0 0;
+
+}
+ul.primary li a:after {
+  /* Fix Firefox 2 RTL bug. */
+  content: " ";
+}
+
+ul.links li, ul.inline li {
+  padding-left: 1em;
+  padding-right: 0;
+}
+
+.node .links, .comment .links {
+  text-align: right;
+}
+
+.node .links ul.links li, .comment .links ul.links li {}
+.terms ul.links li {
+  padding-right: 1em;
+  padding-left: 0;
+}
+
+.picture, .comment .submitted {
+  padding-left: 0;
+  float: left;
+  clear: left;
+  padding-right: 1em;
+}
+
+.new {
+  float: left;
+}
+
+.terms {
+  float: left;
+}
+
+.indented {
+  margin-left: 0;
+  margin-right: 25px;
+}
+
+html.js fieldset.collapsible legend a {
+  padding-left: 0;
+  padding-right: 2em;
+  background: url("../images/menu-expanded.gif") no-repeat 100% 50%;
+}
+
+html.js fieldset.collapsed legend a {
+  background: url("../images/menu-collapsed-rtl.gif") no-repeat 100% 50%;
+}
+
+/**
+ * Syndication Block
+ */
+#block-node-0 h2 {
+  float: right;
+  padding-right: 0;
+  padding-left: 20px;
+}
+
+#block-node-0 img {
+  float: left;
+}
+
+#block-node-0 .content {
+  clear: left;
+}
+
+/**
+ * Login Block
+ */
+#user-login-form ul {
+  text-align: right;
+}
+
+div.admin .left {
+  float: right;
+}
+
+div.admin .right {
+  float: left;
+}
+
+/* Fix Opera, IE6 and IE7 header width */
+#wrapper #container #header {
+  position: relative;
+  width: 100%;
+}
+
+#wrapper #container #header #logo-floater {
+  width: 100%;
+  left: 0;
+  top:0;
+}
+
+/**
+ * Fixes for IE7 - Does not break other browsers
+ */
+
+/* Position:relative on these breaks IE7. */
+ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
+ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
+  position: static;
+}
+
+/* Fix right and left cloumns position breaking on window resize */
+#container {
+  position: relative;
+}
+
+#center {
+  position: relative;
+}
+
+#sidebar-right{
+  position: absolute;
+  right: 0;
+}
+
+/**
+ * Apply hasLayout to elements in IE7, using standard property "min-height"
+ * (see http://www.satzansatz.de/cssd/onhavinglayout.html)
+ */
+
+/* Fix background bleed in center column. */
+#squeeze,
+#squeeze .right-corner {
+  min-height: 1%;
+}
diff --git a/flexdemo/garland/css/style.css b/flexdemo/garland/css/style.css
new file mode 100644
index 000000000..4b151b0f4
--- /dev/null
+++ b/flexdemo/garland/css/style.css
@@ -0,0 +1,1079 @@
+/* $Id: style.css,v 1.38.2.1 2008/02/05 09:27:26 goba Exp $ */
+
+/**
+ * Garland, for Drupal 6.x
+ * Stefan Nagtegaal, iStyledThis [dot] nl
+ * Steven Wittens, acko [dot] net`
+ *
+ * If you use a customized color scheme, you must regenerate it after
+ * modifying this file.
+ */
+
+/**
+ * Generic elements
+ */
+body {
+  margin: 0;
+  padding: 0;
+  background: #edf5fa;
+  font: 12px/170% Verdana, sans-serif;
+  color: #494949;
+}
+
+input {
+  font: 12px/100% Verdana, sans-serif;
+  color: #494949;
+}
+
+textarea, select {
+  font: 12px/160% Verdana, sans-serif;
+  color: #494949;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+h1 {
+  font-size: 170%;
+}
+
+h2 {
+  font-size: 160%;
+  line-height: 130%;
+}
+
+h3 {
+  font-size: 140%;
+}
+
+h4 {
+  font-size: 130%;
+}
+
+h5 {
+  font-size: 120%;
+}
+
+h6 {
+  font-size: 110%;
+}
+
+ul, quote, code, fieldset {
+  margin: .5em 0;
+}
+
+p {
+  margin: 0.6em 0 1.2em;
+  padding: 0;
+}
+
+a:link, a:visited {
+  color: #027AC6;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #0062A0;
+  text-decoration: underline;
+}
+
+a:active, a.active {
+  color: #5895be;
+}
+
+hr {
+  margin: 0;
+  padding: 0;
+  border: none;
+  height: 1px;
+  background: #5294c1;
+}
+
+ul {
+  margin: 0.5em 0 1em;
+  padding: 0;
+}
+
+ol {
+  margin: 0.75em 0 1.25em;
+  padding: 0;
+}
+
+ol li, ul li {
+  margin: 0.4em 0 0.4em .5em; /* LTR */
+}
+
+ul.menu, .item-list ul {
+  margin: 0.35em 0 0 -0.5em; /* LTR */
+  padding: 0;
+}
+
+ul.menu ul, .item-list ul ul {
+  margin-left: 0em; /* LTR */
+}
+
+ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
+  margin: 0.15em 0 0.15em .5em; /* LTR */
+}
+
+ul li, ul.menu li, .item-list ul li, li.leaf {
+  padding: 0 0 .2em 1.5em;
+  list-style-type: none;
+  list-style-image: none;
+  background: transparent url(../images/menu-leaf.gif) no-repeat 1px .35em; /* LTR */
+}
+
+ol li {
+  padding: 0 0 .3em;
+  margin-left: 2em; /* LTR */
+}
+
+ul li.expanded {
+  background: transparent url(../images/menu-expanded.gif) no-repeat 1px .35em; /* LTR */
+}
+
+ul li.collapsed {
+  background: transparent url(../images/menu-collapsed.gif) no-repeat 0px .35em; /* LTR */
+}
+
+ul li.leaf a, ul li.expanded a, ul li.collapsed a {
+  display: block;
+}
+
+ul.inline li {
+  background: none;
+  margin: 0;
+  padding: 0 1em 0 0; /* LTR */
+}
+
+ol.task-list {
+  margin-left: 0; /* LTR */
+  list-style-type: none;
+  list-style-image: none;
+}
+ol.task-list li {
+  padding: 0.5em 1em 0.5em 2em; /* LTR */
+}
+ol.task-list li.active {
+  background: transparent url(../images/task-list.png) no-repeat 3px 50%; /* LTR */
+}
+ol.task-list li.done {
+  color: #393;
+  background: transparent url(../../misc/watchdog-ok.png) no-repeat 0px 50%; /* LTR */
+}
+ol.task-list li.active {
+  margin-right: 1em; /* LTR */
+}
+
+fieldset ul.clear-block li {
+  margin: 0;
+  padding: 0;
+  background-image: none;
+}
+
+dl {
+  margin: 0.5em 0 1em 1.5em; /* LTR */
+}
+
+dl dt {
+}
+
+dl dd {
+  margin: 0 0 .5em 1.5em; /* LTR */
+}
+
+img, a img {
+  border: none;
+}
+
+table {
+  margin: 1em 0;
+  width: 100%;
+}
+
+thead th {
+  border-bottom: 2px solid #d3e7f4;
+  color: #494949;
+  font-weight: bold;
+}
+
+th a:link, th a:visited {
+  color: #6f9dbd;
+}
+
+td, th {
+  padding: .3em .5em;
+}
+
+tr.even, tr.odd, tbody th {
+  border: solid #d3e7f4;
+  border-width: 1px 0;
+}
+
+tr.odd, tr.info {
+  background-color: #edf5fa;
+}
+
+tr.even {
+  background-color: #fff;
+}
+
+tr.drag {
+  background-color: #fffff0;
+}
+
+tr.drag-previous {
+  background-color: #ffd;
+}
+
+tr.odd td.active {
+  background-color: #ddecf5;
+}
+
+tr.even td.active {
+  background-color: #e6f1f7;
+}
+
+td.region, td.module, td.container, td.category {
+  border-top: 1.5em solid #fff;
+  border-bottom: 1px solid #b4d7f0;
+  background-color: #d4e7f3;
+  color: #455067;
+  font-weight: bold;
+}
+
+tr:first-child td.region, tr:first-child td.module, tr:first-child td.container, tr:first-child td.category {
+  border-top-width: 0;
+}
+
+span.form-required {
+  color: #ffae00;
+}
+
+span.submitted, .description {
+  font-size: 0.92em;
+  color: #898989;
+}
+
+.description {
+  line-height: 150%;
+  margin-bottom: 0.75em;
+  color: #898989;
+}
+
+.messages, .preview {
+  margin: .75em 0 .75em;
+  padding: .5em 1em;
+}
+
+.messages ul {
+  margin: 0;
+}
+
+.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
+  margin: 0.25em 0;
+}
+
+#center form {
+  margin-bottom: 2em;
+}
+
+.form-button, .form-submit {
+  margin: 2em 0.5em 1em 0; /* LTR */
+}
+
+#dblog-form-overview .form-submit,
+.confirmation .form-submit,
+.search-form .form-submit,
+.poll .form-submit,
+fieldset .form-button, fieldset .form-submit,
+.sidebar .form-button, .sidebar .form-submit,
+table .form-button, table .form-submit {
+  margin: 0;
+}
+
+.box {
+  margin-bottom: 2.5em;
+}
+
+/**
+ * Layout
+ */
+#header-region {
+  min-height: 1em;
+  background: #d2e6f3 url(../images/bg-navigation.png) repeat-x 50% 100%;
+}
+
+#header-region .block {
+  display: block;
+  margin: 0 1em;
+}
+
+#header-region .block-region {
+  display: block;
+  margin: 0 0.5em 1em;
+  padding: 0.5em;
+  position: relative;
+  top: 0.5em;
+}
+
+#header-region * {
+  display: inline;
+  line-height: 1.5em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Prevent the previous directive from showing the content of script elements in Mozilla browsers. */
+#header-region script {
+  display: none;
+}
+
+#header-region p, #header-region img {
+  margin-top: 0.5em;
+}
+
+#header-region h2 {
+  margin: 0 1em 0 0; /* LTR */
+}
+
+#header-region h3, #header-region label, #header-region li {
+  margin: 0 1em;
+  padding: 0;
+  background: none;
+}
+
+#wrapper {
+  background: #edf5fa url(../images/body.png) repeat-x 50% 0;
+}
+
+#wrapper #container {
+  margin: 0 auto;
+  padding: 0 20px;
+  max-width: 1270px;
+}
+
+#wrapper #container #header {
+  height: 80px;
+}
+
+#wrapper #container #header #logo-floater {
+  position: absolute;
+}
+
+#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
+  line-height: 120px;
+  position: relative;
+  z-index: 2;
+  white-space: nowrap;
+}
+
+#wrapper #container #header h1 span {
+  font-weight: bold;
+}
+
+#wrapper #container #header h1 img {
+  padding-top: 16px;
+  padding-right: 20px; /* LTR */
+  float: left; /* LTR */
+}
+
+/* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
+body.sidebars {
+  min-width: 980px;
+}
+/* With 2 columns, require a minimum width of 800px. */
+body.sidebar-left, body.sidebar-right {
+  min-width: 780px;
+}
+
+/* We must define 100% width to avoid the body being too narrow for near-empty pages */
+#wrapper #container #center {
+  float: left;
+  width: 100%;
+}
+
+/* So we move the #center container over the sidebars to compensate */
+body.sidebar-left #center {
+  margin-left: -210px;
+}
+body.sidebar-right #center {
+  margin-right: -210px;
+}
+body.sidebars #center {
+  margin: 0 -210px;
+}
+
+/* And add blanks left and right for the sidebars to fill */
+body.sidebar-left #squeeze {
+  margin-left: 210px;
+}
+body.sidebar-right #squeeze {
+  margin-right: 210px;
+}
+body.sidebars #squeeze {
+  margin: 0 210px;
+}
+
+/* We ensure the sidebars are still clickable using z-index */
+#wrapper #container .sidebar {
+  margin: 60px 0 5em;
+  width: 210px;
+  float: left;
+  z-index: 2;
+  position: relative;
+}
+
+#wrapper #container .sidebar .block {
+  margin: 0 0 1.5em 0;
+}
+
+#sidebar-left .block {
+  padding: 0 15px 0 0px;
+}
+
+#sidebar-right .block {
+  padding: 0 0px 0 15px;
+}
+
+.block .content {
+  margin: 0.5em 0;
+}
+
+#sidebar-left .block-region {
+  margin: 0 15px 0 0px; /* LTR */
+}
+
+#sidebar-right .block-region {
+  margin: 0 0px 0 15px; /* LTR */
+}
+
+.block-region {
+  padding: 1em;
+  background: transparent;
+  border: 2px dashed #b4d7f0;
+  text-align: center;
+  font-size: 1.3em;
+}
+
+/* Now we add the backgrounds for the main content shading */
+#wrapper #container #center #squeeze {
+  background: #fff url(../images/bg-content.png) repeat-x 50% 0;
+  position: relative;
+}
+
+#wrapper #container #center .right-corner {
+  background: transparent url(../images/bg-content-right.png) no-repeat 100% 0;
+  position: relative;
+  left: 10px;
+}
+
+#wrapper #container #center .right-corner .left-corner {
+  padding: 60px 25px 5em 35px;
+  background: transparent url(../images/bg-content-left.png) no-repeat 0 0;
+  margin-left: -10px;
+  position: relative;
+  left: -10px;
+  min-height: 400px;
+}
+
+#wrapper #container #footer {
+  float: none;
+  clear: both;
+  text-align: center;
+  margin: 4em 0 -3em;
+  color: #898989;
+}
+
+#wrapper #container .breadcrumb {
+  position: absolute;
+  top: 15px;
+  left: 35px; /* LTR */
+  z-index: 3;
+}
+
+body.sidebar-left #footer {
+  margin-left: -210px;
+}
+
+body.sidebar-right #footer {
+  margin-right: -210px;
+}
+
+body.sidebars #footer {
+  margin: 0 -210px;
+}
+
+/**
+ * Header
+ */
+#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
+  color: #fff;
+  font-weight: normal;
+  text-shadow: #1659ac 0px 1px 3px;
+  font-size: 1.5em;
+}
+
+#wrapper #container #header h1 a:hover {
+  text-decoration: none;
+}
+
+#wrapper #container .breadcrumb {
+  font-size: 0.92em;
+}
+
+#wrapper #container .breadcrumb, #wrapper #container .breadcrumb a {
+  color: #529ad6;
+}
+
+#mission {
+  padding: 1em;
+  background-color: #fff;
+  border: 1px solid #e0e5fb;
+  margin-bottom: 2em;
+}
+
+/**
+ * Primary navigation
+ */
+ul.primary-links {
+  margin: 0;
+  padding: 0;
+  float: right; /* LTR */
+  position: relative;
+  z-index: 4;
+}
+
+ul.primary-links li {
+  margin: 0;
+  padding: 0;
+  float: left; /* LTR */
+  background-image: none;
+}
+
+ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
+  display: block;
+  margin: 0 1em;
+  padding: .75em 0 0;
+  color: #fff;
+  background: transparent url(../images/bg-navigation-item.png) no-repeat 50% 0;
+}
+
+ul.primary-links li a:hover, ul.primary-links li a.active {
+  color: #fff;
+  background: transparent url(../images/bg-navigation-item-hover.png) no-repeat 50% 0;
+}
+
+/**
+ * Secondary navigation
+ */
+ul.secondary-links {
+  margin: 0;
+  padding: 18px 0 0;
+  float: right; /* LTR */
+  clear: right; /* LTR */
+  position: relative;
+  z-index: 4;
+}
+
+ul.secondary-links li {
+  margin: 0;
+  padding: 0;
+  float: left; /* LTR */
+  background-image: none;
+}
+
+ul.secondary-links li a, ul.secondary-links li a:link, ul.secondary-links li a:visited {
+  display: block;
+  margin: 0 1em;
+  padding: .75em 0 0;
+  color: #cde3f1;
+  background: transparent;
+}
+
+ul.secondary-links li a:hover, ul.secondary-links li a.active {
+  color: #cde3f1;
+  background: transparent;
+}
+
+/**
+ * Local tasks
+ */
+ul.primary, ul.primary li, ul.secondary, ul.secondary li {
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+
+#tabs-wrapper {
+  margin: 0 -26px 1em;
+  padding: 0 26px;
+  border-bottom: 1px solid #e9eff3;
+  position: relative;
+}
+ul.primary {
+  padding: 0.5em 0 10px;
+  float: left; /* LTR */
+}
+ul.secondary {
+  clear: both;
+  text-align: left; /* LTR */
+  border-bottom: 1px solid #e9eff3;
+  margin: -0.2em -26px 1em;
+  padding: 0 26px 0.6em;
+}
+h2.with-tabs {
+  float: left; /* LTR */
+  margin: 0 2em 0 0; /* LTR */
+  padding: 0;
+}
+
+ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
+ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
+  border: 0;
+  background: transparent;
+  padding: 4px 1em;
+  margin: 0 0 0 1px; /* LTR */
+  height: auto;
+  text-decoration: none;
+  position: relative;
+  top: -1px;
+}
+ul.primary li.active a, ul.primary li.active a:link, ul.primary li.active a:visited, ul.primary li a:hover,
+ul.secondary li.active a, ul.secondary li.active a:link, ul.secondary li.active a:visited, ul.secondary li a:hover {
+  background: url(../images/bg-tab.png) repeat-x 0 50%;
+  color: #fff;
+}
+ul.primary li.active a,
+ul.secondary li.active a {
+  font-weight: bold;
+}
+
+/**
+ * Nodes & comments
+ */
+.node {
+  border-bottom: 1px solid #e9eff3;
+  margin: -1.5em -26px 1.5em;
+  padding: 1.5em 26px;
+}
+
+ul.links li, ul.inline li {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0; /* LTR */
+  padding-right: 1em; /* LTR */
+  background-image: none;
+}
+
+.node .links, .comment .links {
+  text-align: left; /* LTR */
+}
+
+.node .links ul.links li, .comment .links ul.links li {}
+.terms ul.links li {
+  margin-left: 0;
+  margin-right: 0;
+  padding-right: 0;
+  padding-left: 1em;
+}
+
+.picture, .comment .submitted {
+  float: right; /* LTR */
+  clear: right; /* LTR */
+  padding-left: 1em; /* LTR */
+}
+
+.new {
+  color: #ffae00;
+  font-size: 0.92em;
+  font-weight: bold;
+  float: right; /* LTR */
+}
+
+.terms {
+  float: right; /* LTR */
+}
+
+.preview .node, .preview .comment, .sticky {
+  margin: 0;
+  padding: 0.5em 0;
+  border: 0;
+  background: 0;
+}
+
+.sticky {
+  padding: 1em;
+  background-color: #fff;
+  border: 1px solid #e0e5fb;
+  margin-bottom: 2em;
+}
+
+#comments {
+  position: relative;
+  top: -1px;
+  border-bottom: 1px solid #e9eff3;
+  margin: -1.5em -25px 0;
+  padding: 0 25px;
+}
+
+#comments h2.comments {
+  margin: 0 -25px;
+  padding: .5em 25px;
+  background: #fff url(../images/gradient-inner.png) repeat-x 0 0;
+}
+
+.comment {
+  margin: 0 -25px;
+  padding: 1.5em 25px 1.5em;
+  border-top: 1px solid #e9eff3;
+}
+
+.indented {
+  margin-left: 25px; /* LTR */
+}
+
+.comment h3 a.active {
+  color: #494949;
+}
+
+.node .content, .comment .content {
+  margin: 0.6em 0;
+}
+
+/**
+ * Aggregator.module
+ */
+#aggregator {
+  margin-top: 1em;
+}
+#aggregator .feed-item-title {
+  font-size: 160%;
+  line-height: 130%;
+}
+#aggregator .feed-item {
+  border-bottom: 1px solid #e9eff3;
+  margin: -1.5em -31px 1.75em;
+  padding: 1.5em 31px;
+}
+#aggregator .feed-item-categories {
+  font-size: 0.92em;
+}
+#aggregator .feed-item-meta {
+  font-size: 0.92em;
+  color: #898989;
+}
+
+/**
+ * Color.module
+ */
+#palette .form-item {
+  border: 1px solid #fff;
+}
+#palette .item-selected {
+  background: #fff url(../images/gradient-inner.png) repeat-x 0 0;
+  border: 1px solid #d9eaf5;
+}
+
+/**
+ * Menu.module
+ */
+tr.menu-disabled {
+  opacity: 0.5;
+}
+tr.odd td.menu-disabled {
+  background-color: #edf5fa;
+}
+tr.even td.menu-disabled {
+  background-color: #fff;
+}
+
+/**
+ * Poll.module
+ */
+.poll .bar {
+  background: #fff url(../images/bg-bar-white.png) repeat-x 0 0;
+  border: solid #f0f0f0;
+  border-width: 0 1px 1px;
+}
+
+.poll .bar .foreground {
+  background: #71a7cc url(../images/bg-bar.png) repeat-x 0 100%;
+}
+
+.poll .percent {
+  font-size: .9em;
+}
+
+/**
+ * Autocomplete.
+ */
+#autocomplete li {
+  cursor: default;
+  padding: 2px;
+  margin: 0;
+}
+
+/**
+ * Collapsible fieldsets
+ */
+fieldset {
+  margin: 1em 0;
+  padding: 1em;
+  border: 1px solid #d9eaf5;
+  background: #fff url(../images/gradient-inner.png) repeat-x 0 0;
+}
+
+/* Targets IE 7. Fixes background image in field sets. */
+*:first-child+html fieldset {
+  padding: 0 1em 1em;
+  background-position: 0 .75em;
+  background-color: transparent;
+}
+
+*:first-child+html fieldset > .description, *:first-child+html fieldset .fieldset-wrapper .description {
+  padding-top: 1em;
+}
+
+fieldset legend {
+  /* Fix disappearing legend in FFox */
+  display: block;
+}
+
+*:first-child+html fieldset legend, *:first-child+html fieldset.collapsed legend {
+  display: inline;
+}
+
+html.js fieldset.collapsed {
+  background: transparent;
+  padding-top: 0;
+  padding-bottom: .6em;
+}
+
+html.js fieldset.collapsible legend a {
+  padding-left: 2em; /* LTR */
+  background: url(../images/menu-expanded.gif) no-repeat 0% 50%; /* LTR */
+}
+
+html.js fieldset.collapsed legend a {
+  background: url(../images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */
+}
+
+/**
+ * Syndication icons and block
+ */
+#block-node-0 h2 {
+  float: left; /* LTR */
+  padding-right: 20px; /* LTR */
+}
+
+#block-node-0 img, .feed-icon {
+  float: right; /* LTR */
+  padding-top: 4px;
+}
+
+#block-node-0 .content {
+  clear: right; /* LTR */
+}
+
+/**
+ * Login Block
+ */
+#user-login-form {
+  text-align: center;
+}
+#user-login-form ul {
+  text-align: left; /* LTR */
+}
+
+/**
+ * User profiles.
+ */
+.profile {
+  margin-top: 1.5em;
+}
+.profile h3 {
+  border-bottom: 0;
+  margin-bottom: 1em;
+}
+.profile dl {
+  margin: 0;
+}
+.profile dt {
+  font-weight: normal;
+  color: #898989;
+  font-size: 0.92em;
+  line-height: 1.3em;
+  margin-top: 1.4em;
+  margin-bottom: 0.45em;
+}
+.profile dd {
+  margin-bottom: 1.6em;
+}
+
+/**
+ * Admin Styles
+ */
+div.admin-panel,
+div.admin-panel .description,
+div.admin-panel .body,
+div.admin,
+div.admin .left,
+div.admin .right,
+div.admin .expert-link,
+div.item-list,
+.menu {
+  margin: 0;
+  padding: 0;
+}
+
+div.admin .left {
+  float: left; /* LTR */
+  width: 48%;
+}
+div.admin .right {
+  float: right; /* LTR */
+  width: 48%;
+}
+
+div.admin-panel {
+  background: #fff url(../images/gradient-inner.png) repeat-x 0 0;
+  padding: 1em 1em 1.5em;
+}
+div.admin-panel .description {
+  margin-bottom: 1.5em;
+}
+div.admin-panel dl {
+  margin: 0;
+}
+div.admin-panel dd {
+  color: #898989;
+  font-size: 0.92em;
+  line-height: 1.3em;
+  margin-top: -.2em;
+  margin-bottom: .65em;
+}
+
+table.system-status-report th {
+  border-color: #d3e7f4;
+}
+
+#autocomplete li.selected, tr.selected td, tr.selected td.active {
+  background: #027ac6;
+  color: #fff;
+}
+
+tr.selected td a:link, tr.selected td a:visited, tr.selected td a:active {
+  color: #d3e7f4;
+}
+
+tr.taxonomy-term-preview {
+  opacity: 0.5;
+}
+
+tr.taxonomy-term-divider-top {
+  border-bottom: none;
+}
+
+tr.taxonomy-term-divider-bottom {
+  border-top: 1px dotted #CCC;
+}
+
+/**
+ * CSS support
+ */
+
+/*******************************************************************
+ * Color Module: Don't touch                                       *
+ *******************************************************************/
+
+/**
+ * Generic elements.
+ */
+.messages {
+  background-color: #fff;
+  border: 1px solid #b8d3e5;
+}
+
+.preview {
+  background-color: #fcfce8;
+  border: 1px solid #e5e58f;
+}
+
+div.status {
+  color: #33a333;
+  border-color: #c7f2c8;
+}
+
+div.error, tr.error {
+  color: #a30000;
+  background-color: #FFCCCC;
+}
+
+.form-item input.error, .form-item textarea.error {
+  border: 1px solid #c52020;
+  color: #363636;
+}
+
+/**
+ * dblog.module
+ */
+tr.dblog-user {
+  background-color: #fcf9e5;
+}
+
+tr.dblog-user td.active {
+  background-color: #fbf5cf;
+}
+
+tr.dblog-content {
+  background-color: #fefefe;
+}
+
+tr.dblog-content td.active {
+  background-color: #f5f5f5;
+}
+
+tr.dblog-warning {
+  background-color: #fdf5e6;
+}
+
+tr.dblog-warning td.active {
+  background-color: #fdf2de;
+}
+
+tr.dblog-error {
+  background-color: #fbe4e4;
+}
+
+tr.dblog-error td.active {
+  background-color: #fbdbdb;
+}
+tr.dblog-page-not-found, tr.dblog-access-denied {
+  background: #d7ffd7;
+}
+tr.dblog-page-not-found td.active, tr.dblog-access-denied td.active {
+  background: #c7eec7;
+}
+
+/**
+ * Status report colors.
+ */
+table.system-status-report tr.error, table.system-status-report tr.error th {
+  background-color: #fcc;
+  border-color: #ebb;
+  color: #200;
+}
+table.system-status-report tr.warning, table.system-status-report tr.warning th {
+  background-color: #ffd;
+  border-color: #eeb;
+}
+table.system-status-report tr.ok, table.system-status-report tr.ok th {
+  background-color: #dfd;
+  border-color: #beb;
+}
diff --git a/flexdemo/garland/images/bg-bar-white.png b/flexdemo/garland/images/bg-bar-white.png
new file mode 100644
index 000000000..256ea31b1
Binary files /dev/null and b/flexdemo/garland/images/bg-bar-white.png differ
diff --git a/flexdemo/garland/images/bg-bar.png b/flexdemo/garland/images/bg-bar.png
new file mode 100644
index 000000000..1fbcae043
Binary files /dev/null and b/flexdemo/garland/images/bg-bar.png differ
diff --git a/flexdemo/garland/images/bg-content-left.png b/flexdemo/garland/images/bg-content-left.png
new file mode 100644
index 000000000..a64b346e6
Binary files /dev/null and b/flexdemo/garland/images/bg-content-left.png differ
diff --git a/flexdemo/garland/images/bg-content-right.png b/flexdemo/garland/images/bg-content-right.png
new file mode 100644
index 000000000..f07ebb5cd
Binary files /dev/null and b/flexdemo/garland/images/bg-content-right.png differ
diff --git a/flexdemo/garland/images/bg-content.png b/flexdemo/garland/images/bg-content.png
new file mode 100644
index 000000000..d55828ed2
Binary files /dev/null and b/flexdemo/garland/images/bg-content.png differ
diff --git a/flexdemo/garland/images/bg-navigation-item-hover.png b/flexdemo/garland/images/bg-navigation-item-hover.png
new file mode 100644
index 000000000..c783d718b
Binary files /dev/null and b/flexdemo/garland/images/bg-navigation-item-hover.png differ
diff --git a/flexdemo/garland/images/bg-navigation-item.png b/flexdemo/garland/images/bg-navigation-item.png
new file mode 100644
index 000000000..d2452ac4f
Binary files /dev/null and b/flexdemo/garland/images/bg-navigation-item.png differ
diff --git a/flexdemo/garland/images/bg-navigation.png b/flexdemo/garland/images/bg-navigation.png
new file mode 100644
index 000000000..18b9559de
Binary files /dev/null and b/flexdemo/garland/images/bg-navigation.png differ
diff --git a/flexdemo/garland/images/bg-tab.png b/flexdemo/garland/images/bg-tab.png
new file mode 100644
index 000000000..18554b04d
Binary files /dev/null and b/flexdemo/garland/images/bg-tab.png differ
diff --git a/flexdemo/garland/images/body.png b/flexdemo/garland/images/body.png
new file mode 100644
index 000000000..b361e7b38
Binary files /dev/null and b/flexdemo/garland/images/body.png differ
diff --git a/flexdemo/garland/images/gradient-inner.png b/flexdemo/garland/images/gradient-inner.png
new file mode 100644
index 000000000..7ca1413f6
Binary files /dev/null and b/flexdemo/garland/images/gradient-inner.png differ
diff --git a/flexdemo/garland/images/menu-collapsed-rtl.gif b/flexdemo/garland/images/menu-collapsed-rtl.gif
new file mode 100644
index 000000000..fb0beb608
Binary files /dev/null and b/flexdemo/garland/images/menu-collapsed-rtl.gif differ
diff --git a/flexdemo/garland/images/menu-collapsed.gif b/flexdemo/garland/images/menu-collapsed.gif
new file mode 100644
index 000000000..3dc9ca770
Binary files /dev/null and b/flexdemo/garland/images/menu-collapsed.gif differ
diff --git a/flexdemo/garland/images/menu-expanded.gif b/flexdemo/garland/images/menu-expanded.gif
new file mode 100644
index 000000000..126ccc11a
Binary files /dev/null and b/flexdemo/garland/images/menu-expanded.gif differ
diff --git a/flexdemo/garland/images/menu-leaf.gif b/flexdemo/garland/images/menu-leaf.gif
new file mode 100644
index 000000000..b7811910e
Binary files /dev/null and b/flexdemo/garland/images/menu-leaf.gif differ
diff --git a/flexdemo/garland/images/task-list.png b/flexdemo/garland/images/task-list.png
new file mode 100644
index 000000000..3f9b74f2b
Binary files /dev/null and b/flexdemo/garland/images/task-list.png differ
diff --git a/flexdemo/garland/left.html.php b/flexdemo/garland/left.html.php
new file mode 100644
index 000000000..c1d97ee4e
--- /dev/null
+++ b/flexdemo/garland/left.html.php
@@ -0,0 +1,4 @@
+<?php
+foreach ($this->left as $block_def) {
+    echo $this->blockContent($block_def);
+}
diff --git a/flexdemo/garland/list.html.php b/flexdemo/garland/list.html.php
new file mode 100644
index 000000000..a9756ec7d
--- /dev/null
+++ b/flexdemo/garland/list.html.php
@@ -0,0 +1,7 @@
+                    <div class="breadcrumb">
+                        Home : Page1 : Page2 : Page3
+                    </div>
+                    <h2>Application zone</h2>
+                    <div class="messages status">
+                        Welcome to Horde Flex demo.
+                    </div>
diff --git a/flexdemo/garland/main.html.php b/flexdemo/garland/main.html.php
new file mode 100644
index 000000000..cfcdeabe6
--- /dev/null
+++ b/flexdemo/garland/main.html.php
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
+  <head>
+    <title>Administration theme | Drupal6 Test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+    <link type="text/css" rel="stylesheet" media="all" href="garland/css/style.css?D" />
+    <link type="text/css" rel="stylesheet" media="print" href="garland/css/print.css?D" />
+
+    <link type="text/css" rel="stylesheet" media="all" href="garland/css/defaults.css?D" />
+
+      <!--[if lt IE 7]>
+      <link type="text/css" rel="stylesheet" media="all" href="garland/css/fix-ie.css" />
+      <![endif]-->
+   </head>
+   <body class="sidebars">
+
+<!-- Layout -->
+  <div id="wrapper">
+    <div id="container" class="clear-block">
+
+      <div id="header">
+        <h1 style="font-size:30px;font-weight:bold">Horde Flex</h1>
+      </div> <!-- /header -->
+
+      <div id="sidebar-left" class="sidebar">
+        <div class="clear-block block">
+            <?= $this->render('left.html.php') ?>
+        </div>
+      </div>
+
+      <div id="center">
+        <div id="squeeze">
+            <div class="right-corner">
+                <div class="left-corner">
+                    <?= $this->render('app.html.php') ?>
+                </div>
+            </div>
+        </div>
+      </div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
+
+      <div id="sidebar-right" class="sidebar">
+        <div class="clear-block block">
+          <?= $this->render('right.html.php') ?>
+         </div>
+      </div>
+
+    </div> <!-- /container -->
+</div>
+<!-- /layout -->
+
+   </body>
+</html>
diff --git a/flexdemo/garland/right.html.php b/flexdemo/garland/right.html.php
new file mode 100644
index 000000000..34388a487
--- /dev/null
+++ b/flexdemo/garland/right.html.php
@@ -0,0 +1 @@
+<?= $this->blockContent('flexdemo', 'menu') ?>
\ No newline at end of file
diff --git a/flexdemo/garland/secondary.html.php b/flexdemo/garland/secondary.html.php
new file mode 100644
index 000000000..8fcc8072c
--- /dev/null
+++ b/flexdemo/garland/secondary.html.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
+  <head>
+    <title>Administration theme | Drupal6 Test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+    <link type="text/css" rel="stylesheet" media="all" href="garland/css/style.css?D" />
+    <link type="text/css" rel="stylesheet" media="print" href="garland/css/print.css?D" />
+
+    <link type="text/css" rel="stylesheet" media="all" href="garland/css/defaults.css?D" />
+
+
+      <!--[if lt IE 7]>
+      <link type="text/css" rel="stylesheet" media="all" href="garland/css/fix-ie.css" />
+      <![endif]-->
+   </head>
+   <body class="sidebars">
+
+<!-- Layout -->
+  <div id="wrapper">
+    <div id="container" class="clear-block">
+
+      <div id="header">
+        <div id="logo-floater">
+        <h1 style="font-size:30px;font-weight:bold">Horde Flex</h1>
+        </div>
+      </div> <!-- /header -->
+
+      <div id="center">
+        <div id="squeeze">
+            <div class="right-corner">
+                <div class="left-corner">
+
+                    <div class="breadcrumb">
+                        Home : Page1 : Page2 : Page3
+                    </div>
+                    <h2>Application zone</h2>
+                    <div class="messages status">
+                        The configuration options have been reset to their default values.
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
+
+      <div id="sidebar-right" class="sidebar">
+        <div class="clear-block block">
+          <h2>Right</h2>
+         </div>
+      </div>
+
+    </div> <!-- /container -->
+</div>
+<!-- /layout -->
+
+   </body>
+</html>
diff --git a/flexdemo/index.php b/flexdemo/index.php
new file mode 100644
index 000000000..cabdd3663
--- /dev/null
+++ b/flexdemo/index.php
@@ -0,0 +1,15 @@
+<?php
+
+define('AUTH_HANDLER', true);
+define('HORDE_BASE', dirname(__FILE__) . '/..');
+require_once HORDE_BASE . '/lib/base.php';
+require_once 'Horde/Autoloader.php';
+
+$v = new Horde_View(array('templatePath' => dirname(__FILE__) . '/garland'));
+new Horde_View_Helper_Block($v);
+
+$v->left = array(array('flexdemo', 'block1'),
+                 array('flexdemo', 'block2'));
+$v->app = array('list');
+
+echo $v->render('main.html.php');
diff --git a/flexdemo/lib/Block/block1.php b/flexdemo/lib/Block/block1.php
new file mode 100644
index 000000000..4b16ae4e2
--- /dev/null
+++ b/flexdemo/lib/Block/block1.php
@@ -0,0 +1,41 @@
+<?php
+
+$block_name = _("Horde Block1");
+
+/**
+ * $Horde: horde/lib/Block/menu.php,v 1.0 2008/01/10 5:11:00 elier $
+ *
+ * @package Horde_Block
+ */
+class Horde_Block_flexdemo_block1 extends Horde_Block {
+
+    var $_app = 'horde';
+
+    /**
+     * The title to go in this block.
+     *
+     * @return string   The title text.
+     */
+    function _title()
+    {
+        return _("Block1");
+    }
+
+    /**
+     * The content to go in this block.
+     *
+     * @return string   The content
+     */
+    function _content()
+    {
+        $html = '<h2>Block1</h2><p>foo</p>';
+        return $html;
+    }
+
+
+    function toHtml()
+    {
+        return $this->_content();
+    }
+
+}
\ No newline at end of file
diff --git a/flexdemo/lib/Block/block2.php b/flexdemo/lib/Block/block2.php
new file mode 100644
index 000000000..36501ff88
--- /dev/null
+++ b/flexdemo/lib/Block/block2.php
@@ -0,0 +1,41 @@
+<?php
+
+$block_name = _("Horde Block2");
+
+/**
+ * $Horde: horde/lib/Block/menu.php,v 1.0 2008/01/10 5:11:00 elier $
+ *
+ * @package Horde_Block
+ */
+class Horde_Block_flexdemo_block2 extends Horde_Block {
+
+    var $_app = 'horde';
+
+    /**
+     * The title to go in this block.
+     *
+     * @return string   The title text.
+     */
+    function _title()
+    {
+        return _("Block2");
+    }
+
+    /**
+     * The content to go in this block.
+     *
+     * @return string   The content
+     */
+    function _content()
+    {
+        $html = '<h2>Block2</h2>';
+        return $html;
+    }
+
+
+    function toHtml()
+    {
+        return $this->_content();
+    }
+
+}
\ No newline at end of file
diff --git a/flexdemo/lib/Block/menu.php b/flexdemo/lib/Block/menu.php
new file mode 100644
index 000000000..df7dcd24e
--- /dev/null
+++ b/flexdemo/lib/Block/menu.php
@@ -0,0 +1,43 @@
+<?php
+
+$block_name = _("Horde Menu");
+
+/**
+ * $Horde: horde/lib/Block/menu.php,v 1.0 2008/01/10 5:11:00 elier $
+ *
+ * @package Horde_Block
+ */
+class Horde_Block_flexdemo_menu extends Horde_Block {
+
+    var $_app = 'horde';
+
+    /**
+     * The title to go in this block.
+     *
+     * @return string   The title text.
+     */
+    function _title()
+    {
+        return _("Menu");
+    }
+
+    /**
+     * The content to go in this block.
+     *
+     * @return string   The content
+     */
+    function _content()
+    {
+        $html = '<h2>Menu</h2>';
+        return $html;
+    }
+
+
+    function toHtml()
+    {
+        return $this->_content();
+    }
+
+
+
+}
\ No newline at end of file