clerezza-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From r...@apache.org
Subject [35/42] Revert "CLEREZZA-926: removed modules not in release"
Date Fri, 01 Aug 2014 17:18:50 GMT
http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/LICENSE
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/LICENSE b/platform.style.classic.webguiexamples/LICENSE
new file mode 100644
index 0000000..261eeb9
--- /dev/null
+++ b/platform.style.classic.webguiexamples/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/pom.xml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/pom.xml b/platform.style.classic.webguiexamples/pom.xml
new file mode 100644
index 0000000..7e2f0e8
--- /dev/null
+++ b/platform.style.classic.webguiexamples/pom.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.apache.clerezza</groupId>
+        <artifactId>clerezza</artifactId>
+        <version>0.5-SNAPSHOT</version>
+        <relativePath>../parent</relativePath>
+    </parent>
+    <groupId>org.apache.clerezza</groupId>
+    <artifactId>platform.style.classic.webguiexamples</artifactId>
+    <packaging>bundle</packaging>
+    <version>0.3-SNAPSHOT</version>
+    <name>Clerezza - Web GUI Examples</name>
+    <description>GUI Examples for building wep apps on clerezza platform</description>
+    <dependencies>
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.clerezza</groupId>
+            <artifactId>platform.typerendering.scalaserverpages</artifactId>
+            <version>0.4-SNAPSHOT</version>
+        </dependency>
+        <dependency>
+            <groupId>javax.ws.rs</groupId>
+            <artifactId>jsr311-api</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.clerezza</groupId>
+            <artifactId>web.fileserver</artifactId>
+            <version>0.10-SNAPSHOT</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.felix</groupId>
+            <artifactId>org.apache.felix.scr.annotations</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.osgi</groupId>
+            <artifactId>org.osgi.compendium</artifactId>
+        </dependency>
+    </dependencies>
+    <build>
+        <plugins>    
+            <plugin>
+                <groupId>org.apache.felix</groupId>
+                <artifactId>maven-bundle-plugin</artifactId>
+                <extensions>true</extensions>
+                <configuration>
+                    <instructions>
+                        <Require-Bundle>org.apache.clerezza.platform.style.classic, org.apache.clerezza.web.resources.jquery</Require-Bundle>
+                    </instructions>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>            
+</project>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
new file mode 100644
index 0000000..a740c5d
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/alert.xhtml
@@ -0,0 +1,99 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>alert message - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+	<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" />
+	<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+	<script src="/yui/element/element-min.js" type="text/javascript"/>
+	<script src="/yui/container/container-min.js" type="text/javascript"/>
+	<script src="/scripts/alert-message.js" type="text/javascript"/>
+	<script type="text/javascript">
+		function showAlert() {
+			
+		}
+	</script>
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+	<div id="demo">
+    	<h3>Description</h3>
+
+       
+		<h3>Alert</h3>
+		
+        <div>
+		<br/>
+		<br/>
+		<div style="display: none">
+			<div id="myOverlayBody">body</div>
+		</div>
+		<div>
+			<a href="#" onclick="AlertMessage.show(function(){alert('done');},
+			'This is a test alert', 'Test Alert', 'Yes', 'No')">click here to show alert.</a> <br/>
+		</div>
+		<br/>
+		<br/>
+
+
+		The following css and scripts have to be included:
+		<pre>
+&lt;link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/&gt;
+&lt;script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" /&gt;
+&lt;script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/&gt;
+&lt;script src="/yui/element/element-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/container/container-min.js" type="text/javascript"/&gt;
+&lt;script src="/scripts/alert-message.js" type="text/javascript"/&gt;
+		</pre>
+		<br/>
+		<br/>
+		e.g.
+		<pre>
+...
+	   &lt;div&gt;
+		 &lt;a href="#" onclick="AlertMessage.show(function(){alert('done');},
+			'This is a test alert', 'Test Alert', 'Yes', 'No')"&gt;click here to add sho alert &lt;/a&gt; &lt;br/&gt;
+	   &lt;/div&gt;
+...
+		</pre>
+		</div>
+		
+	</div>
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
new file mode 100644
index 0000000..ae9e87a
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/buttons.xhtml
@@ -0,0 +1,201 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>buttons - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+	
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+	<div id="demo">
+    	<h3>Description</h3>
+
+       
+		<h3>Available Buttons</h3>
+		
+        <div>
+		<strong>Buttons</strong> are &lt;a> with the class <strong>tx-button</strong>. Furthermore there are 4 different types of buttons :
+		<br/>
+        <br/>
+        remove actions have the additional class: <strong>tx-button-remove</strong><br/>
+        modifying or editing buttons have the additional class: <strong>tx-button-modify</strong><br/>
+        create actions have the additional class: <strong>tx-button-create</strong><br/>
+        create actions have the additional class: <strong>tx-button-generic</strong><br/>
+		<br/>
+        
+		<ol>
+			<li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove">Remove</a></li>
+			<li><a href="#" title="tx-button-create" class="tx-button tx-button-create">Create</a></li>
+			<li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify">Modify</a></li>
+			<li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic">Generic</a></li>
+		</ol>
+        <br/>
+        <br/>
+        <br/>
+        e.g.
+       	<pre>&lt;a class="tx-button tx-button-remove" href="#" >remove&lt;/a></pre>
+        <br/>Buttons have 2 visual states: inactive and active. Add the class <strong>tx-inactive</strong> to make a button visually inactive.
+        <br/>
+        <br/>
+        
+        <ol>
+			<li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove tx-inactive">Remove</a></li>
+			<li><a href="#" title="tx-button-create" class="tx-button tx-button-create tx-inactive">Create</a></li>
+			<li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify tx-inactive">Modify</a></li>
+			<li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic tx-inactive">Generic</a></li>
+		</ol>
+		<br/>
+        <br/>
+		<br/>
+        e.g.
+        <pre>&lt;a class="tx-button tx-button-remove tx-inactive" href="#" >remove&lt;/a></pre>
+		</div>
+		
+		<h3>Icons</h3>
+		
+        <strong>Icons</strong> are &lt;a> with the class <strong>tx-icon</strong>. e.g.There are 4 different type of icons. These icons have an active and inactive state (in case of toggles on/off)
+        <br/>
+        <br/>
+		<strong>active</strong>
+		<ol>
+			<li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete">Delete</a></li>
+			<li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok">Ok</a></li>
+			<li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search">Search</a></li>
+			<li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit">Edit</a></li>
+			<li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a></li>
+		</ol>	
+		<br/>
+        <br/>
+        <br/>
+        e.g.<pre>&lt;a class="tx-icon tx-icon-delete" href="#">Delete&lt;/a></pre>
+		<strong>inactive</strong>
+		<ol>
+			<li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete tx-inactive">Delete</a></li>
+			<li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok tx-inactive">Ok</a></li>
+			<li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search tx-inactive">Search</a></li>
+			<li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit tx-inactive">Edit</a></li>
+			<li><a href="#" title="tx-icon-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a></li>
+		</ol>
+        <br/>
+        <br/>
+        <br/>
+        e.g.<pre>&lt;a class="tx-icon tx-icon-delete tx-inactive" href="#">Delete&lt;/a></pre>
+        <br/>
+        <br/>
+        The following paragraphs describes the available icons:
+        <br/>
+        <br/>
+		<h4>Remove</h4>
+		<ol>
+			<li><a href="#" class="tx-icon tx-icon-delete" title="tx-icon-delete">Delete</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-delete tx-inactive" href="#">delete&lt;/a></pre></li>
+		</ol>	
+		
+		<h4>Create</h4>
+		<ol>
+			<li><a href="#" class="tx-icon tx-icon-ok" title="tx-icon-ok">Ok</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-ok" href="#">ok&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-plus" title="tx-icon-plus">Plus</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-plus" href="#">plus&lt;/a></pre></li>
+		</ol>	
+		
+		<h4>Modify</h4>
+		<ol>
+			<li><a href="#" class="tx-icon tx-icon-modify" title="tx-icon-modify">Edit</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-modify" href="#">modify&lt;/a></pre></li>
+		</ol>	
+		
+		<h4>Generic</h4>
+		<ol>
+			<li><a href="#" class="tx-icon tx-icon-search" title="tx-icon-search">Search</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-search" href="#">search&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-sitechooser" title="tx-icon-sitechooser">Site chooser</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-sitechooser" href="#">sitechooser&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-user" title="tx-icon-user">User</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-user" href="#">user&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-close" title="tx-icon-close">Close</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-close" href="#">close&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-forward" title="tx-icon-forward">Forward</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-forward" href="#">forward&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-back" title="tx-icon-back">Back</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-back" href="#">back&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-zoomin" title="tx-icon-zoomin">Zoom in</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-zoomin" href="#">zoomin&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-zoomout" title="tx-icon-zoomout">Zoom out</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-zoomout" href="#">zoomout&lt;/a></pre></li>
+		</ol>	
+		
+		<h3>Available Toggle buttons</h3>
+        
+        There are also <strong>toggles</strong> available, which are &lt;a>. These buttons are defined by using the class <strong>tx-icon</strong>. Toggle buttons are switches between to states (on/off state). There are toggle buttons available for representing resources as lists, trees and thumbnails. Futhermore there are toggle buttons for choosing a size of a thumbnail.
+		
+        <br/>
+        <br/>
+        
+		<h4>On (clickable)</h4>
+		<ol>
+			<li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-list-on" href="#">list-on&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-thumbnail-on" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-thumbnail-on" href="#">thumbnail-on&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-tree-on" class="tx-icon tx-toggle-tree-on">Tree</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-tree-on" href="#">tree-on&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size1-on" class="tx-icon tx-toggle-size1-on">Size 1</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-size1-on" href="#">size1-on&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size2-on" class="tx-icon tx-toggle-size2-on">Size 2</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-size2-on" href="#">size2-on&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size3-on" class="tx-icon tx-toggle-size3-on">Size 3</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-size3-on" href="#">size3-on&lt;/a></pre></li>
+		</ol>	
+		<br/>
+        <br/>
+        <br/>
+		<h4>Off (select)</h4>
+		<ol>
+			<li><a href="#" title="tx-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-list-off" href="#">list&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-thumbnail-off" class="tx-icon tx-toggle-thumbnail-off">Thumbnail</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-thumbnail-off" href="#">thumbnail&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-tree-off" class="tx-icon tx-toggle-tree-off">Tree</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-tree-off" href="#">tree&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size1-off" class="tx-icon tx-toggle-size1-off">Size 1</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-size1-off" href="#">size1&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size2-off" class="tx-icon tx-toggle-size2-off">Size 2</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-size2-off" href="#">size2&lt;/a></pre></li>
+			<li><a href="#" title="tx-toggle-size3-off" class="tx-icon tx-toggle-size3-off">Size 3</a>&nbsp;<pre>&lt;a class="tx-icon tx-toggle-size3-off" href="#">size3&lt;/a></pre></li>
+		</ol>
+        <br/>
+        <br/>
+        <br/>			
+		<h3>Various icons / buttons</h3>
+		
+		<ol>
+			<li><a href="#" class="tx-icon tx-icon-alert">Alert</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-alert" href="#">alert&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-drag">Drag Icon</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-drag" href="#">drag&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-down">Down</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-down" href="#">down&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-up">Up</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-up" href="#">up&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-right">Right</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-right" href="#">right&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-left">Left</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-left" href="#">left&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-down-inverse demo-bg">Down</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-down-inverse" href="#">downinverse&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-up-inverse demo-bg">Up</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-up-inverse" href="#">upinverse&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-right-inverse demo-bg">Right</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-right-inverse" href="#">rightinverse&lt;/a></pre></li>
+			<li><a href="#" class="tx-icon tx-icon-left-inverse demo-bg">Left</a>&nbsp;<pre>&lt;a class="tx-icon tx-icon-left-inverse" href="#">leftinverse&lt;/a></pre></li>					
+		</ol>	
+		
+	</div>
+		
+	
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
new file mode 100644
index 0000000..8a25c79
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/edit.xhtml
@@ -0,0 +1,164 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>edit - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+	<link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+	<!-- edit view -->
+	<div class="tx-edit">
+		<div class="tx-edit-content">
+			<form action="" method="post">
+				<fieldset>
+					<ol>
+						<li class="tx-line"><label>Original format</label>
+							<div>jpg</div></li>
+						
+						<li class="tx-line"><label>Size</label>
+							<div>645 x 345 px (original size) <a href="">[view]</a><br />
+							512 x 257 px <a href="">[view]</a></div>
+						</li>
+						
+						<li class="tx-line"><label>Replace Image</label>
+							<input type="file" size="30" /></li>
+						
+						<li><label>Credit</label>
+							<input size="30" type="text" value="" /></li>
+						
+						<li><label>Licence type</label>
+							<select>
+								<option value="0">please select</option>
+								<option value="1" selected="selected">Royality Fee</option>
+								<option value="2">Open Photo</option>
+								<option value="3">Self made with natel</option>
+							</select></li>
+						
+						<li class="tx-line"><label>Caption</label>
+							<input size="30" type="text" value="" /></li>
+						
+						<li class="tx-line"><label>Alternative description</label>
+							<textarea cols="40" rows="3"></textarea></li>
+						
+						<li><label>Radio</label>
+							<input type="radio" name="radio1" value="" /> Yes <input type="radio" name="radio1" value="" /> No <input type="radio" name="radio1" value="" /> Maybe</li>	
+						
+						<li><label>Checkbox</label>
+							<input type="checkbox" value="" /> Yes <input type="checkbox" value="" /> No <input type="checkbox" value="" /> Maybe</li>	
+					</ol>
+				</fieldset>
+			</form>
+		</div>
+	
+
+
+	<div id="demo">
+		<h3>Description</h3>
+		
+			In the tx-content a &lt;div> with class<b>tx-edit</b> is created. Within <strong>div.tx-edit</strong> a <strong>div.tx-edit-content</strong> is added.
+			<br/>
+			<br/>
+			<strong>li.tx-line</strong> draws a line under the &lt;li> element.
+	
+			<br/>
+			<br/>
+			The current example has no ids or names defined, if necessary they have to be defined contextually.
+			<br/>
+
+			<strong>div.tx-edit</strong> is the main container for the edit view. If no class is defined on the <strong>div.tx-edit</strong> element the edit view has 100% width. 
+			<br/>
+			The classes <strong>.tx-show-panel</strong>, <strong>.tx-hide-panel</strong> and <strong>.tx-halfwidth-right</strong> define the position of the edit view.
+			<br/>
+			<br/>
+            
+			<strong>.tx-show-panel</strong>: position with a panel on the left side.<br/>
+			<strong>.tx-hide-panel</strong>: position with a panel on the left side, hidden.<br/>
+			<strong>.tx-halfwidth-right</strong>: position on the right, 50% width.<br/>
+			<br/>
+			<br/>            
+
+			<h3>Example code</h3>
+		
+			<pre>
+&lt;div class="tx-edit-content"&gt;
+	&lt;form action="" method="post"&gt;
+		&lt;fieldset&gt;
+			&lt;ol&gt;
+				&lt;li class="tx-line"&gt;&lt;label&gt;Original format&lt;/label&gt;
+					&lt;div&gt;jpg&lt;/div&gt;&lt;/li&gt;
+				
+				&lt;li class="tx-line"&gt;&lt;label&gt;Size&lt;/label&gt;
+					&lt;div&gt;645 x 345 px (original size) &lt;a href=""&gt;[view]&lt;/a&gt;&lt;br /&gt;
+					512 x 257 px &lt;a href=""&gt;[view]&lt;/a&gt;&lt;/div&gt;
+				&lt;/li&gt;
+				
+				&lt;li class="tx-line"&gt;&lt;label&gt;Replace Image&lt;/label&gt;
+					&lt;input type="file" size="30" /&gt;&lt;/li&gt;
+				
+				&lt;li&gt;&lt;label&gt;Credit&lt;/label&gt;
+					&lt;input size="30" type="text" value="" /&gt;&lt;/li&gt;
+				
+				&lt;li&gt;&lt;label&gt;Licence type&lt;/label&gt;
+					&lt;select&gt;
+						&lt;option value="0"&gt;please select&lt;/option&gt;
+						&lt;option value="1" selected="selected"&gt;Royality Fee&lt;/option&gt;
+						&lt;option value="2"&gt;Open Photo&lt;/option&gt;
+						&lt;option value="3"&gt;Self made with natel&lt;/option&gt;
+					&lt;/select&gt;&lt;/li&gt;
+				
+				&lt;li class="tx-line"&gt;&lt;label&gt;Caption&lt;/label&gt;
+					&lt;input size="30" type="text" value="" /&gt;&lt;/li&gt;
+				
+				&lt;li class="tx-line"&gt;&lt;label&gt;Alternative description&lt;/label&gt;
+					&lt;textarea cols="40" rows="3"&gt;&lt;/textarea&gt;&lt;/li&gt;
+				
+				&lt;li&gt;&lt;label&gt;Radio&lt;/label&gt;
+					&lt;input type="radio" name="radio1" value="" /&gt; Yes &lt;input type="radio" name="radio1" value="" /&gt; No &lt;input type="radio" name="radio1" value="" /&gt; Maybe&lt;/li&gt;	
+				
+				&lt;li&gt;&lt;label&gt;Checkbox&lt;/label&gt;
+					&lt;input type="checkbox" value="" /&gt; Yes &lt;input type="checkbox" value="" /&gt; No &lt;input type="checkbox" value="" /&gt; Maybe&lt;/li&gt;	
+			&lt;/ol&gt;
+		&lt;/fieldset&gt;
+	&lt;/form&gt;
+&lt;/div&gt;
+			</pre>
+		</div>
+	</div>	
+</div>
+<!-- // content -->
+
+
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
new file mode 100644
index 0000000..86f406a
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/header.xhtml
@@ -0,0 +1,299 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>header - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+	
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+	<!-- system -->
+	<div id="tx-system">
+
+		<!-- global search -->
+		<div id="tx-globalsearch">
+			<form action="/globalsearch/">
+			<fieldset>
+				<input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+			</fieldset>	
+			</form>
+		</div>
+		
+		<!-- user information -->
+		<div id="tx-login">
+			<a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> 
+		</div>
+		
+		<div id="tx-logo"><a href=""></a></div>
+		
+		<!-- main menu -->
+		<div id="tx-menu">
+		<ol>
+			<li><a href="">Dashboard</a></li>
+			<li><a href="">Modulgruppe 1</a>
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+					<li><a href="">Submenu 3</a></li>
+					<li><a href="">Submenu 4</a></li>
+				</ol>
+			</li>
+			<li><a href="">Modulgruppe 2</a>	
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+				</ol>
+			</li>
+			<li><a href="">Help</a>
+				<ol>
+					<li><a href="">About</a></li>
+					<li><a href="">What</a></li>
+					<li><a href="">Where</a></li>
+				</ol>
+			</li>
+		</ol>
+		</div>
+	</div>
+	<!-- //system -->
+	
+	<!-- module -->
+	<div id="tx-module">
+		<!-- module title -->
+		<h1>header example</h1>
+
+		<!-- page editing actions -->
+		<div id="tx-page-actions">
+			<ol>
+				<li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+				<li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Something</a></li>
+			</ol>
+		</div>	
+		
+	</div>
+	<!-- // module -->
+
+	<!-- moduletabs -->
+	<div id="tx-module-tabs">
+		<!-- moduletabs -->
+		<ol>
+			<li class="tx-active"><a href="#">Assets</a></li>	
+			<li><a href="#">Image Sets</a></li>	
+			<li><a href="#">My Lightboxes</a></li>
+			<li class="tx-active"><a href="#">My Something</a></li>
+			<li><a href="#">My Everything</a></li>	
+		</ol>
+		
+		<!--  -->
+		<div id="tx-contextual-buttons">
+			<ol>
+				<li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+				<li><a href="#" class="tx-button tx-button-create">Create</a></li>
+				<li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+				<li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+			</ol>
+		</div>
+	</div>	
+	<!-- // moduletabs -->
+	
+	<!-- moduleoptions -->
+	<div id="tx-module-options">	
+		<ol>
+			<li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+			<li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+			
+			<li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+		</ol>	
+
+	</div>
+	<!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+<!-- content -->
+<div id="tx-content">
+	<div id="demo">
+		<h3>Description</h3>
+		<div>The header is a &lt;div> with id <strong>tx-header</strong> and is the first child of the &lt;body>.</div>
+		<br/>
+		
+		The <strong>div#tx-system</strong> contains the globalsearch, menu, logo and login.<br/>	
+		The global search is a &lt;div> with id <strong>tx-globalsearch</strong> and contains HTML.<br/>
+		The logo could be placed on the left top corner and is a &lt;div> containing a &lt;a> e.g. &lt;div id="tx-logo">&lt;a href="" />&lt;/div><br/>
+		The menu is a &lt;div> with id <strong>tx-menu</strong>, which contains an ordered list.<br/>
+		<br/>
+		<br/>
+		
+		The <strong>div#tx-module</strong> contains the title and the page actions.<br/>
+		The title of the module is a &lt;h1>.
+		The page action buttons area is a &lt;div> with id <strong>tx-page-actions</strong>, which contains an ordered list.<br/>
+		<br/>
+		<br/>
+
+		
+		The tabs and contextual buttons are in a &lt;div> with id <strong>tx-module-tabs</strong> which contains:<br/>
+		An ordered list &lt;ol> for the module tabs.<br/>
+		A &lt;div> with id <strong>tx-contextual-buttons</strong>, which contains an ordered list of contextual action buttons<br/>
+		<br/>
+		<br/>
+		
+		The <strong>div#tx-module-options</strong> contains the toggle icons and paginator/select elements.<br/>
+		An ordered list &lt;ol> for the module options, which contains the toggles and status icons.<br/>
+		<br/>
+		<br/>
+		
+		
+		<h3>Example code</h3>
+		<pre>
+&lt;!-- header --&gt;
+&lt;div id="tx-header"&gt;
+	&lt;!-- system --&gt;
+	&lt;div id="tx-system"&gt;
+
+		&lt;!-- global search --&gt;
+		&lt;div id="tx-globalsearch"&gt;
+			&lt;form action="/globalsearch/"&gt;
+			&lt;fieldset&gt;
+				&lt;input type="text" name="globalsearch_value" /&gt; &lt;input type="submit" value="" class="tx-icon tx-icon-search"/&gt;
+			&lt;/fieldset&gt;	
+			&lt;/form&gt;
+		&lt;/div&gt;
+		
+		&lt;!-- user information --&gt;
+		&lt;div id="tx-login"&gt;
+			&lt;a href="" class="tx-icon tx-icon-user"&gt;actions&lt;/a&gt; &lt;span&gt;Mans Huster&lt;/span&gt; 
+		&lt;/div&gt;
+		
+		&lt;div id="tx-logo"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/div&gt;
+		
+		&lt;!-- main menu --&gt;
+		&lt;div id="tx-menu"&gt;
+		&lt;ol&gt;
+			&lt;li&gt;&lt;a href=""&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href=""&gt;Modulgruppe 1&lt;/a&gt;
+				&lt;ol&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 3&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 4&lt;/a&gt;&lt;/li&gt;
+				&lt;/ol&gt;
+			&lt;/li&gt;
+			&lt;li&gt;&lt;a href=""&gt;Modulgruppe 2&lt;/a&gt;	
+				&lt;ol&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;
+				&lt;/ol&gt;
+			&lt;/li&gt;
+			&lt;li&gt;&lt;a href=""&gt;Help&lt;/a&gt;
+				&lt;ol&gt;
+					&lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;What&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;&lt;a href=""&gt;Where&lt;/a&gt;&lt;/li&gt;
+				&lt;/ol&gt;
+			&lt;/li&gt;
+		&lt;/ol&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+	&lt;!-- //system --&gt;
+	
+	&lt;!-- module --&gt;
+	&lt;div id="tx-module"&gt;
+		&lt;!-- module title --&gt;
+		&lt;h1&gt;Example&lt;/h1&gt;
+
+		&lt;!-- page editing actions --&gt;
+		&lt;div id="tx-page-actions"&gt;
+			&lt;ol&gt;
+				&lt;li&gt;&lt;a href="" class="tx-button tx-button-generic"&gt;Page Editing&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="" class="tx-button tx-button-generic-on"&gt;Preview&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="" class="tx-button tx-button-generic"&gt;Page Data&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="" class="tx-button tx-button-generic"&gt;Something&lt;/a&gt;&lt;/li&gt;
+			&lt;/ol&gt;
+		&lt;/div&gt;	
+		
+	&lt;/div&gt;
+	&lt;!-- // module --&gt;
+
+	&lt;!-- moduletabs --&gt;
+	&lt;div id="tx-module-tabs"&gt;
+		&lt;!-- moduletabs --&gt;
+		&lt;ol&gt;
+			&lt;li class="tx-active"&gt;&lt;a href="#"&gt;Assets&lt;/a&gt;&lt;/li&gt;	
+			&lt;li&gt;&lt;a href="#"&gt;Image Sets&lt;/a&gt;&lt;/li&gt;	
+			&lt;li&gt;&lt;a href="#"&gt;My Lightboxes&lt;/a&gt;&lt;/li&gt;
+			&lt;li class="tx-active"&gt;&lt;a href="#"&gt;My Something&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#"&gt;My Everything&lt;/a&gt;&lt;/li&gt;	
+		&lt;/ol&gt;
+		
+		&lt;!--  --&gt;
+		&lt;div id="tx-contextual-buttons"&gt;
+			&lt;ol&gt;
+				&lt;li&gt;&lt;a href="#" class="tx-button tx-button-remove"&gt;Remove&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="#" class="tx-button tx-button-create"&gt;Create&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="#" class="tx-button tx-button-modify"&gt;Modify&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="#" class="tx-button tx-button-generic"&gt;Generic&lt;/a&gt;&lt;/li&gt;
+			&lt;/ol&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;	
+	&lt;!-- // moduletabs --&gt;
+	
+	&lt;!-- moduleoptions --&gt;
+	&lt;div id="tx-module-options"&gt;	
+		&lt;ol&gt;
+			&lt;li&gt;&lt;a href="#" class="tx-icon tx-toggle-list-on"&gt;Table&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#" class="tx-icon tx-toggle-thumbnail-on"&gt;Thumbnail&lt;/a&gt;&lt;/li&gt;
+			&lt;li class="tx-spacer"&gt;&lt;a href="#" class="tx-icon tx-toggle-tree-on"&gt;Tree&lt;/a&gt;&lt;/li&gt;
+			
+			&lt;li&gt;&lt;a href="#" class="tx-icon tx-toggle-size1-on"&gt;Size 1&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#" class="tx-icon tx-toggle-size2-on"&gt;Size 2&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#" class="tx-icon tx-toggle-size3-on"&gt;Size 3&lt;/a&gt;&lt;/li&gt;
+		&lt;/ol&gt;	
+
+	&lt;/div&gt;
+	&lt;!-- // moduleoptions --&gt;
+&lt;/div&gt;
+&lt;!-- // header --&gt;
+		</pre>
+		
+	</div>
+</div>
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
new file mode 100644
index 0000000..3149ba6
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/overlay.xhtml
@@ -0,0 +1,108 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>overlay - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+	<link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/>
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"/>
+	<script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
+	<script src="/yui/element/element-min.js" type="text/javascript"/>
+	<script src="/yui/container/container-min.js" type="text/javascript"/>
+	<script src="/yui/resize/resize-min.js" type="text/javascript"/>
+	<script src="/yui/utilities/utilities.js" type="text/javascript"/>
+	<script src="/scripts/overlay.js" type="text/javascript"/>
+</head>
+
+<body>
+
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+	<div id="demo">
+    	<h3>Description</h3>
+
+       
+		<h3>Overlay</h3>
+		
+        <div>
+		The Overlay behave similarly to an OS window. Unlike true browser popup windows,
+		the overlay is floating DHTML elements embedded directly within the page context.
+		The Overlay is positioned above the flow of a page and is draggable, resizable and has a close button.
+		The Overlay has a method show with arguments body, header, width and height, which renders the overlay.
+		The body and the header can be html elements or text.
+		The width (default value: 46em) and height (default value: 37em) can be defined absolutely or relatively.
+		Furthermore the Overlay has a method close to destroy the overlay.
+		<br/>
+		<br/>
+		<div style="display: none">
+			<div id="myOverlayBody">body</div>
+		</div>
+		<div>
+			<a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');">click here to add the overlay.</a> <br/>
+		</div>
+		<br/>
+		<br/>
+
+
+		The following css and scripts have to be included:
+		<pre>
+&lt;link href="/yui/container/assets/container-core.css" rel="stylesheet" type="text/css"/&gt;
+&lt;script src="/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/&gt;
+&lt;script src="/yui/element/element-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/container/container-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/dragdrop/dragdrop-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/resize/resize-min.js" type="text/javascript"/&gt;
+&lt;script src="/yui/utilities/utilities.js" type="text/javascript"/&gt;
+&lt;script src="/scripts/overlay.js" type="text/javascript"/&gt;
+		</pre>
+		<br/>
+		<br/>
+		e.g.
+		<pre>
+...
+	&lt;body&gt;
+	   &lt;div style="display: none">
+			&lt;div id="myOverlayBody">body&lt;/div>
+		&lt;/div>
+	   &lt;div&gt;
+		 &lt;a href="#" onclick="Overlay.show($('#myOverlayBody'), 'header', '20em', '10em');"&gt;click here to add the overlay &lt;/a&gt; &lt;br/&gt;
+	   &lt;/div&gt;
+	&lt;/body&gt;
+...
+		</pre>
+		</div>
+		
+	</div>
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
new file mode 100644
index 0000000..05f2752
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-thumbnail.xhtml
@@ -0,0 +1,351 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>panel-thumbnail - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+	
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+	<!-- system -->
+	<div id="tx-system">
+
+		<!-- global search -->
+		<div id="tx-globalsearch">
+			<form action="/globalsearch/">
+			<fieldset>
+				<input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+			</fieldset>	
+			</form>
+		</div>
+		
+		<!-- user information -->
+		<div id="tx-login">
+			<a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> 
+		</div>
+		
+		<div id="tx-logo"><a href=""></a></div>
+		
+		<!-- main menu -->
+		<div id="tx-menu">
+		<ol>
+			<li><a href="">Dashboard</a></li>
+			<li><a href="">Modulgruppe 1</a>
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+					<li><a href="">Submenu 3</a></li>
+					<li><a href="">Submenu 4</a></li>
+				</ol>
+			</li>
+			<li><a href="">Modulgruppe 2</a>	
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+				</ol>
+			</li>
+			<li><a href="">Help</a>
+				<ol>
+					<li><a href="">About</a></li>
+					<li><a href="">What</a></li>
+					<li><a href="">Where</a></li>
+				</ol>
+			</li>
+		</ol>
+		</div>
+	</div>
+	<!-- //system -->
+	
+	<!-- module -->
+	<div id="tx-module">
+		<!-- module title -->
+		<h1>panel-thumbnail example</h1>
+
+		<!-- page editing actions -->
+		<div id="tx-page-actions">
+			<ol>
+				<li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+				<li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Something</a></li>
+			</ol>
+		</div>	
+		
+	</div>
+	<!-- // module -->
+
+	<!-- moduletabs -->
+	<div id="tx-module-tabs">
+		<!-- moduletabs -->
+		<ol>
+			<li class="tx-active"><a href="#">Assets</a></li>	
+			<li><a href="#">Image Sets</a></li>	
+			<li><a href="#">My Lightboxes</a></li>
+			<li class="tx-active"><a href="#">My Something</a></li>
+			<li><a href="#">My Everything</a></li>	
+		</ol>
+		
+		<!--  -->
+		<div id="tx-contextual-buttons">
+			<ol>
+				<li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+				<li><a href="#" class="tx-button tx-button-create">Create</a></li>
+				<li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+				<li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+			</ol>
+		</div>
+	</div>	
+	<!-- // moduletabs -->
+	
+	<!-- moduleoptions -->
+	<div id="tx-module-options">	
+		<ol>
+			<li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+			<li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+			
+			<li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+		</ol>	
+
+	</div>
+	<!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+
+<!-- panel -->
+<div class="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+	<a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+	<div class="tx-panel-window">
+		<!-- panel icons -->
+		<div class="tx-tab-buttons">
+
+		</div>
+
+		<div class="tx-panel-tabs">
+			<div>
+				<form action="" method="post">
+					<fieldset>
+						<label>
+							<input type="submit" value="" class="tx-icon tx-icon-search"/>
+							<input type="text" value="search assets" />
+
+						</label>
+					</fieldset>
+				</form>
+				<!-- selected filter elements -->
+				<div class="tx-filter">
+
+					<h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+					<ol>
+						<!-- filter elements, tx-icon is floating right, must be at the first place -->
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+					</ol>
+				</div>
+
+				<!-- results from filter -->
+				<div class="tx-result">
+				<!-- ul li contruct, only 2 levels supported -->
+					<ol>
+						<!-- main category-->
+						<li><a href="#">Type</a>
+							<ol>
+								<!-- sub category -->
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+								<li><a href="#">Flash (45)</a></li>
+								<li><a href="#">Documents (234)</a></li>
+								<li><a href="#">Images (234)</a></li>
+							</ol>
+						</li>
+						<!-- tx-open, open element icon, arrow down-->
+						<li class="tx-open"><a href="#">Taxonomy</a>
+							<ol>
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+							</ol>
+						</li>
+						<!-- li default shows an right arrow as background -->
+						<li><a href="#">Tags</a>
+							<ol>
+								<li><a href="#">Tiger (48)</a></li>
+								<li><a href="#">Animal (80)</a></li>
+								<li><a href="#">Africa (784)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Usage</a>
+							<ol>
+								<li><a href="#">Website (20)</a></li>
+								<li><a href="#">News (14)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Time</a>
+							<ol>
+								<li><a href="#">Yesterday (20)</a></li>
+								<li><a href="#">Last Week (14)</a></li>
+								<li><a href="#">Last Month (23)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Source</a>
+							<ol>
+								<li><a href="#">Flickr (14)</a></li>
+								<li><a href="#">Youtube (8)</a></li>
+							</ol>
+						</li>
+					</ol>
+				</div>
+				<!-- // tx-result -->
+			</div>
+		</div>
+		<!-- // tx-panel-detail -->
+	</div>
+	<!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+<!-- content -->
+<div id="tx-content">
+
+	<!-- list / thumbnail -->	
+	<!-- tx-show-panel, left padding with a panel (if panel is available) -->
+	<div class="tx-list tx-show-panel">
+    	
+		<form action="" method="post">
+			<fieldset>
+				<!-- tx-size1, tx-size2, tx-size3, different thumbnail sizes -->
+				<ol class="tx-size3">
+					<li>
+						<!-- img.tx-height, portrait thumbnail format -->
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<!-- img.tx-width, landscape thumbnail format -->
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+							<!-- custom defined icons, tx-right, global for "float: right" -->
+							<span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 19.08.2009"></span>
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+							<span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 17.07.2009"></span>
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+							<span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 24.06.2009"></span>
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+							<span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 08.07.2009"></span>
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+							<span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 12.08.2009"></span>
+						</div>
+					</li>
+					<li>
+						<div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div>
+						<div>
+							<input type="checkbox" value="" />
+						</div>
+					</li>
+				</ol>
+			</fieldset>
+		</form>
+		
+	</div>
+	<!-- // list / thumbnail -->
+	
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
new file mode 100644
index 0000000..ce4809d
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel-tree.xhtml
@@ -0,0 +1,324 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>panel-tree - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.menu.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+
+	<style type="text/css"> 
+		.col1 {
+			width: 7em; 
+		}
+		
+		.col2 {
+			width: 6em; 
+		}
+	</style>
+	
+</head>
+
+<body>
+
+<!-- header -->
+<div id="tx-header">
+	<!-- system -->
+	<div id="tx-system">
+
+		<!-- global search -->
+		<div id="tx-globalsearch">
+			<form action="/globalsearch/">
+			<fieldset>
+				<input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/>
+			</fieldset>	
+			</form>
+		</div>
+		
+		<!-- user information -->
+		<div id="tx-login">
+			<a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> 
+		</div>
+		
+		<div id="tx-logo"><a href=""></a></div>
+		
+		<!-- main menu -->
+		<div id="tx-menu">
+		<ol>
+			<li><a href="">Dashboard</a></li>
+			<li><a href="">Modulgruppe 1</a>
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+					<li><a href="">Submenu 3</a></li>
+					<li><a href="">Submenu 4</a></li>
+				</ol>
+			</li>
+			<li><a href="">Modulgruppe 2</a>	
+				<ol>
+					<li><a href="">Submenu 1</a></li>
+					<li><a href="">Submenu 2</a></li>
+				</ol>
+			</li>
+			<li><a href="">Help</a>
+				<ol>
+					<li><a href="">About</a></li>
+					<li><a href="">What</a></li>
+					<li><a href="">Where</a></li>
+				</ol>
+			</li>
+		</ol>
+		</div>
+	</div>
+	<!-- //system -->
+	
+	<!-- module -->
+	<div id="tx-module">
+		<!-- module title -->
+		<h1>panel-tree example</h1>
+
+		<!-- page editing actions -->
+		<div id="tx-page-actions">
+			<ol>
+				<li><a href="" class="tx-button tx-button-generic">Page Editing</a></li>
+				<li><a href="" class="tx-button tx-button-generic-on">Preview</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Page Data</a></li>
+				<li><a href="" class="tx-button tx-button-generic">Something</a></li>
+			</ol>
+		</div>	
+		
+	</div>
+	<!-- // module -->
+
+	<!-- moduletabs -->
+	<div id="tx-module-tabs">
+		<!-- moduletabs -->
+		<ol>
+			<li class="tx-active"><a href="#">Assets</a></li>	
+			<li><a href="#">Image Sets</a></li>	
+			<li><a href="#">My Lightboxes</a></li>
+			<li class="tx-active"><a href="#">My Something</a></li>
+			<li><a href="#">My Everything</a></li>	
+		</ol>
+		
+		<!--  -->
+		<div id="tx-contextual-buttons">
+			<ol>
+				<li><a href="#" class="tx-button tx-button-remove">Remove</a></li>
+				<li><a href="#" class="tx-button tx-button-create">Create</a></li>
+				<li><a href="#" class="tx-button tx-button-modify">Modify</a></li>
+				<li><a href="#" class="tx-button tx-button-generic">Generic</a></li>
+			</ol>
+		</div>
+	</div>	
+	<!-- // moduletabs -->
+	
+	<!-- moduleoptions -->
+	<div id="tx-module-options">	
+		<ol>
+			<li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li>
+			<li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li>
+			
+			<li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li>
+			<li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li>
+		</ol>	
+
+	</div>
+	<!-- // moduleoptions -->
+</div>
+<!-- // header -->
+
+<!-- panel -->
+<div class="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+	<a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+	<div class="tx-panel-window">
+		<!-- panel icons -->
+		<div class="tx-tab-buttons">
+
+		</div>
+
+		<div class="tx-panel-tabs">
+			<div>
+				<form action="" method="post">
+					<fieldset>
+						<label>
+							<input type="submit" value="" class="tx-icon tx-icon-search"/>
+							<input type="text" value="search assets" />
+
+						</label>
+					</fieldset>
+				</form>
+				<!-- selected filter elements -->
+				<div class="tx-filter">
+
+					<h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+					<ol>
+						<!-- filter elements, tx-icon is floating right, must be at the first place -->
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+					</ol>
+				</div>
+
+				<!-- results from filter -->
+				<div class="tx-result">
+				<!-- ul li contruct, only 2 levels supported -->
+					<ol>
+						<!-- main category-->
+						<li><a href="#">Type</a>
+							<ol>
+								<!-- sub category -->
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+								<li><a href="#">Flash (45)</a></li>
+								<li><a href="#">Documents (234)</a></li>
+								<li><a href="#">Images (234)</a></li>
+							</ol>
+						</li>
+						<!-- tx-open, open element icon, arrow down-->
+						<li class="tx-open"><a href="#">Taxonomy</a>
+							<ol>
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+							</ol>
+						</li>
+						<!-- li default shows an right arrow as background -->
+						<li><a href="#">Tags</a>
+							<ol>
+								<li><a href="#">Tiger (48)</a></li>
+								<li><a href="#">Animal (80)</a></li>
+								<li><a href="#">Africa (784)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Usage</a>
+							<ol>
+								<li><a href="#">Website (20)</a></li>
+								<li><a href="#">News (14)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Time</a>
+							<ol>
+								<li><a href="#">Yesterday (20)</a></li>
+								<li><a href="#">Last Week (14)</a></li>
+								<li><a href="#">Last Month (23)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Source</a>
+							<ol>
+								<li><a href="#">Flickr (14)</a></li>
+								<li><a href="#">Youtube (8)</a></li>
+							</ol>
+						</li>
+					</ol>
+				</div>
+				<!-- // tx-result -->
+			</div>
+		</div>
+		<!-- // tx-panel-detail -->
+	</div>
+	<!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+
+<!-- content -->
+<div id="tx-content">
+
+	<!-- tree view -->
+	<!-- aligned right -->
+	<div class="tx-tree tx-show-panel">
+    	
+		<!-- contains the tree -->
+		<div class="tx-tree-view">
+			<table class="tx-table">
+				<tr>
+					<th></th>
+					<th>Concepts</th>
+					<th class="col1">Tagged pages</th>
+					<th class="col2">In concepts</th>
+				</tr>
+			</table>
+			<!-- example folder structure -->
+			<ol>
+				<!--  tx-open, shows the arrow down on a "open" element -->
+				<li class="tx-open">
+					<!-- li content is wrapped inside a div to avoid some javascript event problems, eg. drag drop events can be assigned to the div instead -->
+					<div>
+						<!-- span class tx-info should be correspond with the table th widths -->
+						<span class="tx-info"><span class="col1">9</span><span class="col2">3</span></span>
+						<!-- drag icon -->
+						<div title=" Themes..." class="tx-icon tx-icon-drag">drag me</div>
+						<!-- checkbox -->
+						<input type="checkbox" /><!-- name --><a href=""></a><a href="">Themes...</a>
+					</div>
+					<!-- subelements of an li -->
+					<ol>
+						<li class="tx-open"><div>
+								<span class="tx-info"><span class="col1">29</span><span class="col2">2</span></span>
+								<div title=" Where" class="tx-icon tx-icon-drag">drag me</div>
+								<input type="checkbox" /><a href=""></a><a href=""> Where</a>
+							</div>
+							<ol>
+								<!-- li default shows an right arrow as background -->
+								<li><div>
+									<span class="tx-info"><span class="col1">51</span><span class="col2">5</span></span>
+									<div title="Africa" class="tx-icon tx-icon-drag">drag me</div>
+									<input type="checkbox" /><a href=""></a><a href="">Africa</a>
+								</div></li>
+								<li><div>
+									<span class="tx-info"><span class="col1">8</span><span class="col2">6</span></span>
+									<div title="Asia" class="tx-icon tx-icon-drag">drag me</div>
+									<input type="checkbox" /><a href=""></a><a href="">Asia</a>
+								</div></li>
+								<!-- tx-nobg, shows no arrow on a element, e.g. element has no subelements -->
+								<li class="tx-nobg"><div>
+									<span class="tx-info"><span class="col1">70</span><span class="col2">2</span></span>
+									<div title="Ecoregions" class="tx-icon tx-icon-drag">drag me</div>
+									<input type="checkbox" /><a href=""></a><a href="">Ecoregions</a>
+								</div></li>
+							</ol>
+						</li>		
+					</ol>
+				</li>
+			</ol>
+			<!-- // example folder structure-->
+		</div>
+		<!-- // tree view -->
+		
+	</div>
+	<!-- // tree -->
+
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
new file mode 100644
index 0000000..2c762d3
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/panel.xhtml
@@ -0,0 +1,235 @@
+<?xml version='1.0'?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+
+<!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">
+<head>
+<title>panel - example</title>
+
+	<link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" />
+	<link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" />
+
+	<script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
+	<script src="/jquery/jquery.panel.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+
+<!-- panel -->
+<div class="tx-panel demo" id="tx-panel">
+<!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes -->
+	<a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3>
+
+	<div class="tx-panel-window">
+		<!-- panel icons -->
+		<div class="tx-tab-buttons">
+
+		</div>
+
+		<div class="tx-panel-tabs">
+			<div>
+				<form action="" method="post">
+					<fieldset>
+						<label>
+							<input type="submit" value="" class="tx-icon tx-icon-search"/>
+							<input type="text" value="search assets" />
+
+						</label>
+					</fieldset>
+				</form>
+				<!-- selected filter elements -->
+				<div class="tx-filter">
+
+					<h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4>
+					<ol>
+						<!-- filter elements, tx-icon is floating right, must be at the first place -->
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li>
+						<li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li>
+					</ol>
+				</div>
+
+				<!-- results from filter -->
+				<div class="tx-result">
+				<!-- ul li contruct, only 2 levels supported -->
+					<ol>
+						<!-- main category-->
+						<li><a href="#">Type</a>
+							<ol>
+								<!-- sub category -->
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+								<li><a href="#">Flash (45)</a></li>
+								<li><a href="#">Documents (234)</a></li>
+								<li><a href="#">Images (234)</a></li>
+							</ol>
+						</li>
+						<!-- tx-open, open element icon, arrow down-->
+						<li class="tx-open"><a href="#">Taxonomy</a>
+							<ol>
+								<li><a href="#">Images (234)</a></li>
+								<li><a href="#">Videos (20)</a></li>
+							</ol>
+						</li>
+						<!-- li default shows an right arrow as background -->
+						<li><a href="#">Tags</a>
+							<ol>
+								<li><a href="#">Tiger (48)</a></li>
+								<li><a href="#">Animal (80)</a></li>
+								<li><a href="#">Africa (784)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Usage</a>
+							<ol>
+								<li><a href="#">Website (20)</a></li>
+								<li><a href="#">News (14)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Time</a>
+							<ol>
+								<li><a href="#">Yesterday (20)</a></li>
+								<li><a href="#">Last Week (14)</a></li>
+								<li><a href="#">Last Month (23)</a></li>
+							</ol>
+						</li>
+						<li><a href="#">Source</a>
+							<ol>
+								<li><a href="#">Flickr (14)</a></li>
+								<li><a href="#">Youtube (8)</a></li>
+							</ol>
+						</li>
+					</ol>
+				</div>
+				<!-- // tx-result -->
+			</div>
+		</div>
+		<!-- // tx-panel-detail -->
+	</div>
+	<!-- // tx-panel-window -->
+</div>
+<!-- // panel -->
+
+<!-- content -->
+<div id="tx-content" class="demo">
+
+	<div class="tx-edit tx-show-panel">
+
+		
+		<h3>Description</h3>
+		The panel on the left side is a &lt;div> with the class <strong>tx-panel</strong>.
+		<br/>
+		<br/>
+		The panel needs the jquery.panel.js, which defines the accordion effects.
+		<br/>
+		The show and hide functionality of the panel is currently only working on the <strong>div.tx-tree</strong>, <strong>div.tx-list</strong> and <strong>div.tx-edit</strong>. 		
+		<br/>
+		<br/>
+		<br/>
+		
+		<h3>Example code</h3>
+		
+		<pre>
+&lt;!-- panel --&gt;
+&lt;div class="tx-panel"&gt;
+&lt;!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --&gt;
+	&lt;a href="#" class="tx-panel-open-close"&gt;close/open&lt;/a&gt;&lt;h3&gt;Filter&lt;/h3&gt;
+	
+	&lt;div class="tx-panel-window"&gt;
+		&lt;!-- panel icons --&gt;
+		&lt;div class="tx-tab-buttons"&gt;
+		
+		&lt;/div&gt;
+		
+		&lt;div class="tx-panel-tabs"&gt;
+			&lt;div&gt;
+				&lt;form action="" method="post"&gt;
+					&lt;fieldset&gt;
+						&lt;label&gt;
+							&lt;input type="submit" value="" class="tx-icon tx-icon-search"/&gt;
+							&lt;input type="text" value="search assets" /&gt;
+							
+						&lt;/label&gt;
+					&lt;/fieldset&gt;
+				&lt;/form&gt;
+				&lt;!-- selected filter elements --&gt;
+				&lt;div class="tx-filter"&gt;
+				
+					&lt;h4&gt;&lt;a href="#" class="tx-icon tx-icon-delete"&gt;clear all&lt;/a&gt;&lt;a href=""&gt;Clear All&lt;/a&gt;Current filter:&lt;/h4&gt;
+					&lt;ol&gt;
+						&lt;!-- filter elements, tx-icon is floating right, must be at the first place --&gt;
+						&lt;li&gt;&lt;a href="#" class="tx-icon tx-icon-delete"&gt;remove&lt;/a&gt;Tiger&lt;/li&gt;
+						&lt;li&gt;&lt;a href="#" class="tx-icon tx-icon-delete"&gt;remove&lt;/a&gt;Last Week&lt;/li&gt;
+					&lt;/ol&gt;
+				&lt;/div&gt; 
+				
+				&lt;!-- results from filter --&gt;
+				&lt;div class="tx-result"&gt;
+				&lt;!-- ul li contruct, only 2 levels supported --&gt;
+					&lt;ol&gt;
+						&lt;!-- main category--&gt;
+						&lt;li&gt;&lt;a href="#"&gt;Type&lt;/a&gt;
+							&lt;ol&gt;
+								&lt;!-- sub category --&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Images (234)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Videos (20)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Flash (45)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Documents (234)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Images (234)&lt;/a&gt;&lt;/li&gt;
+							&lt;/ol&gt;
+						&lt;/li&gt;
+						&lt;!-- tx-open, open element icon, arrow down--&gt;
+						&lt;li class="tx-open"&gt;&lt;a href="#"&gt;Taxonomy&lt;/a&gt;
+							&lt;ol&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Images (234)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Videos (20)&lt;/a&gt;&lt;/li&gt;
+							&lt;/ol&gt;
+						&lt;/li&gt;
+						&lt;!-- li default shows an right arrow as background --&gt;
+						&lt;li&gt;&lt;a href="#"&gt;Tags&lt;/a&gt;
+							&lt;ol&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Tiger (48)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Animal (80)&lt;/a&gt;&lt;/li&gt;
+								&lt;li&gt;&lt;a href="#"&gt;Africa (784)&lt;/a&gt;&lt;/li&gt;
+							&lt;/ol&gt;
+						&lt;/li&gt;
+					&lt;/ol&gt;
+				&lt;/div&gt;
+				&lt;!-- // tx-result --&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+		&lt;!-- // tx-panel-detail --&gt;
+	&lt;/div&gt;	
+	&lt;!-- // tx-panel-window --&gt;
+&lt;/div&gt;	
+&lt;!-- // panel --&gt;
+		</pre>
+		
+	</div>
+
+</div>
+<!-- // content -->
+	
+</body>
+</html>
+

http://git-wip-us.apache.org/repos/asf/clerezza/blob/74fe1745/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
----------------------------------------------------------------------
diff --git a/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
new file mode 100644
index 0000000..22c8bb7
--- /dev/null
+++ b/platform.style.classic.webguiexamples/src/main/resources/CLEREZZA-INF/web-resources/web-gui-examples/style/demo.css
@@ -0,0 +1,64 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+*/
+
+#demo {
+	padding-left: 1.5em;
+	padding-top: 1.5em;
+}
+
+#demo ol {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	clear: both;
+}
+
+#demo ol li {
+	float: left;
+	clear: right;
+	margin: 1em;
+}
+
+#demo h3 {
+	clear: both;
+	margin: 0;
+	padding: 1em 0em;
+	
+}
+
+#demo h4 {
+	font-weight: normal;
+	clear: both;
+	margin: 0;
+	padding-left: 1em;
+}
+
+#demo .demo-bg {
+	background-color: #34C0DA;
+}
+
+#tx-content.demo {
+	top: 1em;
+}
+
+#tx-panel.demo {
+	top: 1em;
+}


Mime
View raw message