YAML files added

yaml/add-ons/accessible-tabs/jquery.tabs.js

@@ -0,0 +1,318 @@
+/**
+ * Accessible Tabs - jQuery plugin for accessible, unobtrusive tabs
+ * Build to seemlessly work with the CCS-Framework YAML (yaml.de) not depending on YAML though
+ * @requires jQuery - tested with 1.7 and 1.4.2 but might as well work with older versions
+ *
+ * english article: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php
+ * german article: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.php
+ *
+ * code: http://github.com/ginader/Accessible-Tabs
+ * please report issues at: http://github.com/ginader/Accessible-Tabs/issues
+ *
+ * Copyright (c) 2007 Dirk Ginader (ginader.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 1.9.4
+ *
+ * History:
+ * * 1.0 initial release
+ * * 1.1 added a lot of Accessibility enhancements
+ * * * rewrite to use "fn.extend" structure
+ * * * added check for existing ids on the content containers to use to proper anchors in the tabs
+ * * 1.1.1 changed the headline markup. thanks to Mike Davies for the hint.
+ * * 1.5 thanks to Dirk Jesse, Ansgar Hein, David Maciejewski and Mike West for commiting patches to this release
+ * * * new option syncheights that syncs the heights of the tab contents when the SyncHeight plugin
+ * *   is available http://blog.ginader.de/dev/jquery/syncheight/index.php
+ * * * fixed the hardcoded current class
+ * * * new option tabsListClass to be applied to the generated list of tabs above the content so lists
+ * *   inside the tabscontent can be styled differently
+ * * * added clearfix and tabcounter that adds a class in the schema "tabamount{number amount of tabs}"
+ * *   to the ul containg the tabs so one can style the tabs to fit 100% into the width
+ * * * new option "syncHeightMethodName" fixed issue: http://github.com/ginader/Accessible-Tabs/issues/2/find
+ * * * new Method showAccessibleTab({index number of the tab to show starting with 0})  fixed issue: http://github.com/ginader/Accessible-Tabs/issues/3/find
+ * * * added support for the Cursor Keys to come closer to the WAI ARIA Tab Panel Best Practices http://github.com/ginader/Accessible-Tabs/issues/1/find
+ * * 1.6
+ * * * new option "saveState" to allow tabs remember their selected state using cookies requires the cookie plugin: http://plugins.jquery.com/project/Cookie
+ * * * changed supported jquery version to 1.4.2 to make sure it's future compatible
+ * * * new option "autoAnchor" which allows to add ID's to headlines in the tabs markup that allow direct linking into a tab i.e.: file.html#headlineID
+ * * 1.7
+ * * * new option "pagination" that adds links to show the next/previous tab. This adds the following markup to each tab for you to style:
+ <ul class="pagination">
+     <li class="previous"><a href="#{the-id-of-the-previous-tab}"><span>{the headline of the previous tab}</span></a></li>
+     <li class="next"><a href="#{the-id-of-the-next-tab}"><span>{the headline of the previous tab}</span></a></li>
+ </ul>
+ * * 1.8
+ * * * new option "position" can be 'top' or 'bottom'. Defines where the tabs list is inserted.
+ * * 1.8.1
+ * * * Bugfix for broken pagination in ie6 and 7: Selector and object access modified by Daniel Köntös (www.MilkmanMedia.de). Thanks to Carolin Moll for the report.
+ * * 1.8.2
+ * * * Bugfix for issue described by Sunshine here: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php#c916
+ * * 1.8.3
+ * * * Bugfix by Michael Schulze: Only change current class in tab navigation and not in all unordered lists inside the tabs.
+ * * 1.9
+ * * * new method showAccessibleTabSelector({valid jQuery selector of the tab to show}) that allows the opening of tabs \
+ * * * by jQuery Selector instead of the index in showAccessibleTab() fixing issue https://github.com/ginader/Accessible-Tabs/issues/15
+ * * 1.9.1 by Michael Schulze:
+ * * * firstNavItemClass and lastNavItemClass to define a custom classname on the first and last tab
+ * * * wrapInnerNavLinks: inner wrap for a-tags in tab navigation.
+ * * 1.9.2
+ * * * Bugfix by Dirk Jesse: fixing an issue that happened when passing multiple selectors to the init call instead of one
+ * * * Bugfix that fixes a reset of the tabs counter when accessibleTabs() was called more than once on a page
+ * * 1.9.3
+ * * * Bugfix by Norm: before, when cssClassAvailable was true, all of the tabhead elements had to have classes or they wouldn't get pulled out into tabs.
+ * * * This commit fixes this assumption, as I only want classes on some elements https://github.com/ginader/Accessible-Tabs/pull/25
+ * * 1.9.4 Bugfix by Patrick Bruckner to fix issue with Internet Explorer using jQuery 1.7 https://github.com/ginader/Accessible-Tabs/issues/26
+ */
+
+
+(function($) {
+    var debugMode = true;
+    $.fn.extend({
+        // We assume there could be multiple sets of tabs on a page, so,
+        // the unique id for each invididual tab's heading is identified with params q and r (e.g., id="accessibletabscontent0-2")
+        getUniqueId: function(p, q, r){
+            if (r===undefined) {r='';} else {r='-'+r;}
+            return p + q + r;
+        },
+        accessibleTabs: function(config) {
+            var defaults = {
+                wrapperClass: 'content', // Classname to apply to the div that is wrapped around the original Markup
+                currentClass: 'current', // Classname to apply to the LI of the selected Tab
+                tabhead: 'h4', // Tag or valid Query Selector of the Elements to Transform the Tabs-Navigation from (originals are removed)
+                tabheadClass: 'tabhead', // Classname to apply to the target heading element for each tab div
+                tabbody: '.tabbody', // Tag or valid Query Selector of the Elements to be treated as the Tab Body
+                fx:'show', // can be "fadeIn", "slideDown", "show"
+                fxspeed: 'normal', // speed (String|Number): "slow", "normal", or "fast") or the number of milliseconds to run the animation
+                currentInfoText: 'current tab: ', // text to indicate for screenreaders which tab is the current one
+                currentInfoPosition: 'prepend', // Definition where to insert the Info Text. Can be either "prepend" or "append"
+                currentInfoClass: 'current-info', // Class to apply to the span wrapping the CurrentInfoText
+                tabsListClass:'tabs-list', // Class to apply to the generated list of tabs above the content
+                syncheights:false, // syncs the heights of the tab contents when the SyncHeight plugin is available http://blog.ginader.de/dev/jquery/syncheight/index.php
+                syncHeightMethodName:'syncHeight', // set the Method name of the plugin you want to use to sync the tab contents. Defaults to the SyncHeight plugin: http://github.com/ginader/syncHeight
+                cssClassAvailable:false, // Enable individual css classes for tabs. Gets the appropriate class name of a tabhead element and apply it to the tab list element. Boolean value
+                saveState:false, // save the selected tab into a cookie so it stays selected after a reload. This requires that the wrapping div needs to have an ID (so we know which tab we're saving)
+                autoAnchor:false, // will move over any existing id of a headline in tabs markup so it can be linked to it
+                pagination:false, // adds buttons to each tab to switch to the next/previous tab
+                position:'top', // can be 'top' or 'bottom'. Defines where the tabs list is inserted.
+                wrapInnerNavLinks: '', // inner wrap for a-tags in tab navigation. See http://api.jquery.com/wrapInner/ for further informations
+                firstNavItemClass: 'first', // Classname of the first list item in the tab navigation
+                lastNavItemClass: 'last' // Classname of the last list item in the tab navigation
+            };
+            var keyCodes = {
+                37 : -1, //LEFT
+                38 : -1, //UP
+                39 : +1, //RIGHT
+                40 : +1 //DOWN
+            };
+            var positions = {
+                top : 'prepend',
+                bottom : 'append'
+            };
+            this.options = $.extend(defaults, config);
+
+            var tabsCount = 0;
+            if($("body").data('accessibleTabsCount') !== undefined){
+                tabsCount = $("body").data('accessibleTabsCount');
+            }
+            $("body").data('accessibleTabsCount',this.size()+tabsCount);
+
+            var o = this;
+            return this.each(function(t) {
+                var el = $(this);
+                var list = '';
+                var tabCount = 0;
+                var ids = [];
+
+                $(el).wrapInner('<div class="'+o.options.wrapperClass+'"></div>');
+
+                $(el).find(o.options.tabhead).each(function(i){
+                    var id = '';
+                    elId = $(this).attr('id');
+                    if(elId){
+                        // Skip this item if it already exists.
+                        if(elId.indexOf('accessibletabscontent') === 0) {
+                            return;
+                        }
+                        id =' id="'+elId+'"';
+                    }
+                    var tabId = o.getUniqueId('accessibletabscontent', tabsCount+t, i);//get a unique id to assign to this tab's heading
+                    var navItemId = o.getUniqueId('accessibletabsnavigation', tabsCount+t, i);//get a unique id for this navigation item
+                    ids.push(tabId);
+                    if(o.options.cssClassAvailable === true) {
+                        var cssClass = '';
+                        if($(this).attr('class')) {
+                            cssClass = $(this).attr('class');
+                            cssClass = ' class="'+cssClass+'"';
+                        }
+                        list += '<li id="'+navItemId+'"><a'+id+''+cssClass+' href="#'+tabId+'">'+$(this).html()+'</a></li>';
+                    } else {
+                      list += '<li id="'+navItemId+'"><a'+id+' href="#'+tabId+'">'+$(this).html()+'</a></li>';
+                    }
+                    $(this).attr({"id": tabId, "class": o.options.tabheadClass, "tabindex": "-1"});//assign the unique id and the tabheadClass class name to this tab's heading
+                    tabCount++;
+                });
+
+                if (o.options.syncheights && $.fn[o.options.syncHeightMethodName]) {
+                    $(el).find(o.options.tabbody)[o.options.syncHeightMethodName]();
+                    $(window).resize(function(){
+                        $(el).find(o.options.tabbody)[o.options.syncHeightMethodName]();
+                    });
+                }
+
+                // Ensure that the call to setup tabs is re-runnable
+                var tabs_selector = '.' + o.options.tabsListClass;
+                if(!$(el).find(tabs_selector).length) {
+                    $(el)[positions[o.options.position]]('<ul class="clearfix '+o.options.tabsListClass+' tabamount'+tabCount+'"></ul>');
+                }
+
+                $(el).find(tabs_selector).append(list);
+
+                // initial show first content block and hide the others
+                var content = $(el).find(o.options.tabbody);
+                if (content.length > 0) {
+                    $(content).hide();
+                    $(content[0]).show();
+                }
+                $(el).find("ul."+o.options.tabsListClass+">li:first").addClass(o.options.currentClass).addClass(o.options.firstNavItemClass)
+                  .find('a')[o.options.currentInfoPosition]('<span class="'+o.options.currentInfoClass+'">'+o.options.currentInfoText+'</span>')
+                  .parents("ul."+o.options.tabsListClass).children('li:last').addClass(o.options.lastNavItemClass);
+
+                if (o.options.wrapInnerNavLinks) {
+                  $(el).find('ul.'+o.options.tabsListClass+'>li>a').wrapInner(o.options.wrapInnerNavLinks);
+                }
+
+                $(el).find('ul.'+o.options.tabsListClass+'>li>a').each(function(i){
+                    $(this).click(function(event){
+                        event.preventDefault();
+                        el.trigger("showTab.accessibleTabs", [$(event.target)]);
+                        if(o.options.saveState && $.cookie){
+                            $.cookie('accessibletab_'+el.attr('id')+'_active',i);
+                        }
+                        $(el).find('ul.'+o.options.tabsListClass+'>li.'+o.options.currentClass).removeClass(o.options.currentClass)
+                        .find("span."+o.options.currentInfoClass).remove();
+                        $(this).blur();
+                        $(el).find(o.options.tabbody+':visible').hide();
+                        $(el).find(o.options.tabbody).eq(i)[o.options.fx](o.options.fxspeed);
+                        $(this)[o.options.currentInfoPosition]('<span class="'+o.options.currentInfoClass+'">'+o.options.currentInfoText+'</span>')
+                        .parent().addClass(o.options.currentClass);
+                        //now, only after writing the currentInfoText span to the tab list link, set focus to the tab's heading
+                        $($(this).attr("href"),true).focus().keyup(function(event){
+                            if(keyCodes[event.keyCode]){
+                                o.showAccessibleTab(i+keyCodes[event.keyCode]);
+                                $(this).unbind( "keyup" );
+                            }
+                        });
+
+                        // $(el).find('.accessibletabsanchor').keyup(function(event){
+                        //     if(keyCodes[event.keyCode]){
+                        //         o.showAccessibleTab(i+keyCodes[event.keyCode]);
+                        //     }
+                        // });
+
+
+                    });
+
+                    $(this).focus(function(event){
+                        $(document).keyup(function(event){
+                            if(keyCodes[event.keyCode]){
+                                o.showAccessibleTab(i+keyCodes[event.keyCode]);
+                            }
+                        });
+                    });
+                    $(this).blur(function(event){
+                        $(document).unbind( "keyup" );
+                    });
+
+                });
+
+                if(o.options.saveState && $.cookie){
+                    var savedState = $.cookie('accessibletab_'+el.attr('id')+'_active');
+                    debug($.cookie('accessibletab_'+el.attr('id')+'_active'));
+                    if(savedState !== null){
+                        o.showAccessibleTab(savedState,el.attr('id'));
+                    }
+                }
+
+                if(o.options.autoAnchor && window.location.hash){
+                    var anchorTab = $('.'+o.options.tabsListClass).find(window.location.hash);
+                    if(anchorTab.size()){
+                        anchorTab.click();
+                    }
+                }
+
+                if(o.options.pagination){
+                    var m = '<ul class="pagination">';
+                    m +='    <li class="previous"><a href="#{previousAnchor}"><span>{previousHeadline}</span></a></li>';
+                    m +='    <li class="next"><a href="#{nextAnchor}"><span>{nextHeadline}</span></a></li>';
+                    m +='</ul>';
+                    var tabs = $(el).find('.tabbody');
+                    var tabcount = tabs.size();
+                    tabs.each(function(idx){
+                        $(this).append(m);
+                        var next = idx+1;
+                        if(next>=tabcount){next = 0;}
+                        var previous = idx-1;
+                        if(previous<0){previous = tabcount-1;}
+                        var p = $(this).find('.pagination');
+                        var previousEl = p.find('.previous');
+                        previousEl.find('span').text($('#'+ids[previous]).text());
+                        previousEl.find('a').attr('href','#'+ids[previous])
+                        .click(function(event){
+                            event.preventDefault();
+                            $(el).find('.tabs-list a').eq(previous).click();
+                        });
+                        var nextEl = p.find('.next');
+                        nextEl.find('span').text($('#'+ids[next]).text());
+                        nextEl.find('a').attr('href','#'+ids[next])
+                        .click(function(event){
+                            event.preventDefault();
+                            $(el).find('.tabs-list a').eq(next).click();
+                        });
+                    });
+                }
+            });
+        },
+        showAccessibleTab: function(index,id){
+            debug('showAccessibleTab');
+            var o = this;
+            if(id) {
+                var el = $('#'+id);
+                var links = el.find('ul.'+o.options.tabsListClass+'>li>a');
+                el.trigger("showTab.accessibleTabs", [links.eq(index)]);
+                links.eq(index).click();
+            } else {
+                return this.each(function() {
+                    var el = $(this);
+                    el.trigger("showTab.accessibleTabs");
+                    var links = el.find('ul.'+o.options.tabsListClass+'>li>a');
+                    el.trigger("showTab.accessibleTabs", [links.eq(index)]);
+                    links.eq(index).click();
+                });
+            }
+        },
+        showAccessibleTabSelector: function(selector){
+            debug('showAccessibleTabSelector');
+            var o = this;
+            var el = $(selector);
+            if(el){
+                if(el.get(0).nodeName.toLowerCase() == 'a'){
+                    el.click();
+                }else{
+                    debug('the selector of a showAccessibleTabSelector() call needs to point to a tabs headline!');
+                }
+            }
+        }
+    });
+    // private Methods
+    function debug(msg,info){
+        if(debugMode && window.console && window.console.log){
+            if(info){
+                window.console.log(info+': ',msg);
+            }else{
+                window.console.log(msg);
+            }
+        }
+    }
+})(jQuery);

