/* CSS Document WRF Player */
/*#mobile, #animation1, #animation2, #animation3, #animation4, #flows, ul#tabs	
{ display:none; visibility:hidden; }

#tab_inner_content, .tab_inner_content { width:828px; overflow:hidden; margin:0; }
.tab_inner_content img{ padding:0; margin:0 auto; }
 */
 
/*#animation1, #animation2, #animation3, #animation4{*/
 /* This is the bit that moves. It has 5 images, 
 * so 53 * 600 = 31800. You could use JavaScript
 * to work this out instead by counting images. */
/* width:43884px;*/
 
 /*width:31800px;
  The transition property. Firefox and Chrome support this without
 * the prefix, but Safari and Opera still require it */
/* -webkit-transition:all 0.0s ease-in-out;
-moz-transition:all 0.0s ease-in-out;
 -o-transition:all 0.0s ease-in-out;
 transition:all 0.0s ease-in-out;
}

#animation1 img, #animation2 img, #animation3 img, #animation4 img{
	width:828px;
	margin:0 auto;
}

#flows{ padding:5%; }

@media screen and (max-width: 979px){
	*/
	ul#tabs li.active
	{ display:inline-block; border:thin solid rgba(51,51,51,1);  }

	ul#tabs li.active
	{ border:thin solid #333; width:auto; }

	ul#tabs
	{ display:inline-block; visibility:visible; margin-bottom:0; width:auto; }
	
	ul#tabs li
	{ display:inline; margin:-1px 15px; padding:5px 10px; cursor:default; }
	
	#animation1
	{ margin-bottom:60px; width:100%; }
	
/*	#top #main .container main,
	#top #main .container .sidebar
*/
	#top #main #flows,
	#top #main .tabcontainer
	{ display:none; visibility:hidden; height:0; }

/*	div#res-error
	{ display:block; visibility:visible; padding:20% 5%; text-align:center; margin:0; height:400; }
*/
	div#res-error h1
	{ font-size:54px; }

	div#res-error p
	{ font-size:20px;}

	{ margin-top:0; width:auto !important; }


@media screen and (max-width: 979px){
	#top #main #player-controls { display:none !important; visibility:hidden !important; } 
}