body { background:#f2f2f2 }
html#withStage { height:200% }
/* Startseiten-Bühne */
#refreshDetector { display:none; }
#mainStage { display:block; height:40%; min-height:28em; max-height:60em; background:#bbbbbb; position:relative; z-index:90 }
#mainStageContent { position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden }
#mainStageSelector { z-index:92; position:absolute; left:2.5em; top:1.8em; right:5em }
#mainStageSelector li a em
{ visibility:hidden; font-style:normal; color:rgba(255,255,255,0.5); position:relative; top:-1px }
#mainStageSelector li a:hover em, #mainStageSelector li a:focus em
{ visibility:visible }
.stageSpruch h1 { font:inherit; font-size:1.9em; line-height:1.5; margin:0em; padding:0em 0em 0.4em 0em; color:white }
.stageSpruch p { margin:0em; padding:0.2em 0em 0em 0em; line-height:1.7; color:white }
#stageModeGame { display:none }
/* Bild des Tages */
#imageOfTheDayContainer { position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden }
#imageOfTheDayBg { position:absolute; left:0px; top:0px; width:100%; height:100% }
#imageOfTheDayBg { background-position:50% 50%; background-size:cover }
/* Es folgt real pro CSS (Crazy CSS Shit) */
/* Spannt den Inhaltsbereich auf. Unten 3.3em mehr Platz als nötig, da height=100% des Bildes ja nicht den weißen Rahmen einschließt.
Rechts 4em mehr Platz als nötig - 1em für weißen Rahmen, 3em für Abstand zwischen Bild und Text */
#imageOfTheDayContainer2
{ position:absolute; left:3em; right:7em; top:6.5em; bottom:10.3em }
/* Der eigentliche Container, der vertikal im Parent-Container zentriert ist. */
#imageOfTheDayContainer3
{ position:absolute; left:0px; width:100%; height:100%; max-height:413px; bottom:0em; top:0em; margin-top:auto; margin-bottom:auto; vertical-align:bottom; }
/* Das img-Tag muss direkt im Parent liegen, da darf kein Block dazwischen sein, sonst verliert es seine magischen Fähigkeiten
(Orientierung an Breite und Höhe des Parents). Daher wird der Text nicht in, sondern über den weißen Rahmen gelegt) */
img#imageOfTheDay { display:inline-block; max-width:50%; max-height:100%; left:0px; border:0.5em solid #ffffff; border-bottom-width:2.8em; vertical-align:bottom }
#imageOfTheDayFrame { position:relative }
/* Wenn das Bild (aufgrund zu geringer Bildschirmbreite) niedriger ist als 413px, von der Höhe aber 413px Platz ist, würde es im Rahmen nach oben rutschen
- der span "drückt" es aber wieder nach unten, da er immer die Maximalhöhe hat und vertical-align=bottom ist.
Einziger Nebeneffekt: Wenn das Bild die Maximalhöhe hat, liegt die Unterkante des Rahmens 3.3em unter der Unterkante des Parents; wenn das Bild kleiner
ist, schließt es aber bündig an der Unterkante ab. Daher ist es nicht genau zentriert, das macht aber nichts, sieht sogar besser aus mit diesem Effekt. */
#imageOfTheDayFrame span
{ display:inline-block; position:relative; width:0em; vertical-align:bottom; height:100% }
#imageOfTheDayFrame em { position:absolute; left:0.8em; bottom:0.9em; color:#222222; font-style:normal; white-space:nowrap; z-index:90 }
#imageOfTheDaySpruch { display:inline-block; width:50%; max-width:30em; vertical-align:bottom; margin-left:3em; margin-right:-5em; max-height:100%; overflow:hidden; margin-bottom:0.6em }
#mainLogoInStageDummy { display:none }
@keyframes welcomeImageOfTheDay
{
from { top:5em; opacity:0 }
to { top:0em; opacity:1 }
}
#imageOfTheDayFrame { animation:welcomeImageOfTheDay 0.5s; }
@media only screen and (max-width:600px) and (max-height:650px)
{
#mainStageSelector
{ top:0.2em; left:0.5em }
img#imageOfTheDay
{ display:none }
#imageOfTheDayFrame em
{ display:none }
#imageOfTheDayContainer2
{ left:1em; right:1em }
#imageOfTheDaySpruch
{ margin-left:0px; width:100% }
}
@media only screen and (max-width:600px) and (min-height:649px)
{
#imageOfTheDayContainer2
{ top:3em; right:1em; left:1em; bottom:5em }
#imageOfTheDayContainer3
{ max-height:100% }
#mainStageSelector
{ top:0.2em; left:0.5em }
img#imageOfTheDay
{ display:block; position:absolute; left:0px; bottom:0px; height:auto; width:50% }
#imageOfTheDayFrame
{ display:block; position:absolute; top:0em; left:0em; bottom:40%; right:1em; margin-top:3.3em }
#imageOfTheDayFrame span
{ display:block; position:absolute; left:0em; bottom:0em }
#imageOfTheDaySpruch
{ display:block; margin-left:0px; width:100%; position:absolute; top:60%; left:0em; padding-top:1em }
}
/* Runners Game */
#runnersGameContainer { display:none }
#runnersGameContainer { width:100%; position:absolute; height:100%; left:0px; top:0px; background: #afc6de; overflow:hidden }
#runnersGameContainer { background: rgb(114,157,201);
background: -moz-linear-gradient(top, rgba(114,157,201,1) 0%, rgba(161,192,222,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,157,201,1)), color-stop(100%,rgba(161,192,222,1)));
background: -webkit-linear-gradient(top, rgba(114,157,201,1) 0%,rgba(161,192,222,1) 100%);
background: -o-linear-gradient(top, rgba(114,157,201,1) 0%,rgba(161,192,222,1) 100%);
background: -ms-linear-gradient(top, rgba(114,157,201,1) 0%,rgba(161,192,222,1) 100%);
background: linear-gradient(to bottom, rgba(114,157,201,1) 0%,rgba(161,192,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#729dc9', endColorstr='#a1c0de',GradientType=0 );
}
#runnersGameContainer
#playground { width:100%; position:absolute; left:0px; top:0px; bottom:13em}
#playgroundBg { width:100%; position:absolute; left:0px; top:0px; bottom:13em}
#playgroundBg { background:url('../style/img/clouds.png') 0px 100% repeat }
#playgroundBg2 { width:100%; position:absolute; left:0px; top:0px; bottom:13em}
#playgroundBg2 { background:url('../style/img/clouds2.png') 0px 100% repeat }
#runner { position:absolute; left:20px; top:-30px; width:16px; height:28px; background:url('../style/img/runner.png') 0px 0px }
#playground .brick, #playground .bouncy
{ position:absolute; border-left: 2px solid #ababab; border-top: 2px solid #ababab; border-right: 2px solid #909090;
border-bottom: 2px solid #909090 }
#playground .brick { background:url('../style/img/games-brick.png') left top repeat #9a9a9a }
#playground .bouncy { background:url('../style/img/games-brick.png') 0% 50% repeat #9a9a9a }
#runnersGameSpruch { display:block; position:absolute; vertical-align:bottom; left:3em; right:3em; bottom:7.6em }
@media only screen and (max-width:600px)
{
#runnersGameSpruch
{ left:1em; right:1em; bottom:6em }
}
/* Timeline */
/* Basics */
#backToTop { position:static !important; padding-top:1.9em; padding-bottom: 2em; background:#f2f2f2 }
ul.timeline { margin:0px 0px 0px 0px; padding:0em 0em 0em 0em; display:block; list-style:none; line-height:1; border-bottom:2px solid #ffffff; background:#ffffff }
ul.timeline.withTopics { border-bottom:none }
.aroundmaincolumnspace + ul.timeline
{ margin-top:-1.7em }
li.timelineSection { margin:0px; padding:0px; display:block; list-style:none;
background:#f2f2f2;
position:relative; min-height:2em; padding:0px 14px 0px 8em }
li.timelineSection.first
{ border-top:2px solid #ffffff; padding-top:10px }
li.timelineSection.topics
{ padding-top:2.3em }
li.timelineSection.last
{ padding-bottom:10px }
li.timelineSection.yearHeader
{ border-top:2px solid #ffffff; padding-top:14px; height:3em }
/* li.timelineSection.even
{ background:#ededed }
li.timelineSection.recent
{ background:#e8e8e8 }*/
li.timelineSection p { margin:0em; padding:1.25em 3.4em 1.25em 0em !important; line-height:1.7em }
/* @keyframes welcomeRecent
{
from { margin-left:-13em; opacity:0.3 }
to { margin-left:0em; opacity:1 }
}
@-webkit-keyframes welcomeRecent
{
from { margin-left:-13em; opacity:0.3 }
to { margin-left:0em; opacity:1 }
}
.blog li.timelineSection.recent, .projects li.timelineSection.recent, .photos li.timelineSection.recent
{ animation:welcomeRecent 0.6s; -webkit-animation:welcomeRecent 0.6s }
@keyframes welcomeEven
{
from { margin-left:-9em; opacity:0.5 }
to { margin-left:0em; opacity:1 }
}
@-webkit-keyframes welcomeEven
{
from { margin-left:-9em; opacity:0.5 }
to { margin-left:0em; opacity:1 }
}
.blog li.timelineSection.even, .projects li.timelineSection.even, .photos li.timelineSection.even
{ animation:welcomeEven 0.5s; -webkit-animation:welcomeEven 0.5s }
@keyframes welcomeFirst
{
from { margin-left:-6em; opacity:0.7 }
to { margin-left:0em; opacity:1 }
}
@-webkit-keyframes welcomeFirst
{
from { margin-left:-6em; opacity:0.7 }
to { margin-left:0em; opacity:1 }
}
.blog li.timelineSection.even + li.timelineSection.first.last,
.projects li.timelineSection.even + li.timelineSection.first.last,
.photos li.timelineSection.even + li.timelineSection.first.last
{ animation:welcomeFirst 0.4s; -webkit-animation:welcomeFirst 0.4s }
@keyframes welcomeSecond
{
from { margin-left:-4em; opacity:0.8 }
to { margin-left:0em; opacity:1 }
}
@-webkit-keyframes welcomeSecond
{
from { margin-left:-4em; opacity:0.8 }
to { margin-left:0em; opacity:1 }
}
.blog li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last,
.projects li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last,
.photos li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last
{ animation:welcomeSecond 0.3s; -webkit-animation:welcomeSecond 0.3s }
@keyframes welcomeThird
{
from { margin-left:-2em; opacity:0.9 }
to { margin-left:0em; opacity:1 }
}
@-webkit-keyframes welcomeThird
{
from { margin-left:-2em; opacity:0.9 }
to { margin-left:0em; opacity:1 }
}
.blog li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last + li.timelineSection.first.last,
.projects li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last + li.timelineSection.first.last,
.photos li.timelineSection.even + li.timelineSection.first.last + li.timelineSection.first.last + li.timelineSection.first.last
{ animation:welcomeThird 0.2s; }
*/
li.timelineSection:first-child
{ border-top:none !important }
li.timelineSection h2, li.timelineSection h3
{ font:inherit; font-weight:normal; margin:0px;
position:absolute; left:0px; top:0px; width:8em; height:100% }
li.timelineSection.welcome h2
{ top:1.3em; left:0.2em }
li.timelineSection h2 span
{ display:block; font-size:1.3em; text-align:right; padding:0.55em 0.9em 0.5em 0.5em; color:#444444 }
li.timelineSection h3 em
{ display:block; font-size:1em; text-align:right; padding:1.15em 1.2em 0.8em 0.8em; color:#777777; font-style:normal; white-space:nowrap;
text-overflow:ellipsis; overflow:hidden }
li.timelineSection.topics h3 span
{ display:none }
li.timelineSection.first h2 span
{ margin-top:14px }
li.timelineSection.recent h2 span
{ margin-top:16px }
li.timelineSection.welcome h2 span
{ margin-top:0em }
li.timelineSection.yearHeader h2 span
{ margin-top:10px }
li.timelineSection.topics h3 em
{ padding-top:3.0em }
.timelineSection .row { display:block; position:relative; height:3.0em; word-break:break-all; vertical-align:top; line-height:1;
padding:0em; padding-bottom:2px; overflow:hidden; border-top:2px solid #f2f2f2 }
/* .timelineSection.even .row
{ border-top-color:#ededed }*/
.timelineSection .row .items
{ margin:0px; padding:0px 0px 4px 0px; list-style:none; display:inline-block; white-space:nowrap; height:3.0em; margin-right:-0.5em }
.timelineSection .space { display:inline-block; height:3.0em; padding-bottom:4px; width:1px; vertical-align:top }
.timelineSection .inlinemore
{ display:inline-block; padding:1.0em 0.7em 1.0em 0.7em; vertical-align:top; text-decoration:none !important; margin:0em 0em 2px 0.5em; border-bottom:2px solid #f2f2f2; color:#222222 !important }
.timelineSection .inlinemore:hover, .timelineSection .inlinemore:focus
{ background:#e4e4e4; border-bottom-color:#333333 }
.timelineSection .more { display:inline-block; position:relative; height:0em; width:100%; vertical-align:top }
.timelineSection .more div
{ display:block; position:absolute; right:0em; top:-6.0em; margin-top:-10px; padding:2px 0px; border-right:0.7em solid #f2f2f2; width:4em;
background: -moz-linear-gradient(left, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(242,242,242,0)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(left, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
background: -o-linear-gradient(left, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(left, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
background: linear-gradient(to right, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
}
.timelineSection.even .more div
{ border-right:0.7em solid #ededed;
background: -moz-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,237,237,0)), color-stop(100%,rgba(237,237,237,1)));
background: -webkit-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%);
background: linear-gradient(to right, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%);
}
.timelineSection .more a
{ display:block; height:2.0em; margin-top:-1px; padding:1.0em 0em 4px 0em; width:4em; text-align:right; vertical-align:top; text-decoration:none !important; color:#222222 !important;
}
/*.timelineSection .more a
{ display:block; position:absolute; height:1.7em; padding:0.6em 0.7em 0em 0.8em; right:0em; top:-4.5em; width:auto;
text-align:right; vertical-align:top; text-decoration:none !important;
background: #f2f2f2; border-left:0.2em solid #fbfbfb
}*/
.timelineSection .more a span
{ display:none }
.timelineSection .more a:hover, .timelineSection .more a:focus
{ outline: none; background:#e4e4e4; padding-right:0.7em; border-right:none }
.timelineSection .more a:hover span, .timelineSection .more a:focus span
{ display:inline }
.timelineSection .row .timelineItem
{ display:inline-block }
.timelineSection .wrapRow .timelineItem
{ float:left; max-width:100% }
/*.row .timelineItem { -webkit-animation-duration:0.5s; -webkit-animation-name: timelineItemAppear;
animation-duration:0.5s; animation-name: timelineItemAppear; }
@-webkit-keyframes timelineItemAppear
{
from { width: 50em; opacity:0 }
}
@keyframes timelineItemAppear
{
from { width: 50em; opacity:0 }
}*/
.timelineItem { position:relative; height:3.0em; white-space:nowrap; padding:0px 0px 4px 0px }
.timelineSection .timelineItem
{ width:16em }
.bigTimelineItem { position:relative; height:6.8em; padding-bottom:10px; z-index:10 }
.timelineItem a, .bigTimelineItem a, .timelineTopic a
{ display:block; margin-right:2px; color:#222222 !important;
text-decoration:none !important; overflow:hidden; background:white }
/* .timelineItem, .bigTimelineItem, li.timelineSection h2, li.timelineSection h3
{ transition:width 0.5s ease, max-width 0.5s ease; -webkit-transition:width 0.5s ease, max-width 0.5s ease }
li.timelineSection
{ transition:padding-left 0.5s ease, padding-right 0.5s ease;
-webkit-transition:padding-left 0.5s ease, padding-right 0.5s ease }*/
.timelineItem a:hover, .timelineItem a:focus, .timelineTopic a:hover, .timelineTopic a:focus
{ background:#e4e4e4 !important }
.even .timelineItem a:hover, .even .timelineItem a:focus, .even .timelineTopic a:hover, .even .timelineTopic a:focus
{ background:#e0e0e0 !important }
.timelineItem a:hover .helper, .timelineItem a:focus .helper
{ background:#333333 !important }
.timelineItem a { text-overflow:ellipsis; padding:1.0em 0.7em 1.0em 3.5em }
.timelineItem a .img { display:block; position:absolute; left:0px; top:0px; width:3.0em; bottom:4px; overflow:hidden; text-align:center; background:white }
.timelineItem a .img img
{ max-height:100%; left:-100px; right:-100px; display:block; position:absolute; top:0px; bottom:0px; margin:auto; opacity:1 }
.timelineItem .helper
{ display:block; background:black; left:0px; right:2px; bottom:2px; height:2px; position:absolute }
/* .timelineItem a { text-overflow:ellipsis; padding:0.7em 0.7em 0.7em 0.7em }
.timelineItem a .img { display:none }*/
.timelineTopic { position:relative; height:2.4em; white-space:nowrap; padding:0px 0px 2px 0px; float:left; max-width:100% }
.timelineTopic a { text-overflow:ellipsis; padding:0.7em 1em }
.timelineTopic .helper
{ display:block; background:black; left:0px; right:2px; top:0px; height:2px; position:absolute }
.bigTimelineItem a { position:absolute; left:0px; right:0px; bottom:0px; top:0px; border-left:none; background:white; margin-right:2px; border-bottom:2px solid black }
.bigTimelineItem a img
{ height:100%; margin:0em 1em 0px 0em; float:left; position:relative; z-index:24 }
.bigTimelineItem strong { font-weight:normal; font-size:1.3em; line-height:1.35; display:block; padding:0.6em 0.4em 0em 0em; max-height:6.0em; overflow:hidden }
.bigTimelineItem a:hover, .bigTimelineItem a:focus, .bigTimelineItem a:hover em, .bigTimelineItem a:focus em
{ background:#dadada !important; border-bottom-color:#333333 !important }
.timelineItem a:hover img, .timelineItem a:focus img, .bigTimelineItem a:hover img, .bigTimelineItem a:focus img
{ opacity:1 }
.timelineSection .wrapRow
{ position:relative; line-height:1 }
.timelineSection .wrapRow .items
{ margin:0px; padding:0px; display:block; list-style:none; position:relative }
.timelineSection .afterWrapRow
{ clear:both; height:0em }
.timelineSection .topRow
{ display:block; position:relative; padding:4px 0px }
/* padding-bottom:1.7em; padding-top:1.7em; margin-top:-10px; margin-bottom:-10px */
.timelineSection .topRow .items
{ margin:0px; padding:0px; display:block; list-style:none; position:relative }
.bigTimelineItem a em { display:block; position:absolute; left:0em; bottom:-2px; right:0em; text-align:right; border-bottom:2px solid black;
height:2.6em; z-index:22; font-style:normal;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.bigTimelineItem a>span { display:block; line-height:1.7em; color:#777777; padding-top:0.7em; padding-right:1em }
.bigTimelineItem a:hover em span, .bigTimelineItem a:focus em span
{ color:#000000; background:#dadada }
.bigTimelineItem a em span
{ display:block; position:absolute; right:0em; bottom:0em; padding:0.5em 0.8em 0.8em 0.8em; background: #ffffff }
.bigTimelineItem a:hover em, .bigTimelineItem a:focus em
{ background: -moz-linear-gradient(top, rgba(218,218,218,0) 0%, rgba(218,218,218,1) 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(218,218,218,0)), color-stop(100%,rgba(218,218,218,1))) !important;
background: -webkit-linear-gradient(top, rgba(218,218,218,0) 0%,rgba(218,218,218,1) 100%) !important;
background: -o-linear-gradient(top, rgba(218,218,218,0) 0%,rgba(218,218,218,1) 100%) !important;
background: -ms-linear-gradient(top, rgba(218,218,218,0) 0%,rgba(218,218,218,1) 100%) !important;
background: linear-gradient(to bottom, rgba(218,218,218,0) 0%,rgba(218,218,218,1) 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dadada', endColorstr='#dadada',GradientType=0 ) !important;
}
.timelineItem a.blog, .bigTimelineItem a.blog, .bigTimelineItem a.blog em, .timelineArea h2.blog
{ border-color: #57a662 }
.bigTimelineItem a.blog em
{ color: #57a662 }
.timelineItem a.blog .helper, .timelineTopic a.blog .helper
{ background: #57a662 }
.timelineItem a.projects, .bigTimelineItem a.projects, .bigTimelineItem a.projects em, .timelineArea h2.projects
{ border-color: #5fbcd3 }
.bigTimelineItem a.projects em
{ color: #5fbcd3 }
.timelineItem a.projects .helper, .timelineTopic a.projects .helper
{ background: #5fbcd3 }
.timelineItem a.photos, .bigTimelineItem a.photos, .bigTimelineItem a.photos em, .timelineArea h2.photos
{ border-color: #d35f5f }
.bigTimelineItem a.photos em
{ color: #d35f5f }
.timelineItem a.photos .helper, .timelineTopic a.photos .helper
{ background: #d35f5f }
.loadIndicator { position:absolute; display:block; background:url('../style/img/imgloader.gif') 50% 50% no-repeat; left:0px; width:100%; z-index:200 }
#preLoader { width:1px; heigth:1px; position:absolute; left:-1px; top:0px; background:url('../style/img/imgloader.gif') }
/* Timeline-Blöcke auf anderen Seiten (z.B. Tags) */
.timelineArea { position:relative }
ul.timelineBlock { display:block; list-style:none; vertical-align:top; margin:0em -2px 0em 0em; padding:0em 0em 1.7em 0em; line-height:1 }
ul.timelineBlock li { display:inline-block; list-style:none; vertical-align:top; margin:0em; width:33.33%; line-height:1 }
.timelineArea h2 { font:inherit; font-weight:normal; margin:0px; padding:0em 1.7em 0em 1.7em !important; border-left:2px solid #000000 }
.timelineArea h2 span
{ display:block; font-size:1.3em; margin:0em 0em 1.3em 0em; color:#444444; margin-left:-2px }
@media only screen and (max-width:1000px) {
ul.timelineBlock li
{ width:50% }
}
/* Extrem kleine Bildschirme -> Abstände minimieren */
@media only screen and (max-width:440px) {
ul.timeline { padding-top:0.3em }
li.timelineSection h2, li.timelineSection h3
{ width:6.3em }
li.timelineSection
{ padding-left:6em }
li.timelineSection.recent
{ padding-left:16px }
li.timelineSection.recent h2
{ display:none }
.aroundmaincolumnspace + ul.timeline
{ margin-top:0em }
.timelineArea { margin-left:0em !important; margin-right:0em !important }
.timelineArea h2
{ border-left:none; padding-left:2px !important }
ul.timelineBlock li
{ width:auto; display:block }
li.timelineSection h3 span
{ display:none }
li.timelineSection.welcome h2
{ position:static; width:auto; height:auto; margin-left:-5em; padding-top:0.5em }
li.timelineSection.welcome h2 span
{ text-align:left }
li.timelineSection.welcome p
{ margin-left:-4.2em; width:auto; padding-right:0.7em !important }
}
@media only screen and (min-width:800px)
{
.topRow .bigTimelineItem
{ max-width:48em }
}
@media only screen and (min-width:1000px)
{
.timelineSection .timelineItem
{ width:18.3em }
.topRow .bigTimelineItem
{ max-width:54.9em }
}
@media only screen and (min-width:901px)
{
li.timelineSection h2, li.timelineSection h3
{ width:13em }
li.timelineSection.topics h3 span
{ display:inline }
li.timelineSection
{ padding-left:13.5em }
li.timelineSection
{ padding-right:3em }
}
/* Sehr große Bildschirme -> Inhalt zentriert */
@media only screen and (min-width:1650px) {
.timelineSection .timelineItem
{ width:21em }
.topRow .bigTimelineItem
{ max-width:63em }
li.timelineSection
{ padding-left:19.7em; padding-right:19.7em }
li.timelineSection .aroundRow
{ max-width:86.6em; margin-left:auto; margin-right:auto }
li.timelineSection .row, li.timelineSection .topRow, li.timelineSection .wrapRow
{ margin-right:-18em }
li.timelineSection p
{ max-width:83.2em; margin-left:auto; margin-right:auto }
/* li.timelineSection
{ padding-left:21.4em }
li.timelineSection .row, li.timelineSection .topRow, li.timelineSection .wrapRow
{ max-width:83.2em; margin-left:auto }*/
li.timelineSection h2, li.timelineSection h3
{ left:0px; right:0px; width:auto; max-width:90em; padding-left:18em !important; padding-right:18em !important;
margin-left:auto !important; margin-right:auto !important }
li.timelineSection h2 span
{ position:absolute; top:0em; width:13.85em; left:-0.5em }
li.timelineSection h3 em
{ position:absolute; top:0em; width:18em; left:-0.65em }
.timelineArea h2
{ position:absolute; width:16em; left:-19.5em; margin:0em; padding-top:0.4em !important; border:none; text-align:right }
.timelineArea h2 span
{ margin-left:0px }
}