487 lines
8.6 KiB
CSS
487 lines
8.6 KiB
CSS
/**
|
|
* "Yet Another Multicolumn Layout" - YAML CSS Framework
|
|
*
|
|
* (en) Uniform design of standard content elements
|
|
* (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
|
|
*
|
|
* @copyright © 2005-2013, 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.1.2
|
|
*/
|
|
@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;
|
|
}
|
|
|
|
/* font-size: 14px; */
|
|
body {
|
|
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
|
|
font-size: 87.5%;
|
|
color: #444444;
|
|
}
|
|
|
|
/*--- 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: 48px; */
|
|
font-size: 342.85714%;
|
|
line-height: 0.875;
|
|
margin: 0 0 0.4375em 0;
|
|
}
|
|
|
|
h2 {
|
|
/* font-size: 32px; */
|
|
font-size: 228.57143%;
|
|
line-height: 1.3125;
|
|
margin: 0 0 0.65625em 0;
|
|
}
|
|
|
|
h3 {
|
|
/* font-size: 24px; */
|
|
font-size: 171.42857%;
|
|
line-height: 0.875;
|
|
margin: 0 0 0.875em 0;
|
|
}
|
|
|
|
h4 {
|
|
/* font-size: 21px; */
|
|
font-size: 150%;
|
|
line-height: 1;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
h5 {
|
|
/* font-size: 18px; */
|
|
font-size: 128.57143%;
|
|
line-height: 1.16667;
|
|
margin: 0 0 1.16667em 0;
|
|
}
|
|
|
|
h6 {
|
|
/* font-size: 14px; */
|
|
font-size: 100%;
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
margin: 0 0 1.5em 0;
|
|
}
|
|
|
|
/* --- Lists | Listen -------------------------------------------------------------------------------- */
|
|
ul,
|
|
ol,
|
|
dl {
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
margin: 0 0 1.5em 0;
|
|
}
|
|
|
|
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: 100%;
|
|
line-height: 1.5;
|
|
margin-left: 1.2em;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
margin: 0 0 1.5em 0.8em;
|
|
}
|
|
|
|
/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
|
|
p {
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
margin: 0 0 1.5em 0;
|
|
}
|
|
|
|
blockquote,
|
|
cite,
|
|
q {
|
|
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
blockquote {
|
|
background: transparent;
|
|
color: #666666;
|
|
margin: 1.5em 0 0 1.5em;
|
|
}
|
|
|
|
strong,
|
|
b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
em,
|
|
i {
|
|
font-style: italic;
|
|
}
|
|
|
|
big {
|
|
/* font-size: 16px; */
|
|
font-size: 114.28571%;
|
|
line-height: 1.3125;
|
|
}
|
|
|
|
small {
|
|
/* font-size: 12px; */
|
|
font-size: 85.71429%;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
tt,
|
|
samp,
|
|
var {
|
|
font-size: 100%;
|
|
}
|
|
|
|
pre {
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
margin: 0 0 1.5em 0;
|
|
white-space: pre;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
color: #880000;
|
|
}
|
|
|
|
kbd,
|
|
samp,
|
|
var,
|
|
tt {
|
|
color: #666666;
|
|
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: yellow;
|
|
color: black;
|
|
}
|
|
|
|
hr {
|
|
color: #fff;
|
|
background: transparent;
|
|
margin: 0 0 0.75em 0;
|
|
padding: 0 0 0.67857em 0;
|
|
border: 0;
|
|
border-bottom: 1px #eeeeee 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: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* --- images ------------------ */
|
|
img,
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.flexible {
|
|
margin-bottom: 1.5em;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* IE6 workaround - 2% space for possible borders */
|
|
* html .flexible {
|
|
width: 98%;
|
|
}
|
|
|
|
.bordered {
|
|
margin-bottom: 1.5em;
|
|
border: 2px #eee solid;
|
|
border: 2px white solid;
|
|
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0 0 3px rgba(0, 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: #cc3300;
|
|
}
|
|
|
|
.dimmed {
|
|
color: #888888;
|
|
}
|
|
|
|
.box {
|
|
border-radius: 0.3em;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #888;
|
|
border-color: rgba(0, 0, 0, 0.3);
|
|
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
|
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
|
color: #444;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
padding: 1.42857em;
|
|
margin: 0 0 1.5em 0;
|
|
}
|
|
.box > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
padding: 1px 6px 2px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
letter-spacing: normal;
|
|
white-space: nowrap;
|
|
border-radius: 3px;
|
|
background: #06C;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.info {
|
|
background: #f4f4f4;
|
|
}
|
|
|
|
.success {
|
|
background: #88cc88;
|
|
}
|
|
|
|
.warning {
|
|
background: #cccc88;
|
|
}
|
|
|
|
.error {
|
|
background: #cc8888;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
display: inline;
|
|
margin: 0 1em 1.5em 0;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
display: inline;
|
|
margin: 0 0 1.5em 1em;
|
|
}
|
|
|
|
.center {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto 1.5em 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;
|
|
color: #444444;
|
|
border-top: 1px #ccc solid;
|
|
border-bottom: 1px #ccc solid;
|
|
margin: 0 0 1.35714em 0;
|
|
}
|
|
table.narrow {
|
|
margin: 0 0 1.42857em 0;
|
|
}
|
|
table.narrow th,
|
|
table.narrow td {
|
|
padding: 0 0.5em;
|
|
line-height: 1.42857;
|
|
}
|
|
table.fixed {
|
|
table-layout: fixed;
|
|
}
|
|
table.bordertable {
|
|
border: 1px #ccc solid;
|
|
}
|
|
table.bordertable thead th {
|
|
background: #e0e0e0;
|
|
border-right: 1px #ccc solid;
|
|
border-bottom: 1px #ccc solid;
|
|
}
|
|
table.bordertable tbody th[scope="row"] {
|
|
background: #f0f0f0;
|
|
}
|
|
table.bordertable tbody th {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
table.bordertable tbody td {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
caption {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
line-height: 1.5em;
|
|
vertical-align: top;
|
|
padding: 0.71429em 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;
|
|
}
|
|
|
|
tbody {
|
|
/* highlight row on mouse over */
|
|
}
|
|
tbody th {
|
|
text-align: left;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
tbody td {
|
|
text-align: left;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
tbody tr:hover th,
|
|
tbody tr:hover td {
|
|
background: #f8f8f8;
|
|
}
|
|
}
|