/* For guideline purposes only! */
/* Goal is to fit #monitorCanvas inside the #monitorBoundary */
/* To turn off boundary, set "display" property to 'none'. */
/* To turn on boundary, set "display" property to 'block'. */

body
{
    	background-color:#FFFFFF;
}

#monitorBoundary {
	display: none;
	/*position: absolute;*/
	top: 0px;
	left: 0px;

	width:100%;
	border: 1px dashed red;
}

html>body #monitorBoundary {


}



.clear
{
    clear:both;
}

div.accessFooter{
		
}


.accessFooter {
	/*position: absolute;*/
	/*top: 740px;
	left: 0px;
	z-index:99;
	color:#000;
	margin-top:0px;
	padding-top:40px;
	height:30px;
	border-top:0px;
	clear:both;*/
}


div.monitorResult p
{
    padding-left:20px;
}

/* For Monitor text appearance in general. */
div.monitorResult {
	font-size: 13px;
	color:#424347;
	margin-left:auto;
	margin-right:auto;
	max-width:900px;
	/*width:100%;*/
	/*background-image:url(bg_content.jpg);
	background-repeat:repeat-y;*/
	/*height:500px;*/
	overflow:auto;
}


/* For Airline and Airport tables. */

div.monitorResult td
{
    padding-top:2px;
    padding-bottom:2px;
}

div.monitorResult td.code {
	text-align:left;
	color: #424347;
}

div.monitorResult td.divider {
	color: #424347;
}


div.monitorResult td.label {
	color: #424347;
}

div.monitorResult td.monitorLegendColumn 
{
	/*width:500px;*/
	padding-top:10px;
	padding-left:15px;
	color:#424347;
}

div.monitorResult td.monitorLegendColumn td 
{
	padding:1px;
	padding-top:2px;
	padding-bottom:2px;
}


#monitorFlightIconLegendDepartures{padding-top:10px;}
#monitorFlightIconLegendArrivals{padding-top:5px;}



/*************************
 * Extended List
 * (when user clicks "More Airlines" or "More Airports")
 *************************/
 
div.monitorExtended {
	color: #000;
	padding: 10px;
	text-align: center;
}

