/* get the required local files */
@font-face {
  font-family: 'Roboto-Regular';
  src: url('../css/roboto/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('../css/roboto/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto-Light';
  src: url('../css/roboto/Roboto-Light.ttf');
}

@font-face {
  font-family: 'Roboto-Thin';
  src: url('../css/roboto/Roboto-Thin.ttf');
}

/* use the font */
html, body {
  font-family: 'Roboto-Regular';
  /*font-size: 48px;*/
}

img {
    vertical-align: baseline;
}

#display-red-voznje {
	/*font-family: "Roboto";*/
	font-weight: bold;
	letter-spacing: 1px;
	/*margin: 10px;*/
}

#display-red-voznje .container {
	color: #FFF;
	font-size: 6.5em;
}

#display-header-logo {
    margin-left: 10px;
    margin-top: 10px;
    float: left;
    width: 115px;
    height: auto;

    background-repeat: no-repeat;
    background-size: cover;
}

#display-header, #display-footer {
	width: 100%;
	/*height: 125px;*/
	background: #5677fc;
	background: -moz-linear-gradient(top, #5677fc 0%, #207ce5 100%);
	background: -webkit-linear-gradient(top, #5677fc 0%,#207ce5 100%);
	background: linear-gradient(to bottom, #5677fc 0%,#207ce5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5677fc', endColorstr='#207ce5',GradientType=0 );
    /*padding: 5px;*/
	clear: both;
}

#display-header {
	text-align: center;
    box-shadow: 0 15px 10px -10px rgba(52, 65, 111, 0.5), 0 1px 4px rgba(52, 65, 111, 0.3), 0 0 40px rgba(52, 65, 111, 0.1) inset;
}

#display-header-station, #display-error-message {
    line-height: 2;
    text-shadow: 3px 3px 10px #34416f;
}

#display-header-datetime {
	height: 100%;
	float: right;
    margin-right: 20px;
}

#display-header-datetime-time {
    text-shadow: 3px 3px 10px #34416f;
}

#display-header-datetime-date {
    font-family: 'Roboto-Light';
	font-size: 0.3em;
    line-height: 0;
}

#container.container {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(255,255,255, 0.8);
}

#display-body {
	width: 100%;
}

#display-body-table {

}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(188, 188, 188, 0.5);
}

.table>tbody>tr>td.display-arrival-time {
    padding-left: 30px;
    width: 400px;
}

#display-body .table {
	margin: 0;
}

.display-arrival-time {
	color: #888;
}

.display-body-row {
    margin-top: 10px;
    margin-bottom: 10px;
}

.display-body-row:nth-child(even) .display-arrival-icon {
    color: black;
}

.display-body-row:nth-child(odd) .display-arrival-icon {
    color: black;
}

.display-body-row:nth-child(even) .display-arrival-station {
    color: black;
}

.display-body-row:nth-child(odd) .display-arrival-station {
    color: black;
}

.display-body-row:nth-child(even) .display-arrival-time {
    color: black;
}

.display-body-row:nth-child(odd) .display-arrival-time {
    color: black;
}

.pad-one-char {
    padding-left: 0.6em !important;
}

.pad-two-chars {
	padding-left: 1.2em !important;
}

.table>tbody>tr>td.display-arrival-icon {
    padding-right: 10px;
}

/*.table>tbody>tr {
    border: 1px solid #000;
}*/

#display-footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding-left: 20px;
}

#display-footer-news, #display-footer-icon {
    line-height: 2;
    float: left;
}

#display-footer-text-div, #display-footer-icon {
    font-family: 'Roboto-Light';
    font-weight: normal;
}

#display-footer-text-div{
    overflow: hidden;
    padding: 25px;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 320s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

#display-footer-icon {
    position: absolute;
    left: 320px;
}

#display-footer-news {
    font-family: 'Roboto-Medium';
    margin-right: 30px;
}

#display-footer-text-div, #display-header-datetime-date, .display-body-row-time {
	font-weight: normal;
}

#display-error-message {
    background-color: #CCC;
    text-align: center;
}