main.css 26 KB

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