div.monitorExtended table{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

div.monitorExtended table td{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

/* Header */
div.monitorExtended h1 {
	font-size: 13px;
	color: #000000;	
	padding-bottom:20px;
		

	margin: 0px;
	margin-bottom: 3px;
}


/* The "Close" button. */
div.monitorExtended p {
	margin-top: 2em;
}

div.monitorExtended a:link {
	color: #000;
}

div.monitorExtended a:visited {
	color: #000;
}




/**************************
 * Monitor Canvas
 * (Fit this inside the Monitor boundary.)
 **************************/

/* Positioning. */
div.monitorCanvas {
	/*position: absolute;
	top: 0px;
	left: 0px;
	height: 500px;
	width:100%;*/
	border:none;
}

html>body div.monitorCanvas {
	/*left: 0px;
	width:100%;*/
}




/*
 * Title Bar
 */
div.monitorTitleBar {

	position: relative;
	top: 0px;
	left: 0px;
	width: 636px;
	height: 0px;
	padding-top: 7px;
	text-align: LEFT;
	font-size: 16px;
	font-weight: bold;
	color: #494542;
	padding-left:10px;
	display:none;
}

html>body div.monitorTitleBar {
	
	height: 24px;
}
 



/*
 * Monitor Map.
 */
 
/* "Map Canvas" */
div.monitorMap {
	/*
    position: absolute;
	padding-top: 0px;
	left: 0px;
	height: 500px;
    */
	overflow:hidden;
	margin-left:0px;
	width:100%;
    margin-left: auto;
    margin-right: auto;
}




/* Map image placement _inside_ "map canvas" */
div.monitorMap img {
	display: inline;
	top: 0px;
	margin-top: 0px;
	margin-left: 0px;
	width:900px;
    	
	margin-bottom:0px;
	margin-top:0px;
	border: none;
	margin-top:10px;
	text-align: center;
}


div.monitorMap img:before { 
  content: " ";
  display: block;
  position: absolute;
  margin-left:auto;
  margin-right:auto;
  width: 900px;
  height:150px;
  line-height:150px;
  max-width:900px;
  background-color: rgb(230, 230, 230);
}

div.monitorMap img:after { 
  content: "Loading flights to and from airport."; //customer requested to remove broken image icon before map image is loaded
  display: block;
  font-style: normal;
  color: rgb(100, 100, 100);
  position: absolute;
  line-height:150px;
  left: 0;
  width: 100%;
  text-align: center;
}



/***************/
/* Info blocks */
/***************/

/*
 * Monitor general info block.
 */
 
div.monitorInfo {
	background-color: #000;
	padding: 2px;
}


/* Colors of links in info blocks. */
div.monitorInfo a:link {
	color: #00a;
}

div.monitorInfo a:visited {
	color: #00a;
}



/*
 * FlightView branding.
 */
div.monitorFVBranding {
	display:none;
	/*position: absolute;*/
	z-index:99;
	bottom: 0px;
	right: 0px;

	width: 189px;
	height: 50px;

	padding: 3px;
	text-align: center;
}


	
html>body div.monitorFVBranding {
	width: 183px;
	height: 44px;
}

div.monitorFVBranding a{
	display:none;
}

/*
 * Status bar.
 */
div.monitorStatus {
	display: none;
	/*position: absolute;*/

	bottom: 0px;
	left: 0px;

	width: 540px;
	height: 34px;

	padding-top: 5px;
}




html>body div.monitorStatus {
	width: 534px;
	height: 25px;

}


/*****************/
/* Legend blocks */
/*****************/

/*
 * Monitor general legend block.
 */
 

div.monitorLegend {
	padding: 0px;
	background:none transparent;
	color: #424347;
	border-bottom: none;
	float:left;
	width:33%;
	padding-bottom:10px;


}

html>body div.monitorLegend {

}


/* Links in legend blocks. */
div.monitorLegend a:link {
	color: #002c55;
}

div.monitorLegend a:visited {
	color: #002c55;
}

/* Legend headers. */

div.monitorLegend h1 {
	font-size: 14px;
	color: #404040;	
	margin: 0px;
	margin-bottom:5px;
	font-weight:700;
	background-color:#d6d6d6;
	padding:12px;
	padding-left:0px;
	padding-right:0px;
	width:100%;
	text-indent:20px;
	border-top:1px solid #cccccc;
	border-bottom:1px solid #cccccc;	
}




/*
 * Flight Icon Legend
 */


/* Positioning. */
div.monitorFlightIconLegend {
	/*position: absolute;
	top: 500px;
	left: 258px;
	height: 240px;
	width:200px;
	border-left:3px solid #d6cdae;*/
}


/*
 * Airline Legend
 */
 
/* Positioning. */
div.monitorAirlineLegend {
	/*position: absolute;
	top: 500px;
	left: 0px;
	height: 240px;
	width:250px;*/
	
}


html>body div.monitorAirlineLegend {

}

div.monitorAirlineLegend p {
	bottom:10px;
	left:10px;
	/*position: absolute;*/
}


div.monitorAirportLegend{
	/*position: absolute;
	top: 500px;
	left: 230px;
	height: 100px;
	width:200px;
	display:none;*/
}


/* 
 * Weather Legend 
 */

/* Positioning. */
div.monitorWeatherLegend {
	/*position: absolute;
	top: 500px;
	right: 0px;
	height: 250px;
	border: none;
	left: 483px;
	border-left:3px solid #d6cdae;
	width:34%;*/
	float:left;
	
}

html>body div.monitorWeatherLegend {

}

/* Color of text. */
div.monitorWeatherLegend table {

	margin:0px;
	margin-left:20px;
	margin-top:15px;
}

div.monitorWeatherLegend td.precip {
	width:30px;
}

div.monitorWeatherLegend td {
	color: #424347;
}

div.monitorWeatherLegend img {
	width:100%;
	height:15px;
	margin-bottom:5px;
}



/*
 * Flight Info Legend
 */
 
/* Positioning. */
div.monitorFlightInfoLegend {
	/*position: absolute;*/
	bottom: 0px;
	right: 0px;
	height: 110px;
}


html>body div.monitorFlightInfoLegend {

	height: 90px;
}

/*
 * Custom Chooser
 */
#customChooser {
	/*position: absolute;
	top:610px;
	left: 280px;
	height: 20px;*/
}

#customChooser h1{
	display:block;
}

