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; } .wagonorder { position: relative; width: 100%; height: 100ex; } .wagonorder .section { position: absolute; left: 1em; width: 2em; text-align: center; } .wagonorder .direction { position: absolute; left: 10em; } .wagonorder .wagon { position: absolute; left: 3em; min-width: 6em; border: 1px solid #999999; padding-left: 0.2em; padding-right: 0.2em; } .wagonorder .wagon ~ .wagon { border-top: none; } .wagonorder .details { position: absolute; left: 11em; right: 0em; } .wagonorder .details .firstclass { display: inline-block; width: 0.8em; text-align: center; color: #ffffff; background-color: #666666; border: 1px solid #666666; } .wagonorder .details .secondclass { display: inline-block; width: 0.8em; text-align: center; color: #666666; border: 1px solid #666666; } .wagonorder .details .noclass { display: inline-block; width: 0.8em; } .wagonorder .details .type { display: inline-block; width: 5em; color: #666666; } 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; 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 .loading { text-align: center; width: 100%; color: #888888; } 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; } 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: 60em; 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: 60em; 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: 59em; 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; } div.app { max-width: 60em; margin-left: auto; margin-right: auto; } .navbar-fixed { position: relative; z-index: 997; } .navbar-fixed nav { position: fixed; } nav { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); } nav { width: 100%; } nav .nav-wrapper { position: relative; height: 100%; } nav i, nav i.material-icons { display: block; font-size: 24px; } nav .brand-logo { position: absolute; display: inline-block; padding-left: 0.5rem; } nav ul { margin: 0; padding-left: 0; list-style-type: none; } nav ul li { transition: background-color .3s; float: left; padding: 0; list-style-type: none; } nav ul a { transition: background-color .3s; font-size: 1rem; color: #fff; display: block; padding: 0 15px; cursor: pointer; } @media only screen and (max-width: 600px) { div.app > ul > li { font-size: 35%; } div.navbar-fixed { height: 56px; } .moreinfo { top: 56px; } nav { height: 56px; line-height: 56px; } nav .brand-logo { font-size: 1.5rem; } nav .nav-wrapper i { height: 56px; line-height: 56px; } } @media only screen and (min-width: 600px) { div.app > ul > li { font-size: 40%; } div.navbar-fixed { height: 64px; } .moreinfo { top: 64px; } nav { height: 64px; line-height: 64px; } nav .brand-logo { font-size: 2.1rem; } nav .nav-wrapper i { height: 64px; line-height: 64px; } } div.app .moreinfo { font-size: 100%; } .content { }