css/style-map.css

   1 html, body, #live-map, .container.main-content.index {
   2   height: 100% !important;
   3   width:100% !important;
   4   margin: 0px !important;
   5   padding: 0px !important;
   6 }
   7 #archive-map {
   8     height: 350px;
   9 }
  10 body {
  11   font-family: 'Arial', sans-serif;
  12   font-size: 14px;
  13   font-weight: 300;
  14 }
  15 .close {
  16     margin: 7px;
  17     color: rebeccapurple;
  18     position: absolute;
  19     right: 10px;
  20 }
  21 .button{
  22 /*  position:absolute;*/
  23 /*  left:14px;*/
  24   background-color:#fff;
  25   width: 126px;
  26   height: 26px;
  27   text-align:center;
  28   border-top-left-radius: 4px;
  29   border-top-right-radius: 4px;
  30   border-bottom-left-radius: 4px;
  31   border-bottom-right-radius: 4px;
  32   box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  33   border:2px solid #fff;
  34 }
  35 .button:hover{
  36   background-color: #f4f4f4;
  37 }
  38 .button.active{
  39   border:2px solid #991F00;
  40 }
  41 .button .fa{
  42   font-size:1.2em;
  43   margin-top:3px;
  44   color:#1a3151;
  45 }
  46
  47 /*
  48 .zoom-in .fa,
  49 .zoom-out .fa{
  50   font-size:1.0em;
  51   margin-top:6px;
  52 }
  53 .zoom-in{
  54   top:65px;
  55 }
  56 .zoom-out{
  57   top:95px;
  58 }
  59 .geocode{
  60   top:140px;
  61 }
  62 .compass{
  63   top:170px;
  64 }
  65 .weatherradar{
  66   top:220px;
  67 }
  68 .weathersatellite{
  69   top:250px;
  70 }
  71 .weatherprecipitation{
  72   top:280px;
  73 }
  74 .weatherrain{
  75   top:310px;
  76 }
  77 .weatherclouds{
  78   top:340px;
  79 }
  80 .waypoints{
  81   top:380px;
  82 }
  83 .airspace{
  84   top:410px;
  85 }
  86 .notam{
  87   top:450px;
  88 }
  89   */
  90   /*
  91 .showdetails {
  92     top: 55px;
  93     width: 300px;
  94     font: 12px/14px Arial, Helvetica, sans-serif;
  95     text-align: center;
  96     background: white;
  97     background: rgba(255,255,255,0.8);
  98     box-shadow: 0 0 15px rgba(0,0,0,0.2);
  99     border-radius: 12px;
 100     text-align: center;
 101     position: absolute;
 102 }
 103 */
 104 .infobox {
 105     top: 55px;
 106     padding: 16px 18px;
 107     font: 12px/14px Arial, Helvetica, sans-serif;
 108     background: white;
 109     background: rgba(255,255,255,0.8);
 110     box-shadow: 0 0 15px rgba(0,0,0,0.2);
 111     border-radius: 5px;
 112     text-align: center;
 113     position: absolute;
 114     right: 10px;
 115     z-index: 2000;
 116 }
 117 .infobox h4 {
 118     margin: 0 0 5px;
 119     color: #777;
 120 }
 121 .infobox td {
 122     width: initial;
 123 }
 124 .archivebox {
 125     top: 55px;
 126     right: 220px;
 127     padding: 10px 18px;
 128     font: 12px/14px Arial, Helvetica, sans-serif;
 129     background: #FFCA42;
 130     background: rgba(255,206,66,0.8);
 131     box-shadow: 0 0 15px rgba(0,0,0,0.2);
 132     border-radius: 5px;
 133     text-align: center;
 134     z-index: 2000;
 135     position: absolute;
 136     display: none;
 137 }
 138 .archivebox h4 {
 139     margin: 0 0 5px;
 140     color: #777;
 141 }
 142 .archivebox form {
 143     padding: 5px;
 144     margin-bottom: 0px;
 145 }
 146 .range.archive {
 147     width: 200px;
 148     margin-top: 0;
 149 }
 150 .mobile{
 151     display: none !important;
 152 }
 153
 154 .leaflet-container{
 155   font-size:14px;
 156 }
 157 .leaflet-marker-pane .tooltip{
 158     width:95px;
 159     font-size:0.8em;
 160     opacity:0.7 !important;
 161 }
 162 .maptooltip{
 163     font-size: 0.8em;
 164 }
 165 .satellite {
 166     display: inline-block;
 167     content:url(../images/satellite.png);
 168 }
 169
 170 body.page-index .leaflet-popup-content-wrapper{
 171   width:400px;
 172 }
 173 body.page-index .leaflet-popup-content-wrapper a:hover{
 174     text-decoration: underline;
 175 }
 176 body.page-index .leaflet-popup-content-wrapper .left{
 177   display:inline-block;
 178   width:50%;
 179   vertical-align:top;
 180 }
 181 body.page-index .leaflet-popup-content-wrapper .left img{
 182   -webkit-border-top-left-radius: 12px;
 183   -moz-border-radius-topleft: 12px;
 184   border-top-left-radius: 12px;
 185   width:100%;
 186 }
 187 body.page-index .leaflet-popup-content-wrapper .leaflet-popup-content{
 188   width: 100% !important;
 189   margin:0px;
 190 }
 191 body.page-index .leaflet-popup-content-wrapper .right{
 192   display:inline-block;
 193   width:50%;
 194   vertical-align:top;
 195 }
 196 body.page-index .leaflet-popup-content-wrapper .right .callsign-details{
 197   background-color:#1a3151;
 198   color:#fff;
 199   padding:10px;
 200   -webkit-border-top-right-radius: 12px;
 201   -moz-border-radius-topright: 12px;
 202   border-top-right-radius: 12px;
 203 }
 204 body.page-index .leaflet-popup-content-wrapper .title{
 205   background-color:#1a3151;
 206   color:#fff;
 207   padding:10px;
 208   -webkit-border-top-right-radius: 12px;
 209   -moz-border-radius-topright: 12px;
 210   border-top-right-radius: 12px;
 211   -webkit-border-top-left-radius: 12px;
 212   -moz-border-radius-topleft: 12px;
 213   border-top-left-radius: 12px;
 214 }
 215 body.page-index .leaflet-popup-content-wrapper .title .title-details a{
 216   font-size:1.5em;
 217   color:#fff;
 218 }
 219
 220 body.page-index .leaflet-popup-content-wrapper .name{
 221   padding:4px;
 222 }
 223 body.page-index .leaflet-popup-content-wrapper .name span{
 224     display:block;
 225     text-transform: uppercase;
 226     color:#aaa;
 227 }
 228 body.page-index .leaflet-popup-content-wrapper .type{
 229   padding:4px;
 230 }
 231 body.page-index .leaflet-popup-content-wrapper .type span{
 232     display:block;
 233     text-transform: uppercase;
 234     color:#aaa;
 235 }
 236
 237 body.page-index .leaflet-popup-content-wrapper .acars{
 238   padding:4px;
 239 }
 240 body.page-index .leaflet-popup-content-wrapper .acars span{
 241     display:block;
 242     text-transform: uppercase;
 243     color:#aaa;
 244 }
 245 body.page-index .leaflet-popup-content-wrapper .waypoints{
 246   padding:4px;
 247 }
 248 body.page-index .leaflet-popup-content-wrapper .waypoints span{
 249     display:block;
 250     text-transform: uppercase;
 251     color:#aaa;
 252 }
 253 body.page-index .leaflet-popup-content-wrapper .bottom{
 254   background-color:#1a3151;
 255   color:#fff;
 256   padding:10px;
 257   border-radius: 0 0 12px 12px;
 258 }
 259 body.page-index .leaflet-popup-content-wrapper .right .callsign-details .callsign a{
 260   font-size:1.5em;
 261   color:#fff;
 262 }
 263 body.page-index .leaflet-popup-content-wrapper .right .airports .airport{
 264   display:inline-block;
 265   width:40%;
 266   vertical-align:top;
 267   text-align:center;
 268   padding:5px;
 269   margin-bottom:5px;
 270 }
 271 body.page-index .leaflet-popup-content-wrapper .right .airports .fa{
 272   display:inline-block;
 273   margin-top:10px;
 274   font-size:1.5em;
 275 }
 276 body.page-index .leaflet-popup-content-wrapper .right .airports .airport .code a{
 277   font-size:1.4em;
 278   font-weight:bold;
 279   color:#1a3151;
 280     display:block;
 281 }
 282 body.page-index .leaflet-popup-content-wrapper .right .airports .airport .time{
 283   display:inline-block;
 284   font-size:0.8em;
 285   font-style:italic;
 286   color:#92a2b7;
 287 }
 288 body.page-index .leaflet-popup-content-wrapper .details{
 289   padding:10px;
 290   padding-top:5px;
 291 }
 292 body.page-index .leaflet-popup-content-wrapper .details div{
 293   margin-bottom:5px;
 294   padding-bottom:5px;
 295   width:45%;
 296   display:inline-block;
 297   vertical-align:top;
 298   margin-right:5%;
 299   border-bottom:1px solid #eee;
 300 }
 301 body.page-index .leaflet-popup-content-wrapper .details div:nth-child(6),
 302 body.page-index .leaflet-popup-content-wrapper .details div:nth-child(7){
 303   border-bottom:0px;
 304 }
 305 body.page-index .leaflet-popup-content-wrapper .details span{
 306   display:block;
 307   text-transform:uppercase;
 308   color:#aaa;
 309 }
 310 body.page-index .leaflet-popup-content-wrapper .details div a{
 311     color:#333;
 312 }
 313
 314 /* new details */
 315
 316 .showdetails a:hover{
 317     text-decoration: underline;
 318 }
 319
 320 .showdetails {
 321   position: absolute;
 322   right: 5px;
 323   top: 160px;
 324   margin: 0px;
 325     width: 300px;
 326     font: 12px/14px Arial, Helvetica, sans-serif;
 327     text-align: center;
 328     background: white;
 329     background: rgba(255,255,255,0.8);
 330     box-shadow: 0 0 15px rgba(0,0,0,0.2);
 331     border-radius: 12px;
 332     text-align: center;
 333     z-index: 2000;
 334 }
 335 .showdetails img {
 336   display:inline-block;
 337   margin: 5px;
 338   max-width: 280px;
 339   width: 90%;
 340   max-height: 280px;
 341 }
 342 .showdetails .blocked {
 343   display:inline-block;
 344   margin: 5px;
 345   max-width: 25px;
 346   width: 90%;
 347   max-height: 25px;
 348 }
 349 .showdetails .callsign-details{
 350   background-color:#1a3151;
 351   color:#fff;
 352   padding:10px;
 353   border-radius: 12px 12px 0 0;
 354   margin: 2px;
 355 }
 356 .showdetails .acars{
 357   padding:4px;
 358 }
 359 .showdetails .acars span{
 360     display:block;
 361     text-transform: uppercase;
 362     color:#aaa;
 363 }
 364 .showdetails .notamtext{
 365   padding:4px;
 366 }
 367 .showdetails .notamtext span{
 368     display:block;
 369     text-transform: uppercase;
 370     color:#aaa;
 371 }
 372 .showdetails .date{
 373   padding:4px;
 374 }
 375 .showdetails .date span{
 376     display:block;
 377     text-transform: uppercase;
 378     color:#aaa;
 379 }
 380 .showdetails .waypoints{
 381   padding:4px;
 382 }
 383 .showdetails .waypoints span{
 384     display:block;
 385     text-transform: uppercase;
 386     color:#aaa;
 387 }
 388 .showdetails .bottom{
 389   background-color:#1a3151;
 390   color:#fff;
 391   margin: 2px;
 392   padding: 10px;
 393   border-radius: 0 0 12px 12px;
 394 }
 395 .showdetails .callsign-details .callsign a{
 396   font-size:1.5em;
 397   color:#fff;
 398 }
 399 .showdetails .airports .airport{
 400   display:inline-block;
 401   width:40%;
 402   vertical-align:top;
 403   text-align:center;
 404   padding:5px;
 405   margin-bottom:5px;
 406 }
 407 .showdetails .airports .fa{
 408   display:inline-block;
 409   margin-top:10px;
 410   font-size:1.5em;
 411 }
 412 .showdetails .airports .airport .code a{
 413   font-size:1.4em;
 414   font-weight:bold;
 415   color:#1a3151;
 416     display:block;
 417 }
 418 .showdetails .airports .airport .time{
 419   display:inline-block;
 420   font-size:0.8em;
 421   font-style:italic;
 422   color:#92a2b7;
 423 }
 424 .showdetails .details{
 425   padding:10px;
 426   padding-top:5px;
 427 }
 428 .showdetails .details div{
 429   margin-bottom:5px;
 430   padding-bottom:5px;
 431   width:45%;
 432   display:inline-block;
 433   vertical-align:top;
 434   margin-right:5%;
 435   border-bottom:1px solid #eee;
 436 }
 437 .showdetails .details div:nth-child(6),
 438 .showdetails .details div:nth-child(7){
 439   border-bottom:0px;
 440 }
 441 .showdetails .details span{
 442   display:block;
 443   text-transform:uppercase;
 444   color:#aaa;
 445 }
 446 .showdetails .details div a{
 447     color:#333;
 448 }
 449 .latitude {
 450     text-transform: none;
 451     display: inline-block !important;
 452     color:#000000 !important;
 453 }
 454 .longitude {
 455     text-transform: none;
 456     display: inline-block !important;
 457     color:#000000 !important;
 458 }
 459 .heading {
 460     text-transform: none;
 461     display: inline-block !important;
 462     color:#000000 !important;
 463 }
 464 .altitude {
 465     text-transform: none !important;
 466     display: inline-block !important;
 467     color:#000000 !important;
 468 }
 469 .groundaltitude {
 470     text-transform: none !important;
 471     display: inline-block !important;
 472     color:#000000 !important;
 473 }
 474 .realspeed {
 475     text-transform: none !important;
 476     display: inline-block !important;
 477     color:#000000 !important;
 478 }
 479 #realspeed {
 480     visibility: hidden;
 481 }
 482
 483 .atcname{
 484   background-color:#3d76bf;
 485   color:#fff;
 486   padding:5px;
 487   border-radius: 12px 12px 0 0;
 488 }
 489 .map-temp{
 490     color:#ff2731;
 491     font-size:1.4em;
 492     font-weight:bold;
 493 }
 494
 495
 496 /* Mobile (Portrait/Landscape) */
 497 @media only screen and (max-width: 767px) {
 498
 499     .mobile{
 500         display: block !important;
 501     }
 502     .nomobile{
 503         display: none !important;
 504     }
 505     .leaflet-control-attribution{
 506         display:none;
 507     }
 508     body.page-index .leaflet-popup-content-wrapper{
 509       width:200px;
 510     }
 511     body.page-index .leaflet-popup-content-wrapper .right .callsign-details{
 512         height:66px;
 513         padding-top:5px;
 514     }
 515     body.page-index .leaflet-popup-content-wrapper .details .airports{
 516         width:100%;
 517     }
 518     body.page-index .leaflet-popup-content-wrapper .details .airports .airport{
 519       display:inline-block;
 520       width:36%;
 521       vertical-align:top;
 522       text-align:center;
 523       padding:5px;
 524       margin-bottom:5px;
 525       border-bottom:none;
 526     }
 527     body.page-index .leaflet-popup-content-wrapper .details .airports .fa{
 528       display:inline-block;
 529       margin-top:10px;
 530       font-size:1.5em;
 531     }
 532     body.page-index .leaflet-popup-content-wrapper .details .airports .airport .code a{
 533       font-size:1.4em;
 534       font-weight:bold;
 535       color:#1a3151;
 536     }
 537
 538     .leaflet-marker-pane .tooltip{
 539         font-size:0.7em;
 540         width:50px;
 541
 542     }
 543
 544 }
 545 .ui-dialog { z-index: 3000 !important ;}
 546 .datatabledata {
 547         z-index: 2000;
 548         position: absolute;
 549         margin: 0px;
 550         display: block;
 551         overflow: auto;
 552         height: 20em;
 553         width: 100%;
 554         background-color: white;
 555 }
 556