bibel/bibel_html/de_new/_assets/css/base.css

448 lines
12 KiB
CSS
Raw Normal View History

@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; }
/* (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;
/* [disabled]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;
}
}