yaml/add-ons/accessible-tabs/tabs.css

@@ -0,0 +1,136 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Styles for Accessible-Tabs plugin for jQuery
+ * (de) Gestaltung des Acessible-Tabs Plugins für jQuery
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media screen, projection {
+
+	.jquery_tabs {
+		margin:1.5em 0 0;
+	}
+
+	.jquery_tabs ul.tabs-list {
+		display:table;
+		font-size:1em;
+		line-height:1.5em;
+		list-style-type:none;
+		margin: 0;
+		position:relative;
+		z-index:1;
+	}
+
+	.jquery_tabs ul.tabs-list li a {
+		font-size:1em;
+		line-height: 1.5em;
+		padding:0.75em;
+	}
+
+	.jquery_tabs .tabhead {
+		position:absolute;
+		left:-32768px; /* LTR */
+	}
+
+	.jquery_tabs .content {
+		border-top:1px #ccc solid;
+		clear:both;
+		padding: 0;
+		position:relative;
+		top:-1px;
+		margin-bottom:-1px;
+	}
+
+	.jquery_tabs ul.tabs-list li {
+		border:0 none;
+		display:inline;
+		float:left;
+		margin:0 0.3em 0 0;
+		padding:0;
+	}
+
+	.jquery_tabs ul.tabs-list li a {
+		background: transparent;
+		color:#008;
+		display:block;
+		float:left;
+		font-weight:normal;
+		margin:0;
+	}
+
+	.jquery_tabs ul.tabs-list li a:focus,
+	.jquery_tabs ul.tabs-list li a:hover,
+	.jquery_tabs ul.tabs-list li a:active {
+		background:#eee;
+		border-radius: 0.2em 0.2em 0 0;
+		color:#000;
+		font-weight:normal;
+		outline: 0 none;
+		text-decoration:none;
+	}
+
+	.jquery_tabs ul.tabs-list li.current a,
+	.jquery_tabs ul.tabs-list li.current a:focus,
+	.jquery_tabs ul.tabs-list li.current a:hover,
+	.jquery_tabs ul.tabs-list li.current a:active {
+		background:#fff;
+		border:1px #ccc solid;
+		border-bottom:0 none;
+		border-radius: 0.2em 0.2em 0 0;
+		color:#000;
+		font-weight:bold;
+		text-decoration:none;
+	}
+
+	.jquery_tabs .current-info,
+	.jquery_tabs .accessibletabsanchor {
+		left:-999em;
+		position:absolute;
+	}
+
+	/**
+	* Avoid margin collapsing to enable correct sync of all tabs
+	*
+	* @workaround
+	* @affected all browsers
+	* @css-for all browsers
+	* @valid yes
+	*/
+
+	.jquery_tabs .tab-content {
+		border-bottom: 1px transparent solid;
+		border-top: 1px transparent solid;
+		*overflow:hidden;
+	}
+
+	/* IE < 7 don't support transparent borders */
+	* html .jquery_tabs .tab-content {
+		border-bottom: 1px #fff solid;
+		border-top: 1px #fff solid;
+	}
+
+	/**
+	* Containing floats adjustment and stability fixes for Internet Explorer
+	*
+	* @workaround
+	* @affected IE 5.x/Win, IE6, IE7
+	* @css-for IE 5.x/Win, IE6, IE7
+	* @valid no
+	*/
+
+	* html .jquery_tabs .content { z-index:-1; }
+
+	* html .jquery_tabs { zoom:1; width:auto; position:relative; }
+	*+html .jquery_tabs { zoom:1; width:auto; }
+
+	.jquery_tabs * { zoom:1; }
+}

yaml/add-ons/microformats/microformats.css

@@ -0,0 +1,175 @@
+
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) YAML-Addon:Microformats Support
+ * (de) YAML-Addon:Unterstützung für Microformate
+ *
+ * @note            Many thanks to Michael Jendryschik (http://jendryschik.de/) for contribution
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date:2009-07-05 12:18:40 +0200 (So, 05. Jul 2009) $
+ */
+
+/* hCards + hCalendars */
+
+@media all {
+
+	.vcard,
+	.vevent {
+		line-height: 1.5em;
+		border:2px solid #e0e7b8 !important;
+		padding:30px 5px 5px 5px !important;
+		border-radius:8px;
+		-moz-border-radius:8px;
+		-webkit-border-radius:8px;
+		margin: 1.5em 0 0 0 !important;
+		/* small IE-Fix for background images */
+		zoom:1;
+	}
+
+	span.vcard,
+	span.vevent {
+		padding:2px 1px 2px 70px !important;
+		margin:0 2px 0 !important;
+	}
+
+	.vcard {
+		background:#f8f8ec url(icons/hcard.png) 5px 5px no-repeat !important;
+	}
+
+	.vcard a {
+		padding-left:11px;
+		background:url(icons/external_link.png) top left no-repeat;
+		color:#679A06;
+	}
+
+	.vcard .adr {
+		display:block;
+		margin:0.5em 0;
+	}
+
+	.vcard .email {
+		font-family:Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
+	}
+
+	.vevent {
+		background:#f8f8ec url(icons/hcalendar.png) 5px 5px no-repeat !important;
+	}
+
+	.vevent a {
+		padding-left:11px;
+		background:url(icons/external_link.png) top left no-repeat;
+		color:#679A06;
+	}
+
+	.vevent p {
+		margin: 0;
+	}
+
+	.vevent .description {
+		display:block;
+		margin-top:1em;
+	}
+
+	.vevent .location {
+		display:block;
+		color:#679A06;
+	}
+
+	.vevent .summary {
+		display:block;
+		color:#679A06;
+		font-weight:bold;
+	}
+
+	/* XFN relationship */
+
+	a.xfnRelationship {
+		padding-right:26px;
+		background-image:url(icons/xfn/xfn-small.png);
+		background-repeat: no-repeat;
+		background-position: right;
+	}
+
+	a.xfnRelationship[rel~="colleague"],
+	a.xfnRelationship[rel~="co-worker"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-colleague.png);
+	}
+
+	a.xfnRelationship[rel~="met"] {
+		padding-right:32px;
+		background-image:url(icons/icon-xfn.png);
+	}
+
+	a.xfnRelationship[rel~="colleague"][rel~="met"],
+	a.xfnRelationship[rel~="co-worker"][rel~="met"] {
+		padding-right:26px;
+		background-image:url(icons/xfn/xfn-colleague-met.png);
+	}
+
+	a.xfnRelationship[rel~="friend"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-friend.png);
+	}
+
+	a.xfnRelationship[rel~="friend"][rel~="met"] {
+		padding-right:26px;
+		background-image:url(icons/xfn/xfn-friend-met.png);
+	}
+
+	a.xfnRelationship[rel~="sweetheart"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-sweetheart.png);
+	}
+
+	a.xfnRelationship[rel~="sweetheart"][rel~="met"] {
+		padding-right:26px;
+		background-image:url(icons/xfn/xfn-sweetheart-met.png);
+	}
+
+	a.xfnRelationship[rel~="child"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-child.png);
+	}
+
+	a.xfnRelationship[rel~="parent"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-parent.png);
+	}
+
+	a.xfnRelationship[rel~="spouse"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-spouse.png);
+	}
+
+	a.xfnRelationship[rel~="me"] {
+		padding-right:21px;
+		background-image:url(icons/xfn/xfn-me.png);
+	}
+
+	/* rel-tag */
+
+	a[rel~="tag"] {
+		padding-right:32px;
+		background-image:url(icons/icon-rel-tag.png);
+		background-repeat: no-repeat;
+		background-position: right;
+	}
+
+	/* geo */
+
+	abbr[class~="geo"] {
+		padding-right:32px;
+		background:url(icons/icon-geo.png) no-repeat right;
+		border:none;
+		cursor:default;
+	}
+}

yaml/add-ons/rtl-support/core/base-rtl.css

