-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.css
405 lines (368 loc) · 24.5 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
/** Colours for specific lines taken from https://tfl.route_gov.route_uk/cdn/static/cms/documents/tfl-colour-standard.route_pdf **/
.journey h3, .route .interchanges .journey { color:#FFF; background-color:#000099; }
.route_bakerloo h3, .route_bakerloo h1, .route_bakerloo #lucos_navbar, .route .interchanges .route_bakerloo { color:#FFF!important; background-color:#996633!important; }
.route_central h3, .route_central h1, .route_central #lucos_navbar, .route .interchanges .route_central { color:#FFF!important; background-color:#CC3333!important; }
.route_circle h3, .route_circle h1, .route_circle #lucos_navbar, .route .interchanges .route_circle { color:#113B92!important; background-color:#FFCC00!important; }
.route_district h3, .route_district h1, .route_district #lucos_navbar, .route .interchanges .route_district { color:#FFF!important; background-color:#006633!important; }
.route_hammersmith-city h3, .route_hammersmith-city h1, .route_hammersmith-city #lucos_navbar, .route .interchanges .route_hammersmith-city { color:#113B92!important; background-color:#CC9999!important; }
.route_jubilee h3, .route_jubilee h1, .route_jubilee #lucos_navbar, .route .interchanges .route_jubilee { color:#FFF!important; background-color:#868F98!important; }
.route_metropolitan h3, .route_metropolitan h1, .route_metropolitan #lucos_navbar, .route .interchanges .route_metropolitan { color:#FFF!important; background-color:#660066!important; }
.route_northern h3, .route_northern h1, .route_northern #lucos_navbar, .route .interchanges .route_northern { color:#FFF!important; background-color:#000000!important; }
.route_piccadilly h3, .route_piccadilly h1, .route_piccadilly #lucos_navbar, .route .interchanges .route_piccadilly { color:#FFF!important; background-color:#000099!important; }
.route_victoria h3, .route_victoria h1, .route_victoria #lucos_navbar, .route .interchanges .route_victoria { color:#FFF!important; background-color:#0099CC!important; }
.route_waterloo-city h3, .route_waterloo-city h1, .route_waterloo-city #lucos_navbar, .route .interchanges .route_waterloo-city { color:#113B92!important; background-color:#66CCCC!important; }
.route_london-overground h3, .route_london-overground h1, .route_london-overground #lucos_navbar, .route .interchanges .route_london-overground { color:#FFF!important; background-color:#FF6600!important; }
.route_dlr h3, .route_dlr h1, .route_dlr #lucos_navbar, .route .interchanges .route_dlr { color:#FFF!important; background-color:#009999!important; }
.mode_tram h3, .mode_tram h1, .mode_tram #lucos_navbar, .route .interchanges .mode_tram { color:#113B92!important; background-color:#66cc00!important; }
/** Not defined in colour standard - use Corporate Blue **/
.route_elizabeth h3, .route_elizabeth h1, .route_elizabeth #lucos_navbar, .route .interchanges .route_elizabeth { color:#FFF!important; background-color:#6950A1!important; }
.route h3, .route h1 { color:#343431; background-color:#CDCDCD; }
/** These colours used on TFL website and API are wrong **/
/*.route_bakerloo h3, .route_bakerloo #lucos_navbar { color:#FFF!important; background-color:#AE6118!important; }
.route_central h3, .route_central #lucos_navbar { color:#FFF!important; background-color:#E41F1F!important; }
.route_circle h3, .route_circle #lucos_navbar { color:#113B92!important; background-color:#F8D42D!important; }
.route_district h3, .route_district #lucos_navbar { color:#FFF!important; background-color:#00A575!important; }
.route_hammersmith-city h3, .route_hammersmith-city #lucos_navbar { color:#113B92!important; background-color:#E899A8!important; }
.route_jubilee h3, .route_jubilee #lucos_navbar { color:#FFF!important; background-color:#8F989E!important; }
.route_metropolitan h3, .route_metropolitan #lucos_navbar { color:#FFF!important; background-color:#893267!important; }
.route_northern h3, .route_northern #lucos_navbar { color:#FFF!important; background-color:#000000!important; }
.route_piccadilly h3, .route_piccadilly #lucos_navbar { color:#FFF!important; background-color:#0450A1!important; }
.route_victoria h3, .route_victoria #lucos_navbar { color:#FFF!important; background-color:#009FE0!important; }
.route_waterloo-city h3, .route_waterloo-city #lucos_navbar { color:#113B92!important; background-color:#70C3CE!important; }
.route_london-overground h3, .route_london-overground #lucos_navbar { color:#FFF!important; background-color:#F86C00!important; }
.route_dlr h3, .route_dlr #lucos_navbar { color:#FFF!important; background-color:#00BBB4!important; }*/
/** Colours for comibinations of lines **/
.route_district_hammersmith-city h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #006633), color-stop(.25, #CC9999), color-stop(.5, #CC9999), color-stop(.5, #006633), color-stop(.75, #006633), color-stop(.75, #CC9999), to(#CC9999)); background-size: 50px 50px;
}
.route_circle_district h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #006633), color-stop(.25, #FFCC00), color-stop(.5, #FFCC00), color-stop(.5, #006633), color-stop(.75, #006633), color-stop(.75, #FFCC00), to(#FFCC00)); background-size: 50px 50px; }
.route_hammersmith-city_metropolitan h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #660066), color-stop(.25, #CC9999), color-stop(.5, #CC9999), color-stop(.5, #660066), color-stop(.75, #660066), color-stop(.75, #CC9999), to(#CC9999)); background-size: 50px 50px; }
.route_circle_hammersmith-city h3 { color:#113B92; text-shadow: #FFF 0 0 5px;background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #CC9999), color-stop(.25, #FFCC00), color-stop(.5, #FFCC00), color-stop(.5, #CC9999), color-stop(.75, #CC9999), color-stop(.75, #FFCC00), to(#FFCC00)); background-size: 50px 50px; }
.route_circle_metropolitan h3 { color:#113B92; text-shadow: #FFF 0 0 5px;background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #660066), color-stop(.25, #FFCC00), color-stop(.5, #FFCC00), color-stop(.5, #660066), color-stop(.75, #660066), color-stop(.75, #FFCC00), to(#FFCC00)); background-size: 50px 50px; }
.route_metropolitan_piccadilly h3 { color:#FFF; background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #660066), color-stop(.25, #000099), color-stop(.5, #000099), color-stop(.5, #660066), color-stop(.75, #660066), color-stop(.75, #000099), to(#000099)); background-size: 50px 50px; }
.route_jubilee_metropolitan h3 { color:#FFF;background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #660066), color-stop(.25, #8F989E), color-stop(.5, #8F989E), color-stop(.5, #660066), color-stop(.75, #660066), color-stop(.75, #8F989E), to(#8F989E)); background-size: 50px 50px; }
.route_district_piccadilly h3 { color:#FFF;background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #006633), color-stop(.25, #000099), color-stop(.5, #000099), color-stop(.5, #006633), color-stop(.75, #006633), color-stop(.75, #000099), to(#000099)); background-size: 50px 50px; }
.route_bakerloo_overground h3 { color:#FFF; text-shadow: #554433 0 0 5px; background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #996633), color-stop(.25, #FF6600), color-stop(.5, #FF6600), color-stop(.5, #996633), color-stop(.75, #996633), color-stop(.75, #FF6600), to(#FF6600)); background-size: 50px 50px; }
.route_circle_hammersmith-city_metropolitan h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background-size: 50px 50px;
background: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.15, #660066),
color-stop(.15, #CC9999),
color-stop(.35, #CC9999),
color-stop(.35, #FFCC00),
color-stop(.5, #FFCC00),
color-stop(.5, #660066),
color-stop(.65, #660066),
color-stop(.65, #CC9999),
color-stop(.85, #CC9999),
color-stop(.85, #FFCC00),
to(#FFCC00)); background-size: 50px 50px;
}
/* In real life no station serves all three of these lines, but TFL's data isn't real life */
.route_circle_district_hammersmith-city h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background-size: 50px 50px;
background: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.15, #CC9999),
color-stop(.15, #FFCC00),
color-stop(.35, #FFCC00),
color-stop(.35, #006633),
color-stop(.5, #006633),
color-stop(.5, #CC9999),
color-stop(.65, #CC9999),
color-stop(.65, #FFCC00),
color-stop(.85, #FFCC00),
color-stop(.85, #006633),
to(#006633)); background-size: 50px 50px;
}
.route_district_hammersmith-city_metropolitan h3 { color:#113B92; text-shadow: #FFF 0 0 5px; background-size: 50px 50px;
background: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.15, #660066),
color-stop(.15, #CC9999),
color-stop(.35, #CC9999),
color-stop(.35, #006633),
color-stop(.5, #006633),
color-stop(.5, #660066),
color-stop(.65, #660066),
color-stop(.65, #CC9999),
color-stop(.85, #CC9999),
color-stop(.85, #006633),
to(#006633)); background-size: 50px 50px;
}
.route_hammersmith-city_jubilee_metropolitan h3 { color:#FFF; text-shadow: #113B92 0 0 5px; background-size: 50px 50px;
background: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.15, #660066),
color-stop(.15, #CC9999),
color-stop(.35, #CC9999),
color-stop(.35, #868F98),
color-stop(.5, #868F98),
color-stop(.5, #660066),
color-stop(.65, #660066),
color-stop(.65, #CC9999),
color-stop(.85, #CC9999),
color-stop(.85, #868F98),
to(#868F98)); background-size: 50px 50px;
}
.mode_bus h3, .mode_bus h1 { color:#FFF; background-color:#CC3333; }
.mode_bus .route > .stop:before, .mode_bus .route .continues:after { border-color:#CC3333;}
/** Use the "London River Services" colour for all river boat routes and platforms **/
.mode_river-bus h3, .mode_river-bus h1 { color:#FFF; background-color:#0099CC; }
.mode_river-bus .route > .stop:before, .mode_river-bus .route .continues:after { border-color:#0099CC;}
/** Colours for boats
These were collected manually, without taking account of variations in light
**/
.vehicle_hurricaneclipper h1, .vehicle_hurricaneclipper .journeyname { color:#FFF; background-color:#5DA269; }
.vehicle_hurricaneclipper .route > .stop:before, .vehicle_hurricaneclipper .route .continues:after { border-color:#5DA269; }
.vehicle_auroraclipper h1, .vehicle_auroraclipper .journeyname { color:#000; background-color:#81AFD0; }
.vehicle_auroraclipper .route > .stop:before, .vehicle_auroraclipper .route .continues:after { border-color:#81AFD0; }
.vehicle_meteorclipper h1, .vehicle_meteorclipper .journeyname { color:#FFF; background-color:#861D3C; }
.vehicle_meteorclipper .route > .stop:before, .vehicle_meteorclipper .route .continues:after { border-color:#861D3C; }
.vehicle_tornadoclipper h1, .vehicle_tornadoclipper .journeyname { color:#FFF; background-color:#40AABA; }
.vehicle_tornadoclipper .route > .stop:before, .vehicle_tornadoclipper .route .continues:after { border-color:#40AABA; }
.vehicle_typhoonclipper h1, .vehicle_typhoonclipper .journeyname { color:#FFF; background-color:#8F2877; }
.vehicle_typhoonclipper .route > .stop:before, .vehicle_typhoonclipper .route .continues:after { border-color:#8F2877; }
.vehicle_monsoonclipper h1, .vehicle_monsoonclipper .journeyname { color:#000; background-color:#EA306F; }
.vehicle_monsoonclipper .route > .stop:before, .vehicle_monsoonclipper .route .continues:after { border-color:#EA306F; }
.vehicle_cycloneclipper h1, .vehicle_cycloneclipper .journeyname { color:#000; background-color:#FF7B47; }
.vehicle_cycloneclipper .route > .stop:before, .vehicle_cycloneclipper .route .continues:after { border-color:#FF7B47; }
.vehicle_sunclipper h1, .vehicle_sunclipper .journeyname { color:#FFF; background-color:#948422; }
.vehicle_sunclipper .route > .stop:before, .vehicle_sunclipper .route .continues:after { border-color:#948422; }
.vehicle_moonclipper h1, .vehicle_moonclipper .journeyname { color:#FFF; background-color:#B991C5; }
.vehicle_moonclipper .route > .stop:before, .vehicle_moonclipper .route .continues:after { border-color:#B991C5; }
.vehicle_starclipper h1, .vehicle_starclipper .journeyname { color:#FFF; background-color:#8D6900; }
.vehicle_starclipper .route > .stop:before, .vehicle_starclipper .route .continues:after { border-color:#8D6900; }
.vehicle_skyclipper h1, .vehicle_skyclipper .journeyname { color:#FFF; background-color:#3BBEC6; }
.vehicle_skyclipper .route > .stop:before, .vehicle_skyclipper .route .continues:after { border-color:#3BBEC6; }
.vehicle_stormclipper h1, .vehicle_stormclipper .journeyname { color:#FFF; background-color:#9E283E; }
.vehicle_stormclipper .route > .stop:before, .vehicle_stormclipper .route .continues:after { border-color:#9E283E; }
.vehicle_neptuneclipper h1, .vehicle_neptuneclipper .journeyname { color:#FFF; background-color:#664E8A; }
.vehicle_neptuneclipper .route > .stop:before, .vehicle_neptuneclipper .route .continues:after { border-color:#664E8A; }
.vehicle_galaxyclipper h1, .vehicle_galaxyclipper .journeyname { color:#000099; background-color:#FFDD5A; }
.vehicle_galaxyclipper .route > .stop:before, .vehicle_galaxyclipper .route .continues:after { border-color:#FFDD5A; }
.vehicle_jupiterclipper h1, .vehicle_jupiterclipper .journeyname { color:#000099; background-color:#A2884D; }
.vehicle_jupiterclipper .route > .stop:before, .vehicle_jupiterclipper .route .continues:after { border-color:#A2884D; }
.vehicle_venusclipper h1, .vehicle_venusclipper .journeyname { color:#FFF; background-color:#0B5A2A; }
.vehicle_venusclipper .route > .stop:before, .vehicle_venusclipper .route .continues:after { border-color:#0B5A2A; }
.vehicle_mercuryclipper h1, .vehicle_mercuryclipper .journeyname { color:#FFF; background-color:#85908b; }
.vehicle_mercuryclipper .route > .stop:before, .vehicle_mercuryclipper .route .continues:after { border-color:#85908b; }
/** General **/
body { background: #ccf; margin: 0; min-height: 100%; position: absolute; width: 100%; box-sizing: border-box; padding-bottom: 3em; }
.route a, a.route { text-decoration: none; }
.route h3, .route h1 { text-decoration: none; text-align: center; clear: both; padding: 0; }
.route .status {font-weight: bold; }
.route .status, .route .details { margin: 0 2em; white-space: pre-wrap; }
.stationlines { overflow: hidden; }
.stationlines .route { width: 400px; float:left; clear: both; }
.stationlines .route h3 { margin: 3px; }
#content { margin: 1em; }
/** Footer **/
#footer { background: #999; color: #fff; bottom: 0; left: 0; right: 0; height: 2em; position: absolute; transition: background 1s; }
#footer[data-listening] { cursor:pointer; background: #99c; }
#footer[data-loading] {
background: linear-gradient(90deg, #99c, #99c 25%, #c95 50%, #99c 75%, #c95);
background-size: 400%;
animation: startloading 1s linear, loading 2s 1s linear infinite;
}
@keyframes startloading {
0%{ background-position: left; }
100%{ background-position: 25%; }
}
@keyframes loading {
0%{ background-position: 25%; }
100%{ background-position: right; }
}
#footer[data-failure] { background: #900; }
#footer #lastUpdated { float: right; font-size: smaller; font-family: monospace; margin: 0.8em; }
.soundButton { float: left; border-radius: 1em; color: white; font-size: 1.5em; border: none; padding: 0 0.5em; background: none; }
/* buttons */
.innertext { display: block; }
.route h3, .platform_name, .overview { border-radius: 1em; overflow: hidden; }
.route .innertext, .overview, h1 .innertext { background-image: -webkit-gradient(linear, 0 100%, 0 0, color-stop(0, transparent), color-stop(0.15, transparent), color-stop(0.9, rgba(255, 255, 255, 0.4))); padding: 0.1em; min-height: 1em; line-height: 1em; }
.route h3:active .innertext, .overview:active { background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, transparent), color-stop(0.15, transparent), color-stop(0.9, rgba(255, 255, 255, 0.4))); }
/* fonts (as used by TFL) */
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 { font-family: Georgia, serif; text-align: center; background: #353535; color: #FFFFE7; margin: 0; }
h2, h3{
font-family: Arial, Helvetica, sans-serif;
}
/** Error pages **/
.errorscreen { color: #502; font-size: 2em; text-align: center; }
.errorscreen div:before { content: "Error: "; color: red }
/** Home Page **/
.homepage h1 { text-shadow: rgba(255,255,255,0.6) 2px 2px 0px; color: #000; background: none; }
.overview { display: inline; padding: 0.2em 0.5em; margin: 0.5em 0; cursor: help; background-color: #ccc; font-weight: bold; float: left; }
/** Line Pages **/
.stoplist { margin: 0; }
.stoplist li.stop {
font-size: 2.5em;
zoom: 0.8;
}
.stoplist li.stop a {
color: inherit;
text-decoration: none;
}
.stoplist li.stop a:hover {
text-decoration: underline;
}
.mode_tube .stoplist li.stop {
list-style-image: url('/img/roundel-tube.png');
}
.mode_dlr .stoplist li.stop {
list-style-image: url('/img/roundel-dlr.png');
}
.mode_overground .stoplist li.stop {
list-style-image: url('/img/roundel-overground.png');
}
.mode_elizabeth-line .stoplist li.stop {
list-style-image: url('/img/roundel-elizabeth.png');
}
.stoplist li.stop .symbol {
padding: 0 0.2em;
}
/** Station Pages **/
.platform_name { margin: 1.5em 0 0.5em; }
.platform_name .innertext {
padding: 0 10px;
}
.unused .platform_name .innertext{
background: transparent;
color: #AAA;
}
.departure_board { background: black; width: 100%; table-layout: fixed; border: solid 6px #444; border-radius: 1em; margin: 0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.0, transparent), color-stop(.0, rgba(255,255,255,0.2)), color-stop(.1, rgba(255,255,255,0.2)), color-stop(.1, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,0.2)), color-stop(.6, rgba(255,255,255,0.2)), color-stop(.6, transparent));
background-size: 8px 8px;
font-family: led, monospace;
}
.departure_board tr {
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.0, transparent), color-stop(.0, rgba(255,255,255,0.2)), color-stop(.1, rgba(255,255,255,0.2)), color-stop(.1, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,0.2)), color-stop(.6, rgba(255,255,255,0.2)), color-stop(.6, transparent));
background-size: 8px 8px;
}
.departure_board td { overflow: hidden; text-overflow: ellipsis; }
.departure_board td.routenumber { width: 65px; overflow: visible; }
.departure_board td.departtime { width: 33%; }
.departure_board td.destination { word-wrap: break-word; }
.departure_board a { text-decoration: none; padding: 0 1em; display: block; color: #FFC600; line-height: 20px; }
.departure_board .ghost a {
opacity: 0.4;
pointer-events: none;
cursor: default; }
.departure_board .stoptime { float: right }
@font-face
{
font-family: led;
src: url('/resources/fonts/led');
}
@media (min-width: 750px) {
.departure_board { width: 700px; margin: 0 auto; }
.platform_name { width: 700px; margin: 1.5em auto 0.5em; }
.stationextlink { width: 700px; }
}
/** Train pages see http://www.tfl.gov.uk/assets/downloads/corporate/tfl-line-diagram-standard-issue03.pdf **/
.journey { position: relative; margin: 10px 0; }
.journey .journeyname { width: 1ex; position: absolute; left: 31px; margin: 0; top: 0.7ex; bottom: 0.9ex; box-sizing: border-box; }
.journey .journeyname .routename, .journey .continues .destination { display: none; }
.journey .continues { width: 4ex; overflow: hidden; height: 4ex; position: relative; padding: 0; margin-left: -2.5ex; }
.journey .continues:after { content: " "; display: block; height: 3ex; width: 3.01ex; border: solid 1ex; border-top: none; border-left: none; transform: rotate(45deg); bottom: 1ex; position: absolute; }
/* List of stops */
.route { margin: 0; list-style-type: none; }
/* Normal stops */
.route > .stop { color: #000099; margin: 3ex 0; font-weight: 550; margin-left: 1.6ex; clear: both; }
.route > .stop a { text-decoration: none; color: inherit; }
.route > .stop:before { content: ' '; height: 0; width: 0.66ex; display: block; border-top: solid 0.66ex; float: left; margin-right: 1ex; margin-top: 0.8ex; position: relative;}
.route > .stop:not(.interchange):before { margin-left: -1.6ex;}
/* Interchanges */
.route > .stop.interchange:before { height: 2ex; width: 2ex; background: white; border: solid 0.5ex black!important; border-radius: 1.5ex; margin-left: -3.5ex; position: absolute; margin-top: -0.5ex; }
.route > .stop.interchange .stopname { display:block; font-size: smaller; font-weight: normal;}
/* Terminuses */
.route > .stop:not(.interchange):first-child, .route > .stop:not(.interchange):last-child { margin-top: 0; margin-bottom: 0; }
.route > .stop:first-child { margin-top: 0; }
.route > .stop:last-child { margin-bottom: 0; height: 1.2em;}
.route > .stop:not(.interchange):first-child:before, .route > .stop:not(.interchange):last-child:before { width: 2.32ex; margin-left: -3.26ex; }
.route > .stop:before, .route .continues:after { border-color:#000099;}
.route_bakerloo .route > .stop:before, .route_bakerloo .continues:after { border-color:#996633; }
.route_central .route > .stop:before, .route_central .continues:after { border-color:#CC3333; }
.route_circle .route > .stop:before, .route_circle .continues:after { border-color:#FFCC00; }
.route_district .route > .stop:before, .route_district .continues:after { border-color:#006633; }
.route_hammersmith-city .route > .stop:before, .route_hammersmith-city .continues:after { border-color:#CC9999; }
.route_jubilee .route > .stop:before, .route_jubilee .continues:after{ border-color:#868F98; }
.route_metropolitan .route > .stop:before, .route_metropolitan .continues:after { border-color:#660066; }
.route_northern .route > .stop:before, .route_northern .continues:after { border-color:#000000; }
.route_piccadilly .route > .stop:before, .route_piccadilly .continues:after { border-color:#000099; }
.route_victoria .route > .stop:before, .route_victoria .continues:after { border-color:#0099CC; }
.route_waterloo-city .route > .stop:before, .route_waterloo-city .continues:after { border-color:#66CCCC; }
.route_london-overground .route > .stop:before, .route_london-overground .continues:after { border-color:#FF6600; }
.route_dlr .route > .stop:before, .route_dlr .continues:after { border-color:#009999; }
.route_elizabeth .route > .stop:before, .route_elizabeth .continues:after { border-color:#6950A1; }
.mode_tram .route > .stop:before, .mode_tram .continues:after { border-color:#66cc00; }
.symbol { height: 1em; }
h3 .symbol, h1 .symbol { margin: 0 1em; }
.stop .symbols { display: inline; }
.stop .symbols > .symbol { margin: 0 1ex; }
.interchanges { width: 12ex; font-weight: bold; text-align: center; list-style-type: none; float: right; margin: 0 2ex 2ex 2ex; padding: 0; }
.interchanges > li { font-size: 0.5em; line-height: 3ex; border: solid 1px; color: black; background: white; min-height: 1em; padding: 0 1ex; }
.interchanges > li > a { display: block; }
.interchanges > .tube, .interchanges > .dlr, .interchanges > .overground { border: none; }
.interchanges .symbol { margin: 0.5ex; float: left; }
/** Navigation **/
.backtoall { font-weight: bold; padding: 5px; font-size: 1em; color: #555; border-radius: 10px; display: block; text-decoration: none; margin-bottom: 5px; }
.backtoall:hover { text-decoration: underline overline; }
.homepage .backtoall { display: none; }
/** extlink **/
.stationextlink { display: block; text-decoration: none; color: inherit; margin: 1em auto 0; }
.stationextlink .symbol { margin: 0.5ex; vertical-align: middle; }
/** Announcements **/
.speechcontrol {
font-size: 1.5ex;
font-weight: bold;
margin: 0 2ex;
}
.speechcontrol iframe {
height: 3ex;
width: 20ex;
vertical-align: middle;
}
/** Ribbon style inspired by https://css-tricks.com/snippets/css/corner-ribbon/ **/
.ribbon-wrapper {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.ribbon {
font: bold 15px Sans-Serif;
text-align: center;
text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #CC3333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#CC3333), to(#AA2222));
background-image: -webkit-linear-gradient(top, #CC3333, #AA2222);
background-image: -moz-linear-gradient(top, #CC3333, #AA2222);
background-image: -ms-linear-gradient(top, #CC3333, #AA2222);
background-image: -o-linear-gradient(top, #CC3333, #AA2222);
color: #FFFFFF;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
/* Loading overlay */
#loading {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: rgba(100, 100, 100, 0.5);
color: #fff;
font-size: 2em;
text-shadow: #555 -3px 3px;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}