body { margin: 0; } html { font-family: Sans-Serif; } a { color: #000099; text-decoration: none; } p, div.about, div.input-field, div.notes { max-width: 94%; margin-left: auto; margin-right: auto; } p { text-align: justify; } div.content { width: 100%; margin: 0; } div.app { border-width:1px 2px; width:100%; margin-bottom: 5em; } div.app > ul { position:relative; width:100%; list-style-type:none; margin:0; padding:0; } div.app > ul > li { min-height:7em; display:block; width:100%; position:relative; cursor: pointer; } div.appdark > ul > li { border-bottom: 1px solid #999999; background-color: #000000; } div.applight > ul > li { border-bottom: 1px solid #999999; background-color: #ffffff; } div.app li .line { font-size: 2.7em; position:absolute; bottom:5px; left:2px; max-width: 6em; max-height: 3ex; overflow: hidden; } div.app li .line .trainno { font-weight: normal; } div.app li .line .trainno_sub { font-weight: normal; font-size: 0.6em; text-align: center; margin-top: -0.2em; } div.app li .sbahn .trainno_sub { font-weight: normal; font-size: 0.5em; text-align: center; margin-top: -0.25em; } div.app li .lineinfo { color:#000000; font-size: 2em; position:absolute; top:0px; left:2px; } div.app .replacement { color: #006600; } div.app .replaced { color: #660000; } div.app .sbahn { font-weight:bold; border-radius: 30px; padding:3px 6px 2px 6px; } div.applight .sbahn { background-color:#95d79f; } div.appdark .sbahn { background-color:#115511; } div.app .bahn, div.app .fern, div.app .ext { font-weight:bold; border-radius: 5px; padding:3px 5px 2px 5px; } div.applight .bahn { background-color: #eeeeee; } div.appdark .bahn { background-color: #333333; } div.applight .fern { background-color: #ffdddd; } div.appdark .fern { background-color: #551111; } div.applight .ext { background-color: #ffdddd; border: 2px solid #ff6666; } div.appdark .ext { background-color: #551111; border: 2px solid #993333; } div.app li .route { background-color: transparent; font-size:2.1em; position:absolute; top:1px; left:7.7em; height: 1.2em; width: 70%; overflow: hidden; } div.applight li .route { color:#444444; } div.appdark li .route { color:#bbbbbb; } div.app li .info { color:#ff0000; background-color: transparent; font-size:2.1em; position:absolute; top:1px; left:7.7em; height: 1.2em; width: 70%; overflow: hidden; } div.app .moreinfo { font-size:2.1em; position:fixed; top:0em; left:0; right:0; bottom:0em; z-index: 5; overflow: auto; cursor: default; } div.app .moreinfo .mheader, div.app .moreinfo .mfooter { max-width: 50em; margin-left: auto; margin-right: auto; } div.applight .moreinfo { background-color: #ffffff; } div.appdark .moreinfo { background-color: #000000; } div.app .collapsed-moreinfo { display: none; } div.app .expanded-moreinfo { display: block; } div.app .moreinfo .mheader { text-align: center; font-size: 120%; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; padding-right: 1em; border-bottom: 0.1em dashed #cccccc; } div.app .moreinfo .mfooter { padding-top: 1em; padding-left: 1em; padding-right: 1em; } div.app .moreinfo .reason, div.app .moreinfo .minfo { color: #ff0000; } div.app .moreinfo .verbose { margin-bottom: 0.6em; } div.app .moreinfo .timeinfo { margin-bottom: 0.6em; } div.applight .moreinfo .mroute .important-stop { color: #000000; } div.appdark .moreinfo .mroute .important-stop { color: #ffffff; } div.applight .moreinfo .mroute .generic-stop { color: #555555; } div.appdark .moreinfo .mroute .generic-stop { color: #999999; } div.applight .moreinfo .mroute .additional-stop { color: #009900; } div.appdark .moreinfo .mroute .additional-stop { color: #009900; } div.applight .moreinfo .mroute .cancelled-stop { color: #cc0000; } div.appdark .moreinfo .mroute .cancelled-stop { color: #cc0000; } div.app li .dest { background-color: transparent; font-size:4em; position:absolute; top:0.62em; left:4em; bottom:0px; width: 70%; overflow: hidden; } div.applight li .dest { color:#000000; } div.appdark li .dest { color:#ffffff; } div.applight li.cancelled { background-color: #ffe7d0; } div.appdark li.cancelled { background-color: #512f00; } div.app li .countdown { background-color: transparent; font-size: 3em; position: absolute; right: 5px; bottom: 2px; padding-left: 0.2em; } div.applight li .countdown { color: #000000; } div.appdark li .countdown { color: #ffffff; } div.app li .header { color:#000000; font-size:2em; font-weight:bold; padding-top:8px; border-width-top:0; display:block; text-align:center; } div.app li .head { border-bottom-width:0; } div.app li .countdown .delay { font-size:1em; color:#FF0000; background-color: transparent; padding-right:7px; } div.app li .countdown .undelay { font-size:1em; color:#006600; padding-right:7px; } div.app li .countdown .delaynorm { font-size:0.9em; color:#BB3333; padding-right:7px; } div.app li .countdown .undelaynorm { font-size:0.9em; color:#338833; padding-right:7px; } div.app li .countdown .platform { font-weight: bold; } div.app li .countdown .changed-platform { color:#ff0000; } div.app li .time { background-color: transparent; font-size:2.3em; position:absolute; right:5px; top:4px; padding-left: 0.2em; } div.applight li .time { color:#000000; } div.appdark li .time { color:#ffffff; } div.app span.delayed { color: #ff0000; background-color: transparent; } /* ... */ div.infoscreen { border-width:1px 2px; width:100%; margin-bottom: 5em; } div.infoscreen > ul { position:relative; width:100%; list-style-type:none; margin:0; padding:0; } div.infoscreen > ul > li { min-height:7em; display:block; width:100%; position:relative; } div.infoscreendark > ul > li { border-bottom: 1px solid #999999; background-color: #000000; } div.infoscreenlight > ul > li { border-bottom: 1px solid #999999; background-color: #ffffff; } div.infoscreen li .line { font-size: 2.7em; position:absolute; bottom:5px; left:2px; max-width: 6em; max-height: 3ex; overflow: hidden; } div.infoscreen li .line .trainno { font-weight: normal; } div.infoscreen li .line .trainno_sub { font-weight: normal; font-size: 0.6em; text-align: center; margin-top: -0.2em; } div.infoscreen li .sbahn .trainno_sub { font-weight: normal; font-size: 0.5em; text-align: center; margin-top: -0.25em; } div.infoscreen li .lineinfo { color:#000000; font-size: 2em; position:absolute; top:0px; left:2px; } div.infoscreen .replacement { color: #006600; } div.infoscreen .replaced { color: #660000; } div.infoscreen li .sbahn { font-weight:bold; border-radius: 30px; padding:3px 6px 2px 6px; } div.infoscreenlight li .sbahn { background-color:#95d79f; } div.infoscreendark li .sbahn { background-color:#115511; } div.infoscreen li .bahn, div.infoscreen li .fern, div.infoscreen li .ext { font-weight:bold; border-radius: 5px; padding:3px 5px 2px 5px; } div.infoscreenlight li .bahn { background-color: #eeeeee; } div.infoscreendark li .bahn { background-color: #333333; } div.infoscreenlight li .fern { background-color: #ffdddd; } div.infoscreendark li .fern { background-color: #551111; } div.infoscreenlight li .ext { background-color: #ffdddd; border: 2px solid #ff6666; } div.infoscreendark li .ext { background-color: #551111; border: 2px solid #993333; } div.infoscreen li .route { background-color: transparent; font-size:2.1em; position:absolute; top:1px; left:7.7em; height: 1.2em; width: 70%; overflow: hidden; } div.infoscreenlight li .route { color:#444444; } div.infoscreendark li .route { color:#bbbbbb; } div.infoscreen li .info { color:#ff0000; background-color: transparent; font-size:2.1em; position:absolute; top:1px; left:7.7em; height: 1.2em; width: 70%; overflow: hidden; } div.infoscreen li .moreinfo { font-size:2.1em; position:fixed; top:0em; left:0em; right:0em; bottom:0em; z-index: 5; overflow: auto; } div.infoscreenlight li .moreinfo { background-color: #ffffff; } div.infoscreendark li .moreinfo { background-color: #000000; } div.infoscreen li .collapsed-moreinfo { display: none; } div.infoscreen li .expanded-moreinfo { display: block; } div.infoscreen li .moreinfo .mheader { text-align: center; font-size: 120%; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; padding-right: 1em; border-bottom: 0.1em dashed #cccccc; } div.infoscreen li .moreinfo .mfooter { padding-top: 1em; padding-left: 1em; padding-right: 1em; } div.infoscreen li .moreinfo .reason, div.infoscreen li .moreinfo .minfo { color: #ff0000; } div.infoscreen li .moreinfo .timeinfo { margin-bottom: 0.6em; } div.infoscreen li .moreinfo .mroute { margin-bottom: 0.6em; } div.infoscreenlight li .moreinfo .mroute .separator { color: #999999; } div.infoscreendark li .moreinfo .mroute .separator { color: #999999; } div.infoscreenlight li .moreinfo .mroute .important-stop { color: #000000; } div.infoscreendark li .moreinfo .mroute .important-stop { color: #ffffff; } div.infoscreenlight li .moreinfo .mroute .generic-stop { color: #555555; } div.infoscreendark li .moreinfo .mroute .generic-stop { color: #999999; } div.infoscreenlight li .moreinfo .mroute .additional-stop { color: #009900; } div.infoscreendark li .moreinfo .mroute .additional-stop { color: #009900; } div.infoscreenlight li .moreinfo .mroute .cancelled-stop { color: #cc0000; } div.infoscreendark li .moreinfo .mroute .cancelled-stop { color: #cc0000; } div.infoscreen li .dest { background-color: transparent; font-size:4em; position:absolute; top:0.62em; left:4em; bottom:0px; width: 70%; overflow: hidden; } div.infoscreenlight li .dest { color:#000000; } div.infoscreendark li .dest { color:#ffffff; } div.infoscreenlight li.cancelled { background-color: #ffe7d0; } div.infoscreendark li.cancelled { background-color: #512f00; } div.infoscreen li .countdown { background-color: transparent; font-size: 3em; position: absolute; right: 5px; bottom: 2px; padding-left: 0.2em; } div.infoscreenlight li .countdown { color: #000000; } div.infoscreendark li .countdown { color: #ffffff; } div.infoscreen li .header { color:#000000; font-size:2em; font-weight:bold; padding-top:8px; border-width-top:0; display:block; text-align:center; } div.infoscreen li .head { border-bottom-width:0; } div.infoscreen li .countdown .delay { font-size:1em; color:#FF0000; background-color: transparent; padding-right:7px; } div.infoscreen li .countdown .undelay { font-size:1em; color:#006600; padding-right:7px; } div.infoscreen li .countdown .delaynorm { font-size:0.9em; color:#BB3333; padding-right:7px; } div.infoscreen li .countdown .undelaynorm { font-size:0.9em; color:#338833; padding-right:7px; } div.infoscreen li .countdown .platform { font-weight: bold; } div.infoscreen li .countdown .changed-platform { color:#ff0000; } div.infoscreen li .time { background-color: transparent; font-size:2.3em; position:absolute; right:5px; top:4px; padding-left: 0.2em; } div.infoscreenlight li .time { color:#000000; } div.infoscreendark li .time { color:#ffffff; } div.infoscreen span.delayed { color: #ff0000; background-color: transparent; } /* ... */ div.displaymulti { border: 0.2em solid #000066; width: 55em; margin-left: auto; margin-right: auto; } 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; } ul.ui-autocomplete { max-height: 20em; overflow-x: hidden; overflow-y: auto; } div.geolocation { text-align: center; } div.candidatestatus { text-align: center; color: #999999; } div.candidatelist a { display: block; text-decoration: none; font-size: 1.4em; padding-top: 0.3em; text-align: center; border-bottom: 1px solid #999999; } div.candidatelist a .distance:after { content: " km"; } div.candidatelist a .distance { font-size: 0.6em; color: #999999; padding-top: 0.2em; padding-bottom: 0.3em; } div.about { margin-top: 2em; font-family: Sans-Serif; color: #666666; } div.about a { color: #000066; text-decoration: none; } .notice { padding: 15px; margin-bottom: 20px; border: 1px solid #bce8f1; border-radius: 4px; color: #31708f; background-color: #d9edf7; margin-left: auto; margin-right: auto; } .warning { padding: 15px; margin-bottom: 20px; border: 1px solid #faebcc; border-radius: 4px; color: #8a6d3b; background-color: #fcf8e3; margin-left: auto; margin-right: auto; } .error { padding: 15px; margin-bottom: 20px; border: 1px solid #ebccd1; border-radius: 4px; color: #a94442; background-color: #f2dede; margin-left: auto; margin-right: auto; } .error .errcode { font-family: Monospace; margin-top: 2em; font-size: 100%; color: #aaaaaa; } .container { max-width: 40em; margin-left: auto; margin-right: auto; } pre { margin-bottom: 2em; } span.optional, span.notes { color: #666666; } .moresettings-header { cursor: pointer; } .moresettings-header-collapsed:before { content: "▹ " } .moresettings-header-expanded:before { content: "▿ " } .moresettings-collapsed { display: none; } .moresettings-expanded { display: block; } .developers-header { cursor: pointer; } .developers-header-collapsed:before { content: "▹ " } .developers-header-expanded:before { content: "▿ " } .developers-collapsed { display: none; } .developers-expanded { display: block; } div.break { height: 1em; } div.field { margin-top: 0.3em; margin-bottom: 0.6em; } input, select, .button { display: inline-block; width: 50em; max-width: 100%; min-height: 1.8em; border-radius: 4px; color: #000; background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); font-size: 90%; text-align: center; vertical-align: middle; } input[type="text"] { width: 49em; padding-left: 0.5em; padding-right: 0.5em; text-align: left; box-sizing: border-box; } select { min-height: 2em; } input[type="checkbox"] { width: 1.5em; box-shadow: none; } input[type="submit"], .button { color: #fff; background-color: #337ab7; border-color: #2e6da4; cursor: pointer; box-shadow: none; padding-top: 0.9ex; padding-bottom: 0.9ex; } .button { padding-top: 1.1ex; padding-bottom: 0; } input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, .button:active, .button:focus, .button:hover { color: #fff; background-color: #286090; border-color: #204d74; } input[type="submit"]:active, .button.active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } .button-light { color: #333; background-color: #fff; border-color: #ccc; } .button-light:active, .button-light:focus, .button-light:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } div.notes { margin-top: 2em; } div.notes ul { margin-top: 1em; }