/** * "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 * @revision $Revision: 686 $ * @lastmodified $Date: 2012-01-22 13:09:37 +0100 (So, 22 Jan 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]), [hidden] 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 /* (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 &::-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, blockquote margin: 0 0 1em 0.8em /* LTR /* LTR q quotes: none blockquote &:before, &:after content: '' content: none q &:before, &: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 &: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, &: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-skip &:focus, &: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% /* (en) Preparation for absolute positioning within content columns /* (de) Vorbereitung für absolute Positionierungen innerhalb der Inhaltsspalten .ym-cbox.ym-cbox-left, .ym-cbox-right position: relative .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-gl, .ym-gr display: table-cell float: none margin: 0 vertical-align: top * > .ym-gbox, .ym-gbox-left, .ym-gbox-right 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 overflow: hidden fieldset overflow: hidden div.ym-form label, .ym-message position: relative display: block /* important for Safari .ym-fbox-check label display: inline input, textarea cursor: text input &[type="checkbox"], &[type="radio"] cursor: pointer select, label cursor: pointer textarea overflow: auto input[type=hidden] display: none !important .ym-fbox-text:before, .ym-fbox-select:before, .ym-fbox-check:before, .ym-fbox-button:before content: "" display: table .ym-fbox-text:after, .ym-fbox-select:after, .ym-fbox-check:after, .ym-fbox-button:after clear: both content: "." display: block font-size: 0 height: 0 visibility: hidden select, input, textarea display: block position: relative width: 58.5% .ym-fbox-check input display: inline width: auto .ym-fbox-button input display: inline overflow: visible /* Fixes IE7 auto-padding bug width: auto .ym-fbox-check input &:focus, &:hover, &:active border: 0 none /* small adjustments for Internet Explorer - all versions /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite /* Styling of buttons | Gestaltung von Buttons /* avoid jumping checkboxes & radiobuttons in IE8 /* 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 width: 94.2% margin-right: -3px .ym-fbox-text input, 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-fbox-select label display: inline float: left width: 30% /* Can be fixed width too | Kann auch eine fixe Angabe sein .ym-fbox-check position: relative .ym-label display: block .ym-columnar .ym-fbox-check .ym-label position: absolute top: 0 input margin-left: 30% .ym-error .ym-message margin-left: 30% fieldset .ym-fbox-button padding-left: 30% /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels /* global and local columnar settings for button alignment fieldset.ym-columnar .ym-fbox-button padding-left: 30% .ym-columnar .ym-fbox-select select float: left width: 67.2% margin-right: -3px .ym-fbox-text input, 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-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