main.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. @charset "UTF-8";
  2. @import url(normalize.css);
  3. @font-face {
  4. font-family: 'TeX Gyre Heros';
  5. src: url("texgyreheros-regular-webfont.woff") format("woff");
  6. font-style: normal;
  7. }
  8. @font-face {
  9. font-family: 'TeX Gyre Heros';
  10. src: url("texgyreheros-bold-webfont.woff") format("woff");
  11. font-style: normal;
  12. font-weight: bold;
  13. }
  14. @font-face {
  15. font-family: 'TeX Gyre Heros';
  16. src: url("texgyreheros-italic-webfont.woff") format("woff");
  17. font-style: italic;
  18. }
  19. @font-face {
  20. font-family: 'TeX Gyre Heros';
  21. src: url("texgyreheros-bolditalic-webfont.woff") format("woff");
  22. font-style: italic;
  23. font-weight: bold;
  24. }
  25. svelte {
  26. font-size: 62.5%;
  27. }
  28. @media print {
  29. * {
  30. -webkit-print-color-adjust: exact;
  31. }
  32. .page {
  33. page-break-after: always;
  34. margin: 0px;
  35. border: none;
  36. margin-bottom: 0px;
  37. -webkit-box-shadow: initial;
  38. -moz-box-shadow: initial;
  39. box-shadow: initial;
  40. }
  41. .page[size="A4"][orientation="portrait"] {
  42. size: A4 portrait;
  43. }
  44. .page[size="A4"][orientation="landscape"] {
  45. size: A4 landscape;
  46. }
  47. .page[size="A3"][orientation="portrait"] {
  48. size: A3 portrait;
  49. }
  50. .page[size="A3"][orientation="landscape"] {
  51. size: A3 landscape;
  52. }
  53. }
  54. .page {
  55. font-size: 1.2em;
  56. /* currently ems cause chrome bug misinterpreting ems on body element */
  57. line-height: 1.5;
  58. font-weight: normal;
  59. font-family: "Tex Gyre Heros";
  60. color: #333;
  61. }
  62. /* Typography */
  63. h1, h2, h3, h4, h5, h6 {
  64. margin-top: 0;
  65. margin-bottom: 0;
  66. font-weight: 400;
  67. }
  68. h1 {
  69. font-size: 4.0em;
  70. line-height: 1.2;
  71. letter-spacing: -.1em;
  72. }
  73. h2 {
  74. font-size: 3.6em;
  75. line-height: 1.25;
  76. letter-spacing: -.1em;
  77. }
  78. h3 {
  79. font-size: 3.0em;
  80. line-height: 1.3;
  81. letter-spacing: -.1em;
  82. }
  83. h4 {
  84. font-size: 2.4em;
  85. line-height: 1.35;
  86. letter-spacing: -.08em;
  87. }
  88. h5 {
  89. font-size: 1.8em;
  90. line-height: 1.5;
  91. letter-spacing: -.05em;
  92. }
  93. h6 {
  94. font-size: 1.5em;
  95. line-height: 1.6;
  96. letter-spacing: 0;
  97. }
  98. p {
  99. margin-top: 0;
  100. }
  101. .page {
  102. position: relative;
  103. padding: 10mm 25mm 10mm 25mm;
  104. display: block;
  105. border: 1px solid black;
  106. -webkit-box-shadow: 5px 5px 4px 0px silver;
  107. -moz-box-shadow: 5px 5px 4px 0px silver;
  108. box-shadow: 5px 5px 4px 0px silver;
  109. }
  110. .page[size="A4"][orientation="portrait"] {
  111. width: 210mm;
  112. height: 296.8mm;
  113. }
  114. .page[size="A4"][orientation="landscape"] {
  115. width: 296.8mm;
  116. height: 210mm;
  117. }
  118. .page[size="A3"][orientation="portrait"] {
  119. width: 296.8mm;
  120. height: 420mm;
  121. }
  122. .page[size="A3"][orientation="landscape"] {
  123. width: 420mm;
  124. height: 296.8mm;
  125. }
  126. .page[size="A5"][orientation="portrait"] {
  127. width: 14.8cm;
  128. height: 21cm;
  129. }
  130. .page[size="A5"][orientation="landscape"] {
  131. width: 21cm;
  132. height: 14.8cm;
  133. }
  134. .grid {
  135. display: grid;
  136. grid-gap: 0px;
  137. align-content: start;
  138. grid-template-columns: auto;
  139. grid-template-rows: auto 1fr auto;
  140. grid-template-areas: "header" "main" "footer";
  141. }
  142. .header {
  143. grid-area: header;
  144. align-self: start;
  145. }
  146. .main {
  147. grid-area: main;
  148. align-self: start;
  149. }
  150. .footer {
  151. grid-area: footer;
  152. align-self: end;
  153. }
  154. .main-grid {
  155. grid-area: main;
  156. display: grid;
  157. grid-column-gap: 25mm;
  158. grid-template-columns: 1fr 1fr;
  159. grid-template-rows: auto 1fr auto;
  160. grid-template-areas: "header-left header-right" "main-left main-right" "footer-left footer-right";
  161. }
  162. .main-left {
  163. grid-area: main-left;
  164. }
  165. .main-right {
  166. grid-area: main-right;
  167. }
  168. .footer-grid {
  169. grid-area: footer;
  170. display: grid;
  171. grid-column-gap: 25mm;
  172. grid-template-columns: 1fr 1fr;
  173. grid-template-rows: auto;
  174. grid-template-areas: "footer-left footer-right";
  175. }
  176. .footer-left {
  177. grid-area: footer-left;
  178. }
  179. .footer-right {
  180. grid-area: footer-right;
  181. }
  182. .flex-grid {
  183. display: flex;
  184. }
  185. .col {
  186. flex: 1;
  187. }
  188. .col-2 {
  189. flex: 2;
  190. }
  191. .voffset-halb {
  192. margin-top: 0.5em;
  193. }
  194. .voffset-1 {
  195. margin-top: 1em;
  196. }
  197. .voffset-2 {
  198. margin-top: 2em;
  199. }
  200. .voffset-3 {
  201. margin-top: 3em;
  202. }
  203. .voffset-4 {
  204. margin-top: 4em;
  205. }
  206. .voffset-5 {
  207. margin-top: 5em;
  208. }
  209. .voffset-6 {
  210. margin-top: 6em;
  211. }
  212. .voffset-7 {
  213. margin-top: 7em;
  214. }
  215. .voffset-8 {
  216. margin-top: 8em;
  217. }
  218. .voffset-9 {
  219. margin-top: 9em;
  220. }
  221. .voffset-10 {
  222. margin-top: 10em;
  223. }
  224. .voffset-11 {
  225. margin-top: 11em;
  226. }
  227. .voffset-12 {
  228. margin-top: 12em;
  229. }
  230. .voffset-13 {
  231. margin-top: 13em;
  232. }
  233. .voffset-14 {
  234. margin-top: 14em;
  235. }
  236. .voffset-15 {
  237. margin-top: 15em;
  238. }
  239. .voffset-16 {
  240. margin-top: 16em;
  241. }
  242. .voffset-17 {
  243. margin-top: 17em;
  244. }
  245. .voffset-18 {
  246. margin-top: 18em;
  247. }
  248. .voffset-19 {
  249. margin-top: 19em;
  250. }
  251. .voffset-20 {
  252. margin-top: 20em;
  253. }
  254. .text-center {
  255. text-align: center !important;
  256. }
  257. hr {
  258. border: 0;
  259. border-top: 1px solid #eee;
  260. border-color: #000;
  261. height: 1px;
  262. margin: 3px 0;
  263. }
  264. hr.hr-rot {
  265. border-color: #ff2700;
  266. margin: 8px 0;
  267. }
  268. hr.hr-grau {
  269. border-color: #646464 !important;
  270. }
  271. .table-eng {
  272. margin-bottom: 0 !important;
  273. }
  274. .table-noten {
  275. width: 100%;
  276. border: none;
  277. border-collapse: collapse;
  278. margin-bottom: 1em;
  279. }
  280. .table-bordered {
  281. border-collapse: collapse;
  282. }
  283. .table-bordered tr {
  284. border-bottom: thin solid #333;
  285. }
  286. .fach-bezeichnung {
  287. padding-left: 10mm;
  288. }
  289. .fach-bezeichnung.padding-5 {
  290. padding-left: 2em;
  291. }
  292. .td-fach-note {
  293. padding-bottom: .2em;
  294. padding-top: .2em;
  295. width: 12em;
  296. }
  297. .td-fach-note span {
  298. background-color: #dcdcdc !important;
  299. text-align: center;
  300. width: 10em;
  301. display: block;
  302. vertical-align: middle;
  303. margin: 0 auto;
  304. }
  305. .td-fach-note span.e-note {
  306. background-color: white !important;
  307. width: 17em;
  308. margin: 0;
  309. }
  310. .td-padding-extra {
  311. padding: 2mm 0 2mm 0;
  312. }
  313. .fachgruppe-margin {
  314. padding-top: 0.3em;
  315. }
  316. .fett {
  317. font-weight: bolder;
  318. }
  319. .lernfeld-lernbereich {
  320. padding-left: 2em;
  321. padding-bottom: 0;
  322. }
  323. .lernbereich {
  324. padding-left: 20mm;
  325. }
  326. .klein {
  327. font-size: smaller;
  328. }
  329. .eng {
  330. line-height: 1.3em;
  331. }
  332. .grau * {
  333. color: #646464 !important;
  334. }
  335. ul.dashes {
  336. margin: 0;
  337. list-style-type: none;
  338. padding-left: 1em;
  339. }
  340. ul.dashes li:before {
  341. content: "-";
  342. position: absolute;
  343. margin-left: -1em;
  344. }
  345. .schulnummer {
  346. text-align: right;
  347. }
  348. .wasserzeichen {
  349. position: absolute;
  350. opacity: 0.5;
  351. z-index: 99;
  352. color: red;
  353. font-size: 96pt;
  354. }
  355. .seitenlogo {
  356. position: absolute;
  357. bottom: 10mm;
  358. left: 10mm;
  359. }
  360. * {
  361. box-sizing: border-box;
  362. -moz-box-sizing: border-box;
  363. }
  364. table.fixed {
  365. table-layout: fixed;
  366. }
  367. table.fixed table th, table.fixed table td {
  368. overflow: hidden;
  369. }