/* ========================================================================== Schicke Styles fuer L O E W E N M A E U L C H E N ========================================================================== * Basiert auf Phil Warehams Textpattern default theme => github.com/textpattern/textpattern-default-theme * * 10-11-2014, martin niggemann, weltrettung.org */ /* Farben ========================================================================== Hellgrau: #567371; Blau: #0088d0; Rot: #e2001a; Gelb: #fecc00; Dunkelbraun: #4e4c4c; Hellbraun: d6b58f; */ /* interim styles body { background: white; text-align: center; font-family: ComicJensWeb, sans-serif; line-height: 120%; } img { width: 450px; margin: 100px 0 0 0; border: 0; } h1 { color: #0088d0; font-weight: normal; font-size: 22px; padding: 40px 0 5px 0; line-height: 150%; } h2 { color: #e2001a; font-weight: normal; font-size: 22px; padding: 40px 0 5px 0; line-height: 150%; } p { color: #4e4c4c; font-size: 18px; padding: 0 0 5px 0; line-height: 140%; } a { color: #4e4c4c; text-decoration: none; border-bottom: 2px solid #4e4c4c; background: transparent; outline: 0; } a:hover { color: #0088d0; border-color: #0088d0; } */ /* Fonts ========================================================================== */ /* @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,700italic); @font-face { font-family: ComicJensWeb; src: url(https://fonts.netzallee.de/comicjens/comicjenspro-regular.eot); } @font-face { font-family: ComicJensWeb; src: url(https://fonts.netzallee.de/comicjens/comicjenspro-regular.ttf) format('opentype'); } */ @font-face { font-family: ComicJensWeb; src: url(comicjenspro-regular.woff) format('woff'); } /* WOFF fuer Firefox */ /* ========================================================================== Styling und Layout fuer alle Ausgabegeraete ========================================================================== */ /* Verkuerzte Version von Normalize.css ========================================================================== */ /* => necolas.github.com/normalize.css/ */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } p, pre { margin: 1em 0; } b, strong { font-weight: bold; } q { quotes: none; } q:before, q:after { content: ""; content: none; } sub, sup { /* 12px */ font-size: .85714285714286em; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; } table { margin-bottom: 1em; border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { vertical-align: top; text-align: left; } dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 2em; } dl dl, ul ul, ol ol { margin: 0; } menu, ol, ul { padding: 0 0 0 2em; } /* Firefox */ :focus { outline: none; } ::-moz-focus-inner { border: 0; } /* iOS only */ input[type=submit], input[type=button] { -webkit-appearance: none; } /* Text-Highlighting */ *::selection { background: #0088d0; color: white; } *::-moz-selection { background: #0088d0; color: white; } *::-webkit-selection { background: #0088d0; color: white; } /* Clearfix ========================================================================== */ /* Upgedatet um kollabierende Margins von Kind-Elementen in den meisten Faellen zu verhindern => nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix, header, nav ul, .container, footer, #paginator, #monthly-list { /* zoom IE7 fix */ *zoom: 1; } .clearfix:before, .clearfix:after, header:before, header:after, nav ul:before, nav ul:after, .container:before, .container:after, footer:before, footer:after, #paginator:before, #paginator:after, #monthly-list:before, #monthly-list:after { content: ""; display: table; } .clearfix:after, header:after, nav ul:after, .container:after, footer:after, #paginator:after, #monthly-list:after { clear: both; } /* ========================================================================== Styling und Layout fuer Screen (mobile first) ========================================================================== */ @media screen { /* Layout ========================================================================== */ body { margin: 0; background: #F1F3F3; } .wrapper { border-bottom: solid 1px #D5DCDC; padding-top: 2.5em; background: #fff; } header, .container, footer { margin: 0 auto; /* 960px / 1024px */ width: 93.75%; max-width: 86em; } header { padding: 1em 0; } header h1 { margin: 0; } header h3 { /* 14px margin top */ margin: .667em 0 0; color: #0088d0; } header img { width: 17em; } nav { border-top: solid 1px #EAEEED; border-bottom: double 1px #fff; background-color: white; } nav h1 { display: none; } nav ul { margin: 0 auto; padding: 0; max-width: 86em; list-style: none; list-style-image: none; } nav li { margin: 0 1px 0 0; } nav li:last-child { /* border-bottom: 0; */ } nav li:hover, nav li.active, nav li:active { /* background-color: #fecc00; -moz-border-radius: 1em; border-radius: 1em; */ } nav a { display: block; padding: .5em 3.125%; color: #4e4c4c; border-bottom: solid 4px white; } nav li:hover a, nav li.active a, nav li:active a { border-bottom: 4px solid #fecc00; } [role="article"] { margin-bottom: 2em; } [role="complementary"] { margin-bottom: 2em; padding-top: 2em; border-top: dashed 2px #ccc; } [role="search"] p { margin-top: 0; } footer { padding: .5em 0; font-family: ComicJensWeb, sans-serif; } /* Links ========================================================================== */ a { position: relative; text-decoration: none; color: #0088d0; -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5); } a:hover, a:active { outline: 0; } a:active { top: 1px; } a:focus { /* outline: thin dotted #06f; */ } header a { color: #0088d0; } header a:hover, header a:active { } [role="main"] a:hover, [role="main"] a:active, [role="complementary"] a:hover, [role="complementary"] a:active, footer a:hover, footer a:active { /* text-decoration: underline; color: #06f; */ } [role="main"] a:visited, [role="complementary"] a:visited, footer a:visited { } [role="main"] h1 a { color: #0088d0; } [role="main"] h1 a:visited { color: #0088d0; } [role="main"] h1 a:hover, [role="main"] h1 a:active { text-decoration: none; color: #0088d0; } /* Typografie ========================================================================== */ body { font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* 14px / 16px */ font-size: 0.875em; line-height: 1.5; color: #4e4c4c; } nav { font-family: ComicJensWeb, sans-serif; font-weight: normal; } h1 { font-family: ComicJensWeb, sans-serif; color: #0088d0; font-size: 2em; font-weight: normal; line-height: 1.214; letter-spacing: 0; /* 28px margin top/bottom */ margin: 1em 0 .5em; } h1:first-child { margin-top: 0; } h2 { font-family: ComicJensWeb, sans-serif; color: #e2001a; font-size: 1.5em; font-weight: normal; line-height: 1.333; /* 21px margin top/bottom */ margin: 1em 0 .667em; } h3 { font-family: ComicJensWeb, sans-serif; color: #e2001a; font-size: 1.286em; font-weight: normal; line-height: 1.444; font-weight: normal; font-style: normal; /* 16px margin top/bottom */ margin: .762em 0; } h4 { font-family: ComicJensWeb, sans-serif; color: #4e4c4c; font-size: 1.143em; font-weight: normal; margin: 0; } article h1 { text-transform: uppercase; letter-spacing: 1px; } [role="complementary"] h4 { font-size: .875em; } blockquote { /* 16px */ font-size: 1.143em; font-style: normal; margin: .875em 0 .875em 0; padding: 1px .875em; -moz-border-radius: .357em; border-radius: .357em; background: #fff6d3; } address { margin: 1em 0; } abbr[title], dfn[title] { border-bottom: dotted 1px; cursor: help; } dfn, mark, q, var { padding: 0 .214em; -moz-border-radius: .214em; border-radius: .214em; color: #4e4c4c; background: #fff6d3; } dfn, q { font-style: normal; } q q { padding: 0; } var { font-weight: normal; } pre, code, kbd, samp { font-family: Consolas, "Lucida Console", Monaco, monospace; } code, kbd, samp { /* 13px */ font-size: .929em; border: 1px solid #EAEEED; padding: 0 .231em; -moz-border-radius: .231em; border-radius: .231em; background: #F1F3F3; } pre { /* 13px */ font-size: .929em; overflow-x: auto; border: 1px solid #EAEEED; padding: 1em; -moz-border-radius: .357em; border-radius: .357em; background: #F1F3F3; tab-size: 4; } pre code { /* 13px */ font-size: 1em; border: 0; background: none; } small, figcaption, tfoot, .footnote { /* 12px */ font-size: .857em; } figcaption, tfoot, .footnote { color: #888; } figcaption { margin-top: .333em; font-style: normal; } /* Eingebettete Medien ========================================================================== */ img, video { max-width: 100%; height: auto; -moz-border-radius: 1em; border-radius: 1em; } figure { margin: 0; } img.align-left { float: left; margin: 1em 1em 1em 0; } img.align-right { float: right; margin: 1em 0 1em 1em; } img.align-center { display: block; margin: 1em auto; } svg:not(:root) { overflow: hidden; } /* corrects overflow displayed oddly in IE9 */ /* Tabellen ========================================================================== */ caption { font-style: normal; text-align: left; margin-bottom: .5em; } th, td { border-bottom: solid 1px #ccc; padding: .286em .5em .286em 0; } th:last-child, td:last-child { padding-right: 0; } thead th, thead td { border-bottom: solid 2px #ccc; } tfoot th, tfoot td { border-bottom: 0; padding: .333em .583em .333em 0; } tfoot:last-child { padding-right: 0; } /* Listen ========================================================================== */ dt { font-style: normal; } [role="main"] #article-list { list-style: none; margin: 0 0 2em 0; padding: 0; border-top: solid 1px #ccc; } #article-list li { border-bottom: solid 1px #ccc; padding-top: 1em; margin-bottom: 0; } /* Formulare mit Browser-Resets ========================================================================== */ form { margin: 0; } fieldset { margin: 0; border: 0; padding: 0; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; /* IE7 */ } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; /* IE7 */ } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #888; } input:-moz-placeholder, textarea:-moz-placeholder { color: #888; } button:invalid, a.button:invalid, input:invalid, input[type="button"]:invalid, input[type="reset"]:invalid, input[type="submit"]:invalid, textarea:invalid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* FF */ button::-moz-focus-inner, a.button::-moz-focus-inner, input::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, textarea::-moz-focus-inner { border: 0; padding: 0; } button:focus, a.button:focus, input:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, select:focus, textarea:focus { -webkit-box-shadow: 0 0 7px #0066ff; -moz-box-shadow: 0 0 7px #0066ff; box-shadow: 0 0 7px #0066ff; /* Opera */ z-index: 1; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="file"]:focus, input[type="file"]:active, input[type="radio"]:focus, input[type="radio"]:active, input[type="checkbox"]:focus, input[type="checkbox"]:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } textarea, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] { /* iOS */ -webkit-appearance: none; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* 12px */ font-size: .85714285714286em; text-align: left; border: solid 1px #ccc; padding: .5em; background: #fff; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 0; border-radius: 0; } input[type="color"] { padding: 0; height: 2.333em; } [role="complementary"] input[type="search"] { margin-right: 2px; width: 66.667%; display: inline-block; /* IE7 */ *display: inline; *zoom: 1; } textarea { min-height: 3em; /* verhindert vertikale Scrollbar in IE7-9 */ overflow: auto; vertical-align: top; resize: vertical; width: 100%; } select { font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* 12px */ font-size: .857em; text-align: left; border: solid 1px #ccc; padding: .5em; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea, select[size], select[multiple] { height: auto; } optgroup { font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-style: normal; font-weight: normal; color: #4e4c4c; } optgroup::-moz-focus-inner { border: 0; padding: 0; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; *height: 1em; *width: 1em; } /* IE7-9 */ button[disabled], input[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled], span.disabled { opacity: 1; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; user-select: none; border: solid 1px #d2d2d2 !important; text-shadow: none !important; color: #888888 !important; background: #eee !important; cursor: default !important; top: 0 !important; } .large input { width: 50%; min-width: 302px; } .large textarea { height: 156px; } .small input { width: 25%; min-width: 151px; } .small textarea { height: 5.5em; } /* Buttons + Pagination ========================================================================== */ button, [role] a.button, span.disabled, input[type="button"], input[type="reset"], input[type="submit"] { /* iOS */ -webkit-appearance: none; -webkit-background-clip: padding; -khtml-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; width: auto; overflow: visible; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /* 12px */ font-size: .857em; font-weight: normal; line-height: normal; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); cursor: pointer; border: solid 1px #e1a61a; -moz-border-radius: .357em; border-radius: .357em; padding: .5em 1em; display: inline-block; *display: inline; *zoom: 1; color: #4e4c4c; outline: 0; background-color: #ffda44; background-image: -khtml-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b)); /* Konqueror */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b)); /* Safari4+, Chrome */ background-image: -webkit-linear-gradient(#ffda44, #fabc2b); /* Safari5.1+, Chrome10+ */ background-image: -moz-linear-gradient(#ffda44, #fabc2b); /* Firefox3.6 */ background-image: -o-linear-gradient(#ffda44, #fabc2b); /* Opera11.10+ */ background-image: linear-gradient(#ffda44, #fabc2b); /* CSS3 Compliant */ } button:hover, [role] a.button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #ffe477; background-image: -khtml-gradient(linear, left top, left bottom, from(#ffe477), to(#fbcc5d)); /* Konqueror */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#fbcc5d)); /* Safari4+, Chrome */ background-image: -webkit-linear-gradient(#ffe477, #fbcc5d); /* Safari5.1+, Chrome10+ */ background-image: -moz-linear-gradient(#ffe477, #fbcc5d); /* Firefox3.6 */ background-image: -o-linear-gradient(#ffe477, #fbcc5d); /* Opera11.10+ */ background-image: linear-gradient(#ffe477, #fbcc5d); /* CSS3 Compliant */ } button:active, [role] a.button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { position: relative; top: 1px; color: #1a1a1a; background-color: #fabc2b; background-image: -khtml-gradient(linear, left top, left bottom, from(#fabc2b), to(#ffda44)); /* Konqueror */ background-image: -webkit-gradient(linear, left top, left bottom, from(#fabc2b), to(#ffda44)); /* Safari4+, Chrome */ background-image: -webkit-linear-gradient(#fabc2b, #ffda44); /* Safari5.1+, Chrome10+ */ background-image: -moz-linear-gradient(#fabc2b, #ffda44); /* Firefox3.6 */ background-image: -o-linear-gradient(#fabc2b, #ffda44); /* Opera11.10+ */ background-image: linear-gradient(#fabc2b, #ffda44); /* CSS3 Compliant */ } #paginator { margin-bottom: 2em; } #paginator .button { padding: .25em 1em; } #paginator a.button { text-decoration: none; color: #4e4c4c; } #paginator-l { float: left; } #paginator-r { float: right; } /* Google maps ========================================================================== */ #googlemap img, object, embed { max-width: none; } #map_canvas embed, #map_canvas img, #map_canvas object { max-width: none; } /* Plugins etc ========================================================================== */ /* ========================================================================== Ende @media screen ========================================================================== */ } /* ========================================================================== Zusaetzliches Layout fuer Screens mit 490px und darueber ========================================================================== */ @media only screen and (min-width: 35em) { nav ul { width: 93.75%; } nav li { float: left; /* border-right: solid 1px white; */ border-bottom: 0; } nav li:first-child { /* border-left: solid 1px white; */ } nav a { padding: .6em 1em .1em; } } /* ========================================================================== Zusaetzliches Layout fuer Screens mit 672px und darueber ========================================================================== */ @media only screen and (min-width: 48em) { [role="main"] { float: left; /* 592px / 960px */ width: 61.666%; } [role="complementary"] { float: right; border: 1px solid #e3e3e3; -moz-border-radius: .357em; border-radius: .357em; padding: 1em 1em 0; /* 290px / 960px */ width: 30.208%; background: #F1F3F3; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.286em; } blockquote { float: right; margin: 0 0 .875em .875em; /* 254px / 592px */ width: 42.905%; } } /* ========================================================================== Zusaetzliches Layout fuer Screens mit 1280px und darueber ========================================================================== */ @media only screen and (min-width: 80em) { body { /* 16px */ font-size: 100%; } header, nav ul, .container, footer { /* 1152px / 1280px */ width: 90%; } } /* ========================================================================== Zusaetzliches Layout fuer Screens mit 1680px und darueber ========================================================================== */ @media only screen and (min-width: 104.5em) { body { /* 18px */ font-size: 112.5%; } } /* ========================================================================== Fix fuer reponsive eingebettete Medien im IE8 ========================================================================== */ @media \0screen { img, video { width: auto; } } /* ========================================================================== Druckversion ========================================================================== */ @media print { /* Schwarz druckt schneller => sanbeiji.com/archives/953 */ * { color: black !important; text-shadow: none !important; background: transparent !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8pt; line-height: 1.5; margin: .5cm; padding: 2em 5em; } header { border-bottom: solid 1pt black; } footer { margin-top: 12pt; border-top: solid 1pt black; } /* Unwichtiges verstecken */ nav, audio, video, form, [role="complementary"], #paginator, #comments-form, .comments h4 a:last-child { display: none; } /* URLs von Links mitdrucken */ a { text-decoration: none; } a[href]:after { content: " (" attr(href) ")"; } h1 a[href]:after, h2 a[href]:after, h3 a[href]:after, sup a[href]:after, a[itemprop="discussionUrl"]:after, a[rel="tag"]:after { content: ""; } /* Abkuerzungen ausschreiben */ abbr[title]:after { content: " (" attr(title) ")"; } h1 { font-size: 32pt; line-height: 36pt; font-weight: normal; margin: .5em 0; } h2 { font-size: 18pt; line-height: 23pt; page-break-after: avoid; orphans: 3; widows: 3; margin: .667em 0; } h3 { font-size: 12pt; line-height: 17pt; page-break-after: avoid; orphans: 3; widows: 3; margin: .667em 0; } p { orphans: 3; widows: 3; } footer, figcaption, tfoot, small, .footnote { font-size: 6pt; } blockquote { border: solid 1pt black; padding: 0 8pt; page-break-inside: avoid; } pre { margin-bottom: 8pt; border: solid 1pt black; padding: 8pt; } .comments { page-break-inside: avoid; } pre, code, kbd, samp, var { font-family: "Courier New", Courier, monospace; } dfn, q, dt { font-style: italic; } img { max-width: 100% !important; page-break-inside: avoid; } img.align-left { float: left; margin: 1em 1em 1em 0; } img.align-right { float: right; margin: 1em 0 1em 1em; } img.align-center { display: block; margin: 1em auto; } audio { display: none; } figure { margin-bottom: 8pt; } figcaption { margin-top: 4pt; } ul { list-style: square; margin: 0 0 8pt 1.8em; } ol { list-style: decimal; margin: 0 0 8pt 1.8em; } dl { margin: 0 0 8pt 1.8em; } table { margin-bottom: 8pt; width: 100%; } caption { font-weight: bold; text-align: left; margin-bottom: 4pt; } /* Tabellenkopf ueber mehrere Seiten hinweg drucken => css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } thead th { border-top: solid 1pt black; } tr { page-break-inside: avoid; } th, td { border-bottom: solid 1pt black; padding: 4pt 8pt; } }