/* from bm5.pl */
@font-face {
	font-family: notJohnston;
	src: url(/notJohnston.ttf);
}

@font-face {
	font-family: UKNumberPlate;
	src: url(/UKNumberPlate.ttf);
}

* { 
	box-sizing: border-box;	/* make box calculations in pixels easier */
}

.letter { /* stop letter atop a flag */
        border-radius: 50%;
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin: 0;
        background: red;
        background: linear-gradient(#ce0000, #aa0000);
        color: white;
        font-family: Gill Sans MT, Arial, sans-serif;
        font-size: 15px;
        text-align: center;
	display: inline-block;
	position: relative;
}

.dir { 	/* direction of buses at this stop arrow, hides under stop letter */
	position: relative;
	left: -32.5px;
	top: -1px;
	z-index: -1;
}
    
.wflag {/* applies to whole flagpole div */
	width: 132px;
	display: inline-block;
	margin-left: 10px;	/* keeps flag away from left edge of page, allowing left-pointing dir arrow */
	margin-bottom: 20px;	/* makes sure that the next row of flags is separated from this one */
}

.stss {	/* special - applies to bus stop STSS flags only */
        display: inline-block;                                                                                        
        background: url('/img/flag_stss.png');                                                                        
        font-family: notJohnston, Gill Sans MT, Arial, sans-serif;                                                    
        font-size: 80px;                                                                                              
        color: #eeeefe;                                                                                               
        width:132px;                                                                                                  
        text-align: center;                                                                                           
}

.wstopname { /* shows the dark grey stop name bar */
	font-family: Lato, notJohnston, Gill Sans MT, Arial, sans-serif;
	width: 132px;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	line-height: 13px;
	height: 35px;
	padding: 0;
	background: #666676;
       	background: linear-gradient(#666676, #5c5c6c);
	color: white;
}

.wtowards { /* shows the light grey towards bar */
	font-family: Lato, notJohnston, Gill Sans MT, Arial, sans-serif;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 11px;
	line-height: 13px;
	height: 35px;
	background: #CCC;
       	background: linear-gradient(#cccccc, #c2c2c2);
}

.eplates {	/* Individual full-size E-plate */
	font-family: notJohnston, Gill Sans MT, Arial, sans-serif;
        font-size: 22px;
	display: inline-block;
        border: 1px solid grey;
        background: #eaeff5;    /* where gradients dont work */
        background: linear-gradient(#ffffff, #eaeff5);
        width: 44px;
        height: 44px;
        line-height: 44px;
        margin: 0;
        text-align: center;
}

.eplates_sm {font-family: notJohnston, Gill Sans MT, Arial, sans-serif;
	font-size: 22px;
	color: black;
	display: inline-block;
	border: 1px solid grey;
	background: #eaeff5;    /* where gradients dont work */
	background: linear-gradient(#ffffff, #eaeff5);
	width: 45px;
	height: 45px;
	line-height: 45px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
}

.eplates_xsm {	/* Individual tiny-size E-plate */
	font-family: notJohnston, Gill Sans MT, Arial, sans-serif;
        font-size: 13px;
	display: inline-block;
        border: 1px solid grey;
        background: #eaeff5;    /* where gradients dont work */
        background: linear-gradient(#ffffff, #eaeff5);
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin: 0;
        text-align: center;
	padding-left: 30px;
}

.night { /* Night time eplate modifier */
	background: #b3f0ff;
	background: linear-gradient(#b3f0ff, #a2e0ee);
}

.superloop { /* Superloop eplate modifier */
	background: #880000;
	background: linear-gradient(#880000, #770000);
	color: white;
}

.eplates:hover { 
	background: #006600;/* #ce0000; */
        background: linear-gradient(#006600, #005500);
	color: #ffffcc;
}

.eplates_sel { /* Selected e-plate */
	background-color: #ce0000;
	background: linear-gradient(#ce0000, #aa0000);
	color: #ffffcc;
}
   
.eplates_sel:hover { background-color: black;
	background: linear-gradient(#222222, #000000);
	color: #ffffcc;
}
 
.blankplate {
	font-family: notJohnston, Gill Sans MT, Arial, sans-serif; /* This actually matters! */
	font-size: 22px;	/* So does this! */
        display: inline-block;
        border:1px solid grey;
        background: #eaeff5;    /* where gradients dont work */
        background: linear-gradient(#ffffff, #eaeff5);
	width: 44px;
        height: 44px;
        line-height: 44px;
        margin: 0;
        text-align: center;
}

.disrupt { /* The red bar at the bottom of the flag */
	font-family: notJohnston, Gill Sans MT, Arial, sans-serif; 
	width: 132px; 
	text-align: center; 
	vertical-align: middle; 
	font-size: 12px; 
	line-height: 13px; 
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #770000;
	padding: 4px; 
	background: #b82222; 
	background: linear-gradient(#bf2929, #b01c1c);
	color: #fff; 
}
	
/* from countdown */

.letter_sm {
	border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin: 0;
        background: red;
        background: linear-gradient(#ce0000, #aa0000);
        color: white;
        font-family: Gill Sans MT, Arial, sans-serif;
        font-size: 22px;
        text-align: center;
}

.platez {font-family: UKNumberPlate, Arial, sans-serif;
	font-size: 18px;
	border: 1px solid black;
	border-radius: 5%;
	padding: 0px 5px 0px 5px;
	text-align: center;
	background: #fcf238;
	background: linear-gradient(#fcf238, #e2d703);
}

.plate {font-family: UKNumberPlate, Arial, sans-serif;
	color: black;
	border: 1px solid black;
	border-radius: 5%;
	padding: 1px 10px 1px 10px;
	text-align: center;                                                                                                            
	background: #fcf238;
	background: linear-gradient(#fcf238, #e2d703);
}                                                                                                                                      

.plate a {text-decoration: none;}
.bigplate { font-size: 18px; }

td { vertical-align: middle; }

/* from onebus.pl */

/* Line width for timeline is x pixels, white circle is 2x in size, black circle is 3x in size, blips should be 0.66x square. */

ul#timeline li.circle:before {
	content: '';
	display: inline-block;
	position: relative;
	width: 25px;
	height: 25px;
	left: -1px;
	top: 5px;
	text-indent: 5px;
	background-color: #fff;
	border: 4px solid #000;
	border-radius: 50%;
	z-index: 1;
}
	
ul#timeline { list-style-type: none; 
     margin-left: -30px; 
     padding-left: 30px; /* change 30px to anything */ 
     text-indent: -30px;
}

ul#timeline li { margin-bottom: 20px;
     xline-height: 100%;
 }

ul#timeline li:before { content: "■"; 
		display: inline-block;
		width: 30px; 
		text-indent: 0; 
		text-align: center; /* change this for different bullet position */ 
		color: #f44336;
		}

ul#timeline:after { content: "▀▀";
           color: red;
	   display: inline-block;
           left-margin: -40px;
	   position: relative;
           top:  30px;
}

ul#timeline li a { font-family: notJohnston;
	font-size: 22px;
	color: #0450a1;
	line-height: 80%;
	text-decoration: none;
}

ul#tight { list-style-type: none; 
     margin-left: 0px; 
     padding-left: 0px; /* change 30px to anything */ 
     text-indent: 0px;
}

.closed {color: #ccc;
	text-decoration: line-through;
}

.closedlabel { color: white;
		background: #b33;
}

.letter_sm {
        border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin: 0;
        background: red;
        background: linear-gradient(#ce0000, #aa0000);
        color: white;
        font-family: Gill Sans MT, Arial, sans-serif;
        font-size: 22px;
        text-align: center;
}

.letter_xsm {
        border-radius: 50%;
        width: 25px;
        height: 25px;
        line-height: 25px;
        margin: 0 -30px 0 0;
        background: red;
        background: linear-gradient(#ce0000, #aa0000);
        color: white;
        font-family: notJohnston, Gill Sans MT, Arial, sans-serif;
        font-size: 15px;
        text-align: center;
	text-indent: 0px; 	/* because of the -ve text-indent on the timeline ul */
	display: inline-block;
	left: 30px;
	float:right;
}

.blind {font-family: notJohnston, Gill Sans MT, Arial, sans-serif;
	font-size: 22px;
	display: inline-block;
	background: #222222;
	background: linear-gradient(#222222, #000000);
	color: white;
	height: 45px;
	line-height: 22px;
	box-sizing: border-box;
	text-align: center;
	vertical-align: -50%;
}

.line-table {
	color: white;
	font-family: notJohnston;
	margin: 0 0 0 0;
	text-indent: 0;
	padding-left: 5px;
	padding-right: 5px;
}

.line-stripe {
	padding-left: 5px;
	padding-right: 5px;
	margin: 0;
	vertical-align: middle;
}

.line-tube {
	text-align: center;
	text-transform: uppercase;	
	min-width: 150px;
}

.line-bakerloo {
	background: #b26300;
}

.line-central {
	background: #dc241f;
}

.line-circle {
	background: #ffd329;
	color: black;
}
		
.line-district {
	background: #007d32;
}

.line-hammersmith-city {
	background: #f4a9be;
	color: black;
}

.line-jubilee {
	background: #a1a5a7;
}

.line-metropolitan {
	background: #9b0058;
}

.line-northern {
	background: #000;
}

.line-piccadilly {
	background: #0019a8;
}

.line-victoria {
	background: #0098d8;
}

.line-waterloo-city {
	background: #93ceba;
}

.line-national-rail {
	font-family: Arial, Helvetica, sans-serif;
	background: #f2f2f2;
	background: linear-gradient(#ffffff, #f0f0f0);
	color: black;
	min-width: 150px;
}

.line-dlr {
	background: #00afad;
}

.line-overground {
	background: #ef7b10;
}
 
.line-elizabeth {
	background: #6950a1;
}

.line-tram {
	background: #00bd19;
}

.line-tflrail {
	background: #0019a8;
}


.poor_service { background-color: #b33; border-radius: 5px; padding: 3px; font-family: Verdana; } 
.good_service { background-color: #080; border-radius: 5px; padding: 3px; font-family: Verdana; }