html{
 box-sizing:border-box;
 
}
*, *:before, *:after{

box-sizing:inherit;
}

body{
font-family: sans-serif;
margin:0px;
padding:10px;



/*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%); 
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%); 
background:url('../images/waves.gif') no-repeat;   */

        background-image: url("http://www.pngmet.gov.pg/images/waves.gif"); 
        background-repeat: no-repeat;
        background-size: cover; 
		background-size: 100% 100%; 
}

.top > a{
padding:0px;
}

.header_div{
display:flex;
width:100%;
border:0px solid red;
padding:0px;
justify-content:center;
align-items:center;
/* height:200px; */ 
}
.pngnws_logo_div{
flex:1;
border:0px solid green;
min-width:0px;
padding:0px;

}
.pngnws_logo_div > img{
                         max-width:100%;
                         /* height:auto; */
						 max-height:100px;
                         /* height:160px; */						 
                        }
						
.page_header_sec2_div{
flex:3; 
border:0px solid yellow;
padding:0px;

}

.png_logo2_div{
flex:1;
min-width:0px;
border:0px solid white;
padding:0px;
}
.png_logo2_div > img{
max-width:100%;
/* height:auto; */
max-height:100px;
/* height:160px; */
}

						


a{
 color:white;
 font-weight:100;
 letter-spacing:2px; /* Original letter-spacing:2px; */
 text-decoration:none;
 background:rgba(0,0,0,0.2);
 padding:20px 5px;
 display:inline-block;
 width:100%;
 text-align:center;
 transition:all 0.5s;
}

a:hover{
background:rgba(0,0,0,0.3);

}

/*#######################################################################################*/
 /* unvisited link */

 /*
 .div_map_stations > a:link {
    color: red;
}

/* visited link *
.div_map_stations > a:visited {
    color: green;
}

/* mouse over link *
.div_map_stations > a:hover {
    color: hotpink;
}

/* selected link *
.div_map_stations > a:active {
    color: blue;
} */
/*#######################################################################################*/


/* Addition 1 on Saturday 03/09/2016 Starts Here */
.toggleNav{
  display:none;
  
}
/*#element_to_pop_up >a{
	margin:0px; 
	padding:5px; 
	width:auto; 
	text-align:left;
} */
#popout_about_us>a{
    margin:0px; 
	padding:5px; 
	width:auto; 
	text-align:left;	
	
}
#popout_contact_us > a{
    margin:0px; 
	padding:5px; 
	width:auto; 
	text-align:left;	
	
}

	

/*img{
width:100%;
} */
/* Addition 1 on Saturday 03/09/2016 Ends Here   */
.wrapper{
 max-width:1000px; /* max-width:1500px; */
 margin:0 auto;
 min-height:100vh;
 
 /* position:relative;
z-index:1; 
 /* padding:50px; /* Old */
 
}

/* Addition 2 on Saturday 03/09/2016 Starts Here */



input{
   padding:10px;
   border:0;
}
#form{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  
  
}
section, footer{
  text-align:center;
  background:rgba(0,0,0,0.2);
  padding:20px;
  margin:0px 0;
  color:white;
  font-weight:100;
}

/* Addition 2 on Saturday 03/09/2016 Ends Here   */

/* ++++++++++++++ Flex Container Starts Here +++++++++++++ */

.flex-nav ul{
 border:0px solid #663399; /* Original: border:1px solid black;  */
 list-style:none;
 /* margin:0px; */
 margin-bottom:1px;
 padding:0px;
 display:flex;
}

/* Addition 3 on Saturday 03/09/2016 Starts Here */
         /* Flex Items  */
.flex-nav li{
   flex:4;
   
}
.flex-nav .social{
     display:flex;
     flex:2; 
} 

/* Addition 3 on Saturday 03/09/2016 Ends Here   */


