588 lines
11 KiB
CSS
588 lines
11 KiB
CSS
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;
|
|
}
|
|
|