/* pallette
0F2F3A dark blue
18633A green
FFFFFF white
#6E6E6E grey
000000 black
*/

body,html {
  margin: 0;
  padding: 0;
  /*line-height: 1.5em*/
  min-height: 100%;
	font-family: Verdana, Geneva, sans-serif; 
	background:#FFFFFF;
  overflow: hidden;
}
/*box-sizing - changes box model to make percentage/px height and width of divs include the height of any borders and padding*/
body,html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* text stying for information page */
h2{ /*main title on info page*/
	font-size: 20px;
	font-weight:bold;
	text-align:left;
}
h3{/*secondary title on info page*/
	font-size: 17px;
	font-weight:bold;
	text-align:left;	
}
p{/* paragraph on info page*/
	font-size: 14px;
	text-align:justify;		
}
/***********************************/

#title {

	position: absolute;
	color:#FFFFFF;
	top: 0px;
 height:94px;
	left: 0;
	width: 100%;/*to match left column*/

	cursor:default;
	user-select: none;
	background-color:#0F2F3A; 

}
#title_top{
	width:100%;
	height:47px;
	position:absolute;
	top:4px;
	left:4px;	
}
#title a{
  color:#FFFFFF; 
  text-decoration-line:none;
}
#title a:link{
  color:#FFFFFF; 
  text-decoration-line:none;
}

#title_top{
    width: 100%;
    height: 47px;
    position: absolute;
    top: 4px;
    left: -2px;
    text-align: center;
    font-size: 2.3vw;
    line-height: 47px;		
}

#title_bottom{
	width:100%;
	height:43px;
	position:absolute;
	top:51px;
	left:0px;	
}
#mob_header{
 display:none;
}
#adcontainer{
  position:absolute;	 
  background: #0F2F3A;
  color:#FFFFFF;
  height: 94px;
  top:0px;
	 padding: 0px;
}
#header_ad{
  	margin: 2px;
 	display:none;
 	height:90px;	
}
#header_ad img{
    height: 100%;
    margin: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;	
}
#metdesk_logo{
  	margin: 17px;
 	height:60px;
    position:absolute;
    top:0px;
    right:0px; 		
}
#metdesk_logo img{
    height: 100%;
    float:right;
}

#backtochart{
	display:none;
}
#opensearch{
	display:none;

}
#mobopengif{
	display:none;
}		
#opensettings {
	background: #0F2F3A url(../images/settings.png) no-repeat center;
  /*background-size: 45% 45%;*/
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: 50% auto;	
	position: absolute;
	top: 0px;
	left: 0%;
	width: 20%;
	height: 43px;
	cursor:pointer;
}	
	
#facebooklink {
	background: #0F2F3A url(../images/facebook_new.png) no-repeat center;
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: 40% auto;	
	position: absolute;
	top: 0px;
	left: 20%;
	width: 20%;
	height: 43px;
	cursor:pointer;
	border-radius: 0px;			
}

#twitterlink {
	background:#0F2F3A url(../images/twitter.png) no-repeat center;
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: 40% auto;	
	position: absolute;
	top: 0px;
	left: 40%;
	width: 20%;
	height: 43px;
	cursor:pointer;
	border-radius: 0px;		
}
#opencontact {
	background:#0F2F3A url(../images/MAIL.png) no-repeat center;
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: 45% auto;	
	position: absolute;
	top: 0px;
	left: 60%;
	width: 20%;
	height: 43px;
	cursor:pointer;
	border-radius: 0px;		
}	
#openinfo {
	background: #0F2F3A;	
	position: absolute;
	top: 0px;
	left: 80%;
	width: 20%;
	height: 43px;
	cursor:pointer;
	text-align:center;
 line-height:45px;
 font-size:1.1vw; 
}
#opendefault{
	background:#FFFFFF url(../images/split_panel.png) center no-repeat;
	position: absolute;
 left:10%;
 width:20%;
 height:32px; 
 cursor:pointer;
}
#openlarge{
	background:#FFFFFF url(../images/large_panel.png) center no-repeat;
	position: absolute;
 cursor:pointer;
 left:40%;
 width:20%;
 height:32px; 
}
#openfour{
	background:#FFFFFF url(../images/four_panel.png) center no-repeat;
	position: absolute;
 left:70%;
 width:20%;
 height:32px;
 cursor:pointer; 
}
#header h1 {
  margin: 0;
}

#container {
 width: 100%;
	position:absolute;
	background-color:#0F2F3A;	
	/*height:500px;/*Gets resized later by resize()*/
	color:#0F2F3A;
	/*visibility:hidden;*/
}
#load_container {
  width: 100%;
	position:absolute;
	background-color:#FFF;	
	height:100vh;/*Gets resized later by resize()*/
	color:#0F2F3A;
	z-index:10000;
	/*visibility:hidden;*/
}
#info_container,#privacy_container {
  width: 100%;
	position:absolute;
 top:94px;
	background-color:#000;
	opacity:0.95;
	height:500px;/*Gets resized later by resize()*/
	color:#0F2F3A;
	z-index:10000;
	display:none;
}
#loading{
	position:relative;
	top:240px;
	width:10%;
	left:45%;
	background-color:#0F2F3A;
	border-radius: 3px;	
	border:1px solid #FFFFFF;		
	text-align:center;
	color:#000000;
	height:30px;
	line-height:18px;
	font-size:14px;
	padding:5px;
  animation: pulse 2s 120;		
}
#info,#privacy{
	position:relative;
	top:0px;
	width:80%;
	left:10%;
	background-color:#FFFFFF;
	border:1px solid #FFFFFF;		
	color:#000000;
	line-height:18px;
	font-size:14px;
	padding:5px;
	overflow-y:auto;
}
#closeinfo,#closeprivacy{
	position:absolute;
	top:10px;
	right:30px;
	width:20px;
	height:20px;
	font-size:20px;
	cursor:pointer;
}
.close{
	position:absolute;
	top:1vh;
	right:1vh;
	width:2vh;
	height:2vh;
	font-size:1.4vh;
	cursor:pointer;	
}
#contact {
	display:none;
	position:absolute;
  background:  #0F2F3A;
  color:#FFFFFF;	
  top:94px;
	left:5px;
	width: 15%;
	z-index:3000;	
	/*height:410px;*/
	padding:10px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	border:2px solid #000;	
}
#contact a {
    color:#FFFFFF;
}
#username{
	position:absolute;
	top:10px;
	left:5%;
	width:90%;	
}
#useremail{
	position:absolute;
	top:40px;
	left:5%;
	width:90%;	
}
#subjectselect{
	position:absolute;
	top:70px;
	left:5%;
	width:90%;	
}
#usermessage{
	position:absolute;
	top:100px;
	height:200px;
	left:5%;
	width:90%;	
	resize:none;
}
#userbutton{
	position:absolute;
	top:330px;
	left:25%;
	width:50%;	
}
#settings {
	display:none;
	position:absolute;
  background:  #0F2F3A;
  color:#FFFFFF;	
  top:94px;
	left:3%;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	border:2px solid #000;
	width: 120%;
	z-index:3000;	
	height:250px;	
}
	#mobsettings {
		display:none;
} 
/******************left hand control*****************/
#control {
  position:absolute;
	height:100%;
  left: 0px;
	width:15%;
  padding: 0px;
  background-color: #FFF;
}
/*****************mobile bits *******************/

#mobcontrol,#mobcontrol_L{
display:none;
  }	
#mobstepcontrolcont{
	display:none;
}	

/************************************/
ul {
  list-style-type: none; /* no bullets */
}
#control-accordion{
  position:absolute;
	width:100%;
	padding:0.5vh 0.5vw;
	overflow:auto;
	cursor:pointer;
}
#region_chart{
  position:absolute;
	width:100%;
	padding:0.5vh 0.5vw 0.5vh 0.5vw;
	overflow:auto;
	cursor:pointer;
}
.separator{
	width:100;
	background-color:#0F2F3A;
	height:1px;
}
.noselect{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */	
	user-select: none;	
}
#var{
	position:relative;
	left:0px;
	width:100%;
	overflow: auto;	
}
#display{
	position:absolute;
	top:139px;/*header 94 plus 50 search */
 height:40px;
	left:0px;
	width:100%;
	background-color:#ffffff;
	padding:0; 
 border:1px solid #ffffff;
 border-radius:2px;
}
.border{
 border:2px solid #0F2F3A;
 border-radius:3px; 
}

#modelcont{
	position:absolute;
	top:179px;/*header 94 plus 45 search plus 40 for display div */
	left:1%;
	width:98%;
	background-color:#ffffff;
	padding:0.5vh 2% 0.5vh 2%;
	overflow:auto;
	border-top: 2px solid #0F2F3A;	
}
#regioncont{
	position:absolute;
	left:1%;
	width:98%;
	background-color:#ffffff;
	padding:0.5vh 2% 0.5vh 2%;
	border-top: 2px solid #0F2F3A;
}
#varcont{
	position:absolute;
	left:1%;
	width:98%;
	background-color:#ffffff;
	padding:0.5vh 2% 0.5vh 2%;
	border-top: 2px solid #0F2F3A;
	border-bottom: 2px solid #0F2F3A;	
}
#stepcontrol{
	position:absolute;
	bottom:8%;
	/*height:23%;*/
	left:0px;
	width:100%;
	color:#FFF;
	background-color:#ffffff;
	padding: 0.5vh 0;
}
#patreon{
	position:relative;
	top:0px;
	width:100%; 
 height:50px;


}
#gifcontrols{
	position:absolute;
	top:0px;
 left:0px;
	width:100%;
 height:100%;
 /*display:none;*/
	z-index:50;
	background-color:#ffffff;
}
#patreonimg{
	position:absolute;
	top:0px;
 left:0px;
	width:75%;
 height:100%;
	margin-left:5%;
	background:#FFFFFF url(../images/become_a_patron_button.png) center no-repeat;
 background-size: contain;	
	z-index:5;	
}
#gif{
	position:absolute;
	top:10%;
 left:81%;
	width:18%;
	border:2px solid #0F2F3A;
	border-radius:3px;
 height:80%; 
	text-align:center;
	line-height:35px;
	font-size:14px;
	font-weight:bold;
 color:#000000;
	cursor:pointer;
	z-index:50;	
}
#regionlist{
	overflow:auto;
	max-height: 100%;
	display: none;
}
#contlist{
	overflow:auto;
	max-height: 100%;
	display: none;		
}
#varlist{
	display:none;
	overflow:auto;
}
/*********** play ******************/
#play{
	position:absolute;
	bottom:0px;
	height:8%;
	left:10%;
	width:80%;
	color:#FFF;
}
table#play tr td{
	cursor:pointer;
	width:20%;	
}
.buttons{
	height:70%;
}
.usage{
	color:#000;
	font-size:1.0vh;
	text-align:center;
	font-weight:bold;
	height:30%;
	padding:0;
	margin:0;
}
table#mobgif {  
	display:none;
}	
.play_stop {
	background:#FFFFFF url(../images/play.png) top no-repeat;
  background-size: 100% 80%;		
}	
.prev {
	background:#FFFFFF url(../images/previous.png) top no-repeat;
  background-size: 80% 80%;			
}
.next {
	background:#FFFFFF url(../images/next.png) top no-repeat;
  background-size: 80% 80%;			
}
.start {
	background:#FFFFFF url(../images/start.png) top no-repeat;
  background-size: 80% 80%;			
}
.end {
	background:#FFFFFF url(../images/end.png) top no-repeat;
  background-size: 80% 80%;			
}