@media all and (max-width:1000px){ /* ############## (1). First Media Item Starts Here ###########  */
/* Addition 4 on Saturday 03/09/2016 Starts Here */

/* --------------- I commented the below code on Thursday 16/04/2017 --------- */   
   /*.flex-nav ul{
       flex-wrap:wrap;
   } */
/* --------------- I commented the above code on Thursday 16/04/2017 --------- */

#map{flex-wrap:wrap;}
            
   .flex-nav li{
        flex:1 1 50%; /* Original: flex:1 1 50%;  */
		
   }
   .flex-nav .social{
        flex:1 1 25%; /* Original: flex:1 1 25%;  */
		
  }
 
/* ------- My own coade starts here ---------- */
  .box-set{flex-wrap:wrap;}
  
  .signup{flex-wrap:wrap;}
  
  
  
/* -------- My own code ends here --------------- */ 
   
/* Addition 4 on Saturday 03/09/2016 Ends Here   */
}/*  ############################## (1). First Media Item Ends Here ###############################  */

@media all and (max-width:500px){/* %%%%%%%%%%%%%%% (2). Second Media Item Starts Here %%%%%%%%%%%%  */

/* --------- I added the below code on Thursday 16/04/2017 -------------- */   
    .flex-nav ul{
       flex-wrap:wrap;
	   flex-direction:column;
   }  
/* --------- I added the above code on Thursday 16/04/2017 -------------- */

#map{display:flex;}

   .flex-nav li{
        flex-basis:100%;
		
   }
   /* Flex Container */
   .wrapper{
      display:flex;
	  flex-direction:column;
   }
   /* Flex Item */
   .wrapper > *{
     order:9999;  
   }
   .flex-nav{
     order:1;
     	 
   }
   .toggleNav{
     display:block;
   }
   .flex-nav ul{
     display:none;
   }
   .flex-nav ul.open{
      display:flex;
   }
   .top{
        order:2;
   }
   
   .box-set{order:3;}
   
   #display{order:4;}
   #displaytwo{order:5;}
   
   /* .signup{
      order:6;
   } */
/* --------- My own code Starts Here ----------  */



/* .signup{display:flex; flex-direction:column;} */




/*############## Footer Links Starts Here ####################*/
.footer_links{flex-wrap:wrap;}
.footer_links{
  display:flex;
  flex-direction:column;  
}
.footer_links{
  order:6;  
}

.footer_links_categories{
	display:flex;
  flex-direction:column;
} 

/*
.footer_lniks_cat1{
	order:6;
}
.footer_lniks_cat2{
	order:7;
}
.footer_lniks_cat3{
	order:8;
} */



.follow_us_fb{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.follow_us_fb{
  order:7;	
} 

/*############## Footer Links Ends Here ##################*/

/*\\\\\\\\\\\\\\\\\\\\\ ESCAP STARTS HERE \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.escap_div_img{
	display:flex;
}

.escap_div_img > img{
	max-width:100%; 
    /* height:auto; */
    height:auto; 
    /* height:160px; */ 
}
/*\\\\\\\\\\\\\\\\\\\\\ ESCAP ENDS HERE \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/


/* --------- My own code Ends Here ----------  */   

}/*  %%%%%%%%%%%%%%%%%%%%%%%%%% (2). Second Media Item Ends Here %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  */

/* ++++++++++++++ Flex Container Ends Here +++++++++++++ */


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ Styling for the Main Content starts Here $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

			   
			   


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ Styling for the Main Content ends Here $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* -------------------------------- Styling for Sign Up Stats Here --------------------------------------------------------------------------------- */
.signup{
display:flex;

	
}


.signup_form{
	flex:1;
	flex-direction:column;
	background:rgba(0,0,0,0.2);
	padding:5px;
	margin-right:2px;
	
}
.signup_form_instruction{
    padding-left:10px;
	margin-bottom:10px;
	text-align:left;
}

