<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
      
      <%= stylesheet_link_tag 'jquery-ui-1.8.11.custom' %>
      <%= stylesheet_link_tag 'style' %>
      <%= javascript_include_tag 'jquery-1.5.1.min' %>
      <%= javascript_include_tag 'jquery-ui-1.8.11.custom.min' %>


<style type="text/css">
	.toggler { width: 400px; height:113px; position: relative; float:left;}
		#button { padding: .5em 1em; text-decoration: none; }
		#effect {  width: 400px; height: 113px;  position: relative;}
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; } 
	*
	{
		margin:0;
		padding:0;
	}
	body
	{
	font-size:10pt;
	background-color:#999999
	}
	#header
	{
	width:1230px;
	height:280px;
	margin:0 auto;
	}
	#h2{
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:14px;
	border-width:1px;
	border-style:solid;
	border-color:#CCCCCC;
	
	
	}
	#h3{
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:113px;
	overflow:hidden;
	background-color:#000000;
	border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;
	border-right-style:solid;border-right-width:1px;border-right-color:#CCCCCC;
	}
	#h4{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:31px;
	border-width:1px;
	border-style:solid;
	
	}
	#h5{
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:55px;
	border-width:1px;
	border-style:solid;
	border-color:#CCCCCC;
	}
	#h6{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:33px;
	border-width:1px;
	border-style:solid;
	border-color:#F6B03C;
	}
	#zx{
	margin-top:30px;
	margin-left:100p;
	margin-right:100px;
	margin-bottom:15px;
	width:1040px;
	height:10px;
	border-width:1px;
	border-style:dashed;
	position:absolute;
	left: 231px;
	top: 198px;
	}
	#body
	{
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	height:auto;
	}
	#b2
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height220px;
	border-width:1px;
	border-style:dashed;
	}
	#b3
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:206px;
	border-width:1px;
	border-style:solid;
	}
	#b4
	{
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:34px;
	border-width:1px;
	border-style:solid;
	}
	#footer
	{
	padding-top:15px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:50px;
	border-width:1px;
	border-style:dashed;
	}
	#tb1
	{
		height:31px;
		width:100%;
	}
	#tb2
	{
		margin-top:0;
		margin-bottom:auto;
		height:55px;
		width:100%;
	}
	#tb3
	{
		height:33px;
		width:100%;
	}
	#td1{
	padding-left:5px;
	}
	#dtx
	{
	margin-top:auto;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	width:50px;
	height:50px;
	border-width:1px;
	border-style:dashed;
	border-color:#CCCCCC;
	left: 112px;
	top: 180px;
	}
	#b2_1
	{
	margin-left:auto;
	margin-right:auto;
	width:1180px;
	height:27px;
	border-width:1px;
	border-style:solid;
	}
	#b2_2
	{
	margin-left:auto;
	margin-right:auto;
	width:1165px;
	height:93px;
	border-width:1px;
	border-bottom-style:solid;
	border-color:#CCCCCC;
	}
	#b2_3
	{
	margin-top:3px;
	margin-left:auto;
	margin-right:auto;
	width:1165px;
	height:93px;
	border-width:1px;
	border-bottom-style:solid;
	border-color:#CCCCCC;
	}
	#b2_2_d1
	{
	width:auto;
	height:auto;
	border-width:1px;
	border-style:hidden;
	}
	#b2_2_d1_avatar
	{
	width:auto;
	height:auto;
	border-width:1px;
	border-style:solid;
	border-color:#CCCCCC;
	margin-top:15px;
	margin-left:19px;
	margin-bottom:9px;
	}
	#b2_2_d2
	{
	padding-bottom:10px;
	width:680px;
	height:82px;
	}
	#b2_2_d2_inf1
	{
	margin-top:0px;
	width:100%;
	height:22px;
	border-color:#CCCCCC;
	border-bottom-style:dashed;
	border-bottom-width:1px;
	}
	#b2_2_d2_inf2
	{
	margin-top:0px;
	width:100%;
	height:40px;
	border-color:#CCCCCC;
	border-bottom-style:dashed;
	border-bottom-width:1px;
	}
	#b2_2_d2_inf3
	{
	margin-top:0px;
	width:100%;
	height:22px;
	}
	#b2_2_d3_1
	{
	width:100%;
	height:30px;
	}
	#b2_2_d3_2
	{
	width:100%;
	height:30px;
	}
	#footer1
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-style:dashed;
	}
	#footer2
	{
	width:100%;
	height:170px;
	}
	#ft_1
	{
	width:100%;
	height:52px;
	}
	#ft_2
	{
	width:100%;
	height:80px;
	border-width:1px;
	border-top-style:solid;
	border-color:#CCCCCC;
	}
	#ft_3
	{
	width:100%;
	height:30px;
	border-width:1px;
	border-top-style:solid;
	border-color:#CCCCCC;
	}
	#ft_1_t
	{
	width:100%;
	height:52px;
	}
	#ft_1_t_d1
	{
	
	width:500px;
	height:38px;
	}
	#ft_1_t_d2
	{
	
	width:125px;
	height:30px;
	border-width:1px;
	border-style:solid;
	border-color:#CCCCCC;
	}
	#f_t
	{
	height:50px;
	border-width:1px;
	border-style:dashed;
	}
	#fuzhu
	{
	height:10px;
	}
	#f_fz
	{
	height:10px;
	}
</style>
<script>
	$(function() {
		// run the currently selected effect
		function runEffect() {
			// get effect type from 
			var selectedEffect = $( "#effectTypes" ).val();
			
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "transfer" ) {
				options = { to: "#button", className: "ui-effects-transfer" };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// run the effect
			$( "#effect" ).effect( selectedEffect, options, 500, callback );
		};

		// callback function to bring a hidden box back
		
		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
			}, 10000 );
		};

		// set effect from select menu value
		$( "#effect" ).mouseover(function() {
			runEffect();
			return true;
		});
	});
	</script>