base.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. /**
  2. * "Yet Another Multicolumn Layout" - YAML CSS Framework
  3. *
  4. * (en) YAML core stylesheet
  5. * (de) YAML Basis-Stylesheet
  6. *
  7. * Don't make any changes in this file!
  8. * Your changes should be placed in any css-file in your own stylesheet folder.
  9. *
  10. * @copyright Copyright 2005-2012, Dirk Jesse
  11. * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
  12. * YAML-CDL (http://www.yaml.de/license.html)
  13. * @link http://www.yaml.de
  14. * @package yaml
  15. * @version v4.0.1
  16. * @revision $Revision: 726 $
  17. * @lastmodified $Date: 2012-03-03 12:21:50 +0100 (Sa, 03 Mrz 2012) $
  18. */
  19. @media all {
  20. /**
  21. * @section CSS-Normalisation Module
  22. */
  23. /* (en) Global reset of paddings and margins for all HTML elements */
  24. /* (de) Globales Zurücksetzen der Innen- und Außenabstände für alle HTML-Elemente */
  25. * { margin:0; padding:0; }
  26. /* (en) Correction:margin/padding reset caused too small select boxes. */
  27. /* (de) Korrektur:Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
  28. option { padding-left:0.4em; } /* LTR */
  29. select { padding:1px; }
  30. /**
  31. * (en) Global fix of the Italics bugs in IE 5.x and IE 6
  32. * (de) Globale Korrektur des Italics Bugs des IE 5.x und IE 6
  33. *
  34. * @bugfix
  35. * @affected IE 5.x/Win, IE6
  36. * @css-for IE 5.x/Win, IE6
  37. * @valid yes
  38. */
  39. * html body * { overflow:visible; }
  40. body {
  41. /* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
  42. /* (de) Beseitigung von Rundungsfehler beim Skalieren von Schriftgrößen in älteren Opera Versionen */
  43. font-size:100%;
  44. /* (en) Standard values for colors and text alignment */
  45. /* (de) Vorgabe der Standardfarben und Textausrichtung */
  46. background:#fff;
  47. color:#000;
  48. text-align:left; /* LTR */
  49. }
  50. /* (en) avoid visible outlines on DIV containers in Webkit browsers */
  51. /* (de) Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern */
  52. div:target { outline:0 none; }
  53. /* (en) HTML 5 - adjusting visual formatting model to block level */
  54. /* (en) HTML 5 - Anpassung des visuellen Formatmodells auf Blockelemente */
  55. article,aside,details,figcaption,figure,
  56. footer,header,hgroup,nav,section {
  57. display:block;
  58. }
  59. /* (en) HTML5 - default media element styles */
  60. /* (de) HTML5 - Standard Eigenschaften für Media-Elemente */
  61. audio,
  62. canvas,
  63. video {
  64. display: inline-block;
  65. }
  66. /* (en) HTML5 - don't show <audio> element if there aren't controls */
  67. /* (de) HTML5 - <audio> ohne Kontrollelemente sollten nicht angezeigt werden */
  68. audio:not([controls]) {
  69. display: none;
  70. }
  71. /* (en) HTML5 - add missing styling in IE & old FF for hidden attribute */
  72. /* (de) HTML5 - Eigenschaften für das hidden-Attribut in älteren IEs und FF nachrüsten */
  73. [hidden] {
  74. display: none;
  75. }
  76. /* (en) force consistant appearance of input[type="search"] elements in all browser */
  77. /* (de) Einheitliches Erscheinungsbild für input[type="search"] Elemente erzwingen */
  78. input[type="search"] {
  79. -webkit-appearance: textfield;
  80. }
  81. input[type="search"]::-webkit-search-decoration {
  82. -webkit-appearance: none;
  83. }
  84. /* (en) Clear borders for <fieldset> and <img> elements */
  85. /* (de) Rahmen für <fieldset> und <img> Elemente löschen */
  86. fieldset, img { border:0 solid; }
  87. /* (en) new standard values for lists, blockquote, cite and tables */
  88. /* (de) Neue Standardwerte für Listen, Zitate und Tabellen */
  89. ul, ol, dl { margin:0 0 1em 1em; } /* LTR */
  90. li {
  91. line-height:1.5em;
  92. margin-left:0.8em; /* LTR */
  93. }
  94. dt { font-weight:bold; }
  95. dd { margin:0 0 1em 0.8em; } /* LTR */
  96. blockquote { margin:0 0 1em 0.8em; } /* LTR */
  97. q { quotes: none; }
  98. blockquote:before, blockquote:after,
  99. q:before, q:after { content: ''; content:none }
  100. table {
  101. border-collapse: collapse;
  102. border-spacing: 0;
  103. }
  104. /**
  105. * @section Float Handling Module
  106. */
  107. /* (en) clearfix method for clearing floats */
  108. /* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
  109. .ym-clearfix:before {
  110. content:"";
  111. display:table;
  112. }
  113. .ym-clearfix:after {
  114. clear:both;
  115. content:".";
  116. display:block;
  117. font-size:0;
  118. height:0;
  119. visibility:hidden;
  120. }
  121. /* (en) alternative solutions to contain floats */
  122. /* (de) Alternative Methoden zum Einschließen von Float-Umgebungen */
  123. .ym-contain-dt { display:table; width: 100%; overflow: visible; }
  124. .ym-contain-oh { overflow:hidden; width:100%; display:block; }
  125. .ym-contain-fl { float:left; width:100%; }
  126. /**
  127. * @section Accessibility Module
  128. *
  129. * (en) skip links and hidden content
  130. * (de) Skip-Links und versteckte Inhalte
  131. */
  132. /* (en) classes for invisible elements in the base layout */
  133. /* (de) Klassen für unsichtbare Elemente im Basislayout */
  134. .ym-skip,
  135. .ym-hideme,
  136. .ym-print {
  137. position:absolute;
  138. top:-32768px;
  139. left:-32768px; /* LTR */
  140. }
  141. /* (en) make skip links visible when using tab navigation */
  142. /* (de) Skip-Links für Tab-Navigation sichtbar schalten */
  143. .ym-skip:focus,
  144. .ym-skip:active {
  145. position:static;
  146. top:0;
  147. left:0;
  148. }
  149. /* skiplinks:technical setup */
  150. .ym-skiplinks {
  151. position:absolute;
  152. top:0px;
  153. left:-32768px;
  154. z-index:1000;
  155. width:100%;
  156. margin:0;
  157. padding:0;
  158. list-style-type:none;
  159. }
  160. .ym-skiplinks .ym-skip:focus,
  161. .ym-skiplinks .ym-skip:active {
  162. left:32768px;
  163. outline:0 none;
  164. position:absolute;
  165. width:100%;
  166. }
  167. }
  168. @media screen, projection {
  169. /**
  170. * @section Column Module
  171. *
  172. * default column config:
  173. * |-------------------------------|
  174. * | col1 | col3 | col2 |
  175. * | 20% | flexible | 20% |
  176. * |-------------------------------|
  177. */
  178. .ym-column { display:table; width:100%; }
  179. .ym-col1 { float:left; width:20%; }
  180. .ym-col2 { float:right; width:20%; }
  181. .ym-col3 { width:auto; margin:0 20%; }
  182. .ym-cbox { padding: 0 10px }
  183. .ym-cbox-left { padding: 0 10px 0 0 }
  184. .ym-cbox-right { padding: 0 0 0 10px }
  185. /* (en) IE-Clearing:Only used in Internet Explorer, switched on in iehacks.css */
  186. /* (de) IE-Clearing:Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
  187. .ym-ie-clearing { display:none; }
  188. /**
  189. * @section Grid Module
  190. *
  191. */
  192. .ym-grid {
  193. display:table;
  194. width:100%;
  195. table-layout:fixed;
  196. list-style-type: none;
  197. padding-left:0;
  198. padding-right:0;
  199. margin-left:0;
  200. margin-right:0;
  201. }
  202. .ym-gl { float:left; margin: 0; }
  203. .ym-gr { float:right; margin: 0 0 0 -5px; }
  204. .ym-g20 { width:20%; }
  205. .ym-g40 { width:40%; }
  206. .ym-g60 { width:60%; }
  207. .ym-g80 { width:80%; }
  208. .ym-g25 { width:25%; }
  209. .ym-g33 { width:33.333%; }
  210. .ym-g50 { width:50%; }
  211. .ym-g66 { width:66.666%; }
  212. .ym-g75 { width:75%; }
  213. .ym-g38 { width:38.2%; }
  214. .ym-g62 { width:61.8%; }
  215. .ym-gbox { padding: 0 10px }
  216. .ym-gbox-left { padding: 0 10px 0 0 }
  217. .ym-gbox-right { padding: 0 0 0 10px }
  218. .ym-equalize { overflow:hidden; }
  219. .ym-equalize > [class*="ym-g"] {
  220. display:table-cell;
  221. float:none;
  222. margin:0;
  223. vertical-align:top;
  224. }
  225. .ym-equalize > [class*="ym-g"] > [class*="ym-gbox"] {
  226. padding-bottom: 10000px;
  227. margin-bottom: -10000px
  228. }
  229. }
  230. @media all {
  231. /**
  232. * @section Form Module
  233. *
  234. * Vertical-Forms - technical base (standard)
  235. *
  236. * |-------------------------------|
  237. * | form |
  238. * |-------------------------------|
  239. * | label |
  240. * | input / select / textarea |
  241. * |-------------------------------|
  242. * | /form |
  243. * |-------------------------------|
  244. *
  245. * (en) Styling of forms where both label and input/select/textarea are styled with display:block;
  246. * (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
  247. */
  248. .ym-form,
  249. .ym-form fieldset { overflow:hidden; }
  250. .ym-form div { position:relative; }
  251. .ym-form label,
  252. .ym-form .ym-message {
  253. position:relative;
  254. display:block; /* important for Safari */
  255. }
  256. .ym-form .ym-fbox-check label {
  257. display:inline;
  258. }
  259. .ym-form input,
  260. .ym-form textarea { cursor:text; }
  261. .ym-form input[type="checkbox"],
  262. .ym-form input[type="radio"],
  263. .ym-form select,
  264. .ym-form label { cursor:pointer; }
  265. /* small adjustments for Internet Explorer - all versions */
  266. .ym-form textarea { overflow: auto; }
  267. /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
  268. .ym-form input[type=hidden] { display:none !important; }
  269. /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
  270. .ym-form .ym-fbox-text:before,
  271. .ym-form .ym-fbox-select:before,
  272. .ym-form .ym-fbox-check:before,
  273. .ym-form .ym-fbox-button:before {
  274. content:"";
  275. display:table;
  276. }
  277. .ym-form .ym-fbox-text:after,
  278. .ym-form .ym-fbox-select:after,
  279. .ym-form .ym-fbox-check:after,
  280. .ym-form .ym-fbox-button:after {
  281. clear:both;
  282. content:".";
  283. display:block;
  284. font-size:0;
  285. height:0;
  286. visibility:hidden;
  287. }
  288. /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
  289. .ym-form select,
  290. .ym-form input,
  291. .ym-form textarea {
  292. display:block;
  293. position:relative;
  294. width:58.5%;
  295. }
  296. .ym-form .ym-fbox-check input {
  297. display: inline;
  298. width: auto;
  299. }
  300. /* Styling of buttons | Gestaltung von Buttons */
  301. .ym-form .ym-fbox-button input {
  302. display: inline;
  303. overflow:visible; /* Fixes IE7 auto-padding bug */
  304. width:auto;
  305. }
  306. /* avoid jumping checkboxes & radiobuttons in IE8 */
  307. .ym-form .ym-fbox-check input:focus,
  308. .ym-form .ym-fbox-check input:hover,
  309. .ym-form .ym-fbox-check input:active {
  310. border:0 none;
  311. }
  312. /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
  313. .ym-full .ym-fbox-select select,
  314. .ym-full .ym-fbox-text input,
  315. .ym-full .ym-fbox-text textarea {
  316. width:94.2%;
  317. margin-right: -3px;
  318. }
  319. /**
  320. * Columnar forms display - technical base (optional)
  321. *
  322. * |-------------------------------------------|
  323. * | form |
  324. * |-------------------------------------------|
  325. * | |
  326. * | label | input / select / textarea |
  327. * | |
  328. * |-------------------------------------------|
  329. * | /form |
  330. * |-------------------------------------------|
  331. *
  332. * (en) Styling of forms where label floats left of form-elements
  333. * (de) Formulargestaltung, bei der die label-Elemente nach links fließen
  334. */
  335. /* Columnar display | Spalten-Darstellung */
  336. .ym-columnar .ym-fbox-text label,
  337. .ym-columnar .ym-fbox-select label {
  338. display:inline;
  339. float:left;
  340. width:30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
  341. }
  342. .ym-columnar .ym-fbox-check {
  343. position:relative;
  344. }
  345. .ym-label { display:block; }
  346. .ym-columnar .ym-fbox-check .ym-label {
  347. position:absolute;
  348. top:0;
  349. }
  350. /* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
  351. .ym-columnar .ym-fbox-check input,
  352. .ym-columnar .ym-error .ym-message {
  353. margin-left:30%;
  354. }
  355. /* global and local columnar settings for button alignment */
  356. .ym-columnar fieldset .ym-fbox-button,
  357. fieldset.ym-columnar .ym-fbox-button {
  358. padding-left:30%;
  359. }
  360. .ym-columnar .ym-fbox-select select,
  361. .ym-columnar .ym-fbox-text input,
  362. .ym-columnar .ym-fbox-text textarea {
  363. float:left;
  364. width:67.2%;
  365. margin-right: -3px;
  366. }
  367. /**
  368. * @section Form Construction Kit | Screen Adjustments
  369. *
  370. */
  371. .ym-fbox-select select { width:60%; }
  372. .ym-full .ym-fbox-select select { width:94.8%; }
  373. .ym-columnar .ym-fbox-select select { width:68.8%; }
  374. }
  375. @media print {
  376. /**
  377. * @section print adjustments for core modules
  378. *
  379. * (en) float clearing for subtemplates. Uses display:table to avoid bugs in FF & IE
  380. * (de) Float Clearing für die Subtemplates. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
  381. *
  382. * @bugfix
  383. * @since 3.0
  384. * @affected FF2.0, FF3.0, IE7
  385. * @css-for all browsers
  386. * @valid yes
  387. */
  388. .ym-grid > .ym-gl,
  389. .ym-grid > .ym-gr {
  390. overflow:visible;
  391. display:table;
  392. }
  393. /* (en) make .ym-print class visible */
  394. /* (de) .ym-print-Klasse sichtbar schalten */
  395. .ym-print {
  396. position:static;
  397. left:0;
  398. }
  399. /* (en) generic class to hide elements for print */
  400. /* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
  401. .ym-noprint {
  402. display:none !important;
  403. }
  404. }