.signup_registered_users{
	flex:1;
	/* height:200px; */
	border:0px solid red;
	background:rgba(0,0,0,0.2);
	display:flex;
	justify-content:center;
	align-content:center;
	flex-direction:column; 
	
}.inner_div_signup_registered_users{
	                                padding-left:20px;
                                    padding-right:20px;									
	                                border:0px solid white;
								   }.inner_div_signup_registered_users  > a{
									                                      border:0px solid red;
																		  border-radius:15px;
								                                          }

/* -------------------------------- Styling for Sign Up Ends Here --------------------------------------------------------------------------------- */




.map_outer_div{
	display:flex;
	border:0px solid red;
	
}

#map{
	 
		
     width:1000px;
     height:500px; 
	 border:0px solid yellow;
   }
 #display{
	 display:flex;
	 margin-top:2px;
	 border:0px solid blue;
	 justify-content:center;
	
 }  
 
 #displaytwo{
	 display:flex;
	 justify-content:center;
	 margin:0px;
	 padding:0px;
     border:0px solid red;
     	 
 }
 



/* =====================================================styling for z-index starts here ======================================================================== */

.box-set{
  display:flex;
  padding:0px;
  margin:0px;
  position:relative;
  flex-direction:column; 
}

.map_outer_div{
 display:flex;
  position:relative;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  z-index:10;
  width:100%;	
}
/* =================================================================================================================================== */

.wrapper_inner_div{
    display:flex;
	flex-direction:column; 
	justify-content:flex-start;
	position:absolute;
	z-index:100;

  }

 .footer_map{
	position:absolute;
	z-index:100;
	background:rgba(0,0,0,0.2);
	top:476px;
	padding-top:3px;
	padding-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	margin:0px;
}
  /* ---------------------------- Code for embedded drop down menu starts here --------------------------------------- */
/* Dropdown Button */
.dropbtn {
    /* background-color: #4CAF50; */
	background:rgba(0,0,0,0.2);
    color: white; 
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
	width:200px;
	margin-bottom:1px;
	
}
.dropbtn:hover{
    background:rgba(0,0,0,0.5);

}

/* The container <!--<div> --> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	/* background:rgba(0,0,0,0.1); */
    /* min-width: 160px; */
	min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	
	
}

/* Links inside the dropdown */
.dropdown-content a {
    
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display:block;
	background-color:transparent;
	/* color:white; */

}

.dropdown-content a{
    color:white;
	background:rgba(0,0,0,0.4);
	margin-bottom:1px;
	
}
.dropdown-content a:hover{
   
	background:rgba(0,0,0,0.5);
	
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    
	background:rgba(0,0,0,0.5);
	
	
}


/* ================================== dropbtn_2 ======================================= */
.dropdown_sigmet{
  position: relative;
  display: inline-block;
  
}
.dropdown-sigmet{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	
	
}

/* Links inside the dropdown */
.dropdown-sigmet a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	
}

.dropdown-sigmet a{
    color:white; 
	background:rgba(0,0,0,0.4);
	margin-bottom:1px;
	padding: 16px;
    font-size: 16px;
}

/* Change color of dropdown links on hover */
.dropdown-sigmet a:hover {
 background:rgba(0,0,0,0.5);
 /* background-color: #f1f1f1; */
 
 }

/* Show the dropdown menu on hover */
.dropdown_sigmet:hover .dropdown-sigmet {
    display: inline-block;
	background-color:transparent;
	left:201px;
	top:0px;
	


}



.dropbtn_2{
   
	background:rgba(0,0,0,0.2);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
	width:200px;
	margin-bottom:1px;

	
}

.dropbtn_2:hover{
   background:rgba(0,0,0,0.5);
}

/* ========================== dropbtn_3 ============================== */

.dropbtn_3{
   
	background:rgba(0,0,0,0.2);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
	width:200px;
	margin-bottom:1px;
	
}

.dropbtn_3:hover{
   background:rgba(0,0,0,0.5);
}


/* ---------------------------- Code for embedded drop down menu ends here  --------------------------------------- */

#avi_fc{
 margin-right:2px;
 padding:0px;
 
 
}

#avi_warnings{
 margin-right:2px;
 padding:0px;
}