/**************** chart ************************************/

#chartcontainer {
  position:absolute;	
	height:100%;
	top:94px;
	padding: 0px;
	background-color: #FFF;	
}
#chart1{
  height: auto;
  margin: auto;
  position: absolute;
	top:0px;
	left:0px;
	cursor:crosshair; 

}
#message1{
 top:0px;
 left:0px;
}
#message2{
 top:0px;
 right:0px;
}
#message3{
 bottom:0px;
 left:0px;
}
#message4{
 bottom:0px;
 right:0px;
}
@keyframes blink {80% { color: transparent }}
.loader__dot { animation: 1200ms blink infinite }
.loader__dot:nth-child(2) { animation-delay: 400ms }
.loader__dot:nth-child(3) { animation-delay: 800ms }

.message{
 height: auto;
 margin: auto;
 position: absolute;
 background: #FFFFFF;
 color: #6E6E6E; 
 display: none;
 text-align: center;
 vertical-align: middle; 	
}
#chart1_locations{
 height: auto;
 margin: auto;
 position: absolute;
	top:0px;
	left:0px;
	cursor:crosshair; 
 pointer-events:none;   	
}
#chart1_shadow{
 position: absolute;
	top:0px;
	left:0px;
}
.shadows{
 box-shadow: inset 1px 1px #6E6E6E,inset -1px -1px #6E6E6E; 
	border-radius:4px;  
	display:none;
}
.shadows_selected{
 box-shadow: inset 2px 2px #6E6E6E,inset -2px -2px #6E6E6E; 
	border-radius:4px;  
}
#chart2{
  width: 50%;
  height: auto;
 position: absolute;
	top:0px;
	right:0px;
 display: none; 
}
#chart2_shadow{
 position: absolute;
	top:0px;
	right:0px;
}
#chart3{
  width: 50%;
  height: auto;
 position: absolute;
	bottom:0px;
	left:0px;
 display: none;
}
#chart3_shadow{
 position: absolute;
	bottom:0px;
	left:0px;
}
#chart4 {
  width: 50%;
  height: auto;
 position: absolute;
	bottom:0px;
	right:0px;
 display: none;  
}
#chart4_shadow{
 position: absolute;
	bottom:0px;
	right:0px;
}
#chartcont{
  position: relative;
	top:0px;
}
#plottab{
	display:none;
	position:absolute;
	top:45%;
	right:0px;
	height:33px;
	width:30px;
	background:#FFFFFF;
	color:#fff;
	border:2px solid #0F2F3A;
	border-right:0px;
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;	
	z-index:1000;
	cursor:pointer;
}
#plottab img{
	max-width:100%;
	height:auto;
}

#chartshare {
	background:#0F2F3A url(../images/share.png) left no-repeat;
	background-size: 100%;		
	position: absolute;
	bottom: 10%;
	right: 1.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}
#plotloc{
	display:none;
	background-color:red;
	height:10px;
	width:10px;
	border-radius:5px;
	position: absolute;
  border: 1px solid black;	
}
#large_panel{
 text-align:center;
 line-height:30px;
	background-color:#0F2F3A;
 color:#FFFFFF;
	height:30px;
	width:30px;
 top:50%;
 right:30px;
	border-radius:3px;
	position: absolute;
  border: 1px solid white;	
}
#default_panel{
 text-align:center;
 line-height:30px; 
 color:#FFFFFF; 
	background-color:#0F2F3A;
	height:30px;
	width:30px;
 top:45%;
 right:30px;
	border-radius:3px;
	position: absolute;
  border: 1px solid white;	
}
#four_panel{
 text-align:center;
 line-height:30px; 
 color:#FFFFFF; 
	background-color:#0F2F3A;
	height:30px;
	width:30px;
 top:55%;
 right:30px;
	border-radius:3px;
	position: absolute;
  border: 1px solid white;	
}
.model_info img{
	  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
#welcome{
    position: relative;
    top: 10%;
    font-size: 18px;
    height: 150px;
    width: 400px;
    background: #FFFFFF;
    color: #000;
    border: 2px solid #0F2F3A;
    border-radius: 4px;
    margin: 0 auto;
	display:none;	    
}
#welcomeMessage{
    position: absolute;
    top: 0px;
    height: 60px;
    width: 100%;
    padding: 5px;
    text-align: center;
    line-height: 25px;	
}
#welcomeSearch{
    position: absolute;
    top: 70px;
    height: 40px;
    width: 100%;
    padding: 5px 25px;
    text-align: center;
}    
#welcomeSearch input{
    position: absolute;
    left: 0px;
    box-shadow: none;
    font-size: 1.8vh;
    height: 35px;
    width: 90%;
    background-color: #0F2F3A;
    border: 1px;
    padding-left: 10px;
    margin: 0px 5%;
    color: #ffffff;	
}
#welcomeSkip{
	width: 15%;
    height: 35px;
    position: relative;
    float: right;
    line-height: 30px;
    margin-right: 5%;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 15px;
}
#welcomeSkip:hover{
    border: 2px solid #0F2F3A;
    cursor:pointer;
}
#eac-container-locationSearchWelcome{
	top:40px;
	text-align: left;
}
#gfs_info,#gefs_info,#ukmo_info,#ecmwf_info,#gem_global_info,#ecmwf_ens_info,#arpege_info,#arome_info,#hirlam_info,#harmonie_info,#nam_3km_info,#hrrr_info,#icon_eu_info{
	display:none;
	position:absolute;
	top:45px;
	left:0px;
	font-size:1.4vh;
	height:auto;
	width:30%;
	background:#FFFFFF;
	color:#000;
	border:2px solid #0F2F3A;	
	padding:1vh;
	border-radius:4px;
	opacity:0.9;
}
#gfs_info:hover #gfs_info,
#gefs_info:hover #gefs_info,
#ukmo_info:hover #ukmo_info,
#ecmwf_info:hover #ecmwf_info,
#gem_global_info:hover #gem_global_info,
#ecmwf_ens_info:hover #ecmwf_ens_info,
#arpege_info:hover #arpege_info,
#arome_info:hover #arome_info,
#hirlam_info:hover #hirlam_info,
#icon_eu_info:hover #icon_eu_info,
#harmonie_info:hover #harmonie_info,
#nam_3km_info:hover #nam_3km_info,
#hrrr_info:hover #hrrr_info{
  display:block;
}
#overview_info,
#winteroverview_info,
#convective_overview_info,
#preciprate_info,
#pwat_kgm2_info,
#accprecip_info,
#accprecip24_info,
#tgrid_info,
[id="2mtemp_info"],
[id="2mdp_info"],
[id="2mtemp_anom_info"],
[id="850temp_info"],
[id="850temp_anom_info"],
[id="850temp_anomem_info"],
[id="10temp_anom_info"],
[id="850tempem_info"],
[id="10temp_info"],
#winds10hpa_info,
#tmax_info,
#tmin_info,
#freezinglevel_info,
#wind10mkph_info,
#wind10mmph_info,
#wind10mkt_info,
#gustkph_info,
#snowdepth_info,
#cape_info,
#srh_info,
#bulkshearkt_info,
#supercell_composite_info,
#gh500_info,
#gph500_anom_info,
#gph500_spaghetti_info,
#rel_vorticity_500_info,
#wind300kt_info,
#gustmph_info,
#gustkph_info,
#gustkt_info,
#max_gustsmph_info,
#max_gustskph_info,
#max_gustskt_info,
#surface_temp_info,
#wind_chill_info,
#meanslp_anom_info,
#mslp_info,
#T850_exceed_20_info,
#T850_exceed_neg5_info,
#T850_exceed_neg10_info,
#wind_exceed_34_info,
#storm_tracks_info,
#storm_tracks_winds_info,
#T850_spaghetti_info,
#mslp_spag_info,
#mslp_hilo_info,
#wind_850mph_info,
#wind_850kt_info,
#wind_850kph_info,
#radarrate_info,
#IR_brightness_info,
#lowcloud_info,
#satradar_info,
#radarref_info,
#gh500em_info,
#mslpem_info,
#satcloud_info,
#satradar_info,
#windmax_10mmph_info,
#windmax_10mkph_info,
#windmax_10mkt_info,
#T850_exceed_20_info,
#T850_exceed_neg5_info,
#T850_exceed_neg10_info,
#multipanel_precip_info,
#multipanel_wind_info,
#multipanel_snowdepth_info,
#snow_prob_info,
#multipanel_mslp_info,
#multipanel_500_info,
#model_compare_500_info,
#model_compare_t850_info,
#multipanel_2m_info,
#multipanel_2m_anom_info,
#multipanel_850_info,
#agg_windmph_info,
#agg_windkph_info,
#agg_windkt_info{
	display:none;
	position:absolute;
	top:45px;
	left:0px;
	font-size:1.4vh;
	height:auto;
	width:30%;
	background:#FFFFFF;
	color:#000;
	border:2px solid #0F2F3A;	
	padding:1vh;
	border-radius:4px;
	opacity:0.9;
}


#gifstart{		
	left: 1%;
	top:10%;
	width: 18%;
	height: 80%;
}
#gifstep{
	left: 41%;
	top:10%;
	width: 18%;
	height: 80%;
}
#gifend{
	left: 21%;
	top:10%;
	width: 18%;
	height: 80%;
}
#gifspeed{
	left: 61%;
	top:10%;
	width: 18%;
	height: 80%;
}
#gifgo{
	left: 81%;
	top:10%;
	width: 18%;
	height: 80%;

}
#gifmessage{
  padding:0.1vw;
	text-align:center;
	color:#FFFFFF;
	font-size:0.7vw;
	background:#0F2F3A;	
	position: absolute;	
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;		
	display:none;	
	left: 1%;
	top:10%;
	width: 98%;
	height: 80%;
}
.gifgo{
	text-align:center;
	color:#FFFFFF;
	line-height:35px;
	font-size:15px; 
	background:#0F2F3A;	
	position: absolute;	
	cursor:pointer;
	border-radius: 3px;	
	border:2px solid #0F2F3A;	
}
.gifctr{
 

	text-align:center;
	color:#000000;
	font-size:0.7vw;
	background:#FFFFFF;	
	position: absolute;	
	cursor:pointer;
	border-radius: 3px;	
	border:2px solid #0F2F3A;	
	line-height:17px;
}
.gifctr input[type="text"] {
	border:0px solid #000000;
	width: 90%;
	font-size:0.7vw; 
	font-family: Verdana, Geneva, sans-serif;  
	/*height: 0.6vw;*/
	color:#000000;
	font-weight:bold;
	text-align:center;	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;	
}	
#chartfacebookshare {
	display:none;
	background:#0F2F3A url(../images/facebook.png) left no-repeat;
	background-size: 100%;		
	position: absolute;
	bottom: 10%;
	right: 3.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}
