/*
* R.Sepp Voigt
* Copyright (C) 1988 rsv.me
*
* monitor.css?v=251119
*
*/
/* Grafiken
--------------------------------------------------------- */
:root {
--h_img: url('data:image/svg+xml,');
--transport_bus: url('data:image/svg+xml,');
--transport_plusbus: url('data:image/svg+xml,');
--transport_tram: url('data:image/svg+xml,');
--transport_train: url('data:image/svg+xml,');
--transport_metropolitan: url('data:image/svg+xml,');
--transport_ferry: url('data:image/svg+xml,');
--transport_overhead-railway: url('data:image/svg+xml,');
--transport_lift: url('data:image/svg+xml,');
--transport_alita: url('data:image/svg+xml,');
--transport_taxi: url('data:image/svg+xml,');
--transport_busOnRequest: url('data:image/svg+xml,');
--transport_u_t: url('data:image/svg+xml,');
/**/
--route_changes: url('data:image/svg+xml,');
/**/
--occupancy_seats_many: url('data:image/svg+xml,');
--occupancy_seats_few: url('data:image/svg+xml,');
--occupancy_seats_noSeats: url('data:image/svg+xml,');
--occupancy_seats_unknown: url('data:image/svg+xml,');
/**/
--options_wayToStation: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAA7CAYAAAAJvMhYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFO0lEQVRo3sVZXYhVVRT+vsswDCEigw9ik4kPYSWDSpiZSU1WFDVK9quG9KAV0g9lpYSss5igtF8SyUItM+3HMJUQsdQp1DSszMQsZBDzQcQHEQmRYb5e9oXr9d7zd8+MCwbOPWftvT++vfZe61vDKIrQqLn7EEmLAMwGMDy8Pk5yDYC3zex83rlLBYAbJelXAK9UgAOAkZJM0h53H3ZFALp7k6QNAEbFuLVLWnelGJwOYHwKvw537xhwgJLu7A/fIhkc2k++hQE8mdaR5L8DDpDk5pSufQA2DThAM+sGsDGF60ozO3xF7kGScwBsjXFZT/LZ3PMXlElKAKZLmgVgTNjSQyTXmNnWhggoAmAF0MEA2gD8B+CEmfU1vEMFMdgp6WUAEwE0hdenAKwkuaSRXNwQQHdvlbQcwGMxbkdJ3mVmJwf0kLj7/ZL+TAAHAKMlfRviNLM15QA2SNI7AOZlGHZT8F/Rrwy6+2RJv2cEV87FXe7e2i8MunuzJAewIA/r5VwsqQvA/EIZdPd2SfsBLGwAXNnmufvYQgC6e8ndFwRwY1GMNUlaluXAlOqAGyZpl6S3ALSgWJsMYGZDACV9BGBKnTE9AFY3WOguCVknO0B3vwrA3fWqEpLjADRnwHMx/FXacEmL8zI4qca2niU5LYqiuQDOA5iaAeBuAB/UeP+cu4/PDFDSHTX8NpnZlvB8A4DUMpLk9yS7Qm6utGZJe6IoesPdB2VhcGqNRXbFfU+wH8zsHMlFNb61AFgo6S93n13rdJeqOwR1ZOTOnOrsDICD4fkzAN/U8WuTtFbSj9XbXo349hqX8T/lSsTdm2NOdy3rNrPeIA/6SD5K8vEYsTVZ0v4oij5096GXAawTfzsrnicAGJwh/nZUaZg+M/uS5PUAXgdwoU76fVrS3+5+XylF/O1oIP621xFb56MoWkzyxhjR1SppVaki/toAjK4hF7tzxl+PmfUkqMKeKIpmkLwHwJEaLr2VDI6uEZOHzOxMhd6YkOX0ZpCv20mOI/lSOFgAcJrk3EpAB6rvKpLLK35OyZhBRrp7SwaQF83sXZJXk7yW5DVmtu0STeLuIyXNB9BKcnPF5Ywoit4D8ELGGPyO5Awzu9jvoimKoj8AtOdYYwvJh/OCTFWXhQ7pmJwkdEraEO7QflN1HQ22STolfZUHZKpFU1wvR1NMM13SF1lBpmVlakLGmAHgzRTzPJgVZBrRdB2AETEupwAcjaJoEclXw+WeBHKduzcVxWBSeusuN4nMbCnJZwD0Jox5KDDZ1DDApPirqhVhZh+TnFWjzK8FMpHJUsL2NoUSLJbBGlnha5LTgjyIs0dCQyA3gxMAxLUrTgA4Vid1bSN5L4CzCWvMzi3cQ6sizvbGNSnNbDfJBxJAtrn78DwMvhgu6Lj4W5WiCNhNcnECSROzdhbaU7D3uZmlLan2JhzEm7MI9xZJaxNaHicydu4PJRyYSVl0cVdC1dJH8kkzO5sWXRBOB2JcxtfLLtWysyPEXpy9b2Y7cxQMcdt8Vb0OWqUmGSLpk4SDc5jka7kKT/LnBJeJsQBDtz4u514g+YSZXchZcu2Ly9OSbqkL0N1nJvXsSLqZHcxbEAbxdSwzg+4+QtKyhPl/ArC0gOblvgSRddmFXQpd1Lh0do7knEL+rZUjDksAOhMmfd7MjqMY25vwvb0WwNMxAzaa2acozo5UCPN6xe+lAEnWK3d6SD5VIDiYWW9MXj4GYP1lAM1sddAUv4Ru0xkAq0neWm57FAxyRWjB/RYq7/J6t5nZuWr//wFAljmbnn0kyQAAAABJRU5ErkJggg==);
/**/
--company_group: url('data:image/svg+xml,');
--company_carrier: url('data:image/svg+xml,');
--company_carrier_NoBG: url('data:image/svg+xml,');
}
/* RESET
--------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;/*275%*/
font: inherit;
vertical-align: baseline;
}
@font-face {
font-family: 'Neue Helvetica W02';
src: url("../fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot");
src: url("../fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix") format("eot"), url("../fonts/9a2e4855-380f-477f-950e-d98e8db54eac.woff") format("woff"), url("../fonts/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf") format("truetype"), url("../fonts/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853") format("svg");
font-style: normal;
font-weight: 300;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
font-family: 'Neue Helvetica W02', Arial, FreeSans, sans-serif;
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
outline:none;
text-decoration: none;
color: #000;
}
*:focus { outline: none; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
.dp-block {
display: block;
}
.tal-right {
text-align: right;
}
body {
background: #000;
}
body.setup {
background: #3c3c3c;
}
body .on {
display: block;
}
body .off {
display: none;
}
.setup {
color: #fff;
}
.setup .setupForm {
margin: 15px;
border: 30px solid #fdc400;
border-left: 4px solid #fdc400;
border-right: 4px solid #fdc400;
border-top: 0;
background-color: #000000;
opacity: 1;
background-image: radial-gradient( ellipse farthest-corner at 4px 4px , #603801, #603801 50%, #000000 50%);
background-size: 3px 3px;
}
.setup .setupForm h1 {
font-size: 40px;
margin: 0 0 20px;
padding: 0px 0 15px 10px;
border-bottom: 18px solid #000;
vertical-align: middle;
height: 55px;
background: #fdc400;
color: #000;
}
.setup .setupForm h1::before {
content: "";
background: var(--h_img) no-repeat;
background-size: 45px 45px;
display: inline-block;
width: 45px;
height: 45px;
padding: 0;
margin: 12px 14px -8px 8px;
}
.setup .setupForm div {
margin: 1vw 3vw 3vw;
position: relative;
}
.setup .setupForm div:last-child {
margin-bottom: 3vw;
}
.setup label {
cursor: pointer;
border: 1px solid rgba(253, 196, 0, 0.5);
margin: 0 0.2vw 2vw;
padding: 2px 12px;
display: inline-block;
border-radius: 25px;
transition: 0.5s;
line-height: normal;
}
.setup label > input {
margin: 8px 8px 8px 0px;
display: inline;
}
.setup .setupForm label {
cursor: pointer;
border: 1px solid rgba(253, 196, 0, 0.5);
padding: 2px 12px;
display: inline-block;
border-radius: 25px;
transition: 0.5s;
}
.setup label:hover {
background: rgba(255, 255, 255, 0.15);
}
.setup label.titel,
.setup label.titel-side {
padding: 0;
font-size: 20px;
margin: 10px 0;
background: none;
display: block;
cursor: default;
border: 0 none;
}
.setup label.titel-side {
display: inline-block;
}
.setup input {
display: inline-block;
}
.setup .setupForm input {
display: inline-block;
}
.setup .setupForm input[type="text"],
.setup .setupForm input[type="number"] {
border: 1px solid #fdc400;
background: rgba(96, 56, 1, 0.50);
font-size: 30px;
width: 120px;
padding: 8px;
color: #fff;
text-align: center;
transition: 0.5s;
}
.setup .setupForm input[type="text"]:hover,
.setup .setupForm input[type="number"]:hover {
background: rgba(96, 56, 1, 1);
}
.setup .setupForm input[name="hst"] {
width: 100%;
text-align: left;
}
.setup .setupForm div.in {
display: inline-block;
}
.setup .setupForm div:nth-child(3) input {
margin-left: 10px;
margin-right: 10px;
}
.setup .setupForm div:nth-child(3) input[type="checkbox"]:nth-child(1) {
margin-left: 0;
}
.setup .setupReloadT {
margin: 15px;
}
.setup .setupMonitor {
margin: 10px 0 40px 15px;
font-size: 34px;
padding: 10px 20px;
background: #fdc400;
border: 1px solid #000;
cursor: pointer;
box-shadow: 0px 12px 11px -4px #00000073;
}
.setup .setupMonitor::before {
content: "";
background: var(--h_img) no-repeat;
background-size: 38px 38px;
display: inline-block;
width: 38px;
height: 38px;
padding: 0;
margin: 0 3px 0 0;
vertical-align: text-top;
}
.setup .setupMonitor:hover {
box-shadow: inset 0px 12px 11px -4px #00000073;
}
.setup .livePoints {
max-height: 190px;
position: absolute !important;
top: 104%;
left: 0;
right: 0;
margin: -3px 0 0 0 !important;
background: rgba(64, 37, 0, 1);
z-index: 5;
border: 1px solid #fdc400;
border-top: 0 none;
overflow-y: scroll;
}
.setup .livePoints:empty {
display: none;
}
.setup .livePoints span {
display: block;
border-bottom: 1px solid #fdc400;
padding: 10px;
cursor: pointer;
font-size: 1.2rem;
}
.setup .livePoints span:hover {
background: rgba(96, 56, 1, 1);
}
.setup input.stopid {
display: none;
}
.single {
margin: 1%;
position: relative;
/*background: #fdc400;*/
}
.dual {
float: left;
width: 49%;
margin: 1% 0.5%;
position: relative;
/*background: #fdc400;*/
}
.monitorKopf {
background: #fdc400;
background: -moz-linear-gradient(#f1d987,#fdc400 29.50%); /* FF3.6-15 */
background: -webkit-linear-gradient(#f1d987,#fdc400 29.50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(#f1d987,#fdc400 29.50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1d987', endColorstr='#fdc400',GradientType=0 ); /* IE6-9 */
font-size: 420%;
display: flex;
position: relative;
border-radius: 17px 17px 0 0;
}
.monitorKopf .stvo-h {
min-height: 70px;
background: #fff;
border-radius: 17px 0 50px 0;
vertical-align: middle;
padding: 0 23px 0 17px;
z-index: 99;
display: inline-flex;
}
.monitorKopf h {
font-size: 0;
background-image: var(--h_img);
min-width: 70px;
background-position: center;
background-repeat: no-repeat;
/*
font-size: 3rem;
font-weight: 900;
color: #218237;
min-width: 70px;
background-position: center;
background-repeat: no-repeat;
text-align: center;
background-color: #ffd500;
border: 0.45rem solid #218237;
border-radius: 50%;
vertical-align: middle;
line-height: 4rem;
font-family: Tahoma;
margin: 0.3rem;
*/
}
.monitorKopf img {
min-width: 60px;
}
.monitorKopf span {
margin: auto 20px;
display: inline-block;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 80px;
font-weight: 900;
text-shadow: 1px 1px #cbcbcb;
}
.monitorKopf span.wegzeit {
position: absolute;
background: var(--options_wayToStation) 0px 0px no-repeat;
background-size: contain;
top: 8px;
right: 0px;
padding: 0 0 0 40px;
line-height: inherit;
overflow: hidden;
font-size: 80%;
}
.monitorKopf span.wegzeit:empty {
display: none;
}
.display {
width: auto; /* 100% */
margin: 0 auto;
position: relative;
display: table;
border-left: 1px solid #fdc400;
border-right: 1px solid #fdc400;
background-color: #000000;
opacity: 1;
background-image: radial-gradient( ellipse farthest-corner at 4px 4px , #603801, #603801 50%, #000000 50%);
background-size: 3px 3px;
-webkit-user-select: none;
cursor: none;
}
.table {
width: 100%;
display: table;
}
.frame {
display: table-row-group;
}
.frameRow {
display: table-row;
height: 55px;
}
.display .kopf {
height: 42px;
background: #000;
color: #fff;
font-size: 140%;
display: table-header-group;
}
.display .kopf .frameCell {
padding: 10px 10px;
border-bottom: 0 none;
line-height: 19px !important;
height: 22px;
font-weight: 900;
}
.frameCell .marquee {
overflow: hidden;
animation: marqueee 12s linear infinite;
}
.display .infos {
font-size: 275%; /*300*/
color: #f18b02;
}
.display .infos .frameCell {
border-right: 1px solid rgba(95, 56, 1, 0.80);
}
.display .infos .frameCell:empty {
content: " ";
}
.display .infos:last-child .frameCell {
border-bottom: 0 none;
}
.display .infos .frameCell:last-child {
border-right: 0 none;
}
.frameCell {
display: table-cell;
padding: 4px 10px;
border-bottom: 1px solid #603801; /*#603801*/
line-height: 2.9rem /*48px*/;
vertical-align: middle;
cursor: pointer;
}
.produkt {
border-right: 0 none !important;
}
.produkt span {
width: 30px;
height: 30px;
margin: 0px 0px;
display: block;
opacity: 0.9;
background-repeat: no-repeat !important;
}
.produkt span.CityBus,
.produkt span.IntercityBus {
background: var(--transport_bus);
}
.produkt span.PlusBus {
background: var(--transport_plusbus);
}
.produkt span.Tram {
background: var(--transport_tram);
}
.produkt span.Train {
background: var(--transport_train);
}
.produkt span.SuburbanRailway {
background: var(--transport_metropolitan);
}
.produkt span.Ferry {
background: var(--transport_ferry);
}
.produkt span.Lift,
.produkt span.Cableway {
background: var(--transport_overhead-railway);
}
.produkt span.Alita {
background: var(--transport_alita);
}
.produkt span.Taxi,
.produkt span.HailedSharedTaxi {
background: var(--transport_taxi);
}
.produkt span.BusOnRequest {
background: var(--transport_busOnRequest);
width: 32px;
height: 32px;
}
.produkt span.Subway {
background: var(--transport_u_t);
}
.produkt span.Undefined {
background: none;
width: 32px;
height: 32px;
}
.linie {
max-width: 82px;
width: 82px;
overflow: hidden;
position: relative;
white-space: nowrap;
font-weight: 900;
text-align: right !important;
}
.linie, .ziel {
text-align: left;
}
.ziel .add {
margin-left: 10px;
display: inline-block;
opacity: 0.8;
background-repeat: no-repeat !important;
vertical-align: middle;
background-position: center;
}
.ziel .add[data-name="RouteChanges"] {
width: 3rem;
height: 2rem;
background: var(--route_changes);
}
.ziel .add.seats {
width: 2.5rem;
height: 1.5rem;
opacity: 0.7;
}
/*1*/
.ziel .add[data-name="ManySeats"] {
background: var(--occupancy_seats_many);
}
/*2*/
.ziel .add[data-name="StandingOnly"] {
background: var(--occupancy_seats_few);
}
.ziel .add[data-name="FewSeats"] {
background: var(--occupancy_seats_few);
}
/*3*/
.ziel .add[data-name="NoSeats"] {
background: var(--occupancy_seats_noSeats);
}
.ziel .add[data-name="Full"] {
background: var(--occupancy_seats_noSeats);
}
/*no*/
.ziel .add[data-name="Unknown"] {
background: var(--occupancy_seats_unknown);
}
.ziel {
width: 100%;
max-width: 50px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.infos .steig {
text-align: center;
color: rgba(241, 139, 2, 0.6);
/**/
overflow: hidden;
white-space: nowrap;
max-width: 40px;
width: 40px;
font-size: 75%;
}
.abfahrtsZeit {
max-width: 80px;
width: 80px;
display: block;
text-align: right;
}
.abfahrtsZeit.std {
font-size: 75%;
}
.abfahrtsZeit.std .time[data-name="Std"] {
margin-left: 4px;
font-size: 55%;
}
/*
.abfahrtsZeit.Delayed {
color: rgb(253, 78, 0);
animation-name: delayBlink;
animation-duration: 3s;
animation-iteration-count: infinite;
}
*/
.infos .abfahrtsZeit::after {
content: '+';
font-size: 1.2rem;
vertical-align: top;
margin: 0;
padding: 0;
line-height: normal;
color: #ffffff00;
}
.infos .abfahrtsZeit.Delayed::after {
color: #f18b02;
}
@keyframes delayBlink {
from {
color: rgba(241, 139, 2, 1);
background: rgba(253, 78, 0, 0.1);
}
to {
color: rgba(253, 78, 0, 1);
/*background: rgba(241, 139, 2, 0.2);*/
}
}
.monitorArsch {
padding: 12px 0;
background: #fdc400;
font-size: 80%;
position: relative;
border-radius: 0 0 17px 17px;
}
.monitorArsch .endText {
padding: 0 0 0 20px;
font-size: 10px;
font-weight: 100 !important;
}
.monitorArsch .copyright {
margin: 0 5px 0 0;
padding: 0 5px 0 0;
font-size: 8px;
border-right: 1px solid #000;
}
.monitorArsch i {
font-size: 14px;
font-weight: 100;
}
.monitorArsch img {
position: absolute;
right: 14px;
bottom: 13px;
}
.logodeunternehmen {
display: inline-block;
padding: 0;
position: absolute;
right: 14px;
top: 9px;
}
.logodeunternehmen span {
width: 49px;
height: 20px;
display: inline-block;
background: none;
background-size: contain !important;
background-position: left !important;
background-repeat: no-repeat !important;
padding: 0;
vertical-align: top;
font-size: 0.36rem;
text-align: center;
}
.logodeunternehmen span:nth-child(1) {
background: var(--company_carrier);
}
.logodeunternehmen span:nth-child(2) {
width: 20px;
height: auto;
font-weight: 900 !important;
}
.logodeunternehmen span:nth-child(3) {
background: var(--company_group);
}
.refresh .display .infos,
.err .display .infos {
opacity: 0.2;
}
.refresh .display::after {
position: absolute;
top: 45%;
left: 0;
right: 0;
text-align: center;
/*content: "... Aktualisierung ...";*/
color: #fff;
font-size: 250%;
}
.err .display .infos div {
text-align: center;
color: #ff0000;
}
/*.err .display::after {
position: absolute;
top: 45%;
left: 0;
right: 0;
text-align: center;
content: "! Lese-Fehler ! Internet ?";
color: #ff0000;
font-size: 250%;
}*/
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
.js-marquee-wrapper {
display: inline-flex;
}
.infos {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/** Let's transfom in a smooth way **/
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.frameRow {
-webkit-transform: translateZ(50px) translateY(0px);
transform: translateZ(30px);
}
.frameRow.neu {
-webkit-transform: rotateX(-90deg) translateZ(-30px);
transform: rotateX(-90deg) translateZ(-30px);;
}
.infos.flip {
-webkit-transform: rotateX(90deg) translateZ(0px);
transform: rotateX(90deg) translateZ(0px);
}
.preloader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
visibility: hidden;
}
.refresh .preloader {
visibility: visible;
}
.preloader:after {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
content: "... Aktualisierung ...";
color: #fff;
font-size: 80%;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #ebff00;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #ffb323;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #00c900;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media (max-width:560px) {
body {
font-size: 0.6rem;
}
.frameCell {
display: table-cell !important;
padding-top: 0px;
padding-bottom: 0px;
}
.produkt span {
width: 22px;
height: 22px;
}
.ziel {
width: 82%;
}
.abfahrtsZeit {
width: 18%;
}
.ziel .add {
max-width: 2rem;
}
}
@media (max-width:411px) {
.ziel {
width: 63%;
}
.monitorArsch .endText {
padding: 0;
text-align: center;
display: block;
margin: 28px 0 0;
}
.monitorArsch .logodeunternehmen {
position: inherit;
top: 0;
float: right;
}
}