@@ -0,0 +1,77 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) YAML core RTL stylesheet
+ * (de) YAML Basis-RTL-Stylesheet
+ *
+ * Don't make any changes in this file!
+ * Your changes should be placed in any css-file in your own stylesheet folder.
+ *
+ * @note:           Many thanks to Alexander Hass (http://www.yaml-fuer-drupal.de/) for contribution
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all {
+
+	/**
+	* @section browser normalisation
+	* Changing direction of text flow, paddings & margins ...
+	*/
+
+	option { padding: 0 0.4em 0 0; }
+
+	body {
+		text-align: right;
+		direction: rtl;
+	}
+
+	ul, ol, dl { margin: 0 1em 1em 0; }
+	li {
+		margin-left: 0;
+		margin-right: 0.8em;
+	}
+
+	dd { margin: 0 0.8em 1em 0; }
+	blockquote, cite { margin: 0 0.8em 1em 0; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) skip links cause large horizontal scrollbars in RTL mode in several browsers
+	* (de) skip links erzeugen große horziontale Scrollbalken in verschiedenen Browserin im RTL-Modus
+	*
+	* @workaround
+	* @affected   Firefox, Safari, IE 5.x - IE7
+	* @css-for    all
+	* @valid      yes
+	*/
+
+	.ym-skiplinks { left: 32768px !important; }
+	.ym-skiplinks .ym-skip:focus,
+	.ym-skiplinks .ym-skip:active{ left: -32768px !important; }
+
+	.ym-skip,
+	.ym-hideme,
+	.ym-print { left: 32768px !important; }
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* @section miscellaneous
+	*
+	* (en) CSS-class for ltr-content (left to right) within a rtl website
+	* (de) Eine CSS-Klasse für ltr-Inhalte (left to right) innerhalb einer rtl-Seite
+	*/
+
+	.ym-text-ltr {
+		direction: ltr;
+		text-align: left;
+	}
+}

yaml/add-ons/rtl-support/core/base-rtl.min.css

@@ -0,0 +1,3 @@
+/* "Yet Another Multicolumn Layout" v4.0.1 (c) by Dirk Jesse (http://www.yaml.de)
+* $Revision: 724 $ $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $ */
+@media all{option{padding:0 .4em 0 0}body{text-align:right;direction:rtl}ul,ol,dl{margin:0 1em 1em 0}li{margin-left:0;margin-right:.8em}dd{margin:0 .8em 1em 0}blockquote,cite{margin:0 .8em 1em 0}.ym-skiplinks{left:32768px!important}.ym-skiplinks .ym-skip:focus,.ym-skiplinks .ym-skip:active{left:-32768px!important}.ym-skip,.ym-hideme,.ym-print{left:32768px!important}.ym-text-ltr{direction:ltr;text-align:left}}

yaml/add-ons/rtl-support/navigation/hlist-rtl.css

@@ -0,0 +1,54 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) RTL Horizontal list navigation "hlist"
+ * (de) RTL Horizontale Navigationsliste "hlist"
+ *
+ * @note:           Many thanks to Alexander Hass (http://www.yaml-fuer-drupal.de/) for contribution
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all
+{
+	/**
+	* (en) Workaround disappearing list elements on hover
+	* (de) Workaround verhindert das Verschwinden der Listenelemente beim Hovern
+	*
+	* @workaround
+	* @affected   IE 5.x/Win, IE6, IE7
+	* @css-for    IE 5.x/Win, IE6, IE7
+	* @valid      yes
+	*/
+
+	.ym-hlist * { direction:ltr !important; }
+	.ym-hlist a,
+	.ym-hlist strong { direction:rtl !important; }
+
+  	.ym-hlist ul {
+		position:relative;
+		float:right;
+		/* (en) Left margin of the first button  */
+		/* (de) Abstand des ersten Buttons vom linken Rand  */
+		margin-left: 0; /* Reset LTR */
+	}
+
+	.ym-hlist ul li {
+		float: right;
+		text-align:right !important;
+	}
+
+	.ym-searchform {
+		float:left;
+		display: inline;
+		line-height: 2em;
+		padding: 0.5em 1.5em;
+	}
+}

yaml/add-ons/rtl-support/navigation/vlist-rtl.css

@@ -0,0 +1,61 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Vertical RTL list navigation "vlist"
+ * (de) Vertikale RTL-Navigationsliste "vlist"
+ *
+ * @note:           Many thanks to Alexander Hass (http://www.yaml-fuer-drupal.de/) for contribution
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all {
+
+	/* menu title */
+	h6.ym-vlist {
+		padding-left: 0px;
+		padding-right: 10%;
+	}
+
+	.ym-vlist { text-align: right; }
+	.ym-vlist li { float:right; }
+
+	/* Level 1 */
+	.ym-vlist a,
+	.ym-vlist strong,
+	.ym-vlist span {
+		padding-left: 0px;
+		padding-right: 10%;
+	}
+
+	/* Level 2 */
+	.ym-vlist li ul li a,
+	.ym-vlist li ul li strong,
+	.ym-vlist li ul li span {
+		padding-left: 0px;
+		padding-right: 20%;
+	}
+
+	/* Level 3 */
+	.ym-vlist li ul li ul li a,
+	.ym-vlist li ul li ul li strong,
+	.ym-vlist li ul li ul li span {
+		padding-left: 0px;
+		padding-right: 30%;
+	}
+
+	/* Level 4 */
+	.ym-vlist li ul li ul li ul li a,
+	.ym-vlist li ul li ul li ul li strong,
+	.ym-vlist li ul li ul li ul li span {
+		padding-left: 0px;
+		padding-right: 40%;
+	}
+}

yaml/add-ons/rtl-support/screen/typography-rtl.css

@@ -0,0 +1,44 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Uniform design of standard content elements
+ * (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         4.0
+ * @revision        $Revision: 657 $
+ * @lastmodified    $Date: 2012-01-11 21:36:23 +0100 (Mi, 11 Jan 2012) $
+ */
+
+@media all {
+
+	/* --- Lists | Listen  -------------------------------------------------------------------------------- */
+
+	ul,
+	ol,
+	dl {
+		margin-left: 0;
+		margin-right: 1em;
+	}
+
+	li {
+		margin-left: 0;
+		margin-right: 0.8em;
+	}
+
+	dd {
+		margin-left: 0;
+		margin-right: 0.8em;
+	}
+
+	/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
+
+	blockquote {
+		margin-left: 0;
+		margin-right: 1.5em;
+	}
+}

yaml/add-ons/syncheight/jquery.syncheight.js

@@ -0,0 +1,88 @@
+/**
+ * syncHeight - jQuery plugin to automagically Snyc the heights of columns
+ * Made to seemlessly work with the CCS-Framework YAML (yaml.de)
+ * @requires jQuery v1.0.3
+ *
+ * http://blog.ginader.de/dev/syncheight/
+ *
+ * Copyright (c) 2007-2009
+ * Dirk Ginader (ginader.de)
+ * Dirk Jesse (yaml.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 1.2
+ *
+ * Usage:
+	$(window).load(function(){
+		$('p').syncHeight();
+	});
+ */
+
+(function($) {
+	var getHeightProperty = function() {
+		var browser_id = 0;
+		var property = [
+			// To avoid content overflow in synchronised boxes on font scaling, we
+			// use 'min-height' property for modern browsers ...
+			['min-height','0px'],
+			// and 'height' property for Internet Explorer.
+			['height','1%']
+		];
+
+		// check for IE6 ...
+		if($.browser.msie && $.browser.version < 7){
+			browser_id = 1;
+		}
+
+		return { 'name': property[browser_id][0],
+				'autoheightVal': property[browser_id][1] };
+	};
+
+	$.getSyncedHeight = function(selector) {
+		var max = 0;
+		var heightProperty = getHeightProperty();
+		// get maximum element height ...
+		$(selector).each(function() {
+			// fallback to auto height before height check ...
+			$(this).css(heightProperty.name, heightProperty.autoheightVal);
+			var val = $(this).height();
+			if(val > max){
+				max = val;
+			}
+		});
+		return max;
+	};
+
+	$.fn.syncHeight = function(config) {
+		var defaults = {
+			updateOnResize: false,	// re-sync element heights after a browser resize event (useful in flexible layouts)
+			height: false
+		};
+		var options = $.extend(defaults, config);
+
+		var e = this;
+
+		var max = 0;
+		var heightPropertyName = getHeightProperty().name;
+
+		if(typeof(options.height) === "number") {
+			max = options.height;
+		} else {
+			max = $.getSyncedHeight(this);
+		}
+		// set synchronized element height ...
+		$(this).each(function() {
+			$(this).css(heightPropertyName, max+'px');
+		});
+
+		// optional sync refresh on resize event ...
+		if (options.updateOnResize === true) {
+			$(window).resize(function(){
+				$(e).syncHeight();
+			});
+		}
+		return this;
+	};
+})(jQuery);

yaml/core/base.css

@@ -0,0 +1,476 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) YAML core stylesheet
+ * (de) YAML Basis-Stylesheet
+ *
+ * Don't make any changes in this file!
+ * Your changes should be placed in any css-file in your own stylesheet folder.
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 726 $
+ * @lastmodified    $Date: 2012-03-03 12:21:50 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all {
+
+	/**
+	* @section CSS-Normalisation Module
+	*/
+
+	/* (en) Global reset of paddings and margins for all HTML elements */
+	/* (de) Globales Zurücksetzen der Innen- und Außenabstände für alle HTML-Elemente */
+	* { margin:0; padding:0; }
+
+	/* (en) Correction:margin/padding reset caused too small select boxes. */
+	/* (de) Korrektur:Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
+	option { padding-left:0.4em; } /* LTR */
+	select { padding:1px; }
+
+	/**
+	* (en) Global fix of the Italics bugs in IE 5.x and IE 6
+	* (de) Globale Korrektur des Italics Bugs des IE 5.x und IE 6
+	*
+	* @bugfix
+	* @affected   IE 5.x/Win, IE6
+	* @css-for    IE 5.x/Win, IE6
+	* @valid      yes
+	*/
+	* html body * { overflow:visible; }
+
+	body {
+		/* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
+		/* (de) Beseitigung von Rundungsfehler beim Skalieren von Schriftgrößen in älteren Opera Versionen */
+		font-size:100%;
+
+		/* (en) Standard values for colors and text alignment */
+		/* (de) Vorgabe der Standardfarben und Textausrichtung */
+		background:#fff;
+		color:#000;
+		text-align:left; /* LTR */
+	}
+
+	/* (en) avoid visible outlines on DIV containers in Webkit browsers */
+	/* (de) Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern */
+	div:target { outline:0 none; }
+
+	/* (en) HTML 5 - adjusting visual formatting model to block level */
+	/* (en) HTML 5 - Anpassung des visuellen Formatmodells auf Blockelemente */
+	article,aside,details,figcaption,figure,
+	footer,header,hgroup,nav,section {
+		display:block;
+	}
+
+	/* (en) HTML5 - default media element styles */
+	/* (de) HTML5 - Standard Eigenschaften für Media-Elemente */
+	audio,
+	canvas,
+	video {
+		display: inline-block;
+	}
+
+	/* (en) HTML5 - don't show <audio> element if there aren't controls */
+	/* (de) HTML5 - <audio> ohne Kontrollelemente sollten nicht angezeigt werden */
+	audio:not([controls]) {
+		display: none;
+	}
+
+	/* (en) HTML5 - add missing styling in IE & old FF for hidden attribute  */
+	/* (de) HTML5 - Eigenschaften für das hidden-Attribut in älteren IEs und FF nachrüsten */
+	[hidden] {
+		display: none;
+	}
+
+	/* (en) force consistant appearance of input[type="search"] elements in all browser  */
+	/* (de) Einheitliches Erscheinungsbild für input[type="search"] Elemente erzwingen  */
+	input[type="search"] {
+		-webkit-appearance: textfield;
+	}
+	input[type="search"]::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	/* (en) Clear borders for <fieldset> and <img> elements */
+	/* (de) Rahmen für <fieldset> und <img> Elemente löschen */
+	fieldset, img { border:0 solid; }
+
+	/* (en) new standard values for lists, blockquote, cite and tables */
+	/* (de) Neue Standardwerte für Listen, Zitate und Tabellen */
+	ul, ol, dl { margin:0 0 1em 1em; } /* LTR */
+	li {
+		line-height:1.5em;
+		margin-left:0.8em; /* LTR */
+	}
+
+	dt { font-weight:bold; }
+	dd { margin:0 0 1em 0.8em; } /* LTR */
+
+	blockquote { margin:0 0 1em 0.8em; } /* LTR */
+	q { quotes: none; }
+
+	blockquote:before, blockquote:after,
+	q:before, q:after { content: ''; content:none }
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+ 	/**
+	* @section Float Handling Module
+	*/
+
+	/* (en) clearfix method for clearing floats */
+	/* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
+	.ym-clearfix:before {
+		content:"";
+		display:table;
+	}
+	.ym-clearfix:after {
+		clear:both;
+		content:".";
+		display:block;
+		font-size:0;
+		height:0;
+		visibility:hidden;
+	}
+
+	/* (en) alternative solutions to contain floats */
+	/* (de) Alternative Methoden zum Einschließen von Float-Umgebungen */
+	.ym-contain-dt { display:table; width: 100%; overflow: visible; }
+	.ym-contain-oh { overflow:hidden; width:100%; display:block; }
+	.ym-contain-fl { float:left; width:100%; }
+
+	/**
+	* @section Accessibility Module
+	*
+	* (en) skip links and hidden content
+	* (de) Skip-Links und versteckte Inhalte
+	*/
+
+	/* (en) classes for invisible elements in the base layout */
+	/* (de) Klassen für unsichtbare Elemente im Basislayout */
+	.ym-skip,
+	.ym-hideme,
+	.ym-print {
+		position:absolute;
+		top:-32768px;
+		left:-32768px; /* LTR */
+	}
+
+	/* (en) make skip links visible when using tab navigation */
+	/* (de) Skip-Links für Tab-Navigation sichtbar schalten */
+	.ym-skip:focus,
+	.ym-skip:active {
+		position:static;
+		top:0;
+		left:0;
+	}
+
+	/* skiplinks:technical setup */
+	.ym-skiplinks {
+		position:absolute;
+		top:0px;
+		left:-32768px;
+		z-index:1000;
+		width:100%;
+		margin:0;
+		padding:0;
+		list-style-type:none;
+	}
+
+	.ym-skiplinks .ym-skip:focus,
+	.ym-skiplinks .ym-skip:active {
+		left:32768px;
+		outline:0 none;
+		position:absolute;
+		width:100%;
+	}
+}
+
+@media screen, projection {
+
+	/**
+	* @section Column Module
+	*
+	* default column config:
+	* |-------------------------------|
+	* | col1    | col3      | col2    |
+	* | 20%     | flexible  | 20%     |
+	* |-------------------------------|
+	*/
+
+	.ym-column { display:table; width:100%; }
+
+	.ym-col1 { float:left; width:20%; }
+	.ym-col2 { float:right; width:20%; }
+	.ym-col3 { width:auto; margin:0 20%; }
+
+	.ym-cbox { padding: 0 10px }
+	.ym-cbox-left { padding: 0 10px 0 0 }
+	.ym-cbox-right { padding: 0 0 0 10px }
+
+	/* (en) IE-Clearing:Only used in Internet Explorer, switched on in iehacks.css */
+	/* (de) IE-Clearing:Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
+	.ym-ie-clearing { display:none; }
+
+	/**
+	* @section Grid Module
+	*
+	*/
+
+	.ym-grid {
+		display:table;
+		width:100%;
+		table-layout:fixed;
+		list-style-type: none;
+		padding-left:0;
+		padding-right:0;
+		margin-left:0;
+		margin-right:0;
+	}
+
+	.ym-gl { float:left; margin: 0; }
+	.ym-gr { float:right; margin: 0 0 0 -5px; }
+
+	.ym-g20 { width:20%; }
+	.ym-g40 { width:40%; }
+	.ym-g60 { width:60%; }
+	.ym-g80 { width:80%; }
+	.ym-g25 { width:25%; }
+	.ym-g33 { width:33.333%; }
+	.ym-g50 { width:50%; }
+	.ym-g66 { width:66.666%; }
+	.ym-g75 { width:75%; }
+	.ym-g38 { width:38.2%; }
+	.ym-g62 { width:61.8%; }
+
+	.ym-gbox { padding: 0 10px }
+	.ym-gbox-left { padding: 0 10px 0 0 }
+	.ym-gbox-right { padding: 0 0 0 10px }
+
+	.ym-equalize { overflow:hidden; }
+
+	.ym-equalize > [class*="ym-g"] {
+		display:table-cell;
+		float:none;
+		margin:0;
+		vertical-align:top;
+	}
+
+	.ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
+		padding-bottom: 10000px;
+		margin-bottom: -10000px
+	}
+}
+
+@media all {
+
+   /**
+	* @section Form Module
+	*
+	* Vertical-Forms - technical base (standard)
+	*
+	* |-------------------------------|
+	* | form                          |
+	* |-------------------------------|
+	* |   label                       |
+	* |   input / select / textarea   |
+	* |-------------------------------|
+	* | /form                         |
+	* |-------------------------------|
+	*
+	* (en) Styling of forms where both label and input/select/textarea are styled with display:block;
+	* (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
+	*/
+
+	.ym-form,
+	.ym-form fieldset { overflow:hidden; }
+
+	.ym-form div { position:relative; }
+	
+	.ym-form label,
+	.ym-form .ym-message {
+		position:relative;
+		display:block; /* important for Safari */
+	}
+
+	.ym-form .ym-fbox-check label {
+		display:inline;
+	}
+
+	.ym-form input,
+	.ym-form textarea { cursor:text; }
+
+	.ym-form input[type="checkbox"],
+	.ym-form input[type="radio"],
+	.ym-form select,
+	.ym-form label { cursor:pointer; }
+
+	/* small adjustments for Internet Explorer - all versions */
+	.ym-form textarea { overflow: auto; }
+
+	/* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
+	.ym-form input[type=hidden] { display:none !important; }
+
+	/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
+	.ym-form .ym-fbox-text:before,
+	.ym-form .ym-fbox-select:before,
+	.ym-form .ym-fbox-check:before,
+	.ym-form .ym-fbox-button:before {
+		content:"";
+		display:table;
+	}
+
+	.ym-form .ym-fbox-text:after,
+	.ym-form .ym-fbox-select:after,
+	.ym-form .ym-fbox-check:after,
+	.ym-form .ym-fbox-button:after {
+		clear:both;
+		content:".";
+		display:block;
+		font-size:0;
+		height:0;
+		visibility:hidden;
+	}
+
+	/* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
+	.ym-form select,
+	.ym-form input,
+	.ym-form textarea {
+		display:block;
+		position:relative;
+		width:58.5%;
+	}
+
+	.ym-form .ym-fbox-check input {
+		display: inline;
+		width: auto;
+	}
+
+	/* Styling of buttons | Gestaltung von Buttons */
+	.ym-form .ym-fbox-button input {
+		display: inline;
+		overflow:visible;  /* Fixes IE7 auto-padding bug */
+		width:auto;
+	}
+
+	/* avoid jumping checkboxes & radiobuttons in IE8 */
+	.ym-form .ym-fbox-check input:focus,
+	.ym-form .ym-fbox-check input:hover,
+	.ym-form .ym-fbox-check input:active {
+		border:0 none;
+	}
+
+	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
+
+	.ym-full .ym-fbox-select select,
+	.ym-full .ym-fbox-text input,
+	.ym-full .ym-fbox-text textarea {
+		width:94.2%;
+		margin-right: -3px;
+	}
+
+   /**
+	* Columnar forms display - technical base (optional)
+	*
+	* |-------------------------------------------|
+	* | form                                      |
+	* |-------------------------------------------|
+	* |                                           |
+	* |   label   |   input / select / textarea   |
+	* |                                           |
+	* |-------------------------------------------|
+	* | /form                                     |
+	* |-------------------------------------------|
+	*
+	* (en) Styling of forms where label floats left of form-elements
+	* (de) Formulargestaltung, bei der die label-Elemente nach links fließen
+	*/
+
+	/* Columnar display | Spalten-Darstellung */
+	.ym-columnar .ym-fbox-text label,
+	.ym-columnar .ym-fbox-select label {
+		display:inline;
+		float:left;
+		width:30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
+	}
+	.ym-columnar .ym-fbox-check {
+		position:relative;
+	}
+
+	.ym-label { display:block; }
+	.ym-columnar .ym-fbox-check .ym-label {
+		position:absolute;
+		top:0;
+	}
+
+	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
+	.ym-columnar .ym-fbox-check input,
+	.ym-columnar .ym-error .ym-message {
+		margin-left:30%;
+	}
+
+	/* global and local columnar settings for button alignment */
+	.ym-columnar fieldset .ym-fbox-button,
+	fieldset.ym-columnar .ym-fbox-button {
+		padding-left:30%;
+	}
+
+	.ym-columnar .ym-fbox-select select,
+	.ym-columnar .ym-fbox-text input,
+	.ym-columnar .ym-fbox-text textarea {
+		float:left;
+		width:67.2%;
+		margin-right: -3px;
+	}
+
+	/**
+	* @section Form Construction Kit | Screen Adjustments
+	*
+	*/
+
+	.ym-fbox-select select { width:60%; }
+	.ym-full .ym-fbox-select select { width:94.8%; }
+	.ym-columnar .ym-fbox-select select { width:68.8%; }
+}
+
+@media print {
+
+	/**
+	* @section print adjustments for core modules
+	*
+	* (en) float clearing for subtemplates. Uses display:table to avoid bugs in FF & IE
+	* (de) Float Clearing für die Subtemplates. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
+	*
+	* @bugfix
+	* @since     3.0
+	* @affected  FF2.0, FF3.0, IE7
+	* @css-for   all browsers
+	* @valid     yes
+	*/
+
+	.ym-grid > .ym-gl,
+	.ym-grid > .ym-gr {
+		overflow:visible;
+		display:table;
+	}
+
+	/* (en) make .ym-print class visible */
+	/* (de) .ym-print-Klasse sichtbar schalten */
+	.ym-print {
+		position:static;
+		left:0;
+	}
+
+	/* (en) generic class to hide elements for print */
+	/* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
+	.ym-noprint {
+		display:none !important;
+	}
+}

yaml/core/iehacks.css

@@ -0,0 +1,385 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) YAML core stylesheet - structure-independent bugfixes of IE/Win CSS-bugs
+ * (de) YAML Basis-Stylesheet - Strukturunabhängige Bugfixes von CSS-Bugs des IE/Win
+ *
+ * Don't make any changes in this file!
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ * @appdef yaml
+ */
+
+@media all {
+
+	/**
+	* (en) Debugging:When you see a green background, IE is getting this stylesheet
+	* (de) Fehlersuche:Hintergrund leuchtet grün, wenn das Stylesheet korrekt geladen wurde
+	*
+	* @debug
+	* @app-yaml-default disabled
+	*/
+
+	/* body { background:#0f0; background-image:none; }	 */
+
+	/**
+	* Correct inline positioning for unknown HTML5 elements in IE 6 & 7
+	*
+	* @workaround
+	* @affected  IE6, IE7
+	* @css-for   IE6, IE7
+	* @valid     no
+	*/
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) No need to force scrollbars in older IE's - it even makes problems in IE6 when set
+	* (de) Scrollbar-Fix wird in alten IE's nicht benötigt, zudem verursacht der Fix Probleme im IE6
+	*
+	* @workaround
+	* @affected  IE6, IE7
+	* @css-for   IE6, IE7
+	* @valid     no
+	*/
+
+	body { o\verflow:visible; }
+
+	/**
+	* (en) HTML5 - default media element styles
+	* (de) HTML5 - Standard Eigenschaften für Media-Elemente
+	*/
+
+	article,aside,details,figcaption,figure,
+	footer,header,hgroup,nav,section {
+		zoom:1;
+	}
+
+	audio,
+	canvas,
+	video {
+		*display: inline;
+		*zoom: 1;
+	}
+
+	/**
+	* (en) enable bicubic interpolation of images on scaling
+	* (de) aktiviert bikubische Interpolation beim Skalieren von Bildern
+	*/
+	img {
+		-ms-interpolation-mode: bicubic;
+		zoom: 1;
+	}
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Fixes IE5.x and IE6 overflow behavior of textarea and input elements elements
+	* (de) Korrigiert das fehlerhafte overflow-Verhalten von textarea und input-Elementen
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6
+	* @valid     no
+	*/
+
+	* html iframe,
+	* html frame { overflow:auto; }
+	* html input,
+	* html frameset { overflow:hidden; }
+	* html textarea { overflow:scroll; overflow-x:hidden; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Stability fixes with 'position:relative'
+	* (de) Stabilitätsverbesserungen durch 'position:relative'
+	*
+	* Essential for correct scaling in IE7 (body). IE5 must get static positioned body instead.
+	* Helpful to fix several possible problems in older IE versions (#main).
+	*
+	* @bugfix
+	* @affected	 IE 5.x/Win, IE6, IE7
+	* @css-for	 IE 5.x/Win, IE6, IE7
+	* @valid		 yes
+	*/
+
+	body, #main { position:relative; }
+	* html body { position:static; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Clearfix adjustents for containing floats in IE
+	* (de) Clearfix-Anpassung für diverse IE-Versionen
+	*
+	* @workaround
+	* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     yes
+	*/
+
+	.ym-clearfix { zoom:1; }	/* hasLayout aktivieren */
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Bugfix for partially displayed column separators
+	* (de) Bugfix für unvollständige Darstellung der Spalteninhalte / Spaltentrenner
+	*
+	* @bugfix
+	* @affected	 IE 5.x/Win, IE6
+	* @css-for	 IE 5.x/Win, IE6
+	* @valid		 yes
+	*/
+
+	* html .ym-col1,
+	* html .ym-col2,
+	* html .ym-col3 { position:relative; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Preventing several css bugs by forcing "hasLayout"
+	* (de) Vermeidung verschiedenster Bugs durch Erzwingen von "hasLayout"
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     no
+	*/
+
+	body { height:1%; }
+	.ym-wrapper, .ym-wbox, #header, #nav, #main, #footer { zoom:1; }	/* IE6 & IE7	*/
+	* html .ym-wrapper, * html .ym-wbox { height:1%; hei\ght:auto; }	/* IE 5.x & IE6 | IE6 only */
+	* html #header, * html #nav, * html #main, * html #footer { width:100%; wid\th:auto; }	/* IE 5.x & IE6 | IE6 only */
+
+	/* trigger hasLayout to force containing content */
+	.ym-gbox, .ym-gbox-left, .ym-gbox-right { height:1%; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* Disappearing List-Background Bug
+	* @see http://www.positioniseverything.net/explorer/ie-listbug.html
+	*
+	* @bugfix
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6
+	* @valid     yes
+	*/
+
+	* html ul, * html ol, * html dl { position:relative; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* List-Numbering Bug
+	*
+	* @bugfix
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     yes
+	*/
+
+	body ol li { display:list-item; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* Browser-based image scaling (not)
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6
+	* @valid     yes
+	*/
+
+	* html .flexible {
+		zoom: 1;
+	}
+
+	/**
+	* Form related bugfixes
+	*
+	* @bugfix
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     no
+	*/
+
+	button, input { *overflow: visible; }
+	table button, table input { *overflow: auto; }
+
+	fieldset, legend { position:relative; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* Global adjustments/fixes for YAML's form construction kit
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     no
+	*/
+
+	.ym-form,
+	.ym-form div,
+	.ym-form div * { zoom:1; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* (en) Workaround for 'collapsing margin at #col3' when using CSS-property clear
+	*		 Left margin of #col3 collapses when using clear:both in 1-3-2 (or 2-3-1) layout and right column is the
+	*		 longest and left column is the shortest one. For IE6 and IE7 a special workaround was developed
+	*		 in YAML.
+	*
+	* (de) Workaround für 'kollabierenden Margin an #col3' bei Verwendung der CSS-Eigenschaft clear
+	*		 Der linke Margin von #col3 kollabiert bei der Verwendung von clear:both im 1-3-2 (oder 2-3-1) Layout
+	*		 wenn gleichzeitig die linke Spalte die kürzeste und die rechte die längste ist. Im IE6 und IE7 lässt
+	*		 sich der Bug durch eine speziell für YAML entwickelten Workaround umgehen.
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6, IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     no
+	*/
+
+	html .ym-ie-clearing {
+		/* (en) Only a small help for debugging */
+		/* (de) Nur eine kleine Hilfe zur Fehlersuche */
+		position:static;
+
+		/* (en) Make container visible in IE */
+		/* (de) Container sichtbar machen im IE */
+		display:block;
+
+		/* (en) No fix possible in IE5.x, normal clearing used instead */
+		/* (de) Kein Fix im IE5.x möglich, daher normales Clearing */
+		\clear:both;
+
+		/* (en) forcing clearing-like behavior with a simple oversized container in IE6 & IE7*/
+		/* (de) IE-Clearing mit 100%-DIV für IE6 bzw. übergroßem Container im IE7 */
+		width:100%;
+		line-height: 0;
+		font-size:0px;
+		margin:-2px 0 -1em 1px;
+	}
+
+	* html .ym-ie-clearing { margin:-2px 0 -1em 0; }
+	.ym-cbox { margin-bottom:-2px; }
+
+	/* (en) avoid horizontal scrollbars in IE7 in borderless layouts because of negative margins */
+	/* (de) Vermeidung horizontaler Scrollbalken bei randabfallenden Layouts im IE7 */
+	html { margin-right:1px; }
+	* html { margin-right:0; }
+
+	/* (en) Bugfix:Essential for IE7 */
+	/* (de) Bugfix:Notwendig im IE7 */
+	.ym-col3 { position:relative; }
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* IE/Win Guillotine Bug
+	* @see http://www.positioniseverything.net/explorer/guillotine.html
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6
+	* @valid     yes
+	*/
+
+}
+
+@media screen, projection {
+
+	/**
+	* (en) IE-Adjustments for content columns and subtemplates
+	* (de) IE-Anpassung für Spaltencontainer und Subtemplates
+	*
+	* Doubled Float-Margin Bug
+	* @see http://positioniseverything.net/explorer/doubled-margin.html
+	*
+	* @bugfix
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     yes
+	*/
+	.ym-col1, .ym-col2 { display:inline; }
+
+	/* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */
+	.ym-grid { overflow:hidden; display:block; }
+	* html .ym-grid { overflow:visible; }
+
+	.ym-gl,
+	.ym-gr { display: inline; }
+
+	/* transform CSS tables back into floats */
+	.ym-equalize .ym-gl {
+		float:left; display:inline;
+		padding-bottom:32767px;
+		margin-bottom:-32767px;
+	}
+
+	.ym-equalize .ym-gr {
+		float:right; margin-left:-5px; display:inline;
+		padding-bottom:32767px;
+		margin-bottom:-32767px;
+	}
+
+	.no-ie-padding .ym-gl,
+	.no-ie-padding .ym-gr {
+		padding-bottom:0;
+		margin-bottom:0;
+	}
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/**
+	* Internet Explorer and the Expanding Box Problem
+	* @see http://www.positioniseverything.net/explorer/expandingboxbug.html
+	*
+	* @workaround
+	* @affected  IE 5.x/Win, IE6
+	* @css-for   IE 5.x/Win, IE6
+	* @valid     yes
+	*/
+
+	* html .ym-cbox-left,
+	* html .ym-cbox-right,
+	* html .ym-cbox { word-wrap:break-word; }
+
+	/* avoid growing widths */
+	* html .ym-gbox,
+	* html .ym-gbox-left,
+	* html .ym-gbox-right { word-wrap:break-word; o\verflow:hidden; }
+}
+
+@media print {
+
+	/**
+	* (en) Avoid unneeded page breaks of .ym-col3 content in print layout and containing floats.
+	* (de) Vermeiden von unnötigen Seitenumbrüchen beim Ausdruck der Spalte .ym-col3 und Einschluss von Floats.
+	*
+	* @bugfix
+	* @affected  IE7
+	* @css-for   IE 5.x/Win, IE6, IE7
+	* @valid     yes
+	*/
+
+	.ym-gbox,
+	.ym-gbox-left,
+	.ym-gbox-right,
+	.ym-col3 { height:1%; }
+}

yaml/core/js/yaml-focusfix.js

@@ -0,0 +1,72 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Workaround for IE8 und Webkit browsers to fix focus problems when using skiplinks
+ * (de) Workaround für IE8 und Webkit browser, um den Focus zu korrigieren, bei Verwendung von Skiplinks
+ *
+ * @note			inspired by Paul Ratcliffe's article
+ *					http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria
+ *                  Many thanks to Mathias Schäfer (http://molily.de/) for his code improvements
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         4.0+
+ * @revision        $Revision: 617 $
+ * @lastmodified    $Date: 2012-01-05 23:56:54 +0100 (Do, 05 Jan 2012) $
+ */
+
+(function () {
+	var YAML_focusFix = {
+		skipClass : 'ym-skip',
+
+		init : function () {
+			var userAgent = navigator.userAgent.toLowerCase();
+			var	is_webkit = userAgent.indexOf('webkit') > -1;
+			var	is_ie = userAgent.indexOf('msie') > -1;
+
+			if (is_webkit || is_ie) {
+				var body = document.body,
+					handler = YAML_focusFix.click;
+				if (body.addEventListener) {
+					body.addEventListener('click', handler, false);
+				} else if (body.attachEvent) {
+					body.attachEvent('onclick', handler);
+				}
+			}
+		},
+
+		trim : function (str) {
+			return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+		},
+
+		click : function (e) {
+			e = e || window.event;
+			var target = e.target || e.srcElement;
+			var a = target.className.split(' ');
+
+			for (var i=0; i < a.length; i++) {
+				var cls = YAML_focusFix.trim(a[i]);
+				if ( cls === YAML_focusFix.skipClass) {
+					YAML_focusFix.focus(target);
+					break;
+				}
+			}
+		},
+
+		focus : function (link) {
+			if (link.href) {
+				var href = link.href,
+					id = href.substr(href.indexOf('#') + 1),
+					target = document.getElementById(id);
+				if (target) {
+					target.setAttribute("tabindex", "-1");
+					target.focus();
+				}
+			}
+		}
+	};
+	YAML_focusFix.init();
+})();

yaml/forms/gray-theme.css

@@ -0,0 +1,423 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * YAML form theme: "gray-theme"
+ *
+ * @copyright			 Copyright 2005-2012, Dirk Jesse
+ * @license				 CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                       YAML-CDL (http://www.yaml.de/license.html)
+ * @link                 http://www.yaml.de
+ * @package				 yaml
+ * @version              v4.0.1
+ * @revision             $Revision: 729 $
+ * @lastmodified         $Date: 2012-03-03 13:20:39 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media screen and (min-width: 0px){
+
+	/**
+	* @section general width settings for formular elements in modern browsers
+	*          switching to CSS3 box modell "border-box" for perfect flexible forms
+	*
+	* Styling for: <labels>, <input>, <textarea> and <select>
+	*
+	*/
+
+	.ym-form input,
+	.ym-form input,
+	.ym-form textarea,
+	.ym-form select {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		-ms-box-sizing: border-box;
+		box-sizing: border-box;
+		width:60%;
+	}
+
+	.ym-columnar label {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		-ms-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.ym-columnar .ym-fbox-select select,
+	.ym-columnar .ym-fbox-text input,
+	.ym-columnar .ym-fbox-text textarea { width:70%; }
+
+	.ym-full .ym-fbox-select select,
+	.ym-full .ym-fbox-text input,
+	.ym-full .ym-fbox-text textarea { width:100%; }
+}
+
+@media screen, projection {
+
+	/**
+	* @section general form styling
+	*
+	* Styling for: <form>, <fieldset>, <legend>, <label> and rows (class="ym-fbox-[xxx]")
+	*
+	*/
+	.ym-form {
+		background:#f4f4f4;
+		border:2px #fff solid;
+		margin: 1.5em 0 0 0;
+		padding: 0;
+		-webkit-box-shadow: 0 0 4px #ddd;
+		-moz-box-shadow: 0 0 4px #ddd;
+		box-shadow: 0 0 4px #ddd;
+	}
+
+	.ym-form fieldset {
+		position:static;
+		background:transparent;
+		margin: 0.75em 0 0.75em 0;
+		padding: 0 0.5em;
+	}
+
+	.ym-form legend {
+		background:transparent;
+		color:#000;
+		font-size:1.2em;
+		line-height:1.25em;
+		font-weight:bold;
+		padding:0 0.5em;
+	}
+
+	.ym-form label {
+		color:#666;
+		line-height: 1.5em;
+	}
+
+	.ym-label {
+		color: #666;
+		padding-top: 0.25em;
+	}
+
+	.ym-form .ym-form div.ym-fbox-check:focus + label {
+		color:#000;
+	}
+
+	/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
+	.ym-form div.ym-fbox-text,
+	.ym-form div.ym-fbox-select,
+	.ym-form div.ym-fbox-check,
+	.ym-form div.ym-fbox-button {
+		padding: 0.3em 1em;
+		margin-bottom: 0.5em;
+	}
+
+	.ym-form div.ym-fbox-button {
+		background: #ececec;
+		border-top: 1px #e0e0e0 solid;
+		padding:0 1em 1.5em 1em;
+		margin: 0;
+	}
+
+	.ym-form .ym-gbox {
+		padding: 0 0.5em;
+		margin-right: 0;
+	}
+
+	.ym-form h6 {
+		color: #000;
+		margin: 1em 0 0 1em;
+	}
+
+	/**
+	* @section styling form elements
+	*
+	* Styling for: Input, Textarea, Select ...
+	*
+	*/
+
+	/* styling standard form elements with 'almost' equal flexible width */
+	/* Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
+	.ym-form .ym-fbox-text input,
+	.ym-form .ym-fbox-text textarea {
+		line-height: 1em;
+		padding: 0.25em 0.3em;
+		margin-top: -2px;
+	}
+
+	.ym-form .ym-fbox-select select {
+		line-height: 1em;
+		padding: 0.25em 2px 0.25em 1px;
+		margin-top: -2px;
+	}
+
+	/* proportional fonts for all form elements */
+	.ym-form input,
+	.ym-form textarea,
+	.ym-form select,
+	.ym-form optgroup {
+		font-family:Arial, Helvetica, sans-serif;
+		-webkit-box-shadow: inset 0 0 4px #eee;
+		-moz-box-shadow: inset 0 0 4px #eee;
+		box-shadow: inset 0 0 4px #eee;
+	}
+
+	.ym-form optgroup {
+		font-style:normal;
+		font-weight:bold;
+	}
+
+	.ym-form .ym-fbox-text input,
+	.ym-form .ym-fbox-text textarea,
+	.ym-form .ym-fbox-select select {
+		border:1px solid #ddd;
+	}
+
+	/* General form styling	| Allgemeine Formatierung des Formulars */
+	.ym-form .ym-message {
+		color:#666;
+		margin-bottom:0.5em;
+	}
+
+	/* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
+	.ym-form .ym-required {
+		color:#800;
+		font-weight:bold;
+	}
+
+	/* form validation highlight colors */
+	.ym-form input:valid,
+	.ym-form textarea:valid { background-color: #fff; }
+	.ym-form input:invalid,
+	.ym-form textarea:invalid { background-color: #fdd; }
+
+	/**
+	* @section error messages
+	*
+	*/
+
+	.ym-form .ym-error label {
+		color:#800;
+		font-weight:normal;
+	}
+
+	.ym-form .ym-error input,
+	.ym-form .ym-error select,
+	.ym-form .ym-error textarea {
+		border: 1px #800 solid;
+	}
+
+	.ym-form .ym-error input:hover,
+	.ym-form .ym-error input:focus,
+	.ym-form .ym-error select:hover,
+	.ym-form .ym-error select:focus,
+	.ym-form .ym-error textarea:hover,
+	.ym-form .ym-error textarea:focus {
+		border: 1px #800 solid !important;
+	}
+
+	.ym-form .ym-error .ym-message {
+		color:#800;
+		font-weight: bold;
+		margin-top: 0;
+	}
+
+	/* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
+	.ym-form div.ym-fbox-text input:focus,
+	.ym-form div select:focus,
+	.ym-form div textarea:focus,
+	.ym-form div.ym-fbox-text input:hover,
+	.ym-form div select:hover,
+	.ym-form div textarea:hover,
+	.ym-form div.ym-fbox-text input:active,
+	.ym-form div select:active,
+	.ym-form div textarea:active {
+		border:1px #888 solid;
+		background:#fff;
+	}
+
+	/**
+	* @section Buttons
+	*
+	* inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
+	*/
+
+	.ym-button,
+	.ym-form button,
+	.ym-form input[type="button"],
+	.ym-form input[type="reset"],
+	.ym-form input[type="submit"] {
+		display: inline-block;
+		white-space: nowrap;
+		background-color: #ccc;
+		background-image: -webkit-linear-gradient(top, #eee, #ccc);
+		background-image: -moz-linear-gradient(top, #eee, #ccc);
+		background-image: -ms-linear-gradient(top, #eee, #ccc);
+		background-image: -o-linear-gradient(top, #eee, #ccc);
+		background-image: linear-gradient(top, #eee, #ccc);
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
+		border: 1px solid #777;
+		-webkit-border-radius: .2em;
+		-moz-border-radius: .2em;
+		border-radius: .2em;
+		-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
+		-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
+		box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
+		color: #333 !important;
+		cursor: pointer;
+		font: normal 1em/2em Arial, Helvetica;
+		margin: 1.5em 0.75em 0 0;
+		padding: 0 1.5em;
+		overflow: visible; /* removes extra side spacing in IE */
+		text-decoration: none !important;
+		text-shadow: 0 1px 0 rgba(255,255,255,.8);
+	}
+
+	.ym-form button:hover,
+	.ym-form input[type="button"]:hover,
+	.ym-form input[type="reset"]:hover,
+	.ym-form input[type="submit"]:hover,
+	.ym-button:hover {
+		background-color: #ddd;
+		background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
+		background-image: -moz-linear-gradient(top, #fafafa, #ddd);
+		background-image: -ms-linear-gradient(top, #fafafa, #ddd);
+		background-image: -o-linear-gradient(top, #fafafa, #ddd);
+		background-image: linear-gradient(top, #fafafa, #ddd);
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
+	}
+
+	.ym-form button:active,
+	.ym-form input[type="button"]:active,
+	.ym-form input[type="reset"]:active,
+	.ym-form input[type="submit"]:active,
+	.ym-button:active {
+		background-color: #bbb;
+		background-image: -webkit-linear-gradient(top, #ccc, #bbb);
+		background-image: -moz-linear-gradient(top, #ccc, #bbb);
+		background-image: -ms-linear-gradient(top, #ccc, #bbb);
+		background-image: -o-linear-gradient(top, #ccc, #bbb);
+		background-image: linear-gradient(top, #ccc, #bbb);
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
+		box-shadow: 2px 2px 3px rgba(0,0,0,.2) inset;
+		position: relative;
+		top: 1px;
+	}
+
+	.ym-form button:focus,
+	.ym-form input[type="button"]:focus,
+	.ym-form input[type="reset"]:focus,
+	.ym-form input[type="submit"]:focus,
+	.ym-button:focus {
+		outline: 0;
+		background: #fafafa;
+	}
+
+	/* pseudo elements don't work on input */
+	.ym-form button:before,
+	.ym-button:before {
+		background: #ccc;
+		background: rgba(0,0,0,.1);
+		float: left;
+		width: 1em;
+		text-align: center;
+		font-size: 1.5em;
+		margin: 0 1em 0 -1em;
+		padding: 0 .2em;
+		-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+		-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+		box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
+		-moz-border-radius: .15em 0 0 .15em;
+		-webkit-border-radius: .15em 0 0 .15em;
+		border-radius: .15em 0 0 .15em;
+		pointer-events: none;
+	}
+
+	.ym-add:before { content: "\271A"; }
+	.ym-delete:before { content: "\2718"; }
+	.ym-edit:before { content: "\270E"; }
+	.ym-email:before { content: "\2709"; }
+	.ym-like:before { content: "\2764"; }
+	.ym-next:before { content: "\279C"; }
+	.ym-play:before { content: "\25B6"; }
+	.ym-save:before { content: "\2714"; }
+	.ym-spark:before { content: "\2737"; }
+	.ym-star:before { content: "\2605"; }
+
+	/* removes extra inner spacing in Firefox */
+	.ym-form button::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+
+	/* If line-height can't be modified, then fix Firefox spacing with padding */
+	.ym-form input[type=button]::-moz-focus-inner,
+	.ym-form input[type=reset]::-moz-focus-inner,
+	.ym-form input[type=submit]::-moz-focus-inner {
+		padding: .4em;
+	}
+
+	/* The disabled styles */
+	.ym-form button[disabled],
+	.ym-form button[disabled]:hover,
+	.ym-form input[type=button][disabled],
+	.ym-form input[type=button][disabled]:hover,
+	.ym-form input[type=reset][disabled],
+	.ym-form input[type=reset][disabled]:hover,
+	.ym-form input[type=submit][disabled],
+	.ym-form input[type=submit][disabled]:hover,
+	.ym-button.ym-disabled,
+	.ym-button.ym-disabled:hover {
+		background: #eee;
+		color: #aaa !important;
+		border-color: #aaa;
+		cursor: default;
+		text-shadow: none;
+		position: static;
+		-webkit-box-shadow: none;
+		-moz-box-shadow: none;
+		box-shadow: none;
+	}
+
+	/* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
+	* html .ym-button,
+	* html .ym-form button {
+		display: inline-block;
+		white-space: nowrap;
+		background-color: #ccc;
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
+		border: 1px solid #777;
+		color: #333 !important;
+		cursor: pointer;
+		font: normal 1em/2em Arial, Helvetica;
+		margin: 1.5em 0.75em 0 0;
+		padding: 0 1.5em;
+		overflow: visible; /* removes extra side spacing in IE */
+		text-decoration: none !important;
+	}
+
+	* html .ym-form button:focus,
+	* html .ym-button:focus {
+		outline: 0;
+		background: #fafafa;
+	}
+
+	* html .ym-form button:hover,
+	* html .ym-button:hover {
+		background-color: #ddd;
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
+	}
+
+	* html .ym-form button:active,
+	* html .ym-button:active {
+		background-color: #bbb;
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
+		position: relative;
+		top: 1px;
+	}
+
+	* html .ym-button.ym-disabled,
+	* html .ym-button.ym-disabled:hover {
+		background: #eee;
+		color: #aaa !important;
+		border-color: #aaa;
+		cursor: default;
+		text-shadow: none;
+		position: static;
+	}
+}

yaml/navigation/hlist.css

@@ -0,0 +1,134 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Horizontal list navigation "hlist"
+ * (de) Horizontale Navigationsliste "hlist"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all {
+
+	.ym-hlist {
+		/* (en) containing floats in IE */
+		/* (de) Einfassen der Floats im IE */
+		width:100%;
+		overflow:hidden;
+		/* (en|de) Bugfix:IE - collapsing horizontal margins */
+		position:relative;
+		line-height:1em;
+		background: #222;
+	}
+
+	.ym-hlist ul {
+		margin:0;
+		padding: 0.5em 1.5em;
+		/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
+		display:inline;
+		float:left; /* LTR */
+	}
+
+	.ym-hlist ul li {
+		/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
+		display:inline;
+		float:left; /* LTR */
+		font-size:1.0em;
+		line-height:1em;
+		list-style-type:none;
+		margin: 0 .25em 0 0;
+		padding:0;
+	}
+
+	.ym-hlist ul li a,
+	.ym-hlist ul li strong {
+		background:transparent;
+		color:#aaa;
+		display:block;
+		font-size:1em;
+		line-height: 2em;
+		padding: 0 0.5em;
+		font-weight:normal;
+		text-decoration:none;
+		text-shadow: 0 1px 1px rgba(0,0,0,.5);
+		width:auto;
+	}
+
+	.ym-hlist ul li a:focus,
+	.ym-hlist ul li a:hover,
+	.ym-hlist ul li a:active  {
+		color: #ccc;
+		background:#666;
+		background: rgba(255,255,255,.25);
+		-webkit-border-radius: 0.2em;
+		-moz-border-radius: 0.2em;
+		border-radius: 0.2em;
+		text-decoration:none;
+		outline: 0 none;
+	}
+
+	.ym-hlist ul li.active {
+		background:#666;
+		background: rgba(255,255,255,.3);
+		-webkit-border-radius: 0.2em;
+		-moz-border-radius: 0.2em;
+		border-radius: 0.2em;
+		color: #fff;
+	}
+
+	.ym-hlist ul li.active strong,
+	.ym-hlist ul li.active a:focus,
+	.ym-hlist ul li.active a:hover,
+	.ym-hlist ul li.active a:active {
+		background:transparent;
+		color:#fff;
+		text-decoration:none;
+	}
+
+
+	/* search form -------------------------------------- */
+	.ym-searchform {
+		float:right;
+		display: inline;
+		line-height: 2em;
+		padding: 0.5em 1.5em;
+	}
+
+	.ym-searchform .ym-searchfield {
+		background: #fff;
+		line-height: 1em;
+		padding: 0.25em;
+		width: 12em;
+		border: solid 1px #888;
+		border: solid 1px rgba(255,255,255,.1);
+		outline: none;
+
+		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
+		-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
+		box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
+	}
+
+	.ym-searchform .ym-searchbutton {
+		color: #fff;
+		cursor: pointer;
+		display: inline-block;
+		font-size: 1em;
+		line-height: 1.3571em;
+		padding: 0.25em;
+		border: solid 1px transparent;
+		text-shadow: 0 1px 1px rgba(0,0,0,.5);
+
+		-webkit-border-radius: .2em;
+		-moz-border-radius: .2em;
+		border-radius: .2em;
+
+		background: #5f5f5f;
+		background: rgba(255,255,255,.2);
+	}
+}

yaml/navigation/vlist.css

@@ -0,0 +1,136 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Vertical list navigation "vlist"
+ * (de) Vertikale Navigationsliste "vlist"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media all {
+
+	.ym-vlist {
+		margin:0 0 1.5em 0;
+		list-style-type:none;
+		background: transparent;
+		border: 0 none;
+	}
+
+	/* title */
+	.ym-vtitle {
+		font-family:Arial, Helvetica, sans-serif;
+		font-weight:bold;
+		font-size:100%;
+		width:90%;
+		padding:3px 0px 3px 10%; /* LTR */
+		margin:0;
+		color:#444;
+		background-color:#fff;
+		border-top:2px #ddd solid;
+	}
+
+	.ym-vlist ul {
+		list-style-type:none;
+		margin:0;
+		padding:0;
+		width:100%;
+		overflow:hidden;
+		border-top:2px #ddd solid;
+		border-bottom:2px #ddd solid;
+	}
+
+	.ym-vtitle + ul {
+		border-top:4px #888 solid;
+	}
+
+	.ym-vlist ul ul {
+		border: 0 none;
+	}
+
+	.ym-vlist li {
+		float:left; /* LTR */
+		width:100%;
+		margin:0;
+		padding:0;
+		background-color:#fff;
+	}
+
+	.ym-vlist a,
+	.ym-vlist strong,
+	.ym-vlist span {
+		display:block;
+		padding:3px 0px 3px 10%;
+		text-decoration:none;
+		border-bottom:1px #ddd solid;
+	}
+
+	.ym-vlist a,
+	.ym-vlist a:visited {
+		color:#444;
+	}
+
+	.ym-vlist li span {
+		display:block;
+		font-weight:bold;
+		border-bottom:1px #ddd solid;
+	}
+
+	/* active list element */
+	.ym-vlist li.active {
+		color:#fff;
+		background-color:#444;
+	}
+
+	.ym-vlist li.active strong {
+		font-weight:bold;
+	}
+
+	/* Level 1 */
+	.ym-vlist li a,
+	.ym-vlist li strong,
+	.ym-vlist li span { width:90%; padding-left:10%; } /* LTR */
+
+	.ym-vlist li a:focus,
+	.ym-vlist li a:hover,
+	.ym-vlist li a:active { background-color:#888; color:#fff; outline: 0 none; }
+
+	/* Level 2 */
+	.ym-vlist li ul li a,
+	.ym-vlist li ul li strong,
+	.ym-vlist li ul li span { width:80%; padding-left:20%; } /* LTR */
+
+	.ym-vlist li ul li a,
+	.ym-vlist li ul li a:visited { background-color:#f8f8f8; color:#333; }
+	.ym-vlist li ul li a:focus,
+	.ym-vlist li ul li a:hover,
+	.ym-vlist li ul li a:active { background-color:#888; color:#fff; }
+
+	/* Level 3 */
+	.ym-vlist li ul li ul li a,
+	.ym-vlist li ul li ul li strong,
+	.ym-vlist li ul li ul li span { width:70%; padding-left:30%; } /* LTR */
+
+	.ym-vlist li ul li ul li a,
+	.ym-vlist li ul li ul li a:visited{ background-color:#f0f0f0; color:#222; }
+	.ym-vlist li ul li ul li a:focus,
+	.ym-vlist li ul li ul li a:hover,
+	.ym-vlist li ul li ul li a:active { background-color:#888; color:#fff; }
+
+	/* Level 4 */
+	.ym-vlist li ul li ul li ul li a,
+	.ym-vlist li ul li ul li ul li strong,
+	.ym-vlist li ul li ul li ul li span { width:60%; padding-left:40%; } /* LTR */
+
+	.ym-vlist li ul li ul li ul li a,
+	.ym-vlist li ul li ul li ul li a:visited { background-color:#e8e8e8; color:#111; }
+	.ym-vlist li ul li ul li ul li a:focus,
+	.ym-vlist li ul li ul li ul li a:hover,
+	.ym-vlist li ul li ul li ul li a:active { background-color:#888; color:#fff; }
+}

yaml/print/print.css

@@ -0,0 +1,69 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * default print stylesheet
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+
+@media print {
+
+	/**
+	* @section basic layout preparation
+	*/
+
+	/* (en) change font size unit to [pt] - avoids problems with [px] in Gecko based browsers  	*/
+	/* (de) Wechsel der der Schriftgrößen-Maßheinheit zu [pt] - Probleme mit [px] in Gecko-Browsern vermeiden */
+	body {
+		font-size: 10pt;
+		padding: 0 5px;
+	}
+
+	/* (en) Hide unneeded container of the screenlayout in print layout */
+	/* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
+	nav,
+	.ym-searchform {
+		display:none;
+	}
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/* (en) Avoid page breaks right after headings */
+	/* (de) Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
+	h1,h2,h3,h4,h5,h6 {
+		page-break-after:avoid;
+	}
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/* (en) optional output of acronyms and abbreviations*/
+	/* (de) optionale Ausgabe von Auszeichnung von Abkürzungen */
+
+	/*
+	abbr[title]:after,
+	acronym[title]:after {
+		content:'(' attr(title) ')';
+	}
+	*/
+
+	/*------------------------------------------------------------------------------------------------------*/
+
+	/* (en) optional URL output of hyperlinks in print layout */
+	/* (de) optionale Ausgabe der URLs von Hyperlinks */
+	/*
+	a[href]:after {
+		content:" <URL:"attr(href)">";
+		color:#444;
+		background:inherit;
+		font-style:italic;
+	}
+	*/
+}

yaml/screen/grid-960-12.css

@@ -0,0 +1,93 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * draft 960.gs port - 12 columns
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media screen {
+
+	/* Layout Module Configuration */
+    .ym-wrapper {
+		width: 960px;
+		margin: 0 auto;
+    }
+
+	/* 960.gs port for YAML 4 */
+	.ym-g960-1 { width: 80px; }
+	.ym-g960-2 { width: 160px; }
+	.ym-g960-3 { width: 240px; }
+	.ym-g960-4 { width: 320px; }
+	.ym-g960-5 { width: 400px; }
+	.ym-g960-6 { width: 480px; }
+	.ym-g960-7 { width: 560px; }
+	.ym-g960-8 { width: 640px; }
+	.ym-g960-9 { width: 720px; }
+	.ym-g960-10 { width: 800px; }
+	.ym-g960-11 { width: 880px; }
+	.ym-g960-12 { width: 960px; }
+
+	.ym-push-1,
+	.ym-push-2,
+	.ym-push-3,
+	.ym-push-4,
+	.ym-push-5,
+	.ym-push-6,
+	.ym-push-7,
+	.ym-push-8,
+	.ym-push-9,
+	.ym-push-10,
+	.ym-push-11,
+	.ym-pull-1,
+	.ym-pull-2,
+	.ym-pull-3,
+	.ym-pull-4,
+	.ym-pull-5,
+	.ym-pull-6,
+	.ym-pull-7,
+	.ym-pull-8,
+	.ym-pull-9,
+	.ym-pull-10,
+	.ym-pull-11 {
+		position: relative;
+	}
+
+	.ym-push-1 { left: 80px; }
+	.ym-push-2 { left: 160px; }
+	.ym-push-3 { left: 240px; }
+	.ym-push-4 { left: 320px; }
+	.ym-push-5 { left: 400px; }
+	.ym-push-6 { left: 480px; }
+	.ym-push-7 { left: 560px; }
+	.ym-push-8 { left: 640px; }
+	.ym-push-9 { left: 720px; }
+	.ym-push-10 { left: 800px; }
+	.ym-push-11 { left: 880px; }
+
+	.ym-pull-1 { left: -80px; }
+	.ym-pull-2 { left: -160px; }
+	.ym-pull-3 { left: -240px; }
+	.ym-pull-4 { left: -320px; }
+	.ym-pull-5 { left: -400px; }
+	.ym-pull-6 { left: -480px; }
+	.ym-pull-7 { left: -560px; }
+	.ym-pull-8 { left: -640px; }
+	.ym-pull-9 { left: -720px; }
+	.ym-pull-10 { left: -800px; }
+	.ym-pull-11 { left: -880px; }
+
+	.ym-gbox {
+		padding-left: 0;
+		padding-right: 0;
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+}

yaml/screen/grid-960-16.css

@@ -0,0 +1,113 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * draft 960.gs port - 16 columns
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ */
+
+@media screen {
+
+	/* Layout Module Configuration */
+    .ym-wrapper {
+		width: 960px;
+		margin: 0 auto;
+    }
+
+	/* 960.gs port for YAML 4 */
+	.ym-g960-1 { width: 60px; }
+	.ym-g960-2 { width: 120px; }
+	.ym-g960-3 { width: 180px; }
+	.ym-g960-4 { width: 240px; }
+	.ym-g960-5 { width: 300px; }
+	.ym-g960-6 { width: 360px; }
+	.ym-g960-7 { width: 420px; }
+	.ym-g960-8 { width: 480px; }
+	.ym-g960-9 { width: 540px; }
+	.ym-g960-10 { width: 600px; }
+	.ym-g960-11 { width: 660px; }
+	.ym-g960-12 { width: 720px; }
+	.ym-g960-13 { width: 780px; }
+	.ym-g960-14 { width: 840px; }
+	.ym-g960-15 { width: 900px; }
+	.ym-g960-16 { width: 960px; }
+
+	.ym-push-1,
+	.ym-push-2,
+	.ym-push-3,
+	.ym-push-4,
+	.ym-push-5,
+	.ym-push-6,
+	.ym-push-7,
+	.ym-push-8,
+	.ym-push-9,
+	.ym-push-10,
+	.ym-push-11,
+	.ym-push-12,
+	.ym-push-13,
+	.ym-push-14,
+	.ym-push-15,
+	.ym-pull-1,
+	.ym-pull-2,
+	.ym-pull-3,
+	.ym-pull-4,
+	.ym-pull-5,
+	.ym-pull-6,
+	.ym-pull-7,
+	.ym-pull-8,
+	.ym-pull-9,
+	.ym-pull-10,
+	.ym-pull-11,
+	.ym-pull-12,
+	.ym-pull-13,
+	.ym-pull-14,
+	.ym-pull-15 {
+		position: relative;
+	}
+
+	.ym-push-1 { left: 60px; }
+	.ym-push-2 { left: 120px; }
+	.ym-push-3 { left: 180px; }
+	.ym-push-4 { left: 240px; }
+	.ym-push-5 { left: 300px; }
+	.ym-push-6 { left: 360px; }
+	.ym-push-7 { left: 420px; }
+	.ym-push-8 { left: 480px; }
+	.ym-push-9 { left: 540px; }
+	.ym-push-10 { left: 600px; }
+	.ym-push-11 { left: 660px; }
+	.ym-push-12 { left: 720px; }
+	.ym-push-13 { left: 780px; }
+	.ym-push-14 { left: 840px; }
+	.ym-push-15 { left: 900px; }
+
+	.ym-pull-1 { left: -60px; }
+	.ym-pull-2 { left: -120px; }
+	.ym-pull-3 { left: -180px; }
+	.ym-pull-4 { left: -240px; }
+	.ym-pull-5 { left: -300px; }
+	.ym-pull-6 { left: -360px; }
+	.ym-pull-7 { left: -420px; }
+	.ym-pull-8 { left: -480px; }
+	.ym-pull-9 { left: -540px; }
+	.ym-pull-10 { left: -600px; }
+	.ym-pull-11 { left: -660px; }
+	.ym-pull-12 { left: -720px; }
+	.ym-pull-13 { left: -780px; }
+	.ym-pull-14 { left: -840px; }
+	.ym-pull-15 { left: -900px; }
+
+	.ym-gbox {
+		padding-left: 0;
+		padding-right: 0;
+		margin-left: 10px;
+		margin-right: 10px;
+	}
+}

yaml/screen/screen-FULLPAGE-layout.css

@@ -0,0 +1,198 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * default screen stylesheet - FULLPAGE-layout type layout
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 733 $
+ * @lastmodified    $Date: 2012-03-04 19:15:48 +0100 (So, 04 Mrz 2012) $
+ */
+
+@media screen {
+
+	/* force vertical scrollbar */
+	body {
+		overflow-y: scroll;
+	}
+
+	/* Layout Module Configuration */
+	.ym-wrapper {
+		max-width: 80em;
+		margin: 0 auto;
+	}
+
+	.ym-wbox {
+		padding: 1.5em;
+	}
+
+	/* fallback for missing media queries support*/
+	body > header,
+	body > nav,
+	body > #main,
+	body > footer {
+		min-width: 760px;
+	}
+
+	/* Basic Element Styling */
+	header {
+		background: #444;
+		color: #ccc;
+	}
+
+	header h1 {
+		background: transparent;
+		color: #fff;
+	}
+
+	nav {
+		background: #222222;
+	}
+
+	#main .info {
+		margin-bottom: 1.5em;
+	}
+
+	footer {
+		background: #eee;
+		color: #444;
+	}
+
+	footer p {
+		margin: 0;
+	}
+
+	header .ym-wbox,
+	footer .ym-wbox {
+		padding: 1.5em;
+	}
+
+	.ym-gbox { padding: 0 1.5em; }
+	.ym-gbox-left { padding: 0 1.5em 0 0; }
+	.ym-gbox-right { padding: 0 0 0 1.5em; }
+
+	section.box { padding: 0 1.5em 1.5em 1.5em; }
+
+	#main aside .ym-gbox-right {
+		border-left: 1px #ddd solid;
+	}
+
+	/* skip links styling */
+	.ym-skiplinks a.ym-skip:focus,
+	.ym-skiplinks a.ym-skip:active {
+		color:#fff;
+		background:#333;
+		border-bottom:1px #000 solid;
+		padding:10px 0;
+		text-align: center;
+		text-decoration:none;
+	}
+}
+
+/* reset fallback values in modern browsers */
+@media screen and ( min-width: 0px ) {
+
+	body > header,
+	body > nav,
+	body > #main,
+	body > footer {
+		min-width: 0;
+	}
+}
+
+@media screen and ( max-width: 760px ) {
+
+	.secondary {
+		border-top: 1px #888 solid;
+		margin-top: 1.5em !important;
+	}
+
+	#main aside .ym-gbox-right {
+		border: 0 none;
+	}
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
+	.linearize-level-1,
+	.linearize-level-1 > [class*="ym-g"],
+	.linearize-level-1 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	.ym-searchform {
+		display:block;
+		float: none;
+		width: auto;
+		text-align: right;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 14%;
+	}
+}
+
+@media screen and ( max-width: 480px) {
+
+	header .ym-wbox {
+		padding: 0.75em 10px;
+	}
+
+	footer .ym-wbox,
+	.ym-wbox,
+	.ym-searchform,
+	nav .ym-hlist ul {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	header h1 {
+		font-size: 1.5em;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
+	.linearize-level-2,
+	.linearize-level-2 > [class*="ym-g"],
+	.linearize-level-2 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	.ym-searchform,
+	nav .ym-hlist ul,
+	nav .ym-hlist li {
+		display:block;
+		float: none;
+		width: auto;
+		text-align: left;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 75%;
+	}
+}

yaml/screen/screen-PAGE-layout.css

@@ -0,0 +1,198 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * default screen stylesheet - PAGE-layout type layout
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 733 $
+ * @lastmodified    $Date: 2012-03-04 19:15:48 +0100 (So, 04 Mrz 2012) $
+ */
+
+@media screen {
+
+	/* force vertical scrollbar */
+	body {
+		overflow-y: scroll;
+	}
+
+	/* Layout Module Configuration & fallback for unsupported media queries */
+	.ym-wrapper {
+		min-width: 760px;
+		max-width: 80em;
+		margin: 0 auto;
+	}
+
+	.ym-wbox { padding: 10px; }
+
+	/* Basic Element Styling */
+	header {
+		background: #444;
+		color: #ccc;
+		padding: 1.5em;
+	}
+
+	header h1 {
+		background: transparent;
+		color: #fff;
+	}
+
+	nav {
+		background: #222222;
+	}
+
+	#main {
+	}
+
+	footer {
+		margin: 1.5em 0 0 0;
+		background: #eee;
+		color: #444;
+		padding: 1.5em;
+	}
+
+	footer p {
+		margin: 0;
+	}
+
+	/* Column-Set Configuration: 1-3 (sidebar right) */
+	.ym-column {
+		display:block;
+		overflow:hidden;
+		padding-right: 340px;
+		width:auto;
+	}
+
+	.ym-col1 { /* content */
+		float:left;
+		width: 100%;
+	}
+
+	.ym-col3 { /* sidebar */
+		position:relative;
+		float:left;
+		width: 340px;
+		margin-left:0;
+		margin-right:-340px;
+	}
+
+	.ym-col1 .ym-cbox { padding: 0 0.75em 0 1.5em; }
+	.ym-col3 .ym-cbox { padding: 0 20px 0 12px; }
+
+	.ym-gbox { padding: 0 1.5em 0 0; }
+
+	/* skip links styling */
+	.ym-skiplinks a.ym-skip:focus,
+	.ym-skiplinks a.ym-skip:active {
+		color:#fff;
+		background:#333;
+		border-bottom:1px #000 solid;
+		padding:10px 0;
+		text-align: center;
+		text-decoration:none;
+	}
+}
+
+/* reset fallback values in modern browsers */
+@media screen and ( min-width: 0px ) {
+	.ym-wrapper {
+		min-width: 0px;
+	}
+}
+
+@media screen and ( max-width: 740px ) {
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
+	.linearize-level-1,
+	.linearize-level-1 > [class*="ym-g"],
+	.linearize-level-1 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	nav .ym-hlist ul {
+		padding-right: 10px;
+	}
+
+	.ym-searchform {
+		display:block;
+		float: none;
+		width: auto;
+		padding-right: 10px;
+		text-align: right;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 14%;
+	}
+}
+
+@media screen and ( max-width: 480px) {
+
+	.ym-wbox {
+		padding: 0;
+	}
+
+	header {
+		padding: 0.75em 10px;
+	}
+
+	header h1 {
+		font-size: 1.5em;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	footer,
+	#main,
+	.ym-searchform,
+	nav .ym-hlist ul {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
+	.linearize-level-2,
+	.linearize-level-2 > [class*="ym-g"],
+	.linearize-level-2 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	.ym-searchform,
+	nav .ym-hlist ul,
+	nav .ym-hlist li {
+		display:block;
+		float: none;
+		width: auto;
+		text-align: left;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 75%;
+	}
+}

yaml/screen/typography.css

@@ -0,0 +1,469 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * (en) Uniform design of standard content elements
+ * (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ * @package         yaml
+ * @version         v4.0.1
+ * @revision        $Revision: 724 $
+ * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
+ * @appdef yaml
+ */
+
+@media all {
+
+	/**
+	* @section global typography settings
+	*
+	* vertical rhythm settings (based on em-unit)
+	* -------------------------------------------
+	* basefont-size: 14px (87.5%)
+	* line-height  : 21px (factor: 1.5)
+	*/
+
+	/* (en) reset font size for all elements to standard (16 Pixel) */
+	/* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
+	html * { font-size:100%; }
+
+	/**
+	* (en) reset monospaced elements to font size 16px in all browsers
+	* (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
+	*
+	* @see: http://webkit.org/blog/67/strange-medium/
+	*/
+
+	textarea,
+	pre,
+	code,
+	kbd,
+	samp,
+	var,
+	tt {
+		font-family:Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
+	}
+
+	/* (en) base layout gets standard font size 14px */
+	/* (de) Basis-Layout erhält Standardschriftgröße von 14 Pixeln */
+	body {
+		font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
+		font-size:87.50%; /* base: 14px */
+		color:#444;
+
+		/* (en) Prevent auto-scaling of text in mobile webkit browsers */
+		/* (de) Automatische Schriftvergrößerung in mobilen Webkit-Browsern vermeiden */
+		-webkit-text-size-adjust:100%;
+	}
+
+	/*--- Headings | Überschriften ------------------------------------------------------------------------*/
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: "Droid Sans", Arial, Helvetica, sans-serif;
+		font-weight: 400;
+		color:#161e21;
+		margin:0;
+	}
+
+	h1 {
+		font-size:350%;
+		line-height: 0.8571em;
+		margin: 0.4286em 0 0;
+	}
+
+	h2 {
+		font-size:250%;
+		line-height: 1.2em;
+		margin: 0.6em 0 0 0;
+	}
+
+	h3 {
+		font-size:175%;
+		line-height: 0.8571em;
+		margin:0.8571em 0 0 0;
+	}
+
+	h4 {
+		font-size:133.33%;
+		line-height: 1.125em;
+		margin:1.125em 0 0 0;
+	}
+
+	h5 {
+		font-size:116.67%;
+		line-height: 1.2857em;
+		margin: 1.2857em 0 0 0;
+	}
+
+	h6 {
+		font-weight: bold;
+		font-size:100%;
+		line-height: 1.5em;
+		margin: 1.5em 0 0 0;
+	}
+
+	/* --- Lists | Listen  -------------------------------------------------------------------------------- */
+
+	ul,
+	ol,
+	dl {
+		font-size:1em;
+		line-height:1.5em;
+		margin: 1.5em 0 0 1em;
+	}
+
+	ul {
+		list-style-type:disc;
+	}
+
+	ol {
+		list-style-type:decimal;
+	}
+
+	ul ul {
+		list-style-type:circle;
+		margin-top:0;
+	}
+
+	ol ol {
+		list-style-type:lower-latin;
+		margin-top:0;
+	}
+
+	ol ul {
+		list-style-type:circle;
+		margin-top:0;
+	}
+
+	li {
+		font-size:1em;
+		line-height:1.5em;
+		margin-left:0.8em;
+	}
+
+	dt { font-weight:bold; }
+
+	dd { margin:0 0 1.5em 0.8em; }
+
+	/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
+
+	p {
+		font-size:1em;
+		line-height:1.5em;
+		margin: 1.5em 0 0 0;
+	}
+
+	blockquote, cite, q {
+		font-family: Georgia, "Times New Roman", Times, serif;
+		font-style:italic;
+	}
+
+	blockquote {
+		margin:1.5em 0 0 1.5em;
+		color:#666;
+	}
+
+	strong, b { font-weight:bold; }
+
+	em, i { font-style:italic; }
+
+	big {
+		font-size:116.667%;
+	}
+
+	small {
+		font-size:85.71%;
+	}
+
+	pre,
+	code,
+	kbd,
+	tt,
+	samp,
+	var {
+		font-size:100%;
+	}
+
+	pre {
+		line-height:1.5em;
+		margin: 1.5em 0 0 0;
+		white-space: pre;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+	pre, code { color:#800; }
+
+	kbd, samp, var, tt {
+		color:#666;
+		font-weight:bold;
+	}
+
+	var, dfn { font-style:italic; }
+
+	acronym, abbr {
+		border-bottom:1px #aaa dotted;
+		font-variant:small-caps;
+		letter-spacing:.07em;
+		cursor:help;
+	}
+
+	sub,
+	sup {
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+		vertical-align: baseline;
+	}
+
+	sup { top: -0.5em; }
+	sub { bottom: -0.25em; }
+
+	mark {
+		background: #ff0;
+		color: #000;
+	}
+
+	hr {
+		color:#fff;
+		background:transparent;
+		margin:0 0 0.75em 0;
+		padding:0 0 0.75em 0;
+		border:0;
+		border-bottom:1px #eee solid;
+	}
+
+	/*--- Links ----------------------------------------------------------------------------------------- */
+
+	a {
+		color:#4D87C7;
+		background:transparent;
+		text-decoration:none;
+	}
+
+	a:active { outline: none; }
+
+	/* (en) maximum constrast for tab focus - change with great care */
+	/* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
+	a:hover,
+	a:focus {
+		background-color: #4D87C7;
+		color:#fff;
+		text-decoration:none;
+	}
+
+	/* --- images ------------------ */
+
+	img,
+	figure {
+		margin: 0;
+	}
+
+	.flexible {
+		margin-top: 1.5em;
+		max-width: 100%;
+		height: auto;
+	}
+
+	* html .flexible {	/* IE6 support */
+		width: 98%;		/* 2% space for borders */
+	}
+
+	.bordered {
+		margin-top: 1.5em;
+		border: 2px #eee solid;
+		border: 2px rgba(255,255,255,1) solid;
+		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
+		-moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
+		box-shadow: 0 0 3px rgba(0,0,0,.25);
+	}
+
+	/**
+	* ----------------------------------------------------------------------- #
+	*
+	* Generic Content Classes
+	*
+	* (en) standard classes for positioning and highlighting
+	* (de) Standardklassen zur Positionierung und Hervorhebung
+	*
+	* @section content-generic-classes
+	*/
+	.highlight {
+		color:#c30;
+	}
+
+	.dimmed {
+		color:#888;
+	}
+
+	.box {
+		border-radius: 0.3em;
+		border-width: 1px;
+		border-style: solid;
+		border-color: #888;
+		border-color: rgba(0,0,0,.3);
+		-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
+		-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
+		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
+		color: #444;
+		color: rgba(0,0,0,.8);
+		padding: 1.4286em;
+		margin: 1.5em 0 0 0;
+	}
+
+	.box > *:first-child {
+		margin-top: 0;
+	}
+
+	.label {
+		font-family: Verdana, Geneva, sans-serif;
+		padding: 1px 6px 2px;
+		display: inline-block;
+		vertical-align:middle;
+		letter-spacing: normal;
+		white-space:nowrap;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+		background: #06C;
+		color: #fff;
+		font-size: 10px;
+		line-height: 12px;
+	}
+
+	.info {
+		background:#f4f4f4;
+	}
+
+	.success {
+		background:#8c8;
+	}
+
+	.warning {
+		background:#cc8;
+	}
+
+	.error {
+		background:#c88;
+	}
+
+	.float-left {
+		float:left;
+		display:inline;
+		margin: 1.5em 1em 0 0;
+	}
+
+	.float-right {
+		float:right;
+		display:inline;
+		margin: 1.5em 0 0 1em;
+	}
+
+	.center {
+		display:block;
+		text-align:center;
+		margin: 1.5em auto 0 auto;
+	}
+
+	/**
+	* ------------------------------------------------------------------------------------------------- #
+	*
+	* Tables | Tabellen
+	*
+	* (en) Generic classes for table-width and design definition
+	* (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen
+	*
+	* @section content-tables
+	*/
+
+	table {
+		width:100%;
+		border-collapse:collapse;
+		margin: 1.3571em 0 0 0;
+		color:#333;
+		border-top: 1px #ccc solid;
+		border-bottom: 1px #ccc solid;
+	}
+
+	table.narrow {
+		margin:  1.4286em 0 0 0;
+	}
+
+	table.narrow th,
+	table.narrow td {
+		padding: 0 0.5em;
+		line-height: 1.4286em;
+	}
+
+	table.bordertable {
+		border:1px #ccc solid;
+	}
+
+	table caption {
+		font-variant:small-caps;
+	}
+
+	th, td {
+		line-height: 1.5em;
+		vertical-align: top;
+		padding: 0.7143em 0.5em;
+	}
+
+	th *:first-child,
+	td *:first-child {
+		margin-top: 0;
+	}
+
+	th.nowrap,
+	td.nowrap {
+		white-space: nowrap;
+	}
+
+	thead th {
+		text-align: left;
+		color:#000;
+		border-bottom:2px #000 solid;
+	}
+
+	.bordertable thead th {
+		background:#e0e0e0;
+		border-right:1px #ccc solid;
+		border-bottom:1px #ccc solid;
+	}
+
+	.bordertable tbody th[scope="row"] {
+		background:#f0f0f0;
+	}
+
+	tbody th {
+		text-align: left;
+		border-top:1px solid #ccc;
+		text-align:left;
+	}
+
+	.bordertable tbody th {
+		border-right:1px solid #ccc;
+	}
+
+	tbody td {
+		text-align: left;
+		border-top:1px solid #ccc;
+	}
+
+	.bordertable tbody td {
+		border-right:1px solid #ccc;
+	}
+
+	/* highlight row on mouse over */
+	tbody tr:hover th,
+	tbody tr:hover td {
+		background:#f8f8f8;
+	}
+}