#charttwittershare {
	display:none;	
	background:#0F2F3A url(../images/twitter.png) left no-repeat;
	background-size: 100%;	
	position: absolute;
	bottom: 10%;
	right: 5.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}

#annicontrolcont{
	width:100%;
	height:40px;
}
#annicontrol{
	text-align:center;	
	width:80%;
	display: inline-block	
}

#keyboardcontrol{
	height:30px;
	float:right;
	width:8%;
	display: inline-block	
}
#keyboard {
	display:none;	
	background-color:#0F2F3A;
	position: absolute;
	color:#FFFFFF;
	bottom: 0;
	right: 0.5vw;
	width: 200px;
	height: 200px;
	cursor:pointer;
	border-radius: 4px;	
	border:2px solid #000000;
	opacity:0.9;
}
#hovercontrolcontainer{
	position:absolute;
	left:0%;
	bottom:0px;
	width:100%;
	height: 50px;
	background-color:rgba(0,0,0,0);
  animation: pulse 10s 1;	
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;

}
#hovercontrolunder{
	position:absolute;
	width:98%;
	left:1%;
	top:0px;	
	height:8px;
	background-color:#6E6E6E;	
}
#hovercontrolover{
	position:absolute;	
	width:98%;
	left:1%;
	top:0px;
	height:50px;
}
#loadingbarprev{/*this sits under #loadingbar*/
	position:absolute;
	width:0%;
	left:0px;
	top:0px;	
	height:8px;
	background-color:#6E6E6E;
}
#loadingbar{
	position:absolute;
	width:0%;
	left:0px;
	top:0px;	
	height:8px;
	background-color:#0F2F3A;
}
#hovercontrolover{
	position:absolute;	
	width:98%;
	left:1%;
	top:0px;
	height:50px;
}

@keyframes pulse {
  0% {
    background-color: #FFFFFF;
	}
  50% {
    background-color: #0F2F3A;
		color:#FFFFFF;
  }
  100% {
    background-color: #FFFFFF;
  }	
}
#follower{
  position : relative;
  background-color : #000000;
  display:block;
  width:20px;
  height:20px;
	top:-6px;
	left:-10px;
  border-radius:10px;
  border: 1px solid white;
	display:none;
}
.tick{
  position : absolute;	
	background-color:#000000;
	height:5px;
	width:2px;
	top:8px;
	border-radius:1px;	
}
.tickdate{
 position : absolute;	
	color:#000000;
	height:10px;
	font-size:0.7vw;
	width:15px;
	top:14px;
	border-radius:1px;	
	text-align:center;
}

/**************** plot  ***********/
#plotcontainer {
  position:absolute;
	top:94px;
	right:0px;
	height:100%;
	padding: 0px;
  overflow: hidden;
	background:#fff;
	border-right:0px solid #0F2F3A;
 z-index:50;
}
#plotcontrol{
	top:0px;
	left:0px;
	height:5%;
	width:100%;
}
table#plottitle{
	top:0px;
	left:0px;
	height:5%;
	width:100%;
	font-size:0.75vw;
}
#skewtcontainer {  position: relative;
  top:0px;
  left:0px;	
	display:none;}
#mainbox { 
  position: relative;
  top:0px;
  left:0px;	
}
#hodobox { 
  position: absolute;
  z-index:200;
  background-color:#FFF;
	opacity:1;
}
/* Skew t hover */
#skewtcontrolcontainer{
	position:relative;
	left:0%;
	width:100%;
	height: 50px;
	background-color:#ffffff;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;		

}
#skewtcontrolunder{
	position:absolute;
	width:90%;
	left:5%;
	top:0px;	
	height:8px;
	background-color:#0F2F3A;	
}
#skewtfollower{
  position : relative;
  background-color : #000000;
  display:block;
  width:20px;
  height:20px;
	top:-6px;
	left:-10px;
  border-radius:10px;
  border: 1px solid white;
}
#skewtcontrolover{
	position:absolute;	
	width:90%;
	left:5%;
	top:0px;
	height:50px;
}
table#skewtstats{
	position:relative;
	left:2%;
	width:96%;
	height: 90px;
	background-color:#ffffff;	
	font-size:1.2vh;
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse; 
	margin-bottom:10px; /*height of 90 + bottom margin of 10 gives the total height of 100px as per the resize function. Margin is to give some gap to the hover follower*/
}
table#skewtstats td{
	width:12.5%;
	padding:0;
}
/* **** */
.plots{
  position: relative;
	width:100%;
	height:14.5%;	/*leaves 1.2% white space at the bottom so lower plot xaxis titles not right agains the bottom - plotcontrol is 10% of the height*/
}
.plots_ens{
  position: relative;
	width:100%;
	height:29.6%;	/*leaves 1.2% white space at the bottom so lower plot xaxis titles not right agains the bottom */
	display:none;
}
.ensselect{
	position:absolute;
	top:0px;
	right:10%;
	z-index:1000;
	width:25%;
	font-size:1.3vh;
	padding-left:3px;
}
.gefs_legend{
	position:absolute;
	top:10%;
	left:15%;
	width:70%;
	text-align:center;
	font-weight:bold;
	z-index:1000;
	font-size:1.2vh;
	line-height:1.2vh;	
}
.gfs{
	background-color:blue;
}
.avg{
	background-color:#000000;	
}
.ctr{
	background-color:green;	
}
.mem{
	background-color:gray;		
}
.cfsr{
	background-color:#f3453c;		
}
.gefs_line{
	width:2vh;
	height:0.5vh;
	line-height:0.5vh;
}

#plotshare {
	background:#0F2F3A url(../images/share.png) left no-repeat;
	background-size: 100%;		
	position: absolute;
	bottom: 1%;
	right: 1.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}
#plotfacebookshare {
	display:none;
	background:#0F2F3A url(../images/facebook.png) left no-repeat;
	background-size: 100%;		
	position: absolute;
	bottom: 1%;
	right: 3.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}
#plottwittershare {
	display:none;	
	background:#0F2F3A url(../images/twitter.png) left no-repeat;
	background-size: 100%;	
	position: absolute;
	bottom: 1%;
	right: 5.4vw;
	width: 1.8vw;
	height: 1.8vw;
	cursor:pointer;
	border-radius: 3px;	
	border:1px solid #FFFFFF;
}

select,input,button {
	/*padding:3px 7px;*/
	margin: 0px;
	/*top:0px;*/

	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	background: #f8f8f8;
	color:#000000;
	border:1px solid #6E6E6E;
	outline:none;
	display: inline-block;
	/*
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	*/
	cursor:pointer;
}
#locationSearch{
	/*width calculated by javascript to be 35% of the plot container*/
	position:absolute;
	left:0px;
	top:94px;
	box-shadow:none;
	font-size:1.8vh;
	height:35px;
	width:90%;
	background-color:#0F2F3A;
	border:1px;
	padding:1px;
	padding-left:10px;	
	margin:5px 5%;
  color:#ffffff;	
  display: inline;	

}
.easy-autocomplete-container {
    margin-left: 5%;
    width:90%;
    top:138px;
    z-index: 10000;
}
.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
    display: block;
    font-size: 12px;
}
.easy-autocomplete-container ul li.selected {
    color: #000;
}
	#locationSearchMob{
		display:none;
	}	
