main.css 25 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343
  1. /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
  2. /*
  3. * What follows is the result of much research on cross-browser styling.
  4. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  5. * Kroc Camen, and the H5BP dev community and team.
  6. */
  7. /*
  8. * Sass Guide: http://sass-lang.com/guide
  9. */
  10. /* ==========================================================================
  11. Includes
  12. ========================================================================== */
  13. /*! normalize.css v1.1.3 | MIT License | git.io/normalize */
  14. /* ==========================================================================
  15. HTML5 display definitions
  16. ========================================================================== */
  17. /**
  18. * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
  19. */
  20. article,
  21. aside,
  22. details,
  23. figcaption,
  24. figure,
  25. footer,
  26. header,
  27. hgroup,
  28. main,
  29. nav,
  30. section,
  31. summary {
  32. display: block;
  33. }
  34. /**
  35. * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  36. */
  37. audio,
  38. canvas,
  39. video {
  40. display: inline-block;
  41. *display: inline;
  42. *zoom: 1;
  43. }
  44. /**
  45. * Prevent modern browsers from displaying `audio` without controls.
  46. * Remove excess height in iOS 5 devices.
  47. */
  48. audio:not([controls]) {
  49. display: none;
  50. height: 0;
  51. }
  52. /**
  53. * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  54. * Known issue: no IE 6 support.
  55. */
  56. [hidden] {
  57. display: none;
  58. }
  59. /* ==========================================================================
  60. Base
  61. ========================================================================== */
  62. /**
  63. * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  64. * `em` units.
  65. * 2. Prevent iOS text size adjust after orientation change, without disabling
  66. * user zoom.
  67. */
  68. html {
  69. font-size: 100%;
  70. /* 1 */
  71. -ms-text-size-adjust: 100%;
  72. /* 2 */
  73. -webkit-text-size-adjust: 100%;
  74. /* 2 */
  75. }
  76. /**
  77. * Address `font-family` inconsistency between `textarea` and other form
  78. * elements.
  79. */
  80. html,
  81. button,
  82. input,
  83. select,
  84. textarea {
  85. font-family: sans-serif;
  86. }
  87. /**
  88. * Address margins handled incorrectly in IE 6/7.
  89. */
  90. body {
  91. margin: 0;
  92. }
  93. /* ==========================================================================
  94. Links
  95. ========================================================================== */
  96. /**
  97. * Address `outline` inconsistency between Chrome and other browsers.
  98. */
  99. a:focus {
  100. outline: thin dotted;
  101. }
  102. /**
  103. * Improve readability when focused and also mouse hovered in all browsers.
  104. */
  105. a:active,
  106. a:hover {
  107. outline: 0;
  108. }
  109. /* ==========================================================================
  110. Typography
  111. ========================================================================== */
  112. /**
  113. * Address font sizes and margins set differently in IE 6/7.
  114. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
  115. * and Chrome.
  116. */
  117. h1 {
  118. font-size: 2em;
  119. margin: 0.67em 0;
  120. }
  121. h2 {
  122. font-size: 1.5em;
  123. margin: 0.83em 0;
  124. }
  125. h3 {
  126. font-size: 1.17em;
  127. margin: 1em 0;
  128. }
  129. h4 {
  130. font-size: 1em;
  131. margin: 1.33em 0;
  132. }
  133. h5 {
  134. font-size: 0.83em;
  135. margin: 1.67em 0;
  136. }
  137. h6 {
  138. font-size: 0.67em;
  139. margin: 2.33em 0;
  140. }
  141. /**
  142. * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  143. */
  144. abbr[title] {
  145. border-bottom: 1px dotted;
  146. }
  147. /**
  148. * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  149. */
  150. b,
  151. strong {
  152. font-weight: bold;
  153. }
  154. blockquote {
  155. margin: 1em 40px;
  156. }
  157. /**
  158. * Address styling not present in Safari 5 and Chrome.
  159. */
  160. dfn {
  161. font-style: italic;
  162. }
  163. /**
  164. * Address differences between Firefox and other browsers.
  165. * Known issue: no IE 6/7 normalization.
  166. */
  167. hr {
  168. -moz-box-sizing: content-box;
  169. box-sizing: content-box;
  170. height: 0;
  171. }
  172. /**
  173. * Address styling not present in IE 6/7/8/9.
  174. */
  175. mark {
  176. background: #ff0;
  177. color: #000;
  178. }
  179. /**
  180. * Address margins set differently in IE 6/7.
  181. */
  182. p,
  183. pre {
  184. margin: 1em 0;
  185. }
  186. /**
  187. * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  188. */
  189. code,
  190. kbd,
  191. pre,
  192. samp {
  193. font-family: monospace, serif;
  194. _font-family: "courier new", monospace;
  195. font-size: 1em;
  196. }
  197. /**
  198. * Improve readability of pre-formatted text in all browsers.
  199. */
  200. pre {
  201. white-space: pre;
  202. white-space: pre-wrap;
  203. word-wrap: break-word;
  204. }
  205. /**
  206. * Address CSS quotes not supported in IE 6/7.
  207. */
  208. q {
  209. quotes: none;
  210. }
  211. /**
  212. * Address `quotes` property not supported in Safari 4.
  213. */
  214. q:before,
  215. q:after {
  216. content: "";
  217. content: none;
  218. }
  219. /**
  220. * Address inconsistent and variable font size in all browsers.
  221. */
  222. small {
  223. font-size: 80%;
  224. }
  225. /**
  226. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  227. */
  228. sub,
  229. sup {
  230. font-size: 75%;
  231. line-height: 0;
  232. position: relative;
  233. vertical-align: baseline;
  234. }
  235. sup {
  236. top: -0.5em;
  237. }
  238. sub {
  239. bottom: -0.25em;
  240. }
  241. /* ==========================================================================
  242. Lists
  243. ========================================================================== */
  244. /**
  245. * Address margins set differently in IE 6/7.
  246. */
  247. dl,
  248. menu,
  249. ol,
  250. ul {
  251. margin: 1em 0;
  252. }
  253. dd {
  254. margin: 0 0 0 40px;
  255. }
  256. /**
  257. * Address paddings set differently in IE 6/7.
  258. */
  259. menu,
  260. ol,
  261. ul {
  262. padding: 0 0 0 40px;
  263. }
  264. /**
  265. * Correct list images handled incorrectly in IE 7.
  266. */
  267. nav ul,
  268. nav ol {
  269. list-style: none;
  270. list-style-image: none;
  271. }
  272. /* ==========================================================================
  273. Embedded content
  274. ========================================================================== */
  275. /**
  276. * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
  277. * 2. Improve image quality when scaled in IE 7.
  278. */
  279. img {
  280. border: 0;
  281. /* 1 */
  282. -ms-interpolation-mode: bicubic;
  283. /* 2 */
  284. }
  285. /**
  286. * Correct overflow displayed oddly in IE 9.
  287. */
  288. svg:not(:root) {
  289. overflow: hidden;
  290. }
  291. /* ==========================================================================
  292. Figures
  293. ========================================================================== */
  294. /**
  295. * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  296. */
  297. figure {
  298. margin: 0;
  299. }
  300. /* ==========================================================================
  301. Forms
  302. ========================================================================== */
  303. /**
  304. * Correct margin displayed oddly in IE 6/7.
  305. */
  306. form {
  307. margin: 0;
  308. }
  309. /**
  310. * Define consistent border, margin, and padding.
  311. */
  312. fieldset {
  313. border: 1px solid #c0c0c0;
  314. margin: 0 2px;
  315. padding: 0.35em 0.625em 0.75em;
  316. }
  317. /**
  318. * 1. Correct color not being inherited in IE 6/7/8/9.
  319. * 2. Correct text not wrapping in Firefox 3.
  320. * 3. Correct alignment displayed oddly in IE 6/7.
  321. */
  322. legend {
  323. border: 0;
  324. /* 1 */
  325. padding: 0;
  326. /*white-space: normal;*/
  327. /* 2 */
  328. *margin-left: -7px;
  329. /* 3 */
  330. }
  331. /**
  332. * 1. Correct font size not being inherited in all browsers.
  333. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
  334. * and Chrome.
  335. * 3. Improve appearance and consistency in all browsers.
  336. */
  337. button,
  338. input,
  339. select,
  340. textarea {
  341. font-size: 100%;
  342. /* 1 */
  343. margin: 0;
  344. /* 2 */
  345. vertical-align: baseline;
  346. /* 3 */
  347. *vertical-align: middle;
  348. /* 3 */
  349. }
  350. /**
  351. * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  352. * the UA stylesheet.
  353. */
  354. button,
  355. input {
  356. line-height: normal;
  357. }
  358. /**
  359. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  360. * All other form control elements do not inherit `text-transform` values.
  361. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
  362. * Correct `select` style inheritance in Firefox 4+ and Opera.
  363. */
  364. button,
  365. select {
  366. text-transform: none;
  367. }
  368. /**
  369. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  370. * and `video` controls.
  371. * 2. Correct inability to style clickable `input` types in iOS.
  372. * 3. Improve usability and consistency of cursor style between image-type
  373. * `input` and others.
  374. * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  375. * Known issue: inner spacing remains in IE 6.
  376. */
  377. button,
  378. html input[type="button"],
  379. input[type="reset"],
  380. input[type="submit"] {
  381. -webkit-appearance: button;
  382. /* 2 */
  383. cursor: pointer;
  384. /* 3 */
  385. *overflow: visible;
  386. /* 4 */
  387. }
  388. /**
  389. * Re-set default cursor for disabled elements.
  390. */
  391. button[disabled],
  392. html input[disabled] {
  393. cursor: default;
  394. }
  395. /**
  396. * 1. Address box sizing set to content-box in IE 8/9.
  397. * 2. Remove excess padding in IE 8/9.
  398. * 3. Remove excess padding in IE 7.
  399. * Known issue: excess padding remains in IE 6.
  400. */
  401. input[type="checkbox"],
  402. input[type="radio"] {
  403. box-sizing: border-box;
  404. /* 1 */
  405. padding: 0;
  406. /* 2 */
  407. *height: 13px;
  408. /* 3 */
  409. *width: 13px;
  410. /* 3 */
  411. }
  412. /**
  413. * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  414. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  415. * (include `-moz` to future-proof).
  416. */
  417. input[type="search"] {
  418. -webkit-appearance: textfield;
  419. /* 1 */
  420. -moz-box-sizing: content-box;
  421. -webkit-box-sizing: content-box;
  422. /* 2 */
  423. box-sizing: content-box;
  424. }
  425. /**
  426. * Remove inner padding and search cancel button in Safari 5 and Chrome
  427. * on OS X.
  428. */
  429. input[type="search"]::-webkit-search-cancel-button,
  430. input[type="search"]::-webkit-search-decoration {
  431. -webkit-appearance: none;
  432. }
  433. /**
  434. * Remove inner padding and border in Firefox 3+.
  435. */
  436. button::-moz-focus-inner,
  437. input::-moz-focus-inner {
  438. border: 0;
  439. padding: 0;
  440. }
  441. /**
  442. * 1. Remove default vertical scrollbar in IE 6/7/8/9.
  443. * 2. Improve readability and alignment in all browsers.
  444. */
  445. textarea {
  446. overflow: auto;
  447. /* 1 */
  448. vertical-align: top;
  449. /* 2 */
  450. }
  451. /* ==========================================================================
  452. Tables
  453. ========================================================================== */
  454. /**
  455. * Remove most spacing between table cells.
  456. */
  457. table {
  458. border-collapse: collapse;
  459. border-spacing: 0;
  460. }
  461. /* ==========================================================================
  462. Variables
  463. by Sven Reifschneider
  464. ========================================================================== */
  465. /*
  466. * Colors
  467. */
  468. /*
  469. * Font
  470. */
  471. /* ==========================================================================
  472. Mixins
  473. by Sven Reifschneider
  474. Usage:
  475. @include mixin-name(wert);
  476. ========================================================================== */
  477. /* ==========================================================================
  478. Base styles: opinionated defaults
  479. ========================================================================== */
  480. html,
  481. button,
  482. input,
  483. select,
  484. textarea {
  485. color: #222;
  486. }
  487. html {
  488. font-size: 1em;
  489. line-height: 1.4;
  490. font-family: "Lato", Helvetica, Arial, sans-serif;
  491. text-align: center;
  492. -webkit-text-rendering: optimizeLegibility;
  493. -moz-text-rendering: optimizeLegibility;
  494. -ms-text-rendering: optimizeLegibility;
  495. -o-text-rendering: optimizeLegibility;
  496. text-rendering: optimizeLegibility;
  497. -webkit-font-smoothing: antialiased;
  498. -moz-font-smoothing: antialiased;
  499. -ms-font-smoothing: antialiased;
  500. -o-font-smoothing: antialiased;
  501. font-smoothing: antialiased;
  502. -webkit-box-sizing: border-box;
  503. -moz-box-sizing: border-box;
  504. box-sizing: border-box;
  505. }
  506. /*
  507. * Remove text-shadow in selection highlight: h5bp.com/i
  508. * These selection rule sets have to be separate.
  509. * Customize the background color to match your design.
  510. */
  511. ::-moz-selection {
  512. background: #b3d4fc;
  513. text-shadow: none;
  514. }
  515. ::selection {
  516. background: #b3d4fc;
  517. text-shadow: none;
  518. }
  519. /*
  520. * A better looking default horizontal rule
  521. */
  522. hr {
  523. display: block;
  524. height: 1px;
  525. border: 0;
  526. border-top: 1px solid #ccc;
  527. margin: 1em 0;
  528. padding: 0;
  529. }
  530. /*
  531. * Remove the gap between images, videos, audio and canvas and the bottom of
  532. * their containers: h5bp.com/i/440
  533. */
  534. audio,
  535. canvas,
  536. img,
  537. video {
  538. vertical-align: middle;
  539. }
  540. /*
  541. * Remove default fieldset styles.
  542. */
  543. fieldset {
  544. border: 0;
  545. margin: 0;
  546. padding: 0;
  547. }
  548. /*
  549. * Allow only vertical resizing of textareas.
  550. */
  551. textarea {
  552. resize: vertical;
  553. }
  554. /* ==========================================================================
  555. Website Style
  556. ========================================================================== */
  557. /* ==========================================================================
  558. Don't Repeat Yourself
  559. Elemente, die immer wieder auftauchen
  560. by Sven Reifschneider
  561. ========================================================================== */
  562. a,
  563. a:hover,
  564. a:active,
  565. a:visited {
  566. text-decoration: none;
  567. }
  568. /* ==========================================================================
  569. Website Style
  570. by Sven Reifschneider
  571. ========================================================================== */
  572. body {
  573. background: #f3f3f3;
  574. }
  575. body {
  576. text-align: center;
  577. width: 100%;
  578. }
  579. header {
  580. background: #873e23;
  581. width: 100%;
  582. color: #fff;
  583. font-weight: bold;
  584. padding: 1em 0 0 0;
  585. }
  586. header a {
  587. color: #d5f2f5;
  588. transition: all 0.2s;
  589. }
  590. header a:hover {
  591. color: #f4feff;
  592. }
  593. header h1 {
  594. font-size: 1.8em;
  595. font-weight: normal;
  596. margin: 0.1em 0em;
  597. padding: 0;
  598. }
  599. header h2 {
  600. font-size: 1.4em;
  601. font-weight: normal;
  602. margin: 0.1em 0;
  603. padding: 0;
  604. }
  605. header p {
  606. margin: 0.1em 0 0.2em 0;
  607. padding: 0;
  608. }
  609. header .h-left {
  610. display: inline-block;
  611. width: 48%;
  612. text-align: left;
  613. }
  614. header .h-right {
  615. display: inline-block;
  616. width: 48%;
  617. text-align: right;
  618. }
  619. header .h-right table {
  620. float: right;
  621. border: none;
  622. }
  623. header .h-right table td {
  624. padding: 0.1em 0.4em;
  625. }
  626. header nav {
  627. display: inline-block;
  628. text-align: left;
  629. width: 100%;
  630. font-size: 1.4em;
  631. font-weight: 400;
  632. margin: 2em 0 0 0;
  633. }
  634. header nav ul {
  635. list-style-type: none;
  636. margin: 0;
  637. padding: 0;
  638. }
  639. header nav li {
  640. display: inline-block;
  641. padding: 0.3em 0;
  642. margin: 0 0.4em;
  643. }
  644. header nav a {
  645. display: block;
  646. }
  647. header nav select {
  648. display: block;
  649. font-size: 0.8em;
  650. font-weight: 300;
  651. border: none;
  652. outline: none;
  653. -webkit-appearance: none;
  654. -moz-appearance: none;
  655. appearance: none;
  656. cursor: pointer;
  657. background: #05c2d8;
  658. color: #fff;
  659. }
  660. header nav a {
  661. color: #d5f2f5;
  662. transition: all 0.2s;
  663. }
  664. header nav a:hover {
  665. color: #f4feff;
  666. }
  667. header nav li.active {
  668. border-bottom: 3px solid #fff533;
  669. }
  670. header nav li.active a {
  671. color: #fff;
  672. }
  673. .container {
  674. display: inline-block;
  675. width: 1500px;
  676. }
  677. .container .left {
  678. display: inline-block;
  679. width: 590px;
  680. vertical-align: top;
  681. margin-right: 1.5em;
  682. }
  683. .container .right {
  684. display: inline-block;
  685. width: 860px;
  686. }
  687. .container-fix {
  688. display: inline-block;
  689. text-align: left;
  690. width: 980px;
  691. }
  692. .card {
  693. background: #fff;
  694. padding: 0.2em 1.5em 1em 1.5em;
  695. margin: 2em 0;
  696. box-sizing: border-box;
  697. width: 100%;
  698. text-align: left;
  699. -webkit-box-shadow: 0px 0px 6px 0px #c9c9c9;
  700. -moz-box-shadow: 0px 0px 6px 0px #c9c9c9;
  701. box-shadow: 0px 0px 6px 0px #c9c9c9;
  702. }
  703. .card img {
  704. max-width: 98%;
  705. }
  706. .card h1 {
  707. width: 100%;
  708. text-align: left;
  709. font-size: 1.5em;
  710. font-weight: normal;
  711. color: #515151;
  712. padding: 0;
  713. border-bottom: 1px solid #ebebeb;
  714. }
  715. .card h3 {
  716. margin: 0.4em 0;
  717. padding: 0;
  718. color: #515151;
  719. }
  720. .card table {
  721. border: none;
  722. width: 100%;
  723. }
  724. .card table td {
  725. margin: 0.2em;
  726. padding: 0.2em 0;
  727. }
  728. .card a {
  729. color: #6cc99f;
  730. transition: all 0.2s;
  731. }
  732. .card a:hover {
  733. color: #a4e5c8;
  734. }
  735. .cc {
  736. text-align: center;
  737. }
  738. .haelfte {
  739. width: 48%;
  740. display: inline-block;
  741. }
  742. footer {
  743. width: 100%;
  744. background: #05c2d8;
  745. color: #fff;
  746. padding: 1.5em 0;
  747. }
  748. footer a {
  749. color: #fff533;
  750. transition: all 0.2s;
  751. }
  752. footer a:hover {
  753. color: #fffcc2;
  754. }
  755. img.space {
  756. margin-top: 1.3em;
  757. }
  758. .graphs img {
  759. margin: 0.4em 0;
  760. max-width: 800px;
  761. }
  762. img.small {
  763. max-width: 550px;
  764. }
  765. .cpointer {
  766. cursor: pointer;
  767. }
  768. table.tablespacer td {
  769. padding: 0.3em 0;
  770. }
  771. table.tablespacer tr:not(:last-child) {
  772. border-bottom: 1px solid #ebebeb;
  773. }
  774. /*For about pages data table*/
  775. td.about {
  776. width: 70px;
  777. }
  778. .iframe {
  779. width: 100%;
  780. height: 300px;
  781. }
  782. /*Gray*/
  783. .m-grau {
  784. color: #8a8a8a;
  785. }
  786. .m-orange {
  787. color: #f7cd35;
  788. }
  789. /*Green*/
  790. .m-gruen {
  791. color: #6cc99f;
  792. }
  793. /*Red*/
  794. .m-rot {
  795. color: #e6766b;
  796. }
  797. /*Blue*/
  798. .m-blau {
  799. color: #0ea5e6;
  800. }
  801. /*White*/
  802. .m-white {
  803. color: #ffffff;
  804. }
  805. /* ==========================================================================
  806. Web Camera slide show CSS
  807. ========================================================================== */
  808. .mySlides {
  809. display: none;
  810. }
  811. .s-badge {
  812. background-color: #000000;
  813. color: #ffffff;
  814. display: inline-block;
  815. padding-left: 8px;
  816. padding-right: 8px;
  817. text-align: center;
  818. border-radius: 50%;
  819. height: 13px;
  820. width: 13px;
  821. padding: 0;
  822. cursor: pointer;
  823. }
  824. .s-border {
  825. border: 1px solid #ccc !important;
  826. }
  827. .s-transparent {
  828. background-color: transparent !important;
  829. }
  830. .s-display-bottommiddle {
  831. position: absolute;
  832. left: 50%;
  833. bottom: 0;
  834. transform: translate(-50%, 0%);
  835. -ms-transform: translate(-50%, 0%);
  836. }
  837. .s-large {
  838. font-size: 18px !important;
  839. }
  840. .s-section {
  841. margin-top: 16px !important;
  842. margin-bottom: 16px !important;
  843. }
  844. .s-container {
  845. padding: 0.01em 16px;
  846. }
  847. .s-center {
  848. text-align: center !important;
  849. }
  850. .s-right {
  851. float: right !important;
  852. cursor: pointer;
  853. }
  854. .s-left {
  855. float: left !important;
  856. cursor: pointer;
  857. }
  858. .s-content {
  859. max-width: 980px;
  860. margin: auto;
  861. }
  862. .s-display-container {
  863. position: relative;
  864. }
  865. .s-white,
  866. .s-hover-white:hover {
  867. color: #000000 !important;
  868. background-color: #ffffff !important;
  869. }
  870. .s-text-white,
  871. .s-hover-text-white:hover {
  872. color: #ffffff !important;
  873. }
  874. .s-text-gray,
  875. .s-hover-text-gray:hover {
  876. color: #d8d8d8 !important;
  877. }
  878. /* ==========================================================================*/
  879. /* Hide the list item that contains the link that should open and close the topnav on small screens */
  880. ul.topnav li.icon {
  881. display: none;
  882. }
  883. @media (max-width: 1550px) and (min-width: 1210px) {
  884. .container {
  885. width: 1200px !important;
  886. }
  887. .container .left {
  888. width: 450px !important;
  889. margin-right: 0.8em !important;
  890. }
  891. .container .right {
  892. width: 700px !important;
  893. }
  894. .graphs img {
  895. margin: 0.3em 0 !important;
  896. max-width: 100% !important;
  897. }
  898. img.small {
  899. max-width: 100% !important;
  900. }
  901. }
  902. @media (max-width: 1209px) and (min-width: 1010px) {
  903. .container {
  904. width: 1020px !important;
  905. } /* fixed sizes from 920px to 1020px */
  906. .container .left {
  907. width: 390px !important; /* fixed sizes from 290px to 390px */
  908. margin-right: 0.8em !important;
  909. }
  910. .container .right {
  911. width: 580px !important;
  912. }
  913. .graphs img {
  914. margin: 0.3em 0 !important;
  915. max-width: 100% !important;
  916. }
  917. img.small {
  918. max-width: 100% !important;
  919. }
  920. /*Makes small font size for history tables*/
  921. div.tablefix {
  922. font-size: 0.8em;
  923. }
  924. /*Makes small font size for NOAA Monthly Reports table*/
  925. div.noaatable {
  926. font-size: 0.8em;
  927. }
  928. /*Makes small font size for NOAA Monthly Reports in text.php*/
  929. pre.noaareport {
  930. font-size: 0.8em;
  931. font-family: monospace;
  932. }
  933. }
  934. @media (max-width: 1009px) {
  935. .container {
  936. width: 100% !important;
  937. }
  938. .container .left {
  939. width: 100% !important;
  940. margin: 0 !important;
  941. }
  942. .container .right {
  943. width: 100% !important;
  944. }
  945. .container .center {
  946. width: 100% !important;
  947. margin: 0 !important;
  948. }
  949. .container-fix {
  950. width: 100%;
  951. }
  952. .graphs img {
  953. margin: 0.2em 0 !important;
  954. max-width: 100% !important;
  955. }
  956. img.small {
  957. max-width: 100% !important;
  958. }
  959. .haelfte {
  960. width: 100% !important;
  961. }
  962. .card {
  963. margin: 1em 0;
  964. }
  965. /*Makes small font size for history tables*/
  966. div.tablefix {
  967. font-size: 0.6em;
  968. }
  969. /*Makes small font size for NOAA Monthly Reports table*/
  970. div.noaatable {
  971. font-size: 0.5em;
  972. }
  973. /*Makes small font size for NOAA Monthly Reports in text.php*/
  974. pre.noaareport {
  975. font-size: 0.4em;
  976. font-family: monospace;
  977. }
  978. header {
  979. width: 100%;
  980. box-sizing: border-box;
  981. padding: 0 1.5em;
  982. }
  983. header .h-left {
  984. display: inline-block;
  985. width: 100%;
  986. }
  987. header .h-right {
  988. display: none !important;
  989. }
  990. header nav {
  991. display: inline-block;
  992. width: 100%;
  993. font-size: 1.2em;
  994. margin: 0.5em 0 0 0;
  995. }
  996. header nav ul {
  997. list-style-type: none;
  998. margin: 0;
  999. padding: 0;
  1000. }
  1001. header nav li {
  1002. display: block;
  1003. padding: 0.1em 0;
  1004. margin: 0;
  1005. }
  1006. header nav li.active {
  1007. border-bottom: 3px solid #fff533;
  1008. }
  1009. header nav li.active a {
  1010. color: #fff;
  1011. }
  1012. /* When the screen is less than 680 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
  1013. ul.topnav li {
  1014. display: none;
  1015. }
  1016. ul.topnav li.icon {
  1017. float: left;
  1018. display: inline-block;
  1019. }
  1020. ul.topnav li.active {
  1021. border-bottom: 3px solid #fff533;
  1022. }
  1023. /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
  1024. ul.topnav.responsive {
  1025. position: relative;
  1026. }
  1027. ul.topnav.responsive li.icon {
  1028. left: 20px;
  1029. right: 0;
  1030. top: 0;
  1031. }
  1032. ul.topnav.responsive li {
  1033. float: none;
  1034. display: inline;
  1035. }
  1036. ul.topnav.responsive li a {
  1037. display: block;
  1038. text-align: left;
  1039. }
  1040. ul.topnav.responsive li.active {
  1041. display: block;
  1042. border-bottom: 3px solid #fff533;
  1043. }
  1044. ul.topnav.responsive li.active a {
  1045. display: block;
  1046. color: #fff;
  1047. }
  1048. }
  1049. /* ==========================================================================
  1050. Helper classes
  1051. ========================================================================== */
  1052. /*
  1053. * Image replacement
  1054. */
  1055. .ir {
  1056. background-color: transparent;
  1057. border: 0;
  1058. overflow: hidden;
  1059. /* IE 6/7 fallback */
  1060. *text-indent: -9999px;
  1061. }
  1062. .ir:before {
  1063. content: "";
  1064. display: block;
  1065. width: 0;
  1066. height: 150%;
  1067. }
  1068. /*
  1069. * Hide from both screenreaders and browsers: h5bp.com/u
  1070. */
  1071. .hidden {
  1072. display: none !important;
  1073. visibility: hidden;
  1074. }
  1075. /*
  1076. * Hide only visually, but have it available for screenreaders: h5bp.com/v
  1077. */
  1078. .visuallyhidden {
  1079. border: 0;
  1080. clip: rect(0, 0, 0, 0);
  1081. height: 1px;
  1082. margin: -1px;
  1083. overflow: hidden;
  1084. padding: 0;
  1085. position: absolute;
  1086. width: 1px;
  1087. }
  1088. /*
  1089. * Extends the .visuallyhidden class to allow the element to be focusable
  1090. * when navigated to via the keyboard: h5bp.com/p
  1091. */
  1092. .visuallyhidden.focusable:active,
  1093. .visuallyhidden.focusable:focus {
  1094. clip: auto;
  1095. height: auto;
  1096. margin: 0;
  1097. overflow: visible;
  1098. position: static;
  1099. width: auto;
  1100. }
  1101. /*
  1102. * Hide visually and from screenreaders, but maintain layout
  1103. */
  1104. .invisible {
  1105. visibility: hidden;
  1106. }
  1107. /*
  1108. * Clearfix: contain floats
  1109. *
  1110. * For modern browsers
  1111. * 1. The space content is one way to avoid an Opera bug when the
  1112. * `contenteditable` attribute is included anywhere else in the document.
  1113. * Otherwise it causes space to appear at the top and bottom of elements
  1114. * that receive the `clearfix` class.
  1115. * 2. The use of `table` rather than `block` is only necessary if using
  1116. * `:before` to contain the top-margins of child elements.
  1117. */
  1118. .clearfix:before,
  1119. .clearfix:after {
  1120. content: " ";
  1121. /* 1 */
  1122. display: table;
  1123. /* 2 */
  1124. }
  1125. .clearfix:after {
  1126. clear: both;
  1127. }
  1128. /*
  1129. * For IE 6/7 only
  1130. * Include this rule to trigger hasLayout and contain floats.
  1131. */
  1132. .clearfix {
  1133. *zoom: 1;
  1134. }
  1135. /* ==========================================================================
  1136. Media Queries
  1137. ========================================================================== */
  1138. @media only screen and (min-width: 35em) {
  1139. /* Style adjustments for viewports that meet the condition */
  1140. }
  1141. /* ==========================================================================
  1142. Print styles.
  1143. Inlined to avoid required HTTP connection: h5bp.com/r
  1144. ========================================================================== */
  1145. @media print {
  1146. * {
  1147. background: transparent !important;
  1148. color: #000 !important;
  1149. /* Black prints faster: h5bp.com/s */
  1150. box-shadow: none !important;
  1151. text-shadow: none !important;
  1152. }
  1153. a,
  1154. a:visited {
  1155. text-decoration: underline;
  1156. }
  1157. a[href]:after {
  1158. content: " (" attr(href) ")";
  1159. }
  1160. abbr[title]:after {
  1161. content: " (" attr(title) ")";
  1162. }
  1163. /*
  1164. * Don't show links for images, or javascript/internal links
  1165. */
  1166. .ir a:after,
  1167. a[href^="javascript:"]:after,
  1168. a[href^="#"]:after {
  1169. content: "";
  1170. }
  1171. pre,
  1172. blockquote {
  1173. border: 1px solid #999;
  1174. page-break-inside: avoid;
  1175. }
  1176. thead {
  1177. display: table-header-group;
  1178. /* h5bp.com/t */
  1179. }
  1180. tr,
  1181. img {
  1182. page-break-inside: avoid;
  1183. }
  1184. img {
  1185. max-width: 100% !important;
  1186. }
  1187. @page {
  1188. margin: 0.5cm;
  1189. }
  1190. p,
  1191. h2,
  1192. h3 {
  1193. orphans: 3;
  1194. widows: 3;
  1195. }
  1196. h2,
  1197. h3 {
  1198. page-break-after: avoid;
  1199. }
  1200. }
  1201. /* # sourceMappingURL=main.css.map */