html>body #customChooser {

}


#customChooser table {
	color: #424347;
    padding-left: 18px;
    padding-top: 10px;
}

#customChooser table td.chooserLabel {
	width:auto;
	text-align:left;
	text-indent:-7px;
	
}

#customChooser table td.chooserUI {
	padding-right:0px;
	width:10px;
}


#customChooser img {
	border: none;
	position:relative;
	top: 2px;
	left: 0px;
}

html>body #customChooser img {

}


#customDelay {
	/*position: absolute;*/
	top: 0px;
	right: 0px;
	width:	189px;
	height: 29px;
	background-color: #7D95D5;	
	z-index:99;
}

#customDelay img {
	border: none;
	position:relative;
	left:2px;
	top:2px;
}


div.monitorAirportLegend p
{
	top:125px;
	left:5px;
}

table
{
    font-size:13px;
}

#airlinesLegend
{
 
}
#airlinesLegend table
{
    margin-left:20px;
    margin-top:10px;
}

#weatherLegend
{
    width:34%;
}

#weatherLegend table
{
    margin-left:20px;
    margin-top:10px;
}

#weatherLegend img {
	width:110px;
}

#weatherLegend .heavy{
	text-align:right;
}

#panynjChooser table{
	margin-left:20px;
	margin-top:10px;
	width:175px;
}


.chooserLabel label:hover{
	cursor:pointer;
}

.chooserLabel.arrival label{
	background-image:url(/fvaccess2/res/img/Monitor/radar08PlaneSmall.gif);
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:25px;
	display:inline-block;
}

.chooserLabel.departure label{
	background-image:url(/fvaccess2/res/img/Monitor/maroonPlaneSmall.gif);
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:25px;
	display:inline-block;
}

#fvlib-container {
	margin: 1em;
	padding: 2ex;
	box-shadow: none;
}

#fvlib-map {
	margin-bottom: 0;
}

.leaflet-airport-tooltip {
	margin-top: 3px;
}

/*Responsive Layout Code*/


@media (max-width: 800px)
{
    div.monitorMap {width:100%;}
    div.monitorMap img{width:100%;margin-top:0px;}
}

@media (max-width: 720px) 
{
    /*div.monitorMap {width:480px;}
    div.monitorMap img{width:480px; height:320px; margin-left:auto; margin-right:auto; margin-bottom:10px;}*/

     .ffResultIndividual table.infoHeader th,    
    .ffResultIndividual table.infoHeader td,
    .ffResultIndividual table.info th,    
    .ffResultIndividual table.info td
    {
        font-size:11px;
    } 


    /*div.monitorMap {width:100%; text-align:center;}
    div.monitorMap img{width:300px;height:200px; margin-left:auto; margin-right:auto; margin-bottom:10px;}*/
        
    #ffStatusSummary
    {
        font-size:10px;
    }
    
    div.monitorLegend
    {
        width:100%;
        float:none;
        border-top:0px;
    }
    div.monitorWeatherLegend table 
    {
        width:50%;
    }
 
    #weatherLegend
    {
        width:100%;
    }
    
 
}

@media (max-width: 320px)
{
    /*
    div.monitorMap {width:100%; text-align:center;}
    div.monitorMap img{width:300px; height:200px; margin-left:auto; margin-right:auto;}
    */
}