select.mob{
	width:20vw;
	font-size:3vw;
  padding:1px 3px;	
}
.mobplotimage{
	width:10vw;
	height:7vw;
	font-size:3vw;
  padding:1px 3px;	
	margin: 0;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	-webkit-box-shadow: 0 2px 0 #6E6E6E, 0 -1px #fff inset;
	-moz-box-shadow: 0 2px 0 #6E6E6E, 0 -1px #fff inset;
	box-shadow: 0 2px 0 #6E6E6E, 0 -1px #fff inset;
	background: #f8f8f8;
	background:#FFFFFF url(../images/plot.png) center no-repeat;
	color:#000000;
	border:1px solid #6E6E6E;
	outline:none;
	display: inline-block;	
}
/*************** SKEWT ***************/
.axis path,
.axis line {
  fill: none;
  stroke: #0F2F3A;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
.x.axis path {  }
.y.axis path {  }
.axis { fill: #000; }
.y.axis { font-size: 13px; }
.y.axis.hght { font-size: 9px; fill: red;}
.x.axis { font-size: 13px; }
.y.axis.ticks text { display: none; }

.temp {
  fill: none;
  stroke: #c9322a;
  stroke-width: 3px;
	z-index:20;	
}
.dwpt {
  fill: none;
  stroke: #05CA0B;
  stroke-width:3px;
}
.hodoline { stroke: #0F2F3A; fill: none; opacity: 1;stroke-width: 4px;}

.hododot {  stroke: #000; opacity: 0.8; }
.hododot.hgt0 { fill: gray;    }
.hododot.hgt1 { fill: #225ea8; }
.hododot.hgt3 { fill: #41b6c4; }
.hododot.hgt6 { fill: #a1dab4; }
.hododot.hgt9 { fill: #ffffcc; }

.gridline {
   stroke: #797b7b;
   stroke-width: 1px;
   fill: none;
}
 .tempzero {
   stroke: #3e6aa5;
   stroke-width: 2px;
   fill: none;
}
.slrgridline{
	stroke: #5c6d8d;
  stroke-width: 1px;
  fill: none;	
}
.dlrgridline{
	stroke: #6d504e;
  stroke-width: 1px;
  fill: none;		
}
.hodogridline {
   stroke: #6E6E6E;
   stroke-width: 1px;
   fill: none;
}


.barline { stroke: #000; stroke-width: 0.5px; }
.rectline { fill: #aaa; opacity: 0.5;}
.rectline2 { file: #000; }
.index { font-size: 13px; }
.header { font-weight: bold; font-size: 11px;}
.hodolabels { font-size: 9px; opacity: 0.9;}
.lcltext { font-size: 11px; }
.key { font-size: 10px; }

.windbarb { stroke: #000; stroke-width: 0.75px; fill: none; }
.flag { fill: #000; }

.overlay {
  fill: none;
  pointer-events: all;
}

.focus.tmpc circle { fill: #c9322a;   stroke: none; }
.focus.dwpc circle { fill: #007bff; stroke: none; }
.focus text { font-size: 12px; }

div.rollover { padding: 15px 5px 15px 5px; display: inline; cursor: pointer;}
div.rollover.selected { background-color: #EFEFEF; border-bottom: 2px solid gray;}

/****************
/* tables */
table.settingstable { 
	width:100%;
	text-align:center;
	color: #fff;
}
table.plotcontrol { 
	width:100%;

/* cellspacing */  
}
table.bottomline{
	border-bottom:1px solid #0F2F3A;
}
table.fixed{ /*makes columns equal width*/
	table-layout: fixed;
}	
table#steps { 
/* cellspacing */  
  border-collapse: separate; 
  border-spacing: 0.2vh; 
  font-size:0.7vw;
  line-height: 0.7vw; 
  margin-left: auto;
  margin-right: auto;  
	padding-top:3%;
}
table#model{
	/*border-spacing: 0px;*/
	width:100%;
}
#selectedmodel,#runs{
	font-size:0.7vw;
	text-align:center;
}
table#steps tr td {
  border-radius:0.2vh;
  padding:0.22vh 0.3vw;
  cursor:pointer;
}
table.settingstable tr td { 
	text-align:left;
	font-size:0.65vw;
}
table.settingstable input{
    width: 40%;	
}
table.keyboardtable {
	width:100%;
	font-size:0.7vw;
}
table.list{
	width:100%;
	text-align:left;
	padding-left:2%;
  cursor:pointer;
	border-spacing:0;	
}
table.list tr td{
	font-size:0.7vw;
	margin-top:1px;
	line-height:0.7vw;
  border-collapse:collapse;
}
table.listSmall{
	width:100%;
	text-align:left;
	padding-left:0%;
padding-top:5%;	
  cursor:pointer;
	border-spacing:0;	
}
table.listSmall tr td{
	font-size:0.65vw;
	margin-top:1px;
	line-height:0.6vw;
  border-collapse:collapse;
}
table#modeltable{
	padding-top:2px;
}
td.selected,.selected{
	color:#FFFFFF;
	border:1px solid #0F2F3A;
	border-radius: 2px;
	background-color:#0F2F3A;	
	cursor:pointer;
}

/* section to control the colour of the information "?" on hover of the row for each*/
/*models*/
.gfs_info,
.gefs_info,
.ukmo_info,
.ecmwf_info,
.gem_global_info,
.ecmwf_ens_info,
.arpege_info,
.arome_info,
.hirlam_info,
.icon_eu_info,
.harmonie_info,
.nam_3km_info,
.hrrr_info{
	color:#ffffff;
	border:1px solid #ffffff;
	width:1.4vh;
	text-align:center;
	background-color:white;	
}
/*variables*/
.overview_info,
.convective_overview_info,
.winteroverview_info,
.preciprate_info,
.pwat_kgm2_info,
.accprecip_info,
.accprecip24_info,
[class="2mtemp_info"],
[class="2mdp_info"],
[class="2mtemp_anom_info"],
[class="850temp_info"],
[class="850temp_anom_info"],
[class="10temp_info"],
[class="10temp_anom_info"],
.winds10hpa_info,
.tmax_info,
.tmin_info,
.wind_chill_info,
.freezinglevel_info,
.wind10mkph_info,
.wind10mmph_info,
.wind10mkt_info,
.windmax_10mmph_info,
.windmax_10mkph_info,
.windmax_10mkt_info,
.gustkph_info,
.snowdepth_info,
.cape_info,
.tgrid_info,
.srh_info,
.bulkshearkt_info,
.supercell_composite_info,
.gh500_info,
.gph500_anom_info,
.gph500_spaghetti_info,
.rel_vorticity_500_info,
.wind300kt_info,
.gustmph_info,
.gustkph_info,
.gustkt_info,
.max_gustsmph_info,
.max_gustskph_info,
.max_gustskt_info,
.surface_temp_info,
.meanslp_anom_info,
.mslp_info,
.T850_exceed_20_info,
.T850_exceed_neg5_info,
.T850_exceed_neg10_info,
.wind_exceed_34_info,
.storm_tracks_info,
.storm_tracks_winds_info,
.T850_spaghetti_info,
.mslp_spag_info,
.mslp_hilo_info,
.wind_850mph_info,
.wind_850kt_info,
.wind_850kph_info,
.radarrate_info,
.IR_brightness_info,
.lowcloud_info,
.satradar_info,
.radarref_info,
.multipanel_precip_info,
.multipanel_wind_info,
.multipanel_snowdepth_info,
.snow_prob_info,
.multipanel_mslp_info,
.multipanel_850_info,
.multipanel_2m_anom_info,
.multipanel_2m_info,
.multipanel_500_info,
.model_compare_t850_info,
.model_compare_500_info,
.agg_windmph_info,
.agg_windkph_info,
.agg_windkt_info{
	color:#ffffff;
	border:1px solid #ffffff;
	width:1.4vh;
	text-align:center;
	background-color:white;	
}
#gfs:hover .gfs_info,
#gefs:hover .gefs_info,
#ukmo:hover .ukmo_info,
#ecmwf:hover .ecmwf_info,
#gem_global:hover .gem_global_info,
#ecmwf_ens:hover .ecmwf_ens_info,
#arpege:hover .arpege_info,
#arome:hover .arome_info,
#hirlam:hover .hirlam_info,
#icon_eu:hover .icon_eu_info,
#harmonie:hover .harmonie_info,
#nam_3km:hover .nam_3km_info,
#hrrr:hover .hrrr_info{
	color:red;
 animation: fadein 1s;
}
 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
 }
/*variables*/
#convective_overviewrow:hover .convective_overview_info,
#overviewrow:hover .overview_info,
#winteroverviewrow:hover .winteroverview_info,
#precipraterow:hover .preciprate_info,
#pwat_kgm2row:hover .pwat_kgm2_info,
#accpreciprow:hover .accprecip_info,
#accprecip24row:hover .accprecip24_info,
[id="2mtemprow"]:hover [class="2mtemp_info"],
[id="2mdprow"]:hover [class="2mdp_info"],
[id="2mtemp_anomrow"]:hover [class="2mtemp_anom_info"],
[id="850temprow"]:hover [class="850temp_info"],
[id="850temp_anomrow"]:hover [class="850temp_anom_info"],
[id="10temprow"]:hover [class="10temp_info"],
[id="10temp_anomrow"]:hover [class="10temp_anom_info"],
#winds10hparow:hover .winds10hpa_info,
#tmaxrow:hover .tmax_info,
#tminrow:hover .tmin_info,
#wind_chillrow:hover .wind_chill_info,
#freezinglevelrow:hover .freezinglevel_info,
#wind10mkphrow:hover .wind10mkph_info,
#wind10mmphrow:hover .wind10mmph_info,
#wind10mktrow:hover .wind10mkt_info,
#gustkphrow:hover .gustkph_info,
#snowdepthrow:hover .snowdepth_info,
#caperow:hover .cape_info,
#tgridrow:hover .tgrid_info,
#srhrow:hover .srh_info,
#bulkshearktrow:hover .bulkshearkt_info,
#supercell_compositerow:hover .supercell_composite_info,
#gh500row:hover .gh500_info,
#gph500_anomrow:hover .gph500_anom_info,
#gph500_spaghettirow:hover .gph500_spaghetti_info,
#rel_vorticity_500row:hover .rel_vorticity_500_info,
#wind300ktrow:hover .wind300kt_info,
#gustmphrow:hover .gustmph_info,
#gustkphrow:hover .gustkph_info,
#gustktrow:hover .gustkt_info,
#max_gustsmphrow:hover .max_gustsmph_info,
#max_gustskphrow:hover .max_gustskph_info,
#max_gustsktrow:hover .max_gustskt_info,
#windmax_10mmphrow:hover .windmax_10mmph_info,
#windmax_10mkphrow:hover .windmax_10mkph_info,
#windmax_10mktrow:hover .windmax_10mkt_info,
#surface_temprow:hover .surface_temp_info,
#meanslp_anomrow:hover .meanslp_anom_info,
#mslprow:hover .mslp_info,
#T850_exceed_20row:hover .T850_exceed_20_info,
#T850_exceed_neg5row:hover .T850_exceed_neg5_info,
#T850_exceed_neg10row:hover .T850_exceed_neg10_info,
#wind_exceed_34row:hover .wind_exceed_34_info,
#storm_tracksrow:hover .storm_tracks_info,
#storm_tracks_windsrow:hover .storm_tracks_winds_info,
#T850_spaghettirow:hover .T850_spaghetti_info,
#mslp_spagrow:hover .mslp_spag_info,
#mslp_hilorow:hover .mslp_hilo_info,
#wind_850mphrow:hover .wind_850mph_info,
#wind_850ktrow:hover .wind_850kt_info,
#wind_850kphrow:hover .wind_850kph_info,
#radarraterow:hover .radarrate_info,
#IR_brightnessrow:hover .IR_brightness_info,
#lowcloudrow:hover .lowcloud_info,
#satradarrow:hover .satradar_info,
#radarrefrow:hover .radarref_info,
#multipanel_preciprow:hover .multipanel_precip_info,
#multipanel_snowdepthrow:hover .multipanel_snowdepth_info,
#multipanel_windrow:hover .multipanel_wind_info,
#snow_probrow:hover .snow_prob_info,
#multipanel_mslprow:hover .multipanel_mslp_info,
#multipanel_850row:hover .multipanel_850_info,
#multipanel_2mrow:hover .multipanel_2m_info,
#multipanel_2m_anomrow:hover .multipanel_2m_anom_info,
#model_compare_500row:hover .model_compare_500_info,
#model_compare_t850row:hover .model_compare_t850_info,
#multipanel_500row:hover .multipanel_500_info,
#agg_windktrow:hover .agg_windkt_info,
#agg_windkphrow:hover .agg_windkph_info,
#agg_windmphrow:hover .agg_windmph_info{
	color:red;
	font-weight:bold;
	background-color:white;
  animation: fadein 1s;	
}

/***************************************************************/
td.right_round{
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;	
}
td.left_round{
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;	
}
td.indent_country{
	padding-left:10%;	
}
td.indent_region{
	padding-left:5%;	
}
tr.unselected,td.unselected,.unselected{
	color:#0F2F3A;	
	border:1px solid #FFFFFF;
	border-radius: 2px;
	background-color:#FFFFFF;
	cursor:pointer;	
}
tr.unselected:hover,td.unselected:hover,.unselected:hover{
	color:#000000;
	text-shadow:0.5px 0 0 black;
}

td.latest,.latest{
	border: 1px solid #18633A; 
}
td.leftverticalline{
	border-left:1px solid #0F2F3A;
}
.runbox{
	width:21%;
	margin:0 2%;
	float:left;
	text-align:center;
	line-height:2vh;
}
td.med,.med{
	font-size:0.9vw;
	line-height:0.9vw;
	padding:0.1vh,0;
	border:2px solid #0F2F3A;
	border-radius: 3px;		
}
td.med_noborder{
	font-size:0.9vw;
	line-height:0.9vw;
	padding:0;
}
td.small{
	font-size:0.75vw;
	line-height:0.75vw;	
	padding:0;
}
td.smaller{
	font-size:0.65vw;
	line-height:0.65vw;	
	padding:0;
}
td.centre,tr.centre td{
	text-align:center;
}
td.regunavailable,.unavailable{
	color:#6E6E6E;
}
td.padleft{
	padding-left:10px;
	font-weight:normal;	
}
td.regselected,td.plotselected{
	background-color:#FFFFFF;
	color:#000000;
	font-weight:bold;
}
td.plotselect{
	width:100px;
}
td.center{
	text-align:center;
}
td.left{
	text-align:left;
}
td.right{
	text-align:right;
}
td.boldregion{
	/*font-weight:bold;*/
	border:1px solid #0F2F3A;
	border-radius: 2px;
	background-color:#0F2F3A;	
	color:#FFFFFF;
}
td.point{
	cursor:pointer;
}
td.boldy{
	font-weight:900;
}
td.boldhover:hover{
	font-weight:900;
}
td.lbold{
	font-weight:500;
}
td.vbold{
	font-weight:900;
}
.available{
 background: #ffffff;	
 color:#626262;
 font-weight:bold;
 border: 1px solid #0F2F3A; 
}
.oldavailable{
 background: #6E6E6E;		
 color:#000000;
 font-weight:bold;	
 border: 1px solid #ffffff; 	
}
.loaded{
  color:#0F2F3A;
	font-weight:bold;
}
.active{
  background: #0F2F3A;
 border: 1px solid #0F2F3A; 		
  color:#FFF;
}
.notfunctional{
	color:red;
}
.notavailable{
	color:#6e6e6e;
}
.hidden{
	display:none;
}

table#preload{ 
	color:#000000;
	height:30px;
	width:100%;
	text-align:left;
  cursor:pointer;
  border-collapse: collapse;
	border-spacing:0px;
	table-layout: fixed;
	font-weight:bold;

}
table#preload tr td { 
	width:50%;
	font-size:9px;
	line-height:10px;		
}

table.anni{
	width:100%;
	height:30px;
}
td.steptime{
	width:200px;
  line-height:20px; 	
	font-size:20px;
	font-weight:bold;
	color:#000000;
}
td.button{
	width:3vw;
	height:1.3vw;
  line-height:0.9vw; 	
	font-size:0.9vw;
	font-weight:bold;
	color:#FFFFFF;
	border:2px solid black;
	background-color:#6E6E6E;
	border-radius:0.5vw;
	cursor:pointer;
}
td.wide{
	width:5vww;
	font-size:0.9vw;
}
td.titlewide{
	width:60%;
}

.keyboard{
  background-image: url("../images/keyboard.png");
	background-repeat: no-repeat;
  background-position: center;
}
/*********************************************************************************/
/* Portrait tablet ( landscape will show full site */
/*@media only screen and (min-device-width : 550px, max-device-width : 1024px, orientation : portrait) and (min-device-width : 550px, max-device-width : 1024px, orientation : landscape, min-aspect-ratio:10/7) */
@media only screen and (min-device-width : 550px) and (max-device-width : 1024px) and (orientation : portrait),(max-aspect-ratio:10/9) and (min-device-width : 550px) and (max-device-width : 1024px) and (orientation : landscape){
#container {
	background-color:#FFF;	
}  
#mob_header {
 display:block; 
	height: 70px;
	/*Height of top section*/
	background-color:#0F2F3A; 
	width: 100%; 
	text-align:center; 
	color:#FFFFFF; 
 line-height:70px;
	font-size:5.0vw;	 
}
  #mob_title{
  position:relative;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
    height:70px;
color:#FFFFFF;
  }
  #mob_title_image{
    position:absolute;
    top:17.5px;
    left:-40px;
    height:35px;
    line-height:25px;
  }
  #mob_title_main{
    position:absolute;
    top:0px;
    left:0px;
    height:70px; 
    line-height:70px;
  }
#chartcontainer {
	top:0px;
}
select#mob_charts {
    width:100%;
}
#header_ad{
 	display:none;	
}
#metdesk_logo{
 	display:none;		
}
#info_container,#privacy_container {
  overflow-y:auto;
  top:35px;
}
#info,#privacy{
	width:90%;
	left:5%;
}   
#closeinfo,#closeprivacy{
	position:absolute;
	top:20px;
	right:20px;
	width:13x;
	height:13px;
	font-size:15px;
	cursor:pointer;
}  
#title {
	font-size:2.1vw;	
	line-height:35px;		
	position: absolute;
	color:#FFFFFF;
	top: 0px;
 height:94px;
	left: 0;
	width: 100%;/*to match left column*/
	margin:0; 
 padding:10px 0;
	text-align:center;
	cursor:default;
	user-select: none;
	background-color:#0F2F3A; 

}	

