html { font-family: Sans; min-height: 100%; background: -webkit-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; background: -moz-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; background: linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat; text-align:center; } body { color:#f3f3f3; text-align:left; vertical-align:top; padding-left: 8px; padding-right: 160px; padding-bottom: 8px; min-height: 800px; max-width: 1024px; margin: 0 auto; text-align:left; } a { color:#f3f3f3; text-decoration:none; border-bottom: 1px dotted white; } a:hover { border-bottom: 1px solid white; } img { border:0; } #logo { position: absolute; /* left:1024px; */ /* float: right; */ /* clear:both; */ /* display: inline-block; */ right: 8px; top: 64px; width: 136px; -webkit-animation: rise 1.5s 1 ease; -moz-animation: rise 1.5s 1 ease; -ms-animation: rise 1.5s 1 ease; -o-animation: rise 1.5s 1 ease; } #c3d2 { margin-left: 16px; text-align: center; } #c3d2 img { width: 98px; height: 32px; margin: 1em 32px 1em 16px; } header, article, footer { padding: 8px; } header { position: relative; height: 128px; padding-left: 144px; } header:after { content: ''; position: absolute; background:url("../images/logo-part1.svg") no-repeat; background-size: 128px; left: 0; top: 8px; width: 128px; height: 128px; -webkit-animation: spin 16s infinite linear; -moz-animation: spin 16s infinite linear; -ms-animation: spin 16s infinite linear; -o-animation: spin 16s infinite linear; } header a:before { content: ''; position: absolute; background:url("../images/logo-part2.svg") no-repeat; background-size: 128px; left: 0; top: 8px; width: 128px; height: 128px; -webkit-animation: rspin 8s infinite linear; -moz-animation: rspin 8s infinite linear; -ms-animation: rspin 8s infinite linear; -o-animation: rspin 8s infinite linear; } header a, header a:hover { vertical-align: middle; display: block; width:23em; margin-top:40px; border:0; } header h1, header h2 { font-weight: bold; letter-spacing: 1em; padding:0; margin:0; } header h1 { letter-spacing: 0.2em; text-transform: uppercase; } header h2 { letter-spacing: 0.15em; font-variant: small-caps; } header, aside { text-align: left; } aside { position:relative; float:right; text-align:right; margin-right: -152px; font-size: 0.8em; color: #ddd; } article { /* background:rgba(0,0,0,.1); */ margin-left:232px; position:relative; /* max-width:800px; */ padding: 16px 16px 16px 24px; } .summary { padding:0; margin:0; } .summary a { margin-left: -8px; border:0; } nav, article { display: inline-block; } nav div > span a { margin: 0 8px 0 8px; } nav a, nav a:hover { border:0; } nav div > span a:first-child { margin-left: 0; } nav a:hover span, nav div > span a:hover, .summary a:hover { border-top: 2px dotted white; border-bottom: 2px dotted white; } nav img { vertical-align:middle; margin: 8px 8px 8px 0; border:0; } nav { padding-top: 16px; position:absolute; } nav > div { margin-left: 32px; width: 224px; text-align:left; } date { float: right; clear: right; font-size: 0.8em; position:relative; margin-top: 0.2em; } footer { text-align: center; margin-right: -160px; font-size: 0.8em; } footer ul, aside ul { list-style: none; padding:0; } footer li { display:inline-block; } footer li:after { content: "000"; color: #ccc; } footer li:last-child:after { content: ""; } footer a, aside a, nav a, header a { border:0; } footer a:hover, aside a:hover { border-bottom:1px dashed white; } @media (max-width: 1008px) { aside { float:none; } nav { width: 100%; position: relative; display: block; -webkit-columns:auto; -moz-columns:auto; columns:auto; text-align:center; } nav > div { display: inline-block; margin-left:0; } nav, article, #c3d2 { margin-left: 0; } } @media (max-width: 612px) { body { padding-right: 8px; } aside { margin-right:8px; } footer { margin-right: -8px; } #logo { display:none; } } @media (max-width: 912px) { nav img { width:32px; height:32px; } #c3d2 img { width: 49px; height: 16px; } } @media (max-width: 480px) { nav img { width:64px; height:64px; } #c3d2 img { width: 98px; height: 32px; } } /** * Animations inspired by: * http://www.csszengarden.com/215/215.css?v=8may2013 **/ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rspin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes rspin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ms-keyframes rspin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes rspin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rspin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rise { from { top: 150%; } to { top: 64px; } } @-moz-keyframes rise { from { top: 150%; } to { top: 64px; } } @-ms-keyframes rise { from { top: 150%; } to { top: 64px; } } @-o-keyframes rise { from { top: 150%; } to { top: 64px; } } @keyframes rise { from { top: 150%; } to { top: 64px; } } /* Fahrplan */ .schedule { border-collapse: collapse; } .schedule th, .schedule td { border-width: 1px; border-style: solid; border-color: rgba(0.5, 0.5, 0.5, 0.2); vertical-align: top; margin: 0; padding: 0px 0.4em; } .schedule h2 { font-size: 100%; } .schedule .cell-time p { color: #f3f3f3; font-weight: normal; } .schedule .event-wrapper { background: none; } .schedule .cell-height1 { height: 40px; } .schedule .cell-height2 { height: 77px; } .schedule .cell-height3 { height: 117px; } .schedule .cell-height4 { height: 157px; } .schedule .cell-height5 { height: 197px; } .schedule .cell-height6 { height: 237px; } .schedule .cell-height7 { height: 277px; } .schedule .cell-height8 { height: 317px; } .schedule .cell-height9 { height: 357px; } .schedule .cell-height10 { height: 397px; } .schedule .cell-height11 { height: 437px; } .schedule .cell-height12 { height: 477px; } .schedule .cell-height13 { height: 517px; } .schedule .cell-height14 { height: 557px; } .schedule .cell-height15 { height: 597px; } .schedule .cell-height16 { height: 637px; } .schedule .cell-height17 { height: 677px; } .schedule .cell-height18 { height: 717px; } .schedule .cell-height19 { height: 757px; } .schedule .cell-height20 { height: 797px; } .schedule .event.track-default { border-color: #156dd0; } .schedule .event.track-default div.event-header { } .schedule .event.track-default div.event-header a { color: #fff; } .schedule .event.track-gesellschaft { border-color: #156dd0; } .schedule .event.track-gesellschaft div.event-header { } .schedule .event.track-gesellschaft div.event-header a { color: #fff; } .schedule .event.track-junghacker { border-color: #156dd0; } .schedule .event.track-junghacker div.event-header { } .schedule .event.track-junghacker div.event-header a { color: #fff; } .schedule .event.track-technik { border-color: #156dd0; } .schedule .event.track-technik div.event-header { } .schedule .event.track-technik div.event-header a { color: #fff; }