@import url(//fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
@import url(//fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,cyrillic);
body {
    font-family: 'Open Sans', serif, sans-serif;
    font-weight: 400;
}

h1 {
    font-size: 17px;
    text-align: center;
}

a {
  color:#3c3c3c;
}


.lobster {
	font-family: 'Open Sans', monospace;
	margin: 0;
}

div.content {
	padding: 0 10px 10px 10px;
}

div.content p { 
    text-indent: 1.5em; /* Отступ первой строки */
    text-align: justify; /* Выравнивание по ширине */
}

div.content p a{ 
	font-size: inherit;
	color: rgb(0, 0, 238);
}

.header {
    float: left;
    width: 100%;
    border-bottom: 2px grey solid;
    padding-bottom: 15px;
}
    .info {
        display: inline-block;
        width: 67%;
		vertical-align: top;
    }
	.news {
		display: block;
		width: 15%;
		height: 120px;
		float: right;
		background-image: url('/img/news.png');
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}
    .title {
        display: block;
        width: 100%;
        text-align: center;
        /* border: 2px solid grey; /**/
		background-attachment: scroll;
		background-clip: padding-box;
		background-color: rgb(223, 223, 223);
		background-image: linear-gradient(rgb(246, 246, 246), rgb(224, 224, 224));
		background-origin: padding-box;
		background-size: auto;
		border-bottom-color: rgb(187, 187, 187);
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-image-outset: 0px;
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-source: none;
		border-image-width: 1;
		border-left-color: rgb(187, 187, 187);
		border-left-style: solid;
		border-left-width: 1px;
		border-right-color: rgb(187, 187, 187);
		border-right-style: solid;
		border-right-width: 1px;
		border-top-color: rgb(187, 187, 187);
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		border-top-style: solid;
		border-top-width: 1px;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
		color: rgb(47, 62, 70);
		text-shadow: rgb(255, 255, 255) 0px 1px 0px;
        padding: 5px 0;
        margin: 3px 0 2px 0;
        border-radius: 7px;
		font-weight: 700;
        cursor: pointer;
        text-decoration: none;
    }
	.title a{
		text-decoration: none;
		font-family: 'Roboto Slab', monospace;
		font-size: 14px;
		font-weight: bold;
	}
	
    .route {
        float: left;
        min-width: 30px;
        text-align: center;
        /* border: 1px solid rgb(31, 131, 131); */
        /* background-color: lightgreen; */
		background-attachment: scroll;
		background-clip: border-box;
		background-color: rgb(116, 176, 66);
		background-image: -webkit-linear-gradient(top, rgb(127, 193, 72), rgb(104, 158, 59));
		background-origin: padding-box;
		background-size: auto;
		border-color: rgb(86, 160, 14);
		border-style: solid;
		border-width: 1px;
		border-image-outset: 0px;
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-source: none;
		border-image-width: 1;
		color: rgb(255, 255, 255);
		text-shadow: rgb(68, 68, 68) 0px 1px 1px;
        padding: 5px; 
        margin-right: 10px;
        margin-bottom: 10px;
        text-decoration: underline;
        /* color: rgb(27, 96, 117); */
    }
	
	.num a,
	.route a {
		font-size: inherit;
		color: inherit;
		text-align: inherit;
		text-decoration: inherit;
	}
    
table {
    /* width: 412px; */
	width: 100%;
}

table.time {
    font-size: 14px;
    margin-bottom: 20px;
	font-weight: 700;
}
    .refresh {
        font-weight: bold;
        font-size: 14px;
        color: white;
        padding: 7px 13px;
        border-radius: 3px;
        border: 1px solid blue;
        background-color: rgb(80, 185, 211);
        cursor: pointer;
    }
    .caption {
        float:left;
    }
    .clock {
        width:70px;
    }

.table {
	border-spacing:10px;
	width:100%
}
    
.table td {
    text-align: center;
    padding: 5px;
}
    .table td.ico {
        width: 30px;
		vertical-align: middle;
    }
    .table td.num {
		vertical-align: middle;
        width: 30px;
        /* border: 2px solid rgb(31, 131, 131);
        background-color: lightgreen;
        color: rgb(27, 96, 117); /**/
		background-clip: border-box;
		background-color: rgb(116, 176, 66);
		background-image: -webkit-linear-gradient(top, rgb(127, 193, 72), rgb(104, 158, 59));
		background-origin: padding-box;
		background-size: auto;
		border-color: rgb(86, 160, 14);
		border-style: solid;
		border-width: 1px;
		border-image-outset: 0px;
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-source: none;
		border-image-width: 1;
		color: rgb(255, 255, 255);
		text-shadow: rgb(68, 68, 68) 0px 1px 1px;
        text-decoration: underline;
    }
    .table td.time {
		background-attachment: scroll;
		background-clip: border-box;
		background-color: rgb(250, 219, 78);
		background-image: linear-gradient(rgb(252, 237, 167), rgb(251, 239, 126));
		background-origin: padding-box;
		background-size: auto;
		border-color: rgb(247, 201, 66);
		border-style: solid;
		border-width: 1px;
		border-image-outset: 0px;
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-source: none;
		border-image-width: 1;
		color: rgb(51, 51, 51);
    }
    
.footer {
    /* margin-top: 20px; */
    top: 350px;
    font-size: 12px;
    font-weight: normal;
}

	.footer-phone {
		margin: 10px 0;
	}

	.footer-phone .footer-phone-text {
		width: 160px;
		display: inline-block;
		font-size: 10px;
		vertical-align: middle;
	}

	.footer-phone .footer-phone-button {
		display: inline-block;
		line-height: 35px;
		padding: 0 15px 0 35px;
		background-color: #fafafa;
		border-radius: 10px;
		color: #000;
		text-decoration: none;
		text-shadow: none;
		background-image: url(/img/footer-call.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position: 13px center;
	}

.footer .hot-line {
	width: 250px;
	text-decoration: none;
	border: 1px solid;
}

.infoblock {
	font-size: 12px;
	text-align: center;
	padding-bottom: 4px;
}

.infoblock a {
	color: initial;
}

@media screen and (max-width: 440px) {
    table {
        width: 100%;
    }
    .sign {
        width: 20%;
    }
}

@media screen and (max-width: 550px) {
    #title-city-name {
	display: none;
    }
}



/* additional code */
#ssheader {
	height: 33px;
	/* background-color: #5e87b0;
	color: #5959ff; */
	background-attachment: scroll;
	font-size: 14px;
	/* padding: 0px 10px; */
	text-align: center;
	background-clip: border-box;
	background-color: rgb(94, 135, 176);
	background-image: linear-gradient(rgb(111, 172, 213), rgb(73, 123, 174));
	background-origin: padding-box;
	background-size: auto;
	border-bottom-color: rgb(69, 111, 154);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-image-outset: 0px;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	border-left-color: rgb(69, 111, 154);
	border-left-style: solid;
	border-left-width: 0px;
	border-right-color: rgb(69, 111, 154);
	border-right-style: solid;
	border-right-width: 0px;
	border-top-color: rgb(69, 111, 154);
	border-top-style: solid;
	border-top-width: 1px;
	color: rgb(255, 255, 255);
	text-shadow: rgb(62, 103, 144) 0px 1px 0px;
	margin: 0 auto;
}

.footer {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgb(17, 17, 17);
	background-image: linear-gradient(rgb(60, 60, 60), rgb(17, 17, 17));
	background-origin: padding-box;
	background-size: auto;
	border-bottom-color: rgb(51, 51, 51);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-image-outset: 0px;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	border-left-color: rgb(51, 51, 51);
	border-left-style: solid;
	border-left-width: 0px;
	border-right-color: rgb(51, 51, 51);
	border-right-style: solid;
	border-right-width: 0px;
	border-top-color: rgb(51, 51, 51);
	border-top-style: solid;
	border-top-width: 1px;
	color: rgb(255, 255, 255);
	text-shadow: rgb(0, 0, 0) 0px -1px 0px;
}

.footer a {
	color: #eee;
}

.header-table {
    width: 100%;
}

.header-table img {
    cursor: pointer;
}

.header-row-left {
    text-align: left;
}

.header-row-right {
    text-align: right;
}

.ssfav {
	height: 27px;
}

.ssloc {
	height: 27px;
    margin-bottom: 1px;
}

.ssref {
    height: 20px;
    margin-bottom: 5px;
}

.sign-info {
	text-align: center;
    display: inline-block;
	width: 15%;
}

.div-sign,
.div-sign.bus {
	background-image: url('../img/multistop@normal.png');
	background-position: -201px 0;
	width: 100px;
	height: 133px;
	background-repeat: no-repeat;
}

.div-sign.trolley {
	background-position: 0 0;
}

.div-sign.tram {
	background-position: -100px 0;
}

.img-sign { /* deprecated */
	display: block;
	margin-right: 8px;
	width: 100%;
}


.distance {
	display: inline-block;
	font-weight: 700;
}

/* social panel */
.social-panel {
	text-align: center;
}

/* small */
.social-icons {
	display: block;
	height: 34px;
	margin: 0 auto;
	width: 150px;
}

.social-icons a {
	margin: 2px 8px;
	width: 34px;
	height: 34px;
	display: inline-block;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url('../img/social@small.png');
}

a.social-icon-vk {
	background-position: 0px 0px;
}

a.social-icon-fb {
	background-position: -39px 0px;
}

a.social-icon-twitter {
	background-position: -78px 0px;
}

a.social-icon-mail {
	background-position: -118px 0px;
}


/* xsmall */
.social-icons.xsmall {
	height: 27px;
}
.social-icons.xsmall a {
	width: 27px;
	height: 27px;
	background-image: url('../img/social@xsmall.png');
}

.xsmall a.social-icon-vk {
	background-position: 0px 0px;
}

.xsmall a.social-icon-fb {
	background-position: -30px 0px;
}

.xsmall a.social-icon-twitter {
	background-position: -60px 0px;
}

.xsmall a.social-icon-mail {
	background-position: -90px 0px;
}

/* glonass icon */
.glonass-icon {
    display: none;
    height: 18px;
    width: 18px;
    float: right;
	/* margin-top: 6px; */
	background-image: url('../img/glonass@xsmall.png');
	background-position: 0px 0px;
}

.glonass .glonass-icon {
    display: inline-block; 
}

.glonass-icon.blur{
	background-image: url('../img/glonass-blur@xsmall.png');
}

.glonass-sign  {
	display: none;
}

.glonass .glonass-sign {
	display: initial;
}


/* ssheader */
.ssheader {
    text-align: center;
    position: relative;
    padding-top: 1px;
}

.ssheader * {
    vertical-align:middle;
}

.ssheader .clock {
    display: inline-block;
    height: 31px;
    width: 37px;
    margin-left: 4px;
}

.ssheader h1 {
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-device-width: 400px) {
    .ssheader h1 {
      font-size: 85%;
      margin-top: 3px;
    }
    .ssheader .clock {
	margin-left: 0px;
    }
}

.ssheader h1 a {
    color: rgb(255, 255, 255);
    text-shadow: rgb(68, 68, 68) 0px 1px 1px;
    text-decoration: none;
}

.ssheader a.header-icon {
	margin: 2px 0;
	width: 34px;
	height: 34px;
	display: inline-block;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.ssheader-title {
    display: inline-block;
    max-width: 90%;
    min-width: 45%; /**/
    vertical-align: top;
}

.ssheader a.fav {
    /*background-image: url('../img/fav@small.png');
    /* float: left; /**/
}

.ssheader a.lupe{
    /*background-image: url('../img/lupe@small.png');
    /* float: left; /**/
}

.ssheader a.location {
    /* background-image: url('../img/location@small.png');
    background-position: 0px 3px; /**/
}

.ssheader a.reload {
    padding-top: 2px;
    /*background-image: url('../img/reload@small.png');
    background-position: 0px 3px;
    /* float: right; /**/
}

/* headers */
h2 {
	text-align: center;
}

/* waiting times */
.waiting-time {
	display: inline-block;
	vertical-align: top;
	max-width: 70%;
}

.waiting-time .direction{
	font-size: xx-small;
}

.hidden {
    display: none;
}

.slide-navigation {
    /* height: 32px; */
    display: inline-block;
    width: 40%;
}

.slide-navigation div {
    text-decoration: underline;
    /*color: blue;*/
}

.slide-header {
  cursor: pointer;
  display: inline-block;
  width: 11%;
  padding: 3px;
  font-size: 2em;
  font-weight: bold;
  font-family: monospace;
  vertical-align: middle;
}

div.title > a {
  display: inline-block;
  width: 68%;
  vertical-align: middle;
}

.hidden-slide {
    height: 400px;
}

/* search classes */
.center {
	text-align: center;
}

.content.center  p {
	text-align: center;
}

.route-info td {
    text-align: center;
    padding: 5px;
}

td.left {
	font-weight: bold;
}

.stop-link {
    line-height: 2;
}

.route-info.route-direction0 .stop-link.direction0,
.route-info.route-direction1 .stop-link.direction1 {
    text-decoration: none;
    cursor: text;
}

.social-header {
    margin-bottom: 10px;
}

/* alert */
.alert {
	color: red;
}

/* ogrp fixes */
div.explanation {
    width: 58%;
    display: inline-block;
}

div.explanation p,
div.slide-navigation p {
    font-size: 90%;
    text-align: left;
}

div.slide-navigation p > a {
    text-decoration: underline;
    cursor: pointer;
}

div.js-route-list { 
    margin-top: 4px;
}

div.infoblock h4 {
    margin: 0;
}

div.infoblock * {
    vertical-align: top;
}

.footer {
    text-align: center;
}

.footer > a {
    display: inline-block;
    vertical-align: middle;
}

.footer > a > img {
    height: 30px;
    margin: 3px 3px 0px 3px;
    border-radius: 4px;
}

a.footer-citizens {
    display: inline-block;
}

#kit-short-logo {
    display: none;
}

@media screen and (max-width: 340px) {
    #kit-short-logo {
	display: initial;
    }
    #kit-full-logo {
	display: none;
    }
    #ssheader > a.header-icon.location {
        width: 18px;
    }
}

.lang-block{
	display: inline-block;
}
.lang-block a.lang-link, .lang-block span{
	color: rgb(255, 255, 255);
	height: 30px;
	display: inline-block;
}
.lang-block a.lang-link{
	 margin: 2px 2px;
	 width: auto;
}
.lang-block a.lang-link.active{
	text-decoration: none;
}