#chartcontainer img {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
}
	#header_ad{
    display:none;
	}
	#loading{
		position:relative;
		top:50px;
		width:50%;
		left:25%;
		background-color:#0F2F3A;
		border-radius: 3px;	
		border:1px solid #FFFFFF;		
		text-align:center;
		color:#000000;
		height:30px;
		line-height:18px;
		font-size:14px;
		padding:5px;
		animation: pulse 2s 5;		
	}	
	.menu{
    width: 22px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;		
	}	
	#backtochart{
		position:absolute;
		left:16px;
		top:18px;		
	}	
	.leftarrow{
		width: 0; 
		height: 0; 
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;   
		border-right:39px solid #fff; 
	}
	#opensearch{
		display:inline;	
		position:absolute;
		right:7vw;
		top:10px;	
		height:50px;
		width:50px;
		background-image: url("../images/search.png");
		background-repeat: no-repeat;
		background-position: center;	
		background-size: 30px 30px;	
	}	
	#mobopengif{
		display:inline;
		font-weight:bold;
		vertical-align: middle;
		position:absolute;
		top:10px;
		right:14vw;
		height:50px;
		line-height:50px;
		text-align:center;
		font-size:3vw;	
		font-weight: bold; 		
		color:#FFFFFF;		
	}	
	#content {
    width: 100%
  }
  #control {
    display:none;
  }
	#mobcontrol_L{
display:none;
  }	  
  #mobcontrol {
		display:block;  	
		position:absolute;
		left:0px;		
		/*z-index:1000;*/
		height:50px;
  }	
	#locationSearch{
		display:none;
	}	
	#locationSearchMob{
		font-size:3vw;
		background-color:#0F2F3A;
		border-radius: 3px;	
		border:2px solid #0F2F3A;
		color:#ffffff;
		height:60px;
		width:98%;
		position:absolute;
		top:3px;
		left:1%;	
		display:none;	
		z-index:1000;
		padding-left: 10px;
	}	
.easy-autocomplete-container {
    margin-left: 1%;
    width:98%;
    top:64px;
}
.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
    display: block;
    font-size: 18px;
    padding: 8px 12px;    
}	
/*welcome message */
#welcome{
    position: absolute;
    top: 0px;
    font-size: 14px;
    height: 150px;
    width: 100%;
    background: #FFFFFF;
    color: #000;
    border: 2px solid #0F2F3A;
    border-radius: 4px;
    margin: 0 auto;
	display:none;	    
}
#welcomeMessage{
    position: absolute;
    top: 0px;
    height: 60px;
    width: 100%;
    padding: 5px;
    text-align: center;
    line-height: 25px;	
}
#welcomeSearch{
    position: absolute;
    top: 70px;
    height: 40px;
    width: 100%;
    padding: 5px 25px;
    text-align: center;
}    
#welcomeSearch input{
    position: absolute;
    left: 0px;
    box-shadow: none;
    font-size: 18px;
    height: 35px;
    width: 90%;
    background-color: #0F2F3A;
    border: 1px;
    padding-left: 10px;
    margin: 0px 5%;
    color: #ffffff;	
}
#welcomeSkip{
	width: 15%;
    height: 35px;
    position: relative;
    float: right;
    line-height: 30px;
    margin-right: 5%;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 15px;
}
#welcomeSkip:hover{
    border: 2px solid #0F2F3A;
    cursor:pointer;
}
#eac-container-locationSearchWelcome{
	top:40px;
	text-align: left;
}
.easy-autocomplete{
    width: 80%;	
}


/********************/
	#control-accordian {
		border-right:1px solid #0F2F3A;
		border-bottom:1px solid #0F2F3A;
  }
	#play {
		display:none;
	}
	#mobplay{
		width:100%;
		height:40px;
		display:block;
		border-spacing: 0px;
		background-color: #FFF;
	}	
	#hovercontrolcontainer{
		height: 30px;
		background-color:rgba(0,0,0,0);
	  animation: pulse 2s 1;
	  width:90%;
	  left:5%;	
	}
	#hovercontrolover{
		height:30px;
		top:4px;		
	}
	#hovercontrolunder{
		top:4px;	
		height:6px;	
	}
	#loadingbarprev{/*this sits under #loadingbar*/
		top:0px;	
		height:6px;
	}
	#loadingbar{
		top:0px;	
		height:6px;
	}
	#follower{
	  width:18px;
	  height:18px;
	  top:-6px;
	  left:-9px;
	  border-radius:9px;
	}
	.tick{
		display:none;
	}
	.tickdate{
		display:none;	  
	}	
	#preloadcontrol,#keyboardcontrol{
		display:none;
	}
	#annicontrol{
		text-align:center;	
		width:100%;
		display: inline-block	
	}	
  #chartcontainer {
    width: 100%;
		border-right:0;
  } 
	#chartcont{
  	position: relative;
	}
 #adcontainer {
	display:none;
 } 

  #plotcontainer {
		display:none;
   top:0px;
    width: 100%;
		height:100%;
  }	
  #regioncontrol {
    display:none;
  } 

	#opensettings {
		background: #0F2F3A url(../images/settings.png) left no-repeat;
		position: absolute;
		background-size: 100%;	
		top: 12px;
		left:auto;
		right:1vw;
		width: 46px;
		height: 46px;
		cursor:pointer;
	}	
	#opencontact {
		display:none;
	}	
	#openinfo {
		display:none;
	}		
  #openblog {
		display:none;
	}			
	#mobsettings {
		display:none;
		position:absolute;
		background:  #0F2F3A;
		color:#FFFFFF;	
		top:0px;
		left:10%;
		width: 80%;
		z-index:3000;	
		border:2px solid black;
		border-radius:4px;
	}	
	#facebooklink {
		background: #0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 5px;
		right: 55px;
		width: 26px;
		height: 23px;
		cursor:pointer;
		display:none;
	}

	#twitterlink {
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		position: absolute;
		background-size: 100%;			
		top: 5px;
		right: 10px;
		width: 25px;
		height: 25px;
		cursor:pointer;
		display:none;
	}	
	
	#chartshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 2vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	
	#chartfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 8.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#charttwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 10%;
		right: 15vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#plotshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 1vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plotfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 6.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plottwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 0.1%;
		right: 13vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#mobplotimg {
		background:#FFFFFF url(../images/plot.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 3px;
		right: 10px;
		width: 7vw;
		height: 7vw;
		cursor:pointer;
	}		

	#plotcontrol{
		top:0px;
		left:0px;
		height:8%;
		width:100%;
	}
	table#plottitle{
		top:0px;
		left:0px;
		height:4%;
		width:100%;
		font-size:2vw;		
	}
	.plots{
		position: relative;
		width:100%;
		height:14.5%;	/*leaves 1.2% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;		
	}
	.plots_ens{
		position: relative;
		width:100%;
		height:28.5%;	/*leaves 1.5% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;
	}

	.ensselect{
		position:absolute;
		top:0px;
		right:10%;
		z-index:1000;
		width:25%;
		font-size:2.5vw;
		padding-left:3px;
	}
	.gefs_legend{
		position:absolute;
		top:10%;
		left:25%;
		width:50%;
		text-align:center;
		font-weight:bold;
		z-index:1000;
		font-size:2vw;
		line-height:2vw;	
	}
	.gefs_line{
		width:3vw;
		height:1vw;
		line-height:1vw;
	}	


	#mobstepcontrolcont{
		position:absolute;		
		width:100%;
		display:inline-block;
		background-color:#fff;
	}
	#mobopengif,#mobopenplot,#mobstepcontrol,#mobplay,#mobopenprev{
		position:absolute;
	}
	#mobplay,#mobopenplot,#mobopenprev{/*hide until dimentions calculated by resize*/
		display:none;
		user-select: none;
	}
	#mobopenprev{
	    background: url(../images/prev_run.png) no-repeat center;
	 }
	#mobopenplot img,#mobopenprev img{
		user-select: none;
		max-height:100%;
		width:auto;	
	}
	#mobplay img{
		max-height:100%;
		width:auto;

	}	

