body { margin: 0; color: $fg; background-color: $bg; } html { font-family: Sans-Serif; } a { color: $link-color; 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 .wagon { position: absolute; left: 3em; min-width: 6em; border: 1px solid $fg3; padding-left: 0.2em; padding-right: 0.2em; } .wagonorder .wagon ~ .wagon { border-top: none; } .wagonorder .firstclass { background-color: $firstclass-wagon-color; } .wagonorder .powercar { background-color: $powercar-wagon-color; } .wagonorder .wagon .material-icons { color: $fg2; } .wagonorder .wagon .direction { position: absolute; left: 0.2em; bottom: 0; right: 0; text-align: center; color: $fg2; } .wagonorder .nondestwagon { border-style: dashed; } .wagonorder .details { position: absolute; padding-top: 0.5ex; left: 10em; right: 0em; } .wagonorder .details .type { display: inline-block; width: 5em; color: $fg2; } .wagonorder .details .uicunknown { color: $fg3; } .wagonorder .details .uicexchange { margin-right: 0.2em; color: $fg3; } .wagonorder .details .uiccountry { margin-right: 0.2em; color: $fg3; } .wagonorder .details .uic5 { margin-right: 0.2em; color: $fg3; } .wagonorder .details .uic56 { color: $fg2; font-weight: bold; } .wagonorder .details .uic78 { margin-right: 0.2em; color: $fg2; font-weight: bold; } .wagonorder .details .uic78::before { content: "-"; } .wagonorder .details .uictype { margin-right: 0.2em; color: $fg2; font-weight: bold; } .wagonorder .details .uicno { color: $fg2; } .wagonorder .details .uiccheck { color: $fg3; } .wagonorder .details .uiccheck::before { content: "-"; } 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; border-bottom: 1px solid $li-border-color; background-color: $bg; } 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 .trainsubtype { font-weight: normal; font-size: 70%; position: relative; vertical-align: baseline; top: -0.6ex; left: -0.5ex; } 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:$fg; font-size: 2em; position:absolute; top:0px; left:2px; } div.app .replacement { color: $replacement-color; } div.app .replaced { color: $replaced-color; } div.app .sbahn { font-weight:bold; border-radius: 30px; padding:3px 6px 2px 6px; background-color: $sbahn-color; } div.app .bahn, div.app .fern, div.app .ext { font-weight:bold; border-radius: 5px; padding:3px 5px 2px 5px; } div.app .bahn { background-color: $bahn-color; } div.app .fern { background-color: $fern-color; } div.app .ext { border: 2px solid $bahn-color; } 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; color: $route-color; } div.app li .info { color: $info-color; 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; background-color: $bg; } div.app .moreinfo .mheader, div.app .moreinfo .mfooter { max-width: 50em; margin-left: auto; margin-right: auto; } 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: 0.5em; padding-left: 1em; padding-right: 1em; } div.app .moreinfo .dataline { font-size: 120%; width: 100%; display: flex; justify-content: space-between; margin-bottom: 1em; } div.app .moreinfo .dataline > div { width: 33%; } div.app .moreinfo .departure { text-align: right; } div.app .moreinfo .platform { text-align: center; } div.app .moreinfo .arrival { display: inline-block; text-align: right; } div.app .moreinfo .loading { text-align: center; width: 100%; color: #888888; } div.app .moreinfo .minfo { color: $info-color; } div.app .moreinfo .verbose { margin-bottom: 1em; } div.app .moreinfo .mroute .important-stop { color: $fg; } div.app .moreinfo .mroute .generic-stop { color: $fg2; } div.app .moreinfo .mroute .additional-stop { color: $additional-stop-color; } div.app .moreinfo .mroute .cancelled-stop { color: $cancelled-stop-color; } div.app li .dest { background-color: transparent; font-size:4em; position:absolute; top:0.62em; left:4em; bottom:0px; width: 70%; overflow: hidden; color: $fg; } div.app li.cancelled { background-color: $cancelled-bg-color; } div.app li .countdown { background-color: transparent; font-size: 3em; position: absolute; right: 5px; bottom: 2px; padding-left: 0.2em; color: $fg; } div.app li .header { color:$fg; 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: $delay-color; background-color: transparent; padding-right:7px; } div.app li .countdown .undelay { font-size:1em; color: $undelay-color; padding-right:7px; } div.app li .countdown .delaynorm { font-size:0.9em; color: $delaynorm-color; padding-right:7px; } div.app li .countdown .undelaynorm { font-size:0.9em; color: $undelaynorm-color; padding-right:7px; } div.app li .countdown .platform { font-weight: bold; } div.app li .countdown .changed-platform { color: $info-color; } div.app li .time { background-color: transparent; font-size:2.3em; position:absolute; right:5px; top:4px; padding-left: 0.2em; color: $fg; } div.app span.delayed { color: $delay-color; 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: $fg2; } div.about a { color: $link-color; 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: $fg2; } .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; } .disabledbutton { display: inline-block; vertical-align: baseline; border-radius: 4px; border: 1px solid #cccccc; box-shadow: none; padding: 0.9ex; margin-right: 1em; } .smallbutton { display: inline-block; vertical-align: baseline; border-radius: 4px; border: 1px solid #2e6da4; transition: background-color .3s; color: #fff; background-color: #337ab7; cursor: pointer; box-shadow: none; padding: 0.9ex; margin-right: 1em; } .smallbutton .material-icons, .disabledbutton .material-icons { display: block; float: left; margin-right: 0.5ex; } input, select, .button { display: inline-block; width: 60em; max-width: 100%; min-height: 1.8em; border-radius: 4px; color: $fg; background-color: $bg; border: 1px solid $bg1; 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 { transition: background-color .3s; 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, .smallbutton:active, .smallbutton:focus, .smallbutton: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: $fg1; background-color: $bg; border-color: $bg1; } .button-light:active, .button-light:focus, .button-light:hover { color: $fg1; background-color: $button-hover; border-color: $button-hover-border; } 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%; overflow: hidden; } nav a { color: #fff; } 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; background-color: #00838f; } 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%; }