html {
font-family: Sans-Serif;
}
div.displayclean {
background-color:#F8F8F8;
border-width:1px 2px;
width:100%;
margin-bottom: 5em;
}
div.displayclean > ul {
position:relative;
width:100%;
background-color:#F8F8F8;
list-style-type:none;
margin:0;
padding:0;
border-bottom: 1px solid #cccccc;
}
div.displayclean > ul > li {
min-height:7em;
background-color:#F8F8F8;
display:block;
border-width:1px 0;
border-style:solid;
border-color:#CCCCCC;
width:100%;
position:relative;
}
div.displayclean li .line {
color:#FFFFFF;
background-color:#666666;
font-weight:bold;
font-size: 3em;
padding:3px 8px 2px 5px;
position:absolute;
top:7px;
left:2px;
}
div.displayclean li .tram {
background-color: #CC0000;
}
div.displayclean li .sbahn {
background-color:#006E10;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
div.displayclean li .ubahn {
background-color:#001090;
}
div.displayclean li .bus {
background-color:#991199;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.displayclean li .route {
color:#444444;
font-size:2.1em;
position:absolute;
top:5px;
left:8em;
height: 1em;
width: 70%;
overflow: hidden;
}
div.displayclean li .info {
color:#ff0000;
font-size:2.1em;
position:absolute;
top:5px;
left:8em;
height: 1.1em;
width: 70%;
overflow: hidden;
z-index: 2;
}
div.displayclean li .moreinfo {
color:#000000;
font-size:2.1em;
position:absolute;
top:5px;
left:8em;
min-height: 1em;
width: 66%;
background-color: white;
border: 1px solid black;
z-index: 5;
visibility: hidden;
}
div.displayclean li:hover .moreinfo,
div.displayclean li .moreinfo:hover {
visibility: visible;
}
div.displayclean li .moreinfo .reason {
color: #ff0000;
}
div.displayclean li .dest {
color:#000000;
font-weight:bold;
font-size:4em;
position:absolute;
top:0.65em;
left:4.2em;
width: 70%;
z-index: 1;
overflow: hidden;
}
div.displayclean li .cancelled {
text-decoration: line-through;
text-decoration-color: red;
-moz-text-decoration-color: red;
}
div.displayclean li .countdown {
color: #000000;
background-color: #f8f8f8;
font-size: 3em;
position: absolute;
right: 5px;
bottom: 2px;
}
div.displayclean li .header {
color:#000000;
font-size:2em;
font-weight:bold;
padding-top:8px;
border-width-top:0;
display:block;
text-align:center;
}
div.displayclean li .head {
border-bottom-width:0;
}
div.displayclean li .countdown .delay {
font-size:1em;
color:#FF0000;
padding-right:7px;
}
div.displayclean li .countdown .undelay {
font-size:1em;
color:#006600;
padding-right:7px;
}
div.displayclean li .countdown .delaynorm {
font-size:0.9em;
color:#BB3333;
padding-right:7px;
}
div.displayclean li .countdown .undelaynorm {
font-size:0.9em;
color:#338833;
padding-right:7px;
}
div.displayclean li .countdown .platform {
font-weight: bold;
}
div.displayclean li .time {
color:#000000;
background-color: #f8f8f8;
font-size:2.4em;
position:absolute;
right:5px;
top:5px;
}
div.displayclean span.delayed {
color: #ff0000;
}
div.displaymulti {
border: 0.2em solid #000066;
width: 55em;
}
div.displaymulti div.display {
background-color: #0000ff;
color: white;
font-family: Sans-Serif;
font-weight: bold;
position: relative;
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
width: 55em;
height: 1.4em;
}
div.displaymulti div.display div {
overflow: hidden;
position: absolute;
height: 100%;
}
div.displaymulti div.time {
left: 0;
width: 6%;
font-size: 95%;
}
div.displaymulti div.train {
left: 5%;
width: 9%;
background-color: white;
color: #0000ff;
font-size: 95%;
}
div.displaymulti div.via {
left: 15%;
width: 35%;
}
div.displaymulti div.via span {
margin-right: 0.4em;
font-size: 80%;
}
div.displaymulti div.destination {
left: 50%;
width: 25%;
font-size: 120%;
}
div.displaymulti div.platform {
left: 75%;
width: 5%;
}
div.displaymulti div.info {
left: 80%;
width: 20%;
background-color: white;
color: #0000ff;
font-size: 80%;
line-height: 150%;
}
div.displaymulti div.separator {
border-bottom: 0.1em solid #000066;
}
div.displaysingle div.display {
background-color: #0000ff;
color: white;
font-family: Sans-Serif;
font-weight: bold;
position: relative;
margin-left: 1em;
margin-top: 1em;
float: left;
width: 28em;
height: 4.5em;
border: 0.7em solid #000066;
}
div.displaysingle div.display div {
overflow: hidden;
position: absolute;
}
div.displaysingle div.no_data {
top: 0.5em;
left: 1em;
font-size: 1.7em;
}
div.displaysingle div.time {
top: 0em;
left: 0em;
font-size: 1.7em;
}
div.displaysingle div.train {
left: 0em;
top: 1.8em;
}
div.displaysingle div.via {
top: 1.5em;
left: 5.8em;
width: 17em;
height: 1em;
}
div.displaysingle div.via span {
margin-right: 0.4em;
}
div.displaysingle div.destination {
top: 1.6em;
left: 3.6em;
width: 12em;
font-size: 1.6em;
height: 1.2em;
}
div.displaysingle div.platform {
top: 0em;
right: 0em;
font-size: 3em;
}
div.displaysingle div.info {
top: 0em;
left: 5.8em;
width: 16.5em;
height: 1em;
background-color: white;
color: #0000ff;
}
div.about {
font-family: Sans-Serif;
color: #666666;
}
div.about a {
color: #000066;
text-decoration: none;
}
div.error {
font-size: 150%;
font-weight: bold;
color: #ee0000;
}
pre {
margin-bottom: 2em;
}
span.optional,
span.notes {
color: #666666;
}
div.break {
height: 1em;
}
div.field {
width: 100%;
clear: both;
}
div.field div.desc {
float: left;
width: 14em;
text-align: right;
padding-right: 0.5em;
}
input, select {
border: 1px solid black;
}
div.notes {
margin-top: 4em;
}
div.notes ul {
margin-top: 1em;
}