.tickdate{
	font-size:2.0vw;
} 
	table#mobsteps {  
		/*table-layout: fixed;*/
		width: 100%;
		/*height: 100px;*/
	  	/*padding: 0;*/
    	/*border-collapse: separate;*/		
	}	
	table#mobsteps tr td {
		font-size:1.8vh;	
		padding:0;
		border:1px solid #0F2F3A;
		border-radius:2px;
		text-align:center;
		/*width:11%;*/
	}

	table#mobgif {  
		display:none;
		position:absolute;
		top:0px;
		left:0px;		
		width: 100%;
		height: 70px;		
	  padding: 0;
		background-color:#fff;
		color:#0F2F3A;
		border:2px solid #0F2F3A;
		border-top:0px;

    border-collapse: separate;
		z-index:1000;
	}	
	#gifgomob{
		background-color:	#0F2F3A;
		border:1px solid #0F2F3A;
	  border-radius:2px;	
		color:#fff;
		width:90%;
		height:34px;
		margin:18px 5%;
		font-size:15px;
		text-align:center;
		line-height:34px;
		vertical-align:center;
		
	}	
	.giftitles{
		font-size:10px;
		text-align:center;
		vertical-align:bottom;
	}
	.giftitles td{
    width:20%;
		height:30%;
	}	
	.gifforms{
		vertical-align:top;		
	}
	.gifforms input{
		width:90%;
		text-align:center;
		height:20px;
		line-height:13px;
		font-size:13px;
		padding:5%;
		margin:0 5%;
		vertical-align:center;
	}
	table#mobcontrol{
		background:#ffffff;
		width:100%;
		table-layout: fixed;		
	}
	table#mobcontrol tr td{
		width:25%;
		text-align:center;
		font-size:3vw;		

	}	
	#mobcontrol select{
		width:100%;
		font-size: 3vw;
	}
	table#mobplay{
		width:100%;
	}	
	table#gif_mob{
		width:100%;
		height:100%;
		display:none;
	}	
	#gif{
		display:none;
	}
	#gifstartmob{
		display:table-cell;
	}
	#gifstepmob{
		display:table-cell;
	}
	#gifendmob{
		display:table-cell;
	}
	#gifspeedmob{
		display:table-cell;
	}
	form {
    display: table-cell;
    margin-top: 0em;
}
	.gif{
		text-align:center;
		color:#FFFFFF;
		font-size:3vw;
		background:#0F2F3A;	
		position: absolute;	
		cursor:pointer;
		border:1px solid #FFFFFF;	
	}
	.gifctr{
		text-align:center;
		/*
		color:#000000;
		font-size:2.4vw;
		background:#FFFFFF;	
		position: absolute;	
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #000000;	
		line-height:2.4vw;
		*/
	}
	.gifctr input[type="text"] {
		border:0px solid #000000;
		width: 2.7vw;
		height: 1.0vw;
		color:#000000;
		text-align:center;	
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;	
	}		
	.play_stop {
		background:#FFFFFF url(../images/play.png) top no-repeat;
		background-size: contain;
		/*http://stackoverflow.com/questions/5559764/background-image-scaling-while-maintaining-aspect-ratio*/
		/* contain restricts image to original aspect ration */

	}	
	.prev {
		background:#FFFFFF url(../images/previous.png) top no-repeat;
		background-size: contain;			
	}
	.next {
		background:#FFFFFF url(../images/next.png) top no-repeat;
		background-size: contain;	
	}
	.start {
		background:#FFFFFF url(../images/start.png) top no-repeat;
		background-size: contain;		
	}
	.end {
		background:#FFFFFF url(../images/end.png) top no-repeat;
		background-size: contain;
	}	
	.plotlink{
		background:#FFFFFF url(../images/graph1.png) center no-repeat;
	}				
	table.plotcontrol { 
		width:100%;
  height:50%;

	/* cellspacing */  
	}	
	table.plotcontrol tr td { 
		font-size:100%;
  line-height:100%;
	}	
	table.settingstable tr td { 
		width:50%;
		text-align:left;
		font-size:4vw;
	}	
	table.anni{
		width:100%;
		height:30px;
	}
	td.steptime{
		width:60%;
		line-height:30px; 	
		font-size:4.0vw;
		font-weight:bold;
		color:#000000;
	}
	table.list tr td{
		font-size:3vw;
		margin-top:2px;
		line-height:3vw;
	}
	.small{
		font-size: 3vw;
		line-height: 3.5vw;		
	}
	td.med, .med {
		font-size: 1.5vh;
		line-height: 3.5vh;
	}
	#selectedmodel,#runs{
		font-size:3vw;
	}
	.runbox {
			width: 21%;
			margin: 0 2%;
			float: left;
			text-align: center;
			line-height: 3vw;
	}	
	td.button{
		width:6vw;
		height:1.0vw;
		line-height:3vw; 	
		font-size:3vw;
		font-weight:bold;
		color:#FFFFFF;
		border:2px solid black;
		background-color:#6E6E6E;
		border-radius:2vw;
		cursor:pointer;
  }
	td.wide {
		width:7vw;
	}	
	td.plotrun{
  	width: 10vw;
  } 
}

/*********************** PORTRAIT SMARTPHONE ****************************/
@media screen and (max-width: 550px) and (orientation:portrait), (max-width: 550px){

#container {
	background-color:#FFF;	
}  
#mob_header {
 display:block; 
	height: 35px;
	/*Height of top section*/
	background-color:#0F2F3A; 
	width: 100%; 
	text-align:center; 
	color:#FFFFFF; 
 line-height:34px;
	font-size:5.0vw;	 
}
  #mob_title{
  position:relative;
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
    height:35px;
  }
  #mob_title_image{
    position:absolute;
    top:2px;
    left:0px;
    height:35px;
  }
  #mob_title_main{
    position:absolute;
    top:0px;
    left:40px;
    height:35px; 
    line-height:35px;
  }
#chartcontainer {
	top:0px;
}
select#mob_charts {
    width:100%;
}
#header_ad{
 	display:none;	
}
#metdesk_logo{
 	display:none;		
}
#info_container,#privacy_container {
  overflow-y:auto;
  top:35px;
}
#info,#privacy{
	width:90%;
	left:5%;
}   
#closeinfo,#closeprivacy{
	position:absolute;
	top:20px;
	right:20px;
	width:13x;
	height:13px;
	font-size:15px;
	cursor:pointer;
}  
#title {
	font-size:2.1vw;	
	line-height:35px;		
	position: absolute;
	color:#FFFFFF;
	top: 0px;
 height:94px;
	left: 0;
	width: 100%;/*to match left column*/
	margin:0; 
 padding:10px 0;
	text-align:center;
	cursor:default;
	user-select: none;
	background-color:#0F2F3A; 

}	

#chartcontainer img {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
}
	#header_ad{
    display:none;
	}
	#loading{
		position:relative;
		top:50px;
		width:50%;
		left:25%;
		background-color:#0F2F3A;
		border-radius: 3px;	
		border:1px solid #FFFFFF;		
		text-align:center;
		color:#000000;
		height:30px;
		line-height:18px;
		font-size:14px;
		padding:5px;
		animation: pulse 2s 5;		
	}	
	.menu{
    width: 22px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;		
	}	
	#backtochart{
		position:absolute;
		left:8px;
		top:9px;		
	}	
	.leftarrow{
		width: 0; 
		height: 0; 
		border-top: 8.5px solid transparent;
		border-bottom: 8.5px solid transparent;   
		border-right:19px solid #fff; 
	}
	#opensearch{
		display:inline;	
		position:absolute;
		right:35px;
		top:7px;	
		height:20px;
		width:20px;
		background-image: url("../images/search.png");
		background-repeat: no-repeat;
		background-position: center;	
		background-size: 17px 17px;	
	}	
	#mobopengif{
		display:inline;
		font-weight:bold;
		vertical-align: middle;
		position:absolute;
		top:7px;
		right:60px;
		height:21px;
		line-height:21px;
		text-align:center;
		font-size:16px;	
		font-weight: bold; 		
		color:#FFFFFF;		
	}	
	#content {
    width: 100%
  }
  #control {
    display:none;
  }
	#mobcontrol_L{
display:none;
  }	  
  #mobcontrol {
		display:block;  	
		position:absolute;
		left:0px;		
		/*z-index:1000;*/
		height:50px;
  }	
	#locationSearch{
		display:none;
	}	
	#locationSearchMob{
		font-size:6vw;
		background-color:#0F2F3A;
		border-radius: 3px;	
		border:2px solid #0F2F3A;
		color:#ffffff;
		height:40px;
		width:98%;
		position:absolute;
		top:3px;
		left:1%;	
		display:none;	
		z-index:1000;
		padding-left: 10px;
	}	