#metar{
margin-right:2px;
 padding:0px;
} 

button:focus { outline-style: none; }
  
.display_content{
display:flex;
height:100vh;
background:rgba(0,0,0,0.3);
 /* display: none; */
}


/* =====================================================styling for z-index ends here ======================================================================== */
/*#################################################################################################################################################*/
/*#################################################################################################################################################*/
/*#################################################################################################################################################*/
/*#################################################################################################################################################*/
/*#################################################################################################################################################*/

/* ---------------------------------------------------------------- Styling for map.js starts here ---------------------------------------------- */

.div_map_stations{
display:flex;
flex-direction:column;
justify-content:center;	
background:rgba(0,0,0,0.3);
}

.div_map_stations > img{
  width:100%;
  height:300px; 
 /* max-height:100px; */
 /* height:160px; */
}

.div_from_js_file_time_series{
	display:flex;
	justify-content:center;
	background:rgba(0,0,0,0.5);
	border:0px solid blue;
	width:100%;
	height:100%;
	padding:0px;
}
.div_from_js_file_time_series > img{
	padding:5px;
	margin:0px; 
	width:100%;
	height:auto;

	font: bold 45px Courier New;
	font-weight:900;
	color:white; 
	text-align:center;
}



/* ---------------------------------------------------------------- Styling for map.js ends here ---------------------------------------------- */







/*+++++++++++++++++++++++++++++++++++++++++++++ Styling For footer_links Starts Here ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.footer_links{
	display:flex;
	flex-direction:row;
	
	background:rgba(0,0,0,0.1);
	padding:0px;
	margin-top:1px;
	margin-bottom:0px;
	border:#999 dotted 1px;
	justify-content:center;
	
}


.footer_links_categories{
 display:flex;
 flex-direction:column;
 justify-content:center;
 width:100%;
}


.header_footer_links_categories{
	background:rgba(0,0,0,0.1);
	padding:5px;
	text-align:center;
	margin-bottom:1px;
}
.inner_sec_footer_links{
	display:flex;
    flex-direction:column;
    justify-content:left;
	
}


.inner_sec_footer_links_div{
	display:flex;
	flex-direction:row;
}
.inner_sec_footer_links_div >a{
	text-decoration:underline;
	color:blue;
	background:rgba(0,0,0,0);
	padding:0px;
	margin:0px;
	width:auto;
    
	font-family:Courier New;
    text-align:left;	
    
}  
.inner_sec_footer_links_div >a:hover{color:#00FFFF;}
.inner_sec_footer_links_div:hover{color:#FF0000;}

.footer_lniks_cat1{margin-right:1px;}
.footer_lniks_cat2{margin-right:1px;} 
 
 .follow_us_fb{
    display:flex;
	flex-direction:row;
	
	background:rgba(0,0,0,0.2);
	padding:10px;
	margin-top:1px;
	margin-bottom:0px;
	border:#999 dotted 1px;
	justify-content:flex-end;	 
 }
 .follow_us_fb > a{
	 text-decoration:underline;
	color:blue;
	background:rgba(0,0,0,0);
	padding:0px;
	margin:0px;
	width:auto;
    
	font-family:Courier New;
    text-align:left;	
   
 }
 .follow_us_fb >a:hover{color:#00FFFF;}
 .follow_us_fb:hover{color:#FFF0F5;}


 
 
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++ Styling For footer_links Ends Here ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*================================ Styling for ESCAP images starts Here  =============================================*/
/*###########################################################################################################################*/
.escap_div_img{
	display:flex;
	justify-content:center;
	max-width:1000px;
	margin:0px;
	padding:0px;
	margin-top:2px;
	padding:10px;
	background:rgba(0,0,0,0.1);
	
}

.escap_div_img > img{
	width:760px; 
    /* height:auto; */
    max-height:850px; 
    /* height:160px; */ 
}


/*###########################################################################################################################*/
/*================================ Styling for ESCAP images ends Here  =============================================*/