.easy-autocomplete-container {
    margin-left: 1%;
    width:98%;
    top:44px;
}
.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
    display: block;
    font-size: 16px;
    padding: 8px 12px;    
}	
/*welcome message */
#welcome{
    position: absolute;
    top: 0px;
    font-size: 14px;
    height: 150px;
    width: 100%;
    background: #FFFFFF;
    color: #000;
    border: 2px solid #0F2F3A;
    border-radius: 4px;
    margin: 0 auto;
	display:none;	    
}
#welcomeMessage{
    position: absolute;
    top: 0px;
    height: 60px;
    width: 100%;
    padding: 5px;
    text-align: center;
    line-height: 25px;	
}
#welcomeSearch{
    position: absolute;
    top: 70px;
    height: 40px;
    width: 100%;
    padding: 5px 25px;
    text-align: center;
}    
#welcomeSearch input{
    position: absolute;
    left: 0px;
    box-shadow: none;
    font-size: 18px;
    height: 35px;
    width: 90%;
    background-color: #0F2F3A;
    border: 1px;
    padding-left: 10px;
    margin: 0px 5%;
    color: #ffffff;	
}
#welcomeSkip{
	width: 15%;
    height: 35px;
    position: relative;
    float: right;
    line-height: 30px;
    margin-right: 5%;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 15px;
}
#welcomeSkip:hover{
    border: 2px solid #0F2F3A;
    cursor:pointer;
}
#eac-container-locationSearchWelcome{
	top:40px;
	text-align: left;
}
.easy-autocomplete{
    width: 80%;	
}


/********************/
	#control-accordian {
		border-right:1px solid #0F2F3A;
		border-bottom:1px solid #0F2F3A;
  }
	#play {
		display:none;
	}
	#mobplay{
		width:100%;
		height:40px;
		display:block;
		border-spacing: 0px;
		background-color: #FFF;
	}	
	#hovercontrolcontainer{
		height: 30px;
		background-color:rgba(0,0,0,0);
	  animation: pulse 2s 1;
	  width:90%;
	  left:5%;	
	}
	#hovercontrolover{
		height:30px;
		top:4px;		
	}
	#hovercontrolunder{
		top:4px;	
		height:6px;	
	}
	#loadingbarprev{/*this sits under #loadingbar*/
		top:0px;	
		height:6px;
	}
	#loadingbar{
		top:0px;	
		height:6px;
	}
	#follower{
	  width:18px;
	  height:18px;
	  top:-6px;
	  left:-9px;
	  border-radius:9px;
	}
	.tick{
		display:none;
	}
	.tickdate{
		display:none;	  
	}	
	#preloadcontrol,#keyboardcontrol{
		display:none;
	}
	#annicontrol{
		text-align:center;	
		width:100%;
		display: inline-block	
	}	
  #chartcontainer {
    width: 100%;
		border-right:0;
  } 
	#chartcont{
  	position: relative;
	}
 #adcontainer {
	display:none;
 } 

  #plotcontainer {
		display:none;
   top:0px;
    width: 100%;
		height:100%;
  }	
  #regioncontrol {
    display:none;
  } 

	#opensettings {
		background: #0F2F3A url(../images/settings.png) left no-repeat;
		position: absolute;
		background-size: 100%;	
		top: 5px;
		left:auto;
		right:5px;
		width: 25px;
		height: 25px;
		cursor:pointer;
	}	
	#opencontact {
		display:none;
	}	
	#openinfo {
		display:none;
	}		
  #openblog {
		display:none;
	}			
	#mobsettings {
		display:none;
		position:absolute;
		background:  #0F2F3A;
		color:#FFFFFF;	
		top:0px;
		left:10%;
		width: 80%;
		z-index:3000;	
		border:2px solid black;
		border-radius:4px;
	}	
	#facebooklink {
		background: #0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 5px;
		right: 55px;
		width: 26px;
		height: 23px;
		cursor:pointer;
		display:none;
	}

	#twitterlink {
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		position: absolute;
		background-size: 100%;			
		top: 5px;
		right: 10px;
		width: 25px;
		height: 25px;
		cursor:pointer;
		display:none;
	}	
	
	#chartshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 2vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	
	#chartfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 8.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#charttwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 10%;
		right: 15vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#plotshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 1vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plotfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 6.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plottwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 0.1%;
		right: 13vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#mobplotimg {
		background:#FFFFFF url(../images/plot.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 3px;
		right: 10px;
		width: 7vw;
		height: 7vw;
		cursor:pointer;
	}		

	#plotcontrol{
		top:0px;
		left:0px;
		height:8%;
		width:100%;
	}
	table#plottitle{
		top:0px;
		left:0px;
		height:4%;
		width:100%;
		font-size:2vw;		
	}
	.plots{
		position: relative;
		width:100%;
		height:14.5%;	/*leaves 1.2% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;		
	}
	.plots_ens{
		position: relative;
		width:100%;
		height:28.5%;	/*leaves 1.5% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;
	}

	.ensselect{
		position:absolute;
		top:0px;
		right:10%;
		z-index:1000;
		width:25%;
		font-size:2.5vw;
		padding-left:3px;
	}
	.gefs_legend{
		position:absolute;
		top:10%;
		left:25%;
		width:50%;
		text-align:center;
		font-weight:bold;
		z-index:1000;
		font-size:2vw;
		line-height:2vw;	
	}
	.gefs_line{
		width:3vw;
		height:1vw;
		line-height:1vw;
	}	


	#mobstepcontrolcont{
		position:absolute;		
		width:100%;
		display:inline-block;
		background-color:#fff;
	}
	#mobopengif,#mobopenplot,#mobstepcontrol,#mobplay,#mobopenprev{
		position:absolute;
	}
	#mobplay,#mobopenplot,#mobopenprev{/*hide until dimentions calculated by resize*/
		display:none;
		user-select: none;
	}
	#mobopenprev{
	    background: url(../images/prev_run.png) no-repeat center;
	 }
	#mobopenplot img,#mobopenprev img{
		user-select: none;
		max-height:100%;
		width:auto;	
	}
	#mobplay img{
		max-height:100%;
		width:auto;

	}	

.tickdate{
	font-size:2.0vw;
} 
	table#mobsteps {  
		/*table-layout: fixed;*/
		width: 100%;
		/*height: 100px;*/
	  	/*padding: 0;*/
    	/*border-collapse: separate;*/		
	}	
	table#mobsteps tr td {
		font-size:1.8vh;	
		padding:0;
		border:1px solid #0F2F3A;
		border-radius:2px;
		text-align:center;
		/*width:11%;*/
	}

	table#mobgif {  
		display:none;
		position:absolute;
		top:0px;
		left:0px;		
		width: 100%;
		height: 70px;		
	  padding: 0;
		background-color:#fff;
		color:#0F2F3A;
		border:2px solid #0F2F3A;
		border-top:0px;

    border-collapse: separate;
		z-index:1000;
	}	
	#gifgomob{
		background-color:	#0F2F3A;
		border:1px solid #0F2F3A;
	  border-radius:2px;	
		color:#fff;
		width:90%;
		height:34px;
		margin:18px 5%;
		font-size:15px;
		text-align:center;
		line-height:34px;
		vertical-align:center;
		
	}	
	.giftitles{
		font-size:10px;
		text-align:center;
		vertical-align:bottom;
	}
	.giftitles td{
    width:20%;
		height:30%;
	}	
	.gifforms{
		vertical-align:top;		
	}
	.gifforms input{
		width:90%;
		text-align:center;
		height:20px;
		line-height:13px;
		font-size:13px;
		padding:5%;
		margin:0 5%;
		vertical-align:center;
	}
	table#mobcontrol{
		background:#ffffff;
		width:100%;
		table-layout: fixed;		
	}
	table#mobcontrol tr td{
		width:25%;
		text-align:center;
		font-size:2vw;		

	}	
	#mobcontrol select{
		width:100%;
		font-size: 16px;
	}
	table#mobplay{
		width:100%;
	}	
	table#gif_mob{
		width:100%;
		height:100%;
		display:none;
	}	
	#gif{
		display:none;
	}
	#gifstartmob{
		display:table-cell;
	}
	#gifstepmob{
		display:table-cell;
	}
	#gifendmob{
		display:table-cell;
	}
	#gifspeedmob{
		display:table-cell;
	}
	form {
    display: table-cell;
    margin-top: 0em;
}
	.gif{
		text-align:center;
		color:#FFFFFF;
		font-size:3vw;
		background:#0F2F3A;	
		position: absolute;	
		cursor:pointer;
		border:1px solid #FFFFFF;	
	}
	.gifctr{
		text-align:center;
		/*
		color:#000000;
		font-size:2.4vw;
		background:#FFFFFF;	
		position: absolute;	
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #000000;	
		line-height:2.4vw;
		*/
	}
	.gifctr input[type="text"] {
		border:0px solid #000000;
		width: 2.7vw;
		height: 1.0vw;
		color:#000000;
		text-align:center;	
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;	
	}		
	.play_stop {
		background:#FFFFFF url(../images/play.png) top no-repeat;
		background-size: contain;
		/*http://stackoverflow.com/questions/5559764/background-image-scaling-while-maintaining-aspect-ratio*/
		/* contain restricts image to original aspect ration */

	}	
	.prev {
		background:#FFFFFF url(../images/previous.png) top no-repeat;
		background-size: contain;			
	}
	.next {
		background:#FFFFFF url(../images/next.png) top no-repeat;
		background-size: contain;	
	}
	.start {
		background:#FFFFFF url(../images/start.png) top no-repeat;
		background-size: contain;		
	}
	.end {
		background:#FFFFFF url(../images/end.png) top no-repeat;
		background-size: contain;
	}	
	.plotlink{
		background:#FFFFFF url(../images/graph1.png) center no-repeat;
	}				
	table.plotcontrol { 
		width:100%;
  height:50%;

	/* cellspacing */  
	}	
	table.plotcontrol tr td { 
		font-size:80%;
  line-height:100%;
	}	
	table.settingstable tr td { 
		width:50%;
		text-align:left;
		font-size:4vw;
	}	
	table.anni{
		width:100%;
		height:30px;
	}
	td.steptime{
		width:60%;
		line-height:30px; 	
		font-size:4.0vw;
		font-weight:bold;
		color:#000000;
	}
	table.list tr td{
		font-size:3vw;
		margin-top:2px;
		line-height:3vw;
	}
	.small{
		font-size: 3vw;
		line-height: 3.5vw;		
	}
	td.med, .med {
		font-size: 1.5vh;
		line-height: 3.5vh;
	}
	#selectedmodel,#runs{
		font-size:3vw;
	}
	.runbox {
			width: 21%;
			margin: 0 2%;
			float: left;
			text-align: center;
			line-height: 3vw;
	}	
	td.button{
		width:6vw;
		height:1.0vw;
		line-height:3vw; 	
		font-size:3vw;
		font-weight:bold;
		color:#FFFFFF;
		border:2px solid black;
		background-color:#6E6E6E;
		border-radius:2vw;
		cursor:pointer;
  }
	td.wide {
		width:7vw;
	}	
	td.plotrun{
  	width: 10vw;
  } 
	
}
@media screen and (max-width: 900px) and (min-width: 551px) and (orientation:landscape) and (min-aspect-ratio:11/9){
  /* 2nd level responsive layout break point- drop left column down */
#container {
	background-color:#FFF;	
}  
  #mob_header {
display:none;
		/*Height of top section*/
	}
	#title{
display:none;
	}	
#header_ad{
 	display:none;	
}
#metdesk_logo{
 	display:none;		
}	
#chartcontainer {
	top:0px;
} 
#chart1_locations{
 margin: auto;
 position: absolute;
	top:0px;
	left:0px;
	pointer-events:none;   
}
	#header_ad{
    display:none;
	}

	#loading{
		position:relative;
		top:50px;
		width:50%;
		left:25%;
		background-color:#0F2F3A;
		border-radius: 3px;	
		border:1px solid #FFFFFF;		
		text-align:center;
		color:#000000;
		height:30px;
		line-height:18px;
		font-size:14px;
		padding:5px;
		animation: pulse 2s 5;		
	}	
	.menu{
    width: 22px;
    height: 3px;
    background-color: #FFF;
    margin: 4px 0;		
	}	
	#backtochart{
display:none;
	}	
	.leftarrow{
		width: 0; 
		height: 0; 
		border-top: 8.5px solid transparent;
		border-bottom: 8.5px solid transparent;   
		border-right:19px solid #fff; 
	}
	#opensearch{
display:none;
	}	
	#mobopengif{
display:none;
	}	
	#content {
    width: 100%
  }
  #control {
    display:none;
  }
  #mobcontrol{
display:none;
  }	
	#mobcontrol_L{
display:block;
position: absolute;
  }	  
	#locationSearch{
		display:none;
	}	
	#locationSearchMob{
		display:none;
	}	
	#control-accordian {
		border-right:1px solid #0F2F3A;
		border-bottom:1px solid #0F2F3A;
  }
	#play {
		display:none;
	}
	
	#mobplay{
		height:30px;
		display:block;
		position:absolute;
		top:0px;
		border-spacing: 0px;
		background-color: #FFF;
	}	
		table#mobplay {
			width:100%;
		}		
		table#mobplay tr td{
		width:60px;
		height:30px;/*not sure why need to set here as */

	}	
	#hovercontrolcontainer{
		height: 10%;
		background-color:rgba(0,0,0,0);
	  animation: pulse 2s 1;
	}
	#hovercontrolover{
		height:30px;
		top:4px;		
	}
	#hovercontrolunder{
		top:4px;	
		height:6px;	
	}
	#loadingbarprev{/*this sits under #loadingbar*/
		top:0px;	
		height:6px;
	}
	#loadingbar{
		top:0px;	
		height:6px;
	}
	#follower{
	  width:18px;
	  height:18px;
	  top:-6px;
	  left:-9px;
	  border-radius:9px;
	}
	.tick{
		display:none;
	}
	.tickdate{
		display:none;	  
	}		
	#preloadcontrol,#keyboardcontrol{
		display:none;
	}
	#annicontrol{
display:none;
	}	
  #chartcontainer {
    width: 100%;
		border-right:0;
  } 
	#chartcont{
  	position: relative;
	}
	#welcomeSearch input{
	    font-size: 18px;
    }	
	#adcontainer{
display:none;
	}	
  #plotcontainer {
		display:none;
    width: 100%;
		height:100%;
  }	
  #regioncontrol {
    display:none;
  } 

	#opensettings {
display:none;
	}	
	#opencontact {
		display:none;
	}	
	#openinfo {
		display:none;
	}		
  #openblog {
		display:none;
	}		
	#mobsettings {
		display:none;
		position:absolute;
		background:  #0F2F3A;
		color:#FFFFFF;	
		top:0px;
		right:0px;
		width: 100%;
		z-index:3000;	
		height:100%;	
		border-left:2px solid black;
		border-bottom:2px solid black;
		border-bottom-left-radius:4px;
	}	
	#facebooklink {
		background: #0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 5px;
		right: 55px;
		width: 26px;
		height: 23px;
		cursor:pointer;
		display:none;
	}

	#twitterlink {
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		position: absolute;
		background-size: 100%;			
		top: 5px;
		right: 10px;
		width: 25px;
		height: 25px;
		cursor:pointer;
		display:none;
	}	
	
	#chartshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 2vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	
	#chartfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 10%;
		right: 8.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#charttwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 10%;
		right: 15vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#plotshare {
		background:#0F2F3A url(../images/share.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 1vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plotfacebookshare {
		display:none;
		background:#0F2F3A url(../images/facebook.png) left no-repeat;
		background-size: 100%;		
		position: absolute;
		bottom: 0.1%;
		right: 6.5vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}
	#plottwittershare {
		display:none;	
		background:#0F2F3A url(../images/twitter.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		bottom: 0.1%;
		right: 13vw;
		width: 6vw;
		height: 6vw;
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #FFFFFF;
	}	
	#mobplotimg {
		background:#FFFFFF url(../images/plot.png) left no-repeat;
		background-size: 100%;	
		position: absolute;
		top: 3px;
		right: 10px;
		width: 7vw;
		height: 7vw;
		cursor:pointer;
	}		

	#plotcontrol{
		top:0px;
		left:0px;
		height:5%;
		width:100%;
	}
	table#plottitle{
		top:0px;
		left:0px;
		height:5%;
		width:100%;
		font-size:1.5vh;		
	}
	.plots{
		position: relative;
		width:100%;
		height:14.5%;	/*leaves 1.2% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;		
	}
	.plots_ens{
		position: relative;
		width:100%;
		height:28.5%;	/*leaves 1.5% white space at the bottom so lower plot xaxis titles not right agains the bottom */
		display:none;
	}

	.ensselect{
		position:absolute;
		top:0px;
		right:10%;
		z-index:1000;
		width:25%;
		font-size:2.5vw;
		padding-left:3px;
	}
	.gefs_legend{
		position:absolute;
		top:10%;
		left:25%;
		width:50%;
		text-align:center;
		font-weight:bold;
		z-index:1000;
		font-size:2vw;
		line-height:2vw;	
	}
	.gefs_line{
		width:3vw;
		height:1vw;
		line-height:1vw;
	}	



	#mobstepcontrolcont{
		position:absolute;		
		display:block;
	}
	
	#mobopengif,#mobopenplot,#mobstepcontrol{
		position:absolute;
	}
	#mobopenplot{/*hide until dimentions calculated by resize*/
		display:none;
	}

	#mobopenplot img{
		max-height:100%;
		width:auto;

	}
	#mobplay img{
		max-height:100%;
		width:auto;

	}	
	#mobstepcontrol{
		width:100%;
		height:100%;
	}
	table#mobsteps {  
		width: 100%;
		height: 100%;
	  padding: 0;
    border-collapse: separate;		
	}	
	table#mobsteps tr td {
		font-size:1.5vw;	
		padding:0;
		border:1px solid #0F2F3A;
		border-radius:2px;
		text-align:center;
	}

	table#mobgif {  
		display:none;
		position:absolute;
		top:0px;
		left:0px;		
		width: 100%;
		height: 70px;		
	  padding: 0;
		background-color:#fff;
		color:#0F2F3A;
		border:2px solid #0F2F3A;
		border-top:0px;

    border-collapse: separate;
		z-index:1000;
	}	
	#gifgomob{
		background-color:	#0F2F3A;
		border:1px solid #0F2F3A;
	  border-radius:2px;	
		color:#fff;
		width:90%;
		height:34px;
		margin:18px 5%;
		font-size:15px;
		text-align:center;
		line-height:34px;
		vertical-align:center;
		
	}	
	.giftitles{
		font-size:10px;
		text-align:center;
		vertical-align:bottom;
	}
	.giftitles td{
    width:20%;
		height:30%;
	}	
	.gifforms{
		vertical-align:top;		
	}
	.gifforms input{
		width:90%;
		text-align:center;
		height:20px;
		line-height:13px;
		font-size:13px;
		padding:5%;
		margin:0 5%;
		vertical-align:center;
	}
	table#mobcontrol_L{
		background:#ffffff;
		/*z-index:100;*/
	}
	table#mobcontrol_L tr td{
		width:100%;
		text-align:center;
		font-size:1.5vw;		

	}	
	#mobcontrol_L select{
		width:100%;
		  font-size: 16px;
	}		
	table#gif_mob{
		width:100%;
		height:100%;
		display:none;
	}	
	#gif{
		display:none;
	}
	#gifstartmob{
		display:table-cell;
	}
	#gifstepmob{
		display:table-cell;
	}
	#gifendmob{
		display:table-cell;
	}
	#gifspeedmob{
		display:table-cell;
	}
	form {
    display: table-cell;
    margin-top: 0em;
}
	.gif{
		text-align:center;
		color:#FFFFFF;
		font-size:3vw;
		background:#0F2F3A;	
		position: absolute;	
		cursor:pointer;
		border:1px solid #FFFFFF;	
	}
	.gifctr{
		text-align:center;
		/*
		color:#000000;
		font-size:2.4vw;
		background:#FFFFFF;	
		position: absolute;	
		cursor:pointer;
		border-radius: 3px;	
		border:1px solid #000000;	
		line-height:2.4vw;
		*/
	}
	.gifctr input[type="text"] {
		border:0px solid #000000;
		width: 2.7vw;
		height: 1.0vw;
		color:#000000;
		text-align:center;	
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;	
	}		
	.play_stop {
		background:#FFFFFF url(../images/play.png) top no-repeat;
		background-size: contain;
		/*http://stackoverflow.com/questions/5559764/background-image-scaling-while-maintaining-aspect-ratio*/
		/* contain restricts image to original aspect ration */

	}	
	.prev {
		background:#FFFFFF url(../images/previous.png) top no-repeat;
		background-size: contain;			
	}
	.next {
		background:#FFFFFF url(../images/next.png) top no-repeat;
		background-size: contain;	
	}
	.start {
		background:#FFFFFF url(../images/start.png) top no-repeat;
		background-size: contain;		
	}
	.end {
		background:#FFFFFF url(../images/end.png) top no-repeat;
		background-size: contain;
	}	
	.plotlink{
		background:#FFFFFF url(../images/graph1.png) center no-repeat;
	}			
	table.plotcontrol { 
		width:100%;

	/* cellspacing */  
	}	
	table.plotcontrol tr td { 
		font-size:3vw;
	}	
	table.settingstable tr td { 
		width:50%;
		text-align:left;
		font-size:4vw;
	}	
	table.anni{
		width:100%;
		height:30px;
	}
	td.steptime{
		width:60%;
		line-height:30px; 	
		font-size:4.0vw;
		font-weight:bold;
		color:#000000;
	}
	table.list tr td{
		font-size:3vw;
		margin-top:2px;
		line-height:3vw;
	}
	.small{
		font-size: 3vw;
		line-height: 3.5vw;		
	}
	td.med, .med {
		font-size: 1.5vh;
		line-height: 3.5vh;
	}

	.runbox {
			width: 21%;
			margin: 0 2%;
			float: left;
			text-align: center;
			line-height: 3vw;
	}	
	td.button{
		width:6vw;
		height:1.0vw;
		line-height:3vw; 	
		font-size:3vw;
		font-weight:bold;
		color:#FFFFFF;
		border:2px solid black;
		background-color:#6E6E6E;
		border-radius:2vw;
		cursor:pointer;
  }
	td.wide {
		width:7vw;
	}	
	td.plotrun{
  	width: 10vw;
  } 
	
}